/*Suppression des styles sur input sur Webkit : */
.video input:focus{
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
    border: none;
}

.video[data-type=player]{
    background-color: #000;
    position: relative;
    text-align: center;
}
.video .poster[data-type=poster]{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.video .poster[data-type=poster] img{
    vertical-align: middle;
}

.video.controls[data-type=controls]{
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;

    height: 0;
    opacity: 0;

    transition: all 0.2s;
}

.video .playscreen[data-type=playscreen]:hover + .video.controls[data-type=controls],
.video .pausescreen[data-type=playscreen]:hover + .video.controls[data-type=controls],
.video.controls[data-type=controls]:hover{
    height: 32px;
    opacity: 1;
}
.video .playscreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .timeline-buffer div,
.video .pausescreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .timeline-buffer div,
.video.controls[data-type=controls] .timeline-buffer div{
    height: 5px;
}

/* les divs gauche et droite, rassemblant les commandes : */

.video.controls[data-type=controls] .left{
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    padding: 5px;
    height: 0;

}
.video.controls[data-type=controls] .right{
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    padding: 5px;
    height: 0;
}

/* La barre de chargement de la vidéo + la barre ligne de temps : */
.video .timeline-buffer{
    position: absolute;
    width: 100%;
    height: 0;
    cursor: pointer;
    top: 0;
    display: none;
}

.video .timeline-buffer div[data-type=buffer]{
    position: absolute;
    width: 0;
    height: 0;
    background-color: rgba(130,130,130,0.5);
    bottom: 0;

    transition: all 0.2s;
}

.video .timeline-buffer div[data-type=timeline]{
    position: absolute;
    min-width: 5px;
    height: 0;
    background-color: #009ee0;
    bottom: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

    transition: all 0.2s;
}
.video .timeline-buffer div[data-type=timeline] > .handler{
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 0;
    background-color: #fff;
    border-radius: 10px;

    transition: all 0.2s;
}

/* Affichages des éléments si curseur sur video : */

.video.controls[data-type=controls]:hover input[data-type],
.video .playscreen[data-type=playscreen]:hover + .video.controls[data-type=controls] input[data-type],
.video .pausescreen[data-type=playscreen]:hover + .video.controls[data-type=controls] input[data-type],
.video.controls[data-type=controls]:hover .audio-volume,
.video .playscreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .audio-volume,
.video .pausescreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .audio-volume{
    height: 25px;
}

.video.controls[data-type=controls]:hover .timeline-buffer,
.video .playscreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .timeline-buffer,
.video .pausescreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .timeline-buffer{
    display: block;
    height: 40px;
    top: -40px;
}
.video.controls[data-type=controls]:hover .timeline-buffer div[data-type],
.video.controls[data-type=controls]:hover .timeline-buffer div[data-type] > .handler,
.video .playscreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .timeline-buffer div[data-type],
.video .playscreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .timeline-buffer div[data-type] > .handler,
.video .pausescreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .timeline-buffer div[data-type],
.video .pausescreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .timeline-buffer div[data-type] > .handler{
    height: 5px;
}

.video.controls[data-type=controls]:hover .time-duration,
.video .playscreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .time-duration,
.video .pausescreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .time-duration{
    display: inline-block;
}

.video.controls[data-type=controls]:hover .time-duration span,
.video.controls[data-type=controls]:hover .time-duration input[type=text],
.video .playscreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .time-duration span,
.video .playscreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .time-duration input[type=text],
.video .pausescreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .time-duration span,
.video .pausescreen[data-type=playscreen]:hover + .video.controls[data-type=controls] .time-duration input[type=text]{
    height: 22px;
}

/****/

.video.controls[data-type=controls]:hover .timeline-buffer:hover div[data-type=buffer]{
    height: 15px;
}
.video.controls[data-type=controls]:hover .timeline-buffer:hover div[data-type=timeline]{
    min-width: 15px;
    height: 15px;
}
.video.controls[data-type=controls]:hover .timeline-buffer:hover div[data-type=timeline] > .handler {
    right: 0;
    top: 0;
    width: 15px;
    height: 15px;
}

/* Le bouton activation du son + le contrôle du volume : */

/* Le bouton du son (muet ou pas) : */
.video .sound[data-type=audio]{
    border: none;
    color: transparent;
    width: 25px;
    height: 0;
    background: transparent no-repeat url('../images/svg/videoplayer-icon-sound.svg') center;
    background-size: 90%;
    margin-right: 10px;
    float: left;
}
.video .sound[data-type=audio]:hover{
    cursor: pointer;
}
.video .mute[data-type=audio]{
    border: none;
    color: transparent;
    width: 25px;
    height: 0;
    background: transparent no-repeat url('../images/svg/videoplayer-icon-mute.svg') center;
    background-size: 90%;
    margin-right: 10px;
    float: left;
}
.video .mute[data-type=audio]:hover{
    cursor: pointer;
}

/* La glissière du volume : */
.video .audio-volume{
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    height: 0;
    float: left;
}

.video .audio-volume .volume-range{
    width: 0;
    height: 25px;
    float: left;

    transition: all 0.2s;
}

.video .audio-volume:hover .volume-range{
    width: 100px;
}

.video .audio-volume .volume-range .volume-background{
    position: absolute;
    border-radius: 5px;
    height: 5px;
    background-color: #fff;
    width: 0;
    top: 9px;

    transition: all 0.2s;
}
.video .audio-volume .volume-range div[data-type=volume]{
    position: absolute;
    border-radius: 5px;
    height: 5px;
    background-color: #009ee0;
    max-width: 0;
    top: 9px;

    transition: all 0.2s;
}

.video .audio-volume:hover .volume-range .volume-background{
    width: 100px;
}
.video .audio-volume:hover .volume-range div[data-type=volume]{
    max-width: none;
}

/* Le bouton de lecture : */
.video .play[data-type=play]{
    position: relative;
    border: none;
    color: transparent;
    width: 25px;
    height: 0;
    background: transparent no-repeat url('../images/svg/videoplayer-icon-play.svg') center;
    background-size: 90%;
    float: left;
}
.video .play[data-type=play]:hover{
    cursor: pointer;
}
.video .pause[data-type=play]{
    position: relative;
    border: none;
    color: transparent;
    width: 25px;
    height: 0;
    background: transparent no-repeat url('../images/svg/videoplayer-icon-pause.svg') center;
    background-size: 90%;

    float: left;
}
.video .pause[data-type=play]:hover{
    cursor: pointer;
}

/* Le bouton du plein écran : */
.video .fullscreenoff[data-type=fullscreen]{
    position: relative;
    border: none;
    color: transparent;
    width: 25px;
    height: 0;
    background: transparent no-repeat url('../images/svg/videoplayer-icon-enlarge.svg') center;
    background-size: 90%;

    float: left;
}
.video .fullscreenoff[data-type=fullscreen]:hover{
    cursor: pointer;
}

.video .fullscreenon[data-type=fullscreen]{
    position: relative;
    border: none;
    color: transparent;
    width: 25px;
    height: 0;
    background: transparent no-repeat url('../images/svg/videoplayer-icon-reduce.svg') center;
    background-size: 90%;

    float: left;
}
.video .fullscreenon[data-type=fullscreen]:hover{
    cursor: pointer;
}

.video .time-duration{
    position: relative;
    /*display: inline-block;*/
    float: left;
    height: 0;
    display: none;
}

.video .time-duration span,
.video .time-duration input[type=text]{
    background-color: transparent;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #fff;
    text-align: center;
    height: 0;
}

/* La zone d'indication du temps en cours : */
.video .time[data-type=time]{
    width: 60px;
    height: 0;
}
.video .time[data-type=time]:hover{
    background-color: rgba(255,255,255,.3);
    border-radius: 5px;
}

/* La durée totale de la vidéo : */
.video .duration[data-type=duration]{
    display: inline-block;
    height: 0;
}

/* Le bouton sur l'écran : */

@-webkit-keyframes fadeout {
    0% { opacity: 0.5; }
    100% { opacity: 0; }
}
@keyframes fadeout {
    0% { opacity: 0.5; }
    100% { opacity: 0; }
}

.video .playscreen[data-type=playscreen]{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent no-repeat url('../images/svg/videoplayer-icon-playscreen.svg') center;
    background-size: 30%;
    opacity: 0.5;
    color: transparent;
}
.video .playscreen[data-type=playscreen]:hover{
    opacity: 0;
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: fadeout;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.video .pausescreen[data-type=playscreen]{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent no-repeat url('../images/svg/videoplayer-icon-pausescreen.svg') center;
    background-size: 30%;
    opacity: 0;
    color: transparent;
}
.video .pausescreen[data-type=playscreen]:hover{
    opacity: 0;
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: fadeout;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

/* La popup d'info : */

@-webkit-keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.video .popupon[data-type=popup]{
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(5,5,5,0.7);
    display: block;

    -webkit-animation-name: fadein;
    -webkit-animation-duration: .2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: fadein;
    animation-duration: .2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.video .popupoff[data-type=popup]{
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(5,5,5,0.7);
    display: none;
}

/* La popup d'attente : */

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

.wait-spin{
    -webkit-animation-name: wait-spin;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    animation-name: wait-spin;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.video .waiton[data-type=wait]{
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;

    -webkit-animation-name: fadein;
    -webkit-animation-duration: .2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    animation-name: fadein;
    animation-duration: .2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.video .waitoff[data-type=wait]{
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

.video div[data-type=wait] > .wait-icon{
    top: 25%;
    left: 25%;
    position: absolute;
    width: 50%;
    height: 50%;
    background: transparent no-repeat url('../images/svg/videoplayer-icon-wait.svg') center;
    background-size: 30%;
    opacity: 0.5;
}