@import url("../fonts/stylesheet.css");

/* Defaults */
* { -webkit-font-smoothing: antialiased; -webkit-text-stroke: 1px rgba(0,0,0,.1); outline: 0 !important; }
*:before, *:after { -webkit-font-smoothing: antialiased; -webkit-text-stroke: 1px rgba(0,0,0,.1); }
img { width: 100% \9; max-width: 100%; height: auto; }
.no-padding { padding-left: 0; padding-right: 0; }
.no-right-padding {padding-right:0}
.no-left-padding {padding-left:0}
.cg-fill { height: 100%; }
.stretch { width: 100%; }
body { font-family: "proximaregular"; font-size:14px; background: #ffffff; }
.form-control { -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; -o-transition: none; transition: none; }
textarea.form-control { resize: vertical; height: 100px; }
iframe.map { min-height: 300px; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fancybox-opened { z-index: 9999999999999; }
.fancybox-lock .fancybox-overlay { z-index: 9999999999999; }

/* Header*/
#header { background: #fff; }

#header.stuck { position: fixed; z-index: 9999; width: 100%; }
#header.stuck .logo { max-height: 60px; margin-top: 0; }
#header.stuck .navbar { margin-bottom: 0; }
#header.stuck .nav { margin-top: 10px; }
#header .logo { padding-bottom: 5px; }

/* Homepage */ 
#featured { position: relative; background: #fff; }
#featured .swiper-slide { background-size: cover; background-repeat: no-repeat; min-width: 100%; min-height: 100%; background-position: top center; }
#featured .swiper-container { position: relative; }
#featured .swiper-container-horizontal > .swiper-pagination {  bottom: 30px; }
#featured .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 100%; display: inline-block; background: rgba(255,255,255,1); margin: 0 5px 0 0; opacity: 0.4; }
#featured .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet-active { opacity: 1; }
#featured .swiper-slide { position: relative; }

#featured .slide-overlay { position: absolute; left:0; top:0; width: 100%; background: rgba(0,0,0,0.4); display: block; z-index: 1; }
#featured .slide-spot { border-bottom: 0; margin-top: 0; margin-bottom: 0; color: #ffffff; font-family: "proximabold"; font-size: 50px; position: absolute; top: 50%; margin-top: -75px; max-width: 700px; margin-left: -350px; left: 50%; text-align: center; }
#featured .wecall {  display: inline-block; position: absolute; top: 65%; left: 50%; margin-top: 0; min-width: 240px; margin-left: -120px; border:2px solid #fff; padding: 10px 40px; text-align: center; color: #ffffff; font-family: "proximaregular"; font-size: 22px; transition: 0.4s ease all; }
#featured .wecall:hover { background-color: #000; }
#featured .infoform {  display: inline-block; position: absolute; top: 73%; left: 50%; margin-top: 0; min-width: 240px; margin-left: -120px; border:2px solid #eaab16; padding: 10px 40px; text-align: center; color: #ffffff; font-family: "proximaregular"; font-size: 22px; background-color: #eaab16; transition: 0.4s ease all; }
#featured .infoform:hover { background-color: #000; border-color: #fff; }
#featured a:hover { text-decoration: none !important; }

#featured #scroller { display: block; position: absolute; bottom: 90px; left: 50%; z-index: 999; cursor: pointer; margin-left: -16px; width:32px; height:39px; }
#featured #scroller .sc1 { display: block; position: absolute; top: 0; width: 32px; height: 17px; background: url(../img/scroller-1.png) top center no-repeat; }
#featured #scroller .sc2 { display: block; position: absolute; top: 10px; width: 32px; height: 17px; background: url(../img/scroller-1.png) top center no-repeat; }
#featured #scroller .sc3 { display: block; position: absolute; top: 20px; width: 32px; height: 17px; background: url(../img/scroller-1.png) top center no-repeat; }
#featured #scroller .anim { animation: pulsate 2s linear; animation-iteration-count: infinite; -webkit-animation: pulsate 1s linear; -webkit-animation-iteration-count: infinite; }
#featured #scroller .anim.first { animation-delay: 0s; -webkit-animation-delay: 0s; animation-duration: 2s; -webkit-animation-duration: 2s;  }
#featured #scroller .anim.second { animation-delay: 0.4s; -webkit-animation-delay: 0.4s; animation-duration: 2s; -webkit-animation-duration: 2s; }
#featured #scroller .anim.third { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; animation-duration: 2s; -webkit-animation-duration: 2s; }

#featured .ms-next { background: transparent; width: 60px; height: 60px; border-radius: 100%; border: 3px solid #fff; text-align: center; padding-top: 17px; right: 20px; }
#featured .ms-prev { background: transparent; width: 60px; height: 60px; border-radius: 100%; border: 3px solid #fff; text-align: center; padding-top: 17px; left: 20px;}
#featured .ms-next .fa, #featured .ms-prev .fa { font-size: 24px; color: #fff; }

#featured .headlogo { position: absolute; top: 50px; right: 50px;  z-index: 9995; }

/* Footer */

#footer { background: #7B7B7B; padding-top: 10px; padding-bottom: 10px; color: #fff; }
#footer .social ul { float:right; margin-bottom: 0; display: inline-block; }
#footer .social ul > li > a { color: #fff; font-size: 20px; width: 40px; height: 40px; background-color: #494949; display: inline-block; text-align: center; padding-top: 7px; }
#footer .copyright { text-align: left; font-family: "proximaregular"; font-size: 14px; color: #fff; padding-top: 10px; }
#footer .provider { font-family: "proximaregular"; font-size: 14px; color: #fff; display: inline-block; }
#footer .provider:hover { color: #333; text-decoration: none; }

/* Homepage About */

#about { padding-top: 50px; padding-bottom: 50px; }
#about .company { font-size: 52px; font-family: "proximaregular"; color: #3c3c3b; }

#latest { padding-top: 50px; padding-bottom: 50px; background-color: #e2e2e2; }
#latest .title { font-size: 52px; font-family: "proximaregular"; color:#3c3c3b; margin-bottom: 70px; }
#latest .title:after { content: ""; display: block; position: absolute; right: 0; top: 0; height: 150px; width: 3px; background-color: #cbcbcb; }
#latest .description { font-size: 22px; font-family: "proximaregular"; color:#3c3c3b; padding-top: 50px; }
#latest .item { position: relative; display: block;text-align: center; }
#latest .item .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(60,60,59,0.9); opacity: 0; transition: 0.3s ease-in all; }
#latest .item:hover .overlay { opacity: 1; }
#latest .item .overlay .caption { display: block; color: #fff; font-family: "proximaregular"; font-size: 22px; position: absolute; top: 50%; margin-top: -15px; text-align: center; width: 100%; }

#pagehead { background-size: cover; background-position: center center; position: relative; }
#pagehead #scroller2 { display: block; position: absolute; bottom: 200px; left: 50%; z-index: 999; cursor: pointer; margin-left: -16px; width:32px; height:39px; }
#pagehead #scroller2 .sc1 { display: block; position: absolute; top: 0; width: 53px; height: 28px; background: url(../img/scroller-2.png) top center no-repeat; }
#pagehead #scroller2 .sc2 { display: block; position: absolute; top: 10px; width: 53px; height: 28px; background: url(../img/scroller-2.png) top center no-repeat; }
#pagehead #scroller2 .sc3 { display: block; position: absolute; top: 20px; width: 53px; height: 28px; background: url(../img/scroller-2.png) top center no-repeat; }
#pagehead #scroller2 .anim { animation: pulsate 2s linear; animation-iteration-count: infinite; -webkit-animation: pulsate 1s linear; -webkit-animation-iteration-count: infinite; }
#pagehead #scroller2 .anim.first { animation-delay: 0s; -webkit-animation-delay: 0s; animation-duration: 2s; -webkit-animation-duration: 2s;  }
#pagehead #scroller2 .anim.second { animation-delay: 0.4s; -webkit-animation-delay: 0.4s; animation-duration: 2s; -webkit-animation-duration: 2s; }
#pagehead #scroller2 .anim.third { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; animation-duration: 2s; -webkit-animation-duration: 2s; }
#pagehead .headlogo { display: block; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -144px;}

#banner { height: 392px; background-position: top center; background-size: cover; background-repeat: no-repeat; }
#banner h1.page-header { font-size: 50px; text-align: center; border-bottom: 0; margin-top: 190px; margin-bottom: 0; padding-bottom: 0; color: #fff; font-family: "proximabold"; text-shadow:1px 1px #000; }
#banner.light { height: 80px; background-color: #999; }
#banner.light h1.page-header { font-size: 40px; text-align: center; border-bottom: 0; margin-top: 20px; margin-bottom: 0; padding-bottom: 0; color: #fff; font-family: "proximabold"; text-shadow:1px 1px #000; }


#page { padding-top: 50px; padding-bottom: 50px; }

#project { position: relative; background-color: #fff; padding-bottom: 50px; min-height: 650px; }
#project .typography h3{ margin-top: 0; font-size: 32px; font-family: "proximaregular"; color: #3c3c3b; border-bottom: 0; }
#project .project-process { position: relative; background-color: #eaab16; font-family: "proximabold"; padding-top: 2px; font-size: 14px; }
#project .project-process span { float: right; margin: -15px 0 -15px 0; padding: 13px; background-color: #3c3c3b; color: #fff; font-family: "proximabold"; }
#project .breadcrumb { padding-left: 0; background: none; margin-top: 30px; }
#project .breadcrumb a { font-size: 14px; color: #3c3c3b; }
#project .breadcrumb a:hover { text-decoration: none; color: #eaab16; font-family: "proximaregular"; }
#project .grid .item { padding: 5px; }
#project .grid .item a { position: relative;  display: block; }
#project .grid .item { float: left; width: 215px; height: 140px; display: inline-block; overflow: hidden; }
#project .grid .item-width2 { width: 430px; }
#project .grid .item-height2 { height: 280px; }
#project .grid .item .overlay { opacity: 0; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.7); width: 100%; height: 100%; padding: 15px; transition: 0.4s ease all; }
#project .grid .item:hover .overlay { opacity: 1; }
#project .grid .item .overlay i { display: block; width: 100%; height: 100%; border: 1px solid #fff; z-index: 111; position: relative; }
#project .grid .item .overlay i:before { display: block; content: ""; position: absolute; left: 15px; bottom: 15px; background: url(../img/mo-left-angle.png) no-repeat center center; width: 20px; height: 20px; }
#project .grid .item .overlay i:after { display: block; content: ""; position: absolute; right: 15px; top: 15px; background: url(../img/mo-right-angle.png) no-repeat center center; width: 20px; height: 20px; }

#project .filters { margin-left: 0; }
#project .filters li a { font-size: 22px; font-family: "proximaregular"; color: #3c3c3b; border: 2px solid #3c3c3b; border-radius: 0; padding: 7px 40px; }
#project .filters li a.active, #project .filters li a:hover { background-color: #3c3c3b; color: #fff; }

#information { background-color: #fff;  }
#information .contact { text-align: center;  }
#information .form { max-width: 400px; width: 400px; display: inline-block; }
#information h3.page-header { margin-top: 50px; font-size: 36px; font-family: "proximaregular"; color: #3c3c3b; border-bottom: 0; }
#information .text { margin-bottom: 50px; font-size: 16px; font-family: "proximaregular"; color: #3c3c3b; display: block; text-align: center; }
#information .text p { max-width: 400px; display: inline-block; }
#information .form .form-control { background: transparent; border-radius: 0; border-left: 0; border-top: 0; border-right: 0; font-size: 16px; }
#information .form .btn { border-radius: 0; padding: 7px 30px; background-color: #3c3c3b; color: #fff; font-size: 16px; border: 0; }
#information .form .btn:hover { background-color: #000; }
#information .form .form-control:focus { border-color: #3c3c3b; box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,0,0,.6); }

#landing { text-align: center; display: none;}
#landing h3.page-header { margin-top: 20px; font-size: 36px; font-family: "proximaregular"; color: #3c3c3b; border-bottom: 0; text-align: center; }
#landing .text { margin-bottom: 50px; font-size: 16px; font-family: "proximaregular"; color: #3c3c3b; display: block; text-align: center; }
#landing .text p { max-width: 400px; display: inline-block; }
#landing .form .form-control { background: transparent; border-radius: 0; border-left: 0; border-top: 0; border-right: 0; font-size: 16px; }
#landing .form .btn { border-radius: 0; padding: 7px 30px; background-color: #3c3c3b; color: #fff; font-size: 16px; border: 0; }
#landing .form .btn:hover { background-color: #000; }
#landing .form .form-control:focus { border-color: #3c3c3b; box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,0,0,.6); }

#page .contact a { color: #3b3e3e; }
#page .contact a:hover { text-decoration: none; color: #eaab16; }

#page .contact { background-color: #fff;  }
#page .contact .form { max-width: 100%; width: 100%; display: inline-block; }
#page .contact h3.page-header { margin-top: 50px; font-size: 36px; font-family: "proximaregular"; color: #3c3c3b; border-bottom: 0; }
#page .contact .text { margin-bottom: 50px; font-size: 16px; font-family: "proximaregular"; color: #3c3c3b; display: block; text-align: center; }
#page .contact .text p { max-width: 100%; display: inline-block; }
#page .contact .form .form-control { background: transparent; border-radius: 0; border-left: 0; border-top: 0; border-right: 0; font-size: 16px; }
#page .contact .form .btn { border-radius: 0; padding: 7px 30px; background-color: #3c3c3b; color: #fff; font-size: 16px; border: 0; }
#page .contact .form .btn:hover { background-color: #000; }
#page .contact .form .form-control:focus { border-color: #3c3c3b; box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,0,0,.6); }

#page .project-list .thumbnail { border:0; border-radius: 0; }
#page .project-list .gallery-title { color: #333; text-align: center; font-size: 18px; }

.ui-dialog-titlebar { background:none; border: 0; }

@-webkit-keyframes pulsate {
    0%  { opacity: 0}
    50%  { opacity: 1}
    100%  { opacity: 0}
}

@keyframes pulsate {
    0%  { opacity: 0}
    50%  { opacity: 1}
    100%  { opacity: 0}
}

.ui-dialog {
    z-index:1000000000;
    top: 0; left: 0;
    margin: auto;
    position: fixed;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.ui-dialog .ui-dialog-content {
    flex: 1;
}

/* Typography */
.typography { position: relative; margin-top: 20px; }
.typography >* { line-height: 26px; }
.typography p, .typography { color: #3b3e3e; font-size: 16px; text-align: justify; font-family: "proximaregular" !important; }
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 { color: #333; margin-top: 0; font-family: "proximasemibold"; margin-bottom: 15px; }
.typography h1 { font-size:26px; }
.typography h2 { font-size:24px; }
.typography h3 { font-size:22px; text-align: center; }
.typography h4 { font-size:20px; }
.typography h5 { font-size:18px; }
.typography h6 { font-size:16px; }
.typography ul { padding: 0; list-style-type: none; }
.typography ul li { position: relative; padding-left: 40px; }
.typography ul li:before { position: absolute; content: "\f101"; left: 20px; top: 50%; margin-top: -7px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; }
.typography dl > * { border: 1px solid #ddd; }
.typography dl > * > p { margin: 0; padding: 10px; }
.typography dl > dt { position: relative; padding-left: 30px; border-bottom-width: 5px; border-color:#999; cursor: pointer; }
.typography dl > dt:before { position: absolute; content: "\f061"; left: 10px; top: 50%; margin-top: -7px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; }
.typography dl > dt.active { background-color: #ddd; text-shadow: 0 1px 0 #fff; }
.typography dl > dt.active:before { content: "\f063"; }
.typography dl > dd { display: none; border-top-width: 0; }
.typography form { line-height: initial; }
.typography .form label { line-height: 1; }
.typography .form textarea.form-control { height: 100px; }
.typography table td { border-top: 0 !important; }