/*FantasyFoot Videos Center*/

@keyframes masquer_logo_videos_gauche {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:-30%; background-color:rgba(0,0,0,.5); }
}
@keyframes -webkit-masquer_logo_videos_gauche {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:-30%; background-color:rgba(0,0,0,.5); }
}
@keyframes -moz-masquer_logo_videos_gauche {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:-30%; background-color:rgba(0,0,0,.5); }
}
@-webkit-keyframes masquer_logo_videos_gauche {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:-30%; background-color:rgba(0,0,0,.5); }
}
@-moz-keyframes masquer_logo_videos_gauche {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:-30%; background-color:rgba(0,0,0,.5); }
}

@keyframes masquer_logo_videos_gauche_portrait {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:-50%; background-color:rgba(0,0,0,.5); }
}
@keyframes -webkit-masquer_logo_videos_gauche_portrait {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:-50%; background-color:rgba(0,0,0,.5); }
}
@keyframes -moz-masquer_logo_videos_gauche_portrait {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:-50%; background-color:rgba(0,0,0,.5); }
}
@-webkit-keyframes masquer_logo_videos_gauche_portrait {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:-50%; background-color:rgba(0,0,0,.5); }
}
@-moz-keyframes masquer_logo_videos_gauche_portrait {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:-50%; background-color:rgba(0,0,0,.5); }
}

@keyframes masquer_logo_videos_droite {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:80%; background-color:rgba(0,0,0,.5); }
}
@keyframes -webkit-masquer_logo_videos_droite {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:80%; background-color:rgba(0,0,0,.5); }
}
@keyframes -moz-masquer_logo_videos_droite {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:80%; background-color:rgba(0,0,0,.5); }
}
@-webkit-keyframes masquer_logo_videos_droite {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:80%; background-color:rgba(0,0,0,.5); }
}
@-moz-keyframes masquer_logo_videos_droite {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:80%; background-color:rgba(0,0,0,.5); }
}

@keyframes masquer_logo_videos_droite_portrait {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:100%; background-color:rgba(0,0,0,.5); }
}
@keyframes -webkit-masquer_logo_videos_droite_portrait {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:100%; background-color:rgba(0,0,0,.5); }
}
@keyframes -moz-masquer_logo_videos_droite_portrait {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:100%; background-color:rgba(0,0,0,.5); }
}
@-webkit-keyframes masquer_logo_videos_droite_portrait {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:100%; background-color:rgba(0,0,0,.5); }
}
@-moz-keyframes masquer_logo_videos_droite_portrait {
from { left:''; background-color:rgba(0,0,0,.75); }
to { left:100%; background-color:rgba(0,0,0,.5); }
}

/*Index du FFVC*/

#videos_center_liste {
position:relative;float:left;
width:100%;height:90%;
}


.videos_center_contenu_titre {
position:relative;float:left;
width:100%;height:7.5%;
}
.videos_center_contenu_titre div {
position:relative;float:left;
width:100%;height:75%;
color:#aaaaaa;
text-align:center;
background-color:rgba(0,0,0,.5);
}
.videos_center_contenu_titre a {
color:#ffffff;
}

.videos_center_liste_element_complet {
position:relative;float:left;
width:21%;height:33.33%;
margin-left:2%;margin-right:2%;
}
.videos_center_liste_element_complet_contenu {
position:relative;float:left;top:50%;
width:100%;height:95%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.videos_center_liste_element_complet_titre {
position:relative;float:left;
width:95%;height:10%;
padding-left:2.5%;padding-right:2.5%;
font-size:.8vw;
background-color:#000000;
color:#aaaaaa;
text-align:left;
}
.videos_center_liste_element_complet_titre span {
position:relative;float:left;top:50%;
width:100%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.videos_center_liste_element_complet_titre div:nth-child(1) {
position:relative;float:left;
width:50%;height:100%;
text-align:left;
}
.videos_center_liste_element_complet_titre div:nth-child(2) {
position:relative;float:left;
width:50%;height:100%;
font-size:.8vw;
font-style:italic;
text-align:right;
}
.videos_center_liste_element_complet_video {
position:relative;float:left;
width:100%;height:78%;
overflow:hidden;
}

.videos_center_liste_element, .videos_center_liste_element_portrait {
position:absolute;top:5%;
width:17%;height:90%;
background-color:#000000;
display:inline;
}
.videos_center_liste_element_portrait {
width:40%;
display:none;
}
.videos_center_liste_element_contenu {
position:relative;float:left;
width:100%;height:100%;
overflow:hidden;
}

.videos_center_liste_image_illustration {
position:relative;float:left;
width:100%;height:100%;
opacity:.75;
cursor:pointer;
}
.videos_center_liste_image_illustration:hover {
opacity:1;
}
.videos_center_liste_image_illustration:hover > .videos_center_liste_bouton_play div  {
background-color: rgba(255,0,32,1);
}
.videos_center_liste_image_illustration img {
position:relative;float:center;top:50%;
width:100%;height:135%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.videos_center_liste_bouton_play {
position:absolute;top:0;left:0;
width:100%;height:100%;
}
.videos_center_liste_bouton_play div {
position:relative;float:left;top:50%;
width:25%;height:35%;
margin-left:37.5%;
text-align:center;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
background-color: rgba(51,51,51,.75);
border-radius:5px 5px 5px 5px;
}
.videos_center_liste_bouton_play img {
position:relative;float:center;top:50%;
width:20px;height:20px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}

.videos_center_liste_commentaires {
position:relative;float:left;
width:100%;height:10%;
font-size:.8vw;
background-color:#000000;
text-align:center;
white-space:nowrap;
overflow:hidden;
}
.videos_center_liste_commentaires div:nth-child(1) {
position:relative;float:left;
width:45%;height:100%;
text-align:right;
white-space:nowrap;
overflow:hidden;
}
.videos_center_liste_commentaires div:nth-child(2) {
position:relative;float:left;
width:10%;height:100%;
}
.videos_center_liste_commentaires div:nth-child(3) {
position:relative;float:left;
width:45%;height:100%;
text-align:left;
white-space:nowrap;
overflow:hidden;
}
.videos_center_liste_commentaires span {
position:relative;float:left;top:50%;
width:100%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.videos_center_liste_commentaires img {
position:relative;float:center;top:50%;
max-width:100%;height:90%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}

.videos_center_espace_videos {
position:relative;float:left;
width:100%;height:100%;
overflow:hidden;
}
.videos_center_espace_videos span {
position:relative;float:left;top:50%;
width:100%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}

.videos_center_lecteur {
position:relative;float:left;
width:100%;height:67.5%;
}
.videos_center_lecteur iframe {
position:relative;float:left;
width:60%;height:97.5%;
margin-left:20%;
}
.videos_center_lecteur_logo_gauche, .videos_center_lecteur_logo_droite, .videos_center_lecteur_logo_gauche_stable, .videos_center_lecteur_logo_droite_stable {
position:absolute;top:0;left:0%;
width:50%;height:97.5%;
background-color:rgba(0,0,0,.5);
animation : masquer_logo_videos_gauche 5s 1s forwards;
-webkit-animation : masquer_logo_videos_gauche 5s 1s forwards;
-moz-animation : masquer_logo_videos_gauche 5s 1s forwards;
display:inline;
}
.videos_center_lecteur_logo_gauche_portrait, .videos_center_lecteur_logo_droite_portrait {
position:absolute;top:0;left:0%;
width:50%;height:97.5%;
background-color:rgba(0,0,0,.5);
animation : masquer_logo_videos_gauche_portrait 5s 1s forwards;
-webkit-animation : masquer_logo_videos_gauche_portrait 5s 1s forwards;
-moz-animation : masquer_logo_videos_gauche_portrait 5s 1s forwards;
display:none;
}
 .videos_center_lecteur_logo_droite_portrait {
left:50%;
animation : masquer_logo_videos_droite_portrait 5s 1s forwards;
-webkit-animation : masquer_logo_videos_droite_portrait 5s 1s forwards;
-moz-animation : masquer_logo_videos_droite_portrait 5s 1s forwards;
}
.videos_center_lecteur_logo_droite {
left:50%;
animation : masquer_logo_videos_droite 5s 1s forwards;
-webkit-animation : masquer_logo_videos_droite 5s 1s forwards;
-moz-animation : masquer_logo_videos_droite 5s 1s forwards;
}
.videos_center_lecteur_logo_gauche_stable, .videos_center_lecteur_logo_droite_stable {
opacity:0;
animation : opacity_in 1s forwards;
-webkit-animation : opacity_in 1s forwards;
-moz-animation : opacity_in 1s forwards;
}
.videos_center_lecteur_logo_droite_stable {
left:50%;
}
.videos_center_lecteur_logo_gauche img, .videos_center_lecteur_logo_droite img, .videos_center_lecteur_logo_gauche_stable img, .videos_center_lecteur_logo_droite_stable img, .videos_center_lecteur_logo_gauche_portrait img, .videos_center_lecteur_logo_droite_portrait img {
position:relative;float:right;top:50%;
height:60%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.videos_center_lecteur_logo_droite img, .videos_center_lecteur_logo_droite_stable img, .videos_center_lecteur_logo_droite_portrait img {
float:left;
}

.videos_center_autres_videos {
position:relative;float:left;
width:100%;height:20%;
}
.videos_center_autres_contenu {
position:relative;float:left;
width:100%;height:100%;
}
.videos_center_autres_defilement {
position:relative;float:left;
width:5%;height:100%;
font-size:3vw;
background-color: rgba(0,0,0,0.5);
cursor:pointer;
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.videos_center_autres_defilement:hover {
color:#000000;
background-color: rgba(255,255,255,0.75);
}
.videos_center_autres_defilement span {
position:relative;float:left;top:50%;
width:100%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.videos_center_autres_liste {
position:relative;float:left;
width:90%;height:100%;
background-color: rgba(0,0,0,0.25);
overflow:hidden;
}

#videos_center_selectpage {
position:relative;float:left;
width:98%;height:5%;
padding-left:1%;padding-right:1%;
color:#aaaaaa;
font-style:italic;
background-color:rgba(0,0,0,.5);
text-shadow:1px 1px 2px #000000;
}
#videos_center_selectpage div {
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
#videos_center_selectpage .contenu {
position:relative;float:left;
width:95%;height:100%;
margin-left:2.5%;
}
#videos_center_selectpage .selectpage_widget_p1, #videos_center_selectpage .selectpage_widget_der {
width:20%;
}
#videos_center_selectpage .selectpage_widget_der {
left:80%;
}
#videos_center_selectpage .selectpage_widget {
left:20%;
width:60%;
}
#videos_center_selectpage .selectpage_widget_prec, #videos_center_selectpage .selectpage_widget_suiv {
width:37.5%;
}
#videos_center_selectpage .selectpage_widget_text {
left:37.5%;
width:25%;
}
#videos_center_selectpage .selectpage_widget_suiv {
left:62.5%;
}


/*DIV bas (mode affichage portrait)*/

#videos_center_bas {
position:relative;float:left;
width:100%;height:100%;
overflow:hidden;
}
#videos_center_bas .retour, #videos_center_bas .fermer {
position:absolute;left:-1%;
width:50%;height:100%;
font-size:4vw;
color:#cccccc;
background-color:rgba(0,0,0,.5);
transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
}
#videos_center_bas .fermer {
left:51%;
}
#videos_center_bas .retour:active, #videos_center_bas .fermer:active {
color:#000000;
background-color:rgba(255,255,255,1);
}


		/*Responsive via media queries*/

@media (orientation:portrait) {

/*Index du FFVC*/

#videos_center_liste {
height:88.75%;
overflow-y:scroll;
}

.videos_center_contenu_titre div {
height:100%;
}

.videos_center_liste_element_complet {
width:46%;height:30%;
}
.videos_center_liste_element_complet_titre {
font-size:2.5vw;
}

.videos_center_liste_element {
display:none;
}
.videos_center_liste_element_portrait {
display:inline;
}

.videos_center_liste_commentaires {
font-size:2.5vw;
}

.videos_center_lecteur_logo_gauche, .videos_center_lecteur_logo_droite, .videos_center_lecteur_logo_gauche_stable, .videos_center_lecteur_logo_droite_stable {
height:85%;display:none;
}

.videos_center_lecteur_logo_gauche_portrait, .videos_center_lecteur_logo_droite_portrait {
height:85%;display:inline;
}

.videos_center_autres_defilement {
display:none;
}

#videos_center_selectpage {
height:6.25%;
background:none;
}

.videos_center_lecteur iframe {
top:2.5%;
width:100%;height:95%;
margin-left:0;
}

.videos_center_autres_liste {
width:100%;
overflow-x:scroll;
}

}