/*============================================CSS CREATION PAGE ACCEUIL HTML==========================================*/
#tableau_acceuil{
    margin-bottom: 20px;
    padding: 10px;
    background-color: rgba(52, 143, 226, 0.8);
}
#tableau_acceuil{
    text-align: center; color: white;
}
#tableau_acceuil h1{color: unset; font-size: 32px; }
#tableau_acceuil h4{ font-size: 24px; }

#tableau_acceuil p{
    margin-left: 20px;
    margin-right: 20px;
    display: inline-block;
    font-size: x-large;
    font-style: italic;
    color: white;
    text-align: center;
    font-size: 24px;
}

/*---------------------------------------------------Bordure generale-------------------------------------------------*/
#graphiqueParParcours>div,#info_epreuve > div {
    border: 2px solid black;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 5px 2px 2px 0px aliceblue;
    margin: 5px 0px 5px 0px;
    padding: 5px;
}
/*===============INTEGRATION CARTE GPX==================*/
#carte{
    height: auto;
}
#mapid{
    width: 100%;
    height:800px;
    text-align: center;
    background-color: transparent;
    margin-bottom: 50px;
}
#img-home{
    height: 100%;
}


/*===Tableau résultat des lieux de la page accueil Live===*/

#btn_refresh_accueil{/*retire les bordures et le background-color du bouton et le place à droite*/
    border: none;
    background-color: transparent;
    color: white;
    font-size: 16px;
}
#tableau_lieux{
    width: 100%;
}
#tableau_lieux th{/*style générale des colonnes du tableau*/
    padding: 10px;
    text-align: left;
    font-size: 16px;
}

#tableau_lieux >thead{/*entête du tableau*/
    background-color: rgba(36,169,210, 0.4);
    color: black;
}
/* style et survol des lieux*/
#row_tab{
    background-color: rgba(65,210,223,0.1);
    color: black;
}
#row_tab:hover{
    color: black;
    background-color: lavenderblush;
}
/*----------------------------------------------------GRAPHIQUE-------------------------------------------------------*/

#graphiqueParParcours img{
    width:250px; height: 250px;
    position: relative;
    left:calc(50% - 40%);
}

/*-------------------------BEGIN colones classement/suivre courreur/voir tous les inscrits----------------------------*/
#info_epreuve{ text-align: center; }
#info_epreuve a{
    vertical-align: middle;
    text-decoration: none;
    color: #348fe2;
}
#info_epreuve h3{
    margin-bottom: unset;
}

/*----------------------------------------------------------POP UP COUREUR--------------------------------------------*/
#modal_conteneur_coureur{
    background-color: white;
    width: 600px;
    margin-left: calc(50% - 300px);
    margin-top: 100px;
    position: relative;
    padding: 50px;
}
#body_popup{ color: black;  width: 100%; height: 100%;}
#btn_dismissModal{
    position: absolute;
    right: 50px;
}
#body_popup  #tableau_lieux>thead > tr > th { font-size: 14px; }
#body_popup  #row_tab > th{ font-size: 12px; }
#body_popup  strong { font-size: 16px; }
/*-------------------------------------------------BANDEREAU PARTENAIRE-----------------------------------------------*/
#partenaire_live{
    text-align: center;
}
#partenaire_live hr{
    border: 1px solid black;
    width: 50%;
   margin-bottom: 20px;

}
#conteneur_partenaire{ display: table;}

#conteneur_partenaire div{
    margin: 0 auto;
}
#conteneur_partenaire img{
    width: 100%;
    padding: 5px;
    margin: 0 auto;
}

    /*==========================================  PAGE HTML GENERER  =======================================================
    ==============================================PAGE HTML GENERER=======================================================*/

/*---------------------------------------------------entetePageLive---------------------------------------------------*/
#body_live{/*corps des pages Live*/
    background-color: #3F3737;
}

/*---------------------------------------------------------------JUMBOTRON_LIVE---------------------------------------*/
#jumbotron_epreuve{
    color: white;
    z-index: 1000;
    padding: 10px;
}
#jumbotron_epreuve>h3{
    height: auto;
    color: white;
}
.conteneur_icons_entete{ height: 50px;position: relative;}
.conteneur_icons_entete >div{/*cible le premier div*/
    display: inline-block;
}
#entete_main_icons{/*cible le deuxieme div*/
    display: inline-block;
    position: absolute;
    right: 10px;
}

#jumbotron_epreuve button{
    background-color: transparent;
    padding: 10px;
    margin: 0;
    border: unset;
}
#jumbotron_epreuve img{
    width: 30px;
    display: inline;
}
#jumbotron_icons{ border-top: 3px solid white; padding: 5px; }

#jumbotron_icons img{ width: 30px; }


/*--------------------------------------------------Bouton clignotement-----------------------------------------------*/
@-webkit-keyframes clignote {
    0%{box-shadow: 0px 0px 10px mediumvioletred;}
    0%{ border-radius: 50px 50px 50px 50px;}
    25%{box-shadow: 0px 0px 20px red;}
    25%{ border-radius: 50px 50px 50px 50px;}
    50%{box-shadow:0px 0px 30px palevioletred;}
    50%{ border-radius: 50px 50px 50px 50px;}
    100%{box-shadow:0px 0px 40px red;}
    100%{ border-radius: 50px 50px 50px 50px;}
}
#btn_clignote{

    background-color: rgba(85, 85, 85, 0.5);
}
#btn_clignote img{
    display: inline-block;
    width: 15px;
    background-color: rgba(85, 85, 85, 0.5);
}

#btn_clignote img{

-webkit-animation-name: clignote;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count:infinite;
}

/*----------------------------------------------------------PAGINATION------------------------------------------------*/
.pagination{
    text-align: right; margin: 20px; display: block;
}
.pagination a{
    text-decoration: unset; color: white;
}

/*------------------------------------------------------CAROUSEL------------------------------------------------------*/

/*----------------------CAROUSEL LIVE  & MEDIA-------------------*/
#dernier_passage_live{ color:white; }
#carousel_live{
    /*background-color: rgba(90,216,166,0.05);*/
    text-align: center;
    width: 100%;
}
#carousel_live h4{ color: white; }
#conteneur_media_img{
    height: 250px;
    display: flex;
    width:90%;
    margin: 0 auto;
    text-align: center;
}
#conteneur_media_img >div{/*cible les div contenant les images*/
    float:left;
    margin:5px;
    padding: 5px;
    margin: 0 auto;
}

#conteneur_media_img >div>img{
    max-height:185px;
    background-color: white;
    margin-top: 10px;
}
#conteneur_media_img >div>p{
    border-top: 2px solid black;
    height:65px;
    background-color: white;
}

#carousel_live .carousel-caption{
    padding: 10px;
    text-align: center;
    width: 20%;
    margin: 10px auto;
    background-color: rgba(255,255,255, 0.5);
}
.carousel-inner{
    width: 100%;
}
.carousel-inner li{
    height:auto;
    text-align: center;
    margin: 0 auto;
}
.carousel-inner a{
    background-color: transparent;
}

.media_live_caption p{
    color: black;
    font-size: 12px;
    text-align: center;
}
/*--------------------------CLASSEMENT--------------------------*/
#carousel_classement{
    /*background-color: rgba(90,216,166,0.05);*/
    text-align: center;
    margin: 0 auto;
    height: 250px;
}
#carousel_classement > .carousel-inner{
    max-height: 250px;
    margin: auto 0;
}
#carousel_classement img{
    max-width: 250px;
    margin: 0 auto;
}
.palmares_live{
    width: 900px;
    margin: 0 auto;
}
#classement_provisoir{
    text-align: center;
}
#classement_provisoir h4 { display: inline-block; color: white; border-bottom: 1px solid white; }

#container_carousel_media>h4{
    color: white;
}
.palmares_live{

}
.caption_podium{
    width: 450px;
    display: inline-block;
    margin: 0 auto;

}
.caption_podium p{
    font-size: 24px;
    background-color: transparent;
    color: white;
}

/*---------------------------------------------------GALERIE PHOTO----------------------------------------------------*/
#container_media>h4{
    text-align: left; color: white;
}
#container_media{
    display: table;
    width: 90%;
    margin: 0 auto;
}
#container_media >div{
    margin-bottom: 10px;
}
.media_thumbnail{
    position: relative;
    height: 450px;
    margin:auto 0;
    background-color: white;
    border-radius: 10px 10px 10px;
    padding:50px 20px 10px 20px ;
    border: 1px solid black;
    transition: all 0.8s;
}
.media_thumbnail a{
    text-decoration: none;
    color: black;
}
.media_thumbnail img{
    width: 100%;
    margin-bottom: 10px;
}
.download_media{
    position: relative;
    margin-bottom: 10px;
}
.download_media img{
    width: 20px;
    height: 20px;
    margin: 0 auto;
}
.download_media button{
    background-color: rgba(255,255,255, 0.5);
}
.media_thumbnail_caption{
    max-height: 120px;
    margin-top: 30px;
    width: 100%;
    right: 0px;
}
.media_thumbnail_caption p{
    padding-left: 10px;
    color: black;
}
.media_thumbnail_caption>p:nth-child(2){
    font-size: 12px;
}
.media_thumbnail_caption>p:nth-child(3){
    font-size: 12px;
}
.media_thumbnail_caption>p:first-child{/*cible le premier enfant du noeud*/
    font-size: 16px;
    background-color: rgba(83,85,85,0.5);
}

.media_thumbnail:hover{
    z-index: 100;
    transform: scale(1.1);
    transition: 0.8s;
    border: 1px solid black;
}



/*=============================================PAGE HTML RESULTAT=======================================================
===============================================PAGE HTML RESULTAT=====================================================*/
#body_resultat_live{
    background-color: #3F3737;
    color: white;
    text-align: center;
}
/*--------------------------------------------------ENTETE CLASSEMENT-------------------------------------------------*/
#entete_resultat_live{/*trait de sépartion*/
    border-bottom: 1px solid white;
}
#entete_resultat_live h1{
    color: white;
}
/*--------------------------------------------------TABLE CLASSEMENT--------------------------------------------------*/
#table_resultat_live{
    width: 80%;
    margin: 90px auto;
    background-color: darkslategray;
}

#table_resultat_live thead >tr{
    font-size: 16px;
    width: 100%;
    background-color: black;
}
#table_resultat_live th {
    padding: 10px 20px 10px 20px;
}

.premier img{ width: 20px; }
.deuxieme img{ width: 20px; }
.troisieme img{ width: 20px; }

/*-------------------------------------------POPUP MODAL PHOTO--------------------------------------------------------*/
.conteneur_modal{
    margin-top:75px;
    height: 600px;
    background-color: white;
    width: 1000px;
    margin-left: calc(50% - 475px);
}
.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;
}
#img_modal_popup img { width: 640px; height: 480px; }
.modal_body >div{
    position: relative;
    margin: 0 auto ;
    height: 520px;
    padding: 10px;
}
.modal_body >div >button{
position: absolute;
    right: 10px;
    bottom: 20px;
}
#popup_photo_paragraphe{
    padding-left: 15px;
}
#popup_photo_paragraphe p{
    color: black;
    font-size: 14px;
}
#popup_photo_paragraphe p:first-child{
    font-size: 20px;
}
#popup_photo_paragraphe hr{
    width: 50%;
}

.modal_body .download_media>button{
    width: 150px;
    display:block ;
    margin: 15px 0px 15px 0px;

}
.modal_body  .download_media a{
    text-decoration: none;
    color:unset ;
}
.modal_body  .download_media button:hover{
    background-color: rgba(36,169,210, 0.4);
    color: white;
}
.close_modal:hover{
    background-color: black;
    color: white;
}

/*DESACTIVATION TEMPORAIRE DES LIENS VERS LA BOUTIQUE HD*/
.photoHD{
    display: hidden;
}