/* * Fonts * */
@font-face {
    font-family: 'avertaregular';
    src: url('../fonts/averta-regular-webfont.eot');
    src: url('../fonts/averta-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/averta-regular-webfont.woff2') format('woff2'),
         url('../fonts/averta-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


/* * Body * */

body {
	margin:0;
	padding:0;
    font-size:16px;
    line-height:1.4;
    font-family: 'avertaregular', sans-serif;
    -webkit-text-size-adjust: none;
    background-color: #ffffff;
    text-align: center;
    color:#000000;
    -webkit-transition: color 200ms ease;
    transition: color 200ms ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img {border-style: none;}

*, *:before, *:after {
    box-sizing: inherit;
}



img {
    will-change: transform;
  transform: translateZ(0);
}

::selection {color:#fff;background:#000000;}
::-moz-selection {color:#fff;background:#000000;}


.reset {font-weight: normal;font-size:18px;line-height: 1.4;}
.small {font-weight: normal;font-size:14px;line-height: 1.2;}


.small-print {opacity: 0.4;}
.small-print a {border-bottom: 1px solid transparent;}
.small-print a:hover {border-bottom: 1px solid;opacity: 1!important;}

#footer .small-print {margin-top:2em;}


#header-m .small-print {
    opacity: 0.3;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: left bottom;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: left bottom;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: left bottom;
    -o-transform: rotate(-90deg);
    -o-transform-origin: left bottom;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    z-index: 999;
    position: fixed;
    bottom: 0;
    left: 100%;
    white-space: nowrap;
    margin-top: 0;
    padding: 0 0 0.5em 1em;
    -webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}
#header-m .small-print:hover {
    opacity: 0.6;
}

.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; 
}

.left {float:left;}
.right {float:right;}



::-webkit-scrollbar, ::-moz-scrollbar {
display: none;
}






a { color:#000000;
    text-decoration: none;
    border-bottom: 0px solid #f4f4f4;
    -webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

a:hover {
    color:#000000;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 0px solid transparent;
    -webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

a.block { color:inherit;
    text-decoration: none;
    border-bottom: 0px solid #f4f4f4;
    -webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

a.block:hover {
    color:inherit;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 0px solid transparent;
    -webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

a.apply {border-bottom: 1px solid;}
a.apply:hover {border-bottom: 1px solid transparent;}

.hero-text {position: absolute;top:2.5vw;bottom: 2.5vw;left: 0;right: 0;z-index: 222;pointer-events: none; opacity: 0;/* mix-blend-mode: difference; */
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}
.hero-text .t {width: 100%;text-align: left;}
.hero-text .t .tc {padding: 0 2.5vw;vertical-align: bottom;}
.hero-text .t .tc span {display: block;}
.hero-text.current {opacity: 1;}

#showreel {position: relative;z-index: 100;height: 100vh;}
body.opener #hero-video {left:0;right:0;top:0;bottom: 0;}
#hero-video {position: absolute;z-index: 0;background: #000;left: 0;right: 0;bottom: 0;top: 0;height: 100vh;}
.hero-video-single {position: absolute;top:0;bottom: 0;left: 0;right: 0;z-index: 1;opacity: 0;
}
.hero-video-single.current {opacity: 0.9;}
.hero-video-single  video, .hero-video-single img {object-fit: cover;height: 100%;width: 100%;}
/*
.hero-video-single  video, .hero-video-single img {
    height: auto;
    width: auto;
    max-width: 85%;
    max-height: 85%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0px!important;
    padding: 0px!important;
}
*/



.hero-sticky-txt {z-index: 666;}

.msg {position: fixed;top:0;bottom: 0;left: 0;right: 0;z-index: 6666;pointer-events: none;height: 100vh;background: rgba(0,0,0,0.05);-webkit-backdrop-filter: blur(50px);backdrop-filter: blur(50px);}
#s-saver {opacity: 0;display: block;
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}



#main {position: relative;z-index: 333;}
#main.home {background: #fff;margin-bottom: 50vh;}

#header a, #header-m a {}
#header a:hover, #header-m a:hover {opacity: 1;}



#nav a.pages {}
#nav a.pages:hover {opacity: 1;}

body.white #header, body.white #header a, body.white #flexi-content #nav a.pages, body.white #flexi-content .post-title, body.white #flexi-content .post-intro {color: #fff;}

body.main-inactive #header, body.main-inactive #header a {color: #000000!important;}

#single.projects a {color:#000000;}
#single.projects a:hover {color:#000000;}

#capabilities a {color:#000000;}
#capabilities a:hover {color:#b0b0b0;cursor: pointer;}

#capabilities-thumbs {position: absolute;top:0;left:0;width:50%;height:100vh;}
#capabilities-thumbs img, #capabilities-thumbs video {
    width: auto;
    max-width: 75%;
    max-height: 75%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0px!important;
    padding: 0px!important;
    z-index: 10;
    }

#capabilities a.current, h1.current {z-index: 1000;position: relative;display:block;}  

#ankok-projects {border-top:1px solid #000;}
#ankok-projects .intro {padding-top:10vw;}
#ankok-projects .intro .title {text-align: center;margin-bottom: 1em;}
#ankok-projects a {color:#000000;}
#ankok-projects a:hover {color:#000000;cursor: pointer;}

#single.studio #profile.default-width {padding: 0 10vw 10vw;}

#profile-body .title {padding-top:10vw;}

.template-studio-page .title {text-align: center;margin-bottom: 2em;}

#newsletter a {color:#000000;}
#newsletter a:hover {color:#b0b0b0;cursor: pointer;}

a.view-more {color:#ffceb6;text-decoration: none;position: absolute;right:2.5vw;}
a.view-more:hover {color:#000;}

#filters-parent .all {display: none;opacity: 0;pointer-events: none;}
#filters-parent.active-filters .all {display: inline-block;opacity: 1;pointer-events: all;background: rgba(0,0,0,.03);}
#filters-parent.active-filters .all:hover {display: inline-block;opacity: 1;pointer-events: all;background: rgba(0,0,0,.05);}

/* Filters */
#filters-parent {margin: 0 1vw 2.5vw;}
#filters li.no-link {display: inline-block;}
#filters li.no-link .symbol-o {display: inline-block;transform: translateY(0px);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#filters li.no-link .symbol:before {content:"";height:2px;background: #000;width: 100%;position: absolute;top:50%;}
#filters li.no-link .symbol:after {content:"";height:2px;background: #000;width: 100%;position: absolute;top:50%;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
#filters li.no-link .symbol {content:"";display: inline-block;width:0.8em;height:0.8em;margin-right:5px;position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#filters-parent.active-filters #filters li.no-link .symbol {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}
#filters-parent.active-filters #filters li.no-link .symbol-o {
    transform: translateY(3px);
}


#filters .grey {display: inline-block;opacity: 0.25;}
#filters {margin: 0 0 10px;padding:0;list-style: none;}
#filters-type ul, #filters-industry ul, #filters-expertise ul {margin: 0;padding:15px 0 15px 0px;list-style: none;line-height: 1.9;}
.type-label {width: 150px;display: inline-block;vertical-align: top;margin-right: 0px;position:absolute;top:15px;display: none!important;}
#filters-type, #filters-industry, #filters-expertise {margin-bottom: 0;border-top:1px solid rgba(0,0,0,.1);padding-top:0;position: relative;}
#filters-expertise {border-bottom:1px solid rgba(0,0,0,.1);}
#filters-sub {display: none;margin:0px 1.5vw;}
/* Old Button Style
#filters-type li, #filters-industry li, #filters-expertise li, #filters li.parent-filter {display: inline-block;margin-right: 5px;padding: 5px 15px;border-radius: 35px;background: rgba(0,0,0,.025);color: rgba(0, 0, 0, 0.15);}
#filters-type li:hover, #filters-industry li:hover, #filters-expertise li:hover, #filters li.parent-filter:hover {background: rgba(0,0,0,.05);cursor: pointer;}
#filters-type li.active, #filters-industry li.active, #filters-expertise li.active, #filters li.parent-filter.active {background: rgba(0,0,0,.05);color: #000;}
#filters-type li.is-checked, #filters-industry li.is-checked, #filters-expertise li.is-checked {background: rgba(0,0,0,.05);color: #000;}
*/


#filters-type li, #filters-industry li, #filters-expertise li, #filters li.parent-filter {display: inline-block;margin-right: 5px;} 

/* Checkboxes */ 
input[type="checkbox"] {display: none;}



input[type="checkbox"]:not(:checked) + span {opacity: 1;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    background: rgba(0,0,0,.03);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 5px 20px;
    border-radius: 35px;
}
input[type="checkbox"]:hover + span {opacity: 1;cursor: pointer;background: rgba(0,0,0,.07);}
input[type="checkbox"]:checked + span {opacity: 1;
    background: rgba(0,0,0,1);
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 5px 20px;
    border-radius: 35px;
}



.is-hidden {
    display: none!important;
}

sup {
    vertical-align: top;
    font-size: 16px;
    display: none;
  }

.gradiant {background: linear-gradient(45deg, rgba(131,58,180,.1) 0%, rgba(253,29,29,0.1) 50%, rgba(252,176,69,.1) 100%)!important;}


i {}
p {margin:0 0 1.2em 0;}
p:last-child {margin:0;}

b {font-weight: normal;font-family: 'avertabold';}

.t {display: table;height: 100%;width: 65%;margin: 0 auto;text-align: center;}
.tc {vertical-align: middle;display: table-cell;} 

.l {padding-left:2.5vw;float: left;}
.r {padding-right:2.5vw;float: right;}

.touch-title {position: relative;height: 12.5vh;display:none;}
.touch-title h2 {line-height: 12.5vh;margin-bottom:0;text-align: center;}

.touch-intro {display: none;}
.touch-intro.caption.intro {padding:10vw 5vw;}

#header {}
#header a {border-bottom:0px solid transparent;}
#header a:hover {border-bottom:0px solid transparent;cursor: pointer;}
#header .t {width: 100%;}
#header .r a.projects {padding-right:2.5vw;}

.difference {mix-blend-mode: difference;color: #ffffff!important}


#header a .container {display: inline-block;}
#header a .hide  { 
    -webkit-transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;
  	-moz-transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;
  	-o-transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;
  	-webkit-transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;
  	-ms-transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;
    transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;
    display: inline-block;
}

/* Deck / Figma / Presentations */
body.template-decks #header-h, body.template-decks #header, body.template-decks #header-h {display:none;}
body.template-decks #single {position: fixed;top:0;bottom: 0;left:0;right: 0;}
body.template-decks #single iframe {width: 100%!important;height: calc(100% + 48px)!important;}


span.shortBioLink {margin-right:10px;margin-left:-5px;}

#nav a span.tri-right {margin-left:5px;}
#nav a span.arrow-l {
        -webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
        -moz-transform: rotate(180deg);        /* FF */
        -o-transform: rotate(180deg);          /* Opera */
        -ms-transform: rotate(180deg);         /* IE9 */
        transform: rotate(180deg);
        display: inline-block;
        margin-right:5px;
    }


#header a .b {width:7px;}
#header a .ew {width:39px;}
#header a .ind {width:41px;}
#header a .f {width:15px;}
#header a .ick {width:32px;}

.bottom {
    position: fixed;
    bottom: 2.5vw;
    left: 0;
    right: 0;
}


#header .r.touch {display: none;}

a#home-link {position: fixed;top:0;left:0;margin: 1vw;}

.rbutton {padding: 5px 20px;border-radius: 35px;position: relative;display: inline-block;
    background: rgba(0,0,0,.0);
    position: relative;
    display: inline-block;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.rbutton:hover {background: rgba(0,0,0,.03);cursor: pointer;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    
}

.rbutton.vis {background: rgba(0,0,0,.07);}
.rbutton.vis:hover {background: rgba(0,0,0,.12);}


a#menu-link {width:65px;text-align: center;position: fixed; right: 0;top: 0;z-index:1000;margin: 1vw;}
body.menu-open {overflow: hidden;}
a#menu-link {font-size: 0;}
a#menu-link:hover {cursor: pointer;}
a#menu-link .dot {display: inline-block;}

a#menu-link .cross {display: none;}
body.menu-open a#menu-link .cross {display: block;}
body.menu-open a#menu-link .dot {display: none;}

/* Change BK if it's a light page */
#projects {
    -webkit-transition: background 0.2s ease-in-out;
  	-moz-transition: background 0.2s ease-in-out;
  	-o-transition: background 0.2s ease-in-out;
  	-webkit-transition: background 0.2s ease-in-out;
  	-ms-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}
body.template-projects.menu-open #projects {background:rgba(0,0,0,0.1);}






body.showreel-open {overflow: hidden;}

svg.play-icon {height: 30px;width: 26px;fill: #ffffff;}

a#showreel-close-link {
    width: 65px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;
    margin: 1vw;
}

body.showreel-open a#menu-link {opacity: 0;pointer-events: none;}

#header-reel {
    opacity: 0;
    z-index: 666; 
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    -webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    background:rgba(255,255,255,0.95);
    pointer-events: none;
}

#header-reel img, #header-reel video {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: auto;
    max-width: 85%;
    max-height: 85%;
    display: block;
    position: absolute;
    margin: 0px!important;
    padding: 0px!important;
}

body.showreel-open #header-reel {opacity: 1;pointer-events: all;}

#id-showreel.fullscreen .rel {height:100vh!important;padding-bottom:0!important;}
#id-showreel.fullscreen .rel video {object-fit: cover;height: 100%;width: 100%;}

    
.ankok {position: absolute;top: 0;left:0;z-index: 111;margin: 1vw;width: 50%!important;text-align: left;}
.ankok a {opacity: 1!important;}

#header-m {z-index:555;}
.mobile-menu {
    opacity: 0;z-index: 10; position: fixed;top:0;bottom:0;left:0;right:0;
    -webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    background:rgba(0,0,0,0.05);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    pointer-events: none;}
.mobile-menu a {}
.mobile-menu .t {width: 100%;}
.mobile-menu .tc {padding:0 2.5vw;}

ul#fs-menu{    
    display: block;
    list-style: none;
    padding:0;
    margin:0;
    width: 100%;
}

.ankok-menu ul#fs-menu {width: 90%;}

ul#fs-menu li {padding:0 2.5vw;}
ul#fs-menu li#id-1018 {text-align: left;}   /* Studio */
ul#fs-menu li#id-1019 {text-align: left;}  /* Work */
ul#fs-menu li#id-2823 {text-align: left;}  /* For Kicks */
ul#fs-menu li#id-2608 {text-align: left;}  /* News */
ul#fs-menu li#id-1981 {text-align: left;}  /* Contact */

ul#fs-menu li a {
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    display: inline-block;
}
ul#fs-menu li:hover a {margin-left:1.1em;
    
    -webkit-transform: skewX(-21deg);
    transform: skewX(-21deg);
}

ul#fs-menu li span {
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    margin-left:-2em;
}
ul#fs-menu li:hover span {margin-left:0;}

ul#small-menu {    
    list-style: none;
    padding:0;
    margin:0;
}

ul#small-menu li{    
    margin:0 5px;
    display: inline-block;
}


    
body.menu-open .mobile-menu {opacity: 1;pointer-events: all;}



/* * Fancy Background Blur Workaround - Delete if too much work * */
/*
body.menu-open #projects img, body.menu-open #projects video, body.menu-open #article img, body.menu-open #article video,
body.showreel-open #projects img, body.showreel-open #projects video, body.showreel-open #article img, body.showreel-open #article video{filter: blur(35px);-webkit-filter: blur(35px);}
body.menu-open #projects p, body.menu-open #article p, body.menu-open #footer .col, body.menu-open #article .caption,
body.showreel-open #projects p, body.showreel-open #article p, body.showreel-open #footer .col, body.showreel-open #article .caption {opacity: 0;}
body.menu-open #footer, body.showreel-open #footer {border-top: 1px solid transparent;}
*/


#article {position: fixed;top:0;left:0;right:0;opacity: 1;}
#article.active {position: absolute;overflow-y: scroll;}


#single {background:#ffffff;margin-bottom: 50vh;min-height: 100vh;position:relative;z-index: 222;
    -webkit-transition: transform 0.2s ease-out;
    -moz-transition: transform 0.2s ease-out;
    -o-transition: transform 0.2s ease-out;
    -webkit-transition: transform 0.2s ease-out;
    -ms-transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
}


#single.studio .padding {padding:10vw 0;}
#single.projects .padding {padding:0;}
#single.template-basic {min-height: inherit;text-align: left;}


#basic {background:#ffffff;margin-bottom: 50vh;min-height: 100vh;position:relative;z-index: 222;text-align: left;}
#basic .sec-inner {padding: 12vw 2.5vw 5vw;}
#basic .sec-inner .body {max-width: 750px;margin:5vw auto 0;}
#basic .sec-inner p {max-width: inherit;}

body.id-http404 #single {background:#ffffff;margin-bottom: 0;min-height: 100vh;}

#form {background:#fff;min-height: 100vh;position:relative;z-index: 222;text-align: left;}
#form-cotents {padding:10vw 0;}
#form-cotents .inner {padding: 0 2.5vw;}
.form-stick {position: absolute;width: 50%;}
.form-body {margin: 0 5vw 5vw 50%;}


#shade {
    position: fixed;
    top: -100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background: rgba(0,0,0,0.05);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    opacity: 0;
    z-index: -1;
}

#shade.active {
    opacity: 1;
    z-index: 5;
    }


.active {z-index:20;}
.inactive {z-index:1;}

.h-active {z-index:30;}
.h-inactive {z-index:10;}


.projects-layer.active {z-index: 20;}
.projects-layer {position: fixed;top:0;left:0;right:0;height: 100%;width:100%; z-index: 0;overflow: hidden;overflow-y: auto;}

.layer {position: fixed;top:0;left:0;right:0;z-index: 0;}
.layer.active {position: relative;z-index: 20;height:auto;display: block;
    opacity: 1;
}
.layer.inactive {position: fixed;top:0;z-index: 0;opacity: 0;}

.layer.visible {opacity: 1;}

#single.inactive {display: none;}



#single.studio .s-caption {margin: 0.5em 0 0 1em;line-height: 1.2;opacity: 0.5;}
#single.studio .right .s-caption {margin: 0.5em 0 0 0;}

.down-arrow {transform: translateY(0.1em);position: absolute;}
.txt {margin-left:1.1em;}



/* * Studio Page * */
#single.studio {text-align: left;}
#single.studio a {opacity: 0.5;display: inline-block;border-bottom: 1px solid transparent;}
#single.studio a:hover {opacity: 1;border-bottom: 1px solid transparent;}

#single.studio .last-section {padding-bottom:0!important;}

#single.studio .full-width {padding: 0 0 15vw;}
#single.studio .default-width {padding: 0 10vw 15vw;}

#single.studio a.p-title {opacity: 1;display: inline-block;border-bottom: 1px solid transparent;}
#single.studio a.p-title:hover {opacity: 0.5;border-bottom: 1px solid transparent;}


#single.studio .rel img, #single.studio .rel video {width:100%;height:auto;}

#single.studio .block .caption {max-width: 850px;margin: 0 auto;}
#single.studio .code {opacity: 0.5;}

#single.studio .col {width:50%;}
#single.studio .col.text {}
#single.studio .col.vis {}

#single.studio .col .inner-col {}
#single.studio .col.text .inner-col {margin:10vw 5vw;}
#single.studio .col.vis .inner-col {margin-right:5vw;}


#single.studio .float-topleft {float: left;margin-left:-5vw;padding:0 45px 45px 0;}

#single.studio .hover-links {padding:0 5vw;text-align: center;}
#single.studio .lb {margin-bottom: 1em;}

#single.studio .cap {display: block;}

#single.studio #approach-body .col.text .inner-col {margin-top:0px;}

#single.studio a {color: #000000;/* border-bottom:2px solid #FFDFD2; */}
#single.studio a:hover {color: #000000;/* border-bottom:2px solid transparent; */}

#studio-approach {background: #CBFFEF;padding: 5vw 0;border-top-left-radius: 20px 20px;border-top-right-radius: 20px 20px;}
#studio-approach #ab {position: relative;}
#studio-approach #ab .main-title {position: relative;}
#studio-approach #ab .main-title .inner {max-width:inherit;margin-bottom: 5vw;}
#studio-approach #ab .ab-title {position: absolute;width:50%!important;}
#studio-approach #ab .ab-title a {display: block;}
#studio-approach #ab .ab-body {margin: 0 0 0 50%;}
#studio-approach #ab .ab-body .hidden {margin-bottom: 1em;display: none;}
#studio-approach #ab.last .ab-body {padding-bottom: 0;}
#studio-approach #ab .inner {padding:0 2.5vw;}
#studio-approach .related-work {padding:0;}
#studio-approach .related-work a {opacity: 1;width:100%;}
#studio-approach .related-work .single-item {width: 100%;}
#studio-approach .related-work .single-item img, #studio-approach .related-work .single-item video {object-fit: cover;height: 100%;weight:100%;z-index: 0;}
#studio-approach .related-work .single-item .link {position: absolute;top: 10px;left:10px;z-index: 10;color: #fff;}
#studio-approach .related-work .single-item .caption {position: absolute!important;bottom: 20px!important;left:20px!important;z-index: 10;color: #fff;}
#studio-approach .x-large {line-height: 1;}
#studio-approach .app-block {border-bottom: 1px solid;padding-bottom: 2.5vw;margin-bottom: 10vw;}
#studio-approach .app-block:last-child {margin-bottom: 0px;border-bottom: 0px solid;padding-bottom: 0;}


#studio-approach-alt {text-align: left;padding: 5vw 0 0;border-top: 1px solid;/* animation: change-background 10s ease infinite;*/}
#studio-approach-alt .main-title {padding: 0 2.5vw;}
#studio-approach-alt .main-title {margin-bottom: 1em;}
#studio-approach-alt .p {font-size: 0;line-height: 0;}
#studio-approach-alt .p .p-i {display: inline-block;vertical-align: top;margin-bottom: 5vw;padding-bottom: 5vw;border-bottom: 1px solid;width: 100%;}
#studio-approach-alt .p .p-i:last-child {margin-bottom: 0;}
#studio-approach-alt .p .p-i .p-i-s {width: 45%;display: inline-block;vertical-align: top;padding: 0 2.5vw;}
#studio-approach-alt .p .p-i .p-i-s.gallery {white-space: nowrap;overflow: hidden;}
#studio-approach-alt .p .p-i .inner {padding: 0 2.5vw 0;}
#studio-approach-alt .p .p-i .inner a {margin-top:1em;}
#studio-approach-alt .p .p-i .p-i-t {margin-bottom: 20px;}
#studio-approach-alt .p .p-i .p-i-b {padding-top: 1rem;padding-bottom: 1rem;}
#studio-approach-alt .stack {display: inline-block;width: 45%;position: relative;}
#studio-approach-alt .stack-single {position: relative;background:rgba(0,0,0,0.03);border-radius: 5px;overflow: hidden;}
#studio-approach-alt .stack-single.current {opacity: 1;}
#studio-approach-alt .stack img, #studio-approach-alt .stack video {object-fit: cover;height: 100%;width: 100%;position: absolute;top:0;left:0;}

#studio-approach-alt .stack:nth-child(1) .stack-single {padding-top: 100%;}
#studio-approach-alt .stack:nth-child(1) {z-index: 20;}
#studio-approach-alt .stack:nth-child(2) .stack-single {padding-top: 133%;}
#studio-approach-alt .stack:nth-child(2) {z-index: 10;margin-left:-2.5%}
#studio-approach-alt .stack:nth-child(3) .stack-single {padding-top: 120%;}
#studio-approach-alt .stack:nth-child(3) {z-index: 30;margin-left:-2.5%;}

/* Keyframes */
@keyframes change-background {
	0% {
		background: #E9E3D7;
	}
	25% {
		background: #EEE6EF;
	}
	75% {
		background: #FFDFD2;
	}
	100% {
		background: #E9E3D7;
	}
  }


#clients {background: #fff;}
#clients .logos {font-size: 0;line-height: 0;margin-top:2.5vw;}
#clients .imgseq {width: 33.333%;display:inline-block;}
#clients .imgseq .img-padding {padding:0 5vw;}

.one-thirds {width: 33.333%;display: inline-block;vertical-align: top;}
.two-thirds {width: 66.666%;display: inline-block;vertical-align: top;}
.fifty-fifty {width: 50%;display: inline-block;vertical-align: top;}


#services {background: #000;color: #fff;;}
#services .service {display: block;border-bottom: 1px solid;line-height: 2em;}
#services .service:before {content: "+";width: 0.75em;display: inline-block;position: relative;}
#services .service.active:before {content: "-";}
#services .service:hover {cursor: pointer;}
#services ul {padding: 1em 0 0;margin:0 0 2em;display: none;border-top: 1px solid;}
#services li {list-style: none;width: 33.333%;display: inline-block;margin-bottom: 5vw;vertical-align: top;}
#services li .sub-service-text {padding-right: 2em;padding-top:1em;}


#profile .sec-inner {padding: 12.5vw 2.5vw 5vw;}
#profile .sec-inner h2 {margin-top: 1.5em;margin-bottom: 0px;max-width: 75%;}
#profile .studio-img {padding: 0 0 5vw;white-space: nowrap;overflow-x: scroll;}
#profile .studio-img .single-item {padding: 0 1.25vw;display: inline-block;}
#profile .studio-img .single-item .rel {overflow: hidden;border-radius: 5px;}
#profile .studio-img .single-item:nth-child(1) {padding-left: 2.5vw;}
#profile .studio-img .single-item.portrait {width: 35vw;}
#profile .studio-img .single-item.landscape {width: 50vw;}
#profile .studio-img .single-item.square {width: 30vw;}

#contact .sec-inner {padding: 12.5vw 2.5vw 5vw;}
#contact .sec-inner h1 {font-size:80px;line-height: 1.1;margin-bottom: 0;}
#contact .sec-inner h2 {font-size:40px;line-height: 1.1;margin-top:1.5em;margin-bottom: 1.5em;}
.locations .timezone, .locations .address {margin-top:1em;}
.locations .clock {min-width: 4em;display: inline-block;}
.sec-inner .locations p {max-width: 100%;}



.sec-inner {padding: 5vw 2.5vw;}
.sec-inner p {max-width: 85%;}

#single .section-block {padding:0 0 10vw 0;}
#single .section-block .text-block {padding:0 5vw;text-align: left;}
#single .section-block .text-block .title {margin-bottom: 1em;}
#single .section-block .text-block p:last-child {margin-bottom: 0px;}
#single .section-block.sub-menu {height: 12.5vh;}
#single .section-block:nth-child(1) {padding:5vw 0 10vw 0;}
#line {height:1px;background:#000000;margin-bottom:10vw;}

body.template-careers-overview .sec-inner p {max-width: 75%;}

#single-job .sec-inner {padding: 12.5vw 2.5vw 5vw;}
#single-job .c-meta {opacity: 0.5;line-height: 1.2;list-style-type:none;margin: 5vw 0;padding: 0;}
#single-job  .c-meta li span {display: inline-block;min-width: 5.5em;}
#single-job .body ul {margin: 0 0 1.5em;max-width: 900px;list-style: none;padding: 0;}
#single-job .body ul li {margin: 0;padding: 0 0 0 1em;position: relative;}
#single-job .body ul li:before {content: "•";position: absolute;left: 0;}
#single-job .sec-inner p {max-width: 100%;}
#single-job .sec-inner .job {position: relative;}
#single-job .sec-inner .bk {position: absolute;top:0;left:0;right:0;bottom:0;z-index: -1;border-radius: 20px;filter: blur(20px);}

#single .section-block a {opacity: 0.5;display: inline-block}
#single .section-block a:hover {opacity: 1;}

#single #ankok-projects.section-block a {opacity: 1;display: inline-block}
#single #ankok-projects.section-block a:hover {opacity: 0.5;}

#single #capabilities.section-block a {opacity: 1; color:#000000;display: inline-block}
#single #capabilities.section-block a:hover {color: #000000!important;}

#single #capabilities.section-block .hover-links:hover a {opacity: 1; color:#9a9a9a;}

#single #capabilities.section-block a {
    -webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}


#single #ankok-projects.section-block a.img {opacity: 1;display: inline-block}
#single #ankok-projects.section-block a.img:hover {opacity: 1;}


#footer {background: #fff;}
#footer a {color: #000;border-bottom:0px solid transparent;text-decoration: none;display: inline-block;opacity: 1!important;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;}
#footer a:hover {opacity:0.4!important;border-bottom:0px solid transparent;}
#footer .nav {height: 50vh;z-index:100;}
#footer .t {text-align: left;width:95%;}
#footer .footerinner {padding:2.5vw 2.5vw;text-align: left;font-size: 0;line-height: 0;}
#footer .footerinner .col {display: inline-block;width: 50%;vertical-align: top;}
#footer .footerinner .col ul {margin:0;padding:0;list-style: none;}
#footer .footerinner .col ul li {margin:0;padding:0;line-height: 1.1;}
#footer .footerinner .col ul li .loc {display: inline-block;min-width: 4.5em;}
#footer .footerinner .col ul li .tab {display: inline-block;}
#footer .footerinner .col ul li .clock {min-width: 4.25em;display: inline-block;}

#footer-contact {background: #fff;color:#000;border-bottom: 1px solid;}
#footer-contact a {color:#000!important;opacity: 1!important;}
#footer-contact a:hover {color:#000!important;opacity: 0.4!important;}
#footer-contact .footerinner {padding:5vw 2.5vw;text-align: left;font-size: 0;line-height: 0;}

body.id-contact #footer-contact {display: none;}
body.id-contact #footer {border-top:1px solid;}

#flexi-content section#profile {text-align: left;}

body.id-home #footer-contact, body.id-contact #footer-contact, body.id-work #footer-contact, body.template-careers-overview #footer-contact, body.template-news #footer-contact, #projects #footer-contact, #news #footer-contact, body.template-careers-page #footer-contact  {border-top: 1px solid;}

#footer-work {background: yellow;color:#000;}
#footer-work a {color:#000!important;opacity: 1!important;}
#footer-work .footerinner {padding:5vw 2.5vw;text-align: left;font-size: 0;line-height: 0;}

#footer-more-work {background: rgba(0,0,0,0.05);-webkit-backdrop-filter: blur(50px);backdrop-filter: blur(50px);}

.intro-stat {text-align: left;padding: 5vw 2.5vw 5vw;color: #fff;position: relative;display: none;}
.intro-stat .i-s-t {margin-top: 100vh;}
.intro-stat a {color: #fff;border-bottom: 1px solid;}
.intro-stat a:hover {border-bottom: 1px solid transparent;}

#hero-projects {border-top-left-radius: 20px 20px;border-top-right-radius: 20px 20px;}
#hero-projects .hero-project-inner {padding:5vw 0 10vw;text-align: left;font-size: 0;line-height: 0;}
#hero-projects .hero-project-inner a {display: inline-block;margin-bottom: 5vw;width: 100%;}

#hero-projects .hero-project-inner a.default-size {width: 50%;}
#hero-projects .hero-project-inner a.default-size .block {padding: 0 2.5vw;}
#hero-projects .hero-project-inner a.default-size .lp {padding-bottom: 133%;margin-top: 10px;}

#hero-projects .hero-project-inner a.large-size {width: 100%;}
#hero-projects .hero-project-inner a.large-size .block {padding: 0 10vw;}

#hero-projects .hero-project-inner a.large-size .rel {overflow: hidden;border-radius: 8px;margin-top:10px;}
#hero-projects .hero-project-inner a.large-size .rel img {object-fit: cover;height: 100%;width: 100%;}

#hero-projects .hero-project-inner a:last-child {margin-bottom: 0px;}
#hero-projects .hero-project-inner .grey {display: block;opacity: 0.25;}
#hero-projects .hero-project-inner .grey p {text-align: left!important;display: inline-block!important;margin-bottom: 0!important;}

#hero-projects .hero-project-inner .lp img, #hero-projects .hero-project-inner .lp video {object-fit: cover;height: 100%;width: 100%;}

#hero-projects .block {width: 100%;height: 120vh;position: relative;}

#hero-projects .block.block-full-size .thumb-override {position: absolute;z-index: 0;top:0;bottom: 0;left:0;right:0;background: #000;}
#hero-projects .block.block-left .thumb-override {position: absolute;z-index: 0;top:0;bottom: 0;left:0;right:inherit;width:50%;}
#hero-projects .block.block-right .thumb-override {position: absolute;z-index: 0;top:0;bottom: 0;left:inherit;right:0;width:50%;}

#hero-projects .block .thumb-override img, #hero-projects .block .thumb-override video {object-fit: cover;height: 100%;width: 100%;position: absolute;left:0;top:0;opacity: 0.9;}

#hero-projects .block .i {padding: 2.5vw;max-width: 700px;text-align: left;}
#hero-projects .block .hero-txt {color: #fff;}
#hero-projects .block.block-full-size .hero-txt {text-align:center;position: sticky;left:0;right:0;;z-index: 10;}
#hero-projects .block.block-right .hero-txt {text-align:left;position: absolute;top:0;left:0;z-index: 10;width: 50%;bottom: 0;}
#hero-projects .block.block-left .hero-txt {text-align:left;position: absolute;top:0;right:0;z-index: 10;width: 50%;bottom: 0;}

#hero-projects .hero-byline strong {font-weight: normal;border-bottom: 1px solid;display: inline-block;}
#hero-projects .rbutton {background: rgba(0,0,0,.03);margin-top:0.5em;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}
#hero-projects .rbutton:hover {background: rgba(0,0,0,.07);}
#hero-projects a {cursor: pointer!important;}



.thumb-override {display: block;}

.thumb-scroll {height: 100vh;width: 100%;position: relative;}
.thumb-scroll img, .thumb-scroll video {object-fit: cover;height: 100%;width: 100%;}
.thumb-scroll img, .thumb-scroll video {
    width: auto;
    height: auto;
    max-height: 50%;
    max-width: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    transition: transform 0.2s ease-in-out 0s;
    margin: 0px!important;
    padding: 0px!important;
    border-radius: 8px;
}
.thumb-scroll .hero-byline {position: absolute;left:5vw;right:5vw;top:5vw;}
.thumb-scroll .hero-byline p {max-width: 750px;margin:0 auto;}
.thumb-scroll .hero-byline strong {font-weight: normal;border-bottom: 1px solid;}
.thumb-scroll .hero-link {position: absolute;left:25%;right:25%;bottom:5vw;display: inline-block;}

#hero-projects-alt a {color: inherit!important;}
#hero-projects-alt {
    -moz-transition: background 0.2s ease-in-out 0.2s, color 0.4s ease-out;
    -o-transition: background 0.2s ease-in-out 0.2s, color 0.4s ease-out;
    -webkit-transition: background 0.2s ease-in-out 0.2s, color 0.4s ease-out;
    -ms-transition: background 0.2s ease-in-out 0.2s, color 0.4s ease-out;
    transition: background 0.2s ease-in-out 0.2s, color 0.4s ease-out;
}

.thumb-scroll .hero-link .headline p {text-align: center!important;display: inline-block!important;margin-bottom: 0!important;}

.clickable {pointer-events:all;}

#link {position: fixed;bottom:0;left:0;right:0;height: 12.5vh;z-index:0;}


#hero {height:100vh;width: 100%;position: relative; z-index: 10;}
#hero h1, #archive h1 {margin: 0;}

#description {padding:0 7vw 3.5vw;}

.archive-link {cursor: pointer;}
.archive-link:hover {cursor: pointer;}

#id-archive-m {background:#000;color: #fff;cursor: pointer;}
#id-archive-m a {color: #fff;}
#id-archive-m  div {padding: 10vw;}

#description .inner {max-width:650px;}
#description p {color:#000;}
#description .desc p:last-child {margin-bottom: 0px;}

.caption p:last-child, .caption h1:last-child, .caption h2:last-child {margin-bottom: 0px;}

#description a {color:#b0b0b0;}
#description a:hover {color:#000;}

#description .services {}
#description .services .cols {font-size:0;line-height:0;}
#description ul {margin:3em 0;padding:0;width:33.333%;display:inline-block;font-size:18px;line-height: 1.4;vertical-align: top;}
#description ul span {display:block;margin-bottom:1em;}
#description ul li {list-style: none;color:#b0b0b0;display:block;}
/* #description ul li:after {content:"•";margin:0 5px 0 0;} */
/* #description ul li:last-child:after {content:"";} */


h1.no-margin {margin-bottom:0px;}
h1.double-space {margin-bottom:2.4em;}
h1.title {margin-bottom:0px;}
h1.title:after {content:"\2022 ";display: block;}
.copywrite {margin-top:5vw;}

::placeholder {color:rgba(0, 0, 0, 0.1);}
input[type="text"] {padding: 5px;background:rgba(0, 0, 0, 0.025)!important;border-bottom: 1px solid #000!important;}
.form__item--scf-website {
    display: none;
}

/* Sign up form */ 
/*
input {
    padding: 0px;
    color:#000000;
    opacity: 1;
    margin: 0 auto;
    display: inline;
    text-transform: none;
    text-align: left;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    background: none;
    border: none;
    font-size:40px;
    line-height: 1.2;
    font-family: 'avertaregular', sans-serif;
    max-width:470px;
}
*/


.studio-stat {margin-bottom: 5vw;}

#mc_embed_signup div.mce_inline_error {margin:0!important;padding:0!important;background:none!important;color:rgba(53,53,53,0.5)!important;font-weight:normal!important;font-family: 'avertaregular', sans-serif!important;font-size:40px;position: relative;}

#mc_embed_signup .wrap {display: inline-block;position: absolute;left:0;margin-left:0;}
#mc_embed_signup.active .wrap {display: inline-block;margin-left:1em;position: relative;}
#mc_embed_signup input.email {opacity: 0;}
#mc_embed_signup.active input.email {opacity: 1;}
#mc_embed_signup .title {position: absolute;left:1.2em;font-family: 'avertaregular', sans-serif!important;}
#mc_embed_signup.active .title {opacity: 0;}

#mc_embed_signup.clicked .mailchimp-thankyou {display: block;}

#mc_embed_signup .mc-field-group {position: relative;}

.status-hidden #flexi-content .nav {display: none;}


.mailchimp {text-align: left;}
.mailchimp-thankyou {display: none;margin:1.2em 0 0 0;font-family: 'avertaregular', sans-serif;}
#mc_embed_signup.clicked h1.mailchimp-thankyou {display: block;}
#mc_embed_signup.clicked form {display: none;}

/* Remove Webkit Style */ 
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background:none;
  border:none
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

/* Button Style */ 
.button {
    display: inline-block;
    border: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
    background:none;
    color: #000000;
    cursor: pointer;
    text-align: left;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    transition: color 0.2s linear;
}

.button:hover,
.button:focus {
    background: none;
    color:#000000;
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    transition: color 0.2s linear;
}

.button:focus {
    outline: 0px solid #fff;
}

.button:active {
    
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(53,53,53,0.5);
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgba(53,53,53,0.5);
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgba(53,53,53,0.5);
}
:-moz-placeholder { /* Firefox 18- */
  color: rgba(53,53,53,0.5);
}

.index {position: absolute;top:2vw;left:2vw;z-index: 10;}

#about section {padding-top:8vw;}


.shadow {
    position: absolute;
    bottom: -25vh;
    left: 0;
    right: 0;
    height: 25vh;
    box-shadow: inset 0px 12px 27px -9px rgba(0, 0, 0, 0.1);
    display: none;
}

#id-archive p {text-align: center;}

/*

body.id-projects.main-inactive #projects {margin-top:0;}
body.id-projects #single {min-height: inherit;margin-bottom:0;height: 0;}
body.id-projects #projects, body.id-archive #projects {position: relative;z-index: 0;}


body.main-inactive #projects {position: relative;z-index:0;top:0;margin-top:-100vh;}
*/

/* Force Align */
body.id-home .msg.default .align-left {text-align: left;}
body.id-home .msg.default .align-right  {text-align: right;}
body.id-home .msg.default .align-center {text-align: center;}

/* Default */
body.id-home .msg.default .a {text-align: left;}
body.id-home .msg.default .new {text-align: right;}
body.id-home .msg.default .kind {text-align: center;}
body.id-home .msg.default .of {text-align: left;}
body.id-home .msg.default .kick {text-align: right;}

/* Option 1 */
body.opt1.id-home .msg.default .a {text-align: left;}
body.opt1.id-home .msg.default .new {text-align: right;}
body.opt1.id-home .msg.default .kind {text-align: center;}
body.opt1.id-home .msg.default .of {text-align: left;}
body.opt1.id-home .msg.default .kick {text-align: right;}

/* Option 2 */
body.opt2.id-home .msg.default .a {text-align: center;}
body.opt2.id-home .msg.default .new {text-align: left;}
body.opt2.id-home .msg.default .kind {text-align: right;}
body.opt2.id-home .msg.default .of {text-align: center;}
body.opt2.id-home .msg.default .kick {text-align: left;}

/* Option 3 */
body.opt3.id-home .msg.default .a {text-align: right;}
body.opt3.id-home .msg.default .new {text-align: center;}
body.opt3.id-home .msg.default .kind {text-align: left;}
body.opt3.id-home .msg.default .of {text-align: right;}
body.opt3.id-home .msg.default .kick {text-align: center;}




body.id-home #header-h {opacity: 1;}

body.projects-active * {-webkit-overflow-scrolling: touch;}

#projects {position: fixed;top:0;left:0;right:0;height:100%;width:100%;overflow: hidden;overflow-y: auto;background: #ffffff;border-bottom:1px solid;z-index: 0;}
/* #projects, #studio {padding:12.5vh 0;} */
#projects .reset {line-height: 1.2;}
#grid, #grid-feat {font-size:0;line-height:0;text-align: left;}
.grid-single {display:inline-block;position: relative;margin-bottom:7.5vw;vertical-align: top;}
.grid-single.featured {width:100%;}
.grid-single.regular {width:50%;}
.grid-single .container {padding-top:70%;position: relative;}
.grid-single .title {text-align: center;margin-top:20px;padding:0 15px;}
.grid-single .shortDesc {text-align: center;color:#b0b0b0;padding:0 15px;}
#grid .regular:nth-child(odd) .padding {margin-right:20px;}
#grid .regular:nth-child(even) .padding {margin-left:20px;}
.grid-single.featured .container {padding-top:40%;}
.job-title {margin-bottom: 1em;}
.job {margin-bottom: 2.5vw;padding: 2.5vw;position: relative;}
.small-print {margin-top:5vw;}
.job .medium {margin-top: 0.5em;}
.job .x-large, .job .medium {position: relative;z-index: 1;}
.job .bk {filter: blur(20px);position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: yellow;z-index: 0;border-radius:20px;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    -webkit-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    transition: all 0.4s ease-out;
}
.job:hover .bk {filter: blur(5px);border-radius:50%;}

.grid-single img.primary, .grid-single video.primary {z-index:10;}
.grid-single img.secondary, .grid-single video.secondary {z-index:0;}
.grid-single img.secondary:hover, .grid-single video.secondary:hover {z-index:20;}


.grid-single.featured .image img.primary, .grid-single.featured .image video.primary {max-width: 75%;max-height:75%;}
.grid-single.featured .image img.secondary, .grid-single.featured .image video.secondary {max-width: 100%;max-height:100%;}

.grid-single.regular .image img.primary, .grid-single.regular .image video.primary, .grid-single.regular .image img.secondary, .grid-single.regular .image video.secondary {max-width: 90%;max-height:90%;}


/*

#news-overview:hover .news-item a {opacity: 0.25;}
#news-overview:hover .news-item a.current {opacity: 1;}
#news #filters-parent {padding:0 2.5vw;margin: 0 0 2.5vw;}
#news-overview .news-item .rel {display: none;}
*/

#news {position: fixed;top:0;left:0;right:0;height:100%;width:100%;overflow: hidden;overflow-y: auto;background: #ffffff;border-bottom:1px solid;}
#news-overview {padding-top: 7.5vw;margin:0;text-align: left;font-size: 0;}
#news-overview .single-item {width: 25%;display: inline-block;vertical-align: top;}
#news-overview .single-item .single-item-padding {margin:0 2.5vw 10vw;}
#news-overview .single-item img, #news-overview .single-item video {object-fit: cover;height: 100%;width: 100%;}
#news-overview .single-item .caption {margin-top:0.5em;}
#news-overview .single-item .news-body {opacity: 0.5;}
#news-overview .single-item .rel {overflow: hidden;border-radius: 5px;}


.template-news-page #flexi-content {text-align: left;padding-top:12.5vw;padding-bottom: 5vw;}
#news-intro {margin-bottom: 10vw;}
#news-intro .hd {margin:0 2.5vw;}
#news-intro .news-t {margin-bottom: 0.5em;}
#news-intro .news-a {text-align: right;position: absolute;right: 0;margin-top: 1em;z-index: 666;}
#news-intro .news-d {position: absolute;z-index: 666;margin-top: 3em;}
#news-intro #cover {text-align: center;}
#news-intro #cover .vis {width: 75%;margin:0 auto;}
#news-intro #cover img, #news-intro #cover video {width: 100%;height: auto;}


/* Work */
#projects-overview {padding-top: 7.5vw;margin:0 0 10vw;text-align: left;}
#projects-overview .archive {font-size:0;}
#projects-overview .archive .single-item {width: 33.333%;display: inline-block;vertical-align: top;}
#projects-overview .archive .single-item .single-item-padding {margin:0 2.5vw 10vw;}
#projects-overview .archive .single-item img, #projects-overview .archive .single-item video {object-fit: cover;height: 100%;width: 100%;}
#projects-overview .archive .single-item .caption {margin-top:1em;}
#projects-overview .archive .single-item .caption .grey {opacity: 0.25;}

/* Archive */
#projects-overview-archive {padding-top: 7.5vw;margin:0 1vw 10vw;}
#projects-overview-archive .archive a {font-size:0;}
#projects-overview-archive .outer {position: absolute;top:0;bottom:0;left:0;right:0;}
#projects-overview-archive .outer img, #projects-overview-archive .outer video {
    width: auto;
    max-height: 75%;
    max-width: 75%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    transition: transform 0.2s ease-in-out 0s;
    margin: 0px!important;
    padding: 0px!important;
}

#projects-overview-archive a.project-link:hover .outer img, #projects-overview-archive a.project-link:hover .outer video {
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)!important;
    transition: transform 0.2s ease-in-out 0s;
}

#projects-overview-archive img.seq-i {height:inherit;width: inherit;object-fit: inherit;}

#projects-overview-archive a.project-link:hover {cursor: pointer;}
#projects-overview-archive .caption {position: relative;text-align: left;opacity:1;padding:0;
}
#projects-overview-archive a.project-link:hover .caption {opacity: 1;
    -webkit-transition: opacity 0.2s ease-in-out 0s;
  	-moz-transition: opacity 0.2s ease-in-out 0s;
  	-o-transition: opacity 0.2s ease-in-out 0s;
  	-webkit-transition: opacity 0.2s ease-in-out 0s;
  	-ms-transition: opacity 0.2s ease-in-out 0s;
    transition: opacity 0.2s ease-in-out 0s;}







#projects-overview-archive .archive .single-item video[poster]{
    height:100%;
    width:auto!important;
    left: 50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    }

#projects-overview-archive .archive .single-item img, #projects-overview-archive .archive .single-item video {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.imgseq .r {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}



#projects-overview-archive .archive .single-item .t {width: 100%;}


.image img.primary.align-bottom, .image video.primary.align-bottom {
    top:100%;
    -webkit-transform: translate(-50%,-100%);
    -moz-transform: translate(-50%,-100%);
    -ms-transform: translate(-50%,-100%);
    -o-transform: translate(-50%,-100%);
    transform: translate(-50%,-100%);
}
.image img.primary.align-top, .image video.primary.align-top {
    top:0%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    -o-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
}

.image img.secondary.align-left, .image video.secondary.align-left {
    left:0%;
    -webkit-transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    -o-transform: translate(0%,-50%);
    transform: translate(0%,-50%);
}
.image img.secondary.align-right, .image video.secondary.align-right {
    left:100%;
    -webkit-transform: translate(-100%,-50%);
    -moz-transform: translate(-100%,-50%);
    -ms-transform: translate(-100%,-50%);
    -o-transform: translate(-100%,-50%);
    transform: translate(-100%,-50%);
}



/* * All Projects * */

/* * Primary Bottom - Secondary Right * */
    .grid-single.regular .image.primary-align-bottom.secondary-align-right img.primary, .grid-single.regular .image.primary-align-bottom.secondary-align-right video.primary {
        left:0%!important;
        top:100%!important;
        -webkit-transform: translate(0%,-100%)!important;
        -moz-transform: translate(0%,-100%)!important;
        -ms-transform: translate(0%,-100%)!important;
        -o-transform: translate(0%,-100%)!important;
        transform: translate(0%,-100%)!important;
    }
    .grid-single.regular .image.primary-align-bottom.secondary-align-right img.secondary, .grid-single.regular .image.primary-align-bottom.secondary-align-right video.secondary {
        left: 100%!important;
        top:0%!important;
        -webkit-transform: translate(-100%,0%)!important;
        -moz-transform: translate(-100%,0%)!important;
        -ms-transform: translate(-100%,0%)!important;
        -o-transform: translate(-100%,0%)!important;
        transform: translate(-100%,0%)!important;
    }
    
    /* * Primary Bottom - Secondary Left * */
    .grid-single.regular .image.primary-align-bottom.secondary-align-left img.primary, .grid-single.regular .image.primary-align-bottom.secondary-align-left video.primary {
        left:100%!important;
        top:100%!important;
        -webkit-transform: translate(-100%,-100%)!important;
        -moz-transform: translate(-100%,-100%)!important;
        -ms-transform: translate(-100%,-100%)!important;
        -o-transform: translate(-100%,-100%)!important;
        transform: translate(-100%,-100%)!important;
    }
    .grid-single.regular .image.primary-align-bottom.secondary-align-left img.secondary, .grid-single.regular .image.primary-align-bottom.secondary-align-left video.secondary {
        left: 0%!important;
        top:0%!important;
        -webkit-transform: translate(0%,0%)!important;
        -moz-transform: translate(0%,0%)!important;
        -ms-transform: translate(0%,0%)!important;
        -o-transform: translate(0%,0%)!important;
        transform: translate(0%,0%)!important;
    }
    
    /* * Primary Top - Secondary Right * */
    .grid-single.regular .image.primary-align-top.secondary-align-right img.primary, .grid-single.regular .image.primary-align-top.secondary-align-right video.primary {
        left:0%!important;
        top:0%!important;
        -webkit-transform: translate(0%,0%)!important;
        -moz-transform: translate(0%,0%)!important;
        -ms-transform: translate(0%,0%)!important;
        -o-transform: translate(0%,0%)!important;
        transform: translate(0%,0%)!important;
    }
    .grid-single.regular .image.primary-align-top.secondary-align-right img.secondary, .grid-single.regular .image.primary-align-top.secondary-align-right video.secondary {
        left: 100%!important;
        top:100%!important;
        -webkit-transform: translate(-100%,-100%)!important;
        -moz-transform: translate(-100%,-100%)!important;
        -ms-transform: translate(-100%,-100%)!important;
        -o-transform: translate(-100%,-100%)!important;
        transform: translate(-100%,-100%)!important;
    }
    
    /* * Primary Top - Secondary Left * */
    .grid-single.regular .image.primary-align-top.secondary-align-left img.primary, .grid-single.regular .image.primary-align-top.secondary-align-left video.primary {
        left:100%!important;
        top:0%!important;
        -webkit-transform: translate(-100%,0%)!important;
        -moz-transform: translate(-100%,0%)!important;
        -ms-transform: translate(-100%,0%)!important;
        -o-transform: translate(-100%,0%)!important;
        transform: translate(-100%,0%)!important;
    }
    .grid-single.regular .image.primary-align-top.secondary-align-left img.secondary, .grid-single.regular .image.primary-align-top.secondary-align-left video.secondary {
        left: 0%!important;
        top:100%!important;
        -webkit-transform: translate(0%,-100%)!important;
        -moz-transform: translate(0%,-100%)!important;
        -ms-transform: translate(0%,-100%)!important;
        -o-transform: translate(0%,-100%)!important;
        transform: translate(0%,-100%)!important;
    }


#touch {display: none;}
#no-touch {display: block;padding-top:12.5vh;}


body.touch .byline {opacity: 1!important;}

.byline {opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out 0s;
  	-moz-transition: opacity 0.2s ease-in-out 0s;
  	-o-transition: opacity 0.2s ease-in-out 0s;
  	-webkit-transition: opacity 0.2s ease-in-out 0s;
  	-ms-transition: opacity 0.2s ease-in-out 0s;
    transition: opacity 0.2s ease-in-out 0s;}
.single-item .relative:hover .byline {opacity: 1;-webkit-transition: opacity 0.2s ease-in-out 0s;
  	-moz-transition: opacity 0.2s ease-in-out 0s;
  	-o-transition: opacity 0.2s ease-in-out 0s;
  	-webkit-transition: opacity 0.2s ease-in-out 0s;
  	-ms-transition: opacity 0.2s ease-in-out 0s;
    transition: opacity 0.2s ease-in-out 0s;}


/* Back to Work / News Button */
#btp-touch {display: block;position: fixed;bottom: 0;left: 0;right:0;height: 50%;z-index: 111;}
#btp-touch a {line-height: 50vh;color: #fff;}
#btp-touch a div {-webkit-transform: translateY(4px);transform: translateY(4px);display: inline-block;}
#btp-touch a .back-arrow:before {content:"\21A9\FE0E";} 

#grid-m {}
#grid-m .grid-single-m {width:100%;height:100vh;background: #000;position: relative;}
#grid-m .grid-single-m a {position: absolute;top:0;bottom:0;left:0;right:0;z-index: 10;}
#grid-m .grid-single-m .project-thumb {position: absolute;top:0;bottom:0;left:0;right:0;z-index: 0;}
.project-thumb img, .project-thumb video {object-fit: cover;height: 100%;width: 100%;opacity: 0.9;}
#grid-m .grid-single-m .title {position: relative;z-index: 2;height:12.5vh;line-height:12.5vh;color: #fff;z-index: 1;}
/* #grid-m .grid-single-m:nth-child(1) .title {top:43.75%;} */


#grid-m.contain .project-thumb img, #grid-m.contain .project-thumb video {object-fit: contain;width:75%;}


.text-block h1:last-child, .text-block p:last-child {margin-bottom: 0;}

#footer h1:last-child {margin-bottom: 0;}




#about {position: fixed;top:0;left:0;right:0;z-index: 0;background-color: #FFDFD2;}



#about .text-block {padding:0 7vw;}

#about img, #about video {width:100%;height:auto;margin:0.5em 0;-webkit-filter: grayscale(1);filter: grayscale(1);}
#about img:hover, #about video:hover {-webkit-filter: grayscale(0);filter: grayscale(0);mix-blend-mode: none;cursor: pointer;}

#about .image, #about .video, #about .ankok-image {mix-blend-mode: multiply;}
#about .image.hover, #about .video.hover, #about .ankok-image.hover {mix-blend-mode: normal;}


#about .image img, #about .video video {
	-webkit-transition: 0.1s ease-in-out;
  	-moz-transition: 0.1s ease-in-out;
  	-o-transition: 0.1s ease-in-out;
  	-webkit-transition: 0.1s ease-in-out;
  	-ms-transition: 0.1s ease-in-out;
  	transition: 0.1s ease-in-out;
}

#about .image img:hover, #about .video video:hover {
    -webkit-transform: translate(-50%,-52%);
    -moz-transform: translate(-50%,-52%);
    -ms-transform: translate(-50%,-52%);
    -o-transform: translate(-50%,-52%);
    transform: translate(-50%,-52%);
	-webkit-transition: 0.1s ease-in-out;
  	-moz-transition: 0.1s ease-in-out;
  	-o-transition: 0.1s ease-in-out;
  	-webkit-transition: 0.1s ease-in-out;
  	-ms-transition: 0.1s ease-in-out;
  	transition: 0.1s ease-in-out;
}



.inner {max-width:945px;margin:0 auto;}

.meta {position: absolute;top:0;bottom: 0;right: 0;left:0;z-index: 5;pointer-events:none;}

.project-meta {position: absolute;bottom: 0;right: 0;left:0;z-index: 100;line-height: 80px;}


.sub-title {display:block;}

#cursor {position: fixed; width:400px;height:200px;display:none;text-align: center;line-height: 1.2;z-index: 100000;pointer-events: none;}
#cursor span {display: block;width: 100%;}
#cursor span.counter, #cursor span.breaker, #cursor span.total {display: inline-block;width: inherit;}
span.breaker:before {content: "\2022";}

span.counter {width: 25px;display: inline-block;}
span.total {width: 25px;display: inline-block;}
#single.studio span.counter, #single.studio span.total {width: 10px!important;display: inline-block;}
span.counter {text-align: right;}
span.total {text-align: left;}
span.breaker {margin:0 5px;}

span.counter.slide-1,
span.counter.slide-2,
span.counter.slide-3,
span.counter.slide-4,
span.counter.slide-5,
span.counter.slide-6,
span.counter.slide-7,
span.counter.slide-8,
span.counter.slide-9 {width: 15px;}

h1 {font-weight: normal;font-size:40px;line-height: 1.2;margin: 0 0 1.2em 0;}
h2 {font-weight: normal;font-size:24px;line-height: 1.2;margin: 0 0 1.2em 0;}

.medium {font-size:24px;line-height: 1.2;}
.large {font-size:40px;line-height: 1.1;}
.x-large {font-size:80px;line-height: 1.1;}
.mega {font-size:160px;line-height: 20vh;}

.mega li {height: 20vh;text-align: left;}

.m-large {font-size:30px;line-height: 1.2;}

.text-black, .text-black a {color: #000000;}
.text-white, .text-white a {color: #ffffff;}



/* * Homepage Intro * */




#visuals {z-index: 0;display: block;}
.item {
    position: absolute!important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out 0s;
  	-moz-transition: opacity 0.2s ease-in-out 0s;
  	-o-transition: opacity 0.2s ease-in-out 0s;
  	-webkit-transition: opacity 0.2s ease-in-out 0s;
  	-ms-transition: opacity 0.2s ease-in-out 0s;
    transition: opacity 0.2s ease-in-out 0s;
}






.item.layout-inline img, .item.layout-inline video {
    width: auto;
    max-height: 50%;
    max-width: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0px!important;
    padding: 0px!important;
}

.item.layout-inline.size-seventy-five-perc img, .item.layout-inline.size-seventy-five-perc video {
    max-height: 75%;
    max-width: 75%;
}

.hint .l {position: absolute;left:0;}
.hint .r {position: absolute;right:0;}

.hint:hover {cursor: pointer!important;}

.hint .l .text {
    -webkit-transition: margin 0.4s ease-in-out;
  	-moz-transition: margin 0.4s ease-in-out;
  	-o-transition: margin 0.4s ease-in-out;
  	-webkit-transition: margin 0.4s ease-in-out;
  	-ms-transition: margin 0.4s ease-in-out;
    transition: margin 0.4s ease-in-out;}

.hint .l .arrow {
    -webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;}


.hint:hover .l .text {margin-left:1.2em;
    -webkit-transition: margin 0.2s ease-in-out;
  	-moz-transition: bmargin 0.2s ease-in-out;
  	-o-transition: margin 0.2s ease-in-out;
  	-webkit-transition: bmargin 0.2s ease-in-out;
  	-ms-transition: margin 0.2s ease-in-out;
    transition: margin 0.2s ease-in-out;
}
.hint .l .arrow {position: absolute;left:2.5vw;opacity: 0;}
.hint:hover .l .arrow {opacity: 1;
    -webkit-transition: opacity 0.4s ease-in-out;
  	-moz-transition: opacity 0.4s ease-in-out;
  	-o-transition: opacity 0.4s ease-in-out;
  	-webkit-transition: opacity 0.4s ease-in-out;
  	-ms-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;}

.item.layout-fullscreen.align-center img, .item.layout-fullscreen.align-center video, 
.item.layout-fullscreen.align-left img, .item.layout-fullscreen.align-left video, 
.item.layout-fullscreen.align-right img, .item.layout-fullscreen.align-right video
    {
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center center;
}

.item.layout-contain.align-center .vis,
.item.layout-contain.align-right .vis,
.item.layout-contain.align-left .vis{
    width: 100%;
    height: 100%;
}
.item.layout-contain .vis img, .item.layout-contain .vis video {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    position: absolute;
    margin: 0px!important;
    padding: 0px!important;
}

.item.layout-contain.align-right .vis img, .item.layout-contain.align-right .vis video {
    top: 50%;
    left: 100%;
    -webkit-transform: translate(-100%,-50%);
    -moz-transform: translate(-100%,-50%);
    -ms-transform: translate(-100%,-50%);
    -o-transform: translate(-100%,-50%);
    transform: translate(-100%,-50%);
}

.item.layout-contain.align-left .vis img, .item.layout-contain.align-left .vis video {
    top: 50%;
    left: 0%;
    -webkit-transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    -o-transform: translate(0%,-50%);
    transform: translate(0%,-50%);
}


.item.layout-fullscreen .vis {
    position: absolute!important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.item.align-left .vis {
    position: absolute!important;
    top: 0;
    bottom: 0;
    left: 0;
    width:50%;
    right:auto;
}

.item.align-right .vis {
    position: absolute!important;
    top: 0;
    bottom: 0;
    right: 0;
    width:50%;
    left:auto;
}

.item.layout-inline.align-right img, .item.layout-inline.align-right video,
.item.layout-inline.align-left img, .item.layout-inline.align-left video
    {
    max-height: 75%;
    max-width: 75%;
}

.hint {
    position: absolute!important;
    right: 0;
    bottom: 7.5%;
    left: 0;
    line-height: 1.2!important;
    z-index:50;
}
.hint span.pre {display: block;text-align: left;}
.hint span.post {display: none;text-align: right;}
.hint:hover span.pre {display: none;}
.hint:hover span.post {display: block;}

a.p-link {position: absolute;top:0;bottom: 0;left:0;right:0;z-index: 0;}


.marquee {
    position: absolute;
    height: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 50%;
    margin-top: -50px;
    white-space: nowrap;
    -webkit-animation: a 10s linear infinite;
    animation: a 18s linear infinite;
    z-index: 5;
}

body.id-home.screensaver-inactive #header.text-white a, body.id-home.screensaver-inactive #header.text-black a {color:#000000!important;}



/* * A Sports Brand Agency * */

.sba-menu {display:none;}
body.page-sportsbrandagency #single {margin-bottom: 0;}
body.page-sportsbrandagency #shade, body.page-sportsbrandagency #projects {display: none;}
body.page-sportsbrandagency .sba-menu {display:block;}
body.page-sportsbrandagency .ankok-menu {display:none;}

body.page-sportsbrandagenc .pt #post-title-home {display: none;}

body.page-sportsbrandagency .pt .pt-wrap:hover a#post-title {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
}





/* * Flexi Page * */

.full-width {padding: 0 0 5vw;}
.default-width {padding: 0 5vw 5vw;}

.sec-text.default-width {padding:0 5vw 10vw;}



#flexi-content {line-height:0;font-size:0;min-height: 125vh;}
#flexi-content .post-title {z-index: 100;color: inherit;}
#flexi-content .post-intro {height: 100vh;z-index: 100;color: inherit;}
#flexi-content .post-intro .t {width:65%;}
#flexi-content .post-title h2, #flexi-content .post-title h1, #flexi-content .post-intro h1 {margin-bottom: 0px;}
#flexi-content .back {height: 12.5vh;position: relative;background: rgba (0,0,0,0.1);}
#flexi-content .back h2 {margin-bottom: 0;}
#flexi-content .nav {height: 100vh;pointer-events: none;z-index:100;top:0;}
#flexi-content .nav .clickable {pointer-events:all;}
#flexi-content section.last .full-width.width-one-hundred {padding:0px;}
#flexi-content .nomarginbottom {padding-bottom:0px;}
#flexi-content .addmargintop {padding-top:5vw;}

#related-type {text-align: left;}
#related-type .archive {white-space: nowrap;overflow: hidden;}
#related-type #projects-overview-archive {padding:5vw 0 0 0;margin:0;background: #fff!important;}
#related-type #projects-overview-archive a {color: #000!important;}
#related-type #projects-overview-archive .archive .single-item {margin-bottom: 5vw;width:25%;}
#related-type #projects-overview-archive .archive .single-item .single-item-padding {padding: 0 1.5vw 0;margin:0;}
#related-type #projects-overview-archive .caption {margin-top:0.5em;}
#related-type #projects-overview-archive .caption .grey {opacity: 0.25;white-space: normal;}
#related-type h1 {margin:0 2.5vw 0.5em;}
#related-type h2 {margin:0 2.5vw 5vw;max-width: 950px;}

#related-type .sub-text {display: none;}
#related-type.type-invent .sub-text.invent {display: block;}
#related-type.type-re-invent .sub-text.reinvent {display: block;}
#related-type.type-never-sit-still .sub-text.neversitstill {display: block;}




#content {position: relative;}



.pt .pt-wrap {padding:1vw 0;overflow: hidden;width:85%;text-align: left;}
.pt a#post-title {margin:0 1vw;opacity: 1!important;
-webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;}
.pt a#post-title:hover {opacity: 1!important;}
.pt #post-title-home {position: absolute;left:0;display:block;white-space: nowrap;top: 90px;
-webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;}

.pt .pt-wrap:hover .pt #post-title-home {
    -webkit-transform: translateY(-90px);
    transform: translateY(-90px);
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
}

.pt .pt-wrap:hover a#post-title {
    -webkit-transform: translateY(-90px);
    transform: translateY(-90px);
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
}

body.template-tag-filter-type section, body.template-tag-filter-industry section, body.template-tag-filter-expertise section {text-align: left;}
body.template-tag-filter-type #projects-overview, body.template-tag-filter-industry #projects-overview, body.template-tag-filter-expertise #projects-overview {padding-top: 0px;}

body.post-title-active #flexi-content .post-title {height: 100vh;}
body.post-title-inactive #flexi-content .post-title {height: inherit;}

.content-iframe iframe {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}

#flexi-content section {position: relative;z-index: 0;}
#flexi-content section.first {position: relative;z-index: -1;}
#flexi-content section.first .addmargintop {padding-top:15vw;}

#flexi-content #block {position: relative;}
#flexi-content .relative {position: relative;}

#flexi-content .caption.black {color: inherit;}
#flexi-content .caption.black a {color: inherit;border-bottom:1px solid;}
#flexi-content .caption.black a:hover {color: inherit;border-bottom:1px solid transparent;}
#flexi-content .caption.white {color: #fff;}
#flexi-content .caption.white a {color: #fff;border-bottom:1px solid #fff;}
#flexi-content .caption.white a:hover {color: #fff;border-bottom:1px solid transparent;}

#flexi-content .full-width .position-default.caption {padding-left:2.5vw;padding-right:2.5vw;}


#flexi-content .position-default.caption {margin-top:0.5em;text-align: left;}

#section-related {font-size: 0;line-height: 0;}
#section-related ul {list-style: none;margin: 0;padding: 0;line-height: 1.2;position: relative;}
#section-related ul li a {border-bottom: 1px solid transparent!important;}
#section-related ul li a:hover {opacity: 1!important;}
#section-related ul li img, #section-related ul li video {object-fit: cover;height: 100%;width: 100%;} 
#section-related .grid-inline .img-set {vertical-align: top;text-align: left;}
#section-related .grid-inline .caption {margin-top:0.5em;display: none;}
#section-related .grid-inline .grey {opacity: 0.25;}
#section-related .grid-inline .pre-title {margin-bottom:1em;}
#section-related .grid-inline .c-title {padding-right: 2.5vw;}
#section-related #block {padding-top:5vw;}
#section-related #block.default-width {padding: 0 2.5vw 5vw;}
#section-related .single-item.odd {margin-top:1vw;margin-bottom:5vw;}
#section-related .single-item.even {margin-top:1vw;margin-bottom:0;}



.position-center-center {position: absolute;top:0;left:0;right:0;bottom:0;z-index: 10;}
.position-center-center .c-t {display: table;height: 100%;width: 65%;margin: 0 auto;text-align: center;}
.position-center-center .c-tc {vertical-align: middle;display: table-cell;}

.position-center-left {position: absolute;top:0;left:0;right:inherit;bottom:0;z-index: 10;width:50%;}
.position-center-left .c-t {display: table;height: 100%;width: 65%;margin: 0 auto;}
.position-center-left .c-tc {vertical-align: middle;display: table-cell;}

.position-center-right {position: absolute;top:0;left:inherit;right:0;bottom:0;z-index: 10;width:50%;}
.position-center-right .c-t {display: table;height: 100%;width: 65%;margin: 0 auto;}
.position-center-right .c-tc {vertical-align: middle;display: table-cell;}

.position-top-center {position: absolute;top:12vw;left:0;right:0;bottom:0;z-index: 10;}
.position-top-center .c-t {display: table;height: 100%;width: 55%;margin: 0 auto;text-align: center;}
.position-top-center .c-tc {vertical-align: top;display: table-cell;}

.position-top-left {position: absolute;top:0;left:0;right:inherit;bottom:inherit;z-index: 10;width: 50%;}
.position-top-left .c-t {display: table;height: 100%;width: initial;margin: 0;padding:10vw;}
.position-top-left .c-tc {vertical-align: top;display: table-cell;}

.position-top-right {position: absolute;top:0;left:inherit;right:0;bottom:inherit;z-index: 10;width: 50%;}
.position-top-right .c-t {display: table;height: 100%;width: initial;margin: 0;padding:10vw;}
.position-top-right .c-tc {vertical-align: top;display: table-cell;}

.position-bottom-center {position: absolute;top:0;left:0;right:0;bottom:5vw;z-index: 10;}
.position-bottom-center .c-t {display: table;height: 100%;width: 55%;margin: 0 auto;text-align: center;}
.position-bottom-center .c-tc {vertical-align: bottom;display: table-cell;}

.position-bottom-left {position: absolute;top:inherit;left:0;right:inherit;bottom:0;z-index: 10;width: 50%;}
.position-bottom-left .c-t {display: table;height: 100%;width: initial;margin: 0;padding:10vw;}
.position-bottom-left .c-tc {vertical-align: bottom;display: table-cell;}

.position-bottom-right {position: absolute;top:inherit;left:inherit;right:0;bottom:0;z-index: 10;width: 50%;}
.position-bottom-right .c-t {display: table;height: 100%;width: initial;margin: 0;padding:10vw;}
.position-bottom-right .c-tc {vertical-align: bottom;display: table-cell;}

.position-top-left {position: absolute;top:0;left:0;right:inherit;bottom:inherit;z-index: 10;width: 50%;}
.position-top-left .c-t {display: table;height: 100%;width: initial;margin: 0;padding:10vw;}

.width-one-hundred .position-top-left, .width-one-hundred .position-top-right, .width-one-hundred .position-bottom-left, .width-one-hundred .position-bottom-right {width: 40%;}
.width-one-hundred .position-top-left .c-t, .width-one-hundred .position-top-right .c-t, .width-one-hundred .position-bottom-left .c-t, .width-one-hundred .position-bottom-right .c-t {padding:5vw;}

.default-width .position-top-left,
.default-width .position-top-right,
.default-width .position-bottom-right,
.default-width .position-bottom-left {width:35%;}

.default-width .position-top-left .c-t,
.default-width .position-top-right .c-t,
.default-width .position-bottom-right .c-t,
.default-width .position-bottom-left .c-t {padding:5vw;}

.sec-image img, .sec-video video, .sec-imageset img, .sec-imageset video {width:100%;height:auto;}


.wrapper {width:100%;}
.width-one-hundred .wrapper {width:100%;}
.width-ninety .wrapper {width:90%;}
.width-eighty-five .wrapper {width:85%;}
.width-seventy-five .wrapper {width:75%;}
.width-fifty .wrapper {width:50%;}

.align-left {text-align: left;}
.align-center {text-align: center;}
.align-right {text-align: right;}

.align-left .caption {text-align: left;}
.align-center .caption {text-align: left;}
.align-right .caption {text-align: left;}

.sec-imageseq .caption.width-one-hundred {width:100%;}
.sec-imageseq .caption.width-ninety {width:90%;}
.sec-imageseq .caption.width-eighty-five {width:85%;}
.sec-imageseq .caption.width-seventy-five {width:75%;}
.sec-imageseq .caption.width-fifty {width:75%;}

.sec-imageseq .caption.position-top-right,
.sec-imageseq .caption.position-top-left, 
.sec-imageseq .caption.position-center-right, 
.sec-imageseq .caption.position-center-left, 
.sec-imageseq .caption.position-bottom-right,
.sec-imageseq .caption.position-bottom-left
{width:50%!important;}

.sec-imageseq .caption.align-center {margin:0.5em auto 0;}
.sec-imageseq .caption.align-right {float:right;}
.sec-imageseq .caption.align-left {float:left;}

.sec-text.align-center .caption {width:75%;}
.sec-text .sub-msg {margin-bottom: 1em;text-align:right;line-height: 1;text-transform: capitalize;}
.sec-text .sub-msg p {display: inline-block!important;margin-bottom: 0!important;}
.sec-text .m {line-height: 1.2;}
.sec-text .m a {pointer-events: all;}
.sec-text .m ul {list-style: none;margin: 0;padding: 0;}
.sec-text .m ul li.nolink {opacity: 0.5;}
.sec-text .m ul li a {opacity: 0.5;}
.sec-text .m ul li a:hover {opacity: 1;}
.sec-text .m ul li.nolink {display: none;}
.sec-text .m ul li {display: inline-block;}
.sec-text .m ul li:after {content:" • ";margin-right:5px;opacity: 0.5;}
.sec-text .m ul li:last-child:after, .sec-text .m ul li.nolink:after {content:"";margin-right:0px;}

.content-text.meta-block .default-width {padding: 0 0 5vw;}
.content-text.meta-block .default-width .sub-title {padding: 0 5vw;text-align: left;}
.content-text.meta-block .default-width .sub-msg {padding: 0 5vw;text-align: left;}
.content-text.meta-block .default-width .relative {padding: 0 5vw;width: inherit;}
.content-text.meta-block .sec-text .m {position: relative;top:inherit;left:inherit;width: 75%;margin:2.5vw 0 0 0;}

.caption {text-align: left;}
.caption a {border-bottom:1px solid;}
.caption a:hover {border-bottom:1px solid transparent;}

.caption h1 {line-height: 1.3;}
.caption h2 {line-height: 1.3;}

.sec-text.align-center .relative {width:100%;text-align: left;display: inline-block;}
.sec-text.align-left .relative {width:50%;text-align: left;display: inline-block;}
.sec-text.align-right .relative {width:50%;text-align: right;display: inline-block;}

.grid-inline .img-set {width:50%;display: inline-block;vertical-align: middle;}
.grid-inline.default-width .img-set.odd .relative {padding-right:2.5vw;}
.grid-inline.default-width .img-set.even .relative {padding-left:2.5vw;}
.grid-inline.default-width .img-set .relative {padding-bottom:10vw;}
.grid-inline.default-width .img-set.odd.last .relative, .sec-imageset.default-width .img-set.odd.sec-last .relative {padding-bottom:0vw;}
.grid-inline.default-width .img-set.even.last .relative, .sec-imageset.default-width .img-set.even.sec-ast .relative {padding-bottom:0vw;}
.grid-inline.grid-inine {text-align: left;}

.grid-masonry {text-align: left;}
.grid-masonry .item-sizer, .grid-masonry .single-item {width:50%;vertical-align: top;display: inline-block;}
.grid-masonry .g-masonry {}
.grid-masonry.full-width .caption {margin:0 10vw 5vw;}
.grid-masonry.default-width .caption {margin:0 5vw 5vw 0;}
.grid-masonry.default-width .caption.sub {margin:0;}



/*
body.id-archive .single-item-padding {padding: 0 1vw!important;}
#projects-overview-archive .archive {padding:0 2.5vw;}
*/

/* Masonary Layout */
#projects-overview-archive .archive:after {content: '';display: block;clear: both; }
.single-sizer, body.id-archive .single-item {width:25%;}
body.id-archive .single-item {margin-bottom: 2vw!important;}
#projects-overview-archive .archive .single-item .single-item-padding {padding:0 1vw;}

.grid-masonry.full-width.sec-imageset .caption {margin:0 10vw 5vw;}

body.template-forkicks .grid-masonry.full-width.sec-imageset .caption {margin:5vw 2.5vw;}
body.template-forkicks .caption h1 {margin-bottom: 0.7em;}
body.template-forkicks .caption ul h1 {margin-bottom: 0;}
body.template-forkicks .caption h2 a {margin-left: 1.25em;position: relative;}
body.template-forkicks .caption h2 a:before {content: "↳";display: inline-block;margin-right: 0.5em;position: absolute;left:-1.25em;}
body.template-forkicks .last-section.content-imageset .caption {padding-bottom: 0px!important;}

#projects .grid-masonry {font-size: 0;line-height: 0;}
#projects .grid-masonry .single-item.width-100 {width:100%;}
#projects .grid-masonry .width-100 .cap-margin .caption {padding-left:2.5vw;}
#projects .grid-masonry .width-50 .cap-margin .caption {padding-left:2.5vw;}


#grid-m .grid-single-m.archive {}
#grid-m .grid-single-m.archive .project-thumb img {object-fit: contain;width: 75%;}
.grid-single-m.archive a {color: #fff;}
.grid-single-m.archive .meta {pointer-events: all;}

#projects .single-item.no-touch-archive {margin-bottom: 10vw;}

.site-intro {margin-bottom:0;text-align: left;background: #fff;}
.site-intro div {padding:0 20vw;}


#screensaver {
    -webkit-transition: background 1s ease-in-out;
  	-moz-transition: background 1s ease-in-out;
  	-o-transition: background 1s ease-in-out;
  	-webkit-transition: background 1s ease-in-out;
  	-ms-transition: background 1s ease-in-out;
    transition: background 1s ease-in-out;
    }

.default-width .position-top-left.sub, .default-width .position-top-right.sub, .default-width .position-bottom-right.sub, .default-width .position-bottom-left.sub {width:50%;}

.default-width .position-top-left.sub .c-t, .default-width .position-bottom-left.sub .c-t {padding:5vw 5vw 0 5vw;}
.default-width .position-top-right.sub .c-t, .default-width .position-bottom-right.sub .c-t {padding:5vw 0 5vw 5vw;}


.grid-masonry .g-image .relative, .grid-masonry .g-video .relative {padding-bottom:10vw;}
.grid-masonry .g-image.last .relative, .grid-masonry .g-video.last .relative,
.grid-masonry .g-image.sec-last .relative, .grid-masonry .g-video.sec-last .relative {padding-bottom:0;}
.grid-masonry .g-image.even .relative, .grid-masonry .g-video.even .relative {padding-left:10vw;}
.grid-masonry .g-image.odd .relative, .grid-masonry .g-video.odd .relative {padding-left:10vw;}
.grid-masonry .g-image.g-1 .relative, .grid-masonry .g-video.g-1 .relative {padding-left:0;}
.grid-masonry .g-image.g-4 .relative, .grid-masonry .g-video.g-4 .relative {padding-left:0;padding-right:10vw;}
.grid-masonry .g-image.g-5 .relative, .grid-masonry .g-video.g-5 .relative {padding-left:0;padding-right:0vw;}




.sec-imageset.grid-masonry-left .img-set:nth-child(4) .relative {margin-left:0;}



/* * Image Sequecnecs * */
.imgseq-p {position: relative;background:#f8f8f8;overflow: hidden;}
img.seq-i {object-fit: cover;height: 100%;width:100%;position: relative;left: inherit;opacity: 1;}
.imgseq .project-thumb {position: absolute;top:0;bottom:0;left:0;right:0;opacity: 0;z-index:0;
    -webkit-transition: opacity 0.4s ease-out;
  	-moz-transition: opacity 0.4s ease-out;
  	-o-transition: opacity 0.4s ease-out;
  	-webkit-transition: opacity 0.4s ease-out;
  	-ms-transition: opacity 0.4s ease-out;
    transition: opacity 0.4s ease-out;}
.imgseq .project-thumb.current {opacity: 1;z-index:1;
    -webkit-transition: opacity 0.4s ease-out;
  	-moz-transition: opacity 0.4s ease-out;
  	-o-transition: opacity 0.4s ease-out;
  	-webkit-transition: opacity 0.4s ease-out;
  	-ms-transition: opacity 0.4s ease-out;
    transition: opacity 0.4s ease-out;}


.r-seq .project-thumb {position: absolute;top:0;bottom:0;left:0;right:0;opacity: 0;z-index:0;
    -webkit-transition: opacity 0.4s ease-out;
  	-moz-transition: opacity 0.4s ease-out;
  	-o-transition: opacity 0.4s ease-out;
  	-webkit-transition: opacity 0.4s ease-out;
  	-ms-transition: opacity 0.4s ease-out;
    transition: opacity 0.4s ease-out;}
.r-seq .project-thumb.current {opacity: 1;z-index:1;
    -webkit-transition: opacity 0.4s ease-out;
  	-moz-transition: opacity 0.4s ease-out;
  	-o-transition: opacity 0.4s ease-out;
  	-webkit-transition: opacity 0.4s ease-out;
  	-ms-transition: opacity 0.4s ease-out;
    transition: opacity 0.4s ease-out;}

img.seq-i {opacity: 1;}


/* * PreLoad Image Sizes * */

.rel {position: relative;background:rgba(0,0,0,0.03);}
.rel img, .rel video {position: absolute;left:0;}
.roundEdge {overflow: hidden;border-radius: 5px;}
.lp {padding-bottom: 133%;}

body.template-flexi-page .default-width .rel, body.template-flexi-page .full-width.grid-masonry .rel {border-radius: 8px;overflow: hidden;}


/* * Navigation * */

#nav {position: absolute;bottom:5px;left:0;right:0;height: 85px;z-index:100;pointer-events:all;}
#nav .nav-wrap {padding:1vw 0;overflow: hidden;width:50%;margin:0 auto;}
#nav a {border-bottom:0px solid transparent;width:100%;}
#nav a:hover {border-bottom:0px solid transparent;cursor: pointer;}
#nav .t {width: 100%;}
#nav a span.pre, #nav a span.post {display: block;}

#nav .nav-wrap:hover a {
    -webkit-transform: translateY(-90px);
    transform: translateY(-90px);
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
}

#nav .nav-wrap a {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
}






#nav #post-title-next {position: absolute;left:0;right:0;text-align: center;display:block;white-space: nowrap;top: 90px;
-webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;}



body.touch .page-navigation #nav a span.post {display: inline-block;}
body.touch .page-navigation #nav a span.pre {display: none;}
body.touch .spacer {display: none;}
/* body.touch #single {margin-bottom:50vh;} */




body.no-touch .video-controls .right .fullscreen .touch {display:none;}
body.touch .video-controls .right .fullscreen .touch {display:block;padding:3px;background:rgba(0,0,0,0.1);border-radius: 10px;width:30px;}
body.touch .video-controls .right .fullscreen .no-touch {display: none;}
body.touch .video-controls .right {position: absolute; top:5px;right:5px;margin-right:0;}
body.touch .video-controls .left {display: none;}
body.touch .video-controls {bottom: inherit;top:0;}
body.touch .video-controls .right .fullscreen .touch svg {fill:#fff;height:20px;width:20px;transform:translateY(3px);}
body.touch .wrapper.clicked .video-controls {display: none;}




.section {
    position: absolute!important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}



.image img, .video video, #case-studies .image img, #case-studies .video video, .image .img, .image video {
	width: auto;
    max-width: 75%;
    max-height: 75%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0px!important;
    padding: 0px!important;
 }


.html div {
    padding: inherit!important;
    position: initial!important;    
}

.html div iframe {
    max-width: 75%!important;
    max-height: 75%!important;
    display: block!important;
    position: absolute!important;
    top: 50%!important;
    left: 50%!important;
    -webkit-transform: translate(-50%,-50%)!important;
    -moz-transform: translate(-50%,-50%)!important;
    -ms-transform: translate(-50%,-50%)!important;
    -o-transform: translate(-50%,-50%)!important;
    transform: translate(-50%,-50%)!important;
    margin: 0px!important;
    padding: 0px!important;
}

.full-screen-video{
   animation-fill-mode: none !important;
}



.image, .image-cover, .video, .video-cover {
    position:absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 0;
 }

.image-cover img, .video-cover video {
    object-fit: cover;
    width: 100%;
    height: 100%;
 }


.ankok-thumb-single {width:50%;}
.ankok-thumb-single .ankok-image img {width:100%;height: auto;}
.ankok-title {width:50%;}






/* * HTML5 Video Controls * */
.wrapper {position: relative;display:inline-block;}
.wrapper:hover .video-controls {opacity: 1!important;}

body.touch .video-controls {opacity: 1!important;}

video {z-index: 0;}
.video-controls {
    z-index:10;
    display: block;
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    width: 100%;
    color: #fff;
    line-height: 1em;
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.video-controls .i {
    float: left;
    cursor: pointer !important;
    border-bottom: 0;
    margin-bottom: 3vh;
}
.i.play {width: 3.5em;text-align: left;}

.video-controls .left {margin-left:3vh;}
.video-controls .right {margin-right:3vh;}





/* * iOS Fix * */
body.touch #cursor {display: none!important;}
body.iphone #hero, body.ipad #hero {height: calc(100vh - 70px);}




/* * Mega Text * */
@media screen and (max-width: 1280px), screen and (max-height: 800px) { 
    .mega {font-size: 120px;}
    
}

@media screen and (max-width: 1023px), screen and (max-height: 600px) { 
    ul#fs-menu li {padding:0 5vw;}
    .mega {font-size: 80px;}
    
}

@media screen and (max-width: 767px), screen and (max-height: 400px) { 
    .mega {font-size: 60px;}
    
}





/* Cookie Dialog */
#gdpr-cookie-message {
    position: fixed;
    z-index: 444;
    right: 0;
    left:0;
    bottom: 20px;
    color:#999;
    margin: 0 5vw;
}
.cookies-txt {
    display: inline-block;
    background: rgba(0,0,0,.03);
    vertical-align: middle;
    max-width: 550px;
    margin:0 auto;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 5px 20px;
    border-radius: 35px;
}
#gdpr-cookie-message h4 {

}
#gdpr-cookie-message h5 {

}
#gdpr-cookie-message p, #gdpr-cookie-message ul {
    font-size: 18px;
}
#gdpr-cookie-message ul {
    margin-top: 15px;
}
#gdpr-cookie-message p:last-child {
    margin-bottom: 0;
}
#gdpr-cookie-message li {
    width: 49%;
    display: inline-block;
    margin-bottom: 0.5em;
}
#gdpr-cookie-message a {
    text-decoration: none;
    color: #999;
    border-bottom: 1px solid transparent;
    transition: all 0.04s ease-in;
}
#gdpr-cookie-message a:hover {
    border-bottom: 1px solid;
    transition: all 0.04s ease-in;
}
#gdpr-cookie-message button,
button#ihavecookiesBtn {
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in;
    vertical-align: middle;
}

#gdpr-cookie-accept {
    color: #999;
    background: none;
    transition: all 0.2s ease-in;
    margin-left:10px;
}
#gdpr-cookie-accept:hover {
    background: none;
    color: #999;
    opacity: 0.5;
}
button#gdpr-cookie-advanced {
    background: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.5);
}
button#gdpr-cookie-advanced:hover {
    background: rgba(0,0,0,0.2);
    color: rgba(0,0,0,1);
}

#gdpr-cookie-message button:disabled {
    opacity: 0.5;
}
#gdpr-cookie-message input[type="checkbox"] {
    float: none;
    margin-top: 0;
    margin-right: 5px;
}





/* * @media  * */

@media screen and (max-width: 1500px) { 
    .single-sizer, body.id-archive .single-item {width:33.333%;}
    #projects-overview .archive .single-item {width: 33.333%;}
    #news-overview .single-item {width: 33.333%;}
    #projects-overview .archive .single-item .single-item-padding {margin:0 2.5vw 10vw;}
    #related-type #projects-overview-archive .archive .single-item {width:33.333%;}
    #related-type #projects-overview-archive .archive .single-item .single-item-padding {padding: 0 2.5vw 0;margin:0;}
}

@media screen and (max-width: 1439px) { 
    .grid-single.featured .container {padding-top:50%;}
    .t {width:75%;}
}

@media screen and (max-width: 1280px) {
    
}

@media screen and (max-width: 1023px) {
    #hero-projects .block {height: 100vh;}
    .content-text.meta-block .sec-text .m {width: 100%;}
    #profile .sec-inner {padding: 12.5vw 5vw 5vw;}
    #hero-projects .block .i {max-width: 500px;}
    body.template-careers-overview .sec-inner p {max-width: 100%;}
    #section-related #block.default-width {padding: 0 2.5vw 5vw;}
    #related-type h1 {margin:0 5vw 0.5em;}
    #related-type h2 {margin:0 5vw 5vw;}
    #footer .footerinner {padding: 5vw;}
    body.template-forkicks .grid-masonry.full-width.sec-imageset .caption {margin:5vw 5vw;}
    #profile .sec-inner h2 {max-width: 100%;}
    #studio-approach-alt .main-title {padding: 0 5vw;}
    #studio-approach-alt .p .p-i .p-i-s {width: inherit;display: block;vertical-align: top;padding: 0 5vw;}
    #studio-approach-alt .p .p-i .p-i-s:first-child {margin-bottom: 5vw;}
    #studio-approach-alt .p .p-i .inner {padding: 0 2.5vw 5vw;white-space:normal;}
    #profile .studio-img .single-item:nth-child(1) {padding-left: 5vw;}
    #profile .studio-img .single-item:last-child {padding-right: 5vw;}
    #profile .studio-img .single-item.portrait {width: 50vw;}
    #profile .studio-img .single-item.landscape {width: 65vw;}
    #profile .studio-img .single-item.square {width: 50vw;}
    .content-text.meta-block .default-width {margin-top:0;}
    #studio-approach #ab .ab-body .hidden {display: block;}
    .sticky-offset {display: none;}
    #contact .sec-inner h1 {font-size:40px;}
    #contact .sec-inner h2 {font-size:22px;}
    .one-thirds {width: 100%;margin-bottom: 1em;}
    .one-thirds .address {margin-top: 0;}
    .locations .timezone {margin-top:0px;}
    .locations .one-thirds {margin-bottom: 2em;}
    #footer-work .footerinner, #footer-contact .footerinner {padding:5vw 5vw;}
    #contact .sec-inner, #single-job .sec-inner {padding: 12.5vw 5vw 5vw;}
    #news-overview .single-item {width: 50%;}
    #services li {width: 50%;}
    #clients .sec-inner, #services .sec-inner {padding: 5vw;}
    #studio-approach #ab .inner {padding:0 5vw;}
    #studio-approach #ab .ab-title {position: relative;width: inherit!important;margin-bottom: 1em;}
    #studio-approach #ab .ab-body {margin: 0 auto;}
    #section-related #block {padding:10vw 10vw 10vw;}
    #projects-overview .archive .single-item, #related-type #projects-overview-archive .archive .single-item {width: 50%;}
    .single-sizer, body.id-archive .single-item {width:50%;}
    body.id-archive .single-item {width:50%!important;margin-bottom: 2vw!important;}
    #news-intro #cover {margin: 0 10vw;}
    #news-intro #cover .vis {width: 100%;}
    #filters-sub {margin:0 auto;}
    .type-label {position:relative;margin:0 0 0 5vw;}
    #news-overview:hover .news-item a {opacity: 1;}
    #news-overview .news-item .rel {display: block;}
    #news-overview .news-item a {padding: 0 5vw 10vw;}
    #capabilities-thumbs {display: none;}
    #filters-type, #filters-industry, #filters-expertise {margin:0 -2.5vw;}
    #filters-type ul, #filters-industry ul, #filters-expertise ul {white-space: nowrap;overflow-x: scroll;padding: 15px 5vw;}
    #flexi-content .addmargintop {padding-top:0px;}
    .content-text.meta-block .default-width .sub-title {padding: 0 5vw;}
    .content-text.meta-block .default-width .sub-msg {padding: 0 5vw;}
    .content-text.meta-block .sec-text.align-center .caption {width:100%;margin:0 auto;}
    
    .width-ninety .wrapper {width:100%;}
    .width-eighty-five .wrapper {width:100%;}
    .width-seventy-five .wrapper {width:100%;} 
    .width-fifty .wrapper {width:100%;}
    /* #cover, .msg {height: 80vh;}
    .mega {line-height: 16vh;}
    .mega li {height: 16vh;}*/
    #related-type #projects-overview-archive .archive .single-item {width:50%;}
    .sec-text.align-center .caption {width:100%;margin:0 auto;}
    #projects .caption {padding-top:1.5vw}
    .byline {margin-top:0;opacity: 1;}
    #id-showreel .rel:after {content:"";position: absolute;top:0;bottom:0;left:0;right:0;background: rgba(0,0,0,0.04);pointer-events: none;}
    #projects-overview-archive {padding-top: 12.5vh;}
    #projects.showreel-active #projects-overview {padding-top: 12.5vh;}
    #projects #projects-overview {padding-left: 2.5vw; padding-right:2.5vw;}
    #projects-overview {padding-top: 15vw;}
    .pt #post-title-home {top: 50px;}
    .pt .pt-wrap:hover .pt #post-title-home {-webkit-transform: translateY(-50px);transform: translateY(-50px);}
    .pt .pt-wrap:hover a#post-title {-webkit-transform: translateY(-50px);transform: translateY(-50px); }
    .pt {height:55px;}
    #flexi-content .nav {display:none;}
    #flexi-content .nav {height:inherit;top:inherit;}
    .rbutton {padding: 5px 20px;}
    a#menu-link {width:28px;}
    #single.studio .col.text .inner-col {margin: 0 5vw;}
    #single.studio .col.vis.right .inner-col {margin-right:0;margin-left:5vw;}
    #single.studio .float-topleft {float:none;margin-left:0;padding:0;margin-bottom:5vw;display: block;}
    body.menu-open #header.text-black a {color: #000000!important;}
    body.no-project-active.menu-open #header.text-white a {color: #000000!important;}
    body.article-inactive.id-projects.menu-open #header.text-white a {color: #000000!important;}
    #touch {display: block;}
    #no-touch {display: none;}
    #projects .grid-masonry .caption {margin-top:0;}
    #projects .grid-masonry .width-100 .cap-margin .caption {padding-left:0vw;}
    #projects .grid-masonry .width-50 .cap-margin .caption {padding-left:0vw;}
    #projects {padding: 0;}
    .grid-single.featured .container {padding-top:70%;}
    h1, h2, .medium, .large, input {font-size:22px;}
    .x-large {font-size:40px;}
    #mc_embed_signup div.mce_inline_error {font-size:22px!important}
    .caption h1, .caption h2 {font-size:18px!important;text-align:left!important;line-height:1.4!important;}
    .caption h1:last-child , .caption h2:last-child {margin-bottom:0;}
    #case-studies .grid .thumb-single {width:25%;height: 25vw;}
    #case-studies .grid .thumb-single {width:50%;height: 50vw;}
    .t {width:85%;}
    #header a .hide {width:0;opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out 0s, width 0.4s ease-out;
  	-moz-transition: opacity 0.2s ease-in-out 0s, width 0.4s ease-out;
  	-o-transition: opacity 0.2s ease-in-out 0s, width 0.4s ease-out;
  	-webkit-transition: opacity 0.2s ease-in-out 0s, width 0.4s ease-out;
  	-ms-transition: opacity 0.2s ease-in-out 0s, width 0.4s ease-out;
    transition: opacity 0.2s ease-in-out 0s, width 0.2s ease-out;
    }
    body.menu-open #header a .hide {opacity: 1;
    -moz-transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;
  	-o-transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;
  	-webkit-transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;
  	-ms-transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;
    transition: opacity 0.2s ease-in-out 0.2s, width 0.4s ease-out;}
    body.menu-open #header a .b {width:5px;}
    body.menu-open #header a .ew {width:28px;}
    body.menu-open #header a .ind {width:31px;}
    body.menu-open #header a .f {width:11px;}
    body.menu-open #header a .ick {width:23px;}
    
    #flexi-content .pt, #projects .title {
    -webkit-transition: opacity 0.2s ease-in-out 0.2s;
  	-moz-transition: opacity 0.2s ease-in-out 0.2s;
  	-o-transition: opacity 0.2s ease-in-out 0.2s;
  	-webkit-transition: opacity 0.2s ease-in-out 0.2s;
  	-ms-transition: opacity 0.2s ease-in-out 0.2s;
    transition: opacity 0.2s ease-in-out 0.2s;
    opacity: 1;}
    body.article-inactive.menu-open #flexi-content .pt, body.article-inactive.menu-open #projects .title, body.article-active #projects .title {opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;}
    
    body.id-home.screensaver-inactive.projects-active-m #header, body.id-home.screensaver-inactive.projects-active-m #header a {color: #fff!important;}
    body.menu-open.projects-active-m #header.text-white a {color: #ffffff!important;}
    body.menu-open.projects-active-m #header.text-black a {color: #000000!important;}
    
    body.id-home #header.text-black a {color: #fff!important;}
    #footer {border-top:0px solid #000;}
    
    .sec-imageset .img-set {width:100%;}
    .sec-imageset.default-width .img-set.odd .relative {margin-right:0;}
    .sec-imageset.default-width .img-set.even .relative {margin-left:0;}
    .sec-imageset.default-width .img-set .relative {margin-bottom:0;}
    .full-width.grid-inline, .default-width.grid-inline {padding:0;}
    #flexi-content .full-width.grid-inline .single-item .relative, #flexi-content .default-width.grid-inline .single-item .relative {padding:0 5vw 5vw!important;}
    #flexi-content .nomarginbottom.sec-image, #flexi-content .nomarginbottom.sec-video {padding:0 5vw 5vw!important;}
    
}

@media screen and (max-width: 767px) {
    #related-type #projects-overview-archive .archive .single-item .single-item-padding {padding: 0 5vw 0;margin:0;}
    #section-related .single-item.odd {margin-top:0;margin-bottom:0;}
    #section-related .single-item.even {margin-top:0;margin-bottom:0;}
    #section-related .grid-inline .pre-title {margin-bottom:0.5em;}
    .ankok {position: fixed!important;top: 0!important;width: 75%!important;}
    .sec-text .sub-msg {text-align: left;}
    #section-related #block.default-width {padding: 0 5vw 5vw;}
    #hero-projects .block .i {max-width: 700px;}
    .thumb-scroll img, .thumb-scroll video {
        max-height: 80%;
        max-width: 80%;
    }
    .thumb-scroll .hero-byline {position: absolute;left:5vw;right:5vw;top:5vw;}
    .thumb-scroll .hero-link {position: absolute;left:5vw;right:5vw;bottom:5vw;display: inline-block;}
    #hero-projects .block .i {padding: 5vw;}
    #footer .footerinner .col {width: 100%;margin-bottom:1em;}
    #footer .footerinner .col:last-child {margin-bottom: 0px;}
    #footer .small {margin-top: 0;}
    body.template-forkicks .grid-masonry.full-width.sec-imageset .caption {margin:5vw!important;}
    body.template-forkicks .full-width, body.template-forkicks .default-width {padding:0!important;}
    body.template-forkicks .first .full-width {padding:0!important;}
    body.template-forkicks .first .full-width .caption {padding: 0;margin-bottom: 0!important;}
    body.template-forkicks .g-masonry .spacer {display: none!important;}
    #studio-approach-alt .p {padding: 0; white-space: normal;overflow-y: none;}
    #studio-approach-alt .p .p-i .inner {padding: 0 5vw 10vw;}
    #studio-approach-alt .p .p-i:last-child .inner {padding: 0 5vw 0;}
    #profile .studio-img .single-item.portrait {width: 60vw;}
    #profile .studio-img .single-item.landscape {width: 75vw;}
    #profile .studio-img .single-item.square {width: 50vw;}
    #hero-projects .hero-project-inner a.default-size {width: 100%;}
    #hero-projects .hero-project-inner a.default-size .block {padding: 0 5vw 5vw;}
    #hero-projects .hero-project-inner a.large-size .block {padding: 0 5vw 5vw;}
    .intro-stat {padding: 10vw 5vw;}
    .intro-stat span, .studio-stat span {display: inline;}
    .content-text.meta-block .default-width .sub-title {padding: 0 5vw;}
    .content-text.meta-block .default-width .sub-msg {padding: 0 5vw;text-align: left;}
    #flexi-content .meta-block .relative {padding: 0 5vw!important;}
    #studio-approach .related-work .single-item {width: 100%;}
    .service {line-height: 2.5!important;}
    #clients .imgseq {width: 100%;}
    #clients .imgseq {margin: 0!important;}
    #projects-overview .archive .single-item .single-item-padding, #news-overview .single-item .single-item-padding {margin:0 5vw 10vw;}
    #news-overview .single-item {width: 100%;}
    #services li {width: 100%;}
    #section-related #block {padding:10vw 5vw 10vw;}
    #section-related .grid-inline .img-set {width:100%;}
    #section-related .grid-inline .c-title {display: none;}
    #section-related .grid-inline .caption {display: block;margin-top:0.5em!important;}
    #projects-overview .archive .single-item, #related-type #projects-overview-archive .archive .single-item {width: 100%;}
    #news-intro .hd {margin: 0 5vw;}
    #news-intro #cover {margin: 0 5vw;}
    #news-intro {margin-bottom: 5vw;}
    #news-intro .news-t {margin-bottom: 1em;}
    #news-intro .news-a {position:relative;}
    #news-intro .news-d {position:relative;margin-bottom: 5vw;}
    body.touch #news-overview .news-item, #news-overview .news-item {width: 100%;display: block;}
    ul#small-menu li{    margin:0 5px;display: block;}
    .bottom {bottom: 5vw}
    #projects #projects-overview {padding-left: 0; padding-right:0;}
    #related-type .archive {margin:0;}
    #flexi-content .relative {padding:0!important;margin: 0!important;display: block;}
    #header-reel img, #header-reel video {max-width: 100%;max-height: 100%;}
    #id-archive p {text-align: left;}
    .archive-text {display: none;}
    .pt #post-title-home {top: 45px;}
    .pt .pt-wrap:hover .pt #post-title-home {-webkit-transform: translateY(-45px);transform: translateY(-45px);}
    .pt .pt-wrap:hover a#post-title {-webkit-transform: translateY(-45px);transform: translateY(-45px); }
    .pt {height:45px;}
    a#menu-link {width:28px;}
    .fade-in-s, .fade-in-i {
        -webkit-animation-delay:0.5s!important;
        -moz-animation-delay:0.5s!important;
        -o-animation-delay:0.5s!important;
        animation-delay:0.5s!important;
    }
    .caption {width: auto;}
    section#capabilities {padding-bottom: 10vw!important;}
    #ankok-projects .intro .title {text-align: left;}
    
    .caption p {text-align: left!important;}
    #projects {border-bottom:0px solid;}
    .sec-imageseq .caption.position-top-right,
    .sec-imageseq .caption.position-top-left, 
    .sec-imageseq .caption.position-center-right, 
    .sec-imageseq .caption.position-center-left, 
    .sec-imageseq .caption.position-bottom-right,
    .sec-imageseq .caption.position-bottom-left
    {width:auto!important;}
    #single.studio .padding {padding:15vw 0 10vw;}
    #single.studio .col {width:100%;}
    #single.studio .s-caption {font-size:16px;line-height: 1.2;margin: 0.5em 0 0 0!important;}
    #ankok-projects .title {padding-top:10vw;}
    #single .section-block {padding: 10vw 0 0 0;}
    #single.studio .col.vis.right .inner-col {margin-right:0;margin-left:0;}
    #single.studio .block .caption.m-npb {padding: 0;}
    #single.studio .imgseq {margin:0 5vw;}
    #single.studio #profile.default-width {padding: 0 5vw 10vw;}
    #single.studio .default-width {padding: 0 5vw 5vw;}
    #single.studio #profile.block .caption.m-npb {padding: 0;}
    #profile-body .title {padding-top: 10vw;}
    #single.studio .col.text .inner-col.m-npt {padding-top:0px;}
    #single.studio .col.text .inner-col {margin: 0px;padding:10vw 5vw;}
    #single.studio .col.vis .inner-col {margin: 0px;}
    #single.studio .hover-links {text-align: left;}
    #single.studio .last-section .caption {padding-bottom:0;}
    .copywrite {margin-top:10vw;}
    .si .t {width: 70%;}
    .sec-text.align-right .relative, .sec-text.align-left .relative {display: block;}
    #projects .single-item {margin-bottom:0;}
    #case-studies .grid .thumb-single {width:100%;height: 100vw;}
    h1, h2, .medium, .large, input {font-size:22px;line-height: 1.2;}
    .x-large {font-size:40px;}
    body.template-news-page .x-large {font-size:22px;line-height: 1.2;}
    #footer .medium {line-height: 1.3;}
    #mc_embed_signup div.mce_inline_error {font-size:18px!important}
    .caption h1, .caption h2 {font-size:18px!important;text-align:left!important;line-height:1.4!important;}
    .image img, .video video {max-width: 95%;max-height: 70%;}
    #description .services {margin-bottom: 0px;}
    #description ul {width:100%;display:block;margin-bottom: 3em;}
    .ankok-thumb-single, .ankok-title {width:100%;}
    #grid .regular:nth-child(odd) .padding {margin-right:0px;}
    #grid .regular:nth-child(even) .padding {margin-left:0px;}
    #grid .regular:nth-child(even) .padding {margin-left:0px;}
    #grid .regular {width: 100%;}
    .grid-single .image img.primary, .grid-single .image img.secondary, .grid-single .image video.primary, .grid-single .image video.secondary {max-width: 90%!important;max-height:90%!important;}
    .grid-single .title {margin-top:15px;}
    .grid-single {margin-bottom:60px;}
    #footer .footerinner {padding:5vw 5vw;}
    .hint {text-align: left;left:5vw;right:5vw;bottom:5vw;}
    .hint .l {float: none;position: relative;padding-left:0;}
    .hint .r {float: none;position: relative;padding-right:0;}
    .hint .l .arrow {left:0;}
    span.counter, span.total {width: 20px;}
    span.counter.slide-1,
    span.counter.slide-2,
    span.counter.slide-3,
    span.counter.slide-4,
    span.counter.slide-5,
    span.counter.slide-6,
    span.counter.slide-7,
    span.counter.slide-8,
    span.counter.slide-9 {width: 10px;}
    
    
    /* * Primary Bottom - Secondary Right * */
    .image.primary-align-bottom.secondary-align-right img.primary, .image.primary-align-bottom.secondary-align-right video.primary {
        left:0%!important;
        top:100%!important;
        -webkit-transform: translate(0%,-100%)!important;
        -moz-transform: translate(0%,-100%)!important;
        -ms-transform: translate(0%,-100%)!important;
        -o-transform: translate(0%,-100%)!important;
        transform: translate(0%,-100%)!important;
    }
    .image.primary-align-bottom.secondary-align-right img.secondary, .image.primary-align-bottom.secondary-align-right video.secondary {
        left: 100%!important;
        top:0%!important;
        -webkit-transform: translate(-100%,0%)!important;
        -moz-transform: translate(-100%,0%)!important;
        -ms-transform: translate(-100%,0%)!important;
        -o-transform: translate(-100%,0%)!important;
        transform: translate(-100%,0%)!important;
    }
    
    /* * Primary Bottom - Secondary Left * */
    .image.primary-align-bottom.secondary-align-left img.primary, .image.primary-align-bottom.secondary-align-left video.primary {
        left:100%!important;
        top:100%!important;
        -webkit-transform: translate(-100%,-100%)!important;
        -moz-transform: translate(-100%,-100%)!important;
        -ms-transform: translate(-100%,-100%)!important;
        -o-transform: translate(-100%,-100%)!important;
        transform: translate(-100%,-100%)!important;
    }
    .image.primary-align-bottom.secondary-align-left img.secondary, .image.primary-align-bottom.secondary-align-left video.secondary {
        left: 0%!important;
        top:0%!important;
        -webkit-transform: translate(0%,0%)!important;
        -moz-transform: translate(0%,0%)!important;
        -ms-transform: translate(0%,0%)!important;
        -o-transform: translate(0%,0%)!important;
        transform: translate(0%,0%)!important;
    }
    
    /* * Primary Top - Secondary Right * */
    .image.primary-align-top.secondary-align-right img.primary, .image.primary-align-top.secondary-align-right video.primary {
        left:0%!important;
        top:0%!important;
        -webkit-transform: translate(0%,0%)!important;
        -moz-transform: translate(0%,0%)!important;
        -ms-transform: translate(0%,0%)!important;
        -o-transform: translate(0%,0%)!important;
        transform: translate(0%,0%)!important;
    }
    .image.primary-align-top.secondary-align-right img.secondary, .image.primary-align-top.secondary-align-right video.secondary {
        left: 100%!important;
        top:100%!important;
        -webkit-transform: translate(-100%,-100%)!important;
        -moz-transform: translate(-100%,-100%)!important;
        -ms-transform: translate(-100%,-100%)!important;
        -o-transform: translate(-100%,-100%)!important;
        transform: translate(-100%,-100%)!important;
    }
    
    /* * Primary Top - Secondary Left * */
    .image.primary-align-top.secondary-align-left img.primary, .image.primary-align-top.secondary-align-left video.primary {
        left:100%!important;
        top:0%!important;
        -webkit-transform: translate(-100%,0%)!important;
        -moz-transform: translate(-100%,0%)!important;
        -ms-transform: translate(-100%,0%)!important;
        -o-transform: translate(-100%,0%)!important;
        transform: translate(-100%,0%)!important;
    }
    .image.primary-align-top.secondary-align-left img.secondary, .image.primary-align-top.secondary-align-left video.secondary {
        left: 0%!important;
        top:100%!important;
        -webkit-transform: translate(0%,-100%)!important;
        -moz-transform: translate(0%,-100%)!important;
        -ms-transform: translate(0%,-100%)!important;
        -o-transform: translate(0%,-100%)!important;
        transform: translate(0%,-100%)!important;
    }
    
    
    
    .page-navigation #nav a span.post {display: inline-block;}
    .page-navigation #nav a span.pre {display: none;}
    
    .sticky-element {z-index:100;}
    .sticky-element .rbutton {margin-top:10vw;margin-left:1vw;}
    
    #header .r.no-touch {display: none;}
    #header .r.touch {display: inline-block;}
    
    .l {padding-left:5vw;}
    .r {padding-right:5vw;}
    
    
    
    #single .section-block .text-block {padding:0 5vw;}
    
    .full-width, .default-width {padding:0 5vw 5vw;}
    .default-width.sec-text {padding:5vw 5vw 10vw;}
    #flexi-content .full-width.grid-inline .single-item .relative, #flexi-content .default-width.grid-inline .single-item .relative {padding:0 5vw 5vw!important;}
    #flexi-content .nomarginbottom.sec-image, #flexi-content .nomarginbottom.sec-video {padding:0 5vw 5vw!important;}
    .caption {position: relative!important;top:inherit!important;bottom:inherit!important;left:inherit!important;right:inherit!important;padding:0;width:inherit!important;margin:0!important;}
    .caption.position-default {padding-top:1em;padding-bottom: 0;}
    /* #projects .caption {padding:1.5vw 0 20vw;} */
    .grid-inline.default-width .img-set.odd .relative, .grid-inline.default-width .img-set.even .relative {padding:0;}
    .site-intro div {padding:0 5vw 20vw;}
    .content-text.first .caption {padding:0;}
    .c-t {width:100%!important;text-align: left!important;padding:0px!important;}
    .sec-text .relative {width: inherit!important;}
    .reset {line-height:1.4!important;font-size:18px;}
    #single.studio .medium, #single.studio .large, #single.studio .reset {line-height:1.2;font-size:22px;}
    
    #flexi-content.w-headline .content-text.first .caption {padding:20vw 5vw 0;}
    #flexi-content.w-headline .second .touch-intro.caption.intro {padding-top:10vw;}

    .first .full-width {padding:0 0 5vw!important;}
    .first .full-width .caption {padding:10vw 5vw 1em;margin-bottom: -10vw!important;display: none;}

    body.template-forkicks .first .full-width .caption {display: block;}

    
   
    
    /*.touch-title, .touch-intro{display: block;}
    .post-title, .post-intro {display: none;}*/
    
    .touch-intro{display: block;}
    .post-intro {display: none;}
    
    
    #flexi-content #nav .medium {font-size:16px;}
    
    .second.content-text .caption:nth-child(1) {padding-bottom: 0;padding-top: 0;}
    .second.content-text .caption:nth-child(2) {padding-top:0;} 
    
    .last-section .caption {}
    .last-section.content-imageset .caption {padding-bottom: 10vw;}
    .last-section.content-imageset .last .caption {}
    
    #flexi-content .full-width .position-default.caption {margin-top:0;padding-left:10vw;padding-right:10vw;}
    
    #single.text-black #flexi-content .caption.white {color: #000000;}
    #single.text-black #flexi-content .caption.black {color: #000000;}
    #single.text-white #flexi-content .caption.white {color: #ffffff;}
    #single.text-white #flexi-content .caption.black {color: #ffffff;}
    
    
    
    #projects .single-item .relative {padding:0 5vw!important;margin:0!important;}
    #article .g-video .relative {padding:0!important;}
    
    .item.layout-inline img, .item.layout-inline video {
    max-height: 75%;
    max-width: 75%;
    }
    
    .item.align-left .vis, .item.align-right .vis {
    position: absolute!important;
    top: 0;
    bottom: 0;
    left: 0;
    width:100%;
    right:0;
    }

    
    
    
}



/* Dots */



@-moz-keyframes dotmove {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    10% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
    20% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes dotmove {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    10% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
    20% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes dotmove {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    10% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
    20% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}




.dot1 {
    animation:dotmove 1.5s;
    -moz-animation:dotmove 1.5s infinite; /* Firefox */
    -webkit-animation:dotmove 1.5s infinite; /* Safari and Chrome */
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.dot2 {
    animation:dotmove 1.5s;
    -moz-animation:dotmove 1.5s infinite; /* Firefox */
    -webkit-animation:dotmove 1.5s infinite; /* Safari and Chrome */
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    
}

.dot3 {
    animation:dotmove 1.5s;
    -moz-animation:dotmove 1.5s infinite; /* Firefox */
    -webkit-animation:dotmove 1.5s infinite; /* Safari and Chrome */
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -moz-animation-delay: .6s;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}






/* Fade In */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    	opacity:0;  /* make things invisible upon start */
    	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation:fadeIn ease-in 1;
    	animation:fadeIn ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.4s;
    	-moz-animation-duration:0.4s;
    	animation-duration:0.4s;

        -webkit-animation-delay:1s;
        -moz-animation-delay:1s;
        -o-animation-delay:1s;
        animation-delay:1s;

}

.fade-in-s {
    	opacity:0;  /* make things invisible upon start */
    	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation:fadeIn ease-in 1;
    	animation:fadeIn ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.2s;
    	-moz-animation-duration:0.2s;
    	animation-duration:0.2s;

        -webkit-animation-delay:2s;
        -moz-animation-delay:2s;
        -o-animation-delay:2s;
        animation-delay:2s;

}

.fade-in-i {
    	opacity:0;  /* make things invisible upon start */
    	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation:fadeIn ease-in 1;
    	animation:fadeIn ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.4s;
    	-moz-animation-duration:0.4s;
    	animation-duration:0.4s;

        -webkit-animation-delay:0.5s;
        -moz-animation-delay:0.5s;
        -o-animation-delay:0.5s;
        animation-delay:0.5s;

}

.fade-in-h {
    	opacity:0;  /* make things invisible upon start */
    	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation:fadeIn ease-in 1;
    	animation:fadeIn ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.4s;
    	-moz-animation-duration:0.4s;
    	animation-duration:0.4s;

        -webkit-animation-delay:3s;
        -moz-animation-delay:3s;
        -o-animation-delay:3s;
        animation-delay:2s;

}



/* Fade Out */
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
 
.fade-out {
    	opacity:1;  /* make things invisible upon start */
    	-webkit-animation:fadeOut ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation:fadeOut ease-in 1;
    	animation:fadeOut ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.2s;
    	-moz-animation-duration:0.2s;
    	animation-duration:0.2s;

        -webkit-animation-delay:2s;
        -moz-animation-delay:2s;
        -o-animation-delay:2s;
        animation-delay:2s;

}



.fade-out-h {
    	opacity:1;  /* make things invisible upon start */
    	-webkit-animation:fadeOut ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation:fadeOut ease-in 1;
    	animation:fadeOut ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.2s;
    	-moz-animation-duration:0.2s;
    	animation-duration:0.2s;

        -webkit-animation-delay:3s;
        -moz-animation-delay:3s;
        -o-animation-delay:3s;
        animation-delay:2s;

}


/* Scrolling */
@-webkit-keyframes a {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

@keyframes a {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}