/* VARIABLEN */

:root {
    --timing: 4s;
}


/* SLIDE UP */


.slide {
	animation-name: slide;
	animation-duration: var(--timing);
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

	@keyframes slide {
		0% {
			transform: translateY(100%);
		}
		75% {
			transform: translateY(100%);
		}		
		100% {
			transform: translateY(0%);
		}		
	}


/* FADE IN */


.nav-fade {
	animation-name: nav-fade;
	animation-duration: var(--timing);
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

	@keyframes nav-fade {
		0% {
			opacity: 0;
		}
		75% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}	
	}


/* FADE IN & HEIGHT */


.fade {
	animation-name: fade;
	animation-duration: var(--timing);
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

	@keyframes fade {
		0% {
			opacity: 1;
			height: 140vH;
		}
		10% {
			opacity: 1;
			height: 140vH;
		}
		50% {
			opacity: 1;
			height: 140vH;
		}
		75% {
			opacity: 1;
			height: 140vH;
		}			
		100% {
			opacity: 1;
			height: 120vH;
		}	
	}


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

	@keyframes fade {
		0% {
			opacity: 1;
			height: 120vH;;
		}
		10% {
			opacity: 1;
			height: 120vH;
		}
		50% {
			opacity: 1;
			height: 120vH;
		}
		75% {
			opacity: 1;
			height: 120vH;
		}			
		100% {
			opacity: 1;
			height: 100vH;;
		}		
	}
}


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

	@keyframes fade {
		0% {
			opacity: 1;
			height: 130vH;
			transform: translateY(-10vH);
		}
		10% {
			opacity: 1;
			height: 130vH;
		}
		50% {
			opacity: 1;
			height: 130vH;
		}
		75% {
			opacity: 1;
			height: 130vH;
		}			
		100% {
			opacity: 1;
			height: 110vH;
		    transform: translateY(-10vH);
		}		
	}
}

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

	@keyframes fade {
		0% {
			opacity: 1;
			height: 120vH;
			transform: translateY(-10vH);
		}
		10% {
			opacity: 1;
			height: 120vH;
		}
		50% {
			opacity: 1;
			height: 120vH;
		}
		75% {
			opacity: 1;
			height: 120vH;
		}			
		100% {
			opacity: 1;
			height: 90vH;
		    transform: translateY(-10vH);
		}		
	}
}