@charset "UTF-8";
/* CSS Document */
@import "animations.css";
body {
	background-color: black;
	width: 120vw;
	height: 120vh;
	padding:1vw;
	margin-left:-1vw;
	margin-top:-1vw;
	overflow:hidden;
}
#contenu {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	color: #F9F600;
	font-style: italic;
	font-weight: bold;
	font-size: 12px;
	filter: drop-shadow(0 0 60px #fff);
	-webkit-filter: drop-shadow(0 0 60px #fff);
	z-index:99;
}
a {
	color: #F9F600;
	font-style: italic;
	font-weight: bold;
	font-size: 24px;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
#ring {
	float: none;
	border-left: solid 70px transparent;
	border-right: solid 70px transparent;
	border-bottom: solid 70px transparent;
	filter: drop-shadow(0 0 60px #fff);
	z-index: 0;
}
#radiocheval {
	position: fixed;
	bottom: 70px;
	width: 150px;
	left: 50px;
	display: none;
}
/* TV SET */
#tv {
	position:fixed;
	width:10vw;
	top:17vh;
	left:5vw;
	text-align:center;
	z-index:101;
	opacity:0;
}
#tv:hover {
	cursor:pointer;
}
#tv_set {
	width:100%;
}
#tv_img {
	position:absolute;
	z-index:-1;
	left:3%;
	top:9%;
	width:75%;
	height:80%;
	animation: SEQUENCEIMAGE 10s linear 4s infinite;
	-moz-animation: SEQUENCEIMAGE 10s linear 4s infinite;/* Firefox: */
	-webkit-animation: SEQUENCEIMAGE 10s linear 4s infinite;/*Safari and Chrome: */
	-o-animation: SEQUENCEIMAGE 10s linear 4s infinite;/* Opera: */
}
#tv_vid {
	position:absolute;
	z-index:-1;
	left:1%;
	top:-10%;
	width:98%;
	height:120%;
}
#tv_back {
	position:absolute;
	z-index:-2;
	left:3%;
	top:9%;
	background-color:black;
	width:75%;
	height:80%;
}
#cheval {
	opacity: 0;
	height: 50vh;
	margin-top: 25vh;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	animation: bounce2 60s ease-in-out 0s infinite alternate;
	-moz-animation: bounce2 60s ease-in-out 0s infinite alternate;/* Firefox: */
	-webkit-animation: bounce2 60s ease-in-out 0s infinite alternate;/*Safari and Chrome: */
	-o-animation: bounce2 60s ease-in-out 0s infinite alternate;/* Opera: */
	cursor: pointer;
}
#cheval:hover {
	height:55vh;
	margin-top:22vh;
}
#cheval:active {
}

#videoPlayer {
	z-index:1;
	position:fixed;
	width:100vw;
	height:100vh;
	padding:10vh 10vw;
	border:none;
	top:-2vh;
	left:-2vw;
	opacity:0;
	
}


#back_color {
	position:fixed;
	z-index:-1;
	width: 100vw;
	height: 100vh;
	animation:myfirst 35s linear 0s;
}

@media only screen and (min-width: 768px) {
		  #parallax {
			  position:fixed;
			  width:150%;
			  height:100%;
			  background:url(cloudzzzz.jpg);
			  background-repeat:repeat;
			  background-size:30vw;
			  margin-left:-1vw;
			  margin-top:-1vh;
			  background-attachment:scroll;
			  background-position:0vw 50%;
			  animation: bounce 30s linear 0s infinite ;
			  -moz-animation: bounce 30s linear 0s infinite ;/* Firefox: */
			  -webkit-animation: bounce 30s linear 0s infinite ;/*Safari and Chrome: */
			  -o-animation: bounce 30s linear 0s infinite ;/* Opera: */
			  z-index:0;
			  cursor:url(computer.png), auto;
			  pointer-events: none;
		  }
		}
		
@media only screen and (max-width: 767px) {
		  #parallax {
			  position:fixed;
			  width:200vw;
			  height:200vh;
			  background:url(cloudzzzz.jpg);
			  background-repeat:repeat;
			  background-size:80vw;
			  margin-left:-1vw;
			  margin-top:-1vh;
			  background-attachment:scroll;
			  background-position:0vw 50%;
			  animation: bounce 30s linear 0s infinite ;
			  -moz-animation: bounce 30s linear 0s infinite ;/* Firefox: */
			  -webkit-animation: bounce 30s linear 0s infinite ;/*Safari and Chrome: */
			  -o-animation: bounce 30s linear 0s infinite ;/* Opera: */
			  z-index:0;
			  cursor:url(cheval3_cursor.png), auto;
			  pointer-events: none;
		  }
		}
		
		
#logo {
	position: fixed;
	top:80vh;
	bottom:15vh;
	left:10vw;
	width:8vw;
	margin-left:-4vw;
	height:8vw;
	margin-top:-4vw;
	background-image:url(cheval3.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:25%;
	background-color:pink;
	border-radius:20vw;
	z-index:199;
}
#logo:hover {
	cursor:pointer;
	width:10vw;
	height:10vw;
	margin-left:-5vw;
	margin-top:-5vw;
	transition-duration:0.5s;
}
#logo:active {
	width:14vw;
	height:14vw;
	margin-left:-7vw;
	margin-top:-7vw;
	width:25vw;
	transition-duration:0.5s;
}
#video_player1 {
	position:fixed;
	height:120vh;
	width:120vw;
	left:-10vw;
	top:-10vh;
	cursor:pointer;
}
#video_player2 {
	position:absolute;
	width:20vw;
	left:5vh;
	top:5vh;
	
	z-index:2;
}
#video_player2:hover {
	cursor:pointer;
	width:22vw;
	transition-duration:0.5s;
}
#video_player2:active {
	width:25vw;
	transition-duration:0.5s;
}
#label {
	position:fixed;
	bottom:5vh;
	left:5vh;
	width:20vw;
	height:auto;
	background-color:black;
	background-image:url(https://borisdumesnilpoulin.com/newsite/files/image/space.jpg);
	z-index:99;
	padding:1vw 1vw 1vw 1.3vw;
	color:white;
	font-size:1.7vh;
	font-family:'Montserrat', sans-serif;
	opacity:0;
	box-shadow:0px 0px 10px black;
	transition:padding 0.5s ease-in-out;
}
#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;
	filter:hue-rotate(160deg);
}
@keyframes spin {
0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(360deg);
}