*{transform: none;}


.box, .box * { -moz-box-sizing:border-box; box-sizing:border-box }


#player-container1, #player-container2, #player-container3, #player-container4, #player-container5,
#player-container6, #player-container7, #player-container8, #player-container9, #player-container10,
#player-container11, #player-container12, #player-container13, #player-container14, #player-container15,
#player-container16, #player-container17, #player-container18, #player-container19, #player-container20,
#player-container21, #player-container22, #player-container23, #player-container24, #player-container25,
#player-container26, #player-container27, #player-container28, #player-container29, #player-container30{
	/*background:red;*/
	height:70vh;
}
 
#video1, #video2, #video3, #video4, #video5, 
#video6, #video7, #video8, #video9, #video10, 
#video11, #video12, #video13, #video14, #video15, 
#video16, #video17, #video18, #video19, #video20,
#video21, #video22 ,#video23, #video24, #video25,
#video26, #video27 ,#video28, #video29, #video30{
	height:75vh;
	width:75vmax;
	float:right;
	max-width:75%; 

	
	
	
	
        /*width: 100%;*/
        /*object-fit: cover; // use "cover" to avoid distortion
        position: absolute;*/

	/*
	height: 95vh; min-height: 95%;
	*/
	/*display:block;*/ 
	/*height:70vh;*/
	/*
	max-height: 95%;
	width:calc(95vh*3/2);
	height:95vh;
	*/
	background:#000; background-size:3em 3em;
	border:1px solid #444; 
	/*C'est cele qui fait tourner*/
	/*
	-webkit-animation:loading 2s linear infinite;
	animation:loading 2s linear infinite;*/
	background-image:linear-gradient(-45deg, rgba(153,0,102,.5) 25%, transparent 25%, transparent 50%, rgba(153,0,102,.5) 50%, rgba(153,0,102,.5) 75%, transparent 75%, transparent)
	
}





#infobox1, #infobox2, #infobox3, #infobox4, #infobox5, #infobox6, #infobox7, #infobox8, #infobox9, #infobox10,
#infobox11, #infobox12, #infobox13, #infobox14, #infobox15, #infobox16, #infobox17, #infobox18, #infobox19, #infobox20,
#infobox21, #infobox22, #infobox23, #infobox24, #infobox25, #infobox26, #infobox27, #infobox28, #infobox29, #infobox30, 
#video1, #video2, #video3, #video4, #video5, #video6, #video7, #video8, #video9, #video10,
#video11, #video12, #video13, #video14, #video15, #video16, #video17, #video18, #video19, #video20,
#video21, #video22, #video23, #video24, #video25, #video26, #video27, #video28, #video29, #video30, 
#playlist1, #playlist2, #playlist3, #playlist4, #playlist5, #playlist6, #playlist7, #playlist8, #playlist9, #playlist10,
#playlist11, #playlist12, #playlist13, #playlist14, #playlist15, #playlist16, #playlist17, #playlist18, #playlist19, #playlist20,
#playlist21, #playlist22, #playlist23, #playlist24, #playlist25, #playlist26, #playlist27, #playlist28, #playlist29, #playlist30
{ font-size:0.8em; 
margin:0 auto
/*margin: 0;*/
 }

#infobox1,#infobox2, #infobox3, #infobox4, #infobox5, #infobox6, #infobox7, #infobox8, #infobox9, #infobox10, 
#infobox11, #infobox12, #infobox13, #infobox14, #infobox15, #infobox16, #infobox17, #infobox18, #infobox19, #infobox20,
#infobox21, #infobox22, #infobox23, #infobox24, #infobox25, #infobox26, #infobox27, #infobox28, #infobox29, #infobox30 
{ 
/*padding:4vw 5vw;*/ 
	font-size:0.9em; 
	padding:5px;
	background:#000; 
	color:#fff; 
	text-align:center 
}

@-webkit-keyframes loading { 0% {background-position:0 0} 100% {background-position:3em 3em} }
@keyframes loading { 0% {background-position:0 0} 100% {background-position:3em 3em} }



#playlist1, #playlist2, #playlist3, #playlist4, #playlist5, #playlist6, #playlist7, #playlist8, #playlist9, #playlist10, 
#playlist11, #playlist12, #playlist13, #playlist14, #playlist15, #playlist16, #playlist17, #playlist18, #playlist19, #playlist20,
#playlist21, #playlist22, #playlist23, #playlist24, #playlist25, #playlist26, #playlist27, #playlist28, #playlist29, #playlist30
{ 
	height:100% ;
	/*height: 85vh; min-height: 85%;*/
	/*il faut retrancher la hauteur de l'infobox*/
	margin:0;padding:2px; list-style:none; 
	background:#603; border:1px solid #444; 
	border-top-color:#906; max-height:55.75vw; 
	overflow-y:scroll; -webkit-overflow-scrolling:touch
 }



#playlist1 li, #playlist2 li, #playlist3 li, #playlist4 li, #playlist5 li, #playlist6 li, #playlist7 li, #playlist8 li, #playlist9 li, #playlist10 li,
#playlist11 li, #playlist12 li, #playlist13 li, #playlist14 li, #playlist15 li, #playlist16 li, #playlist17 li, #playlist18 li, #playlist19 li, #playlist20 li,
#playlist21 li, #playlist22 li, #playlist23 li, #playlist24 li, #playlist25 li, #playlist26 li, #playlist27 li, #playlist28 li, #playlist29 li, #playlist30 li 
{ 
	position:relative; border-bottom:1px solid #906;
	 }


#playlist1 a, #playlist2 a, #playlist3 a, #playlist4 a, #playlist5 a, #playlist6 a, #playlist7 a, #playlist8 a, #playlist9 a, #playlist10 a, 
#playlist11 a, #playlist12 a, #playlist13 a, #playlist14 a, #playlist15 a, #playlist16 a, #playlist17 a, #playlist18 a, #playlist19 a, #playlist20 a,
#playlist21 a, #playlist22 a, #playlist23 a, #playlist24 a, #playlist25 a, #playlist26 a, #playlist27 a, #playlist28 a, #playlist29 a, #playlist30 a 
{ 
	display:block; color:#fff; text-decoration:none; 
	padding-left:5px;
	padding-right:1px;
/*padding:3vw 17vw 3vw 5vw;*/
}


#playlist1 a:hover, #playlist2 a:hover, #playlist3 a:hover, #playlist4 a:hover, #playlist5 a:hover, #playlist6 a:hover, #playlist7 a:hover, #playlist8 a:hover, #playlist9 a:hover, #playlist10 a:hover, 
#playlist11 a:hover, #playlist12 a:hover, #playlist13 a:hover, #playlist14 a:hover, #playlist15 a:hover, #playlist16 a:hover, #playlist17 a:hover, #playlist18 a:hover, #playlist19 a:hover, #playlist20 a:hover,
#playlist21 a:hover, #playlist22 a:hover, #playlist23 a:hover, #playlist24 a:hover, #playlist25 a:hover, #playlist26 a:hover, #playlist27 a:hover, #playlist28 a:hover, #playlist29 a:hover, #playlist30 a:hover,
#playlist1 a:focus, #playlist2 a:focus, #playlist3 a:focus, #playlist4 a:focus, #playlist5 a:focus, #playlist6 a:focus, #playlist7 a:focus, #playlist8 a:focus, #playlist9 a:focus, #playlist10 a:focus, 
#playlist11 a:focus, #playlist12 a:focus, #playlist13 a:focus, #playlist14 a:focus, #playlist15 a:focus, #playlist16 a:focus, #playlist17 a:focus, #playlist18 a:focus, #playlist19 a:focus, #playlist20 a:focus,
#playlist21 a:focus, #playlist22 a:focus, #playlist23 a:focus, #playlist24 a:focus, #playlist25 a:focus, #playlist26 a:focus, #playlist27 a:focus, #playlist28 a:focus, #playlist29 a:focus, #playlist30 a:focus
{ 
background:black
 }

#playlist1 span, #playlist2 span, #playlist3 span, #playlist4 span, #playlist5 span, #playlist6 span, #playlist7 span, #playlist8 span, #playlist9 span, #playlist10 span, 
#playlist11 span, #playlist12 span, #playlist13 span, #playlist14 span, #playlist15 span, #playlist16 span, #playlist17 span, #playlist18 span,  #playlist19 span, #playlist20 span,
#playlist21 span, #playlist22 span, #playlist23 span, #playlist24 span, #playlist25 span, #playlist26 span, #playlist27 span, #playlist28 span,  #playlist29 span, #playlist30 span 
{ position:absolute; right:1em; color:#c39; font-size:0.85em; line-height:1.05 
}


/*
@maaedia only screen and (max-width: 360px) {
	#video1, #video2, #video3, #video4, #video5, 
	#video6, #video7, #video8, #video9, #video10, 
	#video11, #video12, #video13, #video14, #video15, 
	#video16, #video17, #video18, #video19, #video20,
	#video21, #video22 ,#video23, #video24, #video{
		height:80vh;
		width:60%;
		max-width:60%; 
		}

}
*/
/*
@media only screen and (max-width: 1080px) {
	#video1, #video2, #video3, #video4, #video5, 
	#video6, #video7, #video8, #video9, #video10, 
	#video11, #video12, #video13, #video14, #video15, 
	#video16, #video17, #video18, #video19, #video20,
	#video21, #video22 ,#video23, #video24, #video{
		height:calc(67vh*2/3);
		width:67%;
		max-width:67%; 
		}

}
@media only screen and (max-width: 810px) {
	#video1, #video2, #video3, #video4, #video5, 
	#video6, #video7, #video8, #video9, #video10, 
	#video11, #video12, #video13, #video14, #video15, 
	#video16, #video17, #video18, #video19, #video20,
	#video21, #video22 ,#video23, #video24, #video{
		height:calc(60vh*2/3);
		width:60%;
		max-width:60%; 
		}

}
*/

@media only screen and (min-width: 600px) and (max-width: 926px) {

	
	#player-container1, #player-container2, #player-container3, #player-container4, #player-container5,	#player-container6, #player-container7, #player-container8, #player-container9, #player-container10,
	#player-container11, #player-container12, #player-container13, #player-container14, #player-container15, #player-container16, #player-container17, #player-container18, #player-container19, #player-container20,
	#player-container21, #player-container22, #player-container23, #player-container24, #player-container25, #player-container26, #player-container27, #player-container28, #player-container29, #player-container30
	{
		/*background:green;*/
		height:calc(65vw*2/3);
	}
	
	#video1, #video2, #video3, #video4, #video5, #video6, #video7, #video8, #video9, #video10, 
	#video11, #video12, #video13, #video14, #video15, #video16, #video17, #video18, #video19, #video20,
	#video21, #video22 ,#video23, #video24, #video15, #video26, #video27, #video28, #video29, #video30
	{
		width:65%;
		float:right;
		max-width:65%; 
		height:auto;
	}
}

@media only screen and (min-width: 320px) and (max-width: 600px) {

	#video1, #video2, #video3, #video4, #video5, #video6, #video7, #video8, #video9, #video10, 
	#video11, #video12, #video13, #video14, #video15, #video16, #video17, #video18, #video19, #video20,
	#video21, #video22 ,#video23, #video24, #video25, #video26, #video27, #video28, #video29, #video30
	{
		width:100%;
		float:right;
		max-width:100%; 
		min-height:auto;
		height:auto;		
	}
}