/* fonts
-------------------------------------------------- */
@font-face {
    font-family: 'Maison Neue';
    src: url('../fonts/MaisonNeue-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Lyon Text Regular No. 2';
    src: url('../fonts/LyonText-RegularNo2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Fugue Tails';
    src: url('../fonts/FugueTails.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Fugue';
    src: url('../fonts/Fugue-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* Reset
-------------------------------------------------- */

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}
/* Clearfix
-------------------------------------------------- */

.cf:after {
    content: "";
    display: table;
    clear: both;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background-color: black;
}

a {
    text-decoration: none;
    color:white;
            -moz-transition: all 0.2s;
        transition: all 0.2s;   
}

a:hover {
    text-decoration: none;
}

p a:hover {
    opacity: .6;
}

body>a:hover {
    opacity: .6;
}


.buttons:hover {
    opacity: .6;
}

.no-transition {
    -moz-transition: none !important;
        transition: none !important;   
}

.active {
    /*z-index: 0 !important;*/
}

.hidden {
    visibility: hidden;
    opacity: 0 !important;
}

.hidden-buttons {
    visibility: hidden;
    opacity: 0 !important;
    -moz-transition: all 1s;
    transition: all 1s;  
}
.arrow {
        position: fixed;
        z-index: 11;
    width: 30px;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*text-align: center;*/
        /*left: 0;*/
    /*right: 0;*/
    cursor: pointer;
    color: white;
                -moz-transition: all 0.2s;
        transition: all 0.2s;  
            height: 20px; 
            display: none;
            bottom: 30px;
}
.dot {
    position: fixed;
        z-index: 11;
    width: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
        left: 0;
    right: 0;
    cursor: pointer;
    color: white;
                -moz-transition: all 0.2s;
        transition: all 0.2s;  
            height: 20px; 
            display: none;
}

#moveUp {
    /*top:50px;*/
    margin-top: 2px;
    right: 75px;
}
#moveDown {
    bottom:30px;
    right: 30px;
}

.fp-section {
    /*z-index: -1;*/
}
div#fullpage.fullpage-wrapper {
        /*z-index: -1;*/
        right:0%;
        left: 0%;

}
.fp-tableCell {
position: relative;
}

.badges {
     height: 60px;
    bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    opacity: 0;
                    -moz-transition: all 0.5s;
        transition: all 0.5s;  
        position: absolute;
}
.badges-list {
     height: 60px;
    bottom: 30px;
    position: fixed;
    right: 30px;
    opacity: 0;
                    -moz-transition: all 0.5s;
        transition: all 0.5s;  
}
.badges img {
    height: 60px;
    margin-right: 40px;
    margin-left: 40px;
}
.badges-list img {
    height: 60px;
    margin-right: 5px;
    margin-left: 5px;
}
.title {
    /*position: absolute;*/
    text-align: center;
    width: 100vw;
    color: white;
    /*top:44%;*/
    /*margin-top: 44vh;*/
z-index: 1;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    display: none;
        top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

.title-studio {
    /*position: absolute;*/
    text-align: center;
    width: 100vw;
    color: white;
    /*top:44%;*/
    /*margin-top: 48vh;*/
z-index: 1;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 13;
            top: 50%;
    position: absolute;
    transform: translateY(-50%);
}
 
.list-title {
    /*position: absolute;*/
    text-align: center;
    width: 100vw;
    color: white;
    /*display: none;*/
    /*top:44%;*/
    /*margin-top: 44vh;*/
z-index: 1;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -moz-transform: transform: translate3d(0,0,0);
    -o-transform: transform: translate3d(0,0,0);

}

.studio-title {
    font-family: 'Lyon Text Regular No. 2', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 24px;
    text-decoration: none;
    letter-spacing: 1px;
    display: inline-block;
    z-index: 1;
/*    -moz-transition: all 0.3s;
    transition: all 0.3s;  */ 
    display: none;
}

.video-title {
    font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size:60px;
    text-decoration: none;
    line-height: 1.4em;
    cursor: pointer;
    display: inline-block;
    z-index: 1;
                -moz-transition: all 0.3s;
        transition: all 0.3s;   
}

.video-title:hover {
    opacity: .6;
}

.video-title:hover + .video-subtitle {
    opacity: .6;
}


.video-title-list {
    font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size:60px;
    text-decoration: none;
    line-height: 1.4em;
    cursor: pointer;
    display: inline-block;
    z-index: 1;
    padding-bottom: 10px;
}

.video-title-parts {
    font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size:30px;
    text-decoration: none;
    line-height: 1.4em;
    cursor: pointer;
    display: inline-block;
    z-index: 1;
    padding-top: 25px;
        -moz-transition: all 0.3s;
        transition: all 0.3s;  
}

.video-title-dots {
    font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size:30px;
    text-decoration: none;
    line-height: 1.4em;
    cursor: pointer;
    display: inline-block;
    z-index: 1;
    padding: 25px;
}

.video-title-parts:hover {
    opacity: .6;
}

.zboost {
    z-index: 3 !important;
}

.thumbnail-wrap {
    position: relative;
/*margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;*/
z-index: -2;
visibility: hidden;
/*display: block;*/
display: none;
        
}

.thumbnail-visible {
    /*z-index: 2 !important;*/
    /*visibility: visible !important;*/
    opacity: 1 !important;


}

.video-title-wrapper {
    position: relative;
}

/*
.video-title-list:hover~.thumbnail-wrap {
    display: block;
}*/

.video-subtitle {
    font-family: 'Lyon Text Regular No. 2', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 2em;
    font-size: 24px;
    text-decoration: none;
    letter-spacing: 1px;
                    -moz-transition: all 0.3s;
        transition: all 0.3s;   
}

.thumbnail {
/*width: 75%;*/
/*height: 600px;*/
/*height: 50vh;
margin-top: -28vh;*/
height: 60vh;
margin-top: -33.5vh;
position: absolute;
/*margin-top: -335px;*/
margin-right: auto;
margin-left: auto;
left: 0;
right: 0; 
        opacity: 0;
        -moz-transition: all 0s ease-in;
        transition: all 0s ease-in; 
        -webkit-filter: brightness(60%);
}
.thumbnail-animate {
    opacity: 1;
        -moz-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in; 
}

.categories {
    font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 1px;
    color: white;
    z-index: 1;
    text-align: center;
    margin-top: 15px;
margin-bottom: 40px;
}

/*tumblr*/
ol.tumblr_posts{

    list-style:none;
}

/*menu*/
.buttons {
display: none;
    transition: all 0.2s;
}

.all {
        font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
            /*font-family: 'Lyon Text Regular No. 2', Arial, Helvetica, sans-serif;*/

    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 1px;
    color: white;
position: fixed;
z-index: 5;
top: 30px;
cursor: pointer;
left: 30px;
}

.back {
        font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
                /*font-family: 'Lyon Text Regular No. 2', Arial, Helvetica, sans-serif;*/

    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 1px;
    color: white;
position: fixed;
z-index: 5;
top: 30px;
cursor: pointer;
left: 30px;
/*background-color: black;*/
display: none;
}

.diary-contact {
    font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
        /*font-family: 'Lyon Text Regular No. 2', Arial, Helvetica, sans-serif;*/

    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 1px;
    color: white;
position: fixed;
z-index: 5;
cursor: pointer;
}
.diary {
left: 30px;
bottom: 30px;

}
.contact {
right: 30px;
top: 30px;
}

.contact-page {
    width: 100vw;
height: 100vh;
background: black;
z-index: 4;
position: fixed;
    -moz-transition: all 0.7s ease;
        transition: all 0.7s ease;   
right:-100%;
}

.diary-page {
    width: 100vw;
height: 100vh;
background: black;
z-index: 4;
position: fixed;
    -moz-transition: all 0.7s ease;
        transition: all 0.7s ease;   
left:-100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}



.contact-active {
    right:0 !important;
}

.diary-active {
    left:0 !important;
}

.contact-wrapper {
    color: white;
    text-align: center;
    top: 50%;
position: relative;
transform: translateY(-50%);
line-height: 2;
width: 80%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
z-index: 999999;
}


.diary-wrapper {
    color: white;
    text-align: center;
    /*top: 50%;*/
position: relative;
/*transform: translateY(-50%);*/
/*line-height: 2;*/
width: 80%;
margin-left: auto;
margin-right: auto;
z-index: 999999;

}

#tumblr-feed {
        padding-top: 30px;
    padding-bottom: 30px;
}

#tumblr-feed ul li {
list-style-type: none;

    padding-top: 30px;
    padding-bottom: 30px;
}

#tumblr-feed ul li a img {
width: 95%;

}


.fullpage-fix {
    -webkit-transition: all 700ms ease !important;
transition: all 700ms ease !important;
}



.studio {
    font-family: 'Lyon Text Regular No. 2', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 24px;
    text-decoration: none;
    /*padding-top: 75px;*/
    padding-bottom: 75px;
    /*letter-spacing: 1px;*/
}

.info-left {
    font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 1px;
    float: left;
text-align: left;
}

.info-right {
    font-family: 'Lyon Text Regular No. 2', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    text-decoration: none;
    letter-spacing: 1px;
    /*float: right;*/
text-align: right;
}

.credits-wrapper {
    color: white;
    text-align: center;
    top: 50%;
position: relative;
transform: translateY(-50%);
line-height: 1.75;
/*width: 85%;*/
/*margin-left: 75px;
margin-right: 75px;*/
z-index: 999999;
    -webkit-columns: 3; /* Chrome, Safari, Opera */
    -moz-columns: 3; /* Firefox */
    columns: 3;
/*        -webkit-column-gap: 75px; 
    -moz-column-gap: 75px; 
    column-gap: 75px;*/
}

.credits-left {
    font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    /*font-size: 14px;*/
    letter-spacing: 1px;
    float: left;
text-align: left;
width: 50%;
}

.credits-right {
    font-family: 'Lyon Text Regular No. 2', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    /*font-size: 14px;*/
    text-decoration: none;
    letter-spacing: 1px;
    /*float: right;*/
text-align: right;
}
.credits-justified {
    font-family: 'Lyon Text Regular No. 2', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    /*font-size: 14px;*/
    text-decoration: none;
    letter-spacing: 1px;
    float: left;
text-align: left;
width: 100%;
}

#swipebox-title {
                    -moz-transition: all 0.2s;
        transition: all 0.2s;  
}

#swipebox-title:hover {
        opacity: .6; 
}

#swipebox-close {
                    -moz-transition: all 0.2s;
        transition: all 0.2s;  
}

#swipebox-close:hover {
        opacity: .6; 
}

.other {
    font-family: 'Fugue Tails', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 1px;
}

.close {
/*  cursor: pointer;
  right: 50px;
  top: 50px;
  position: absolute;
  z-index: 9999;*/
position: relative;
  background-image: url(../img/exit.png);
  background-repeat: no-repeat;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
  width: 30px;
  height: 30px;
  top: 30px;
  right:30px;
  background-size: contain;
  z-index: 99999;
position: fixed;
display: none;
}

.close-credits {
left:30px !important;
}

.move-left {
    right:100% !important;
    left: -100%!important;
}
.move-right {
    left:100% !important;
    right:-100% !important;
}
.show {
    display: block !important;
}

/*.credits {
        font-family: 'Fugue', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 1px;
    color: white;
position: absolute;
bottom: 50px;
cursor: pointer;
    z-index: 999999;
    right: 50px;
}*/

.credits-overlay {
    z-index: 15 !important;
    height: 100vh;
    width: 100vw;
    position: fixed;
    display: none;
    top: 0;
}

.credits-bg{
        background-color: black;
    opacity: .6;
    height: 200vh;
    width: 100vw;
        margin-top: -100vh;
}

.background {
    width: 100vw;
    height: 100vh;
    background-color: black;
    position: fixed;
    z-index: 12;
}
.background-2 {
background-position: center center;
    background-size: cover;
    -webkit-filter: brightness(60%);
    height: 100vh;
    width: 100vw;
    position: fixed;
    overflow: hidden;
    z-index: -1;
    /*display: none;*/
    /*visibility: hidden;*/
background-color: black;
top:0;
opacity: 0;
                    -moz-transition: all 1s;
        transition: all 1s; 
}
/*.background-image {
    height:100vh;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    bottom: 0;
    -webkit-filter: brightness(60%);
}*/
.z-boost {
        z-index: 999999 !important;
}

video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
}

.exit {
    position: absolute;
    top:50px;
    right:50px;
}


/*fullpage.js slider*/
#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: 0 !important;
    /*top: 0;*/
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    right: 50%;
}
#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height: 15px;
    width: 15px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
 }
 #fp-nav ul li a.active span {
    display: none;
 }
 .prev-dot {
    top:50px;
 }
 .next-dot {
    bottom: 90px;
 }

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 15px;
    width: 15px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
    background: white;
    left: 50%;
    top: 50%;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
/*    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;*/
}

.iScrollIndicator {
    display: none !important;
}

.iScrollVerticalScrollbar {
    display: none !important;
}

.fp-scroller {
    overflow-y: hidden;
}

/*.arrow {
    position:fixed;
    z-index:99;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-left: -38px;
    left: 50%;
}
.arrow-down{
    bottom: 20px;
    border-width: 38.5px 34px 0 38.5px;
    border-color: #fff transparent transparent transparent;
}
.arrow-up{
    top: 20px;
    border-width: 0 38.5px 34px 38.5px;
    border-color: transparent transparent #fff transparent;
}*/

/*responsive*/

/*large screens*/
@media only screen and (min-width: 1950px) {
.credits-wrapper {
line-height: 2;
margin-left: 150px;
margin-right: 150px;
        -webkit-column-gap: 150px; /* Chrome, Safari, Opera */
    -moz-column-gap: 150px; /* Firefox */
    column-gap: 150px;
}

.credits-left {
    font-size: 20px;
}

.credits-right {
    font-size: 20px;
}
.credits-justified {
    font-size: 20px;
}
}

/*medium screens*/
@media only screen and (min-width: 1601px) and (max-width : 1949px){
.credits-wrapper {
line-height: 2;
margin-left: 100px;
margin-right: 100px;
        -webkit-column-gap: 100px; /* Chrome, Safari, Opera */
    -moz-column-gap: 100px; /* Firefox */
    column-gap: 100px;
}

.credits-left {
    font-size: 17px;
}

.credits-right {
    font-size: 17px;
}
.credits-justified {
    font-size: 17px;
}
}

/*small screens*/
@media only screen and (min-width: 1300px) and (max-width : 1599px){
.credits-wrapper {
line-height: 2;
margin-left: 75px;
margin-right: 75px;
        -webkit-column-gap: 75px; /* Chrome, Safari, Opera */
    -moz-column-gap: 75px; /* Firefox */
    column-gap: 75px;
}

.credits-left {
    font-size: 14px;
}

.credits-right {
    font-size: 14px;
}
.credits-justified {
    font-size: 14px;
}
}

/*very small screens*/
@media only screen and (min-width: 1024px) and (max-width : 1299px){
.credits-wrapper {
margin-left: 60px;
margin-right: 60px;
        -webkit-column-gap: 60px; /* Chrome, Safari, Opera */
    -moz-column-gap: 60px; /* Firefox */
    column-gap: 60px;
}

.credits-left {
    font-size: 10px;
    letter-spacing: .75px;
}

.credits-right {
    font-size: 10px;
    letter-spacing: .75px;
}
.credits-justified {
    font-size: 10px;
    letter-spacing: .75px;
}
}


/*ultra small screens*/
/*very small screens*/
@media only screen and (max-width: 1024px) {
.credits-wrapper {
margin-left: 50px;
margin-right: 50px;
        -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
    -moz-column-gap: 50px; /* Firefox */
    column-gap: 50px;
}

.credits-left {
    font-size: 8px;
    letter-spacing: .75px;
}

.credits-right {
    font-size: 8px;
    letter-spacing: .75px;
}
.credits-justified {
    font-size: 8px;
    letter-spacing: .75px;
}
}

/*all mobile*/
@media screen 
and (min-width: 0px) 
and (max-width: 736px) {

.studio-title {
    font-size: 18px;
}
.title {
    /*margin-top: 40vh;*/
    padding-left: 15px;
    padding-right: 15px;

}
.video-title {
    font-size: 45px;
}
.video-subtitle {
    font-size: 18px;
}
.video-title-list {
    font-size: 45px;
}
.video-title-parts {
    font-size:22px;
}
.list-title {
    padding-left: 15px;
    padding-right: 15px;
padding-top: 40px;
}

.badges {
    /*opacity: 1;*/
         height: 30px;
    bottom: 25px;
}
.badges img {
    height: 30px;
    margin-left: 5px;
    margin-right: 5px;
}
.categories {
    margin-top:0px;
    font-size: 15px;
}
.studio {
    font-size: 18px;
    padding-bottom: 50px;
}
.info-left {
    font-size: 12px;
}
.info-right {
    font-size: 12px;
}
.other {
    font-size: 15px;
}
.contact-wrapper {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/*buttons*/
.all {
    top:15px;
    left:15px;
    font-size:15px;
    visibility: hidden;
}
.back {
    top:15px;
    left:15px;
    font-size:15px;
    visibility: hidden;
}
.contact {
    right:15px;
    top:15px;
}
.diary {
    left: 15px;
top: 15px;
}
.diary-contact {
    font-size: 15px;
}
.arrow {
    bottom: 15px;
}
#moveDown {
    bottom: 15px;
right: 15px;
}
#moveUp {
    left: 15px;
}
.close{
    top:15px;
    right:15px;
    position: fixed;
}
#swipebox-title {
    top:15px;
    left:15px;
    font-size:15px;
}
}

/*iphone x*/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 


    }


/*portrait*/
@media screen 
and (orientation: portrait) {
    .badges {
        top:15px;
    }
}


/*iphone 5 only*/
@media only screen 
and (min-width : 320px) 
and (max-width : 568px) { 
   
}

/*iphone 6 only*/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 736px) { 
  
}



    /*iphone 6 landscape*/
    @media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { 

}

@media screen 
and (min-width: 0px) 
and (max-width: 699px) 
and (orientation: landscape) 
{
    }


/*ipad */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) {

}

/*ipad landscape*/
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: landscape) {

    }