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

@font-face {
    font-family: 'Architects Daughter';
    src: url('fonts/ArchitectsDaughter-Regular.woff2') format('woff2'),
        url('fonts/ArchitectsDaughter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


html {
	height:100%;
}

body {
	margin:0;
	padding:0 5%;
	background: #f5f5f5 url(bg.jpg) 0 0/1100px repeat;
	overflow-x: hidden;
	text-align: center;
}


/* ------ Buttons ------ */


.tile {
	display:inline-block;
	transition: opacity 0.4s;
	opacity: 0.65;
	visibility: hidden;
}
body.animate .tile {
	animation: tile_init 0.7s ease-out forwards;
 	animation-delay: 7s; 	
	/*transition: opacity 1s ease-out;*/
}
.tile a {
	text-decoration: none;
}
.tile:hover, tile:active {
	opacity:0.95;
	/*filter: invert() sepia(100%) saturate(600%) hue-rotate(66deg) invert();*/
}
.tile {
	font-size: 30px;
	mix-blend-mode: multiply;
}
.tile .button {
	display:block;
	width:12em; 
	height:3.4em;
	padding-top:1.5em;
	background: url('spot_b.jpg') center no-repeat; 
	background-size:100% 100%; 
	font-family: Bungee, 'Arial Black'; 
	letter-spacing: 0.04em;
	color: white; 
}


@media screen and (min-width: 1250px){
	.tile {
		font-size: 2.4vw;
	}
}


@keyframes tile_init {
    0%   {transform: translate(100vw, 0); visibility:visible;}
    100%  {transform:translate(0, 0); visibility:visible;}
}

body.instant .tile {
	transform:translate(0, 0); visibility:visible;
}


/* ------ Logo ------ */

.mark {
	width:75%;
	position: fixed;
    left: 12.5%;
    top: 50%;
    transform: translateY(-50%);   
    pointer-events:none;
}
body.animate .mark span {
	display: block;
 	animation: mark_grow 6s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
 	transform: scale(0.01);
 	animation-delay: 1s;
 }
body.animate .mark img {
 	animation: mark_rotate 6s ease-out forwards, mark_blend 6s ease-in-out forwards;
 	animation-delay: 1s;
	mix-blend-mode: overlay;
 }
 
@keyframes mark_rotate {
    0%   {transform: rotate(180deg);}
    100%  {transform: rotate(-740deg);}
}
@keyframes mark_grow {
	0%   {transform: scale(0.01);}
    95%  {transform: scale(10);}
    100%  {transform: scale(10);}
}
@keyframes mark_blend {
    0%   {opacity:1;}
    100%  {opacity:0.3;}
}

body.instant .mark span {
	display: block;
 	transform: scale(10);
 }
body.instant .mark img {
 	transform: rotate(-740deg);
 	opacity:0.3;
	mix-blend-mode: overlay;
 }