/* Télé-Chevreuil - Feuille de styles principale */

@charset "UTF-8";

/* Le corps */

body {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	background-color:black;
	margin: 0;
	padding: 0;
	overflow:hidden;
}

/* Le fond */

#back {
	position:absolute;
	top:0; left:0;
	background-color:blue;
	opacity:1;
	z-index:-1
}

/* Les videos */
#scenery {
	position:absolute;
	top:0; left:0;
}
.video_full  {
	position:absolute;
	top:0;
	left:0;
	height:110vh;
	width:110vw;
}
#vid_1 {
	opacity:1;
	z-index:1;
	display:none;
}
#vid_2 {
	opacity:1;
	z-index:2;
	display:none;
}
#atmosphere {
	opacity:1;
	z-index:3;
	position:absolute;
	top:0;
	left:0;
}
.image_full  {
	position:absolute;
	top:0;
	left:0;
	height:auto;
	width:110vw;
}
#img_1 {
	opacity:1;
	z-index:4;
	display:none;
}
#img_2 {
	opacity:1;
	z-index:5;
	display:none;
}
#player1 {
	display:none;
}
#player2 {
	display:none;
}

/* pas sur de devoir garder ça */

#videoContainer {
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
}
#videoLayer_1 video {
	width:100%;
}
#videoLayer_2 video {
	width:100%;
}
#videoLayer_3 video {
	width:100%;
}

/* Le texte par dessus */

#previsions {
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	text-align:center;
	padding:0 0 20vh 0;
	color:yellow;
	font-size:60px;
	font-style:italic;
	font-family:Arial, Helvetica, sans-serif;
	z-index:6;
	display:none;
}

/* Les logos et titres */

#grosLogo {
	cursor:pointer;
	position:fixed;
	width:100vw;
	height:100vh;
	z-index:7;
	opacity:0;
}

#grosLogo img {
	max-width: 60vw;
	max-height: 80vh;
	margin-left:30vw;
	margin-right:30vw;
	height: auto;
	vertical-align:central;
}

#grosTitre {
	
}

#petitLogo {
	position:fixed;
	display:none;
	bottom: 1vh;
	right: 2vw;
	width:10vw;
	height:10vw;
	z-index:8;
	background-image:url(logo/tc_logo2.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:25%;
	
	opacity:0.777;
}
#petitLogo:hover {
	cursor:pointer;
	width:15vw;
	height:15vw;
	opacity:1;
	transition-duration:0.777s;
}
#petitLogo:active {
	width:17vw;
	height:17vw;
	opacity:1;
	transition-duration:0.777s;
}

#petitTitre {
	
}

/* Les info-bulles */

#label {
	position:fixed;
	bottom:5vh;
	left:5vh;
	width:50vw;
	height:auto;
	background-color:black;
	background-image:url(images/space.jpg);
	z-index:9;
	padding:1vw 1vw 1vw 1.3vw;
	color:white;
	font-size:1.2vh;
	font-family:'Montserrat', sans-serif;
	opacity:0;
	box-shadow:0px 0px 10px black;
	transition:padding 0.5s ease-in-out;
}

@media (min-width: 876px) {
	#label {
		width:30vw;
		padding:1vw 1vw 1vw 1.3vw;
		font-size:1.2vh;
	}
}

#label:hover {
	cursor:pointer;
	padding:2vw;
	transition:padding 0.5s ease-in-out;
}
#label:active {
	padding:3vw;
	transition:padding 0.5s ease-in-out;
}
#label img {
	width:2vw;
}
#label a {
	color:#3FF;
	text-decoration:none;
}
#label a:hover {
	text-decoration:none;
	font-style:italic;
	font-weight:bolder;
}

/* La console */

#console {
	position:absolute;
	top:10vh; left:10vw;
	width:auto;
	height:auto;
	padding:1vh 1vw 2vh 1vw;
	background-color:black;
	color:#363;
	opacity:0.9;
	z-index:99;
	display:none;
}
#console button {
	position:relative;
	top:0;
	right:1px;
}

/* Le bouton MUTE */

#audio_mute {
	position:fixed;
	z-index:101;
	bottom:1vh; left:1vw;
	opacity:40%;
	cursor:pointer;
}

#audio_mute:hover {
	opacity:100%;
	transition:ease-in-out;
	transition-duration:1s;
}
#audio_mute:active {
	opacity:100%;
}

#audio_mute img {
	width:40px;
	height:40px;
	
}

#audio_mute img:hover {
	width:60px;
	height:60px;
	transition:ease-in-out;
	transition-duration:1s;
	
}

/* Éléments audio */

.audioSrc {
	z-index : 999;
	
}

/* Classes animées */

.shimmers {
	animation:shimmering 60s infinite alternate;
}

.shimmersLightly {
	animation:shimmeringLightly 400s infinite alternate;
}

.shimmersFast {
	animation:shimmering 10s infinite alternate;
}

.grows {
	animation:grow 100s infinite alternate;
}

/* Animations */

@keyframes shimmering {
	0% {
		filter:hue-rotate(0deg);
		-webkit-filter:hue-rotate(0deg);
	}
	100% {
		filter:hue-rotate(360deg);
		-webkit-filter:hue-rotate(360deg);
	}
}

@keyframes shimmeringLightly {
	0% {
		filter:hue-rotate(0deg);
		-webkit-filter:hue-rotate(0deg);
	}
	100% {
		filter:hue-rotate(120deg);
		-webkit-filter:hue-rotate(120deg);
	}
}

@keyframes spin {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}

@keyframes grow {
	0% {
		transform:scale(1);
		-webkit-transform:scale(1);
	}
	100% {
		transform:rotate(1.5);
		-webkit-transform:rotate(1.5);
	}