/* ===== Animations ===== */
@keyframes johan {
	0% { 	bottom: 3vh;	left: -60vh; }
	5% { 	bottom: 3vh;	left: -60vh; }
	30% { 	bottom: 0;		left: calc(50% - 30vh); }
	70% { 	bottom: 0;		left: calc(50% - 30vh); }
	95% { 	bottom: -3vh;	left: 101vw; }
	100% { 	bottom: -3vh;	left: 101vw; }
}
@keyframes parachute {
	0%  { 	top: -210px;	left: 30%; z-index: 150; transform: rotateZ(35deg) scaleX(1); }
	12% { 											transform: rotateZ(35deg) scaleX(1); }
	15% { 	top: 10vh;		left: 55%; z-index: 150; }
	20% { 	top: 10vh;		left: 55%; z-index: 22; transform: rotateZ(-35deg) scaleX(-1); }
	30% { 											transform: rotateZ(-35deg) scaleX(-1); }
	35% { 	top: 40vh;		left: 20%; z-index: 22; }
	40% { 	top: 40vh;		left: 20%; z-index: 22; transform: rotateZ(35deg) scaleX(1); }
	75% { 	top: 70vh;		left: 70%; z-index: 22; transform: rotateZ(35deg) scaleX(1); }
	100% { 	top: 70vh;		left: 70%; z-index: 22; transform: rotateZ(35deg) scaleX(1); }
}
@keyframes ballon_traverse {
	0% { top: 40vh; left: 120vw; }
	5% { top: 40vh; left: 120vw; }
	80% { top: 25vh; left: -450px; }
	100% { top: 25vh; left: -450px; }
}
	@keyframes balance {
		from { transform: rotateZ(0deg); }
		to { transform: rotateZ(-20deg); }
	}
@keyframes shake {
	0% { transform: rotate(0deg); }
	5% { transform: rotate(4deg); }
	15% { transform: rotate(-4deg); }
	25% { transform: rotate(4deg); }
	35% { transform: rotate(-4deg); }
	45% { transform: rotate(4deg); }
	55% { transform: rotate(-4deg); }
	65% { transform: rotate(4deg); }
	70% { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}

/* ===== Fond ===== */
#fond {
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
	#fd_ciel {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, white 0%, rgb(122,170,209) 50%, rgb(122,170,209) 100%);
	}
	
		#fd_centrale {
			position: absolute;
			z-index: 20;
			bottom: 25vh;
			left: calc(50% - 50vh);
			width: 100vh;
			max-width: 90vw;
			height: 79vh;
			background: url('img/fd_centrale.png') no-repeat;
			background-size: contain;
			background-position: bottom center;
		}
		#fd_chateau {
			position: absolute;
			z-index: 30;
			bottom: 25vh;
			left: 50%;
			width: 75vh;
			max-width: 60vw;
			height: 48vh;
			background: url('img/fd_chateau.png') no-repeat;
			background-size: contain;
			background-position: bottom center;
		}
		#fd_full {
			position: absolute;
			z-index: 40;
			bottom: 6vh;
			left: calc(50% - 64vh);
			width: 128vh;
			max-width: 110vw;
			height: 28vh;
			background: url('img/fd_full.png') no-repeat;
			background-size: contain;
			background-position: bottom center;
		}
		#fd_pickup {
			position: absolute;
			z-index: 45;
			width: 60vh;
			max-width: 70vw;
			height: 28vh;
			background: url('img/fd_pickup.png') no-repeat;
			background-size: contain;
			background-position: bottom left;
			animation: johan 10s ease-in-out 0s infinite;
		}
	
		#fd_parachute {
			position: absolute;
			z-index: 15;
			width: 152px;
			height: 200px;
			background: url('img/fd_parachute.png') no-repeat;
			background-size: contain;
			background-position: center;
			transform-origin: top center;
			animation: parachute 20s ease-in-out 0s infinite;
		}
		#fd_ballon {
			position: absolute;
			z-index: 22;
			top: 0;
			left: 0;
			width: 118px;
			height: 200px;
			background: url('img/fd_ballon.png') no-repeat;
			background-size: contain;
			background-position: center;
			transform-origin: top center;
			animation: ballon_traverse 35s linear 0s infinite, balance 3s ease-in-out 0s alternate infinite;
		}
			#fd_fanion {
				position: absolute;
				z-index: 23;
				top: 88px;
				left: 43px;
				width: 300px;
				transform-origin: bottom left;
				animation: balance 5s ease-in-out 0s alternate infinite;
			}
	
	#fd_herbe {
		position: absolute;
		z-index: 25;
		top: 70vh;
		left: calc(0 - 70vw);
		width: 140vw;
		height: 40vh;
		transform: rotate(-1.5deg);
		background: linear-gradient(to right, rgb(227,225,58) 0%, rgb(177,185,53) 100%);
	}
	#fd_buisson1 {
		position: absolute;
		z-index: 35;
		bottom: 21vh;
		left: 0;
		width: 125vh;
		max-width: 35vw;
		height: 50vh;
		background: url('img/fd_buisson1.png') no-repeat;
		background-size: contain;
		background-position: bottom center;
	}
	#fd_buisson2 {
		position: absolute;
		z-index: 35;
		bottom: 23vh;
		left: calc(50% + 50vh);
		width: 65vh;
		max-width: 35vw;
		height: 40vh;
		background: url('img/fd_buisson2.png') no-repeat;
		background-size: contain;
		background-position: bottom center;
	}

/* ===== Header ===== */
#bartop {
	position: fixed;
	z-index: 150;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	height: 30px;
	color: white;
	background: linear-gradient(to right, rgb(0,102,171) 0%, rgb(72,94,122) 100%);
	box-shadow: 0 5px 5px rgb(71,78,120);
}

header div img { position: absolute; }
	header div:hover img { animation: shake 2s linear 0s infinite; }

	header #menu_infos, header #menu_parcours, header #menu_loger {
		position: fixed;
		z-index: 100;
		top: 5px;
		width: 240px;
		height: 70px;
		line-height: 35px;
		padding-top: 28px;
		box-sizing: border-box;
		font-size: 2em;
		font-family: 'Twingo';
		text-align: center;
		transition: all 0.2s ease-in-out;
		vertical-align: bottom;
	}

	#menu_infos {
		left: calc(50% - 450px);
		border: 2px solid rgb(23,90,16);
		background: linear-gradient(135deg,rgb(144,202,115) 0%,rgb(70,126,33) 100%);
		box-shadow: -4px 4px 2px rgb(23,90,16);
		transform: rotate(-3deg);
	}
		#menu_infos a { color: white; }
			#menu_infos a:hover { color: rgb(255,188,41); text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black; }
		#menu_infos img { top: 25px; left: -60px; }
		
	#menu_parcours {
		left: calc(50% - 120px);
		border: 2px solid rgb(30,30,100);
		background: linear-gradient(135deg,rgb(0,162,232) 0%,rgb(0,100,135) 100%);
		box-shadow: -4px 4px 2px rgb(30,30,100);
		transform: rotate(3deg);
	}
		#menu_parcours a { color: white; }
			#menu_parcours a:hover { color: rgb(246,183,70); text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black; }
		#menu_parcours img { top: 30px; left: -70px; }
		
	#menu_loger {
		left: calc(50% + 210px);
		border: 2px solid rgb(172,22,31);
		background: linear-gradient(135deg, rgb(255,188,41) 0%,rgb(237,111,70) 100%);
		box-shadow: -4px 4px 2px rgb(191,21,34);
		transform: rotate(-3deg);
	}
		#menu_loger a { color: white; }
			#menu_loger a:hover { color: rgb(144,202,115); text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black; }
		#menu_loger img { top: 25px; left: -40px; }
	
	#titre {
		position: fixed;
		top: 100px;
		left: calc(50% - 350px);
		font-family: 'Twingo';
		font-size: 3.2em;
		text-align: center;
		text-shadow: 2px 2px white, -2px 2px white, 2px -2px white, -2px -2px white;
	}
		#titre a { color: rgb(14,118,189); }
		#titre_plus {
			font-size: 1.3em;
			font-weight: bold;
			color: rgb(40,56,144);
			margin-left: 100px;
		}
	
	#tshirt {
		position: absolute;
		top: 90px;
		left: calc(50% - 450px);
		font-family: 'Twingo';
		text-align: center;
		font-size: 1.1em;
		transform: rotate(-5deg);
	}
		#tshirt img {
			position: relative;
			width: 140px;
		}
		#tshirt a { color: white; }
		#tshirt:hover a { text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black; }

/* ===== Footer ===== */
footer {
	position: fixed;
	z-index: 150;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background: linear-gradient(to right, rgb(0,102,171) 0%, rgb(72,94,122) 100%);
	box-shadow: 0 -5px 5px rgb(71,78,120);
	text-align: center;
	color: white;
	border-radius: 100% 100% 0 0;
}
	footer a { color: white; transition: all .3s linear; }
		footer a:hover { color: rgb(246,183,70); text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black; }

/* ===== Pages ===== */
#corps {
	position: relative;
	z-index: 60;
	width: 900px;
	min-height: calc(100vh - 270px);
	box-sizing: border-box;
	margin: 250px auto 0;
	padding-top: 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 70px;
	background-color: rgba(183,195,59,0.8);
	color: white;
	font-size: 1.1em;
}
	#inscription {
		position: absolute;
		top: 13px;
		right: 5px;
		font-size: 1.3em;
		color: black;
		cursor: not-allowed;
	}
	 #inscription:hover {
		 text-shadow: 1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;
	 }
	
/* ===== Listing ===== */
table.listing {
	width: 100%;
	border-collapse: collapse;
	color: black;
}
	table.listing td {
		border: 1px solid black;
		padding: 3px;
		background-color: rgb(246,183,70);
	}
	table.listing th:nth-child(n+2) {
		border: 1px solid black;
		padding: 3px;
		background-color: rgb(30,30,100);
		color: white;
	}
	th.day {
		width: 25px;
	}
	td.nb_vehicules {
		text-align: center;
		background-color: rgb(30,30,100) !important;
		color: white;
	}
	table.listing td:nth-child(2) a {
		color: white;
	}
	td.present { background-color: green !important; }
	td.absent { background-color: red !important; }


/*===== VERSION TABLETTES/MOBILES EN MODE PORTRAIT =====*/
@media (orientation: portrait) {
	@keyframes johan {
		0% { 	bottom: 8vh;	left: -70vw; }
		5% { 	bottom: 8vh;	left: -70vw; }
		30% { 	bottom: 5vh;	left: calc(50% - 35vw); }
		70% { 	bottom: 5vh;	left: calc(50% - 35vw); }
		95% { 	bottom: 3vh;	left: 101vw; }
		100% { 	bottom: 3vh;	left: 101vw; }
	}
	
	#fd_centrale { left: calc(50% - 45vw); }
	#fd_chateau { bottom: 28vh; }
	#fd_full { left: calc(50% - 55vw); bottom: 18vh; }
	#fd_buisson1 { bottom: 28vh; }
}