/*RESPONSIVE GENERATION PAGE  HTML*/

@media screen and (max-device-width: 375px){
/*-------------------------------------------------------------------ACCUEIL LIVE---------------------------------*/
#tableau_acceuil p{ font-size: 16px; }
#entete_live_logo{
    text-align: center;
}
#tableau_lieux th{
    font-size: 12px;
}
.rowReverse {
    display: flex; flex-direction: column-reverse; margin: 0; padding: 0;
}
/*-------------------------------------------------CARTE GPX------------------------------------------------------*/
#mapid{
    width: 100%;
    height:300px;
}
/*cache le bas de la map*/
.leaflet-bottom{
    display: none;
}
    /*===============JUMBOTRON_live==========*/
.conteneur_icons_entete >div{/*cible le premier div*/
    display: inline-block;
}
#entete_main_icons{/*cible le deuxieme div*/
    display: block;
    position: unset;
}
#jumbotron_epreuve img{ width: 20px; }
#jumbotron_icons img{ width: 20px; }
#jumbotron_icons{ border-top: 3px solid white; padding: 5px;}
#jumbotron_icons p { font-size: unset; font-size: 10px; }
#btn_clignote { display: none;}

    /*========CAROUSEL HTML*=========*/
    #carousel_live{ display: none; }
    #dernier_passage_live{ display: none; }
    #conteneur_div_img{
        display: block; width: 33%; margin: 0 auto;
    }

    .carousel-control >span{
        color: white;
    }
    .div_photo:hover{
        z-index: 100;
        transform: scale(1.2);
        transition: 0.8s;
    }
    /*FIN CAROUSEL*/

/*========CAROUSEL CLASSEMENT*=========*/
#carousel_classement{
    width: 100%;
}
#carousel_classement li{
    width: 100%;
}
.palmares_live{
    width: 100%;
    position: relative;
}
    .palmares_live img{
        width: 100px;
        height: 100px;
        padding-top:43px;
    }
.caption_podium p{
    color: white;
    font-size: 12px;
}

/*----------------------------------------------------------POP UP COUREUR--------------------------------------------*/
#modal_conteneur_coureur{
    width: 375px;
    height: auto;
    margin-left: calc(50% - 187px);
    padding: 5px;

}
#body_popup{ color: black;  width: 100%; height: 100%;}
#btn_dismissModal{
    position: absolute;
    right: 5px;
    background-color: black;
    color: white;
}
#body_popup{ color: black;}
#body_popup  #tableau_lieux>thead > tr > th { font-size: 12px; }
#body_popup  #row_tab > th{ font-size: 10px; }
#body_popup  strong { font-size: 12px; }
/*---------------------------------------------------GALERIE PHOTO----------------------------------------------------*/
    #container_media div{
      padding: unset;
    }
    .media_thumbnail{
        height: 250px;
        width: 150px;
        padding: 5px;
        margin: 5px;
    }
    .media_thumbnail .download_media {
    /*cache la partie de téléchargement
    et de partage*/
        display: none;
    }
    .media_thumbnail img{
        width: 90%;
        height: 125px;
        margin-bottom:2px;
        margin-top: 2px;
        margin-left: calc(50% - 45%);
    }
    .media_thumbnail_caption{
      margin-top: unset;
    }
    .media_thumbnail_caption p{
        text-align: center;
        padding-left: 10px;
        color: black;
    }
    .media_thumbnail_caption>p:first-child{/*cible le premier enfant du noeud*/
        font-size: 12px;
        background-color: rgba(83,85,85,0.5);
    }
    .media_thumbnail_caption>p:nth-child(2){
        font-size: 12px;
    }
    .media_thumbnail_caption>p:nth-child(3){
        font-size: 12px;
    }
    .media_thumbnail_caption>p:nth-child(4){
        /*cache le @ats-sport*/
        display: none;
    }
    .media_thumbnail:hover{
        all:unset;
    }
/*-------------------------------------------POPUP MODAL PHOTO--------------------------------------------------------*/
    .modal{
        width: 1000px; background-color: white;
    }
    .conteneur_modal{
        margin-top:75px;
        height: auto;
        width: 375px;
        margin-left: calc(50% - 187px);
    }

    .conteneur_modal h5{
        padding-top: 10px;
        text-align: center;
        font-size: 32px;
        background-color: rgba(52, 143, 226, 1);
        box-shadow: 5px 3px 2px 3px;
    }
    .modal_body{ background-color: white; height: auto; width: 375px; }
    #img_modal_popup img { width:90%; height: auto;  }
    .modal_body >div{
        position: unset;
        width: 375px;
        padding: 0;
        margin:0;
    }
    .modal_body >div >button{
        position: unset;
    }
    .close_modal{
        background-color: black;
        color: white;
    }
}
@media screen and (device-width:414px) and (device-height: 736px){
/*-------------------------------------------------------------------ACCUEIL LIVE-------------------------------------*/
#tableau_acceuil p{ font-size: 16px; }
#entete_live_logo{
    text-align: center;
}
#tableau_lieux th{
    font-size: 12px;
}
.conteneur_icons_entete >div{/*cible le premier div*/
    display: block;
}
#entete_main_icons{/*cible le deuxieme div*/
    display: block; position: unset;
}
#jumbotron_epreuve img{ width: 20px; }
#jumbotron_icons img{ width: 20px; }
#jumbotron_icons p { font-size: 10px;}
#btn_clignote { display: none;}
/*----------------------------------------------------------POP UP COUREUR--------------------------------------------*/
#modal_conteneur_coureur{
    width: 414px;
    height: auto;
    margin-left: calc(50% - 207px);
    padding: 5px;
}
#btn_dismissModal{
    position: absolute;
    right: 5px;
    background-color: black;
    color: white;
}
    /*-------------------------------------------------CARTE GPX------------------------------------------------------*/
    #mapid{
        width: 100%;
        height:300px;
    }
    /*cache le bas de la map*/
    .leaflet-bottom{
        display: none;
    }
    /*========CAROUSEL HTML*=========*/
    #carousel_live{ display: none; }
    #dernier_passage_live{ display: none; }
}
@media screen and (device-width: 736px) {
    /*-------------------------------------------------CARTE GPX------------------------------------------------------*/
    #mapid{
        width: 100%;
        height:400px;
    }

}
@media screen and (device-width:414px) and (device-height: 736px){
    /*-------------------------------------------------CARTE GPX------------------------------------------------------*/
    #mapid{
        width: 100%;
        height:300px;
    }
    /*========CAROUSEL CLASSEMENT*=========*/
    #carousel_classement li{
        width: 100%;
    }
    .palmares_live{
        width: 100%;
        position: relative;
    }
    .palmares_live img{
        width: 100px;
        height: 100px;
    }
    .caption_podium p{
        color: white;
        font-size: 12px;
    }

    /*---------------------------------------------------GALERIE PHOTO----------------------------------------------------*/
    #container_media div{
        padding: unset;
    }
    .media_thumbnail{
        height: 250px;
        width: 160px;
        padding: 5px;
        margin: 5px;
    }
    .media_thumbnail .download_media {
        /*cache la partie de téléchargement
        et de partage*/
        display: none;
    }
    .media_thumbnail img{
        width: 90%;
        height: 125px;
        margin-bottom:2px;
        margin-top: 2px;
        margin-left: calc(50% - 45%);
    }
    .media_thumbnail_caption{
        margin-top: unset;
    }
    .media_thumbnail_caption p{
        text-align: center;
        padding-left: 10px;
        color: black;
    }
    .media_thumbnail_caption>p:first-child{/*cible le premier enfant du noeud*/
        font-size: 12px;
        background-color: rgba(83,85,85,0.5);
    }
    .media_thumbnail_caption>p:nth-child(2){
        font-size: 12px;
    }
    .media_thumbnail_caption>p:nth-child(3){
        font-size: 12px;
    }
    .media_thumbnail_caption>p:nth-child(4){
        /*cache le @ats-sport*/
        display: none;
    }
    .media_thumbnail:hover{
        all:unset;
    }
    /*-------------------------------------------POPUP MODAL PHOTO--------------------------------------------------------*/
    .modal{
        width: 1000px; background-color: white;
    }
    .conteneur_modal{
        margin-top:75px;
        height: auto;
        width: 375px;
        margin-left: calc(50% - 187px);

    }

    .conteneur_modal h5{
        padding-top: 10px;
        text-align: center;
        font-size: 32px;
        background-color: rgba(52, 143, 226, 1);
        box-shadow: 5px 3px 2px 3px;
    }
    .modal_body{ background-color: white; height: auto; width: 375px; }
    #img_modal_popup img { width:90%; height: auto;  }
    .modal_body >div{
        position: unset;
        width: 375px;
        padding: 0;
        margin:0;
    }
    .modal_body >div >button{
        position: unset;
    }
}

@media screen and (device-width: 414px) and (device-height: 896px) {
/*-------------------------------------------------------------------ACCUEIL LIVE---------------------------------*/
#tableau_acceuil p{ font-size: 16px; }
#entete_live_logo{ text-align: center; }
#tableau_lieux th{ font-size: 12px; }
.conteneur_icons_entete >div{/*cible le premier div*/
    display: block;
}
#entete_main_icons{/*cible le deuxieme div*/
    display: block; position: unset;
}
#jumbotron_epreuve img{ width: 20px; }
#jumbotron_icons img{ width: 20px; }
#jumbotron_icons p { font-size: 10px;}
#btn_clignote { display: none;}
    /*-------------------------------------------------CARTE GPX------------------------------------------------------*/
    #mapid{
        width: 100%;
        height:400px;
    }
    .carousel-control >span{
        color: white;
    }
    #img_live_dernier{
        width: 100%; height: 350px;
    }
/*------------------------------------------------POP UP COUREUR------------------------------------------------------*/
#modal_conteneur_coureur{
    width: 414px;
    height: auto;
    margin-left: calc(50% - 207px);
    padding: 5px;
}
#btn_dismissModal{
    position: absolute;
    right: 5px;
    background-color: black;
    color: white;
}
    /*=-------------------CAROUSEL CLASSEMENT----------------------*/
    #carousel_classement li{
        width: 100%;
    }
    .palmares_live{
        width: 100%;
        position: relative;
    }
    .palmares_live img{
        width: 100px;
        height: 100px;
    }
    .caption_podium p{
        color: white;
        font-size: 12px;
    }
    /*---------------------------------------------------GALERIE PHOTO----------------------------------------------------*/
    #container_media div{
        padding: unset;
    }
    .media_thumbnail{
        height: 250px;
        width: 160px;
        padding: 5px;
        margin: 5px;
    }
    .media_thumbnail .download_media {
        /*cache la partie de téléchargement
        et de partage*/
        display: none;
    }
    .media_thumbnail img{
        width: 90%;
        height: 125px;
        margin-bottom:2px;
        margin-top: 2px;
        margin-left: calc(50% - 45%);
    }
    .media_thumbnail_caption{
        margin-top: unset;
    }
    .media_thumbnail_caption p{
        text-align: center;
        padding-left: 10px;
        color: black;
    }
    .media_thumbnail_caption>p:first-child{/*cible le premier enfant du noeud*/
        font-size: 12px;
        background-color: rgba(83,85,85,0.5);
    }
    .media_thumbnail_caption>p:nth-child(2){
        font-size: 12px;
    }
    .media_thumbnail_caption>p:nth-child(3){
        font-size: 12px;
    }
    .media_thumbnail_caption>p:nth-child(4){
        /*cache le @ats-sport*/
        display: none;
    }
    .media_thumbnail:hover{
        all:unset;
    }
    /*-------------------------------------------POPUP MODAL PHOTO--------------------------------------------------------*/
    .modal{
        width: 1000px; background-color: white;
    }
    .conteneur_modal{
        margin-top:75px;
        height: auto;
        width: 375px;
        margin-left: calc(50% - 187px);

    }

    .conteneur_modal h5{
        padding-top: 10px;
        text-align: center;
        font-size: 32px;
        background-color: rgba(52, 143, 226, 1);
        box-shadow: 5px 3px 2px 3px;
    }
    .modal_body{ background-color: white; height: auto; width: 375px; }
    #img_modal_popup img { width:90%; height: auto;  }
    .modal_body >div{
        position: unset;
        width: 375px;
        padding: 0;
        margin:0;
    }
    .modal_body >div >button{
        position: unset;
    }
}
@media screen and (max-device-height: 375px) and (max-device-width: 667px) {
    /*----------------------------ACCUEIL HTML----------------------------*/
    #tableau_acceuil p{ font-size: 16px; }

    /*cache le bas de la map*/
    .leaflet-bottom{
        display: none;
    }

    /*========CAROUSEL CLASSEMENT*=========*/
    #carousel_classement{
        max-height: 250px ;
        width: 100%;
    }
    #carousel_classement li{
        width: 100%;
    }
    .palmares_live{
        text-align: center;
        width: auto;
    }
    .palmares_live{
        width: 80%;
        display: inline-block;
        margin: 0 auto;
    }
    .palmares_live img{
        width: 50%;
    }
    /*-------------------------------------------POPUP MODAL PHOTO--------------------------------------------------------*/
    .modal{
        width: 1000px; background-color: white;
    }
    .conteneur_modal{
        margin-top:75px;
        height: auto;
        width: 375px;
        margin-left: calc(50% - 187px);

    }

    .conteneur_modal h5{
        padding-top: 10px;
        text-align: center;
        font-size: 32px;
        background-color: rgba(52, 143, 226, 1);
        box-shadow: 5px 3px 2px 3px;
    }
    .modal_body{ background-color: white; height: auto; width: 375px; }
    #img_modal_popup img { width:90%; height: auto;  }
    .modal_body >div{
        position: unset;
        width: 375px;
        padding: 0;
        margin:0;
    }
    .modal_body >div >button{
        position: unset;
    }

}
@media screen and  (max-device-width: 896px) {
    .rowReverse {
        display: flex;
        flex-direction: column-reverse;
    }
    /*CAROUSEL HTML*/

    /*========CAROUSEL CLASSEMENT*=========*/
    .palmares_live img{
        max-width: 50%;
    }

    #carousel_live .carousel-caption{
        text-align: center;
        width: 50%;
        margin: 0px auto;
        background-color: rgba(255,255,255, 0.5);
    }
    .carousel-control >span{
        color: white;
    }
    .div_photo:hover{
        z-index: 100;
        transform: scale(1.2);
        transition: 0.8s;
    }
    /*FIN CAROUSEL*/
}

@media screen and (min-device-width: 1920px) {
    #tableau_acceuil h1{ font-size: 40px; }
    #tableau_acceuil p{ font-size: 24px; }
    /*CAROUSEL HTML*/
    #carousel_live{
        /*background-color: rgba(90,216,166,0.05);*/
        text-align: center;
        width: 100%;
    }
    #conteneur_media_img >div{
        margin: 0 auto;

    }
    /*FIN CAROUSEL*/

    /*==== ====================GALERIE PHOTO ==================*/
    .media_thumbnail {
       height: 600px;
    }
    .popupModal, .img_vide{
        height: 350px;
    }

    #container_media>div{

        max-height: 600px;
    }


}