/*
Theme Name: Johnson and Sekin
Theme URI: https://wordpress.org/themes/johnsonandsekin/
Author: Johnson and Sekin
Author URI: http://johnsonandsekin.com
Description: Johnson and Sekin Wordpress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: johnsonandsekin
*/


@import 'wp-style.css';

/* Johnson and Sekin custom styles */


@font-face {
    font-family: fenomen-slab;
    src: url('assets/fonts/Fenomen Slab Book.otf') format('opentype');
}

@font-face {
    font-family: fenomen-sans;
    src: url('assets/fonts/Fenomen Sans Book.otf') format('opentype');
}

@font-face {
    font-family: fenomen-sans;
    font-weight: bold;
    src: url('assets/fonts/Fenomen Sans Bold.otf') format('opentype');
}

@font-face {
    font-family: fenomen-sans;
    font-weight: 500;
    src: url('assets/fonts/Fenomen Sans Semi Bold.otf') format('opentype');
}

@font-face {
	font-family: Chronicle;
	src: url('assets/fonts/ChronicleSemibold.otf') format('opentype');
}

@font-face {
    font-family: 'proxima_nova_altblack';
    src: url('assets/fonts/Mark Simonson - Proxima Nova Alt Black-webfont.eot');
    src: url('assets/fonts/Mark Simonson - Proxima Nova Alt Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Black-webfont.woff2') format('woff2'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Black-webfont.woff') format('woff'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Black-webfont.ttf') format('truetype'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Black-webfont.svg#proxima_nova_altblack') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_nova_altbold';
    src: url('assets/fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.eot');
    src: url('assets/fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.woff2') format('woff2'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.woff') format('woff'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.ttf') format('truetype'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.svg#proxima_nova_altbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Proxima Nova';
    src: url('assets/fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.eot');
    src: url('assets/fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.woff2') format('woff2'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.woff') format('woff'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.ttf') format('truetype'),
         url('assets/fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.svg#proxima_nova_altregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_nova_scosfthin';
    src: url('assets/fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.eot');
    src: url('assets/fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.woff2') format('woff2'),
         url('assets/fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.woff') format('woff'),
         url('assets/fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.ttf') format('truetype'),
         url('assets/fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.svg#proxima_nova_scosfthin') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'proxima_nova_ltsemibold';
    src: url('assets/fonts/Mark Simonson - Proxima Nova Semibold-webfont.eot');
    src: url('assets/fonts/Mark Simonson - Proxima Nova Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/Mark Simonson - Proxima Nova Semibold-webfont.woff2') format('woff2'),
         url('assets/fonts/Mark Simonson - Proxima Nova Semibold-webfont.woff') format('woff'),
         url('assets/fonts/Mark Simonson - Proxima Nova Semibold-webfont.ttf') format('truetype'),
         url('assets/fonts/Mark Simonson - Proxima Nova Semibold-webfont.svg#proxima_nova_ltsemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_nova_ltthin';
    src: url('assets/fonts/Mark Simonson - Proxima Nova Thin-webfont.eot');
    src: url('assets/fonts/Mark Simonson - Proxima Nova Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/Mark Simonson - Proxima Nova Thin-webfont.woff2') format('woff2'),
         url('assets/fonts/Mark Simonson - Proxima Nova Thin-webfont.woff') format('woff'),
         url('assets/fonts/Mark Simonson - Proxima Nova Thin-webfont.ttf') format('truetype'),
         url('assets/fonts/Mark Simonson - Proxima Nova Thin-webfont.svg#proxima_nova_ltthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'typoforge';
    src: url('assets/fonts/typoforge_studio_-_kapra_neue_medium-webfont.woff2') format('woff2'),
         url('assets/fonts/typoforge_studio_-_kapra_neue_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



/* Home */

html, body {height:100%; width:100%; margin:0 auto !important;}
html {margin-top:0 !important;}
body {background:#111; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;}
body.overflow {overflow:hidden;}
body, button, input, select, textarea {font-family: 'proxima_nova_ltsemibold', sans-serif;}

nav {display:none;}

@keyframes loader {
	0% {opacity:0; transform:scale(1);}
	10% {opacity:0; transform:scale(1);}
	20% {opacity:1; transform:scale(1);}
	100% {opacity:1; transform:scale(1.04);}
}

.loader {/*background:url(/wp-content/themes/johnsonandsekin/assets/images/home-load.jpg) no-repeat;*/ background: radial-gradient(ellipse at center, rgba(132,217,103,1) 0%,rgba(113,204,81,1) 100%); position: absolute; width: 100% !important; height: 100% !important; top: 0; left: 0; right: 0; bottom: 0; background-size:100% 100%; z-index: 999999; animation: loader 6s both ease;  transition:display.3s ease;}

.loader.fadeout {display:none;}
.loader h2 {font-family: "brandon-grotesque", sans-serif; font-weight: 500; font-size: 2.5vw; color: white; text-transform: uppercase; letter-spacing: 0.2vw; animation: loader 6s both ease;}

.loader svg {fill:#71cc51; width: 59vw; max-width: 80vh;}

.loader-wrap {overflow: hidden; height: 100%; width: 100%; display: block; position: absolute;z-index: 999; display:none;}
.home .loader-wrap {display:block;}

.l-flex {display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%;}

.front-content {font-family: 'typoforge'; text-transform: uppercase; color:white;}
.front-content.fadein {opacity:1;}


.logo-black {display:none !important;}

.topshadow {background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); position: absolute; top: 0; width: 100%; height: 300px;}
.home .topshadow {display:none;}

.johnsonandsekin-front-page .site-content {padding: 0; text-align: center;}

.home .site-content-contain, .home #page {position:static; background:none;}  


.logo {text-align:center; padding-top: 35px; position:relative; z-index:98;}
.logo svg {max-width:37px; fill:inherit;}
.logo img {display: block; margin: 10px auto;}

@keyframes colorchange {
	/*0% {fill:#F16043;}
	25% {fill:#edb23d;}
	50% {fill:#6cbe50;}
	75% {fill:#4ed2db;}
	100% {fill:#f16044;}*/
    0% {
        fill: #95D025;
    }
    33.33% {
        fill: #6CBE50;
    }
    66.66% {
        fill: #50BE94;
    }
    100% {
        fill: #95D025;
    }
}

@keyframes colorchangeBG {
    0% {
        background-color: #95D025;
    }
    33.33% {
        background-color: #6CBE50;
    }
    66.66% {
        background-color: #50BE94;
    }
    100% {
        background-color: #95D025;
    }
}

@keyframes bar {
	0% {height:3px;}
	100% {height:1px;}
}

@keyframes loadbar {
	0% {width:0%; height:3px;}
	100% {width:100%;height:3px;}
}

@keyframes leftarrow {
	0% {transform: translateX(0);}
	70% {transform: translateX(-20px);}
	100% {transform: translateX(0);}
}

@keyframes rightarrow {
	0% {transform: translateX(0);}
	70% {transform: translateX(20px);}
	100% {transform: translateX(0);}
}


body {animation: colorchange 60s 5s both infinite; overflow-x:hidden;}
body.home {animation: colorchange 20s 2s both infinite linear; min-height:500px;}
.colorchange {animation:inherit;}


#pj_slides {overflow-x:hidden;}
.pj_slide {position:absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -3; opacity:0; transition:transform 1s cubic-bezier(0.52, 0.1, 0.35, 0.98); transform: translateX(100%);}
.firstclone {transform: translateX(-100%)}
.lastclone {transform: translateX(100%);}
.firstclone.active_slide, .lastclone.active_slide {z-index:-1 !important;}
.top {z-index:-1 !important;}

.pj_slide.active_slide {z-index: -2; /*opacity:1;*/ transform: translateX(0%);}
.pj_slide.negative {transform: translateX(-100%);}
.pj_slide.positive {transform: translateX(100%);}
.pj_slide.first_slide {transform: translateX(100%); z-index:-10;}
/*.pj_slide:last-of-type {z-index:-10;}*/
.pj_slide.last_slide {transform: translateX(-100%); z-index:-1;}
.pj_background {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: top center;}
.pj_title, .pj_link {display:none;}

#pj_title {font-family: fenomen-slab; font-size: 60px; color: white; text-align: center; margin-bottom: 15px; padding-top:109px;}
#pj_button {font-family: 'proxima_nova_ltsemibold', sans-serif;
    font-size: 18px;
    color: white;
    border: 2px solid #3BAE49;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 9px 15px;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    background: none;
    position: relative;
    overflow: hidden;}
/*#pj_button:hover {background: rgba(255,255,255,.3);}*/

.viewbar {height: 100%; position: absolute; top: 0; left: 0; z-index: -1; -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 67%,rgba(0,0,0,0) 100%); width:0%; transition:width .3s ease; fill:inherit; /*mask-image: url(assets/images/mask.png);*/}

/*#pj_button:hover .viewbar {width: 145%;}*/

#loadbar {width: 45vw; margin: 0 auto; display: flex; margin-bottom: 160px;}

.barwrap {padding:10px 0; width: 100%; cursor:pointer; overflow:hidden;}
.barwrap.activeBar {overflow:visible;}
.barinner {background: #fff; margin-right: 9px; transition: height .2s; position: relative; height: 1px;}
.barwrap.activeBar .barinner {height: 1px; /*animation: bar .3s 7s both ease;*/}

svg.bar {height: 0; transition: height .3s; width:100%;}
.activeBar svg.bar {position: absolute; height: 100%; left: 0; width: 100%; animation: loadbar 7s 0s both linear;}

.leftnav {position: absolute; left: 0; top: 0; width: 100px; height: 100%; display: flex; align-items: center; justify-content: center; cursor:pointer;}
.rightnav {position: absolute; right: 0; top: 0; width: 100px; height: 100%; display: flex; align-items: center; justify-content: center; cursor:pointer;}
.leftnav img, .rightnav img {height: 44px; width: 22px; user-select:none;}

.leftnav:hover img { animation: leftarrow 1s 0s both infinite;}
.rightnav:hover img { animation: rightarrow 1s 0s both infinite;}

/* grow {transform: scale(1.3) !important;}*/

.disable {pointer-events:none;}

.v-slide {opacity:1;}

#page {position: relative !important; height: 100%; /*overflow-x: hidden;*/}

.pj_mid {position: absolute; width: 100%; height: 100%; top: 0; display: flex; align-items: center; justify-content: center;}

.fold {display: flex; flex-wrap: wrap; position: relative; overflow: hidden; height: 100vh;}
.fold>div {width:50%; height:100vh; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center;}
.fold span {font-size: 4.5vw; position:fixed;}

.fold svg {fill:inherit; position: absolute; left: 0; top:0;}

.fold-right svg {animation: colorchange 20s -25s both infinite linear;}

.plus {position: fixed; z-index: 9; width: 4vw; margin: 0 auto; top: calc(50% - 2vw); left: calc(50% - 2vw); transition: opacity .4s ease;}
.plus.hide {opacity:0;}

.below-fold {position: relative; display: flex; flex-wrap: wrap;}

.bf-pj {width: 50%; height:100vh; /*display: flex;*/ align-items: center; justify-content: center; /*overflow:hidden;*/ position: relative;}
.bf-pj h4 {font-family: 'typoforge', sans-serif; text-transform: uppercase; color: white; font-size: 4.5vw; margin:0; text-align:center; position: -webkit-sticky; position: sticky; top: calc(50% - 3vw); margin-top: calc(50% - 3vw); margin-bottom:-100%; font-weight: normal;}
.bf-pj video {position: fixed; top: 0; right: 0vw; height: 100vh; width: 50vw; object-fit: cover; font-family: 'object-fit: cover;';}

.bf-pj video.bfv {-webkit-backface-visibility: hidden;}
.scrollto video {left: 0; right: initial;}

.bf-pj.fullpage {width: 100%;}
.bf-pj.fullpage video {width: 100vw;}
.fullpage .bf-bg {width: 100vw;}
.bf-pj.fullpage h4 {margin-top: calc(28% - 3vw);}


.clip {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }

.bf-bg {width: 50vw; height: 100vh; background-size: cover; position: fixed; top: 0; right: 0; background-position: center;}
.bf-pj:nth-child(even) .bf-bg {background-color:#b8babc;}
.bf-pj:nth-child(odd) .bf-bg {right:initial; left:0; background-color:#cdcfd0;}

.cname, .w-combo {opacity:0; transition:all .8s ease; transform:translateY(1vw);}
.cname.show, .w-combo.show {opacity:1; transform:translateY(0vw);}
.cname.hide, .w-combo.hide {opacity:0; visibility:hidden;}

.downscroll {position: fixed; width: 3vw; margin: 0 auto; top: calc(96vh - 1.5vw); left: calc(50% - 1.5vw); opacity: 0; transition: opacity .4s ease;}
.downscroll.show {opacity:1; animation: downscroll 2.5s .5s cubic-bezier(0.65, 0.76, 0.51, 1.35) both infinite;}

.interm {width: 100%; height: 100vh; position:relative; overflow:hidden;}
.interm .colorchange {position: absolute; left: 0; height: 100vh;}
.interm p {font-family: 'typoforge'; color: white; font-size: 4.5vw; margin: 0 auto; text-align: center; position: sticky; top: calc(50% - 9vw); font-weight: normal; width: 28%; line-height: 5vw; margin-top: calc(50% - 28vw); margin-bottom: -100%;}

.bf-spacer, .bf-spacer-full {display:none;}

.txt-revealer span {max-height: 0; transform: scaleY(0); display: block; overflow: hidden; transition: max-height .6s ease, transform .6s ease;}
.txt-revealer span.reveal {max-height: 5vw; transform: scaleY(1);}

.volume-off {position: absolute; top: 3vw; right: 3vw; opacity: 1; visibility: visible; transition: all .4s ease; cursor: pointer; width: 6vw; height: 6vw;}
.volume-off img, .volume-up img {width:100%; height:100%;}
.volume-up {position: absolute; top: 3vw; right: 3vw; height: 6vw; width: 6vw; opacity:0; visibility: hidden; transition:all .4s ease; pointer-events: none; cursor:pointer;}

.volume-off.aud-toggle {opacity:0; visibility: hidden; pointer-events:none;}
.volume-up.aud-toggle {opacity:1; visibility: visible; pointer-events:all;}


/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

	.fold span {position:absolute; left:50%; top:50%; transform: translate(-50%, -50%) !important; top:52%}
	.cname, .w-combo {opacity:0; transition:all .8s ease; transform:translate(-40%, -50%) !important; top:52%}
	.cname.show, .w-combo.show {opacity:1; transform: translate(-50%, -50%) !important; top:50%;}
	.cname.hide, .w-combo.hide {opacity:0; visibility:hidden;}
	
	.clip {justify-content: center; will-change: transform; transform: translateZ(0);}
	.bf-pj video {will-change: transform; transform: translateZ(0); font-family: 'object-fit: cover;';}
}}




@keyframes downscroll {
	0%, 70%, 100% {transform:translateY(0vw);}
	85% {transform:translateY(1vw);}
}


/*IE*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.fold span {position:absolute; left:50%; top:50%; transform: translate(-50%, -50%) !important; top:52%}
	.cname, .w-combo {opacity:0; transition:all .8s ease; transform:translate(-40%, -50%) !important; top:52%}
	.cname.show, .w-combo.show {opacity:1; transform: translate(-50%, -50%) !important; top:50%;}
	.cname.hide, .w-combo.hide {opacity:0; visibility:hidden;}
	
	.bf-pj video, .work-vid-wrap .work-vid {max-width:none;}
	.bf-pj h4 {transform: translateZ(1px); transform-style: preserve-3d;}
	.clip {transform: translateZ(-1px); transform-style: preserve-3d; will-change: transform;}
	.bf-pj video {will-change: transform; transform: translateZ(0); font-family: 'object-fit: cover;'; position:absolute;}
	.bf-bg {position:absolute;}
}

/*Edge*/
@supports (-ms-ime-align: auto) {
	.bf-pj video, .work-vid-wrap .work-vid {max-width:none;}
	.bf-pj video {will-change: transform; transform: translateZ(0); font-family: 'object-fit: cover;';}
	.bf-pj h4 {transform: translateZ(1px); transform-style: preserve-3d;}
	.clip {transform: translateZ(-1px); transform-style: preserve-3d;}
}

@media screen and (max-width: 640px){
	.bf-pj {width: 100%;}
	.bf-bg {width: 100vw; position:absolute;}
	
	.bf-pj video {position:absolute; width:100vw;}
	
	.clip {clip:unset;}
	
	
	
	.bf-pj h4 {font-size: 11vw; top: 50%; margin-top: 0; left: 50%; transform: translate(-50%, -50%); position:absolute;}
	
	.below-fold {z-index:2;}
	.plus {position: absolute; z-index: 1; width: 5vw; top: calc(50vh - 2.5vw); left: calc(50vw - 2.5vw);}
	
	.fold span {font-size: 8.5vw;}
	
	.interm p {font-size: 9.5vw; top: calc(50% - 12vw); font-weight: normal; width: 70%; line-height: 10vw; margin-top: calc(50% + 27vw);}
	.txt-revealer span.reveal {max-height: 10vw; transform: scaleY(1);}
	
/*	.fullpage {display:none;}*/
	
	.volume-off, .volume-up {top:unset; bottom:4vw; width: 15vw; height: 15vw;}
}



/* Navigation */

.home .logo, .home .hamburger {opacity:0; transition:opacity .4s ease; position:fixed;}
.home .logo.fadein, .home .hamburger.fadein {opacity:1;}

.home .logo {left: calc(50% - 128px);}
.home .logo-black {display:none !important; filter: drop-shadow(0px 0px 2px #fff);}
.home .logo-white {display:block;}

.hamburger {width:35px; cursor:pointer; position: absolute; top: 35px; left: 50px; z-index: 99; line-height: 13px;}
.hamburger svg {margin:0; height:4px; width: 100%; transition:opacity .5s ease, transform .5s ease, margin .5s ease; transform-origin:0; fill:white !important;}

.hammid {filter: brightness(200%);}
.hambottom {fill: white !important;}

.open .hamtop {transform: rotateZ(45deg); margin-bottom: -1px; fill:white !important;}
.open .hammid {opacity:0;}
.open .hambottom {transform: rotateZ(-45deg);}

.nav {position:fixed; top:0; left:0; right:0; bottom:0; z-index:97; transform:translateX(-100%); transition: all .5s ease; display:block; overflow-y: auto;}
.nav.open {transform:translateX(0%);}

.nav svg {width: 100%; height: 100%; opacity: .95; position: fixed; top: 0;}

.inner-nav {overflow-y:scroll}

.logo.open {fill:white; transition:all .5s; opacity:0 !important;}

.logo2 {text-align:center; padding-top: 35px; position:relative; z-index:98;opacity:0;}
.logo2 svg {max-width:37px; position: static;}
.logo2 img {display: block; margin: 10px auto;}
.logo2.open {opacity:1; fill:white; transition:all .5s;}


nav {display:block; position: relative; text-align: center; font-family: 'typoforge', serif; text-transform:uppercase; font-size: 60px; max-width: 27vh; margin: 6vh auto 0; line-height: 110px;}
nav a {color:white;}
nav ul {list-style:none; margin: 0 0 5.5vw;}
nav li {line-height: 13vh; font-size: 6vh;}

.bottomnav {position: relative; display: flex; justify-content: space-around; color: white; font-size: 20px; max-width: 1300px; margin: 0 auto; margin-bottom: 3vh; font-size: 2vh; max-width: 80vw;}
.bottomnav a {color:white;}
.bottomnav strong {margin-right: 10px; margin-bottom: 20px; float: left;}
.bottomnav-wrap {position: absolute; bottom: 0; width: 100%;}

.social {display: flex; justify-content: space-between; width: 180px;}
.social a {transition:all .4s ease; position:relative;}
.social a:hover {transform:scale(1.3);}

.facebook {width: 17px; height: 26px; background: url(assets/images/social.png) no-repeat; background-position: 0 0; display: block;}
.twitter {width: 32px; height: 26px; background: url(assets/images/social.png) no-repeat; background-position: -23px 0; display: block;}
.instagram {width: 33px; height: 26px; background: url(assets/images/social.png) no-repeat; background-position: -57px 0; display: block;}
.linkedin {width: 26px; height: 26px; background: url(assets/images/social.png) no-repeat; background-position: -100px 0; display: block;}

#top-menu a:after {content: ''; display: block; width: 0%; height: 2px; background: white; transition: all .2s ease; margin-top: -11px; position: relative; top: -10px;}
#top-menu a:hover {color:white;}
#top-menu a:hover:after {width:100%;}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
	.nav svg {display:none;}
}


@media screen and (max-width: 939px){
	.bottomnav {flex-wrap: wrap; max-width: 262px;}
	.bottomnav div {width:100%; margin-bottom: 1vw;}
	.bottomnav-wrap {position:static;}
	.social {margin-top:30px;}
	
	nav {margin: 30px auto 0;}
	
	.hamburger {top: 20px; left: 20px;}
	
	#loadbar {width: 85vw;}
	#pj_title {font-size: 11vw; margin-top: 8vw; margin-bottom: 15px; margin-bottom: 4vw; padding-top: 16.5vw;}
   
	
	/*.rightnav { width: 10vw; align-items: normal; justify-content: right;}*/
	.rightnav img, .leftnav img {display: none;}
	
	/*.logo {padding-top: 9vw;}*/
	
}

@media screen and (max-width: 690px){
	.nav svg {height:200%;}
}


/* Project Page */

.pj-header {width: 100%; height: 588px; background-repeat: no-repeat; background-size: cover; margin-top: -205px; background-position: center; position:relative; color: white;}

.pj-header-ct {position:absolute; bottom: 0; background: rgba(0,0,0,.7); width: 100%; padding: 15px 0px 10px;}
.pj-header-ct-in {max-width: 1200px; margin: 0 auto; display: flex;}
.pj-header-ct-in>* {width:100%; position:relative;}

.project-title {font-size: 40px; font-family: 'typoforge', serif; text-transform:uppercase; width: 100%; border-bottom: thin solid white; position: absolute; bottom: 7px; margin-bottom: 0;}
.pj-title-div {margin-right:30px; min-height: 70px;}

.pj-header p {margin: 0; font-family: 'Proxima Nova'; font-size: 18px;}


.next-pj {width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.next-pj #pj_button {z-index:2; margin-top: 15px;}

h2#pj_title {margin-top: 0; padding-top: 0; position:relative;}

.next-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(22 48 58 / 80%);
}

.next-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
}


.pj_single {display: flex; margin-bottom: 2.3vw;}
.pj_single * {width: 100%; height: 100%;}

.pj_double {display: flex; justify-content: space-between; margin-bottom: 2.3vw;}
.pj_double * {width: 48.7%; height: 100%;} 

.pj_triple {display: flex; justify-content: space-between; margin-bottom: 2.3vw;}
.pj_triple * {width: 31.6%; height: 100%;}

.pj_half {display: flex; justify-content: space-between; margin-bottom: 2.3vw;}
.pj_half>* {width: 48.7%; height: 44.5vw;}

.pj_half_wrap {display: flex; flex-direction: column; justify-content: space-between; height: auto;}
.pj_half_wrap * {height: 47%; width:100%;}

.pj_row {transition:all .5s ease;}

.doublewide {width: 65.85%;}

.project {margin-top:45px;}

.upnext {background: #f3f3f3; padding: 10px 0px; margin-top: 60px;}
.upnext span {font-family: 'proxima_nova_ltsemibold', sans-serif; text-transform: uppercase; display: block; width: 1200px; margin: 0 auto; border-bottom: thin solid #171717; font-size: 18px; color: #171717;}

.single-project .topshadow {z-index: 9;}

.project-template-default .wrap, .community-template-default .wrap {max-width: 97%;}

.project-template-default #content>.wrap *, .community-template-default .wrap #content>.wrap * {line-height:0;}

.address {line-height:1.8 !important;}

.main-image {margin: 2vw 0;}
.main-image img {width: 100%;}

.layout-sp-cal-vid {display: flex; width: 100%; justify-content: space-between; margin: 2vw 0;}
.layout-sp-cal-vid video {width: 46%; height: 100%; height: 42.6vw; object-fit: fill;}
.layout-sp-cal-vid img {width: 52%; height: 100%; height: 42.6vw;}

.layout-sp-loc-vid-left {display: flex; width: 100%; justify-content: space-between; margin: 2vw 0;}
.layout-sp-loc-vid-left video {width: 51%; height: 100%; height: 42.6vw; object-fit: fill;}
.layout-sp-loc-vid-left img {width: 47%; height: 100%; height: 42.6vw;}

.layout-2c-2x1-2r1 {margin: 2vw 0; display: flex; justify-content: space-between;}
.layout-2c-2x1-2r1 div {width: 58%; display: flex; flex-direction: column; justify-content: space-between;}
.layout-2c-2x1-2r1 div img {width:100%;}
.layout-2c-2x1-2r1>img {width: 40%; height: 100%;}

.layout-2c-1x2-2r1 {margin: 2vw 0; display: flex; justify-content: space-between;}
.layout-2c-1x2-2r1 div {width: 40%; display: flex; flex-direction: column; justify-content: space-between;}
.layout-2c-1x2-2r1 div img {width:100%;}
.layout-2c-1x2-2r1>img {width: 58%; height: 100%;}

.layout-2c-1x1-2r1 {margin: 2vw 0; display: flex; justify-content: space-between;}
.layout-2c-1x1-2r1 div {width: 49%; display: flex; flex-direction: column; justify-content: space-between;}
.layout-2c-1x1-2r1 div img {width:100%;}
.layout-2c-1x1-2r1>img {width: 49%; height: 100%;}

.vidwrap, .vidwrap-auto {position: relative;}
.vidwrap video, .vidwrap-auto video {width: 100%; cursor: pointer; object-fit: cover;}
.fa-play {color: rgba(255,255,255,.8); position: absolute; left: calc(50% - 5vw); top: calc(50% - 4vw); width: 10vw !important; height: 8vw; cursor: pointer; opacity:1; transition: opacity .4s ease, transform .4s ease, filter .4s ease; filter: drop-shadow(0vw 0vw 2vw #000);}
.layout-2c-1x1-vid .fa-play {left: calc(50% - 2.5vw); top: calc(50% - 2.5vw); width: 5vw !important; height: 5vw;}
.playing .fa-play {opacity: 0;}
.vidwrap:hover .fa-play {transform: scale(1.1); filter: drop-shadow(0 0 3vw #000);}

.layout-2c-1x1-vid {display: flex; justify-content: space-between; margin: 2vw 0; line-height: 0;}
.layout-2c-1x1-vid .vidwrap, .layout-2c-1x1-vid .vidwrap-auto {width: 49%; overflow:hidden;}
.layout-2c-1x1-vid video {/*height: 36vw;*/ height: auto; object-fit: cover;}

.layout-3c-1x1-vid {display: flex; justify-content: space-between; margin: 2vw 0; line-height: 0;}
.layout-3c-1x1-vid .vidwrap, .layout-3c-1x1-vid .vidwrap-auto {width: 32%; overflow:hidden;}
.layout-3c-1x1-vid video {height: auto; object-fit: cover;}

.layout-2c-1x1-vid-right {display: flex; justify-content: space-between; margin: 2vw 0; line-height: 0; align-items: start;}
.layout-2c-1x1-vid-right .vidwrap, .layout-2c-1x1-vid-right .vidwrap-auto, .layout-2c-1x1-vid-right img {width: 49%; overflow:hidden; /*height: 38vw;*/}
.layout-2c-1x1-vid-right video {height: 100%; object-fit: cover;}

.layout-2c-1x1-vid-left {display: flex; justify-content: space-between; margin: 2vw 0; line-height: 0; align-items: start;}
.layout-2c-1x1-vid-left .vidwrap, .layout-2c-1x1-vid-left .vidwrap-auto, .layout-2c-1x1-vid-left img {width: 49%; overflow:hidden;}
.layout-2c-1x1-vid-left video {height: 100%; object-fit: cover;}

.layout-2c-1x2-vid-left {display: flex; justify-content: space-between; margin: 2vw 0; line-height: 0; align-items: start;}
.layout-2c-1x2-vid-left .vidwrap, .layout-2c-1x2-vid-left .vidwrap-auto {width: 32%; overflow:hidden;}
.layout-2c-1x2-vid-left img {width:66%;}
.layout-2c-1x2-vid-left video {height: 100%; object-fit: cover;}

.single-image {margin: 2vw 0; line-height: 0;}
.single-image img {width: 100%;}

.layout-3c-1x1 {margin: 2vw 0; display: flex; justify-content: space-between;}
.layout-3c-1x1 img {width: 32%; height: 100%;}

.layout-sp-cal-vid-right {margin: 2vw 0; display: flex; justify-content: space-between;}
.layout-sp-cal-vid-right img {height: 100%; width: 70.6%;}
.layout-sp-cal-vid-right video {height: 100%; width: 27.2%;}


.layout-2c-1x1 {display: flex; margin: 2vw 0; justify-content: space-between;}
.layout-2c-1x1 img {width: 49%; height: 100%;}

.slider img {width:100%;}
/*.slider div {width:33% !important;}*/
.bx-wrapper {background: #e3e3e3; border: none; box-shadow: none; padding: 5vw 2vw 0 2vw;}

.bx-wrapper .bx-controls-direction a {top: 0%; margin-top: 0; right: 0; outline: 0; width: 3vw; height: 3vw; background-color: #878787; transition:background-color .3s ease; background-size: 37%; background-position: 42% !important;}
.bx-wrapper .bx-controls-direction a:hover {background-color:#b5b5b5;}
.bx-wrapper .bx-controls-direction .bx-prev {left: initial; right: 3vw !important; background-image:url(/wp-content/uploads/arrow_left.png);}
.bx-wrapper .bx-controls-direction .bx-next {background-image:url(/wp-content/uploads/arrow_right.png); background-position: 58% !important;}

.layout-3c-1x1-2r2 {display: flex; justify-content: space-between; margin: 2vw 0;}
.layout-3c-1x1-2r2>* {width: 32%; height: 100%;}
.layout-3c-1x1-2r2 div {display: flex; justify-content: space-between; flex-direction: column; height: auto;}
.layout-3c-1x1-2r2 div>* {/*flex:0;*/ height: auto; width: 100%;}

.layout-sp-pzn-3c-1x1-2rc-3vid {display: flex; justify-content: space-between; margin: 2vw 0;}
.layout-sp-pzn-3c-1x1-2rc-3vid>* {width: 32%; height: 100%;}
.layout-sp-pzn-3c-1x1-2rc-3vid div {display: flex; justify-content: space-between; flex-direction: column; height: auto;}
.layout-sp-pzn-3c-1x1-2rc-3vid div>* {/*flex:0;*/ height:auto; width:100%;}



.layout-4c-1x1 {display: flex; justify-content: space-between; margin: 2vw 0;}
.layout-4c-1x1 img {width: 23.5%; height: 100%;}

.layout-2c-2x1-2r2 {display: flex; justify-content: space-between; margin: 2vw 0;}
.layout-2c-2x1-2r2>img {height: 100%; width: 66.2%;}
.layout-2c-2x1-2r2>div {height: auto; width: 31.7%; display: flex; justify-content: space-between; flex-direction: column;}
.layout-2c-2x1-2r2 div img {width: 100%; height: auto;}

.layout-2c-1x2 {display: flex; margin: 2vw 0; justify-content: space-between;}
.layout-2c-1x2 img:nth-child(1) {width: 32%; height: 100%;}
.layout-2c-1x2 img:nth-child(2) {width: 66%; height: 100%;}

.layout-2c-2x1 {display: flex; margin: 2vw 0; justify-content: space-between;}
.layout-2c-2x1 img:nth-child(2) {width: 32%; height: 100%;}
.layout-2c-2x1 img:nth-child(1) {width: 66%; height: 100%;}

.layout-single_vid {margin: 2vw 0;}


.layout-2c-1x2-vid-right {display: flex; margin: 2vw 0; justify-content: space-between;}
.layout-2c-1x2-vid-right>img {width: 32%; height: 100%;}
.layout-2c-1x2-vid-right>div {width: 66%; height: 100%;}

.layout-2c-2x1-vid-right {display: flex; margin: 2vw 0; justify-content: space-between;}
.layout-2c-2x1-vid-right>img {width: 66%; height: 100%;}
.layout-2c-2x1-vid-right>div {width: 32%; height: 100%;}

/*.single-project video {font-family: 'object-fit: cover;'; max-width:none;}*/

.single-project .hamburger.fadein {position: fixed; left: 3vw;}


.playv {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 89%;
}

.pj-header-ct {
    background: rgb(22 48 58 / 80%);
    padding: 40px 0;
}

.project-title {
    font-family: 'fenomen-slab';
    border: none;
    position: static;
    width: 350px;
    margin-right: 160px;
    line-height: 1.2;
    Text-transform: none;
}

.pj-title-div {
    width: 350px;
}

.pj-header-ct-in {
    width: 90%;
}

.pj-header {
    height: 750px;
}

.c-results {
    display: flex;
    width: 90%;
    max-width: 1200px;
    margin: 70px auto 50px;
    border-bottom: 1px solid #D1D1D1;
    padding-bottom: 20px;
}

.c-title h2 {
    color: #16303A;
    font-family: 'fenomen-sans';
    font-weight: bold;
    font-size: 29px;
    line-height: 1.2;
}

.c-results>* {
    padding: 10px 30px;
    min-width: 25%;
}

.c-result {
    font-size: 15px;
    border-left: 1px solid #D1D1D1;
}

.c-title {
    padding-left: 0;
}

.c-results>*:last-of-type {
    padding-right: 0;
}

@media screen and (min-width: 981px){
    .page-template-work .workbox {
        height: 22vw;
    }
}


@media screen and (max-width: 980px){
	.pj_row {display:block; margin:0;}
	.pj_row img {width: 100% !important; /*height: 74.5vw !important;*/ margin-bottom:28px;}
	.pj_half_wrap {display:block; width: 100%; height: auto;}
	.pj-header-ct-in {display: block; padding: 0 30px;}
	.upnext span {width: auto; margin: 0 30px;}

    .c-results {
        flex-direction: column;
        border: none;
    }

    .c-result {
        padding: 10px 0;
        border: none;
        border-bottom: 1px solid #D1D1D1;
    }
}


@media screen and (min-width: 48em){
	.wrap {max-width: 1240px; padding-left: 20px; padding-right: 20px;}
}


/* Footer */

.site-footer {margin-top:0; background:#171717; border: none; height: 300px; display: flex; align-items: center; align-items: flex-end;}
.site-footer svg {height: 22px; width: 22px; float: left; margin-right: 50px; position: relative; top: 2px;}
.wpcf7-form-control-wrap {position: relative;} 
.site-footer .wrap {padding: 8px 25px; max-width:100%; width:100%; margin-bottom: 15px;}

.address {display: inline-block; font-size: 18px; color: #868686 !important; font-family: 'proxima_nova_ltsemibold', sans-serif; text-transform: uppercase; letter-spacing: 3px; word-spacing: 1px;}
.address a[href^="tel"] {
  color: #868686;
}
.address span {margin: 0 8px;}

.copyright {font-family: 'Proxima Nova', sans-serif; font-size: 14px; color: #868686; float: right; position: relative; top: 3px;}


@media screen and (max-width: 980px){
	.site-footer .wrap {padding: 8px 20px;}
	.site-footer svg {width: 100%;}
	.address {font-size: 4vw; width: 100%; text-align: center; margin-top: 20px;}
	.address span {display: none;}
	.copyright {width: 100%; float: none; text-align: center; display: block; margin-top: 9px; margin-bottom: 10px;}
}


/* Work */

.workbox {background-size: 100% 100%; width:33.3333%; position:relative; overflow:hidden;}
.workbox img {transition:transform 2s ease; width: 100%;}
.workbox:hover img {transform:scale(1.2);}
.work_wrap {display:flex; flex-wrap: wrap; line-height: 0px; background: #0d0d0d;}

.workbox-in {position: absolute; top: 0; height: 100%; width: 100%; background: rgba(0,0,0,.3); opacity:0; transition:opacity .3s;}
.workbox:hover .workbox-in {opacity:1;}

.workbox-in h4 {font-family: 'proxima_nova_ltsemibold', sans-serif; text-transform: uppercase; font-size: 1.5vw; text-align: center; color: white; margin:0; letter-spacing: .1vw; position: relative; z-index: 99;}


@keyframes negative1 {
	0% {transform: translateY(0);}
	30% {transform: translateY(.39vw);}
	70% {transform: translateY(.39vw);}
	100% {transform: translateY(0);}
}
@keyframes negative2 {
	0% {transform: rotateZ(90deg) translateY(0);}
	30% {transform: rotateZ(90deg) translateY(.39vw);}
	70% {transform: rotateZ(90deg) translateY(.39vw);}
	100% {transform: rotateZ(90deg) translateY(0);}
}
@keyframes negative3 {
	0% {transform: rotateZ(180deg) translateY(0);}
	30% {transform: rotateZ(180deg) translateY(.39vw);}
	70% {transform: rotateZ(180deg) translateY(.39vw);}
	100% {transform: rotateZ(180deg) translateY(0);}
}
@keyframes negative4 {
	0% {transform: rotateZ(-90deg) translateY(0);}
	30% {transform: rotateZ(-90deg) translateY(.39vw);}
	70% {transform: rotateZ(-90deg) translateY(.39vw);}
	100% {transform: rotateZ(-90deg) translateY(0);}
}
@keyframes neg {
	0% {transform: rotateZ(0deg)}
	30% {transform: rotateZ(0deg)}
	60% {transform: rotateZ(360deg)}
	100% {transform: rotateZ(360deg)}
	
}


.neg-logo {width: 3.1vw; height: 3.2vw; margin: 0 auto; position: relative; margin-top: 7vw; line-height: 0; transform: rotateZ(0deg);}
.workbox:hover .neg-logo {/*animation:neg 2s .4s both ease;*/}
.neg-logo svg {width: 0.55vw; height:1.3vw;}

.neg-1 {position: absolute; top: 0; left: 41.25%; fill:inherit;}
.workbox:hover .neg-1 {animation:negative1 1s .4s both cubic-bezier(0.74, -0.8, 0.29, 1.71);}
.neg-2 {position: absolute; right: 0; top: 22.1%; transform: rotateZ(90deg); transform-origin: 0; fill:inherit;}
.workbox:hover .neg-2 {animation:negative2 1s .4s both cubic-bezier(0.74, -0.8, 0.29, 1.71);}
.neg-3 {position: absolute; bottom: 0; left: 22.8%; transform: rotateZ(180deg); transform-origin: .56vw; fill:inherit;}
.workbox:hover .neg-3 {animation:negative3 1s .4s both cubic-bezier(0.74, -0.8, 0.29, 1.71);}
.neg-4 {position: absolute; left: 0; top: 21%; transform: rotateZ(-90deg); transform-origin: .56vw; fill:inherit;}
.workbox:hover .neg-4 {animation:negative4 1s .4s both cubic-bezier(0.74, -0.8, 0.29, 1.71);}

.work-vid-wrap {display: flex; flex-direction: column; justify-content: space-evenly; position: absolute; top: 0; height: 100%; width: 100%;}

.work-vid {position: absolute; min-width: 100%; min-height: 100%; object-fit: fill;}

.work-vid-wrap .work-vid {height: auto; min-height: 100%; min-width: 100%; font-family: 'object-fit: cover;';}

.page-template-work .logo-white, .page-template-work .topshadow {display:none;}
.page-template-work .logo-black {display:block !important;}
.page-template-work {background:#fff;}
.page-template-work .site-content {padding-bottom:0 !important; padding-top: 60px !important;}
.page-template-work .hamburger svg {fill: #c7c8ca !important; filter:none;}
.page-template-work .hamburger.open svg {fill: #fff !important;}

.pj-work {position: static; background: #f3f3f3;}
.pj-work p {margin: 0;}
.pj-work .project-title {border-color: #333333; font-size: 50px;}

.home-work .workbox img {width:unset;}


@media screen and (max-width: 980px){
	.workbox {width:100%;}
	.workbox-in h4 {font-size: 2.5vw;}
	.neg-logo {margin-top: 11vw;}
}

@media screen and (max-width: 650px){
	.work-vid {display:none;}
	.workbox-in {opacity:1; background:none;}
	.workbox-in h4 {z-index: 96;}
}

/* Careers */

.page-template-careers .logo-white, .page-template-careers .topshadow {display:none;}
.page-template-careers .site-content {padding-bottom:0 !important; padding-top: 60px !important;}

/* Culture */

.page-template-culture .logo-white, .page-template-culture .topshadow {display:none;}
.page-template-culture .logo-black {display:block !important;}
.page-template-culture {background:#fff;}
.page-template-culture .site-content {padding-bottom:0 !important; padding-top: 60px !important;}
.page-template-culture .hamburger svg {fill: #c7c8ca !important; filter:none;}
.page-template-culture .hamburger.open svg {fill: #fff !important;}

.page-template-culture .workbox {height: 23vw;}

.page-template-culture .workbox-in h4 {text-transform: none; padding: 0 2vw; line-height: 1.8vw; margin-top: 1vw;}

.wb-culture .workbox-in {background: none;}
.wb-culture .neg-logo {display: none;}

@media screen and (max-width:980px){
	.page-template-culture .workbox {height: 35vw;}
}



/* Contact */

.page-template-contact .logo-white, .page-template-contact .topshadow {display:none;}
.page-template-contact .logo-black {display:block !important;}
.page-template-contact {background:#fff;}
.page-template-contact .site-content {padding-bottom:0 !important; padding-top: 60px !important;}
.page-template-contact .hamburger svg {fill: #c7c8ca !important; filter:none;}
.page-template-contact .hamburger.open svg {fill: #fff !important;}

.pj-contact {position: static; background: #f3f3f3; padding-top: 35px;}
.pj-contact .project-title {border-color: #333333; font-size: 50px;}

.contact-wrap {position:relative;}
.contact-wrap .wrap {z-index: 2; position: relative;}
.contact-wrap address {color: white; font-family: 'typoforge', sans-serif; text-transform:uppercase; font-style: normal; font-size: 60px; padding-top: 62px; margin-bottom: 35px;}
.contact-wrap p {clear:both; margin: 0;}
.contact-wrap input, .contact-wrap input:focus, .contact-wrap textarea {background: none; color: white !important; border: thin solid white; border-radius: 0;}
.contact-wrap input::placeholder, .contact-wrap textarea::placeholder {color: white;}
.contact-wrap textarea {height:200px;}

input.wpcf7-submit {background: black; width: 26%; text-transform: uppercase; letter-spacing: 4px; margin: 38px auto 16px; display: block; border: none;}


.contact-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; fill:inherit;}


.formname {width: 49% !important; float: left; margin-bottom: 22px;}
.formemail {width: 49% !important;float: right; margin-bottom: 22px;}

.form-sayhi, .form-newbus, .form-work {display:none;}
.f-vis {display:block;}

.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {border: thin solid white; position: relative; top: -32px; color: white; margin: 0;}

.form-selector {display: flex; justify-content: space-between;}
.form-selector div {width: 24.5%; margin-bottom: 60px; padding: 11px; transition:background .3s ease;}
.form-selector div.selected {background: rgba(255,255,255,0.3);}
.form-selector h4 {font-family: 'Proxima Nova', sans-serif; font-weight: normal; text-transform: uppercase; border-bottom: thin solid; margin-bottom: 8px; letter-spacing: 1px;}
.form-selector span {font-family: 'proxima_nova_ltsemibold', sans-serif; font-size: 18px;}

#s-sayhi, #s-newbus, #s-work {cursor:pointer;}

#map {height: 678px;}
#map img {filter:grayscale(100%);}
#map img[src*='marker.svg']{filter:grayscale(0%) !important; fill:red;}

span.wpcf7-form-control-wrap.your-name {width: 49%; float: left;}
span.wpcf7-form-control-wrap.your-name input {width: 100% !important; float: none;}

span.wpcf7-form-control-wrap.your-email {float: right; width: 49%;}
span.wpcf7-form-control-wrap.your-email input {float: none; width: 100% !important;}

span.wpcf7-not-valid-tip {color: #f00; font-size: 1em; font-weight: normal; display: block; position: relative; top: -17px;}

    


@media screen and (max-width: 1220px){
	.contact-wrap address {font-size: 4.1vw;}
	.form-selector {flex-wrap:wrap;}
	.form-selector div {width:49%; margin-bottom:20px;}
}

@media screen and (max-width: 980px){
	input.wpcf7-submit {width:55%;}
}

@media screen and (max-width: 760px){
	.form-selector div {width:100%; margin-bottom:20px;}
}



/* News */

.page-template-news .logo-white, .page-template-news .topshadow, .page-template-community .logo-white, .page-template-community .topshadow {display:none;}
.page-template-news .logo-black, .page-template-community .logo-black {display:block !important;}
.page-template-news, .page-template-community {background:#fff;}
.page-template-news .site-content, .page-template-community .site-content {padding-bottom:0 !important; padding-top: 60px !important;}
.page-template-news .hamburger svg, .page-template-community .hamburger svg, .single-post .hamburger svg {fill: #c7c8ca !important; filter:none;}
.page-template-news .hamburger.open svg, .single-post .hamburger.open svg, .page-template-community .hamburger.open svg {fill: #fff !important;}
.page-template-news .site-content .wrap, .page-template-community .site-content .wrap{padding-top: 50px;}

.pagination {clear:both; position:relative; font-size:11px; line-height:13px; float:right; padding: 0 0 3em; margin-top: -40px; margin-bottom: 80px; border-top:none;}
.pagination span, .pagination a {display: block; float: left; margin: 2px 2px 2px 0; padding: 6px 9px 5px 9px; text-decoration: none; width: auto; color: #939598; background: none; transition: background .15s ease-in-out; font-size: 18px; font-family: 'Proxima Nova', sans-serif;}
.pagination a:hover{color:#fff !important; background: #939598; box-shadow:none !important;}
.pagination .current{padding:6px 9px 5px 9px; background: #939598; color:#fff;}

.article {display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #939598; margin-bottom: 60px;}

.newsthumb {width: 49%;}

.newsright {width: 49%;}

.moretag {margin-top: 10px; font-family: 'Proxima Nova', sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; color: #939598; border: thin solid #939598; width: auto; padding: 7px 15%; float: left; clear: left; display: block; transition:all .3s ease;}
.moretag:hover {color:black; border-color:black;}

.date {color: #939598; font-family: 'typoforge', sans-serif; text-transform:uppercase; border-bottom: thin solid; font-size: 14px; position: relative; top: -5px;}

.newsright h3 {font-family: 'typoforge', sans-serif; text-transform:uppercase; color: #2b2b2b; font-size: 36px; line-height: 40px; margin: 8px 0 15px 0; padding: 0;}
.newsright p {color: #2b2b2b;}

.newsright .blog-title {letter-spacing: 1px;}


@media screen and (max-width: 760px){
	.article {flex-wrap: wrap;}
	.newsthumb {width: 100%;}
	.newsright {width: 100%;}
	.newsright p:last-of-type {text-align: center;}
	.moretag {width: 100%;}
}




/* Articles */

.single-post .site-content .wrap img, .single-post .site-content .wrap figcaption {display:none;}
.single-post  .wp-post-image {display:block !important; width:100%; margin-bottom: 40px;}

.single-post  .logo-white, .single-post .topshadow {display:none;}
.single-post  .logo-black {display:block !important;}
.single-post  {background:#fff;}
.single-post  .site-content {padding-bottom:0 !important; padding-top: 60px !important;}
.single-post  .hamburger svg {fill: #c7c8ca; filter:none;}
.single-post  .hamburger.open svg {fill: #fff;}
.single-post  .site-content .wrap {padding-top: 50px;}

.single-post  .date {font-family:'Proxima Nova', sans-serif; font-size: 18px;}
.single-post  h1 {font-family: 'typoforge', sans-serif; text-transform:uppercase; font-size: 48px; margin: 8px 0; padding: 0; color: #2b2b2b; line-height: 50px; letter-spacing: 2px;}
.single-post  .wrap p {font-size: 24px; color: #2b2b2b; font-family: 'Proxima Nova', sans-serif;}


nav.navigation.post-navigation {width: 100%; max-width: 100%; margin: 30px 0 60px; line-height: initial;}
.post-navigation .nav-links {padding: 0; font-family: 'Proxima Nova', sans-serif; font-size: 18px;}
.post-navigation .nav-subtitle {color: #939598; font-size: 18px;}

.post-navigation .nav-previous {text-align: left;}
.post-navigation .nav-next .nav-subtitle .np-arrow {font-size: 50px; display: inline-block; margin-left: 30px; top: -13px; position: absolute; right: 0; line-height: 39px;}
.post-navigation .nav-previous .nav-subtitle .np-arrow {font-size: 50px; display: inline-block; top: -13px; position: absolute; left: 0; line-height: 39px;}

.nav-previous .nav-subtitle {padding-left: 50px;}
.nav-next .nav-subtitle {padding-right: 50px;}

.post-edit-link {border: thin solid gray; padding: 8px 30px; display: inline-block; margin-bottom: 30px;}

.post-content { border-bottom: thin solid gray;}
.post-content a {color: #4387d2;}

.back-news {position: absolute; right: 0; bottom: 13px; font-family: 'proxima_nova_ltsemibold', sans-serif; font-size: 18px; text-transform: uppercase; font-weight: bold; color: #939598; letter-spacing: 1px;}
.back-news img {margin-right: 8px;}

@media screen and (max-width: 760px){
	.np-text {display:none;}
	.back-news {display:none;}
	.single-post h1 {font-size:40px; line-height:45px;}
}



.mini-nav {
    background-color: #171717;
    text-align: center;
    font-family: 'typoforge', serif;
    text-transform:uppercase;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}
.mini-nav a {
    color: #ffffff;
    display: block;
    font-size: 1.5rem;
    padding: 0.67em 1em;
}
.mini-nav .menu {
    /*padding: 1rem;*/
    list-style: none;
    display: flex;
    justify-content: center;
    max-width: 640px;
    margin: 0 auto;
}
.mini-nav .menu > li {
    flex: 1;
}
#top-menu a:after {
    margin-top: 0;
    top: auto;
    bottom: 0;
}
#top-menu .logo-link a:after {
    display: none;
}
.home .logo {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    padding-top: 0;
    opacity: 1;
}
.logo svg {
    max-width: 6rem;
    width: 100%;
}
.mini-nav svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    animation: colorchange 60s 5s both infinite;
}

.logo-link a {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.colorchangeBG {
    animation: colorchangeBG 60s 5s both infinite;
}

/* Culture */

.page-template-culture #page {
    height: auto;
}

.arrow-block,
.arrow-block h2 {
    color: #171717;
}
.arrow-block {
    padding: 60px 30px;
    text-align: center;
    background-color: #f3f3f3;
}
.arrow-block h2 {
    text-transform: uppercase;
    font-family: 'typoforge', sans-serif;
    font-size: 3.5rem;
    margin-bottom: 0.25em;
    line-height: 1;
}
.arrow-block > * {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}
.arrow-block > :last-child {
    margin-bottom: 0;
}
.arrow-block.colorchangeBG {
    color: #ffffff;
}
.triangle-down {
    text-align: center;
    background-color: #f3f3f3;
}
.arrow-block p {
    font-size: 1.375rem;
}

/* Home */
.home #page {
    position: static !important;
}
.home .copy,
.home .copy h2 {
    color: #ffffff;
    text-align: center;
    font-size: 1.375rem;
    width: 100%;
}
.home .copy {
    padding: 6rem 2rem;
}
.home .copy h2 {
    font-size: 3.5rem;
    font-family: 'typoforge', sans-serif;
    text-transform: uppercase;
    line-height: 1;
}
.home .copy > * {
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}
.bf-pj.fullpage {
    height: 150vh;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}
.volume-up,
.volume-off {
    top: 60px;
    position: fixed;
}
.front-content {
    font-family: 'proxima_nova_ltsemibold', sans-serif;
    text-transform: none;
}

#page {
    height: auto;
}
.pj-contact {
    padding-top: 15px;
}

.page-template-contact .site-content,
.page-template-work .site-content,
.page-template-culture .site-content,
.page-template-news .site-content,
.single-post .site-content,
.page-template-community .site-content,
.page-template-careers .site-content{
    padding-top: 0 !important;
}

.featured-work {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.featured-work h2 {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-size: 3.5rem;
    font-family: 'typoforge', sans-serif;
    margin-bottom: 0;
    line-height: 1;
    text-shadow: 0 0 66px #000000;
}
.featured-work a {
    display: block;
    color: inherit;
    padding: 10rem 2rem;
}
.below-fold {
    flex-direction: column;
}

.about-wrap {
    color: #ffffff;
    padding: 4rem 1rem;
    text-align: center;
}
.about-wrap > * {
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}
.about-wrap > :last-child {
    margin-bottom: 0;
}
.about-wrap h2 {
    color: #171717;
    text-transform: uppercase;
    font-size: 3.5rem;
    font-family: 'typoforge', sans-serif;
    line-height: 1;
    padding-top: 0.5em;
}
.about-wrap p {
    font-size: 1.375rem;
}
.founders {
    display: flex;
    max-width: 90ch;
    max-width: 1000px;
}
.founders > * {
    flex: 1;
    padding: 0 0.5rem;
}
.founders img {
    width: 350px;
    display: block;
    margin: 0 auto 0.5rem;
}
.founders p {
    font-family: 'typoforge', sans-serif;
    text-transform: uppercase;
    font-size: 2.5rem;
    line-height: 1;
}
.founders span {
    display: block;
    font-family: 'proxima_nova_ltsemibold', sans-serif;
    font-size: 1.25rem;
}
.founders-plus {
    align-self: center;
    flex: none;
}
.founders-plus svg {
    width: 3rem;
    height: 3rem;
    fill: #ffffff;
    transform: translateY(-100%);
}
.managers {
    background-color: #f3f3f3;
    padding: 2rem 1rem 4rem;
}
.manager--grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.team-member {
    margin: 6em 1em 0;
    flex-shrink: 0;
}
.team-member img {
    display: block;
    margin: 0 auto 0.5rem;
}
.team-member p {
    font-family: 'typoforge', sans-serif;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0;
    line-height: 1;
}
.team-member span {
    display: block;
    font-family: 'proxima_nova_ltsemibold', sans-serif;
    font-size: 1.125rem;
    text-transform: uppercase;
}
.mobile-nav {
    display: none;
}
.scroll-down {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 0.5s;
}
.scroll-hide {
    opacity: 0;
    pointer-events: none;
}

.last-row {
    display: flex;
    justify-content: space-between;
    width: 65%;
    margin: 0 auto;
}

@media screen and (max-width: 980px) {
    .arrow-block h2,
    .home .copy h2 {
        font-size: 2rem;
    }
    .arrow-block p,
    .home .copy {
        font-size: 1rem;
    }
    .site-footer svg {
        margin-right: auto;
    }
    .mini-nav {
        position: fixed;
        bottom: 0;
        max-height: 100vh;
        overflow-y: auto;
        display: none;
    }
    .mini-nav .menu {
        flex-direction: column;
    }
    .mobile-nav {
        display: flex;
        flex-wrap: wrap;
        background-color: #171717;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 0.25rem 0;
    }
    .mobile-nav svg {
        width: 2.75em;
        height: 2.75em;
        padding: 0.5em;
        vertical-align: middle;
        fill: currentColor;
        animation: colorchange 60s 5s both infinite;
    }
    .mobile-toggle {
        background: transparent;
        border-radius: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 0 1em;
        position: relative;
        z-index: 102;
        margin-left: auto;
    }
    .mobile-toggle:hover,
    .mobile-toggle:focus {
        background-color: transparent;
    }
    .mobile-toggle-close {}
    .menu-bar {
        width: 2.5rem;
        height: 4px;
        border-radius: 4px;
        background-color: #ffffff;
        display: block;
        position: relative;
        transition: background 0.2s;
    }
    .menu-bar:before,
    .menu-bar:after {
        content: "";
        height: 4px;
        width: 100%;
        background-color: #ffffff;
        display: block;
        position: absolute;
        border-radius: 4px;
        transition: transform 0.3s;
        transform-origin: left center;
    }
    .menu-bar:before {
        top: -10px;
        transform-origin: 5px center;
    }
    .menu-bar:after {
        top: 10px;
        transform-origin: 8px center;
    }
    .mobile-toggle-close .menu-bar {
        background-color: transparent;
    }
    .mobile-toggle-close .menu-bar:before {
        transform: rotate(45deg);
    }
    .mobile-toggle-close .menu-bar:after {
        transform: rotate(-45deg);
    }
    .mobile-nav a {
        color: #ffffff;
        display: block;
    }
    .mobile-nav .menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #171717;
        text-align: center;
        max-height: 100vh;
        overflow-y: auto;
        padding: 1em;
        z-index: 101;
    }
    .mobile-nav-open .menu {
        display: flex;
        flex-direction: column;
    }
    .mobile-nav .menu > li {
        padding: 0.5em 0;
        font-family: 'typoforge', sans-serif;
        font-size: 2rem;
        text-transform: uppercase;
    }
    .mobile-logo {
        margin-top: 2rem;
    }
    .mobile-logo svg {
        width: 4rem;
        height: 4rem;
    }
    .mobile-logo img {
        max-width: 12rem;
        display: block;
        margin: 0 auto;
    }
    .mobile-social {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mobile-social li {
        padding: 0.25em;
    }
    .mobile-social .instagram {
        background-position: -60px 0;
    }
    .mini-nav .logo-link {
        order: -1;
    }
    .about-wrap p {
        font-size: 1rem;
    }
    .about-wrap h2 {
        font-size: 2rem;
    }
    .manager--grid {
        grid-template-columns: 1fr 1fr;
        grid-gap: 4rem 2rem;
        width: 80%;
    }

    .last-row {width:100%;}
    .founders p,
    .team-member p {
        font-size: 1.5rem;
    }
    .founders span,
    .team-member span {
        font-size: 1rem;
    }
}

@media screen and (max-width: 780px) {
    .manager--grid, .last-row {flex-direction: column;}
}

@media screen and (max-width: 640px) {
    .bf-bg,
    .bf-pj video {
        position: fixed;
    }
    .clip {
        clip: rect(0, auto, auto, 0);
    }
    .founders p,
    .team-member p {
        font-size: 5vw;
    }
    .founders span,
    .team-member span {
        font-size: 3vw;
    }
    .founders-plus svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}


/* IE */


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
    svg {fill:#6cbe50 !important;}
    .founders-plus svg {fill: #ffffff !important;}
    .colorchangeBG {background-color:#6cbe50 !important; animation: none !important;}
    .logo svg {max-height:37px;}
    .nav {background:rgba(108,190,80,.9)}
    .bf-pj.fullpage {
        height: 100vh;
    }
    .volume-up,
    .volume-off {
        position: absolute;
    }
    .manager--grid {
        display: flex;
        flex-wrap: wrap;
    }
    .team-member {
        width: 33.33%;
        margin-bottom: 3rem;
    }
    .mobile-logo img {
        width: 12rem;
        height: 3rem;
    }
}
@media all and (-ms-high-contrast: none) and (max-width: 980px), (-ms-high-contrast: active) and (max-width: 980px) {
    .team-member {
        width: 50%;
    }
}

@media not all and (min-resolution:.001dpcm) { @media {

    .bf-pj.fullpage { 

        height: 100vh;

    }
}}


/*  2021 Refresh */


body {background:none;}

.headline h1, .headline h2 {
    font-family: fenomen-slab;
    font-size: 57px;
    position: relative;
    line-height: 1;
}

.headline {
    text-align: center;
    width: 900px;
    max-width: 90%;
    margin: 0 auto;
}

.careers-accordion,
.headline.selected {
    margin-top: 120px;
    margin-bottom: 120px;
}

.home .headline {
    margin-bottom: 0px;
}

.headline h1:after, .headline h2:after {
    content: '';
    width: 0;
    height: 3px;
    background: #3BAE49;
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    transition: width .5s .5s ease;
}

.animate.headline h1:after, .animate.headline2 h2:after {
    width: 69px;
}

.careers-description p {
    font-family: fenomen-sans;
    text-align: left;
}

.headline2 {
    color: #2F2F2F;
    padding: 70px 0;
    margin-top: 60px;
    transition: all .5s ease-out;
}

.headline2 p {
    text-align: left;
}

.headline2 h2 {
    color: #16303A;
}

.headline2.selected h2 {
    color: white
}

.headline2.selected {
    background: #16303A;
    color: white;
}


.double-callout {
    display: flex;
    width: 100%;
    overflow: hidden;
    background: #16303A;
    color: white;
    font-family: fenomen-sans;
}

.double-callout.green {
    background:#3BAE49;
}

.dc-left {
    width: 50%;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-right {
    width: 50%;
    height: 36vw;
    max-height: 700px;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: pre-wrap;
}

.dc-right p {
    max-width: 600px;
    width: 80%;
    font-size: 19px;
    line-height: 1.6;
    text-align: left;
}

.dc-left h2 {
    color: white;
    font-family: fenomen-slab;
    font-size: 60px;
    text-align: center;
    line-height: 1;
    width: 80%;
    max-width: 500px;
}

.img-row {
    display: block;
    margin: 0;
    width:100%;
        margin-bottom: -2px;
}

.article {
    width: 100  %;

    flex-direction: column;
    justify-content: flex-start;
    border: none;
    margin-bottom: 15px;
    padding-bottom: 0;
}

.page-template-news .site-content .wrap, .page-template-community .site-content .wrap {
   /* display: flex;
    flex-wrap: wrap;
    justify-content: space-between;*/

    display: grid;
    grid-template-columns: repeat(auto-fill, 32%);
    grid-gap: 1%;
    justify-content: space-between;
}

.newsthumb {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
}

.newsright {
    width: 100%;
    padding: 0 20px;
}

.newsright h3 {font-family: 'fenomen-slab';font-size: 24px;text-transform: none;font-weight: bold;line-height: 1.3;margin: 20px 0 0;}

.newsright p {
    font-family: 'fenomen-sans';
    margin-top: 10px;
}

.newsright p:nth-child(2) {
    display: none;
}

.moretag {
    display: none;
}

.pagination {
    margin-top: 40px;
    float: none;
    margin: 40px auto;
}

.page-title {
    font-size: 40px;
    font-family: 'fenomen-sans';
    text-transform: none;
    letter-spacing: 0;
    font-weight: bold;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    margin-top: 60px;
    text-align: left;
    margin-bottom: 20px;
    color:#16303A;
}

.mini-nav {
    background-color: #16303A;
    font-family: 'fenomen-sans';
}

.mini-nav .menu {
    max-width: 1200px;
    font-weight:500;
    align-items: center;
    padding: 0;
}

.mini-nav a {
    color: #ffffff;
    display: block;
    font-size: 1.04rem;
    padding: 0.6em 1em;
}

.logo-link a {
    font-weight: bold;
    color: #3bae49;
    font-size: 20px;
    font-family: "brandon-grotesque", sans-serif;
}

.mini-nav .menu > li {
    flex: unset;
}

.home-articles {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

.featured-article {
    width: 49%;
}

.article-side {
    width: 49%;
}

.featured-article .article {
    width: 100%;
    position: relative;
}

.featured-article .newsright {
    position: absolute;
    bottom: 0;
    background: rgba(22, 48,58, .8);
    color: white;
    text-align: left;
    padding: 0px 31px 20px;
}

.featured-article .newsthumb {
    height: 570px;
}

.featured-article .newsright h3 {
    color: white;
    text-transform: uppercase;
}

.featured-article  a {
    color: white;
}

.featured-article .newsright p {
    color: white;
}

.featured-article a:nth-child(5) {color: #3BAE49;font-weight: bold;text-transform: uppercase;font-family: 'fenomen-sans';}

.article-side .article {
    width: 100%;
    flex-direction: row;
    border-bottom: 1px solid #D1D1D1;
    padding-bottom: 13px;
}

.article-side .newsright {
    font-size: 13px;
    text-align: left;
    width: auto;
}

.article-side .newsthumb {
    height: 171px;
    width: 170px;
    flex-shrink: 0;
}

.article-side h3 {
    font-size: 19px;
    text-transform: uppercase;
}

.article-side .article:last-of-type {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.article-side a:nth-child(5) {
    color: #3BAE49;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'fenomen-sans';
}

.contact-top {
    display: flex;
    font-family: 'fenomen-sans';
}

.contact-wrap {
    width: 78%;
    margin: 100px auto;
}

.contact-top h2 {
    font-family: 'fenomen-slab';
    color: black;
    font-size: 59px;
    line-height: 1.1;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.contact-sec:nth-child(1) {
    background: rgb(135 165 160 / 24%);
}

.contact-top p {
    margin-bottom: 20px;
}

.contact-info {
    color: #3BAE49;
    font-weight: bold;
}

.contact-info a {
    color: #3BAE49;
}

.chriskent {
    display: flex;
    justify-content: space-around;
    width: 900px;
    max-width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 140px;
}

.team-member {
    width: 200px;
    height: 200px;
    margin-top: 0;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
}

.member-info {
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(22 48 58 / 80%);
    color: white;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-100%);
    transition: transform .4s ease-out, opacity .4s ease;
    border-radius: 50%;
    opacity: 0;
}

.team-member:hover .member-info {
    transform: translateX(0%);
    opacity: 1;
}

.team-member p {
    font-family: 'fenomen-sans';
    line-height: 1.4;
}

.member-info strong {
    text-transform: uppercase;
    font-size: 17px;
}

.team-member span {
    font-size: 14px;
}



.shine {
    background: url(/wp-content/themes/johnsonandsekin/assets/images/stamp.png) #E2E9E8;
    background-repeat: no-repeat;
    background-position: right -2% center;
    background-size: auto 90%;
    padding: 120px 0;
    color: black;
}

.shine-wrap {
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    font-family: 'fenomen-sans';
    padding-right: 25%;
}

.shine h2 {
    /* font-weight: bold; */
    color: #16303A;
    font-size: 40px;
    font-family: 'fenomen-sans';
    text-transform: none;
    letter-spacing: 0;
    font-weight: bold;
    /* max-width: 1200px; */
    /* width: 90%; */
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    margin-top: 60px;
    text-align: left;
    margin-bottom: 20px;
}

.shine ul {
    column-count: 2;
    list-style-position: inside;
    font-weight: bold;
    color: #2F2F2F;
    line-height: 1.7;
}

.shine p {
    line-height: 1.7;
}

.managers {
    display: flex;
    justify-content: space-between;
    width: 1100px;
    max-width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 140px;
    background: none;
    flex-wrap: wrap;
}

.managers .team-member {
    margin-bottom: 20px;
}

.news-head {
    display: flex;
    min-height: 700px;
}

.news-head-l {
    width: 50%;
    background: #E2E9E8;
    justify-content: center;
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    padding: 100px 5%;
    color: #16303A;
}

.news-head-r {
    width: 50%;
    background-size: cover;
    background-position: center;
}

.news-head-l .date {
    border: none;
    font-family: 'fenomen-sans';
    color: inherit;
    font-weight: bold;
}

.news-head h1 {
    color: inherit;
    font-family: 'fenomen-slab';
    line-height: 1;
    font-size: 70px;
}

.article-main {
    font-family: 'fenomen-sans';
    width: 100%;
}

.article-main h2 {
    color: #16303A;
    font-weight: bold;
    font-size: 35px;
    line-height: 1;
}

.single-post .wrap p {
    font-size: 20px;
    font-family: 'fenomen-sans';
}

.a-wrap {
    display: flex;
    margin-top: 60px;
}

.shares {
    width: 300px;
    flex-shrink: 0;
    padding-left: 50px;
    max-width: 30%;
    font-family: 'fenomen-sans';
    text-transform: uppercase;
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 25px;
}

.shares a {
    width: 33px;
    height: 33px;
    margin-top: 30px;
    
}

.shares img {
    display: block !important;
}

.related {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

.related .blog-title {
    color: #16303A;
}

section.intro {
    height: calc(100vh - 54px);
    display: flex;
    position: relative;
    background: #182d36;
    margin-bottom:60px;
}

img.main-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 7.1vw;
    transition: opacity .5s ease, transform .5s cubic-bezier(0, 0, 0.38, 1.04);
    opacity: 0;
    transition-delay: .7s;
}

.intro-left {
    width: 50%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding-right: 6vw;
    align-items: center;
    overflow: hidden;
}

.intro-right {
    width: 50%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    padding-left: 6vw;
    align-items: center;
    overflow: hidden;
}

.left-bg, .right-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity .7s ease, transform .7s cubic-bezier(0, 0, 0.2, 1.05);
    opacity: 0;
    background-size: cover;
    background-position: center;
}

.intro span {
    font-family: 'fenomen-slab';
    color: white;
    position: relative;
    text-transform: uppercase;
    font-size: 6vw;
    transition: opacity .5s ease, transform .5s cubic-bezier(0, 0, 0.2, 1.05);
    opacity: 0;
}

.left-bg {
    transform: translateX(50%);
}

.right-bg {
    transform: translateX(-50%);
}

.animate .right-bg {
    transform: translateX(0);
    opacity: 1;
}

.animate .left-bg {
    opacity: 1;
    transform: translateX(0);
}

.animate img.main-icon {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.intro-left span {
    transform: translateY(50%);
    transition-delay: 1.1s;
}

.intro-right span {
    transform: translateY(-50%);
    transition-delay: 1s;
}

.animate span {
    transform: translateY(0);
    opacity: 1;
}

@keyframes mouse {
    0%, 50% {bottom: 5%;}
    25% {bottom: 3%;}
}

.mouse {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 1.4vw;
    animation: mouse 2s cubic-bezier(0.44, 0.06, 0.24, 0.58) infinite both;
    opacity:0;
    transition: opacity .5s 1.5s;
}

.animate .mouse {
    opacity:1;
}

.fadeup, .stickyshow {transform:translateY(40px); opacity:0; transition: opacity .8s ease, transform .8s ease;}
.fadeup-margin {margin-top:40px; opacity:0; transition: opacity .8s ease, margin-top .8s ease;}
.fadeup.animate, .stickyshow.animate {transform:translateY(0px); opacity:1;}
.fadeup-margin.animate {margin-top:0; opacity:1;}

.grecaptcha-badge {display:none;}


.a-wrap .article-main {
    max-height: 500px;
    overflow: hidden;
    position: relative;
}

.a-wrap .article-main.open {
    max-height:none;
}

.readmore {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    display: flex;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 54%);
    justify-content: center;
    align-items: center;
    padding-top: 80px;
    color: gray;
    font-weight: bold;
    cursor: pointer;
}

.open .readmore {
    display:none;
}

/* Footer */

.site-footer {
    background: #3BAE49;
    font-family: 'fenomen-sans';
    color: white;
    font-size: 15px;
    height: auto;
    padding: 0 0 40px;
}

.site-footer .wrap {
    max-width: 90%;
    width: 1300px;
    display: flex;
    justify-content: space-between;
    padding-top: 80px;
    overflow: hidden;
}

.site-footer strong {
    text-transform: uppercase;
}

#foot-menu {
    display: flex;
    list-style: none;
}

.foot-menu li {
    margin-right: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

#foot-menu a {
    color: inherit;
}

.foot-menu {
    display: flex;
    flex-direction: column;
}

.follow {
    display: flex;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.follow>* {
    margin-right: 30px;
}

.search-icon {
    margin: 0 25px;
}

.bx-wrapper {background:none;}

.home .bx-wrapper {
    margin: 0 auto;
    padding-top: 0;
    margin-top: 40px;
}

.bx-wrapper .bx-prev {
    left: -40px !important;
    top: 50% !important;
    transform: translateY(-50%);
    background: url(/wp-content/themes/johnsonandsekin/assets/images/arrow-left.png) no-repeat !important;
    height: 4vw !important;
    background-size: contain !important;
}

.bx-wrapper .bx-next {
    right: -40px !important;
    top: 50% !important;
    transform: translateY(-50%);
    background: url(/wp-content/themes/johnsonandsekin/assets/images/arrow-right.png) no-repeat !important;
    height: 4vw !important;
    background-size: contain !important;
}

.home-work .workbox img.home-wb-logo {
    transform: none !important;
    width: 70%;
}

.page-template-work .workbox img.home-wb-logo {
    transform: none !important;
    width: 50%;
}

.workbox-in {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(22 48 58 / 80%);
}

.work-link {
    font-family: 'fenomen-sans';
    text-transform: uppercase;
    display: inline-block;
    margin-top: 80px;
    margin-bottom: 60px;
    border: 3px solid #3bae49;
    font-size: 20px;
    padding: 5px 40px;
}

.page-template-about .nav-about:after,
.page-template-work .nav-work:after,
.page-template-culture .nav-culture:after,
.page-template-community .nav-community:after,
.page-template-news .nav-news:after,
.page-template-about .nav-about:after,
.page-template-contact .nav-contact:after
{
    width:100% !important;
    background:#3bae49 !important;
}

.headline2 .headline {
    margin-top: 40px;
}

.page-template-work .page-title {
    margin-bottom: 70px;
}

.work_wrap {
    background: #17303a;
}

.c-description {
    max-width: 1200px;
    width: 90%;
    margin: 100px auto;
    border-bottom: 1px solid #D1D1D1;
}

.back-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'fenomen-sans';
    text-transform: uppercase;
    color: #16303A;
    font-weight: 500;
    font-size: 22px;
    margin: 100px 0;
}

.back-top img {
    width: auto;
    margin-bottom: 10px;
}

@media (max-width:980px){

    .page-template-news .site-content .wrap, .page-template-community .site-content .wrap {
        grid-template-columns: repeat(auto-fill, 100%);
    }
    .headline h1, .headline h2 {
        font-size: 35px;
    }

    .double-callout {
        flex-direction: column;
    }

    .dc-left {
        width: 100%;
        height: 400px;
    }

    .dc-right {
        width: 100%;
        padding: 40px 0;
        max-height: none;
        height: auto;
    }

    .dc-left h2 {
        font-size: 40px;
        margin: 0;
    }

    .page-title {
        line-height: 1;
        font-size: 30px;
    }

    .home-articles {
        flex-direction: column;
    }

    .featured-article {
        width: 100%;
    }

    .article-side {
        width: 100%;
    }

    .article-side .newsthumb {
        width: 100%;
        height: 59vw;
    }

    .site-footer {
        /* flex-direction: column; */
    }

    .site-footer .wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .site-footer>div>* {
        margin-bottom: 40px;
    }

    #foot-menu {
        flex-direction: column;
    }

    .foot-menu li {
        margin-bottom: 10px;
        margin-right: 0;
    }

    .follow span {
        display: none;
    }

    .follow>*:last-of-type {
        margin-right: 0;
    }
    .chriskent {
        flex-direction: column;
        align-items: center;
    }

    .team-member {
        margin-bottom: 40px;
    }

    .shine-wrap {
        padding-right: 0;
        width: 80%;
    }

    .shine h2 {
        font-size: 30px;
    }

    .shine {
        padding: 50px 0;
    }

    .shine ul {
        column-count: 1;
    }

    .managers {
        justify-content: center;
        margin-bottom: 0;
    }

    .wrap .article {
        width: 100%;
    }

    .news-head {
        flex-direction: column;
    }

    .news-head-l {
        width: 100%;
        padding: 30px;
    }

    .news-head-r {
        width: 100%;
        height: 500px;
    }

    .news-head h1 {
        font-size: 30px;
        /* text-transform: none; */
    }

    .a-wrap {
        flex-direction: column;
        align-items: center;
    }

    .shares {
        padding-left: 0;
        margin-top: 50px;
    }

    .related {
        flex-direction: column;
    }

    .related .article {
        width: 100%;
    }

    .contact-top {
        flex-direction: column;
    }

    .contact-top h2 {
        font-size: 30px;
    }

    .mobile-nav {
        background-color: #3bae49;
    }

    .m-logo {
        width: 60px;
        margin-left: 10px;
    }

    .home .bx-wrapper {
        max-width: 80% !important;  
    }

    .home .bx-wrapper .bx-next, .home .bx-wrapper .bx-prev {
        height: 7vw !important;
        background-size: contain !important;
    }

    .menu img {
        margin-bottom: 20px;
    }

    .mobile-nav-open .menu {
        justify-content: center;
        align-items: center;
        list-style: none;
    }

    .mobile-nav .menu {
        background: #16303A;
    }

    .mobile-nav .menu > li {
        font-family: 'fenomen-sans';
        font-size: 1.8rem;
    }
}