/***************************
* GENERAL
****************************/

html, 
body {
  height: 100%;
  min-height: 100%;
  background: #fff;
  position: relative;
}
body::after{position: fixed;content: "";background: #212121; width: 50px; height: 100%;top: 0; right: 0;}
body::before{position: fixed;content: "";background: #212121; width: 50px; height: 100%;top: 0; left: 0;}
body.home{background: #212121;}
p{}
body {
  font-family: 'Raleway', sans-serif;
  position: relative;
  margin: 0;
  padding: 50px 0 0 0;
}
.revealOnScroll{ opacity: 0; }
.body-wrapper{position:relative;margin-left: 50px; margin-right: 50px;background-color: #212121;}
.body-wrapper.white{background: #fff;}
svg.airthLogo{position: absolute;max-width: 125px; right: 70px; top: 70px;z-index: 5;max-height:90px;}
img.corner-logo{position: absolute;max-width: 125px; right: 20px; top: 20px;}
svg.airthLogo .cls-1 {fill: #000 !important;}
a:hover{text-decoration: none;}
.flex-control-nav{bottom: 0 !important;z-index: 4!important;}
.flex-control-nav li a{width: 20px; height: 5px;background: rgba(255, 255, 255, 0.4);border-radius: 0;}
.flex-control-paging li a.flex-active{background: rgba(255, 255, 255, 0.9);}

a.button{line-height: 58px; display: inline-block;font-weight: 400;color: #fff;font-size: 16px; text-align: center;
border: 1px solid #fff;padding-left: 25px;padding-right: 25px;
background: linear-gradient(to right, white 50%, transparent 50%);
  background-size: 201% 100%;
  background-position: right bottom;
  transition: all .25s ease-out;
}
a.button:hover{background-position: left bottom;color: #212121;}

h1.title{font-size: 72px;line-height: 85px;font-weight: 100;color: #212121;padding: 80px 0 80px 0;text-transform: uppercase;}

i.arrow-down{border: solid #A7A7A7;border-width: 0 1px 1px 0;display: inline-block;padding: 8px;position: absolute;bottom: 2px;
  transition: all 0.3s linear;right: 10px;bottom: 10px;}
i.arrow-down{transform: rotate(45deg);-webkit-transform: rotate(45deg);}
span.arrow{border: solid #A7A7A7;border-width: 0 1px 1px 0;display: inline-block;padding: 13px;position: relative;bottom: 2px;
  transition: all 0.3s linear;}
span.arrow.left{transform: rotate(135deg);-webkit-transform: rotate(135deg);left: 8px;}
span.arrow.right{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);right: 8px;}
span.arrow.back{transform: rotate(135deg);-webkit-transform: rotate(135deg);left: -5px;padding: 5px;bottom: 1px;}
span.arrow.view{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);right: 0px;padding: 5px;bottom: 1px;}

.go-back{padding: 10px;}
.go-back a{font-size: 18px;font-weight: 300;text-transform: uppercase;color: #A7A7A7;line-height: 21px;transition: all 0.3s linear;}
.go-back a:hover{color: #212121;}
.go-back a:hover span.arrow.back{left: -10px;transition: all 0.3s linear;border-color: #212121;}

.view-projects{}
.view-projects a{font-size: 18px;font-weight: 300;text-transform: uppercase;color: #A7A7A7;line-height: 21px;transition: all 0.3s linear;}
.view-projects a:hover{color: #212121;}
.view-projects a:hover span.arrow.view{right: -8px;transition: all 0.3s linear;border-color: #212121;}

.learn-more{background: #F9F9F9;padding: 60px 100px 60px 100px;margin-top: 40px;margin-bottom: 150px;}
.learn-more a:hover{color: #212121;}
.learn-more a:hover span.arrow.view{right: -8px;transition: all 0.3s linear;border-color: #212121;}

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

.header{
  height: 50px;
    line-height: 50px;
    position: fixed;
    top: 0;
    background: #212121;
    z-index: 11;
    width: 100%;}
.header ul.main-menu{padding-left: 50px;}
.header ul.main-menu li{display: inline-block;}
.header ul.main-menu li a{color: #A7A7A7;font-family: 'Raleway', sans-serif;font-size: 16px;font-weight: 300;margin-right: 50px;}
.header ul.main-menu li a:hover{color: #fff;text-decoration: none;}
.header ul.main-menu li a.active{color: #fff;}

/***************************
* HOME SLIDER
****************************/

.home-slider{position: relative;height: 100%;display: inline-block;width: 100%;}
.home-slider .logo-slider{position: absolute;max-width: 125px;z-index: 4;right: 20px;top: 20px;}
svg.logo-home{position: absolute;max-width: 125px;z-index: 4;right: 70px;top: 70px;z-index: 5;max-height:90px;}
.home-slider::after{}
.home-slider ul li{max-height: 1025px;background-position: center;width: 100%;-webkit-backface-visibility: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
.home-slider ul li::after{top:0;left:0;
  content: ""; position: absolute; width: 100%; height: 100%;background:rgba(0,0,0,0.3);z-index: 2;
}
.home-slider ul li .wrap-text{text-align: center;position: absolute; top: 50%; transform: translateY(-50%);left: 0; right: 0;z-index: 3;}
.home-slider ul li .wrap-text h2{font-size: 72px;color: #fff;font-weight: 200;margin-bottom: 40px;}


/***************************
* PROJECTS
****************************/

ul.filters{padding: 0;margin-bottom: 100px;}
ul.filters li.init{display: none;width: 100%;padding-left: 0;position: relative;}
ul.filters li{display: inline-block;margin-right: 60px;list-style: none;}
ul.filters li a{color: #A7A7A7;position: relative;transition: all 0.2s linear;}
ul.filters li a::after{position: absolute; content: "";transition: all 0.2s linear;background: #A7A7A7; width: 50px; height: 1px;bottom: -20px;left:0px;}
ul.filters li.active a{color: #212121;}
ul.filters li.init span{color: #212121 !important; }
ul.filters li.active a::after{background: #212121;}
ul.filters li a:hover{color: #212121;transition: all 0.2s linear;}
ul.filters li a:hover::after{background: #212121;transition: all 0.2s linear;bottom: -10px;}

.project-item{position: relative; margin-bottom: 80px;}

.project-item a{color: #A7A7A7;}
.project-item .info{margin-top: 20px;position: relative;text-align: left;}
.project-item .info::after{position: absolute;content: "";background:#212121;width: 0; max-width: 380px; height: 1px; bottom: -10px;}
.project-item .border-img{border: 0;position: relative;}
.project-item .border-img::after{content: "";
    position: absolute;
    border: 0;
    height: 100%;
    width: 100%;    max-width: 380px;
    transition: border-width .25s linear;
    left: 0;}
.project-item:hover .border-img::after{border: solid 5px #212121;transition: border-width .25s linear;}
/*.project-item:hover img{border: solid 5px #212121; transition: border-width .25s linear;}*/
.project-item:hover .info::after{width: 50px;transition: all 0.3s linear;}
.project-item .info h3{color: #212121;}
.project-item .info h3,
.project-item .info h4{text-transform: uppercase;font-size: 16px;font-weight: 400;line-height: 15px;}
.project-item img{max-width: 380px;width: 100%;}

.learn-more h3{font-size: 48px;line-height: 48px;color: #777777;font-weight: 200;max-width: 925px;margin-bottom: 30px;}
.learn-more a{color: #A7A7A7;text-transform: uppercase;font-size: 18px;line-height: 21px;font-weight: 300;}


/***************************
* PROJECTS DETAIL
****************************/

.project-info{margin-top: 50px;margin-bottom: 50px;position: relative;}
.project-info .close-project{
  display: inline-block;
  z-index: 9;
  width: 25px;
  height: 25px;
  position: absolute; right: 0; top: -80px;cursor: pointer;
  overflow: hidden;}
 .project-info .close-project a.close-back{display: block;width: 25px;height: 25px;}
.project-info .close-project:hover::before, .close-project:hover::after {
  background: #212121;
}
.project-info .close-project::before, .close-project::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #777777;
}
.project-info .close-project::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.project-info .close-project::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.project-cat{position: relative;}
.project-cat::before, .project-desc::before{position: absolute; content: "";width: 50px; height: 1px;background: #A7A7A7;top: -40px;}
.project-cat h3{font-size: 24px;color: #2B2B2B;text-transform: uppercase;font-weight: 200;}
.project-desc{position: relative;}
.project-desc p{color: #777777;font-weight: 300;font-size: 16px;line-height: 26px;}

.project-detail{padding-left: 15px;padding-right: 15px;}
.project-detail .single-image{margin-bottom: 20px;}
.project-detail .single-image img{width: 100%;}

.project-detail .double-image{display: table;margin-bottom: 20px;}
.project-detail .double-image .col1{display: table-cell;width: 50%;padding-right: 10px;}
.project-detail .double-image .col2{display: table-cell;width: 50%;padding-left: 10px;}
.project-detail .double-image .col1 img{width: 100%;}
.project-detail .double-image .col2 img{width: 100%;}

.testimonial{padding-left: 15px;padding-right: 15px;}
.testimonial .wrap-text{position:relative;background: #F9F9F9;width: 100%;padding: 65px 100px 65px 100px;}
.testimonial .wrap-text h3{font-size: 48px;line-height: 48px; color: #777777;font-weight: 200; max-width: 925px;margin-bottom: 30px;font-style: italic;}
.testimonial .wrap-text h4{color: #A7A7A7;text-transform: uppercase;font-size: 18px;line-height: 21px;font-weight: 300;}

.related-projects{display: table;width: 100%;margin: 150px 0 100px 0; border-spacing: 35px;}
.related-projects h3.prev,
.related-projects h3.next{font-size: 48px;line-height: 56px;font-weight: 100;margin-bottom: 60px;}
.nav-project-mobile{display: none;}
.related-projects a{color: #A7A7A7;transition: all 0.2s linear;}
.related-projects a:hover{color: #212121;transition: all 0.2s linear;}
.related-projects .img-wrap{max-width: 515px;}
.related-projects .img-wrap img{width: 100%;}
.related-projects .info{margin-top: 20px;position: relative;}
.related-projects .info::after{position: absolute;content: "";background: #212121;width: 0;max-width: 515px;height: 1px;bottom: -10px;}
.related-projects .project-right:hover .info::after{width: 50px;transition: all 0.3s linear;}
.related-projects .project-left:hover .info::after{width: 50px;transition: all 0.3s linear;}

.related-projects .info h3,
.related-projects .info h4{text-transform: uppercase;font-size: 16px;font-weight: 400;line-height: 15px;color: #A7A7A7;}
.related-projects a:hover .info h4{color: #A7A7A7;}
.related-projects .info h3{color: #212121;}
.related-projects .project-left{/*float: left;*/ position: relative;display: table-cell;width: 50%;left: -35px;}
.related-projects .project-right{/*float: right;*/position: relative;display: table-cell;width: 50%;right: -35px;}
.related-projects .project-right .img-wrap{float: right;}
.related-projects .project-right .info{float: right;max-width: 515px;display: inline-block;width: 100%;}


.related-projects .project-left:hover span.arrow.left{left: 0px;transition: all 0.3s linear;border-color: #212121;}
.related-projects .project-right:hover span.arrow.right{right: 0px;transition: all 0.3s linear;border-color: #212121;}
.related-projects .project-right h3.next{text-align: right;}
.related-projects .project-right .img-wrap img{text-align: right;}

.view-all{text-align: right;margin-bottom: 150px;}
.view-all a{color: #A7A7A7;font-size: 18px;line-height: 21px;font-weight: 300;text-transform: uppercase;}
.view-all a:hover{color: #212121;}


/***************************
* ABOUT
****************************/

.about-info{margin-bottom: 200px;}
.about-info h3{font-size: 30px;font-weight: 300;margin-bottom: 40px;color: #2B2B2B;}
.about-info .wrap-text{max-width: 540px;}
.about-info .wrap-text p{font-weight: 300; font-size: 16px;color: #777777;}

.cta{position: relative;}
.cta .wrap-image{top: 50px;width: 650px; height: 520px;background-position: center;background-size: cover;position: relative;z-index: 1;}
.cta .wrap-text-cta{max-width: 770px;position: absolute;right: 0;background: #F9F9F9;padding: 145px;top: -100px;}
.cta .wrap-text-cta h3{font-size: 48px;font-weight: 200;line-height: 55px;color: #777777;padding-left: 50px;}

.cols{position: relative; margin-top: 200px;margin-bottom: 200px;}
.cols h3{font-size: 30px;font-weight: 300;margin-bottom: 40px;color: #2B2B2B;}
.cols .wrap-text{max-width: 540px;margin-bottom: 80px;}
.cols .wrap-text p, 
.cols .wrap-text ul li{font-weight: 300; font-size: 16px;color: #777777;}
.cols .wrap-text ul{padding: 0;}
.cols .wrap-text ul li{list-style: none;line-height: 40px;}


/***************************
* CONTACT
****************************/

.contact-info{margin-bottom: 250px;}

.wrap-contact{position: relative;margin-bottom: 60px;color: #707070; font-size: 16px;font-weight: 400;}
.wrap-contact:before{position: absolute; content: "";width: 50px; height: 1px;background: #A7A7A7;top: -30px;}
a.map{color: #2B2B2B;font-size: 14px;text-transform: uppercase;padding: 17px 25px 17px 25px;
background: linear-gradient(to right, #212121 50%, #F9F9F9 50%);
  background-size: 201% 100%;
  background-position: right bottom;
  transition: all .25s ease-out;}
a.map:hover{background-position: left bottom;color: #fff;}

.cta-left{position: relative;margin-bottom: 200px;}
.cta-left .wrap-image{top: 100px;width: 770px; height: 520px;background-position: center;background-size: cover;position: absolute;z-index: 1;right: 0;}
.cta-left .wrap-text-cta{max-width: 650px;position: relative;left: 0;background: #F9F9F9;padding: 145px;top: -50px;}
.cta-left .wrap-text-cta h3{font-size: 48px;font-weight: 200;line-height: 55px;color: #777777;padding-right: 50px;}

.contact-form{top: -40px;}
.contactForm{padding-left: 100px;max-width: 500px;}
/*.mdc-text-field{background: transparent !important;margin-bottom: 20px;}
.mdc-text-field:not(.mdc-text-field--disabled){background: transparent;width: 100%;max-width: 430px;}
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:#2B2B2B; }
.mdc-text-field .mdc-line-ripple{background-color: #2B2B2B;}
.mdc-text-field--textarea{width: 100%;margin-top: 30px;overflow: visible !important;}
.mdc-text-field--textarea:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading, .mdc-text-field--textarea:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch, .mdc-text-field--textarea:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color: #2B2B2B;}*/
.contact-form .form-row{margin-bottom: 50px;position: relative;}

.message-success{display: none;text-align: center;}

.contact-form .form-row input {
    border: none;
    border-bottom: 1px solid #c8c8c8;
    background: transparent;
    width: 100%;
    max-width: 400px;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    color: #777777;
    position: relative;
    z-index: 1;
    cursor: text;
}
.contact-form  .form-row input:hover {
    border-bottom-color: #212121;
}
.contact-form .form-row input:focus {
    transition: 0.2s ease all;
    box-shadow: none;
    border-bottom-color: #212121;
}
.contact-form .form-row .animated-label {
    position: absolute;
    left: 0;
    top: -3px;
    font-size: 18px;
    color: #777777;
    font-weight: 400;
}
.contact-form .form-row .animated-label.hide{top: -20px;font-size: 12px;text-transform: uppercase;color:#777777;}
.contact-form .form-row input:focus ~ .animated-label,
.contact-form .form-row textarea:focus ~ .animated-label{
    top: -20px;
    opacity: 1;
    color: #777777;
    font-size: 12px;
    text-transform: uppercase;
    transition: 0.2s ease all;
}
.contact-form .form-row textarea{border: 0;border-bottom: 1px solid #777777;resize: none;
width: 100%;transition: 0.2s ease all;
    max-width: 400px;height: 30px;}
.contact-form .form-row textarea:hover{border-bottom-color: #212121;}
.contact-form .form-row textarea:focus{
  outline:0px !important;
    -webkit-appearance:none;
  box-shadow: none;height: 150px;transition: 0.2s ease all;border-bottom-color: #212121;}

.contactForm a.btn-submit, .contactForm input#form1_submit{color: #2B2B2B;
    font-size: 14px;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
    padding: 17px 30px 17px 30px;float: right;
  background: linear-gradient(to right, #212121 50%, #F9F9F9 50%);
  background-size: 202% 100%;
  background-position: right bottom;
  transition: all .25s ease-out;
  }
.contactForm a.btn-submit:hover, .contactForm input#form1_submit:hover{background-position: left bottom;color: #fff;}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #212121 !important;
    opacity: 1 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #212121 !important;
   opacity: 1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #212121 !important;
   opacity: 1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #212121 !important;
   opacity: 1 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: #212121 !important;
   opacity: 1 !important;
}

::placeholder { /* Most modern browsers support this now. */
   color: #212121 !important;
   opacity: 1 !important;
}

/***************************
* FOOTER
****************************/

.footer{position: relative;padding-top: 150px;padding-bottom: 50px;background: #212121;}
.footer .block{position: relative;}
.footer .block::before{position: absolute;content: ""; background: #A7A7A7; width: 50px; height: 1px;top:-40px;}
.footer h3{font-size: 18px;color: #fff;line-height: 30px;font-weight: 300;margin-bottom: 40px;}
.footer a.phone{font-size: 14px;color: #A7A7A7;display: block;font-weight: 300;}
.footer a.phone:hover{color: #fff;}
.footer a.button{line-height: 48px;font-size: 14px;margin-top: 30px;}
.footer p{font-size: 14px;color: #A7A7A7;line-height: 20px; padding: 0;margin: 0;font-weight: 300;}
.footer img.mba{max-width: 220px;margin-bottom: 40px;}
.footer .credits{position: relative;padding-top: 150px;}
.footer .credits .airth-logo{position: absolute;left: 0;bottom: 0px}
.footer .credits .airth-logo svg{width: 200px;}
.footer .credits .airth-logo img{max-width: 195px;}

.footer .credits .milk-logo{position: absolute;bottom: 0; right: 0;}
.footer .credits .milk-logo svg{fill: #727272;margin-left: 10px;}
.footer .credits .milk-logo a{color: #727272;font-size: 14px;}
.footer .credits .milk-logo a:hover{color: #fff;}
.footer .credits .milk-logo a:hover svg{fill: #fff;}

.footer .credits .copy{position: absolute;left: 0; right: 0;text-align: center;color: #727272;bottom: 5px;font-size: 14px;}

.footer-sticky{background: #212121; position: fixed; height: 50px;width: 100%;bottom: 0;left: 0;z-index: 9;}

/***************************
* INTRO
****************************/

.wrapper-animation-start{width:100%; height:100%; margin: 0 auto; text-align:center;position:fixed; top:0;    z-index: 10; background: #212121;}
.wrapper-logo{max-width:330px; width:100%; margin: 0 auto; text-align:center;position:relative; top:48%; transform:translateY(-50%);}
.logo-top{opacity:0;max-width: 250px;margin: 0 auto;}
.logo-top.show{opacity:1;transition: opacity 0.8s linear;-webkit-transition: opacity 0.8s linear;}
.logo-bottom{position:relative;margin-top: 30px;}
.logo-bottom img{width: 100%;height:auto;}
.logo-bottom:after{position: absolute; content:""; width:50%; height: 104%; background: #212121;right:0px; top:-1px;}
.logo-bottom:before{position: absolute; content:""; width:50%; height: 104%; background: #212121;left:0px; top:-1px;}
.logo-bottom.show:after,
.logo-bottom.show:before{width: 0%;transition: width 0.8s linear;-webkit-transition: width 0.8s linear;}


/***************************
* ANIMATION
****************************/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
/* fade in */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/* fade in from left */
@-webkit-keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}