@font-face {
    font-family: 'Nirva Bold';
    src:url('../fonts/NIRVA_BETA_B-Bold.woff2') format('woff2'),
        url('../fonts/NIRVA_BETA_B-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




:root {
    --green: #37692C;
    --lightgreen: #8EA77D;
    --pink: #FADEE6;
    --blue: #1D75BA;
    --darkpink: #F3A9BA;
    --red: #CC123F;
    --mustard: #B6A80F;
    --yellow: #F2E500;
}



body,td,th {
    font-family: 'Nirva Bold', sans-serif;
    font-size:18px;
	line-height:1.5;
    margin:0;
    padding:0;
    background:#000;
    color:#fff;
	text-align:center;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    letter-spacing: 0px;
}

#logo svg .st0 {fill:#fff!important;}

#graphic {position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 100;
    mix-blend-mode: hard-light;
    display: none;

    }

#graphic img, #graphic svg {
    object-fit: contain;
    height: 100%;
    width: 100%;
}




.ease {
-webkit-transition: 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-moz-transition: 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-o-transition: 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

#fs img {
-webkit-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-moz-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-o-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
    

b, strong {font-family: 'Nirva Bold', sans-serif;font-weight: normal;}
h1 {font-family:'Nirva Bold', sans-serif;font-size:240px;line-height: 0.9;padding:0;margin:0 0 0;font-weight: normal;text-transform: uppercase;text-align: left;word-break: break-word;}
h2 {font-family:'Nirva Bold', sans-serif;font-size:18px;line-height: 1;padding:0;margin:0;font-weight: normal;text-transform: uppercase;letter-spacing: 1px;}
h2 span {margin-right:1em;}


a {color:inherit;text-decoration:none;border-bottom:0px solid transparent;opacity: 1;}
a:hover {color:inherit;text-decoration:none;border-bottom:0px solid #AA9B5F;opacity: 0.5;}

a {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}

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


.t {display: table;height: 100%;width: 90%;margin: 0 auto;padding:0 auto;text-align: center;}
.tc {vertical-align: middle;display: table-cell;}
    
p {margin: 0 0 1.5em;}


#logo {
    position: fixed;
    bottom: 2.5vw;
    right: 2.5vw;
    left:2.5vw;
    mix-blend-mode: difference;
    z-index: 0;
    pointer-events: none;
    }

#logo img, #logo svg {
    width:100%;
    height: auto;
}


#meta {
	position:fixed;
 	top:2.5vw;
	left: 2.5vw;
    right:2.5vw;
	z-index: 10;
    text-align: left;
    line-height: 1.4;
    z-index: 10;
 }

#meta-top {
	position:fixed;
 	top:1.5vw;
	left: 2.5vw;
    right:2.5vw;
	z-index: 10;
 }






/* 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:0;
	-moz-animation-delay:0;
	-o-animation-delay:0;
	animation-delay:0;

}


@media screen and (max-width: 2200px) {
    h1 {font-size: 180px;}
    
}

@media screen and (max-width: 1800px) {
    h1 {font-size: 160px;}
    
}


@media screen and (max-width: 1440px) {
    h1 {font-size: 140px;}
    
}


@media screen and (max-width: 1023px) {
    h1 {font-size: 100px;}
    
}

@media screen and (max-width: 767px) {
    h1 {font-size: 80px;}
    #meta {left:5vw;right: 5vw;bottom: 5vw;}
    #meta-top {left:5vw;right:5vw;top:5vw;}
    #logo {left:5vw;right: 5vw;bottom: 5vw;}
   
}

@media screen and (max-width:550px) {
    h1 {font-size: 50px;}
}