@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500');

body{
font-family: 'Lato', sans-serif;
font-weight: 400; font-size: 15px; color: #000; overflow-x: hidden;}
html, body {   width:100%;   height: 100%; }
input, a {outline: none;}
header .container{left: 0px; right: 0px; margin: auto; z-index: 99;} 
.pdR0{padding-right: 0}
.navbar-brand{width: 10rem;}
.nav-menu,.nav-close{color: #FFF; font-size: 2rem; position: relative; padding: 0.7rem 0px; top: -30px;}
.nav-line{border-top: 1px solid #FFF; width:2.5rem; display: block;}
.nav-menu::before,.nav-menu::after{content: ""; height: 1px; position: absolute; border-top: 1px solid #FFF; width:2rem; display: block; z-index: 9999; right: 0px;}
.nav-menu::before{top: 0px;}
.nav-menu::after{bottom: 0px; }
.nav-menu,.nav-list{display: none;}
.nav-close { position: relative; width: 3rem; height: 3rem; display: none; z-index: 999; top: 60px; right: 30px;}

.nav-close::before,.nav-close::after{content: ""; height: 1px; position: absolute; border-top: 1px solid #FFF; width:2.5rem; display: block; z-index: 9999; left: 0px; top: 0px;}
.nav-close::before{transform: rotate(45deg);}
.nav-close::after{transform: rotate(130deg);}
.nav-close.active,.nav-menu.active,.nav-list.active{display: block;}

.shine{background :linear-gradient(0deg, rgba(0,0,0, 0.5) 0%,rgba(0,0,0, 1) 80%)} 
.menu-bg{height:0px; width: 0px; background: #357b9d; margin:0px; position: fixed; z-index: 99; transition:all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19); right: 7rem; top: 5rem; border-radius: 100%;}
.menu-bg.active{border-radius:0px;  width: 6000px; height: 6000px; margin-right: -3000px; margin-top: -3000px; right: 0px; top: 0px; /* animation: fadeIn;*/}
.overflow-hide{overflow: hidden;}
.banner{position: relative;} 
.banner-content{background: url(../images/banner.png) no-repeat; width: 19rem; height: 24rem; position: absolute; top: 12rem; right: 7rem; transition: all 0.5s;}
.banner-caption{color: #FFF; position: absolute; left: -14rem; width: 15rem; text-align: right; font-weight: lighter; top: 6rem; z-index: 9;}
.banner-caption h2 {
    font-size: 2.4rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #d3d5d6;
}
.banner-caption a{color: #00b2c8;  bottom: -3rem;  position: absolute;  width: 5.8rem;  left: 8.5rem;  font-size: 1.1rem; transition: all 0.5s;}
.element{position: absolute; width: 100%; height: 100%; top: 0px;}
.banner-caption a:hover{text-decoration: none;}
.banner-caption a::after{content: ""; height: 2px; background: #00b2c8; display: block; width:0%;transition: all 0.5s;}
.banner-caption a:hover::after{width: 100%;}
.p0{padding: 0;}
.img-responsive{width: 100%;}
.panel-section{line-height: 1.6rem; padding: 6rem 0px; position: relative;}
.section-heading{color: #002e5b;  font-family: 'Roboto',sans-serif; font-weight: 600;}
.sub-heading{color: #7a7a7a; font-weight: 300; padding: 1rem 0px;}
.img-color-bg{position: absolute; width: 15rem; height: 100%; top: 0px; z-index: -1;}
.img-blue-bg{background: #00769e; right: 12rem; }
.img-yellow-bg{background: #dc711c; left: 10rem; }
.panel-section img{box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2)}
.panel-section a{color: #002e5b; font-size: 14px; text-transform: uppercase; font-weight: 600;}
.big-heading{text-align: center; background: #0a4f6f; font-weight: 400; margin: 0px; font-size: 26px;}
.gray-bg{background: #f4f4f4;}
.lightRed-bg{background: #bab2b2;}
.service-section img{box-shadow: none; border: 1px solid #d3d3d1;}
.client-section img{padding:0.5rem 1rem; border-radius: 2rem 0px 2rem 0px; display: block; background: #FFF;}
.contact-form{background: url('../images/contact-bg.jpg') no-repeat; background-size: 100%;}
.contact-form .form-control{background: none; border: 0px; border-bottom: 1px solid #bab2b2; border-radius: 0px;}

.form-control:focus{box-shadow: none; border-color: #007bff}

form .btn{background: #f06800; border: 0px; color: #FFF;}
form .btn:focus{box-shadow: none;}
.contact-form .form-control:focus,.contact-form .form-control:focus::-moz-placeholder{box-shadow: none; border-bottom: 1px solid #77adc6; color: #77adc6;}
.contact-form .form-control::-moz-placeholder{color: #FFF;}
footer{background: #00769e; color: #FFF;}
.copyrights{color: #ffe530;}
.social-icons a{padding: 0px 0.5rem; color: #FFF; font-size: 18px;}
.social-icons a:hover{text-decoration: none;}

.nav-list ul{ padding: 0px; position: fixed; z-index: 999; left: 0; text-align: center; width: 100%; top: 0px; bottom: 0px; height: 20px; margin: auto;}
.nav-list ul li{display: inline-block;  list-style: none;  padding:0px 3rem;}
.nav-list ul li a{color: #FFF;  font-size: 3rem;  font-weight: 800; position: relative;}
.nav-list ul li a:hover{text-decoration: none;}
.nav-list ul li a::after{content: ""; height: 2px; background: #fff; display: block; width:0%;transition: all 0.5s;}
.nav-list ul li a:hover::after{width: 100%;}

.transition{transition: all 0.5s}
.opacity0{opacity: 0;}
.overlay-div{z-index: 9999; position: relative;}
.client-section{text-align: center;}
#returnmessage span{color: red;}
#returnmessage{color: green}
.contact_form h2{
    color: #d6d6d6;
    font-weight: lighter;
    font-size: 25px;
    margin-bottom: 20px;
}
#products .card-title{
    font-size: 16px; font-weight: bold;    
}

.address {
    color: #767b80;
    padding: 150px 0 0 0;
    font-size: 16px;
    line-height: 25px;
}

.btn-primary {
    color: #fff !important;
    background-color: #00769e;
    border-color: #0c5460;
}
.btn-primary:hover {
    color: #fff;
    background-color: #e17118;
    border-color: #e17118;
}
/*.overlay-div */
::-webkit-scrollbar {
    width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}



@media screen and (max-width:768px){
    /* header .img-fluid{height: 100%; max-width: auto;} */
    .banner-content{position:inherit; background-size: 100%; background-position:right; top: 0rem; right: 1rem; float: right; width: 7rem; height: 12rem; }
    .banner-caption{top: 4rem;}
    .banner-caption h2{font-size: 1rem;}
    .banner-caption a{bottom: -1.5rem;font-size: 0.8rem;}
    .img-color-bg{display: none;}
    .nav-list ul li{padding: 0px 1rem;}
    .nav-list ul li a{font-size: 1rem;}
    .opacity0{opacity: 1;}
    .contact-form{background-size: cover;}
    .services-list,.social-icons,footer{text-align: center !important;}
}