@charset "utf-8";

/* Page */
#page_bg {
	-webkit-animation: page_bg_fade 0.5s 1 ease forwards;
	animation: page_bg_fade 0.5s 1 ease forwards;
}


/* Header */
header {
	top:25%;
	-webkit-animation: start_header 1s 1 ease forwards;
	animation: start_header 1s 1 ease forwards;
	-webkit-animation-delay:4.5s;
	animation-delay:4.5s;
}
@keyframes start_header {
	0% { top:25%; }
	100% { top:0%; }
}

#logo {
	-webkit-animation-delay:3s;
	animation-delay:3s;
}


/* Hand */
#header_hand {
	opacity:0;
	-webkit-animation: start_header_hand .1s 1 linear forwards;
	animation: start_header_hand .1s 1 linear forwards;
	-webkit-animation-delay:1.95s;
	animation-delay:1.95s;
}
@keyframes start_header_hand {
	0% { opacity:0;	}
	100% { opacity:1; }
}

#hand {
	left:-25em;
	-webkit-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
	-webkit-animation-delay:2s;
	animation-delay:2s;
}
@keyframes start_hand {
	0% {
		left:-25em;
		-webkit-transform: rotateZ(0deg);
		transform: rotateZ(0deg);
	}
	80% {
		left:-0.1em;
		-webkit-transform: rotateZ(0deg);
		transform: rotateZ(0deg);
	}
	100% {
		left:-1.1em;
		-webkit-transform: rotateZ(-3deg);
		transform: rotateZ(-3deg);
	}
}


/* Menu 1 */
#menu_1 {
	-webkit-animation-delay:2.4s;
	animation-delay:2.4s;
	top: 5.8em;
	right: 23em;
}
@keyframes start_menu {
	0% {
		top: 5.8em;
		right: 23em;
		-webkit-transform: rotateZ(-120deg);
		transform: rotateZ(-120deg);
	}
	100% {
		top:7.5em;
		right:9.75em;
		-webkit-transform: rotateZ(0deg);
		transform: rotateZ(0deg);
	}
}

#menu_1_bg {
	background-image:url(../Images/bg_menu_1.png);
	-webkit-animation-delay:2.4s;
	animation-delay:2.4s;
	background-color: rgba(102,184,166,1);
}
@keyframes start_menu_bg {
	0% {
		top: -1.5em;
		left: -1.5em;
		width: 3em;
		height: 3em;
		border-radius: 100%;
		background-position: 0em 1em;
		background-color: rgba(102,184,166,1);
	}
	25% {
		background-color: rgba(102,184,166,0);
	}
	100% {
		top: -7.5em;
		left: -11.75em;
		width:23.5em;
		height:15em;
		border-radius: 0%;
		background-position: 0em 0em;
		background-color: rgba(102,184,166,0);
	}
}

@keyframes fade_menu_bg {
	0% {
		top: -7.5em;
		left: -11.75em;
		width:23.5em;
		height:15em;
		border-radius: 0%;
		background-position: 0em 0em;
		background-color: rgba(102,184,166,0);
		opacity:1;
	}
	100% {
		top: -7.5em;
		left: -11.75em;
		width:23.5em;
		height:15em;
		border-radius: 0%;
		background-position: 0em 0em;
		background-color: rgba(102,184,166,0);
		opacity:0;
	}
}

#menu_1 ul li:nth-of-type(1) { -webkit-animation: menu_1_1 .5s 1 ease forwards; -webkit-animation-delay:3.5s; animation: menu_1_1 .5s 1 ease forwards; animation-delay:3.5s; }
#menu_1 ul li:nth-of-type(2) { -webkit-animation: menu_1_2 .5s 1 ease forwards; -webkit-animation-delay:3.6s; animation: menu_1_2 .5s 1 ease forwards; animation-delay:3.6s;  }
#menu_1 ul li:nth-of-type(3) { -webkit-animation: menu_1_3 .5s 1 ease forwards; -webkit-animation-delay:3.7s; animation: menu_1_3 .5s 1 ease forwards; animation-delay:3.7s;  }
#menu_1 ul li:nth-of-type(4) { -webkit-animation: menu_1_4 .5s 1 ease forwards; -webkit-animation-delay:3.8s; animation: menu_1_4 .5s 1 ease forwards; animation-delay:3.8s; }

#menu_1 ul li:nth-of-type(1):hover { -webkit-transform:scale(1.75); transform:scale(1.75); background-color:rgb(240,186,66); box-shadow: 6px 13px 8px rgba(88,88,88,.5); }
#menu_1 ul li:nth-of-type(2):hover { -webkit-transform:scale(1.75); transform:scale(1.75); background-color:rgb(154,25,21); box-shadow: 6px 13px 8px rgba(88,88,88,.5); }
#menu_1 ul li:nth-of-type(3):hover { -webkit-transform:scale(1.75); transform:scale(1.75); background-color:rgb(20,65,123); box-shadow: 6px 13px 8px rgba(88,88,88,.5); }
#menu_1 ul li:nth-of-type(4):hover { -webkit-transform:scale(1.75); transform:scale(1.75); background-color:rgb(106,179,130); box-shadow: 6px 13px 8px rgba(88,88,88,.5); }


/* Subparts */
#slogan {
	-webkit-animation-delay:5.5s;
	animation-delay:5.5s;
}

#jameda {
	opacity:0;
	-webkit-transform:rotateY(90deg);
	transform:rotateY(90deg);
	-webkit-transform-origin: 36% 0;
	transform-origin: 36% 0;
	-webkit-animation: start_jameda 1s 1 ease-in forwards;
	animation: start_jameda 1s 1 ease-in forwards;
	-webkit-animation-delay:5.5s;
	animation-delay:5.5s;
}
@keyframes start_jameda {
	0% { opacity:1; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
	100% { opacity:1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}

#onlinetermin {
	-webkit-animation-delay:6s;
	animation-delay:6s;
}

main {
	min-height:30em;
}

.content_r:nth-of-type(1), .content_l:nth-of-type(1) { -webkit-animation-delay:6.5s; animation-delay:6.5s; }
.content_r:nth-of-type(2), .content_l:nth-of-type(2) { -webkit-animation-delay:7s; animation-delay:7s; }
.content_r:nth-of-type(3), .content_l:nth-of-type(3) { -webkit-animation-delay:7.5s; animation-delay:7.5s; }
.content_r:nth-of-type(4), .content_l:nth-of-type(4) { -webkit-animation-delay:8s; animation-delay:8s; }

footer {
	background-color:rgb(102,184,166);
	-webkit-animation-delay:5.5s;
	animation-delay:5.5s;
}


/* Responsive */
@media all and (min-width:1600px) {
	main {
		width: 79em;
		margin: 0 0 0 -39.5em;
	}
}

@media all and (max-width:1023px) and (orientation: landscape) {
	main {
		min-height:80em;
	}
}
@media all and (max-width:1023px) {
	/* Header */
	#logo {
		-webkit-animation-delay:3s;
		animation-delay:3s;
	}

	/* Menu 1 */
	#menu_1 {
		top: 4em;
		right: 16.4em;
		-webkit-animation-delay:2.4s;
		animation-delay:2.4s;
	}

	#menu_1_bg {
		-webkit-animation-delay:2.4s;
		animation-delay:2.4s;
	}

	#menu_1 ul li:nth-of-type(1) { -webkit-animation: menu_1_1_640 .5s 1 ease forwards; -webkit-animation-delay:3.5s; animation: menu_1_1_640 .5s 1 ease forwards; animation-delay:3.5s; }
	#menu_1 ul li:nth-of-type(2) { -webkit-animation: menu_1_2_640 .5s 1 ease forwards; -webkit-animation-delay:3.6s; animation: menu_1_2_640 .5s 1 ease forwards; animation-delay:3.6s;  }
	#menu_1 ul li:nth-of-type(3) { -webkit-animation: menu_1_3_640 .5s 1 ease forwards; -webkit-animation-delay:3.7s; animation: menu_1_3_640 .5s 1 ease forwards; animation-delay:3.7s;  }
	#menu_1 ul li:nth-of-type(4) { -webkit-animation: menu_1_4_640 .5s 1 ease forwards; -webkit-animation-delay:3.8s; animation: menu_1_4_640 .5s 1 ease forwards; animation-delay:3.8s; }

	#menu_1 ul li:nth-of-type(1):hover { -webkit-transform:scale(1.375); transform:scale(1.375); }
	#menu_1 ul li:nth-of-type(2):hover { -webkit-transform:scale(1.375); transform:scale(1.375); }
	#menu_1 ul li:nth-of-type(3):hover { -webkit-transform:scale(1.375); transform:scale(1.375); }
	#menu_1 ul li:nth-of-type(4):hover { -webkit-transform:scale(1.375); transform:scale(1.375); }
}

@keyframes start_menu_640 {
	0% {
		top: 4em;
		right: 16.4em;
		-webkit-transform: rotateZ(-120deg);
		transform: rotateZ(-120deg);
	}
	100% {
		top:4.69em;
		right:6.1em;
		-webkit-transform: rotateZ(0deg);
		transform: rotateZ(0deg);
	}
}
@keyframes start_menu_bg_640 {
	0% {
		top: -1.5em;
		left: -1.5em;
		width: 3em;
		height: 3em;
		border-radius: 100%;
		background-position: 0em 1em;
		background-color: rgba(102,184,166,1);
	}
	25% {
		background-color: rgba(102,184,166,0);
	}
	100% {
		top: -4.69em;
		left: -7.34em;
		width:14.69em;
		height:9.375em;
		border-radius: 0%;
		background-position: 0em 0em;
		background-color: rgba(102,184,166,0);
	}
}
@keyframes fade_menu_bg_640 {
	0% {
		top: -4.69em;
		left: -7.34em;
		width:14.69em;
		height:9.375em;
		border-radius: 0%;
		background-position: 0em 0em;
		background-color: rgba(102,184,166,0);
		opacity:1;
	}
	100% {
		top: -4.69em;
		left: -7.34em;
		width:14.69em;
		height:9.375em;
		border-radius: 0%;
		background-position: 0em 0em;
		background-color: rgba(102,184,166,0);
		opacity:0;
	}
}

@media all and (max-width:639px) {
	/* Menu 1 */
	#menu_1 {
		top: 4em;
		right: 50%;
		-webkit-animation-delay:2.4s;
		animation-delay:2.4s;
	}
}
@keyframes start_menu_320 {
	0% {
		top: 4em;
		right: 50%;
		-webkit-transform: rotateZ(-120deg);
		transform: rotateZ(-120deg);
	}
	100% {
		top:4.69em;
		right:6.1em;
		-webkit-transform: rotateZ(0deg);
		transform: rotateZ(0deg);
	}
}

@media all and (max-width:379px) {
	#menu_1 ul li:nth-of-type(1) { -webkit-animation: menu_1_1_320 .5s 1 ease forwards !important; -webkit-animation-delay:3.5s !important; animation: menu_1_1_320 .5s 1 ease forwards !important; animation-delay:3.5s !important; }
	#menu_1 ul li:nth-of-type(2) { -webkit-animation: menu_1_2_320 .5s 1 ease forwards !important; -webkit-animation-delay:3.6s !important; animation: menu_1_2_320 .5s 1 ease forwards !important; animation-delay:3.6s !important;  }
	#menu_1 ul li:nth-of-type(3) { -webkit-animation: menu_1_3_320 .5s 1 ease forwards !important; -webkit-animation-delay:3.7s !important; animation: menu_1_3_320 .5s 1 ease forwards !important; animation-delay:3.7s !important;  }
	#menu_1 ul li:nth-of-type(4) { -webkit-animation: menu_1_4_320 .5s 1 ease forwards !important; -webkit-animation-delay:3.8s !important; animation: menu_1_4_320 .5s 1 ease forwards !important; animation-delay:3.8s !important; }

	#menu_1 ul li:nth-of-type(1):hover { -webkit-transform:scale(1.2); transform:scale(1.2); }
	#menu_1 ul li:nth-of-type(2):hover { -webkit-transform:scale(1.2); transform:scale(1.2); }
	#menu_1 ul li:nth-of-type(3):hover { -webkit-transform:scale(1.2); transform:scale(1.2); }
	#menu_1 ul li:nth-of-type(4):hover { -webkit-transform:scale(1.2); transform:scale(1.2); }
}