/* Theme Name: SFF-2018 Author: duckbox Author URI: http://twitter.com/duckbox Description: Private theme for SFF License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: sff-2018 */
 body {
     background:#000;
     padding-top:80px;
}
 @font-face {
     font-family: 'AvenirBook';
     src: url('fonts/Avenir-Book.eot');
     src: url('fonts/Avenir-Book.eot?#iefix') format('embedded-opentype'), url('fonts/Avenir-Book.woff') format('woff'), url('fonts/Avenir-Book.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'AvenirBlack';
     src: url('fonts/Avenir-Black.eot');
     src: url('fonts/Avenir-Black.eot?#iefix') format('embedded-opentype'), url('fonts/Avenir-Black.woff') format('woff'), url('fonts/Avenir-Black.ttf') format('truetype');
     font-weight: 900;
     font-style: normal;
}
 @font-face {
     font-family: 'AvenirBlackOblique';
     src: url('fonts/Avenir-BlackOblique.eot');
     src: url('fonts/Avenir-BlackOblique.eot?#iefix') format('embedded-opentype'), url('fonts/Avenir-BlackOblique.woff') format('woff'), url('fonts/Avenir-BlackOblique.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'AvenirRoman';
     src: url('fonts/Avenir-Roman.eot');
     src: url('fonts/Avenir-Roman.eot?#iefix') format('embedded-opentype'), url('fonts/Avenir-Roman.woff') format('woff'), url('fonts/Avenir-Roman.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}
@font-face {
    font-family: 'enamelbase';
    src: url('fonts/enamel-base-webfont.woff2') format('woff2'),
         url('fonts/enamel-base-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
 #sff-main-header {
     position:absolute;
     background-color:#fff;
     width:100%;
     left:0;
     top:0;
     z-index:2;
     font-size:25px;
}
 #sff-main-header .row {
     height:80px;
}
 .img-logo {
     width:122px;
}
.sff-strapline h2 {
    font-size: 20px;
    font-weight: 100;
    text-align:center;
}
 .menu-hook {
     cursor: pointer;
}
 .navigation-list {
     position:absolute;
     left:0;
     background:#000;
     /*transform: skewX(-5deg);*/
     /*height:calc(100% - 80px);*/
     top:80px;
     /*width:calc(100% - 60px);*/
     height:calc(100%);
     padding-bottom:80px;
     width:100%;
     font-family:'AvenirBlackOblique';
     font-size:80px;
     z-index:9;
     visibility: hidden;
    
    font-family: 'enamelbase';
    font-size:200px;
    line-height: 158px;
    font-size: 20vh;
    line-height: 15vh;
    text-transform:uppercase;
    text-align:center;
    opacity:0;
    transition:.5s opacity ease-in;
}
 .navigation-list.show {
     visibility: visible;
     opacity:1;
}
 .navigation-list a {
    color:#fff;
    transition:.3s color ease;
}
/*.navigation-list:hover a {
    color:#444 !important;
}*/

 .navigation-list a:hover {
     text-decoration:none;
     color:#fff !important;
}

 .navigation-list ul {
     list-style:none;
     padding:0;
     margin:0;
}

.menu-open, .menu-close {
    font-size:36px;
    color:#000;
    font-family: 'Font Awesome 5 Pro';
  font-weight: 100;
}

.menu-open:before {
    content:'\f0c9';
}
.menu-close:before {
    content:'\f00d';
}

 .sff-main-footer {
     color:#fff;
     font-size:13px;
     font-family:'AvenirRoman';
}
 body.home .sff-main-footer {
     position: absolute;
     width: 100%;
     bottom: -300px;
}
 .sff-main-footer a {
     padding:7px;
     color:#fff;
     font-size:28px;
}
 body {
     overflow-x:hidden;
}
 .sff-text-module {
     font-family: 'AvenirBook';
     font-size:23px;
}
 .sff-text-module p strong, .half-text p strong {
     /*font-family: 'AvenirRoman';*/
     font-family:'enamelbase';
     text-transform:uppercase;
     font-weight:normal;
         font-size: 6vw;
         line-height:5.2vw;
}
 .half-text {
     font-size:2vw;
}
 .third-text {
     font-size:18px;
}
 .sff-tripod {
     height:100vh;
     height:58.5vw;
}

.sff-tripod p {
    font-family: 'AvenirBook';
    font-size:2vw;
}

.half-text-module p, .sff-text-module p {
    font-family: 'AvenirBook';
         font-family:'enamelbase';
     text-transform:uppercase;
     font-weight:normal;
         font-size: 6vw;
         line-height: 5.2vw;
}

 .sff-tripod .row {
     height:50vh;
     height:29.25vw;
}
 .sff-tripod .row img {
     height:50vh;
     height:29.25vw;
}
 .fa-play {
     position:absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
     font-size:60px;
     margin:auto;
     height:60px;
     width:60px;
     text-align:center;
     transition:0.5s ease opacity;
     opacity:1;
}
 .quote-module {
     font-size:40px;
     font-family:'AvenirBlack';
}
 .video-module:after,  .project-module:after {
     height:100%;
     width:100%;
     content:'';
     background-color:#EFD47A;
     opacity:0;
     position:absolute;
     top:0;
     left:0;
     z-index:1;
     transition:0.5s ease opacity;
}
 .video-module:hover:after, .project-module:hover:after {
     opacity:0.7;
}
 .video-title {
     cursor:pointer;
     position:absolute;
     color:#FFF;
     text-align:center;
     width:100%;
     z-index:2;
     opacity:0;
     transition:0.5s ease opacity;
     height:100%;
     top:0;

}
 .video-title h3 {
/*     font-family:'AvenirBlackOblique';
     text-align:left;
     font-size:40px;
     width:400px;
     position:relative;
     padding:30px;*/
     width:100%;
     font-family:'enamelbase';
     font-size:5vw;
     text-transform:uppercase;
     text-align:center;
}
 .video-title h3:before {
/*     border-left:4px solid #FFF;
     content:'';
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     transform:skewX(-10deg);*/
}


.video-title a {
    color:#fff;
}
.video-module:hover .fa-play {
     opacity:0;
}
.video-module:hover .video-title, .project-module:hover .video-title {
     opacity:1;
}
 [data-shape="Square"] {
     height:50vw;
}
 [data-shape="16:9"] {
     height:50vh;
}
 .image-shape, .image-shape img {
     /*height:100%;*/
}
.prime-image .video-title {
    opacity:1;
    font-size:8vw;
    /*font-family:'AvenirBlackOblique';*/
    /*text-shadow:2px 2px #000;*/

    font-family: 'enamelbase';
     font-size:15.7vw;
     text-transform:uppercase;
     width:100%;
     text-align:center;
}
 .video-js {
     position:fixed;
     z-index:10;
     top:0;
     bottom:0;
     left:0;
     right:0;
     margin:auto;
}

 .module-expose {
     opacity:0.8;
     background:#000;
     position:fixed;
     height:100vh;
     width:100vw;
     z-index:5;
    /*pointer-events:none;
    */
     display:none;
     top:0;
}
 .expose-close {
     color:#fff;
     font-size:50px;
     position:fixed;
     top:0;
     right:20px;
     height: 50px;
     width: 50px;
     z-index:100;
     cursor: pointer;
     display:none;
}
 #video-container {
     display: none;
}
 .video-src {
     position: fixed;
     right: 0;
     bottom: 0;
     min-width: 100%;
     min-height: 100%;
}
 .video-container {
     position:absolute;
    /*width:80%;
    */
     -moz-clip: rect(0, auto, auto, 0);
     -webkit-clip: rect(0, auto, auto, 0);
     clip: rect(0, auto, auto, 0);
     height:100%;
     width:100%;
}
 .video-summary {
     position: absolute;
     width: 25vw;
     background-color: rgba(0,0,0,0.9);
     color: #fff;
    /* padding-top: 5vw;
     */
     top: 0px;
     left: 0px;
     padding: 6vw 20px 20px 20px;
     display: inline-block;
    /*transform:translateY(-20vw);
    */
     opacity:0;
     transition:.8s all ease;
     -webkit-transform: translate3d(0, -20vw, 0);
     -moz-transform: translate3d(0, -20vw, 0);
     -ms-transform: translate3d(0, -20vw, 0) ;
     transform: translate3d(0, -20vw, 0);
     will-change: transform;
}
 .video-summary.open {
     -webkit-transform: translate3d(0, 0vw, 0);
     -moz-transform: translate3d(0, 0vw, 0);
     -ms-transform: translate3d(0, 0vw, 0);
     transform: translate3d(0, 0vw, 0);
     opacity:1;
}
 .video-summary a {
     text-align:right;
     width:100%;
     color:#2db2e2;
     text-decoration:none;
     display:inline-block;
}
 [data-container-name="drama"] .video-summary {
     left:unset;
     right:0px;
}
 [data-container-name="digital"] {
     z-index:10;
     width:57%;
    /*/
    / left: 46.9365%;
    */
}
 .video-container-color {
     position:absolute;
     width:100%;
     height:100%;
     top:0;
     left:0;
     background: rgb(0,0,0);
    /* Old browsers */
     background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(69,72,77,1) 100%);
    /* FF3.6-15 */
     background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%,rgba(69,72,77,1) 100%);
    /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(135deg, rgba(0,0,0,1) 0%,rgba(69,72,77,1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#45484d',GradientType=1 );
    /* IE6-9 fallback on horizontal gradient */
     opacity:0.5;
}
 .cat-title {
     position:absolute;
     top:20px;
     left:20px;
     font-size:2vw;
     color:#fff;
     /*text-shadow: 2px 2px 0px rgba(0,0,0,0.7);*/
     z-index:12;
     top:50vh;
    /*margin-top:-60px;
    */
     opacity:1;
     transition: .5s opacity ease;
     font-family: 'AvenirBlackOblique';
     top: -8vh;
     top: -55vh;
     bottom: 0;
     left: -20vw;
     right:0;
     margin:auto;
     font-size:75px;
     width:100px;
     height:50px;
     opacity:0;
     font-size:5vw;
     pointer-events: none;

     font-family: 'enamelbase';
     font-size:15.7vw;
     text-transform:uppercase;
     width:100%;
     text-align:center;
}
 .cat-title a {
     color:#fff;
}
 .cat-title a:hover {
     text-decoration: none 
}
 .cat-title.hide {
     opacity:1;
     pointer-events: all;
}
 [data-container-name="drama"] .cat-title {
     right:-15vw;
     left:0;
}
 [data-container-name="digital"] .video-container-color {
     background: rgb(69,72,77);
    /* Old browsers */
     background: -moz-linear-gradient(-45deg, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
    /* FF3.6-15 */
     background: -webkit-linear-gradient(-45deg, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
    /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(135deg, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 );
    /* IE6-9 fallback on horizontal gradient */
}
 .global-scrubber-container {
     position:absolute;
     left:5%;
     width:90%;
     height:100%;
     max-height:1081px;
}
 .global-scrubber {
     position:absolute;
     width:12px;
     left:48.2315%;
     margin-left:-81px;
     height:100%;
     /*background:#fff;*/
     z-index:20;
     /*background-image:url('img/Scrollbar_1080px@3x.png');*/
     background-color:transparent;
     background-position:center center;
     width:162px;
     background-size: contain;
     background-repeat:no-repeat;
}
.global-scrubber-center {
    width:100% !important;
    left: 0 !important;
    margin-left: 0 !important;
}
.global-scrubber-bar-line-container {
    /*content:'';*/
    position:absolute;
    width:10px;
    height:120vh;
    left:50%;
    right:0;
    top:0px;
    display:block;
    transform:skewX(-8deg);
    margin-left: -2.2vh;
    top:-45vh;
}
.global-scrubber-bar-line {

    background:#fff;
    height:100%;
    width:100%;
}

 .global-scrubber-center {
     position:relative;
     width:100px;
     height:100px;
     background-color:transparent;
     top:50%;
     left:50%;
     margin-left:-50px;
     margin-top:-50px;
     cursor: e-resize;
}

 .global-scrubber-center .arrow {
     position:absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
     margin:auto;
     transition:.6s opacity ease;
     opacity:1;
    font-size: 60px;
    color: #fff;
}
 .global-scrubber-center .left-arrow {
     left: -19px;
     /*top: -62px;*/
}
 .global-scrubber-center .right-arrow {
     left: 36px;
     /*top: 62px;*/
     left:120px;
}

@keyframes bounceLeft {
    0%, 20%, 50%, 80%, 100% {transform: translateX(0);}
    40% {transform: translateX(-30px);}
    60% {transform: translateX(-15px);}
}

@keyframes bounceRight {
    0%, 20%, 50%, 80%, 100% {transform: translateX(0);}
    40% {transform: translateX(30px);}
    60% {transform: translateX(15px);}
}

 .global-scrubber-center .arrow:after {
    position:absolute;
    width:66px;
    height:100%;
    content:'DRAG ME';
    font-family:'AvenirRoman';
    color:#fff;
    font-size:14px;
    margin-top:12px;
    opacity:0;
    transition:.6s opacity ease;
 }

  .global-scrubber-center .arrow.left-arrow:after {
    left:0;
    margin-top: 73px;
  }

  .global-scrubber-center .arrow:not(.force-stop):hover:after {
    opacity:1;
  }

  .global-scrubber-center .arrow.left-arrow:not(.force-stop):hover:after {
    opacity:1;
    animation: bounceLeft 2s infinite;
  }

  .global-scrubber-center .arrow.right-arrow:not(.force-stop):hover:after {
    opacity:1;
    animation: bounceRight 2s infinite;
  }


 .global-scrubber-center .arrow.hide {
     opacity:0;
}
 .skew-container {
     transform:skewX(-8deg);
     left:-5vw;
     width: 53.4483%;
}
 .unskew {
     transform:skewX(8deg);
     left:5vw;
}
 [data-name="digital"].video-summary {
     z-index: 11;
}
 .skew-video-container {
     width:100vw;
     position: absolute;
     top:0;
     left:0;
     height:100%;
}
 .hero-component {
     width:100%;
     position:absolute;
     height:100vh;
     overflow:hidden;
     transform:translate3d(0,0,0);
}

.half-text-module {
    font-size:4vw;
    font-family:'AvenirBlack';
}

.gif-fallback { display:none; }

 @media(max-width:768px) {
     * {
        box-sizing: border-box;
    }
    .gif-fallback {
        display:block;
    }

    .navigation-list {
        top: 60px;
    }



    .unskew {
            transform: skewX(0deg);
    }

    .video-title h3:before {
        display:none;
    }


    .half-text, .half-text-module {
        font-size:20px;
    }

     body {
         background:#111;
        padding:60px 0px 0px;
    }

     #sff-main-header, #sff-main-header .row {
        height:60px;
     }


/*     .sff-strapline {
        position:absolute;
        top:79px;
     }*/

     .img-logo {
        width:44px;
     }

     .sff-strapline h2 {
        font-size:10px;
        width:100%;
     }

     .menu-open, .menu-close {
        font-size:26px;
     }

     video {
         display:none;
    }
     .global-scrubber-container, .video-container-color {
        display:none;
    }
     .video-container, .video-summary {
         position:relative;
         width:100% !important;
         text-align:center;
    }
    body.home .sff-main-footer {
        bottom:0px;
        position:relative;
    }
     .cat-title {
        font-size:50px !important;
        opacity:1;
        position: absolute;
        top: 0;
        left: 0 !important;
        right: 0 !important;
        bottom: 0;
        height:80px;
        width:100%;
    }
    .hero-component {
        position: relative;
        height: auto;
    }
     .video-summary, .video-summary.open {
         transform:none;
         opacity:1;
         width:100%;
         margin:0;
    }
     .skew-container {
         transform:none;
         left:unset;
         height:auto;
    }
    .skew-video-container {
        display:none;
    }

    .navigation-list {
        font-size:20vw;
        line-height:16vw;
    }

    .video-module:after, .project-module:after {
        opacity:0.4;
    }
    .video-module .fa-play, .project-module .video-title {
        opacity:1;
        z-index:2;
    }
    /* 
}
 @media(max-width: 767px) {
     */
     #sff-main-header .col:first-child {
        max-width:75px;
     }

    #sff-main-header .col:last-child {
        max-width:75px;
     }

     .sff-tripod {
         height:auto;
    }
     .sff-tripod .row {
         height:auto;
    }
     .sff-tripod .row img {
         height:auto;
    }
     .fa-play {
         font-size:40px;
    }
     .image-shape, .image-shape img {
         height:auto;
    }
     [data-shape] {
         height:auto;
    }

    .project-module a {
        width:100%;
    }

     .video-title h3 {
        font-size: 45px;
     }
}

@media(min-width:768px) {
    .menu-close {
        float: left;
        font-size: 50px;
        position: relative;
        left: -30px;
    }
    .sff-text-module-container {
        min-height:540px;
    }
    .project-module {
        /*max-height:50vh;*/
        max-height:29.25vw;
    }
    .project-module.singular-project {
        max-height:29.25vw;
    }
    .project-module img {
        height:100%;
    }
}

.project-module.single-project {
    max-height:unset;
}

.sff-text-module.sff-sm {
    font-family: 'AvenirBook';
    /*font-size: 3vw;*/
    /*line-height: 3.9vw;*/
    text-transform: none;
}

@media(max-width: 550px) {
    .sff-text-module.sff-sm {
        font-size: 14px;
    }
}

.sff-text-module.sff-sm h3 {
    font-family: 'enamelbase';
    text-transform: uppercase;
    font-weight: normal;
/*    font-size: 90px;
    line-height: 28px;*/
    font-size: 8vw;
    line-height: 5.2vw;
}
.sff-text-module.sff-sm a {
    color: #c7c7c7;
}

