body{
	background-attachment:fixed;/*permet au fond de ne pas bouger quand on fait défiler le site*/
	background-repeat:no-repeat;/*permet de ne pas reproduire l'image de fond*/
	background-position:center center;/*permet de centrer l'image dans les deux axes (x et y)*/
	/*background-image:url('barren-1834861_960_720.jpg');/*définie dans url() l'image qui doit être chargée par le site web pour le fond*/
	background-size:1800px;/*permet de donner une taille à l'image de fond
	/*background-color:#353538;*/
}
#body{
	visibility:hidden;
}
h1{
	font-size:50px;
	font-family:Nyala;
	color:#ff6600;
}
h2{
	font-size:30px;
	font-family:Roboto-Light;
	color:#ff6600;
}
p {
	font-family:Roboto-Light;
	font-size:25px;
	/*color:white;*/
	color:white;
}
.header{
	background-color:#666666;
	color:white;
	font-size:25px;
	border:5px #666666 solid;
	margin:5px;
	/*margin-left:15px;*/
}
.header h1{
	margin-left:35px;
	font-family:Roboto-Light;
}
.blocktext{
	background-color:#666666;
	color:white;
	font-size:15px;
	border:5px #666666 solid;
	margin:5px;
	margin-bottom:11px;
}
.blocktext p{
	font-family:Roboto-Light;
	text-align:center;
	margin-top:5px;
	margin-bottom:5px;
}
.texte_blanc{
	color:white;
}
.video{
	width:350px;
	height:197px;
}
div.page_principale{
	background-color:#666666;
	opacity:20%;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	left:31%;	
	color:white;
	min-width:500px; 
	max-width:1000px;
	border-radius:16px;
	box-shadow:0px 0px 50px 60px gray;
}
a{
	text-decoration:none;
	color:#ff6600;
}
#logo{
	position:absolute;
	left:80%;
	width:85px;
	border-radius:8px;
}
a:hover{
	color:white;
}
img#pochette{
	width:560px;
	border-color:#ff9900;
	border-width:5px;
	border-radius:16px;
}
img#pochette:hover{
	width:570px;
	border-color:#ff9900;
	border-width:5px;
	border-radius:16px;
}
.youtube{
	 border-radius:16px;
	 border-color:#ff9900;
	 border-width:5px;
}
.titre{
	border-color:white;
	border-width:2px;
	border-style:solid;
	text-align:center;
	margin-top: auto;
	margin-bottom: auto;
}
@font-face {
    font-family: "Roboto-Light";
    src: url('police/Roboto-Light.ttf');
}
@font-face {
    font-family: "Vintage Avalanche";
    src: url('police/Vintage Avalanche.otf');
}
div#video1{
	display:inline;
	position:relative;
}
div#video1 p:hover{
	color:#ff6600;
}
div#video2{
	display:inline;
	position:relative;
}
div#video2 p:hover{
	color:#ff6600;
}
div#video3{
	display:block;
	position:relative;
}
div#video3 p:hover{
	color:#ff6600;
}
div#video4{
	display:block;
	position:relative;
}
video5{
	margin-right:5px;
	margin-left:5px;
}
div#video4 p:hover{
	color:#ff6600;
}
div#footer{
	display:block;
	position:relative;
}
#mail:hover{
	color:#ff6600;
}
@video-width: 780px;

iframe {  
  width: 97.56vw; 
  max-width: @video-width;
  height: 56.25vw; 
  margin-left:5px;
  margin-right:5px;
}

@media (min-width:@video-width) {
iframe {
    height: calc(@video-width * 0.5628205128205128);
  }
}

#loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid gray;
  border-bottom: 16px solid gray;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

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