@keyframes pp {
    from{
    	display: block;
        opacity: 0;
        transform: scale(.8);
    }
    5%{
    	opacity: 1;
    }

    to{
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes grow {
    from{
    	width: 0;
   		height: 0;
   		top: 50%;
   		left: 50%;
   		border-radius: 50%;
    }

    to{
        width: 6000px;
   		height: 6000px;
   		top: calc( 50% - 3000px);
   		left: calc( 50% - 3000px);
   		border-radius: 0%;
    }
}

@keyframes bim {
    from{
        opacity: 0;
    }
    25%{
    	opacity: 1;
    }

    to{
        opacity: 1;
    }
}


@keyframes gg {
    from{
    	opacity: 1;
        top: 200px;
    }

    to{
        opacity: 1;
        top: 200px;
    }
}

body{
	background: black;
	margin: 0;
	padding: 0;
	font-family: 'Paytone One', sans-serif;
	overflow: hidden;
}

#wait{
	background: black;
	position: fixed;
	width: 100%;
	height: 100%;
}


#wait > div{
	position: absolute;
	top: calc( 50% - 15px );
	left: calc( 50% - 150px );
	width: 300px;
	color: white;
	opacity: 0;
	animation: pp;
	animation-duration: 4s;
    animation-fill-mode: forwards;
    text-align: center;
    text-transform: uppercase;
    font-size: 16pt;
}

#wait > div:nth-child(1){
	animation-delay: 1s;
}


#wait > div:nth-child(2){
	animation-delay: 4s;
}


#wait > div:nth-child(3){
	animation-delay: 7s;
}


#wait > div:nth-child(4){
	animation-delay: 10s;
}

#content {
	background: #eb6286;
	position: absolute;
	border-radius: 50%;
	width: 0;
	height: 0;

	animation: grow;
	animation-duration: .5s;
	animation-timing-function: cubic-bezier(0.94, 0, 1, 1);
    animation-fill-mode: forwards;
	animation-delay: 10s;
	overflow: hidden;
}

#content-body{
	opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
}

#content-wrapper{
	position: relative;
}

#content-wrapper > div{
	animation: bim;
	animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
    position: absolute;
}


#content-wrapper > div:nth-child(1){
	animation-delay: 10.5s;
}

.cls-2{
    animation: bim;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
	animation-delay: 10.6s;
}

.cls-pioche{
	animation: bim;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
	animation-delay: 10.8s;
}

.cls-1{
	animation: bim;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
	animation-delay: 12.5s;
}

#logo{
    width: 50%;
    height: 50%;
    left: 25%;
    top: 20vh;
}

#content-wrapper > div#prepare{
    right: 10px;
    top: 10px;
    opacity: 0;
    
    animation: bim;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: 14s;

    font-size: 16px;
    text-transform: uppercase;
}

#video{
    position: fixed;
    z-index: 999;
}