@font-face {
    font-family: 'FK Oscar Regular';
    src: url('../fonts/FHOscar-Regular.woff2') format('woff2'),
         url('../fonts/FHOscar-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Self Modern Italic';
    src: url('../fonts/self-modern_italic_web.woff2') format('woff2'),
         url('../fonts/self-modern_italic_web.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Self Modern Regular';
    src: url('../fonts/self-modern_book_t.woff2') format('woff2'),
         url('../fonts/self-modern_book_t.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
    /* Core */
    --black: #1A1A1A;
    --yellow: #F3E45F;
    --yellowAlt: #f8f2b7;
    --sand: #f2edde;
    --sandAltB: #e3e0d4;
    --sandAltC: #c7c2ba;

    /* Highlights */
    --grey: #c7c2ba;
    --red: #ed7561;
    --green: #96a88f;
    --mustard: #e8b540;
    --brown: #54452e;
}


body {
	margin:0;
	padding:0;
    font-size:18px;
    line-height:1.3;
    font-family: 'Self Modern Regular', Arial, Helvetica, sans-serif;
    color:var(--black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background: var(--yellow);
    text-align: center;
}

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

b, strong {font-family: 'avertaregular', sans-serif;font-weight: normal;}

a, span {font-family: 'Self Modern Italic', Arial, Helvetica, sans-serif;-webkit-text-stroke-width: 0.015em;-webkit-text-stroke-color: var(--black);}

a {color:var(--black);text-decoration:none;border-bottom:1px solid transparent;opacity: 1;
    -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.4s ease-in-out;
}
a:hover {color:var(--black);text-decoration:none;border-bottom:1px solid var(--black);opacity: 1;
    -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.4s ease-in-out;
}

a {
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
transition: color 0.2s linear;

}

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

p {margin: 0 0 1em;}
p:last-child {margin-bottom: 0;}

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

.inner {padding: 2.5vw;}

.top {margin-bottom:1em;}
.bottom {margin-top:1em;}

.logo {max-width: 310px;}

#main {position: fixed;top:0px;left:0;right:0;bottom:0;z-index: 0;overflow: auto;}
#main .top {position: absolute;left:0;top:0;width: 50%;}
#main .mid {position: absolute;left:0;bottom:25%;top:25%;width: 50%;}
#main .bottom {position: absolute;left:0;bottom:0;width: 50%;}


#visuals {position: absolute;top:0;right:0;bottom: 0;width: 50%;}
#visuals .hands {position: absolute;top:0;bottom:0;left:0;right:0;z-index: 5;object-fit: contain;height: 100%;width: 100%;mix-blend-mode: screen;}
.slideshow {position: absolute;top:0;right:0;bottom: 0;left:0;z-index: 1; background: #000000;}

#visuals .slideshow img {object-fit: cover;height: 100%;width: 100%;position: absolute;top: 0;bottom: 0;right: 0;left: 0;opacity: 0;
    -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.4s ease-in-out;
}
#visuals .slideshow img.current {opacity: 0.9;
    -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.4s ease-in-out;
}




#visuals {
    -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.4s ease-in-out;
}



/* make keyframes that tell the start state and the end state of our object */
@-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:0.2s;

}


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


@media screen and (max-width: 1023px) {
    .inner {padding: 5vw;}
    #visuals {
    display: flex;
    align-items: center;
    justify-content: center;
    width: inherit;
    position: relative;
    margin: 0 5vw;
    }

    .visual-inner {
        position: relative;
    }
    .visual-inner .slideshow,
    .visual-inner .hands {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .visual-inner .slideshow img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #main .top {position: relative;left:inherit;top:inherit;width: inherit;}
    #main .top .inner {padding-bottom: 1em;}
    #main .mid .inner {padding-top: 0;}
    #main .mid {position: relative;left:inherit;bottom:inherit;top:inherit;width: inherit}
    #main .bottom {position: relative;left:inherit;bottom:inherit;width: inherit;}
    .logo {max-width: 220px;}
    body {font-size:14px;}
    /* #visuals {position: absolute;top:5vw;right:5vw;bottom: 5vw;left:5vw;width: inherit;}
    .slideshow {padding-top:125%;}*/
}

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