﻿/*---------------------------------------------------------------------- Font Family */
@font-face{
    font-family: "HelveticaNeue Regular";
    src: url("../fonts/HelveticaNeue/HelveticaLTStd-Roman.ttf") format('truetype');
}
@font-face{
    font-family: "HelveticaNeue Medium";
    src: url("../fonts/HelveticaNeue/HelveticaNeueLTPro-Md.ttf") format('truetype');
}
@font-face{
    font-family: "HelveticaNeue Bold";
    src: url("../fonts/HelveticaNeue/HelveticaNeueLTPro-Bd.ttf") format('truetype');
}
@font-face{
    font-family: "HelveticaNeue Light";
    src: url("../fonts/HelveticaNeue/HelveticaNeueLTPro-Lt.ttf") format('truetype');
}
/*---------------------------------------------------------------------- Font Family */

*{
    margin: 0;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
         border-radius: 0 !important;
}

html, body{
    font-weight: normal;
    font-family: "HelveticaNeue Regular", Helvetica, Arial, sans-serif;
}
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
@media (max-width: 438px) and (orientation: portrait) {
    body {
        margin-bottom: 80px;
    }
}

.hr-30{
    color: #f7921e;
    background-color: #f7921e;
    width: 30%;
    height: 1px;
    margin-left:auto;
    margin-right:auto;
}
.hr-title{
    position: relative;
    font-size: 30px;
    width: 20%;
    text-align: center;
    color: #f7921e;
    z-index: 1;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    display: inline-block;
}
.hr-title:before{    
    margin-left: -50%;
    text-align: right;
}
.hr-title:before,
.hr-title:after{
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 2px;
    content: "\a0";
    background-color: #f7921e;
}

.safari .hr-title:before,
.safari .hr-title:after{
    top: 40% !important;
}

.title-light{
    font-family: "HelveticaNeue Light", Helvetica, Arial, sans-serif;
    font-weight: lighter;
}

.btn-default{
    color: #ffffff;
    background-color: #F7921E;
    border-color: #eea236;
}
.btn-default:focus,
.btn-default.focus {
  color: #fff;
  background-color: #ec971f;
  border-color: #985f0d;
}
.btn-default:hover {
  color: #fff;
  background-color: #ec971f;
  border-color: #ec971f;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #fff;
  background-color: #ec971f;
  border-color: #985f0d;
}

/* Wrapper Container */
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 60px auto 0px;
}
@media (max-width: 438px) and (orientation: portrait){
    .wrapper {
        margin: 60px auto 0px;
    }
}/* Wrapper Container */

/*---------------------------------------------------------------------- Header */
/* Nav bar */
.navbar-brand{
    height: auto;
}
.navbar-default {
  background-color: #FB6620;
  border-color: transparent;
}
.navbar-default .navbar-brand .img-logo{
    height: 23px;
}
@media only screen and (min-width: 781px) {
    .hidden-780{
        display: block !important;
    }
    .visible-780{
        display: none !important;
    }
}
@media only screen and (max-width: 780px) {
    .hidden-780{
        display: none !important;
    }
    .visible-780{
        display: block !important;
    }
}
/* Login Form */
.div-login-form .btn{
    width: 158px;
    text-transform: uppercase;
}
.div-forgot-pwd .btn:active,
.div-forgot-pwd .btn:focus,
.div-forgot-pwd .btn:hover,
.div-login-form .btn:active,
.div-login-form .btn:focus,
.div-login-form .btn:hover{
    background-color: #A4A4A4;
    border-color: #c7c7c7;
}
/*---------------------------------------------------------------------- Header */

/* Index: Sections */
/*---------------------------------------------------------------------- Contact */
#contact {
    background: #1A1A1A 50% 0 fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    /*box-shadow: 0 0 50px rgba(0,0,0,0.8);*/
    padding-bottom: 100px;
}
#contact .title{
    color: #f7931e;
    font-size: 35px;
}
#contact #contact-wrapper{
    position: relative;
}
#contact #map-canvas{
    width:100%;
    height: 443px;
}
#contact .info-window{
    background-color: #757575;
    color: #ffffff;
    padding: 15px;
}
#contact .info-window .company-name{
    font-family: "HelveticaNeue Bold", Helvetica, Arial, sans-serif;
    font-size: 20px;
    /*opacity: 0.8;*/
}
#contact .info-window .company-address br,
#contact .info-window .company-info br{
    display: none;
}
#contact .info-window .company-address,
#contact .info-window .company-info{
    font-size: 16px;
    opacity: 0.9;
}
#contact .info-window .company-info a{
    color: #ffffff;
    text-decoration: underline;
}
@media (min-width: 1301px){
    #contact .info-window {
        position: absolute;
        display: inline-block;
        height: 325px;
        opacity: 0.9;
        top: 50px;
        right: 150px;
        z-index: 1;
    }
    #contact .info-window .container{
        width: 514px;
    }
    #contact .info-window .company-address br{
        display: inline;
    }
}
@media(min-width: 901px) and (max-width:1300px) and (orientation: Landscape){
    #contact #map-canvas{
        width: 60%;
        display: inline-block;
    }
    #contact .info-window{
        width: 40%;
        float: right;
        height: 443px;
        padding-top:60px;
    }
    #contact .info-window .company-address br,
    #contact .info-window .company-info br{
        display: inline;
    }
}
@media (max-width: 900px){
    #contact #map-canvas{
        height: 343px;
    }
}
#contact .container-enquiry{
    margin-top: 5%;
}
@media(max-width: 767px){
    #contact .contact-form{
        text-align: center;
        align-content: center;
    }
}
#contact .content{
    margin-top: 5%;
    color: #ffffff;
    font-size: 14px;
    opacity: 0.8;
}
#contact .form-enquiry{
    margin-top: 5%;
}
#contact .form-enquiry .form-group{
    margin-left: 0;
    margin-right: 0;
}
#contact .btn-submit-enquiry{
    text-transform: uppercase;
    padding: 10px 70px;
}
#contact .btn-submit-enquiry:active,
#contact .btn-submit-enquiry:focus,
#contact .btn-submit-enquiry:hover{
    background-color: #A4A4A4;
    border-color: #c7c7c7;
}
#contact .site-map img{
    width: 200px;
}
#contact .site-map ul{
    margin-top: 50px;
}
#contact .site-map ul li{
    margin-top: 30px;
}
#contact .site-map ul li a{
    color: #ffffff;
    font-family: "HelveticaNeue Light", Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
}
#contact .site-map ul.list-nested{
    margin:0;
}
#contact .site-map ul.list-nested li{
    margin:0;
}
#contact .site-map ul.list-nested li a{
    color: #ffffff;
    font-size: 12px;
    text-decoration: none;
}
#contact .site-map .hr{
    margin: 7px 0;
    width: 30px;
    margin-left:0;
    margin-right: auto;
}
@media(max-width:991px){
    #contact .site-map{
        margin-top: 70px;
    }
}
#contact .hr-title{    
    width: calc(100% - 70%);
}
@media (min-width: 581px) and (max-width:767px){
    #contact .hr-title{    
        width: calc(100% - 68%);
    }
}
@media(max-width: 580px){
    #contact .hr-title{
        width: calc(100% - 50%);
    }
}
@media(max-width: 500px) and (orientation: portrait){
    #contact .title {
        display: inline-block;
        width: 90%;
        margin-bottom: 0px;
    }
}
/*---------------------------------------------------------------------- Contact */
/* Index: Sections */

/*---------------------------------------------------------------------- Alert Text */
.div-login-form .alert-text,
.div-forgot-pwd .alert-text,
#contact .alert-text{
    color: yellow !important;
    float: left;
    margin-top: 5px;
    font-style: italic;
}
/*---------------------------------------------------------------------- Alert Text */

/*---------------------------------------------------------------------- Modal */
.modal-alert .modal-dialog,
.modal-alert .modal-content{
    width: 500px;
}
.modal-alert .modal-title,
.modal-alert .modal-body,
.modal-alert .modal-footer{
    text-align: center;
}
.modal-alert .modal-body .alert{
    display: inline-block;
    width: 420px;
}
.modal-alert .modal-footer{
    border: none;
}
.modal-alert .alert-success{
    color : #1A1A1A;
    background-color: #c7c7c7;
}
.modal-alert .alert-danger{
    color: #000000;
    background-color: #ffffff;
    border-color:#ff0000;
}
@media (max-width:768px){
    .modal-alert .modal-dialog,
    .modal-alert .modal-content{
        width: auto;
    }
    .modal-alert .modal-body .alert{
        width: auto;
    }
}
/*---------------------------------------------------------------------- Modal */

/*---------------------------------------------------------------------- Footer */
.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #FB6620;
}
.container .text-muted{
    margin: 20px 0;
    color: #ffffff;
    opacity: 0.8;
    text-align: center;
}
@media (max-width: 438px) and (orientation: portrait) {
    .footer {
        height: 80px;
    }
}
/*---------------------------------------------------------------------- Footer */
/*---------------------------------------------------------------------- Back to Top */
.back-to-top {
    color: #FB6620;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    background-color: #ffffff;
    opacity: 0.8;
    font-weight: bold;
    font-size: x-large;
    border-radius: 50% !important;
    z-index: 2;
}
.back-to-top span{
    margin-top: 5px;
}
.back-to-top:hover,
.back-to-top:active,
.back-to-top:focus{
    color: #FB6620;
    background-image: none;
    outline: 0;
    outline: none;
    -moz-outline-style: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
/*---------------------------------------------------------------------- Back to Top */