@charset "UTF-8";

/*-----------------------------------------------------*/

@import "animate.css";
@import "core.css";
@import "grid.css";
@import "fonts.css";
@import "forms.css";

:root { --content-width: 90rem; --padding: 60px; --lightgray: #e3e3e3; --padding: 60px; --gutters: 20px; --yellow: #FAD802;} body { font: 13px/1.4em 'DIN'; font-style: normal; color: #fff; text-align: left; width: 100vw; min-height: 100vh; max-width: 100%; max-width: 100vw; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: rgba(0,0,0,0); background: url( ) left top no-repeat  #1e1e25; background-size: 80%; -webkit-transition: background-color 1s !important; -moz-transition: background-color 1s !important; -ms-transition: background-color 1s !important; -otransition: background-color 1s !important; -transition: background-color 1s !important; letter-spacing: -0.04em; background-repeat: no-repeat; background-position: center center; background-size: cover !important; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover !important;} .centered img { margin-right: auto; margin-left: auto;} p a { opacity: 0.7;} p a:hover { opacity: 1; text-decoration: underline;} body.no-scroll, .noscroll { overflow-y: none; position: absolute; overflow: hidden;} .noscroll { overflow-y: none} b, strong { font-variant: normal; font-weight: lighter !important; font-family: "DIN Medium";} em, i { font-variant: normal!important; font-style: normal!important;} em b, em strong, strong em, b i { font-family: "DIN Medium"; font-weight: lighter !important; font-style: normal!important;} hr { display: none;} p:first-child { margin-top: 0;} h1, h2, h3, h4, h5, h6 { padding: 0; display: block; clear: both; line-height: 1.2; font-weight: 100; font-family: "Din";} h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; padding: 0;} h1 { font-size: 2.1em; margin-bottom: .3em;} h2 { font-size: 1.5em; margin-bottom: .5em;} h3 { font-size: 1.3em; margin-bottom: .75em;} h4 { font-size: 1.1em; margin-bottom: 1em; line-height: 1.4em;} h5 { font-size: 1em; margin-bottom: 1.4em;} h6 { font-size: 1em; margin-bottom: 1.4em;} p { text-align: left; line-height: 1.5em; margin-bottom: 30px;} p:last-child { margin-bottom: 0;} p.lede { font-size: 1.2em;} p.indent { text-indent: 2em;} p.traditional { margin-top: 0; margin-bottom: 0;} p .left { margin: 20px 20px 20px 0; padding: 0;} p .right { margin: 20px 0 20px 20px; padding: 0;} blockquote { margin-bottom: 20px; margin-top: 20px; font-size: 1.2em;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;} a { color: currentColor; text-decoration: none;} small { font-size: .7em; line-height: 1em;} .directionlink { font-size: .8em; margin-top: -20px; position: relative; display: block; opacity: .5;} .contact-info .icon { width: 40px; height: 40px; position: relative; display: inline-block;} .contact-info { } .contact-info a { color: #000;} .contact-info .icon img { padding: 5px;} #loader-screen { position: fixed; z-index: 999999999999; display: block; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; transition-property: transform;} .fullscreen { width: 100vw; height: 100vh; object-fit: cover;} .fullscreen svg { object-fit: cover;} #loader-screen.outro.reveal { top: 0;} .load-panel-1 { position: absolute; z-index: 99999; display: block; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; background-repeat: no-repeat; background-position: center top; background-size: cover !important; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover !important; background: url(../images/blur-overlay.svg) center center no-repeat transparent; -webkit-transition: all 1s cubic-bezier(0.550, 0.085, 0.680, 0.530); -moz-transition: all 1s cubic-bezier(0.550, 0.085, 0.680, 0.530); -o-transition: all 1s cubic-bezier(0.550, 0.085, 0.680, 0.530); transition: all 1s cubic-bezier(0.550, 0.085, 0.680, 0.530);  c-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530); -moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530); -o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530); transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530); cfloat: left; transition-property: transform; -webkit-animation-delay: 1s; animation-delay: 1s;} .load-panel-1.reveal { transform: translateY(-200%); pointer-events: none;} #loader-screen.hidden { height: 0; pointer-events: none;} .project-panel { width: 100vw; height: 100vh; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover !important; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover !important; color: #ffffff;} .project-panel .content { position: relative; top: 100%; transform: translateY(-100%);} .page-title, h1.page-title, .project-panel h3 { color: #ffffff; font-size: 6vw; line-height: 1em; text-transform: uppercase; font-family: "DIN"; letter-spacing: 0.05em; margin: 0; padding: 0; position: relative;} .date, .client, .client-name { font-size: 3vw; opacity: 0.8; width: 100%; text-transform: uppercase; text-align: center; display: inline-block; letter-spacing: 0.04em; margin-top: 15px;} .note-text h1, .note-text h2, .note-text h3, .note-text h4, .note-text caption, .note-text p { max-width: 35rem; margin-right: auto; margin-left: auto;} .note-text p { opacity: 0.8;} .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-gap: 1.5rem; margin-bottom: 1.5rem; padding: 3rem 0;} .gallery figure a { border: 0;} .gallery figure { margin: 0; padding: 0;} @media screen and (min-width: 40rem) { .gallery { margin-left: -3rem; margin-right: -3rem;}}




.inner { padding: var(--padding);} .page-ontop { z-index: 99999999999;} .home-tpl #mast { z-index: 999999999;} .page { /*  padding: 5vh 5vw 10vh;*/} .page > * { /*  max-width: var(--content-width); */cmargin: 0 auto;} #identity { width: 90px; margin: 0; padding: 0; margin-left: auto;} #identity  a { display: block;} #identity svg { max-height: 100px;} .note { background-color: #1d1d25;} header .date { opacity: 0.5;} #mast { padding: var(--padding);} #nav-panel { display: block; margin: 0; padding: 0; top: 0; opacity: 1; background: rgba(30, 30, 37, 0.88); left: 0; width: 100vw; height: 100vh; overflow: hidden; -webkit-transition: 0s ease-in-out; -moz-transition: 0s ease-in-out; -o-transition: 0s ease-in-out; transition: 0s ease-in-out; transition-property: transform; -webkit-transform: translateX(0%) translateY(-100%); -moz-transform: translateX(0%) translateY(-100%); -ms-transform: translateX(0%) translateY(-100%); -o-transform: translateX(0%) translateY(-100%); transform: translateX(0%) translateY(-100%); z-index: 999999; position: fixed;} #nav-panel { transition-property: transform; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out; -o-transition: .7s ease-in-out; transition: .7s ease-in-out;} #nav-panel.active { z-index: 999999; -webkit-transform: translateX(0%) translateY(0%); -moz-transform: translateX(0%) translateY(0%); -ms-transform: translateX(0%) translateY(0%); -o-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%);} #nav-panel.hidden { -webkit-transform: translateX(0%) translateY(-100%); -moz-transform: translateX(0%) translateY(-100%); -ms-transform: translateX(0%) translateY(-100%); -o-transform: translateX(0%) translateY(-100%); transform: translateX(0%) translateY(-100%);} .menu, .menu ul { margin: 0; padding: 0;} #nav-panel { } #nav-panel.active .inner { padding-top: 150px;} #nav-panel .menu li { position: relative; display: block; text-align: left; font-size: 3em; text-transform: uppercase; line-height: 1em;} #nav-panel .menu li a { color: #fff; text-align: left; line-height: 1em; letter-spacing: -0.01em; font-weight: 500; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; -webkit-animation-delay: 0s; animation-delay: 0s;} #nav-panel .menu li a:hover { opacity: 1; -webkit-animation-delay: 0s; animation-delay: 0s; color: var(--yellow);} #nav-panel.menu a:hover, #nav-panel .is-active a, #nav-panel .menu a.active { opacity: 1; color: var(--yellow) !important; z-index: 1;} #menu-toggle { width: 60px; height: 60px; left: 60px; top: 60px; position: fixed; text-align: left; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; margin: 0; z-index: 99999999;} #menu-toggle span { display: block; position: absolute; height: 4px; width: 60px; background: #fff; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg);} #menu-toggle span:nth-child(1) { top: 30px;} #menu-toggle span:nth-child(2) { top: 30px; float: right; position: relative; -webkit-transform: rotate(90deg); transform: rotate(90deg);} #menu-toggle.active span { opacity: 1; background-color: #ffffff;} #menu-toggle.active { -webkit-transform: rotate(45deg); transform: rotate(45deg);} #mast { position: fixed; top: 0; left: 0; z-index: 99999; width: 100vw; color: #ffffff;} main { margin-top: 0; margin-right: 0; margin-left: 0; padding: 0; position: relative; top: 0; left: 0; min-height: calc(100vh);} hr { display: block; height: 1px; width: 10%; padding: 0; border: none; background-color: #ffffff;} p { /*	text-align: center;*/cline-height: 1.2em; font-size: 1.2em;} .about-tpl { color: rgba(0, 0, 0, 0.8); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-color: #bedee8;} .careers-tpl { background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;} .about-text p { text-align: center;} .about-text .text { display: flex; align-items: center; justify-content: center; text-align: left;} cov.about-tpl section h2:first-child { margin-top: 0;} .shaded { opacity: 0.8;} .menu a[aria-current] { border-bottom: 2px solid #000;}
 
 .about-tpl section { margin-bottom: 60px;} .about-tpl section ul { display: grid; list-style: none; justify-items: center; justify-content: space-evenly; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; margin: 0; padding: 0;} .video-container { } .project-tpl .project-header { } .page-title { text-align: center; font-size: 1em; letter-spacing: 0.04em;} .project-tpl .client { text-transform: uppercase; opacity: 0.5; letter-spacing: 0.03em;} .project-tpl .overview { max-width: 960px; margin-right: auto; margin-left: auto;} .hero { width: 100vw; height: 80vh; overflow: hidden; background-repeat: no-repeat; background-position: center top; background-size: cover !important; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover !important; background-size: 100%; color: #ffffff;} .hero img { width: 100%;} .gridded { display: grid; list-style: none; grid-template-columns: 1; grid-column-gap: 20px; margin: 0px; padding: 0;} .gridded figure { margin: 0 0 20px;} .article-feed header img { width: 100vw; height: 50vw; min-height: 50vh; max-height: 50vh;} .careers-tpl { background-color: ; color: rgba(0, 0, 0, 0.62);} .careers .careers-list li { margin-bottom: 20px!important;} p a { color: var(--yellow); opacity: 1;} .feed-article  figure img { padding-bottom: 30px;} .careers .careers-list a { color: rgba(0, 0, 0, 0.7); opacity: .8; border-bottom: 2px solid  rgba(0, 0, 0, 0.6); line-height: 1.2em;} .careers .careers-list a:hover { color: #fff; opacity: 1; border-bottom: 2px solid  rgba(0, 0, 0, 0.4);} .career-grid-item h2 { font-size: 1.4em; line-height: 1em; text-transform: none; font-variant: normal; text-decoration: none; font-weight: normal; font-style: normal;} @media screen and (min-width: 50rem) { #mast { flex-direction: row; justify-content: space-between;} #nav-panel .menu li { position: relative; display: block; text-align: left; font-size: 6vw; text-transform: uppercase;} .gridded { display: grid; list-style: none; justify-items: center; justify-content: space-evenly; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-column-gap: 20px; margin: 0 0 20px; padding: 0;} body { font: 18px/1.4em 'DIN';} .career-grid-item h2 { font-size: 1.2em;} .article hero { width: 100vw; height: 50vw; min-height: 50vh; max-height: 50vh; background-position: cover; margin-bottom: 100px;} .page-title, h1.page-title, .project-panel h3 { color: #ffffff; font-size: 4vw; line-height: 1em; text-transform: uppercase; font-family: "DIN"; letter-spacing: 0.05em; margin: 0; padding: 0; position: relative;} .date, .client, .client-name { font-size: 1.1em; opacity: 0.8; text-transform: uppercase; margin-top: 15px; text-align: center; letter-spacing: 0.04em;}}
 
.intro { text-align: center; margin-top: 200px;} #sitefooter { opacity: 0.5; margin-top: 40px; text-align: right; font-size: .8em; clear: both!important;} .project-tpl figure, .project-tpl figure img { width: 100%;} span.caption { position: relative; display: block; padding: 20px; margin-bottom: 30px;} span.caption, figcaption { padding: 20px; opacity: 0.3; text-transform: uppercase; letter-spacing: 0.03em;} .project-title { position: relative; display: block; margin-top: 0px; cursor: pointer; webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; transition: all .9s ease; letter-spacing: 0.03em; color: #fff; text-align: center; width: 100%; height: 80vh;} .project-tpl .playbutton { position: relative; display: block; cursor: pointer; webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; transition: all .9s ease; color: #fff; width: 100%; height: 80px; background-size: .8em; background: url(../images/play-btn.svg) center center no-repeat; margin-bottom: 40px;} .playbutton.hidden { opacity: 0;}
 .overlay-panel { background: rgba(24, 24, 24, 0.93); color: #FFF; position: fixed; top: -250px; left: 0; width: 100%; min-height: 250px; height: 250px; padding: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; overflow: hidden; box-sizing: border-box; z-index: 999999999999; opacity: 0;} .overlay-panel.enabled { top: 0; min-height: 100vh; overflow: visible; opacity: 1;} .overlay-close { width: 80px; height: 80px; position: absolute; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; margin: 0; top: 40px; z-index: 88889; display: block; float: left; cursor: pointer; transform: scale(.6); right: 40px;} .overlay-close span { display: block; position: absolute; height: 4px; width: 100%; background: #fff; opacity: 1; left: 0; top: 45px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .4s ease-in-out; -moz-transition: .4s ease-in-out; -o-transition: .4s ease-in-out; transition: .4s ease-in-out;} .overlay-close span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);} .overlay-close span:nth-child(2) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);} .overlay-panel .inner { padding: 40px;} iframe { border: none; margin: 0; padding: 0; position: relative; display: block;} .video { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%;} .video.wide { position: relative; padding-bottom: 41.98%!important; height: 0; max-width: 100%;} .video  figcaption { padding-top: 58.25%;!cimportant; pointer-events: none;} .video.wide figcaption { padding-top: 43%!important;} .video iframe { width: 100%; height: 100%; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .pagination { margin: 0; padding: 0; position: relative; display: block; float: none; clear: both;} .pagination-item { width: calc(50%  ); float: left; margin: 0; padding: 60px; font-size: 3em;} @-moz-document url-prefix() { body{cfont-weight: lighter !important;}
 } .about .ico { width: 25px; text-align: center; position: relative; display: inline-block; margin: 0 5px 5px;} .about .ico img { max-width: 100%;} .career-grid-item h2 { margin: 0;} .toggle { cursor: pointer;} .toggle-content { height: 0; overflow: hidden;} .active  .toggle-content { height: auto;}
 
 .careers .careers-list { margin: 0; padding: 0;} .careers .careers-list li { margin: 0 0 10px; padding: 0; list-style: none;} a.button { color: #ffffff; margin: 0 0 40px; padding: 15px 20px; position: relative; display: inline-block; background-color: #858585; font-weight: bold; border-radius: 2px;} a.button:hover { background-color: var(--yellow);} .phone { font-family: 'DIN BOLD';} .small { font-size: .8em;} .permaphone { position: fixed; bottom: 0; left: 0; display: block; float: left; z-index: 100; margin: 0; padding: 60px; font: 1.4em 'DIN BOLD'; letter-spacing: 0.02em;} .careers-tpl .col { margin-bottom: 30px;} .careers-tpl .content p { font-size: 1.5em; line-height: 1.4em;} 

.pagelayer { width: 100vw; max-width: 100vw!important; min-height: 100vh; position: fixed; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transform: translateZ(0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; opacity: 0; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; paddiing-bottom: 100px!important; background-color: rgba(29, 29, 37, 0.90);} #pagelayer.active, .pagelayer.active { visibility: visible; overflow: visible; z-index: 9999999999; height: auto !important; opacity: 1; overflow-y: scroll!important;} .pagemoveToLeft { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-animation: moveToLeft .4s ease both; animation: moveToLeft .4s ease both;} .pagemoveFromLeft { -webkit-animation: moveFromLeft .4s ease both; animation: moveFromLeft .4s ease both;} .pagemoveToRight { -webkit-animation: moveToRight .4s ease both; animation: moveToRight .4s ease both;} .pagemoveFromRight { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-animation: moveFromRight .4s ease both; animation: moveFromRight .4s ease both;} .pagemoveInFromBottom { -webkit-animation: moveFromBottom .4s ease both; animation: moveFromBottom .4s ease both;} .pageimmediateupdate { opacity: 1; -webkit-animation: moveToLeft 0s ease both; animation: moveToLeft 0s ease both;}
 
 /* @end *!/*/ .pagination { width: 100%; position: relative; display: block; height: auto; clear: both;} .pagination span { opacity: 0.3; font-size: .8em; line-height: .8em; margin: 0; padding: 0; position: relative; display: block;} .pagination-item { display: block; width: 50%; padding-bottom: 40px; padding-top: 40px; color: #ffffff;} .pagination-item.previous-content { float: left;} .pagination-item.next-content { float: right; text-align: right;} .pageinner { min-height: 100vh; display: block; margin: 0; padding: 0; background-color: #dddfdf;} .pagemoveToLeft { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-animation: moveToLeft .8s ease both; animation: moveToLeft .8s ease both;} .pagemoveFromLeft { -webkit-animation: moveFromLeft .8s ease both; animation: moveFromLeft .8s ease both;} .pagemoveToRight { -webkit-animation: moveToRight 1s ease both; animation: moveToRight .8s ease both;} .pagemoveFromRight { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-animation: moveFromRight .8s ease both; animation: moveFromRight .8s ease both;} @media (any-hover: none) { a { will-change: auto;}}

 .is-inactive { opacity: 0.1; cursor: default;} .error-page { color: #ffffff; background-color: #ea0909;}
 @keyframes pullup { 0% { } 100% { margin-top: 0;}}
 
 @keyframes fadeIn { 0% { opacity: 0;} 66% { opacity: 0;} 100% { opacity: 1;}}
 @-webkit-keyframes fadein { 0% { opacity: 0;} 66% { opacity: 0;} 100% { opacity: 1;}}
 @keyframes rgb { 0% { background-color: #e1e3e1;} 50% { background-color: #e1e1e1;} 100% { background-color: #e4fbfb;}}
 @-webkit-keyframes moveToLeft { from { -webkit-transform: translateX(100%); transform: translateX(100%);} to { -webkit-transform: translateX(0%); transform: translateX(0%);}}
 @keyframes moveToLeft { from { -webkit-transform: translateX(100%); transform: translateX(100%);} to { -webkit-transform: translateX(0%); transform: translateX(0%);}}
 @-webkit-keyframes moveFromLeft { from { -webkit-transform: translateX(-100%); transform: translateX(200%);} to { -webkit-transform: translateX(100%); transform: translateX(100%);}}
 @keyframes moveFromLeft { from { -webkit-transform: translateX(-100%); transform: translateX(-100%);} to { -webkit-transform: translateX(100%); transform: translateX(100%);}}
 @-webkit-keyframes moveToRight { from { } to { -webkit-transform: translateX(100%); transform: translateX(100%);}}
 @keyframes moveToRight { from { } to { -webkit-transform: translateX(100%); transform: translateX(100%);}}
 @-webkit-keyframes moveFromRight { from { -webkit-transform: translateX(100%); transform: translateX(100%);} to { -webkit-transform: translateX(0%); transform: translateX(0%);}}
 @keyframes moveFromRight { from { -webkit-transform: translateX(100%); transform: translateX(100%);} to { -webkit-transform: translateX(-100%); transform: translateX(-100%);}}
 
 
 .feed-article header.inner { padding-top: 120px!important; padding-bottom: 0;} .feed-article header img { width: auto; margin-bottom: 40px; border: 20px solid rgba(0, 0, 0, 0.29);} .feed-article header .page-title { font-size: 1.4em;}
 
 
 
 .overlay-panel iframe {
 	max-height: 80vh;
 }
 .col-md-6{
 	margin-bottom: 40px;
 }