@import url('/css/normalize.css');

@import url('/css/data-layout.css');
@import url('/css/data-menu.css');
@import url('/css/data-tables.css');

/*FILTRES DEFI*/
.filtre select.ui-defi{
    width:100%;
    max-width:310px;
    margin-right:10px;
}


.body-devoilement {
    padding-top:125px;
}

.entete {
    position:absolute;
    top:60px;
    left:0;
    height:65px;
}
@media screen and (min-width: 1024px) {
    .body-devoilement {
        padding-top:60px;
    }

    .entete {
        left:auto;
        right:0;
        width:350px;
        z-index:2;
    }
}
.video-template {
    display:none;
}
.devoilement-boite {
    height:100%;
}

.video {
    width:100%;
    height:100%;
    padding-bottom:80px;
}

.video-intro {
    width:100%;
    height:100%;
    background:#571179;
    padding:30px;
    display:table;
}
.video-intro.video-2024 {
    background:url(/frc/devoilement/images/fond-2024.jpg) #634c5d center center no-repeat;
    background-size:cover;
}
.video-intro.video-2023 {
    background:url(/frc/devoilement/images/fond-2023.jpg) #634c5d center center no-repeat;
    background-size:cover;
}
.video-intro.video-2022 {
    background:url(/frc/devoilement/images/fond-2022.jpg) #634c5d center center no-repeat;
    background-size:cover;
}
.video-intro.video-2020 {
    background:url(/frc/devoilement/images/fond-2020.jpg) #501355 center center no-repeat;
    background-size:cover;
}
.video-intro.video-2019 {
    background:url(/frc/devoilement/images/fond-2019.jpg) #333 center center no-repeat;
    background-size:cover;
}
.video-intro.video-2018 {
    background:url(/frc/devoilement/images/fond-2018.jpg) #571179 center center no-repeat;
    background-size:cover;
}
.video-intro.video-2017 {
    background:url(/frc/devoilement/images/fond-2017.jpg) #be3030 center center no-repeat;
    background-size:cover;
}
.video-intro.video-2016 {
    background:url(/frc/devoilement/images/fond-2016.jpg) #0657cd center center no-repeat;
    background-size:cover;
}

.video-intro-boite {
    width:100%;
    height:100%;
    display:table-cell;
    vertical-align:middle;
}
.video-intro img{
    width:50%;
    max-width:400px;
}
.video-intro h1 {
    color:#fff;
    font-size:30px;
    line-height:36px;
    margin-bottom:10%;
    font-weight:300;
}
.video-intro h1 small{
    font-size:21px;
    line-height:28px;
    opacity:0.8;
    display:block;
}

@media screen and (min-width: 1024px) {
    .video {
        padding:0 350px 0 0;
    }
}

.video-table {
    width:100%;
    height:100%;
    background:yellow;
    display:table;
}
.video-cell {
    width:100%;
    height:100%;
    background:#333;
    /*display:table-cell;
    vertical-align:middle;*/
    text-align:center;
}

.video-cell .defi-boite{
    width:100%;
    height:100%;
    background:#571179;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

.video-cell iframe {
    width:100%!important;
    height:100%!important;
}
.thumbs {
    position:fixed;
    bottom:0;
    left:0;
    overflow-x:scroll;
    width:100%;
}
.thumbs-nav {
    width:100%;
    height:80px;
    background:#fff;

}
.thumbs-annee {
    display:none;
}
.thumbs-initial {
    display:block;
}

.thumbs ul{
    min-width:100%;
    height:80px;
    background:#fff;
    white-space: nowrap;
    font-size:0;
    vertical-align:top;
}

.thumbs li{
    padding:15px;
    display:inline-block;
    border-right:1px solid #eee;
    min-width:250px;
    font-family:Roboto;
    min-height:80px;
    cursor:pointer;
    background:#fff;
    transition:background 0.2s linear;
}
.thumbs li:hover{
    background:#eee;
}
.thumbs li.lien-youtube{
    padding:15px;
    border:0;
    display:inline-block;
    min-width:initial;
    height:40px;
    position:relative;
    top:0;
    cursor:default;
}
.thumbs li.lien-youtube:hover{
    background:#fff;
}
.thumbs li.lien-youtube a.btn{
    float:left;
    display:block;
    margin-top:5px;
}

.thumbs li em{
    height:50px;
    width:90px;
    display:block;
    float:left;
    overflow:hidden;
    border:1px solid #fff;

}
.thumbs li em img{
    height:70px;
    margin-top:-10px;
    display:block;
    float:left;

}
.thumbs li span{
    display:block;
    float:left;
    padding:6px 0px 6px 10px;
}
.thumbs li span strong{
    font-weight:bold;
    font-size:18px;
    line-height:21px;
    display:block;
}
.thumbs li span small{
    font-size:11px;
    text-transform:uppercase;
    line-height:16px;
    font-weight:400;
    color:#777;
    display:block;
}


.thumbs li.selected{
    background:#571179;
    position:relative;
}

.thumbs li.selected strong,
.thumbs li.selected small{
    color:#fff;
}


@media screen and (min-width: 1024px) {
    .thumbs {
        left:auto;
        right:0;
        padding-top:125px;
        z-index:1;
        height:100%;
        width:350px;
        overflow-x:initial;
    }
    .thumbs-nav {
        width:350px;
        height:100%;
        overflow-x:hidden;
        overflow-y:scroll;
    }
    .thumbs ul{
        min-width:100%;
        height:auto;
        white-space: initial;
        font-size:0;
    }

    .thumbs li{
        padding:15px;
        display:block;
        border:0;
        border-bottom:1px solid #eee;
        float:none;
        clear:both;
        overflow:hidden;
    }
    .thumbs li em{
        height:70px;
        width:120px;
        display:block;
        float:left;
        overflow:hidden;
    }
    .thumbs li em img{
        height:96px;
        margin-top:-13px;
        display:block;
        float:left;
    }
    .thumbs li span{
        padding:16px 0px 6px 15px;
    }


}