body{font-family: 'Montserrat', sans-serif; font-size: 16px; color: #212121; background: #f1fdfd;}

#wrapper{width: 100%; float: left; overflow: hidden;} 
ul{margin: 0; padding: 0; list-style-type: none;}
.container{max-width: 100%;}

h2{width: 100%; float: left; color: #69dad8; font-size: 28px; font-weight: 800; text-transform: uppercase; margin: 0; padding: 0;}
h3{width: 100%; float: left; color: #69dad8; font-size: 28px; font-weight: 800; text-transform: uppercase; margin: 0; padding: 0; text-align: center;}
.row{clear: both;}
.row-flex, .row-flex > div[class*='col-'] {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  flex:1 1 auto;}
.row-flex-wrap {-webkit-flex-flow: row wrap;  align-content: flex-start; flex:0;}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {margin:-.0px;}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {width:100%;}
.flex-col {display: flex; display: -webkit-flex; flex: 1 100%; flex-flow: column nowrap;}
.flex-grow {display: flex; -webkit-flex: 2; flex: 2;}

.btn-row{width: 100%; float: left;}
.white-btn{width: auto; display: inline-block; background: #fff; color: #212121; text-decoration: none; padding: 20px 50px 16px; border-radius: 5px; font-weight: 600; text-transform: uppercase; line-height: 18px;}
.white-btn:hover{text-decoration: none; color: #fff; background: #212121;}

/*=== Header ===*/
header{width: 100%; float: left; padding: 20px 0; background: #06403e; z-index: 11;}
header .container{padding: 0 !important;}
.navbar-brand{padding: 0 0 0 15px;}
.navbar-light .navbar-brand img{max-width: 250px;}
.navbar{padding: 0; background: none !important;}
.nav-item{padding: 0 15px; text-align: center; margin: 0;}
.navbar-light .navbar-nav .nav-link{color: #fff; font-weight: 600; text-transform: uppercase; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 20px 0; margin: 0;}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active{color: #69dad8; opacity: 1;}
.navbar-light .navbar-toggler{border: none; background: #fff; margin-right: 15px;}
.navbar-toggler:focus{box-shadow: none;}
.navbar-nav{background: #212121; margin: 15px 0 0 0;}
/*=== Header End ===*/

/*=== Banner ===*/
#banner{width: 100%; float: left; }
.banner-slide{ padding: 150px 0 450px; position: relative;}
.banner-slide.slide-1{background: url("../images/banner.jpg") no-repeat right bottom; background-size: cover;}
.banner-slide.slide-2{background: url("../images/banner-2-mobile.jpg") no-repeat center bottom; background-size: cover;}
.banner-slide.slide-3{background: url("../images/banner-3.jpg") no-repeat center bottom; background-size: cover;}
.banner-container{width: 100%; float: left; position: relative;}
.banner-container h1{width: 100%; float: left; font-size: 36px; text-transform: uppercase; font-weight: 800;  margin: 0; padding: 0; line-height: 40px; color: #69dad8; text-align: center;}
.banner-container h1 span{font-size: 18px; color: #fff; font-weight: 600;}
.banner-container p{width: 100%; float: left; font-weight: 700; color: #fff; font-size: 15px; max-width: 800px; padding: 20px 0 0 0; text-align: center;}
.banner-btn{width: 100%; float: left; padding: 15px 0 0 0; text-align: center;}
.banner-btn a{width: auto; display: inline-block; background: #69dad8; color: #212121; text-decoration: none; padding: 20px 50px 16px; border-radius: 5px; font-weight: 600; text-transform: uppercase; line-height: 18px;}
.banner-btn a:hover{text-decoration: none; color: #212121; background: #fff;}
#video-banner video{position: absolute;  left: 0; top: 0;  height: 100%; z-index: -100; object-fit: cover;  width: 100%;}
#video-banner{width: 100%; float: left; position: relative; padding: 200px 0;}
/*=== Banner End ===*/

/*=== Middle ===*/
#middle{width: 100%; float: left;}
.logo-icon{width: 100%; float: left;}
.logo-icon img{max-width: 50px;}
.middle-top{width: 100%; float: left; padding: 80px 0;}
.tagline{width: 100%; float: left; font-size: 16px;  font-weight: 700;}
.middle-top p{width: 100%; float: left; padding: 30px 0 0 0; margin: 0; line-height: 30px;}
.middle-top  img{border-radius: 5px;}
.backend-link{width: 100%; float: left; padding: 30px 0 0 0}
.backend-link a{color: #212121; text-decoration: underline; font-size: 16px; font-weight: 700;}
.backend-link a:hover{color: #212121; text-decoration: none;}
.middle-bottom{width: 100%; float: left; background: #fff; padding: 80px 0;}
.info-box{width: 100%; float: left; background: #f1fdfd; border-radius: 5px; padding: 30px 15px; margin: 30px 0 0 0}
.info-box h4{width: 100%; float: left; font-weight: 700; font-size: 18px; color: #002523;}
.info-box p{width: 100%; float: left; line-height: 30px; margin: 0; padding: 5px 0 0 0;}
.info-box-icon{width: 100%; float: left; padding: 0 0 20px;}
.call-to-action{width: 100%; float: left; background: url("../images/cta-bg.jpg") no-repeat center top; background-size: cover; padding: 120px 0;}
.cta-title{width: 100%; float: left; text-align: center; font-size: 26px; font-weight: 700; text-transform: uppercase; line-height: 40px; padding: 0 0 30px; color: #06403e;}
.cta-title span{font-weight: 900;}
.cta-tel{padding: 15px 0 0 20px; display: inline-block; color: #06403e; font-weight: 700;}
.cta-tel a{color: #06403e; text-decoration: none; font-size: 22px;}
.image-pad{padding-top: 30px;}
/*=== Middle End ===*/

/*=== Footer ===*/
footer{width: 100%; float: left; background: #06403e;  color: #fff;}
.footer-top{width: 100%; float: left; padding: 20px 0 50px;}
.footer-bottom{width: 100%; float: left; border-top: 1px solid rgba(0, 0, 0, 0.3); padding: 30px 0; font-size: 14px;  opacity: 0.6;}
.footer-title{width: 100%; float: left; font-size: 16px; font-weight: 700; text-transform: uppercase; position: relative; padding: 30px 0 10px; margin: 0 0 20px;}
.footer-title:after{width: 50px; height: 3px; background: #fff; float: left; position: absolute; left: 0; bottom: 0; content: "";}
.footer-nav{width: 100%; float: left;}
.footer-nav ul li{width: 100%; float: left; padding: 0 0 15px;}
.footer-nav ul li a{color: #fff; text-decoration: none;}
.footer-nav ul li a:hover{color: #69dad8; text-decoration: none;}
.footer-contact-row{width: 100%; float: left; line-height: 30px; margin: 0 0 10px;}
.footer-contact-row a{color: #fff; text-decoration: none;}
.footer-contact-row a:hover{color: #69dad8; text-decoration: none;}
.footer-social-media{width: 100%; float: left;}
.footer-social-media a{margin-right: 5px; width: 40px; height: 40px; background: #003938; border-radius: 4px; float: left; text-align: center; padding: 7px 0;}
.footer-social-media a img{max-width: 20px; text-align: center;}
.copyright{width: 100%; float: left;}
.author{width: 100%; float: right; padding: 10px 0 0 0}
.author a{color: #fff; text-decoration: underline;}
/*=== Footer End ===*/

/*=== Inner pages ===*/
.inner-banner{width: 100%; float: left; padding: 80px 0;}
.inner-banner.about-us{background: url("../images/banner-about.jpg") no-repeat left top; background-size: cover; }
.inner-banner.manufacturing{background: url("../images/banner-manufacturing.jpg") no-repeat left center; background-size: cover; }
.inner-banner.education{background: url("../images/banner-education.jpg") no-repeat left center; background-size: cover; }
.inner-banner h1{width: 100%; float: left; color: #69dad8; font-weight: 900; text-transform: uppercase; font-size: 35px;}
.inner-bottom{width: 100%; float: left; padding: 80px 0 0;}
.quote-box{width: 100%; float: left; border-left: 8px solid #69dad8; padding: 10px 0 10px 30px;  font-size: 22px; font-weight: 700;}
.quote-box span{font-weight: 900; font-style: italic;}
.manufacturing-top{width: 100%; float: left; padding: 80px 0 100px 0;}
.inner-container{width: 100%; float: left; padding: 80px 0;}
.inner-container h2{ font-size: 24px;}
.inner-container p{width: 100%; float: left; padding: 20px 0 10px 0; margin: 0; line-height: 30px;}
.inner-container h3{font-size: 24px; color: #212121; text-align: left;}
.manufacturing-middle{width: 100%; float: left; padding: 100px 0 100px 0; background: #fff;}
.manufacturing-bottom{width: 100%; float: left; padding: 100px 0 0;}
.manufacturing-bottom .info-box{background: #fff;}
.manufacturing-bottom .quote-box{margin-bottom: 30px;}
.education-row{width: 100%; float: left; background: #fff; border-radius: 5px; margin: 20px 0 0; padding: 30px 15px; font-size: 18px; border-left: 4px solid #69dad8;}
.education-row span{font-weight: 800;}
.education-image{width: 100%; float: left; padding: 30px 0 0 0;}
.education-top{width: 100%; float: left; padding: 0 0 80px;}
.education-middle{width: 100%; float: left; padding: 80px 0 80px 0; background: #fff;}
.education-middle h4{font-weight: 700; font-size: 20px; padding: 40px 0 0 0; float: left;}
.education-bottom{width: 100%; float: left; padding: 80px 0 0;}
.education-bottom-box{width: 100%; float: left; background: #fff; border-radius: 5px; margin: 20px 0 0; padding: 30px 15px 10px; font-size: 18px; border-left: 4px solid #69dad8;}
.education-bottom-box h4{font-weight: 700; font-size: 20px;}
.contact-box{width: 100%; float: left; background: #fff; border-radius: 5px; margin: 20px 0;}
.contact-box-title{width: 100%; float: left; background: #69dad8; padding: 15px 15px; color: #06403e; font-size: 20px; font-weight: 700; border-radius: 5px 5px 0 0;}
.contact-box-title.branch{background: #06403e; color: #fff;}
.contact-address-box{width: 100%; float: left; padding: 15px 15px 30px;}
.contact-address-row{width: 100%; float: left; line-height: 28px; margin: 20px 0 0 0; padding: 0 0 0 40px;}
.contact-address-row a{color: #212121; text-decoration: underline;}
.contact-address-row a:hover{color: #000; text-decoration: none;}
.contact-address-row.icon-location{background: url("../images/icon-location.png") no-repeat left top;}
.contact-address-row.icon-telephone{background: url("../images/icon-telephone.png") no-repeat left top; padding-bottom: 2px;}
.contact-address-row.icon-fax{background: url("../images/icon-fax.png") no-repeat left top; padding-bottom: 2px;}
.contact-address-row.icon-email{background: url("../images/icon-email.png") no-repeat left top; padding-bottom: 2px;}
.map-image{width: 100% !important; float: left; margin: 20px 0 0 0;}
.map-image img{max-width: 100%; border-radius: 5px;}
/*=== Inner pages End ===*/

@media screen and (min-width: 768px){
	h2{font-size: 40px;}
	h3{font-size: 40px;}

	/*=== Header ===*/
	.navbar-light .navbar-brand img{max-width: 300px;}
	/*=== Header End ===*/
	
	/*=== Banner ===*/
	.banner-slide{padding: 200px 0 350px;}
	.banner-container h1{font-size: 50px;line-height: 45px; text-align: left;}
	.banner-container h1 span{font-size: 30px;}
	.banner-btn{padding: 25px 0 0 0; text-align: left}
	.banner-container p{font-size: 18px; text-align: left;}
	/*=== Banner End ===*/
	
	/*=== Middle ===*/
	.middle-top{padding: 150px 0;}
	.middle-bottom{padding: 150px 0;}
	.info-box h4{font-size: 20px;}
	.info-box{padding: 30px;}
	.cta-title{font-size: 44px; line-height: 60px;}
	.cta-tel{padding: 0 0 0 20px;}
	.image-pad{padding-top: 0;}
	.inner-container{padding: 150px 0;}
	/*=== Middle End ===*/
	
	/*=== Footer ===*/
	.copyright{width: auto;}
	.author{width: auto; padding: 0;}
	/*=== Footer End ===*/
	
	/*=== Inner pages ===*/
	.inner-banner{padding: 130px 0;}
	.inner-container h2{ font-size: 30px;}
	.inner-container h3{font-size: 28px; }
	.inner-banner h1{font-size: 50px;}
	.inner-bottom{padding: 110px 0 0;}
	.quote-box{font-size: 28px;}
	.education-row{padding: 30px;}
	.education-bottom-box{padding: 30px 30px 10px;}
	.education-top{padding: 0 0 130px;}
	.education-middle{padding: 130px 0 130px 0;}
	.education-bottom{padding: 130px 0 0;}
	/*=== Inner pages End ===*/

}

@media screen and (min-width: 992px){
	
	/*=== Header ===*/
	header .container{padding: 0 15px !important;}
	.navbar-brand{padding: 0}
	.navbar-nav{background: none; margin: 0;}
	.nav-item{padding: 0 0 0 35px;}
	.navbar-light .navbar-nav .nav-link{font-size: 14px; opacity: 0.8; border: none; padding: 12px 0;}
	/*=== Header End ===*/
	
	/*=== Banner ===*/
	.banner-slide{height: 780px;}
	.banner-slide.slide-1{background: url("../images/banner.jpg") no-repeat center; background-size: cover; }
	.banner-slide.slide-2{background: url("../images/banner-2.jpg") no-repeat center; background-size: cover; }
	.banner-slide.slide-3{background: url("../images/banner-3.jpg") no-repeat center bottom; background-size: cover; }
	.banner-container{top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 50px 0 0 0;}
	.banner-container h1{font-size: 64px; line-height: 60px;}
	.banner-container h1 span{font-size: 50px;}
	#video-banner{height: 100vh; padding: 0;}
	.banner-container p{font-size: 22px; }
	/*=== Banner ===*/
	
	/*=== Inner pages ===*/
	.contact-address-box{padding: 15px 30px 30px;}
	.contact-box-title{padding: 15px 30px;}

	/*=== Inner pages End ===*/
}

@media screen and (min-width: 1360px){
	.container{max-width: 1320px}
	.banner-container p{width: 100%; float: left; font-weight: 700; color: #fff; font-size: 24px; max-width: 800px; padding: 25px 0 0 0;}

}