:root {
    --footerheight: 630px;
    --footerheightminus: -630px;
    --imageopacity: 0.7;
    --transition: all .3s;
    --mainpaddingtop: 110px;
    --white: #d1d3d4;
    --neuehaas: "Neue Haas Unica W1G";
    --neueplak: 'Neue Plak';
    --bwgradual: 'Bw Gradual';
    --bodybgcolor: #2d2b2c;
}

* {box-sizing: border-box;}

html, body {font-family: var(--neuehaas);}
body {background-color: var(--bodybgcolor); margin: 0;}

.circle {
	position: absolute;
    border: solid 2px #ccc;
	width: 50px; 
	height: 50px; 
    border-radius: 50%;
    pointer-events: none !important;
    z-index:999999;
    /* -webkit-transition: transform .6s cubic-bezier(.215,.61,.355,1); -moz-transition: transform .6s cubic-bezier(.215,.61,.355,1); -o-transition: transform .6s cubic-bezier(.215,.61,.355,1); transition: transform .6s cubic-bezier(.215,.61,.355,1); */
    -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;
}
.circle.hover {border: solid 2px #9B683F; width: 60px; height: 60px;}
.circle.hover.white {border: solid 2px #FFF;}

.emblem {
    display: none;
	position: absolute;
	left: -50px;
    /* top: 40px; */
    /* top: 13vh; */
	margin: 0 auto;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	color:  #FFF;
	animation: spinZ 15s linear infinite;
	text-align: center;
    z-index: 999999;
}

.emblem span {
    position: absolute;
    display: inline-block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-transform: uppercase;
    font-family: var(--bwgradual);
    font-size: 10px;
    transition: all .5s cubic-bezier(0,0,0,1);
}

@keyframes spinZ {
    0% {
        transform: rotateZ(360deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

a {-webkit-transition: var(--transition); -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); text-decoration: none; outline: 0; color: inherit;}
a:hover, a:visited, a:active {text-decoration: none; color: inherit;}
a:hover img {opacity: var(--imageopacity);}
img {-webkit-transition: var(--transition); -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);}
ul {padding-left: 0;}
.clear {clear: both;}

.inline-container {padding-left: 2%; padding-right: 5%;}

section {margin-bottom: 150px;}

/* .main-scroll-container {margin-bottom: 30vh;} */

header{display: block; position: relative; z-index: 1;}

header .nav_right {
    /* position: absolute; */
    /* top: 3vw; */
    margin-top: 33px;/*3vw;*/
    right: 5vw;
    font-size: 19px;
    color: #fff;
    line-height: 0px;
    padding: 14px 6px 14px 0;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    font-weight: 300;
    width: 30%;
}

header .header-wrap {
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
    opacity: 1;
    padding-bottom: 30px;
}

header .header-wrap.active {
    background: url('../img/header-bg.png') repeat-x center center;
    background-size: 100% 100%;
}

header .header-wrap .inline-container {display: flex;}

header .header-wrap.hide {
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    pointer-events: none
}

header .header-wrap.menu_show {
    opacity: 0;
    -webkit-transition: all 0.7s ease 0.2s;
    -moz-transition: all 0.7s ease 0.2s;
    -o-transition: all 0.7s ease 0.2s;
    -ms-transition: all 0.7s ease 0.2s;
    transition: all 0.7s ease 0.2s
}

header .logo {
    display: block;
    /* position: absolute; */
    /* left: 2vw; */
    /* top: 3vw; */
    margin-top: 33px;/*3vw;*/
    z-index: 100;
    flex: 1;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease
}

header .logo img {
    /* width: auto; */
    width: 159px;
    margin-left: 10px;
    margin-top: 1px
}

header .logo .logo-wrap {
    overflow: hidden;
    margin-left: -10px
}

/* #main {padding-top: var(--mainpaddingtop);} */

#nav-button-header {display: none; z-index: 10; width: 40px; height: 12px; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; position: fixed; top: 40px; right: 5%;}
#nav-button-header:before, #nav-button-header:after {content: ''; position: absolute; top: 50%; left: 0; right: 0; border: 0px solid #FFF; -webkit-transition: all 100ms linear 0ms; -moz-transition: all 100ms linear 0ms; transition: all 100ms linear 0ms;}
#nav-button-header.active {border-color: transparent;}
#nav-button-header.active:before, #nav-button-header.active:after {border-width: 1px;}
#nav-button-header.active:before {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
#nav-button-header.active:after {-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

#nav-button {position: fixed; right: 3%; top: 50%; margin-top: -15px; height: 40px; width: 12px; border-right: 2px solid #FFF; border-left: 2px solid #FFF; z-index:10;}
#nav-button:before, #nav-button:after {content: ''; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -1px; border: 0px solid #FFF; -webkit-transition: all 100ms linear 0ms; -moz-transition: all 100ms linear 0ms; transition: all 100ms linear 0ms;}
#nav-button.active {border-color: transparent;}
#nav-button.active:before, #nav-button.active:after {border-width: 1px;}
#nav-button.active:before {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
#nav-button.active:after {-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
#nav-button .nav-menu-text {opacity: 0; display: block; text-transform: uppercase; font-size: 11px; letter-spacing: 2px; color: #FFF; transform: rotate(-90deg); -webkit-transition: var(--transition); -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);}
#nav-button:hover .nav-menu-text {opacity: 1; transform: rotate(-90deg) translateX(-75px);}
#nav-button.active .nav-menu-text {opacity: 0;}

#nav-container {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #9B683F; z-index: 9; color: #FFF;}
.nav-content {background: rgba(154, 104, 63, 0.7); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; /*padding: 48px 2% 38px 2%;*/ padding: 7.4vh 2% 7.1vh 2%;}
.nav-background {background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 1; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none;}
/* .nav-bg-work {display: none; background-image: url('../img/nav-bg-work.jpg');}
.nav-bg-home {display: none; background-image: url('../img/nav-bg-home.jpg');} */
#nav-container .logo {/*margin-bottom: 32px;*/ float: none; width: 24.2vh; margin-bottom: 5vh;}
.nav-left {float: left; width: 60%; /*width: 57vw;*/ border-right: 1px solid #d1d3d4; padding-right: 2%}
.nav-item-container {border-top: 1px solid #d1d3d4; /*padding-bottom: 20px;*/ padding-bottom: 4vh;}
.nav-item-container a {color: #FFF;}
.nav-item {border-bottom: 1px solid #d1d3d4; -webkit-transition: var(--transition); -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);}
.nav-item-inner {padding-left: 3%; /*margin-top: 5px; margin-bottom: 5px;*/ margin-top: 0.7vh; margin-bottom: 0.7vh; background: url('../img/nav-item-bg.jpg') no-repeat 0 0; background-size: 0 100%; -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);}
.nav-item:hover .nav-item-inner {background-size: 100% 100%; color: #9B683F;}
.nav-item-number {width: 35px; float: left; font-size: 13px; /*padding-top: 20px;*/ padding-top: 2vh;}
.nav-item-label {overflow: hidden; /*font-size: 52px;*/ font-size: 7.9vh; font-family: var(--bwgradual); letter-spacing: -2px;}
.nav-right {float: left; width: 40%; height: 100%; position: relative;}
.nav-contact-container {position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 3% 10px 8%}
.nav-contact-label {margin-bottom: 7px; font-size: 10px; font-weight: 300; letter-spacing: 2px;}
.nav-social-media-wrapper {margin-bottom: 40px; font-size: 44px; font-family: var(--bwgradual); font-weight: 300;}
.nav-social-media-wrapper a {color: #FFF;}
.nav-phone {margin-bottom: 40px; font-size: 44px; font-family: var(--bwgradual); font-weight: 300;}
.nav-footer {font-weight: 300; font-size: 8px; letter-spacing: 4px;}
.nav-wa-icon {float: left; width: 41px; height: 41px; background: url('../img/icon-wa-white.png') no-repeat 0 0; background-size: cover; margin-right: 10px; margin-top: 10px; padding-top: 10px;}
.nav-wa-label {overflow: hidden;}

#section-slideshow {text-align: right; padding-top: var(--mainpaddingtop);}
.section-slideshow-inner {margin-left: 20%; position: relative;}
#section-slideshow .image-wrapper.desktop-version {display: block;}
#section-slideshow .image-wrapper.mobile-version {display: none; background-size: cover; background-position: center !important;}
.marquee-wrapper {color: #FFF; position: absolute; width: 100%; line-height: 0; left: 0; -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; padding-left: 3%; padding-right: 10%;}
.marquee-wrapper .inline-container {padding-right: 10%;}
.home-marquee h2 {font-size: 195px; color: #FFF; font-family: var(--bwgradual); letter-spacing: -4px; margin-top: 0;}
.home-marquee-border-bottom {height: 10px; background-color: #FFF; width: 0; -webkit-transition: width .6s cubic-bezier(.215,.61,.355,1); -moz-transition: width .6s cubic-bezier(.215,.61,.355,1); -o-transition: width .6s cubic-bezier(.215,.61,.355,1); transition: width .6s cubic-bezier(.215,.61,.355,1);}
.home-marquee-border-bottom.is-inview {width: 100%;}

.section-home-title {font-family: var(--neuehaas); font-weight: 300; color: var(--white); margin-bottom: 20px; letter-spacing: 0.5px;}
#section-home-about {padding-bottom: 40px;}
#section-home-about .section-content {display: flex; align-items: flex-end;}
.home-about-content {font-family: var(--bwgradual); font-size: 45px; font-weight: 300; color: var(--white); overflow: hidden; letter-spacing: -1px;}
.home-about-link {white-space: nowrap; text-align: right; padding-left: 90px; font-family: var(--neueplak); font-size: 9px; color: var(--white); letter-spacing: 2px; position: relative; padding-right: 40px; top: -10px;}
.arrow-link {overflow: hidden; border: 1px solid #4f4f50; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; padding: 9px 15px 9px 15px; display: inline-block; position: absolute; right: 0; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);}
.first-triangle, .second-triangle {width: 7px; position: absolute; top: 50%; margin-top: -4px; margin-left: -3px;}
.first-triangle {left: 50%;}
.second-triangle {left: -50%;}
.home-about-link:hover .first-triangle, .home-about-link:hover .second-triangle {-ms-transform: translateX(30px); transform: translateX(30px);}
.home-about-link:hover .arrow-link {border: 1px solid #7f7f83;}

.section-home-portfolio {margin-bottom: 0;}
.home-portfolio-item {position: relative; width: 100%; height: 100vh; overflow: hidden;}
.home-portfolio-item-inner {position: relative; top: 0; left: 0; width: 100%; height: 100%;}
.home-portfolio-desc-wrapper {position: relative; width: 50%; height: 100%; float: left;}
.home-portfolio-image-wrapper {overflow: hidden; width: 50%; height: 100%; float: right; position: relative; top: 0; left: 0;}
.home-portfolio-image {width: 100%; height: 100%; position: relative; top: 0; left: 0; background-size: cover; background-position: center; -webkit-transition: transform .6s cubic-bezier(.215,.61,.355,1); -moz-transition: transform .6s cubic-bezier(.215,.61,.355,1); -o-transition: transform .6s cubic-bezier(.215,.61,.355,1); transition: transform .6s cubic-bezier(.215,.61,.355,1);}
.home-portfolio-image img {display: none; max-width: 100%;}
.home-portfolio-image-wrapper:hover .home-portfolio-image {-ms-transform: scale(1.1); transform: scale(1.1);}
.home-portfolio-video {width: 100%; height: 100%; position: relative; top: 0; left: 0;}
.home-portfolio-item-title {opacity: 0; padding-right: 5%; line-height: 1.1em; position: absolute; top: 10%; left: 5%; font-family: var(--bwgradual); font-size: 58px; -ms-transform: translateY(60px); transform: translateY(60px); -webkit-transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1); -moz-transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1); -o-transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1); transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1);}
.home-portfolio-item-title.is-inview {opacity: 1; transform: none;}
.home-portfolio-item-short-desc {opacity: 0; width: 80%; position: absolute; top: 50%; left: 5%; -ms-transform: translateY(-50%); transform: translateY(-50%); font-weight: 300; font-size: 27px; -webkit-transition: opacity .6s cubic-bezier(.215,.61,.355,1); -moz-transition: opacity .6s cubic-bezier(.215,.61,.355,1); -o-transition: opacity .6s cubic-bezier(.215,.61,.355,1); transition: opacity .6s cubic-bezier(.215,.61,.355,1);}
.home-portfolio-item-short-desc.is-inview {opacity: 1;}
.home-portfolio-item-tags {opacity: 0; position: absolute; bottom: 10%; left: 5%; font-weight: 300; font-size: 14px; -webkit-transition: opacity .6s cubic-bezier(.215,.61,.355,1); -moz-transition: opacity .6s cubic-bezier(.215,.61,.355,1); -o-transition: opacity .6s cubic-bezier(.215,.61,.355,1); transition: opacity .6s cubic-bezier(.215,.61,.355,1);}
.home-portfolio-item-tags.is-inview {opacity: 1;}
.home-portfolio-number {position: absolute; top: 10%; font-weight: 300; font-family: var(--bwgradual); font-size: 98px; color: var(--white); left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%);}
.home-portfolio-number-mobile {display: none; position: absolute; font-size: 70px; top: -8%; right: 5%; font-family: var(--bwgradual); font-weight: 300; color: var(--white); z-index: 6px;}
.home-portfolio-item-reverse .home-portfolio-image-wrapper {float: left;}
.home-portfolio-item-reverse .home-portfolio-item-title, .home-portfolio-item-reverse .home-portfolio-item-short-desc, .home-portfolio-item-reverse .home-portfolio-item-tags {left: 15%;}
.home-portfolio-item-reverse .home-portfolio-item-short-desc {width: 80%; padding-right: 10%;}
.home-portfolio-item-prev-bg {position: absolute; top: 0; left: 0; right: 0; height: 20vh; display: none;}
.all-works-link-wrapper {text-align: center; margin-bottom: 100px; margin-top: 80px;}
.all-works-link {font-size: 18px !important; white-space: nowrap; text-align: center; display: inline-block; font-family: var(--neueplak); color: var(--white); letter-spacing: 2px; position: relative; padding-right: 40px;}
.all-works-link:hover .first-triangle, .all-works-link:hover .second-triangle {-ms-transform: translateX(30px); transform: translateX(30px);}
.all-works-link:hover .arrow-link {border: 1px solid #7f7f83;}

.discuss-project-label {font-family: var(--bwgradual); font-size: 45px; font-weight: 300; color: var(--white); overflow: hidden; letter-spacing: -1px; margin-bottom: 25px; padding-left: 5%; padding-right: 5%;}
.discuss-project-wrapper {border-top: 2px solid #595959; border-bottom: 2px solid #595959; padding-top: 55px; padding-bottom: 55px;}
.discuss-link-wrapper {text-align: center;}
.discuss-link {font-size: 18px !important; white-space: nowrap; text-align: center; display: inline-block; font-family: var(--neueplak); color: var(--white); letter-spacing: 2px; position: relative; padding-right: 40px;}
.discuss-link .arrow-link {background: #9a693e; border-color: #ae7443;}
.discuss-link:hover .first-triangle, .discuss-link:hover .second-triangle {-ms-transform: translateX(30px); transform: translateX(30px);}
.discuss-link:hover .arrow-link {border: 1px solid #7f7f83;}

.home-article-left {float: left; width: 30%; padding-right: 4%;}
.home-article-right {color: var(--white); float: left; width: 70%; border-left: 1px solid #49494b; /*border-right: 1px solid #49494b;*/ padding-right: 1px;}
.home-article-title {font-family: var(--bwgradual); font-size: 39px; color: var(--white); letter-spacing: 2px; margin-bottom: 50px;}
.home-article-desc {font-size: 24px; font-weight: 300; color: var(--white); padding-right: 10%; letter-spacing: 0.5px;}

.home-article-item {padding-left: 0.3%; padding-right: 0.3%; border-right: 1px solid #49494b;}
.home-article-item-image {width: 100%; overflow: hidden; position: relative; margin-bottom: 30px; border: 1px solid #888584; -webkit-transition: var(--transition); -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);}
.home-article-item-image img {visibility: hidden;}
.home-article-item-image:before {content: ""; display: block; padding-top: 70%;}
.home-article-item-image-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: top center;}
.home-article-item-category {margin-bottom: 20px; font-size: 11px; letter-spacing: 1px; font-weight: 300; color: var(--white);}
.home-article-item-title {font-family: var(--bwgradual); line-height: 1.4em; font-weight: 300; font-size: 34px; color: var(--white); margin-bottom: 30px;}
/* .home-article-slider {padding-left: 1%; padding-right: 1%;} */
.home-article-slider .slick-prev {left: -20px;}
.home-article-slider .slick-next {right: -20px;}
.home-article-slider .slick-prev, .home-article-slider .slick-next {width: 41px; height: 41px; z-index: 2;}
.home-article-slider .slick-prev, .home-article-slider .slick-prev:hover {background: url('../img/slick-left.png') no-repeat 0 0 !important;}
.home-article-slider .slick-next, .home-article-slider .slick-next:hover {background: url('../img/slick-right.png') no-repeat 0 0 !important;}
.home-article-slider .slick-prev:before, .home-article-slider .slick-next:before {content: none;}
.home-article-item-button {width: 30px;}
.home-article-item-button-icon {background: var(--white); height: 30px; position: relative; width: 1px; margin-left: 14px; -webkit-transition: var(--transition); -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);}
.home-article-item-button-icon:after {background: var(--white); content: ""; height: 1px; left: -16px; position: absolute; top: 15px; width: 33px; -webkit-transition: var(--transition); -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);}
.home-article-item-button a:hover .home-article-item-button-icon, .home-article-item-button a:hover .home-article-item-button-icon:after {background: #FFF;}
.home-article-link-wrapper {text-align: center; margin-top: 80px; margin-bottom: 100px;}
.home-article-link {font-size: 18px !important; white-space: nowrap; text-align: center; display: inline-block; font-family: var(--neueplak); color: var(--white); letter-spacing: 0.15vw; position: relative; padding-right: 3.3vw;}
.home-article-link:hover .first-triangle, .home-article-link:hover .second-triangle {-ms-transform: translateX(30px); transform: translateX(30px);}
.home-article-link:hover .arrow-link {border: 1px solid #7f7f83;}

#section-featured-client {margin-bottom: 100px; padding-top: var(--mainpaddingtop);}
#section-featured-client .inline-container {padding-right: 10%;}
.client-page-title {font-size: 58px; color: var(--white); font-family: var(--bwgradual); margin-top: 62px; margin-bottom: 45px; letter-spacing: -1px;}
.featured-client-name-marquee {margin-bottom: 10px;}
.featured-client-name {font-size: 146px; color: #FFF; font-family: var(--bwgradual); margin-bottom: 0;}
.featured-client-name .white-circle-separator {padding-left: 70px; padding-right: 70px;}
.featured-client-city-marquee {margin-bottom: 30px;}
.featured-client-city {font-family: var(--bwgradual); font-size: 78px; color: #FFF; letter-spacing: -1px;}
.featured-client-border-bottom {margin-bottom: 20px; width: 0; height: 10px; background: #FFF; -webkit-transition: width .6s cubic-bezier(.215,.61,.355,1); -moz-transition: width .6s cubic-bezier(.215,.61,.355,1); -o-transition: width .6s cubic-bezier(.215,.61,.355,1); transition: width .6s cubic-bezier(.215,.61,.355,1);}
.featured-client-border-bottom.is-inview {width: 100%;}
.client-wrapper {margin-bottom: 40px; color: var(--white);}
.client-category {float: left; width: 50%; font-size: 17px; font-family: 'Neue Plak'; letter-spacing: 5px;}
.client-list {float: left; width: 50%; font-weight: 300; font-size: 16px; letter-spacing: 0.3px; line-height: 2.5em;}
.client-list-left {float: left; width: 50%; border-left: 1px solid #49494b; border-right: 1px solid #49494b; padding-left: 5%;}
.client-list-right {float: left; width: 50%; padding-left: 5%;}

.contact-form-intro {font-family: var(--bwgradual); padding-top: 160px; font-size: 48px; font-weight: 300; color: var(--white); margin-bottom: 30px; line-height: 1.0em; letter-spacing: -0.5px;}
.contact-form-left {flex: 1; padding-right: 1%;}
.contact-form-right {flex: 1; display: flex; flex-direction: column; padding-left: 1%;}
#contact-form {display: flex;}
#contact-form .form-group {margin-bottom: 20px;}
#contact-form label {font-weight: 300; color: var(--white); letter-spacing: 2px; font-size: 11px; margin-bottom: 20px;}
#contact-form input[type='text'], #contact-form textarea {font-family: "Neue Haas Unica W1G"; border-radius: 0; background: transparent; border: 1px solid #444; font-size: 14px; color: #FFF;}
#contact-form input[type='text'] {height: 29px;}
.field-contactform-body {flex: 1; display: flex; flex-direction: column;}
.field-contactform-body .help-block {display: none;}
#contact-form textarea {flex: 1; margin-bottom: 0;}
#contact-form input[type='text']:focus, #contact-form textarea {-webkit-box-shadow: none; box-shadow: none;}
.contact-form-info {line-height: 1.7em; letter-spacing: 0.2px; font-weight: 300; font-size: 12px; color: #6d6e71; overflow: hidden; margin-bottom: 20px;}
.contact-form-info.mobile-version {display: none;}
.contact-button {float: right; width: 150px; position: relative; overflow: hidden;}
.main-button-icon {position: absolute; top: 52%; left: 66%; -ms-transform: translateY(-50%); transform: translateY(-50%);}
.hidden-button-icon {position: absolute; top: 52%; left: -34%; -ms-transform: translateY(-50%); transform: translateY(-50%);}
.contact-button:hover .main-button-icon, .contact-button:hover .hidden-button-icon {top: 43%; -ms-transform: translateX(150px); transform: translateX(150px);}
#btn-send {color: #d1d3d4; font-weight: 300; font-size: 11px; letter-spacing: 3px; background: #414142; height: 30px; width: 100%; border: 0;}

.join-choice-title {font-family: var(--bwgradual); font-weight: 300; font-size: 48px; color: var(--white); letter-spacing: -1px; position: relative; top: -15px;}
.join-choice-left {position: absolute; top: 50%; transform: translateY(-50%); left: 2%;}
.join-choice-right {float: right; width: 50%; padding-left: 1%;}
.job-choice-item {float: left; width: 49%;}
.job-choice-item-left {padding-right: 1%;}
.job-choice-item-right {padding-left: 1%;}
.job-choice-item-number {font-family: var(--bwgradual); font-weight: 300; font-size: 49px; color: var(--white); margin-bottom: 20px; letter-spacing: 2px;}
.job-choice-item-title {font-weight: 300; font-size: 11px; color: var(--white); padding-bottom: 20px; letter-spacing: 2px;}
.job-choice-item-desc {font-weight: 300; font-size: 14px; color: var(--white); letter-spacing: 1px; line-height: 1.5em;}
.job-choice-item-desc a {color: #808285;}
.job-choice-item-left .job-choice-item-desc {padding-right: 18%;}
/* .job-choice-item-left .job-choice-item-number, .job-choice-item-left .job-choice-item-title, .job-choice-item-left .job-choice-item-desc {padding-right: 5%;} */
.job-choice-item-right .job-choice-item-number, .job-choice-item-right .job-choice-item-title, .job-choice-item-right .job-choice-item-desc {padding-left: 10%;}
.job-choice-item-right .job-choice-item-title, .job-choice-item-right .job-choice-item-desc {border-left: 2px solid #474749;}
/* .job-choice-item-right .job-choice-item-title, .job-choice-item-right .job-choice-item-desc {border-left: 2px solid #474749;} */
.join-choice-bottom .job-choice-item-number {display: none;}

#section-company-highlight {margin-bottom: 70px; padding-top: var(--mainpaddingtop);}
.company-highlight-outer {position: relative; width: 100%; overflow: hidden;}
.company-highlight {position: relative; top: 0; left: 0; width: 100%; font-family: var(--bwgradual); /*font-size: 137px;*/ font-size: 9.8vw; color: var(--white); letter-spacing: -5px; line-height: 1.25em;}
/* .company-highlight .first-line {opacity: 0; -ms-transform: translateY(60px); transform: translateY(60px); -webkit-transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1); -moz-transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1); -o-transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1); transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1);} */
/* .company-highlight .second-line {opacity: 0; text-align: right; -ms-transform: translateY(60px); transform: translateY(60px); -webkit-transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1); -moz-transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1); -o-transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1); transition: opacity .6s cubic-bezier(.215,.61,.355,1),transform .6s cubic-bezier(.215,.61,.355,1); transition-delay: 0.5s;} */
/* .company-highlight .first-line.is-inview, .company-highlight .second-line.is-inview {opacity: 1; transform: none;} */
.company-banner {position: relative; width: 100%; height: 100vh; overflow: hidden;}
.company-banner-wrapper {position: relative; top: 0; left: 0; width: 100%; height: 100%;}
.company-banner-image {position: relative; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center;}
.company-desc-left {float: left; width: 50%; color: var(--white); font-size: 27px; font-weight: 300; padding-right: 5%;}
.company-desc-right {float: left; width: 40%; color: var(--white); font-size: 15px; font-weight: 300; padding-right: 10%; line-height: 1.7em; letter-spacing: 0.2px; padding-left: 3%;}
.company-award-image {float: left; width: 50%; padding-right: 3%;}
.company-award-image img {max-width: 100%;}
.company-award-list-wrapper {width: 50%; float: left; padding-left: 3%;}
.company-award-title {font-size: 59px; color: var(--white); font-family: var(--bwgradual); margin-top: -20px; line-height: 1.1em;}
.company-award-list {border-top: 8px solid #FFF; padding-top: 20px; margin-top: 20px;}
.company-award-list-left {float: left; width: 48%; margin-right: 2%; border-top: 2px solid #4f5052;}
.company-award-list-right {float: left; width: 48%; margin-left: 2%; border-top: 2px solid #4f5052;}
.company-award-item {color: var(--white); border-bottom: 2px solid #4f5052; padding-top: 5px; padding-bottom: 5px;}
.company-award-item p {margin-bottom: 0;}
.company-logo-marquee img {max-width: 200px !important;}
.company-logo-marquee .bullet-separator {max-width: 10px !important;}

.service-title {font-family: var(--bwgradual); color: var(--white); font-size: 59px; margin-bottom: 70px;}
.service-item {float: left; width: 25%; padding-left: 15px; padding-right: 15px;}
.service-item-icon img {max-width: 100px;}
.service-item-icon {margin-bottom: 30px;}
.service-item-png {display: block;}
/* #service-item-0 .service-item-png {display: none;} */
.service-item-gif {display: none;}
/* #service-item-0 .service-item-gif {display: block;} */
.service-item-type {color: var(--white); font-family: var(--neueplak); font-size: 18px; letter-spacing: 5px; margin-bottom: 20px;}
.service-item-title {margin-bottom: 3px; font-weight: 300; font-size: 15px; color: var(--white);}
.service-item-content {border-right: 1px solid #58595b; padding-bottom: 20px;}

#section-popular-stories {padding-top: var(--mainpaddingtop);}
.popular-article-title {font-size: 18px; color: var(--white); font-weight: 300; margin-bottom: 40px;}
.popular-article-list {border-top: 2px solid #4f5052; color: var(--white);}
.popular-article-item {border-bottom: 2px solid #4f5052; padding-top: 20px; padding-bottom: 20px;}
.popular-article-item-col {float: left; width: 33%;}
.popular-article-item-category {font-family: var(--neueplak); font-size: 9px; text-transform: uppercase; letter-spacing: 3px;}
.popular-article-item-category img {vertical-align: sub;}
.popular-article-item-title {font-size: 36px; font-weight: 300; font-family: var(--bwgradual); line-height: 1em; padding-right: 6%; width: 37%;}
.popular-article-item-short-desc {color: #a7a9ac; font-weight: 300; font-size: 14px; line-height: 1.8em; width: 30%;}
.popular-article-item-link-wrapper {text-align: right;}
.popular-article-item-link {font-size: 9px; font-family: var(--neueplak); white-space: nowrap; display: inline-block; letter-spacing: 2px; position: relative; padding-right: 40px;}
.popular-article-item-link:hover .first-triangle, .popular-article-item-link:hover .second-triangle {-ms-transform: translateX(30px); transform: translateX(30px);}
.popular-article-item-link:hover .arrow-link {border: 1px solid #7f7f83;}

.all-stories-title {font-family: var(--bwgradual); font-size: 59px; color: var(--white); margin-bottom: 90px;}
.article-item {width: 48%; margin-left: 1%; margin-right: 1%; color: var(--white); border-bottom: 2px solid #4f5052; padding-bottom: 50px; margin-bottom: 50px;}
.article-item-image {margin-bottom: 20px;}
.article-item-image img {max-width: 100%; width: 100%;}
.article-item-category {float: left; width: 50%; padding-right: 3%; font-family: var(--neueplak); font-size: 9px; text-transform: uppercase; letter-spacing: 3px;}
.article-item-category img {vertical-align: sub; float: left;}
.article-item-title {float: left; width: 50%; padding-right: 3%; font-size: 36px; font-weight: 300; font-family: var(--bwgradual); line-height: 1.2em;}
.animated-text-container {overflow: hidden;}
.animated-text-container.with-margin-left {margin-left: 15%;}
.animated-text {-ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: transform .6s cubic-bezier(.215,.61,.355,1); -moz-transition: transform .6s cubic-bezier(.215,.61,.355,1); -o-transition: transform .6s cubic-bezier(.215,.61,.355,1); transition: transform .6s cubic-bezier(.215,.61,.355,1);}
.animated-text.is-inview {-ms-transform: none; transform: none;}

#section-works-highlight {padding-top: var(--mainpaddingtop);}
.works-page-title {font-size: 18px; color: var(--white); font-weight: 300; margin-bottom: 50px;}
.works-highlight {line-height: 1.2em; float: left; width: 80%; padding-right: 5%; font-size: 49px; color: var(--white); font-family: var(--bwgradual); font-weight: 300; letter-spacing: -1px;}
.works-services {float: left; width: 20%; color: var(--white); font-size: 14px; font-weight: 300;}
.highlight-portfolio-container {position: relative;}
.highlight-portfolio-title-wrapper {position: absolute; top: 50%; left: 0; -ms-transform: translateY(-50%); transform: translateY(-50%);}
.highlight-portfolio-title {font-size: 22px; font-weight: 300; color: var(--white); margin-bottom: 100px;}
.highlight-portfolio-tags {color: #a7a9ac;}
.highlight-portfolio-tags.mobile-version {display: none;}
.highlight-portfolio-subtitle {font-size: 68px; font-family: var(--bwgradual); font-weight: 300; color: var(--white); position: absolute; top: 50%; left: 15%; line-height: 1.2em; border-bottom: 2px solid #414142; padding-bottom: 10px; letter-spacing: -2.5px; width: 50%;}
.highlight-portfolio-subtitle.mobile-version {display: none;}
.highlight-portfolio-image-wrapper {float: right; width: 60%; height: 90vh; text-align: right; overflow: hidden; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center;}
.highlight-portfolio-image-wrapper img {width: 100%;}
.highlight-portfolio-image-wrapper.mobile-version {display: none;}
.portfolio-item {width: 50%; margin-bottom: 60px; padding-top: 100px;}
.portfolio-item:first-child {padding-top: 0;}
.portfolio-item-left {padding-right: 2%;}
.portfolio-item-right {padding-left: 2%;}
.portfolio-item-image {width: 100%; overflow: hidden; position: relative; margin-bottom: 25px;}
.portfolio-item-image img {visibility: hidden; max-width: 100%;}
.portfolio-item-image:before {content: ""; display: block; padding-top: 100%;}
.portfolio-item-image-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: top center;}
.portfolio-item-video {margin-bottom: 25px;}
.portfolio-item-video video {max-width: 100%;}
.portfolio-item-info-wrapper {border-bottom: 2px solid #414141; padding-bottom: 15px;}
.portfolio-item-title {font-size: 20px; font-weight: 300; color: var(--white); margin-bottom: 10px;}
.portfolio-item-subtitle {line-height: 1.15em; float: left; width: 55%; padding-right: 2%; font-weight: 300; font-family: var(--bwgradual); font-size: 36px; color: var(--white); letter-spacing: -0.5px;}
.portfolio-item-tags {float: left; width: 45%; padding-left: 10%; font-weight: 300; font-size: 11px; color: #a7a9ac; line-height: 2.0em;}

/* #section-portfolio-banner {margin-bottom: 100px;} */
/* #section-portfolio-banner img {max-width: 100%;} */
.portfolio-banner {position: relative; width: 100%; height: 100vh; overflow: hidden;}
.portfolio-banner-wrapper {position: relative; top: 0; left: 0; width: 100%; height: 100%;}
.portfolio-banner-image {position: relative; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center;}
#section-works-blocks {color: var(--white); font-weight: 300;}
#section-works-blocks img {max-width: 100%;}
.portfolio-block-heading {font-size: 78px; font-family: var(--bwgradual); font-weight: normal; line-height: 1em;}
.portfolio-block-title {font-size: 90px; letter-spacing: -2px; font-family: var(--bwgradual); font-weight: normal;}
.portfolio-block-row .inline-container {padding-left: 7%; padding-right: 10%; display: flex;}
.portfolio-block-col-left {flex: 1; padding-right: 1.5%; position: relative;}
.portfolio-block-col-right {flex: 1; padding-left: 1.5%; position: relative;}
.portfolio-one-block {margin-left: 20%; margin-right: 20%;}
.portfolio-text-col-1 {column-count: 1;}
.portfolio-text-col-2 {column-count: 2;}
.portfolio-text-col-3 {column-count: 3;}
.portfolio-text-col-4 {column-count: 4;}
.portfolio-text-v-pos-middle {position: relative; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);}
.portfolio-text-v-pos-bottom {position: relative; bottom: 0;}

#section-prev-next-portfolio .inline-container {padding-left: 10%; padding-right: 10%;}
.next-prev-wrapper {display: flex; color: var(--white); position: relative;}
.prev-wrapper {flex: 1; padding-top: 60px; border-right: 2px solid #373537;}
.next-wrapper {flex: 1; padding-top: 60px;}
.prev-link-wrapper, .next-link-wrapper {text-align: center;}
.prev-link {letter-spacing: 5px; padding-left: 40px; margin-bottom: 30px; font-size: 23px !important; display: inline-block; font-family: var(--neueplak); color: var(--white); position: relative;}
.prev-link .arrow-link {right: unset; left: 0;}
.prev-link .second-triangle {right: -50%; left: unset;}
.all-works-link:hover .arrow-link {border: 1px solid #7f7f83;}
.prev-wrapper a:hover .first-triangle, .prev-wrapper a:hover .second-triangle {-ms-transform: translateX(-27px); transform: translateX(-27px);}
.prev-wrapper a:hover .arrow-link, .next-wrapper a:hover .arrow-link {border: 1px solid #7f7f83;}
.next-link {letter-spacing: 5px; padding-right: 40px; margin-bottom: 30px; font-size: 23px !important; display: inline-block; font-family: var(--neueplak); color: var(--white); position: relative;}
.next-wrapper a:hover .first-triangle, .next-wrapper a:hover .second-triangle {-ms-transform: translateX(30px); transform: translateX(30px);}
.next-prev-portfolio-title {font-family: var(--bwgradual); font-weight: 300; font-size: 75px; color: var(--white); line-height: 1.1em; letter-spacing: -3px;}

/* #section-article-banner {margin-bottom: 100px; text-align: center; background-position: top center; background-size: cover; background-repeat: no-repeat;} */
.article-banner {position: relative; width: 100%; height: 100vh; overflow: hidden;}
.article-banner-wrapper {position: relative; top: 0; left: 0; width: 100%; height: 100%;}
.article-banner-image {position: relative; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center;}
.article-gradient {z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 80%, rgba(255,255,255,0) 100%); position: absolute; top: 0; left: 0; right: 0; height: 45vh;}
.article-title-wrapper {z-index: 2; position: absolute; top: 23%; left: 12%; right: 12%; text-align: center;}
.article-title-wrapper .article-category {font-family: var(--neueplak); font-size: 9px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 35px;}
.article-title-wrapper .article-title {font-size: 36px; font-weight: 300; font-family: var(--bwgradual); line-height: 1.3em;}
/* #section-article-banner img {max-width: 100%; visibility: hidden;} */
/* #section-article-blocks {border-bottom: 1px solid #383738; padding-bottom: 40px;} */
#section-article-blocks .inline-container {padding-left: 7%; padding-right: 10%;}
#section-article-blocks img {max-width: 100%;}
.article-block-type-highlight {font-family: var(--bwgradual); font-size: 27px; color: var(--white); line-height: 1.8em;}
.article-block-type-title {font-weight: 500; font-size: 22px; color: #FFF;}
.article-block-type-text {font-weight: 300; font-size: 18px; line-height: 1.5em; color: #a7a9ac;}
.share-wrapper {display:flex; width: 280px; text-align: center; float: right;}
.share-col {flex: 1; position: relative; padding-top: 5px; padding-bottom: 5px;}
.share-label {position: absolute; top: 50%; left: 0; right: 0; text-align: center; -ms-transform: translateY(-50%); transform: translateY(-50%); font-family: var(--neueplak); font-size: 9px; color: var(--white); letter-spacing: 3px;}
.share-line {height: 2px; background: #5e5f61; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); left: 15%; right: 15%;}
.share-fb {padding-left: 3%; padding-right: 3%;}
.share-twitter {padding-right: 3%;}
.share-fb .share-col-inner {border-left: 2px solid #414141; border-right: 2px solid #414141;}
.share-twitter .share-col-inner {border-right: 2px solid #414141;}
#section-prev-next-article .inline-container {border-top: 2px solid #383738; border-bottom: 2px solid #383738; padding-top: 25px; padding-bottom: 25px;}
#section-prev-next-article .next-link {text-align: right;}
#section-prev-next-article .prev-link {text-align: left;}

/* #footer {position: relative; min-height: var(--footerheight); clear:both;}  */
.footer-logo {margin-bottom: 20px; display: block; animation-name: spin;
	animation-duration: 5000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear; }
.footer-email-wrapper {margin-bottom: 60px;}
.footer-email {font-family: var(--bwgradual); display: inline-block; font-size: 44px; color: var(--white); background: url('../img/footer-email-bg.jpg') no-repeat 0 0; background-size: 0 100%; padding: 0px 10px 3px 10px; -webkit-transition: var(--transition); -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); font-weight: 300;}
.footer-email:hover {color: #2d2a2b; background-size: 100% 100%;}
.footer-label {border-top: 2px solid #373537; border-bottom: 2px solid #373537; font-weight: 300; color: #939598; padding-bottom: 15px; padding-top: 15px; letter-spacing: 2px; font-size: 11px; margin-bottom: 20px;}
.footer-content {font-family: var(--bwgradual); font-weight: 300; font-size: 44px; color: var(--white); margin-bottom: 25px;}
.footer-content a {display: inline-block; color: var(--white); background: url('../img/footer-email-bg.jpg') no-repeat 0 0; background-size: 0 100%; padding: 0 10px 6px 10px; -webkit-transition: var(--transition); -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);}
.footer-content a:hover {color: #2d2a2b; background-size: 100% 100%;}
.wa-icon-wrapper {float: left; width: 41px; height: 41px; background: url('../img/icon-wa-brown.png') no-repeat 0 0; margin-right: 20px; margin-top: 10px; padding-top: 10px; background-size: cover;}
.wa-label-wrapper {overflow: hidden;}
.footer-wa a:hover .wa-icon-wrapper {background-image: url('../img/icon-wa-white.png');}
.copyright {border-top: 2px solid #373537; padding-top: 80px; padding-bottom: 40px; font-size: 9px; color: #9b683f; letter-spacing: 3px;}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.ytplayer {pointer-events: none;}