@font-face {
    font-family: 'gilroylight';
    src: url('../fonts/gilroy-light-webfont.eot');
    src: url('../fonts/gilroy-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gilroy-light-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-light-webfont.woff') format('woff'),
         url('../fonts/gilroy-light-webfont.ttf') format('truetype'),
         url('../fonts/gilroy-light-webfont.svg#gilroylight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gilroyextrabold';
    src: url('../fonts/gilroy-extrabold-webfont.eot');
    src: url('../fonts/gilroy-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gilroy-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-extrabold-webfont.woff') format('woff'),
         url('../fonts/gilroy-extrabold-webfont.ttf') format('truetype'),
         url('../fonts/gilroy-extrabold-webfont.svg#gilroyextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}



html{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;}
body{ font-size:16px; font-family: 'gilroylight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6{ font-weight:normal; line-height: 1em; text-transform:uppercase; font-family:'gilroyextrabold';}
h1{ font-size:3em; margin-bottom:15px;}
h2{ font-size:2.2em; margin-bottom:15px;}
h3{ font-size:1.9em; margin-bottom:10px; margin-top:20px; }
h4{ font-size:1.5em; margin-bottom:10px; margin-top:15px;}
h5{ font-size:1.2em; margin:10px 0 5px; line-height:1.8em}
h6{ font-size:1em;}
p, label{margin:10px 0 10px; line-height:1.4em; font-size:1em; }
ul, ol{margin:15px 0 15px 30px;line-height:1.6em; font-size:1em; }

.alignleft{text-align:left !important;}
.aligncenter{text-align:center !important; margin-left:auto !important; margin-right:auto !important;}
.alignright{text-align:right !important;}

.preload{height:0;}

a{ color:inherit; text-decoration:none; cursor:pointer;}
a:hover{cursor:pointer;}
#wrapper{position:relative; overflow-x:hidden;}
.wrap{max-width:1600px; margin:0 auto; position:relative;height:100%;}
.clear{clear:both !important; height:0 !important; padding:0 !important; margin:0  !important; float:none !important;}
blockquote{    padding:0 20px; margin-bottom:15px;}
.headwork{font-size:2em !important;text-align:center !important;}

/** FORM ELEMENTS **/

input[type=text],input[type=password],input[type=datetime],input[type=datetime-local],input[type=date],input[type=month],input[type=time],input[type=week],input[type=number],input[type=email],input[type=url],input[type=tel],input[type=color],input[type=search],select,textarea{border: 1px solid #AAA; height:auto; -webkit-border-radius:0; border-radius:0;  -webkit-box-shadow:none !important;  box-shadow:none !important;font-family: 'gilroylight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; padding:15px 20px; font-size:1em;}
select{-webkit-appearance:none;-moz-appearance: none; appearance: none; text-indent:10px; line-height:24px;border:1px solid #AAA; background:#FFF url(../images/select.png) no-repeat 97% center;}
select option:disabled{color:#AAA;}
textarea{height:140px;}
input[type=text]:focus, textarea:focus{border-color:#d0101f;}
input[type=submit], input[type=button], input[type=reset], .button{font-weight:normal; cursor:pointer; margin:10px auto; font-size:1em; border:none; display:inline-block; padding:20px; color:#FFF !important;background:#123361 !important; text-decoration: none !important; text-transform:uppercase; text-align:center; font-family:'gilroyextrabold';}
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover{}

#back-to-top{width:32px; height:32px; line-height:30px; -webkit-border-radius:3px; border-radius:3px;  background:none; right:20px; bottom:20px; position:fixed;}
#back-to-top:hover{}
#imagelightbox{position: fixed; z-index: 9999; -ms-touch-action: none;touch-action: none;}
#imagelightbox-overlay{background-color: #FFF;background-color: rgba( 255, 255, 255, .9 );}

body#error{background:url(../images/404-bg.jpg) no-repeat top center; background-size:cover; height:100vh;color:#ffde16 !important;}
body#error .wrap{max-width:1200px;}
body#error .wrap .inner{padding-top:15vh; width:50%;}
body#error h1{font-size:15em; margin:0 0 200px;}

.social{list-style:none; margin:0; background:#ffc000; padding:30px; text-align:center;}
.social span{display:block; color:#FFF;font-family: 'gilroylight';}
.social li{display:inline-block; width:30px; height:30px;  padding:0;-webkit-transition: all 400ms ease;-moz-transition: all 400ms ease;-ms-transition: all 400ms ease;-o-transition: all 400ms ease;transition: all 400ms ease; margin-right:10px; background:#123361; text-align:center; -webkit-border-radius:50%; border-radius:50%;}
.social li a{display:block; font-size:14px; line-height:30px;  width:100%; height:100%; color:#FFF;}


/********* HEADER *********/

nav ul ul,nav ul ul:before{background:#FFF;position:absolute}
nav ul li:after,nav ul ul:before{content:'';margin:0 auto;left:0;right:0}
header{background:#FFF;position:fixed;top:0;left:0;width:100%;z-index:999;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease;font-family: 'gilroyextrabold'; height:100px; box-shadow:0 0 20px rgba(0,0,0,.3);}
header .wrap{padding:0 30px}
header #logo{float:left;margin:10px 30px 0 0;}
header #logo img{height:80px}
header nav{float:left;padding:0}
header h6 span{display:block;}
header h6{font-family: 'gilroylight'; text-align:center; color:#123361;float:right; padding:30px; margin-top:10px;}
header h6 a{font-family: 'gilroyextrabold'; font-size:1.5em;}
header h6 i{font-size:18px !important;}
header .social{float:right; margin-left:30px; margin-top:0; margin-right:10px;}

nav ul{margin:0;padding:0;text-transform:uppercase;font-family:'gilroyextrabold';cursor:pointer}
nav>ul li,nav>ul li a,nav>ul li span{line-height:100px;display:block}
nav li{float:left;padding:0 20px;font-size:.9em;position:relative}
nav li a,nav li span{color:#123361;}
nav ul ul{-webkit-border-radius:3px;border-radius:3px;display:none;top:100px;left:50%;width:320px;z-index:3;padding:10px;text-align:left;transform:translate(-50%,0);-webkit-box-shadow:0 0 20px 2px rgba(0,0,0,.3);box-shadow:0 0 20px 2px rgba(0,0,0,.3)}

nav ul ul:before{top:-5px;width:10px;height:10px;transform:rotate(45deg)}
nav ul ul ul{top:0;left:240px}
nav ul li:hover ul{display:block}
nav ul ul.show{display:block}
nav ul ul li{float:none;line-height:30px;font-size:.9em}nav ul ul a{line-height:30px!important}
nav ul ul a:after{display:none}
nav ul li:after{position:absolute;bottom:0;height:5px;width:0;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
nav ul li.active:after{width:100%}nav ul li.active>ul{display:block}
#mobile,nav .mobilenav{display:none}

/********* BANNERS *********/

#cta{padding:0 60px; margin-top:-30px; position:relative; z-index:2;}
#cta .wrap{}
#cta .cta{float:left; width:33.333%; text-align:center; padding:30px 0;  position:relative;background:#FFF;}
#cta .cta.middle{margin-top:-30px;}
#cta .cta img{display:block; margin:0 auto 20px;}
#cta .cta h4{text-transform:uppercase;font-family:'gilroyextrabold';color:#123361;}
#cta .cta p{ font-size:.9em; line-height:1.1em; margin:10px 25px; color:#333;}
#cta .button{margin:0 auto; width:360px; display:block;}

#map{height:420px; width:100%;}

#secondary #hero{height:420px;background:url(../images/user_uploads/pageheader.jpg) no-repeat center center; background-size:cover; position:relative;}

#secondary #hero h1{font-size:4em;text-shadow: 0 0 10px #000;  color:#FFF; text-align:center; padding-top:200px;}
#secondary #hero h1 span{ display:block;}
#secondary #hero:after{position:absolute; bottom:0; left:0; right:0; content:''; width: 0; height: 0; border-bottom: 60px solid #FFF; border-left: 2000px solid transparent;}

#content, #projects {padding:100px 0;}
#content .wrap{max-width: 1400px;}
#content .image, #content .image + .content{width:50%; float:left; position:relative;z-index:1; min-height:500px; top:0}
#content .image + .content{padding:0 2% 30px; width:50%; min-height:400px;}
#content .image .inner{position:absolute; top:0; left:0; right:0; width:100%; height:100%;}
#content .image:nth-child(6n+3){float:right;}
#content .image img, #content .image iframe{position:absolute; top:0; left:0; width:100%; z-index:1;}
#content .image iframe{width:100%; height:auto;}
#content .image:nth-child(6n+3) img{left:auto; right:0;}


#content hr{border:none; height:0; clear:both;margin:0;}
#content h2{font-size:3.5em;position:relative; margin-bottom:40px;color:#123361;}
#content h2 span{color:#ffc000;}
.home #content h2{text-align:center; }
#content h3{font-size:3em;text-align:left; position:relative; margin-bottom:20px;color:#123361;}
#content h4{font-size:1.8em;color:#123361;}
#content h6{color:#696969;}
#content p a{color:#123361; text-decoration: underline;}

#testimonials{background:#123361 url(../images/banner-testimonial.jpg) no-repeat center center fixed; background-size:cover; color:#FFF; padding:150px 0; margin-bottom:120px; text-align:center;}
#testimonials .wrap{position:relative}
#testimonials h2{font-size:3em; padding-left: 20px; text-transform:uppercase;}
#testimonials h2 span{ display:block; font-size:.5em;}
#testimonials p{text-transform:none; font-weight:900; line-height:1.5; width:110%; font-size:calc(.8vw + 1.1vh + 1vmin); padding-right:20px;}
#testimonials .message{position:relative;max-width:1024px;margin:0 auto;z-index:2; text-align:left;}

.quote{position:absolute;z-index:1;color:#FFF;font-size:15em;font-family: 'Passion One', cursive; opacity:.3;}
.quote.open{top:-67px;left:-10%}
.quote.close{bottom:-120px;right:-10%}

.work h2{text-align:center;color:#123361;}
/*.thumb{float:left; width:25%; position:relative; overflow:hidden; height:280px;}
.thumb:hover{box-shadow:0 0 50px #000; z-index: 99}
.thumb img{position:absolute; top:50%; left:50%; display:block; transform:translate(-50%,-50%); min-height:100%; min-width:100%;}*/

.breadcrumb{position: absolute; left:0; background: #FFF; color:#123361; padding:10px 15px; top:200px; display: block; z-index: 2}
#projects .img{position:relative; overflow:hidden;}
#projects .img:hover i{top:10px;}
#projects .img.large{ width:100%; height:500px; overflow-y:hidden;}
#projects img{width:100%;}
#projects .group{float:left;width:60%;}
#projects .group.full{float:none; width:auto;}
#projects .group .img{float:left;width:220px; margin:20px 20px 0 0; height:120px;}
#projects .group.full .img{width:230px; height:130px;}
#projects #content .about{float:left;width:40%; margin-top:30px; margin-bottom:40px;}

.clients{padding:50px 0;}
.clients ul{margin:0; position:relative; overflow:hidden; height:150px; list-style:none;}
.clients li{float:left; height: 80%; }
.clients img{max-height:80%;max-width:200px; margin:10px 50px 30px; text-align:center; display:block; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: relative; }

#projectbanner{background:url(../images/banner.jpg) no-repeat center center; background-size:cover; color:#FFF; padding:60px 0; text-transform:uppercase;}
#projectbanner h2{font-size:3.5em; padding-left: 20px;}
#projectbanner p{font-size:1.2em; padding-left: 20px;}
#projectbanner .button{background:none; border:2px solid #FFF; color:#FFF;}

.team {width: 23%;	float: left; margin: 20px 1%; position: relative;text-align: center;}
.team .img img{display:block; margin:0 auto; max-height:300px;width: 100%;height:100%;}
.team h5{color:#123361;}

.contact .pad{padding-left:50px; padding-right:50px;}
.contact .address{text-align:right;font-family: 'gilroyextrabold'; color:#696969; border-bottom:1px solid #696969; text-transform:uppercase; padding:10px 0;}
.contact .address strong{text-align:left; float:left; color:#123361; font-weight:normal;}

section.work .thumb{width:24%; margin:5px .5%; float:left; overflow: hidden; height:200px;}
section.work .thumb img{max-width: 100%;}

/********* FOOTER *********/
footer{padding:40px 0; font-family: 'gilroyextrabold'; color:#696969;}
footer .wrap{padding:0 30px;}
footer .logo img{height:60px; display:block; margin:0 auto 30px;}
footer ul{list-style:none; margin:0 auto 30px; text-align:center; width:100%; padding:0;text-transform:uppercase;}
footer ul li{float:none; display:inline-block; padding:0 15px;}
footer ul ul{display:none;}
footer #copyright{padding:20px 0; margin-top:20px;}
footer p{ margin:0 auto; text-align:center; font-size:.8em; text-transform:uppercase;}
footer .dev{background:url(../images/iwwlogo.png) no-repeat center center; text-indent:-999em; margin:0 0 0 20px; display:inline-block; width:20px; height:25px; position:absolute; bottom:0; right:30px;}

/********* IMAGE SLIDER *********/

.bxslider{margin:0 !important; position:relative; overflow:hidden; height:800px; z-index:1; background:#111;font-family: 'gilroyextrabold';}
.bxslider li{height:800px; position:relative; overflow:hidden;}
.bxslider li .wrap{z-index:2; text-align:left; padding:0 0;}
.bxslider .region{position:absolute; top:38%; bottom:0; margin:auto 0;}
.bxslider .region.left{left:2%;}
.bxslider .region.left{max-width:600px;}
.bxslider .region.center{right:0; left:0; margin:0 auto; text-align:center;}
.bxslider .region.right{right:2%;}
.bxslider .title{}
.bxslider h2{font-size:3.7em; margin:0;}
.bxslider h3{font-size:3.3em; margin:0;}
.bxslider h5{font-size:1em; line-height:1.4em;}
.bxslider p{font-size:.85em;line-height:1.4em;}
.bxslider .button{ margin:60px auto 0; text-align:center;  text-transform:uppercase; width:180px; background:#ffc000;color:#123361;}
.bxslider li .background{position:absolute; top:0; left:0; right:0; width:100%; height:100%; margin:0 auto; z-index:1;}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{ width:100%;}
.bx-wrapper .bx-pager{display:block; z-index:99; bottom:30px; right:auto; width:100%; left:auto; }
.bx-wrapper .bx-pager .bx-pager-item{display:inline-block;}
.bx-wrapper .bx-pager.bx-default-pager a{background:none; width:6px; height:6px;   display:inline-block; margin-right:10px; border:1px solid #FFF;}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active{}
.bx-wrapper .bx-prev{left:-50px;}
.bx-wrapper .bx-next{right:-50px;}


form .row{max-width:800px;margin:0 auto; clear:both;}
form h4{ text-align:center; margin:30px auto 20px;}
form .button{ margin:30px auto 0;}

form .panel{}
form .panel.hide{display:none;}

/********* ANIMATIONS *********/

@keyframes slidedown {
    from {top:-200px;}
    to {top:0;}
}

/********* MODAL AND OVERLAY *********/

.overlay {position: fixed;z-index: 9999;left: 0;right: 0;top: 0;width: 100%;height: 100%;opacity:.95;display: none;}
.modal {	position: fixed;	top: -1000px;max-width: 800px;padding: 50px;left: 0;right: 0;	margin: 0 auto; 	z-index: 10000;-moz-transition: all 400ms linear;-ms-transition: all 400ms linear;-o-transition: all 400ms linear;transition: all 400ms linear;-webkit-transition: all 400ms linear;}
.modal .inner {position: relative;overflow-y: scroll;min-height: 50vh;max-height:75vh;}
.modal .modalclose {color: #c2c2c2;position: absolute;top: 10px;right: 20px;font-size: 3em;}

*, *:before, *:after {box-sizing: border-box;}

.controls {padding: 1rem; text-align:center;}
.control {position: relative; display: inline-block; cursor: pointer; background:none; border:none; font-size:1em;text-transform:uppercase;font-family:'gilroyextrabold'; color:#696969;}
.mixitup-control-active{color:#123361;}
.mixitup-control-active[data-filter]:after {position:absolute; content:''; width:100%; height:3px; bottom:-5px; left:0; right:0; background: #123361;}
.control[data-filter] + .control[data-sort] {margin-left: .75rem;}

.container {padding: 1rem; text-align: left;font-size: 0.1px;}
.container:after { content: ''; display: inline-block; width: 100%;}

.mix, .gap { display: inline-block;vertical-align: top; float:left;}
.mix { width:23%; height:280px;position: relative; overflow:hidden; margin:0 1%;}
.mix[style*="display: none;"]{height:0; padding:0;}
.mix[style*="display: none;"] img{height:0; width:0;}
.mix a{position:absolute;}
.mix .thumb{height:190px;position: relative; overflow:hidden;}
.mix img{max-width:100%;}
.mix:before {content: ''; display: inline-block; padding-top: 56.25%;}
#content .mix h4{font-size:24px; text-align: center;}

header h6 {
    padding-left: 0px;
    padding-right: 0px;
}

@media only screen and (max-width: 1469px){
 header nav {
  width: 50% !important;
}
}
@media only screen and (max-width: 1134px){
ul.fontconv{font-size:.9em;}
}
@media only screen and (max-width: 1306px){
header h6 {
  display: none;
}
}
@media only screen and (max-width: 1366px){
header h6 {
  font-size:18px;
  padding: 30px 0px !important;
}
header nav {
  width: 50% !important;
}
}