/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body { font-size: 1em; background-color: #ddd; font-family: 'Raleway', sans-serif; padding-top: 298px;}
a { color: #c89955; transition: all 250ms ease}
a:hover { color: #a8793a; text-decoration: none}
/* Image Alignment */
.alignnone , a img.alignnone {margin: 5px 0 30px;max-width:100%;}
.aligncenter, div.aligncenter {display: block; margin: 5px auto 30px auto;max-width:100%;}
.alignright , a img.alignright{float:right; margin: 5px 0px 0px 30px;max-width:100%;}
.alignleft , a img.alignleft {float: left; margin: 5px 30px 30px 0;max-width:100%;}
a img.aligncenter {display: block;  margin-left: auto; margin-right: auto;max-width:100%;}
.alignnone, .aligncenter, .alignright, .alignleft { border: 5px solid #fff; box-shadow: 0 0 0px 1px #c89955}

h1, h2, h3, h4, h5, h6 {}
h1 { font-size: 2.77em}
h2 { font-size: 2.22em}
h3 { font-size: 1.77em}
h4 { font-size: 1.33em}

h1 {text-transform: uppercase; color: #2a71a8; font-weight: 500; letter-spacing: 0.08em; line-height: 1em; margin-top: 5px;}
h2 {text-transform: uppercase; font-weight: 500; color: #2a71a8; letter-spacing: 0.08em; line-height: 1em;}
h3 {text-transform: uppercase; font-weight: 500; color: #2a71a8; font-size: 1.77rem; letter-spacing: 0.08em; line-height: 1em; }
h4 {}
h5 {color: #010101; font-size: 1.1em; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 900;  line-height: 1em}

.content-area h1 {}
.content-area h2 {}
.content-area h3 {padding-bottom: 0px;margin-bottom: 0px;}
.content-area h4 {}
.content-area h5 {margin-bottom: 0px; padding-bottom: 0px;}

.inner-page h1 { padding-bottom: 20px}

a.btn, .btn { display: inline-block; padding: 15px 30px; border-radius: 3px; background-color: #c89955; color: #fff; transition: all 250ms ease;}
a.btn:hover,.btn { background-color: #a8793a; text-decoration: none}

.fluid-container {	margin: 0 auto;	position: relative;  }
.fluid-container {	padding-left: 15px; padding-right: 15px; }
.fluid-container:before { content: ' '; display: table;}
.fluid-container:after {clear: both; content: ' '; display: table; box-sizing: border-box;}

.small-container { max-width: 950px; margin: 0 auto; }


@keyframes headerBar { 
	0% { width: 100%; top: 0px}
	50% { width: 100%; margin-top: -100px;}
	60% { width: 10%; float: left}
	100%{ margin-top: 0%; width: 10%;  }
}

.navbar .navbar-phone { width: 40px; height: 36px; left: 15px; color: #fff; background-color: #000; border-radius: 2px; display: block; font-size: 28px; position: absolute; left: 15px; top: 2px; display: none}
.navbar .hamburger { top: 2px;}
.navbar * { transition: all 250ms ease;}
.navbar { background-color: #ece6d5; padding-top: 20px; padding-bottom: 0px; position: fixed; top: 0px; left: 0px; right: 0px; z-index: 99; transition: all 250ms ease}
.navbar-header { float: none; width: 100%; text-align: center; transition: none; }
.navbar-collapse { width: 100%; float: none; text-align: center;}
.navbar-nav { margin-bottom: 0px; list-style-type: none; padding-bottom: 40px; padding-top: 10px; padding-left: 0px}
.navbar-nav li { display: inline-block; float: none; padding: 10px 1.1%;}
.navbar-nav li a { font-weight: 600; font-size: 0.9em; color: #000; text-transform: uppercase; transition: all 250ms ease; }
.navbar-nav li a:hover { text-decoration: none; color: #b1894e }
.navbar-nav li.highlight a { color: #fff; font-weight: 300; padding: 10px 25px; background-color: #c89955; border-radius: 3px;}
.navbar-nav li.highlight a:hover { background-color: #b1894e;}



.nav-bar-desktop ul li { display: inline-block; margin-left: 20px;}
.nav-bar-desktop ul { text-align: right; }
.nav-bar-desktop ul li a { font-weight: 600; font-size: 0.9em; color: #000; text-transform: uppercase;}
.nav-bar-desktop ul li a:hover { color: #c89955}
.nav-bar-desktop li.request_btn a {color: #fff;
	font-weight: 300;
	padding: 10px 25px;
	background-color: #c89955;
	border-radius: 3px;}
.nav-bar-desktop li.request_btn a:hover { background-color: #b1894e;}
.nav-bar-desktop li.social_icon a {background-color: black; padding:5px; border-radius: 3px; color: white; padding: 5px 15px; font-size: 24px; position: relative; top: 4px;}
.nav-bar-desktop .navbar-brand img { width: 300px}

.navbar.sticky { padding-top: 0px; z-index: 999}
.navbar.sticky .navbar-nav { padding: 0px; margin-top: 0px;}
.navbar.sticky .navbar-header { width: 10%; float: left; padding-top: 10px} 
.navbar.sticky .navbar-header img { max-width: 100%; height: auto; }
.navbar.sticky .navbar-collapse { text-align: right; width: 90%; float: right;}
.navbar.sticky li { padding: 10px 5px; line-height: 30px;}

.navbar-two-level .navbar-header { display: none}
.nav-bar-desktop > .row { display: flex; align-items: center;}
.navbar-two-level.sticky .navbar-collapse { text-align: center; float: none; width: 100%}
.navbar-two-level.sticky .navbar-brand img { width: 240px; display: block;}
.navbar-two-level.sticky .nav-bar-desktop ul { margin-bottom: 0px; margin-top: 0px;}
.navbar-two-level.sticky .nav-bar-desktop ul  li { margin-left: 5px; }
#mobile_menu { display: none}


.hero-bar:before { display: block; content: ' '; background-color: #ece6d5; width: 100px; height: 100px; position: absolute;left: 0px; top: 0px;z-index: 99}
.hero-bar:after { display: block; content: ' '; background-color: #ece6d5; width: 100px; height: 100px; position: absolute;right: 0px; top: 0px;z-index: 99}
.hero-bar { position: relative; margin-top: -100px;}
.slider { margin-left: -15px; margin-right: -15px; }
.slider.slick-initialized { visibility: visible;}

.slider .slick-slide { display: none}
.slider .slick-slide:first-child { display: block}
.slider.slick-initialized .slick-slide { display: block}



.slider
.slider img { width: 100%;}
.hero-bar .hero-container { position: relative; position: absolute; top: 30px;}
.hero-box { padding: 50px; position: absolute; top: 30px; background-color: rgba(200,153,85,0.8); color: #fff; left: 40px; text-align: center; opacity: 0; transition: all 250ms ease;}
.hero-box span { text-transform: uppercase; font-weight: 400; font-size: 2.2rem; display: block; white-space: nowrap; letter-spacing: 0.08em; line-height: 1.2em}
.hero-box em { font-style: normal; font-weight: 800; font-size: 1.3em; letter-spacing: 0.08em; text-transform: uppercase; display: inline-block; margin: 0px; padding: 0px; margin: 15px auto 25px;}
.hero-box em:after,.hero-box em:before { display: inline-block; height: 4px; width: 18px; position: relative; top: -5px; margin: 0 4px; background-color: #fff; content: ' ';}
.hero-box a { display: block; border: 1px solid #fff; border-radius: 3px; font-size: 1em; width: 220px; margin: 0 auto; padding: 10px; background-color: rgb(200,153,85); color: #fff; text-transform: uppercase; letter-spacing: 0.08em;}
.hero-box a:hover {background-color: #a8793a}

.custom-gate-manufacturing { background-color: #f3f3f3; padding-top: 70px; padding-bottom: 70px; border-bottom: 1px solid #d3d3d3;}
.text-center { text-align: center}
.custom-gate-manufacturing span { color: #c5a97f; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;}
.custom-gate-manufacturing h1 { }
.custom-gate-manufacturing p { max-width: 900px; margin: 0 auto 50px}
.custom-gate-manufacturing .col-md-4 { padding: 0 15px}

.service-box { background-color: #fff; text-align: center; padding-bottom: 30px; box-shadow: 0 0 0 rgba(0,0,0,0.5); transition: all 250ms ease; cursor: pointer;}
.service-box h3 { text-transform: uppercase; font-weight: 500; color: #2a71a8; font-size: 1.77rem; letter-spacing: 0.08em;}
.service-box:hover { box-shadow: 0 0 10px rgba(0,0,0,0.5)}
.service-box figure { position: relative; display: block; overflow: hidden; margin-bottom: 20px;}
.service-box figure img { width: 100%; height: auto;}
.service-box figure:before { height: 100%; top: 0px; bottom: 0px;width: 430px; display: block; content: ' '; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+52,ffffff+100&0+31,0.54+52,0+74 */
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 31%, rgba(255,255,255,0.54) 52%, rgba(255,255,255,0) 74%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 31%,rgba(255,255,255,0.54) 52%,rgba(255,255,255,0) 74%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 31%,rgba(255,255,255,0.54) 52%,rgba(255,255,255,0) 74%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 position: absolute; transition: transform 500ms ease; transform: translateX(-100%);}
.service-box:hover figure:before { transform: translateX(100%);}
.service-box p { margin-bottom: 20px;}

.multitude-styles { background-color: #ffffff; padding-top: 70px; overflow: hidden}
.multitude-styles span { color: #c5a97f; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;}
.multitude-styles h2 { text-transform: uppercase; color: #2a71a8; font-weight: 500; letter-spacing: 0.08em; line-height: 1em; margin-top: 5px;}
.multitude-styles p { max-width: 900px; margin: 0 auto 50px}
.gate-styles img { visibility: hidden}
.gate-styles { margin-left: -15px; margin-right: -15px; background-image: url(../img/gates-bg.webp); background-position: 10% center; margin-bottom: 50px; margin-top: 25px; background-repeat: no-repeat;}

.our-passion { background-color: #f3f3f3; padding-top: 70px; padding-bottom: 50px;}
.our-passion .text-center span { color: #c5a97f; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;}
.our-passion h3 { text-transform: uppercase; color: #2a71a8; font-weight: 500; letter-spacing: 0.08em; line-height: 1em; margin-top: 5px;}
.slick-feature { text-align: center;}
.slick-feature h4 {color: #2a71a8; text-transform: uppercase; line-height: 1.4rem; font-size: 1.3rem; letter-spacing: 0.08em; margin-bottom: 5px;}
.slick-feature img { display: block; margin: 0 auto 10px;}

.about-us { background-color: #d0d1cc; background-image:url(../img/about-bg2.webp); background-position: bottom center; padding-bottom: 30%; background-size: 100% auto; padding-top: 100px; background-repeat: no-repeat; color: #fff;}
.about-box { padding: 50px; background-color: #2a71a8; background-image: url(../img/about-gate-fx-bg.webp); background-repeat: no-repeat; background-position: bottom right;}
.about-box span { font-weight: 900; text-transform: uppercase;letter-spacing: 0.1em; font-size: 1.3rem; margin-bottom: 0px; padding-bottom: 0px;}
.about-box h3 { font-weight: 200; font-size: 1.8rem; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 0px; padding-top: 0px; line-height: 1.2em; color: #fff;}
.about-box p { line-height: 1.75em; font-size: 1.1rem; margin-bottom: 50px;}
.about-box a { padding: 15px 30px; border-radius: 3px; background-color: #c89955; color: #fff;}
.about-box a:hover { background-color: #a8793a}

.prefooter {padding:20px 0; background: white;}

.footer { background-color: #282828; padding-top: 50px;}
.footer-top { padding-bottom: 40px; position: relative; overflow: hidden;}
.footer-top:before { width: 100%; height: 1px; border-top: 1px solid #4f4f4f; border-bottom: 1px solid #000000; content: ' '; position: absolute; bottom: 0px; left: 15px; right: 15px;  }
.footer-top .col-md-6:last-child { text-align: right; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.2em}

.footer-middle { padding-bottom: 40px;}
.footer-middle:before { display: block; content: ' '; clear: both;}
.footer-middle h5 { color: #2a71a8; font-size: 1.3em; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 400}
.footer-middle ul { list-style-type: none; margin: 0px; padding: 0px}
.footer-middle ul li a { text-transform: uppercase; letter-spacing: 0.12em;}
.footer-middle ul li a:hover { color: #a8793a; text-decoration: none}
.footer-middle p { color: #c4c4c4; text-transform: uppercase; letter-spacing: 0.12em}

.footer-bottom > div:last-child { text-align: right}
.footer-bottom { position: relative; font-size: 0.9em; letter-spacing: 0.08em; text-transform: uppercase; color: #c4c4c4}
.footer-bottom:before { display: block; width: auto; left: 15px; right: 15px; position: absolute; height: 1px; border-bottom: 1px solid #000; border-top: 1px solid #4f4f4f; content: ' '; top: 0px}

/* Inner Pages */ 

body { background: #ece6d5}
.showcase-area { background-color: #fff; }
.showcase-area .fluid-container { margin-top: -100px; background-color: #fff; padding-top: 40px;}
.showcase-area .fluid-container:before { display: block; content: ' '; background-color: #fff; width: 50px; bottom: 0px; position: absolute;left: -50px; top: 0px;}
.showcase-area .fluid-container:after { display: block; content: ' '; background-color: #fff; width: 50px; bottom: 0px; position: absolute;right: -50px; top: 0px;}
.showcase-area img {max-width:100%;}

.hotlinks { list-style-type: none; padding: 0px; margin-bottom: 30px}
.hotlinks li { display: inline-block;}
.hotlinks li a { transition: all 250ms ease; display: block; position: relative; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em}
.hotlinks li:first-child a:before { font-size: 18px; content: '\f149'; font-family: 'Ionicons'; display: inline-block; margin-right: 8px;}
.hotlinks li a:after { content: '•'; display: inline-block; margin-right: 15px; color: #000; margin-left: 15px;}
.hotlinks li:last-child a:last-child:after { display: none}
.hotlinks li a:hover { text-decoration: none; color: #a8793a}

.showcase-gallery {  margin-bottom: 80px}
.galleria { width: 100%; height: 600px;}
.galleria-theme-classic { background: url(../img/galleria_bg.png)}


/* Galleria */
#cw_gallery{height:660px; margin-bottom:30px}

#galleria-loader { height: 1px!important }
.galleria-theme-classic { position: relative;}
.galleria-theme-classic img { -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; }

.galleria-stage{position: absolute;  bottom: 60px; max-width: 850px; width: 100%; margin: 0 auto; left: 0; right: 0;  margin-bottom:50px; top: 25px;overflow: hidden;}

.galleria-thumbnails-container { height:112px; bottom: 0px; background-color: #f3f3f3; position: absolute; left: 0; right: 0; z-index: 2; width:100%; max-width:80%; margin:0 auto}
.galleria-carousel .galleria-thumbnails-list { margin-left: 30px; margin-right: 30px; width:76%; margin: 15px auto; position:relative}
.galleria-thumbnails-list { margin-top: 20px;}

.galleria-thumbnails-list:before, .galleria-thumbnails-list:after { display: block; content: ' '; width: 1px; height: 20px; position: absolute; background-color: #333;}
.galleria-thumbnails-list:before { left: -10px;}

.galleria-thumbnails .galleria-image { background-color: #fff; width: 114px;height: 82px; padding: 5px; margin: 0 5px 0 0; float: left;  cursor: pointer;}
.galleria-thumbnails .galleria-image { border: 3px solid #fff;}									   
.galleria-thumbnails .galleria-image.active{ border-color: #323232;}
.galleria-thumbnails .galleria-image:hover{border-color: #323232;}

.galleria-theme-classic .galleria-loader {width:54px; height:54px; position: absolute; top:0; right:0; z-index: 2; display:none; margin:auto;
										  background:url(../img/bamboo_loader.gif) no-repeat; bottom:0; left:0;}
										  
.galleria-theme-classic .galleria-info {width: 80px; top: 15px; left: 0; right: 0; z-index: 2; position: absolute; margin: 0 auto; text-align: center; }
.galleria-theme-classic .galleria-info-text { background-color: #000; padding: 12px; display: none; /* IE7 */ zoom: 1; }
.galleria-theme-classic .galleria-info-title { font: 200 12px/1.1 Raleway, sans-serif; margin: 0; color: #fff; margin-bottom: 0px; text-transform: uppercase;}
.galleria-theme-classic .galleria-info-description { font: italic 12px/1.4 georgia, serif; margin: 0; color: #bbb; }
.galleria-theme-classic .galleria-info-close { width: 9px; height: 9px; position: absolute; top: 5px; right: 5px; background-position: -753px -11px; opacity: .5; filter: alpha(opacity=50); cursor: pointer; display: none; }
.galleria-theme-classic .notouch .galleria-info-close:hover { opacity: 1; filter: alpha(opacity=100); }
.galleria-theme-classic .touch .galleria-info-close:active { opacity: 1; filter: alpha(opacity=100); }
.galleria-theme-classic .galleria-info-link { background-position: -669px -5px; opacity: .7; filter: alpha(opacity=70); position: absolute; width: 20px; height: 20px; cursor: pointer; background-color: #000; }

.galleria-theme-classic.notouch .galleria-info-link:hover { opacity: 1; filter: alpha(opacity=100); }
.galleria-theme-classic.touch .galleria-info-link:active { opacity: 1; filter: alpha(opacity=100); }
.galleria-theme-classic .galleria-image-nav {  bottom: 0;  height: 50px;  left: 0;  margin: auto;  position: absolute;  top: 0;  width: 100%;}

.galleria-image-nav-left, .galleria-image-nav-right {cursor: pointer;position: absolute; left:0; z-index: 2; }

.galleria-image-nav-left:before , .galleria-image-nav-right:before , 
.galleria-thumb-nav-left:before, .galleria-thumb-nav-right:before {color: #fffffe;font-family: Ionicons;font-size: 62px;font-weight: 500;line-height: 80px;text-transform: uppercase;top:14px; padding:10px; width:100%;}

.galleria-image-nav-left:before, .galleria-image-nav-right:before { text-shadow: 0 0 4px rgba(0,0,0,0.5)}				
					
.galleria-image-nav-left:hover:before , .galleria-image-nav-right:hover:before , 
.galleria-thumb-nav-left:hover:before, .galleria-thumb-nav-right:hover:before {color: #c89955;}					

.galleria-image-nav-left:before , .galleria-thumb-nav-left:before{content:'\f3cf'}

.galleria-image-nav-right { left: auto; right:0; z-index: 2}
.galleria-image-nav-right:before , .galleria-thumb-nav-right:before{content:'\f3d1'}


.galleria-theme-classic.notouch .galleria-image-nav-left:hover, .galleria-theme-classic.notouch .galleria-image-nav-right:hover { opacity: 1; filter: alpha(opacity=100); }
.galleria-theme-classic.touch .galleria-image-nav-left:active, .galleria-theme-classic.touch .galleria-image-nav-right:active { opacity: 1; filter: alpha(opacity=100); }

.galleria-thumb-nav-left, .galleria-thumb-nav-right{cursor: pointer; display: none; position: absolute; left: 0; top:15px; bottom:15px; width:10%; z-index: 9; transition: all 250ms ease;}
.galleria-thumb-nav-left:hover, .galleria-thumb-nav-right:hover { background-color: #fff;}

.galleria-thumb-nav-left:before, .galleria-thumb-nav-right:before{font-size: 32px;color: #bbb; padding:0; top:0}
.galleria-thumb-nav-right {right: 0; left: auto; }

.galleria-theme-classic .galleria-thumbnails-container .disabled { opacity: .2; filter: alpha(opacity=20);  }
.galleria-thumb-nav-left:after, .galleria-thumb-nav-right:after { display: block; width: 1px; border-left: 1px solid #fff; border-right: 1px solid #c5c5c5; border-left: 1px solid #fff; content: ' '; position: absolute; top: 0px; bottom: 0px}
.galleria-thumb-nav-left:after { right: -5px;}
.galleria-thumb-nav-right:after { left: -5px; }

.galleria-theme-classic.notouch .galleria-thumbnails-container .disabled:hover { filter: alpha(opacity=20); background-color: transparent; }
.galleria-theme-classic .galleria-carousel .galleria-thumb-nav-left, .galleria-theme-classic .galleria-carousel .galleria-thumb-nav-right { display: block; text-align:center}

.galleria-theme-classic.galleria-container.videoplay .galleria-info, .galleria-theme-classic.galleria-container.videoplay .galleria-counter { display: none!important; }

.galleria-stage .galleria-image img {
    max-width: 100% !important; height:auto !important;
    /*width: 100% !important;*/
    width: auto!important;
    max-height: 100%!important;
}

.galleria-theme-classic .galleria-image-nav:after {background:url(../img/left_arow_bg.png) no-repeat; left:0; bottom:0; max-width:133px; max-height:57px; width:100%; height:100%; z-index:1}
.galleria-theme-classic .galleria-image-nav:before{background:url(../img/right_arow_bg.png) no-repeat; right:0; bottom:0; max-width:133px; max-height:57px; width:100%; height:100%; z-index:1}


.index-gallery .galleria-thumbnails { margin: auto;}
.index-gallery .galleria-thumbnails .galleria-image { margin-right: 0px; border: 0px; background: none; border-right: 1px solid #fff; border-left: 1px solid #c5c5c5;}
.index-gallery .galleria-thumbnails .galleria-image:last-child { border-right: 0px;}
.index-gallery .galleria-thumbnails .galleria-image:first-child { border-left: 0px;}

.index-gallery .galleria-thumbnails-container { height: 40px !important; height: 110px!important
/*thumbnail + 10px*/
}
.index-gallery .galleria-thumbnails .galleria-image { height: 40px !important; padding-top: 20px!important
/*thumbnail size*/
}
.index-gallery .galleria-thumbnails-list { margin-top: 34px;}

.proof-boxes ul { width: 100%; margin: 0px; padding: 0px; text-align: center; font-size: 0px; position: relative; margin-bottom:-30px}
.proof-boxes ul li { min-height: 200px; overflow: hidden; width: 33%; display: inline-block; padding: 15px; border-radius: 4px; background-color: #fff; font-size: 1rem; vertical-align: top; margin-bottom: 50px; margin-top: 30px; transition: all 250ms ease; position: relative;}
/*.proof-boxes ul:before { display: block; width: auto; height: 1px; border-top: 1px solid #ddd; content: ' '; position: relative; position: absolute; left: 0px; right: 0px; top: 50%; }*/
.proof-boxes ul li:before  { content: ' '; display: block; position: absolute; background-image: url(../img/gate-icon-bg.svg); background-repeat: no-repeat; top: 0px; right: 0px; bottom: 0px; left: 0px; transition: all 250ms ease; background-position: bottom left; opacity: 0.1; background-size: auto 90%; opacity: 0;}
.proof-boxes ul li .initial { transform: translateY(0%); transition: all 300ms ease; transition-delay: 100ms;}

.proof-boxes figure {  left: 0px; right: 0px; top:0px; bottom: 0px; display: block; transform: translateY(150%); position: absolute; transition: all 300ms ease;}
.proof-boxes figure p { color: #fff; }
.proof-boxes ul li:hover:before { opacity: 0.1;}
.proof-boxes ul li:hover { background-color: #1d5f92; position: relative}
.proof-boxes ul li:hover h3 { color: #fff;}
.proof-boxes ul li:hover .initial { transform: translateY(-120%)}
.proof-boxes ul li:hover figure { transform: translateY(21%)}

.proof-boxes ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-items: stretch}
.proof-boxes ul li { display:block}

.borderbottom { border-bottom: 1px solid #cfcfcf; padding-bottom: 20px; margin-bottom: 40px;}  
.content-area { margin-bottom: 50px;}
.content-area p { font-size: 1.1rem; line-height: 1.7rem; margin-top: 0px}
.content-area ul li { font-size: 1.1rem; line-height: 1.7rem;}

.services-area ul{ padding: 0px; margin: 0px;}
.services-area ul li { padding: 0px; margin: 0px; list-style-type: none}
.services-area:after { display: block; clear: both; content: ' ';}
ul.services-hotspots li { float: left; width: 30%; margin-right: 4.5%; margin-bottom: 30px; border-radius: 3px}
ul.services-hotspots li:nth-child(3n) { margin-right: 0%;}
ul.services-hotspots li a { width: 100%; display: table; min-height: 130px; background-color: #2a71a8; border-radius: 4px; transition: all 250ms ease; background-image: url(../img/gate-icon-bg.svg); background-repeat: no-repeat; background-position: bottom left; background-size: 111px 99px}
ul.services-hotspots li a span { display: table-cell; vertical-align: middle; padding-left: 150px; color: #fff; padding-right: 25px;}
ul.services-hotspots li a:hover { background-color: #a16c1e; text-decoration: none;}

.start-project-box { max-width: 940px; margin: 0 auto 50px; background-color: #2871a8; position: relative; text-align: center; padding: 80px}
.start-project-box:before {content: ''; background-image: url(../img/gate-icon-bg.svg); display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-repeat: no-repeat; background-position: bottom left; background-size: auto 90%; opacity: 0.1; }
.start-project-box h3 { position: relative; z-index: 2; color: #fff; margin-bottom: 20px;}
.start-project-box p { position: relative; z-index: 2; color: #fff; font-size: 1.1rem; letter-spacing: 0.07em; margin-bottom: 30px;}
.start-project-box a { position: relative; border-radius: 0px;}

.contact-area { padding-bottom: 50px} 
.contact-area h2 { text-align: center}
.form-background { background-image: url(../img/form-background.jpg); margin-bottom: 50px;}
.form-area { background-color: rgba(42,113,168,0.9);}
.form-area form { padding: 30px; color: #fff;}
.form-area label { font-weight: 700; text-transform: uppercase; display: block; font-size: 0.9rem;}
.form-area input[type=text], .form-area input[type=email] { color: #333!important; border-width: 0px 0px 2px 0px; border-color: #c89955; margin-bottom: 10px; font-style: italic; font-size: 0.9rem; width: 100%; line-height: 1.5rem; padding-left: 5px; text-indent: 0px; }
.form-area textarea { background-color: #fff; border-width: 0px 0px 2px 0px; border-color: #c89955; width: 100%; height: 100%; min-height: 440px; color: #333!important}
.form-area input[type=submit] { background-color: #c89955; width: 100%; border: 0px; border-radius: 4px; line-height: 2.0em; margin-top: 5px; margin-bottom: 5px;}

.form-item.rederror input { border-bottom-color: #bb0000; background-color: #ffeeee}
.msg { display: none}
.error { border: 1px solid #bb0000; color: #bb0000; padding: 5px; background-color: #ffeeee}
.success { border: 1px solid #00bb00; color: #00bb00; padding: 5px; background-color: #eeffee}

.contact-area img {max-width: 100%; height: auto;}
.content-section { background-color: #fff; padding-bottom: 0px}
.contact-widget, .start-project-box { cursor: pointer}
.callout { background-color: rgb(42,113,168); padding: 25px; padding-right: 35%; position: relative; margin-bottom: 20px; background-position: 150% center; background-size: auto 100%; background-repeat: no-repeat; cursor: pointer}
.callout img { position: absolute; right: 0px; top: 0px; bottom: 0px; height: 100%; width: auto; display: none}
.callout span { font-weight: 800; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.095rem; color: #fff;}
.callout p { text-transform: uppercase; color: #f6f6f6; font-weight: 400;  font-size: 1.77rem; letter-spacing: 0.08em; line-height: 1em; margin: 5px 0px 10px }
.callout a{ font-weight: 800; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.095rem; }

.widget { padding: 20px 35px; margin-bottom: 20px;}
.widget span { font-weight: 800; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.095rem;}
.widget h3 { margin-top: 5px }
.widget h5 { margin-bottom: 0px; padding-bottom: 0px;}
.widget p { line-height: 1.5rem;}

.expertise-widget { background-color: rgb(42,113,168); color: #f3f3f3;}
.expertise-widget span { color: #fff}
.expertise-widget h3 { color: #f3f3f3 }
.expertise-widget h5 { color: #8db7d8; line-height: 1em; padding: 0px; margin: 0px;}

.contact-widget { background-image: url(../img/contact-us-widget-bg.png); padding-bottom: 30%; background-size: cover; background-position: bottom left; margin-bottom: 20px;}
.contact-widget span { color: #98844e;}
.contact-widget h3 { color: #323232; margin-bottom: 10px;}



@media (max-width: 480px) {
	ul.services-hotspots li { width: 100%; margin-right: 0% }
	ul.services-hotspots li:nth-child(3n) { margin-right: 0%}
	ul.services-hotspots li:nth-child(2n) { margin-right: 0%}
	ul.services-hotspots li a { background-size: 30% auto}
	ul.services-hotspots li a span { padding-left: 35% }
	/**:after { border: 1px solid #000; background: rgba(0,0,0,0)!important;}*/
			.callout { padding-right: 0%; background-position: auto auto}
	.callout:before { background-color: rgba(42,113,168,0.8); content: ' '; display: block; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; }
	.callout p, .callout a, .callout span { position: relative; z-index: 9}
}

@media (max-width: 639px) {
	.fluid-container { margin: 0 20px; padding: 0px }
	html { font-size: 16px;}
	.hero-box { padding: 30px 15px;}
	.hero-box span { font-size: 1.6rem}
	h1 { font-size: 1.4rem;}
	/* Image Alignment */
	.alignnone , a img.alignnone , .aligncenter, div.aligncenter ,  .alignright , a img.alignright , .alignleft , a img.alignleft{margin: 30px auto; float:none; display: block; width: 100%; height: auto;}
	.container-fluid.our-passion { padding-left: 15px; padding-right: 15px;}
	.galleria { height: 400px}
	.galleria-thumbnails-container { width: 100%; max-width: 100%}
	

}

@media (max-width: 767px) and (min-width: 480px) {
		ul.services-hotspots li { width: 49.25%; margin-right: 1.5% }
	ul.services-hotspots li:nth-child(3n) { margin-right: 1.5%}
	ul.services-hotspots li:nth-child(2n) { margin-right: 0%}
	ul.services-hotspots li a { background-size: 30% auto}
	ul.services-hotspots li a span { padding-left: 35% }
		.callout { padding-right: 0%; background-position: auto auto}
	.callout:before { background-color: rgba(42,113,168,0.5); content: ' '; display: block; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; }
	.callout p, .callout a, .callout span { position: relative; z-index: 9}
}
@media (max-width: 767px) and (min-width: 640px) {
	.fluid-container { margin: 0 30px;}
	html { font-size: 16px; }
	h1 { font-size: 2em}


}
@media (max-width: 767px) {
	.hero-bar { margin-top: 0px;}
	.container-fluid { padding-left: 0px; padding-right: 0px;}
	.hamburger-box { top: 0px}
	.slider { margin-left: auto; margin-right: auto;}
	.hero-bar .hero-container { position: relative;left:0px; top: 0px; right: 0px; margin: 0 auto; padding: 0px; margin-left: auto; margin-right: auto;}
	.hero-box { position: static; left: 0px;right: 0px; top: 0px}
	.slider img { min-width: 0px;}
	
	.about-box { padding: 15px;}
	.gate-styles { background-position: 20% center}
	
	.footer-top { text-align: center}
	.footer-top img { max-width: 100%; height: auto;}
	.footer-top .col-md-6:last-child { text-align: center; padding-top: 20px}
	.footer-bottom { padding-top: 15px}
	.footer-bottom .col-md-6 p { text-align: center}
	.footer-middle .col-md-3 {text-align: center;}
	
/*	.proof-boxes figure { transform: translateY(0)}*/
	.showcase-gallery .galleria-thumbnails-container { display: none!important}
	.showcase-gallery .galleria-stage { margin-bottom: 0px!important}


}
@media (max-width: 991px) {
	.service-box { margin-bottom: 30px}
	.about-box { margin-bottom: 30px;}
	.proof-boxes ul:before { display: none}
	.showcase-area { overflow:hidden}
	.showcase-area .fluid-container { margin-top: 0px}
	
	.callout p { text-shadow: 0 0 5px rgba(0,0,0,0.5)}

}
@media (max-width: 1099px) and (min-width: 768px) {
	.fluid-container { margin: 0 3.6%; max-width: 92.8%; }
	html { font-size: 18px;}
	.hero-bar { margin-top: -20px;}
	.hero-bar { position: relative; overflow: hidden;}
	/*.slider img { min-width: 1050px}*/
	.hero-bar .slider { min-width: 1050px}
	
	ul.services-hotspots li { width: 32%; margin-right: 1.5% }
	ul.services-hotspots li a { background-size: 30% auto}
	ul.services-hotspots li a span { padding-left: 35% }

}

@media (max-width: 1099px) and (min-width: 991px) {
	.callout { padding-right: 10%;}
}
@media (max-width: 1099px) {
	body { padding-top: 80px;}
	.hamburger { display: block;}
	.navbar { padding-bottom: 20px}
	.navbar.sticky { padding-bottom: 0px}
	.navbar .navbar-phone { display: block;}
	.navbar-collapse { display: none}
	.mm-menu { display: block!important}
	.nav-bar-desktop { display: none!important}
	.navbar-two-level .navbar-header { display: block}
	.navbar-two-level.sticky .navbar-brand img { width: auto}
	
	.navbar.sticky .navbar-header { margin: 0 auto; float: none; padding-top: 0px; max-width: 100%; width: 100% }
	.navbar .navbar-brand{ display: block; float: none; text-align: center; width: 100%;}
	.navbar .navbar-header  img { display: block; margin: 0 auto; padding: 5px 0; height: 40px!important; max-height: 100%; object-fit: contain;}


}

@media (max-width: 1335px) and (min-width: 1100px) {
	.fluid-container { margin: 0 6%; max-width: 88%; }
	html { font-size: 18px}
	.hero-bar { margin-top: -80px;}
	ul.services-hotspots li { width: 31%; margin-right: 2.5%}
	ul.services-hotspots li a span { padding-left: 120px }
	.callout { padding-right: 26%;}
	.callout p { text-shadow: 0 0 8px rgba(0,0,0,0.5)}
	body { padding-top: 298px;}
	body.dev { padding-top: 238px;}
	.navbar-nav li a { font-size: 13px}	
	.nav-bar-desktop ul li a { font-size: 13px;}
	.navbar-two-level .navbar-nav { padding-bottom: 20px; margin-top:0px}
	.navbar-nav li { 10px 0.5%}
	.navbar .fluid-container { max-width: 100%; margin: 0 auto}
}

@media (max-width: 1335px) {
	.hero-bar:before, .hero-bar:after { display: none}
	.slider { overflow: hidden; }
	
	.proof-boxes ul li .initial { padding: 0 15px}
	.proof-boxes ul li { min-width: 280px}
}

@media (min-width: 1336px) and (max-width: 1685px) {
	body { padding-top: 298px;}
	
	.fluid-container { margin: 0 7%; max-width: 86%; }
	html { font-size: 18px}
	.navbar.sticky .fluid-container { max-width: 100%; margin: 0 auto;}
	.navbar .fluid-container { margin: 0 auto; max-width: 100% }
	.navbar.sticky .navbar-header { animation-name: headerBar; animation-duration: 1s; }
}
@media (min-width: 1686px) {
	body { padding-top: 298px;}

	.fluid-container { margin: 0 auto; max-width: 1426px}
	html { font-size: 18px }
	.hero-box { margin-left: 100px;}
	.navbar.sticky .navbar-header { animation-name: headerBar; animation-duration: 1s; }
}