:root
{
	--texture:url(../custom/texture.jpg);
    color: var(--param_couleurTexte1);

}

.img_label
{
    height:40px;
}


@font-face {
    font-family: "Arial";
    
}


#progressTelechargement
{
    box-shadow: -1px -5px 5px -3px rgba(0,0,0,0.75);
-webkit-box-shadow: -1px -5px 5px -3px rgba(0,0,0,0.75);
-moz-box-shadow: -1px -5px 5px -3px rgba(0,0,0,0.75);
}

*{
	user-select: none;
	border-collapse: collapse;
	border:0px;
	padding: 0px;
	margin: 0px;
    font-family: "Arial";
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


#boutons_tram
{
	display: none;
}



.noir_et_blanc
{
    opacity: 1;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
}

#boutonPasseport
{
    border-radius: 5px;
}


.couleur_nature
{
    background-color: #adcd76;
    border-radius:5px;
}


select{

    -webkit-appearance: none;
}




#introContainer
{

    font-size: 6vmin;
    text-align: center;
    margin:30px;
    margin-bottom:20px;


}

.texte_vignette
{

    letter-spacing:0.05em;
    font-variant:small-caps;
    font-weight:bold;
    color:#222222;
    font-size:13pt;

    border-top:solid var(--param_couleur1) 0px!important;
    border-bottom:solid var(--param_couleur1) 0px!important;
    border-right:solid var(--param_couleur1) 0px!important;
  
}


.titre_detail
{
    font-variant:small-caps;
    color:#333333;
    font-weight: bold;

}


.bouton_bascule_container
{
    width: 90%; 
    height: 6%; 
    background: rgb(249, 249, 249); 
    margin-left: 16px; 
    border-radius: 5px; 
    border-bottom: 1px solid rgb(214, 214, 214); 
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px;
    margin-bottom: 4%;
}


.bouton_bascule
{

    width: 32%; 
    height: 100%; 
    font-size: 3vmin; 
    color: var(--param_couleur3);    
    font-weight: normal;
    background: none;
    border:0;
    border-right: 1px solid rgb(193, 193, 193);
    outline: none;
    outline-width: 0;
}




.bouton_tram_enabled
{
    background-color: var(--param_couleur1)!important;
    font-weight: bold;
    color:var(--param_couleurTexte2) !important;
}


::-webkit-scrollbar {
    display: none;
}

body, html{
	height: 100%;
	width: 100%;
	margin: 0;
    padding: 0;   
}

input{
    user-select: text;
    -webkit-user-select: text;
}

/*          ECRAN DE CHARGEMENT           */
.ecran{
    display: none;
    height: 100%;
    width:100%;
}

#ecranChargement{
    display: block;
    background-image: url( '../custom/param_chargement.jpg' );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 25;
    background-color: var(--param_couleur1)!important;
}





#ecranChargement div{
    width: 100%;
    text-align: center;
    color: var(--param_couleurTexte2) ;
    background-color: var(--param_couleur1);
    padding: 1% 0;
}

/* MENU PRINCIPAL */

.screen{
	height: 100%;
    width: 100%;
    position: relative;
    margin:auto;
}



  



#mainContainer{
    overflow: hidden;
}


.ms-slide{
    width: 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%, auto;
    
}


.ms-slide img{
    height: 100%;
    max-width: 100%;
    position: relative;
}

#btMenu1, #btMenu2{
    width: 20%;
    left: 0;
    position: absolute;
    text-align: left;
    transform: translateY(-50%);
    top: 50%;
   
  
}

#btMenu1 img{
display: none;

}








#btMap{
	width: 20%;    
    right: 0;
    position: absolute;
    text-align: right;
    transform: translateY(-50%);
    top: 50%;

    font-size: 5vmin;
    padding-right: 5%;
    color: var(--param_couleur3);
    font-family: "Arial";
    font-weight: bold;
    color: var(--param_couleur2)!important; 
}



.header
{
    height: 8vh;
	width: 100%;
    position: relative;
    top: 0;
    z-index: 11;
	text-align: center;
	

    background-image: url(../custom/param_logo_header.jpg);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;

}

.btHeader
{

    left:0


}

.header0
{
    height: 8vh;
	width: 100%;
    position: relative;
    top: 0;
    z-index: 10;
	text-align: center;
	background-color: white;

    background-image:  url(../custom/param_backgroundHeader.jpg);
    background-size: auto 100%;
    background-position: center;
    background-repeat: repeat-x;

}



#menuContainer
{
    overflow-x: hidden;
    overflow: hidden;
}
.btn_tab
{
    height: 5vh;
    width: 5vh;
}




.img_logo
{
 /*width: 100%;*/
 height:8vh;
}

.header div{
    z-index: 14;
}

.pageConteneur{
    height: calc( 100% + 10px );
    width: 100%;
    position: relative;
    overflow-y: hidden;
    background-color: rgba(252,252,252);
}



#bandeauContainer{
	background-image: url( '../custom/param_bandeauAccueil.jpg' );    
    visibility: visible;
}



.bandeauContainer{
	height: 180px;	
	background-color: #DDDDDD;
	/*background-image: url( '../img/traveaux.png' );*/
    background-image: url( '../custom/param_bandeau.jpg' );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    top: 0;
    z-index: 10;
}


#filtreCarte
{
    box-shadow: 0 0 0 0 transparent; 
    outline: 0;
    background-color:transparent;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:40px;
    background-image: url(../custom/pictos/filter.png);     
    -webkit-appearance: none;
    width: 50px;
    border-radius: 5px;
    color:var(--param_couleur1); 
    font-size: 60pt;
    position:absolute;
    top:-10px;
    left:10px


    
}

.bandeauContainerHide{

    top:-1000;
    height: 0;

}

.container{
	width: 100%;
    height: 90%;
}



.imgMenu{
    height: 55%;
  
    padding-top: 10%;
}


.imgMenu_grandeIcone{

    width:40%;
    margin-top: 5%;
    margin-left:15px;
    margin-right: 15px;
    height: auto;
    padding-top :0%;
   
}




.imgMenu_grandeIcone2{

    width:90%;
    margin-left:15px;
    margin-right: 15px;
    margin-top:50px;
    height: auto;
    padding-top :0%;
   
}



.imgMenu_grandeIcone_fin{

    width:20%;
    margin-left:15px;
    margin-right: 15px;
    height: auto;
    padding-top :0%;
    margin-top:10px;
}




.txtMenu{
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 5vmin;
    padding-top: 5%;
    font-family: Arial;
    color: var(--param_couleurTexte2) ;
    bottom: 10%;
    
}


.txtMenu_grandeIcone{
    display: inline-block;
    width: 45%;
    top: 15%;
}


.txtMenu_grandeIcone2{
    display: inline-block;
    width: 0%;
    top: 15%;
}





.txtMenu_grandeIcone_fin{
    display: inline-block;
    width: 45%;
    top: 15%;
}






.zoneGabarit{
    z-index: 15;
}

.ecran{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
}

#iframeMeteo{
    height: 100%;
    width: 100%;
    
}

/*=============================================
============== MODULE TOURISTIC ===============
=============================================*/


#moduleContainer{
    
    font-family: Arial;
    overflow-y: hidden;
    overflow-x: hidden;
    display: none;
    background-color: rgba(255,255,255,0);
}

#titreContainer{
	width: calc( 100% - 10px );
	/*height: 5%;*/
	font-size: 6vmin;
    color: var(--param_couleurTexte2) ;
    z-index: 15;
    position: absolute;
    font-family: Arial;
    bottom: 0;        
    padding: 5px;
}

#searchBarreContainer{
	width: 100%;
	height: 7%;
	background: var(--param_couleur1)!important;;
    z-index: 11;
    position: relative;
    margin-bottom:10px;
}

#messageMT{
    width: 100%;
    text-align: center;
    font-size: 5vmin;
    color: var(--param_couleur3);
}


#moduleContainer .bandeauContainer{
	height: 30%;    
}

#searchBarreContainer input{
    height: 100%;
    width: 97%;
    font-size: 6vmin;
    padding-left: 3%;
    border-top: solid var(--param_couleur1)  2px!important;
    border-bottom: solid var(--param_couleur1)  2px!important;
    color: var(--param_couleur1);
}

#boutonRechercheErase{
    position: absolute;
    top: 0;
    right: 20px;
    height: 100%;
    background-color: transparent;
    font-size: 5vmin;
    width: 5%;
    text-align: center;
    color: #222222 ;
    top: 2px;
    display: none;
}

#boutonRechercheErase div{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: 100%;
}

#paramContainer{
    width: 90%;
    margin: 2% 5%;
    font-size: 6vmin;
    font-family: Arial;
    color: var(--param_couleur3);
}

#paramContainer td{
	width: 50%;
}



#paramTitre{
	color: var(--param_couleur1)!important;
	font-size:10pt;
}

.gras{
    font-weight: bold;
}

#paramSelector select{
    font-size: 5vmin;
    background-color: var(--param_couleur3);;
    color: var(--param_couleurTexte2) ;
    padding: 2% 4%;    
    width: 80%;
}

#listContainer{
	height: 55%;
    margin-top: 1%;
    /*overflow: scroll;*/
}

#listContainer table{
    border-radius: 0 20px 20px 0;
	/*height: 25%;*/
    width: 97%;
    position: relative;
 
    margin-bottom: 5%;
   

    border-top:solid var(--param_couleur1) 2px;
    border-bottom:solid var(--param_couleur1) 2px;
    border-right:solid var(--param_couleur1) 2px;
    border-collapse: separate;
    border-radius : 0px 10px 10px 0px;
    border-spacing: 0;


}

.enAvant{
    background-color: var(--param_couleur1)!important;;
}

.imgItem{
	height: 100%;
	width: 35%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
   
	overflow: hidden;
    position: relative;


}


.imgItem>img.lazy{

    background-color: white;
       max-width: 35vw;
       margin-bottom:-5px;
}


.txtItem{
    height: 100%;
    /*width: 45%;*/
    color: var(--param_couleurTexte1);
    font-size: 5vmin;
    /*padding: 5%;
    max-height: 10vmin;
    word-wrap: break-word;
    display: block;*/
    overflow: hidden;
    padding-left: 10px;
}



.item_profil{

font-weight: bold;

}


.txtItem img{
    height: 3vmin;
}

.textDate{
    color: var(--param_couleur3);;
    font-size: 3.5vmin;
}

.tab_horaire
{
    border: 1px solid #eeeeee;
    font-size:12px;
    text-align: center;
}



.distItem{
	height: 100%;
	width: 20%;
	text-align: right;
}


.span_distance_detail
{
    color: var(--param_couleur1) ;
    font-size: 3vmin;
    font-style: italic;
    font-weight: bold;
    
    
}

.vignette, .vignette2{
    color: var(--param_couleurTexte2) ;
    font-size: 3vmin;
    background-color: var(--param_couleur3);
    position: absolute;
    top: 6%;
    right: 1%;
    border-radius: 5px;
    padding: 5px;
}


.vignette3{
    color: var(--param_couleurTexte2) ;
    font-size: 3vmin;
    background-color: var(--param_couleur3);
    position: relative;    
    right: 1%;
    border-radius: 5px;
    padding: 5px;
    font-size: 13px;
}




#boutonVoirPlus{
    position: relative;
    background: white;
    margin-top: 5%;
    text-align: center;
    font-size: 5vmin;
    padding: 3%;
    margin-bottom: 5%;
}

.boutonVoirPlus{
    position: absolute;
    background: white;
    margin-top: 5%;
    text-align: center;
    font-size: 5vmin;    
    bottom: 0;
    width: 90%;
    font-weight: bold;
    font-style: italic;
}
/*==============================
=============LOADER=============
===============================*/


.iFrameLoader{
    top: 0;
    position: absolute;
    left: 0;
    z-index: 13;
    width: 100%;
    height: 100%;
    background: rgba( 200, 200, 200, 0.5);
    padding-top: 70%;
}

.loader {
  margin: 60px -16px;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;  
  left: calc( 50% - 60px );
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid var(--param_couleur1)!important; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;



}
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*=============================================
=================== FENETRE ===================
=============================================*/
#fenetreContainer{
    position: fixed;
    top: 0;
    left: 0;
    /*background: rgba( 0, 0, 0, 0.4 );*/
    height: 100%;
    width: 100%;
    z-index: 15;
    font-family: "Arial";
    display: none;    
    background-image: url( '../img/backgroundOpacity.png' );
    background-size: cover;
    background-position: center;

    
    opacity: 0;
    -webkit-transition: opacity 500ms;
    transition: opacity 500ms;
}

#fenetreCarte{
    position: relative;
    top: 2%;
    left: 2%;
    height: 96%;
    width: 96%;    
    display: none;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    transition: opacity 500ms;
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
}

.fenetreCarte{
    background: var(--param_couleur1);
}

.bouton_call {
	
	-moz-border-radius:19px;
	-webkit-border-radius:19px;
	border-radius:19px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
    font-size:5vw;
    width: 80%;
	padding:16px 31px;
    text-decoration:none;
    background-color:var(--param_couleur3);
    opacity: 1;
    text-align: center;
    height: 45px;
}

.couleurTerritoire
{

    background-color:var(--param_couleur2)!important;
}




#fenetreDetail{
    position: absolute;
    top: 2%;
    left: 2%;
    height: 96%;
    width: 96%;   
    display: none;   
    opacity: 0;
    -webkit-transition: opacity 500ms;
    transition: opacity 500ms;
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
    background-color:var(--param_couleur1) !important;
	z-index: 100;
}





#fenetreErreur{
    position: relative;
    top: 5%;
    left: 5%;
    width: 90%;
    background: var(--param_couleur3);/*background: #30B5C1;*/
    z-index: 15;
    position: absolute;
}

#fenetreLoader{
    top: calc( 50% - 60px );
    left: calc( 50% - 60px );
    width: 120px;
    height: 120px;
    position: absolute;
    z-index: 9999;
    display: none;
}

.iframeMap{
    height: 100%;
    width: 100%;
}

.fenetreHeader{
    height: 10%; 
    width: 100%;
    text-align: center;
    font-size: 5vmin;
    position: relative;
   background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: 5% center;
}

.fenetreHeader img{
    height: 100%;
    position: relative;
    
}

.fenetreHeader span{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    left: 0;
    width: 75%;
    margin: 0% 10%;
    max-height: 14vmin;
    overflow: hidden;
}

.croix{
    font-size: 8vmin;
    right: 3%;
    top: 10%;
    padding: 2%;
    position: absolute;
}

.fenetreContainer{
    position: absolute;
    height: 80%;
    width: 100%;
    background: white;    
    overflow-y: scroll;/*Fenetre detail*/
    box-shadow: inset 0 0 3px rgba(0,0,0,0.7);

}


.fenetreImageContainer{ 
    text-align: center;
    background-color: white;
    padding-left: 0px;
    overflow: hidden;

    background-image: url('../custom/param_bandeau.jpg');
    background-position: center;
    background-size: cover;
}

.fenetreImageContainer img{
    /*height: 100%;*/
    width: 100%;
}

.fenetreContainer>div:last-child{
    padding-bottom: 5%;
}


#dateArticle
{
    padding-top: 1%;
    padding-left: 5%;
    font-size:18pt;
    font-weight: bold;
    color:var(--param_couleurTexte1);;
}

.title,  #detailAdresse, #detailDirigeant, #reductionPasseport, #detailDescComplet, #detailDesc, #detailHoraire, #detailClassement, #detailEquipement, #detailTarif, #detailHandicap, #detailContact, #txt_activite, #detailAProximite, #detailPaiement, #detailStatutHoraire{
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    font-size: 4vmin;
    line-height: 6vmin;
  
}

#detailAdresse
{
    width:50vw;
}


#detailStatutHoraire
{
    width:50vw;
    margin-top:-50px;
}



#reductionPasseport
{
    color:var(--param_couleur1)!important;;
}



#labelReductionPasseport

{
    color:var(--param_couleur1)!important;
}





#labelReductionPasseport
{
    color:var(--param_couleur1)!important;
}
#detailAdresse a{
    font-weight: bold;
}





.title{
    font-weight: bold; 
}

/*=============================================
==================== DETAIL ====================
=============================================*/

#detailVehiculeConteneur
{
    width: 80%;
    margin-left: 10%;
    margin-top: 5%;
    font-size: 4vmin;
    text-transform: capitalize;
    color:#333333
}

#detailVehiculeConteneur td{
    width: 20%;
    text-align: center;
}

#detailVehiculeConteneur img{
    width: 50px;

}

.pictoGris{
    display: none;
}

#detailDesc{
    
    text-align: justify;
    font-size: 4vmin;
    line-height: 6vmin;
}



.detailDesc_zoom{
    font-size: 6vmin !important;
    line-height: 8vmin !important;
}



#detailDescComplet{
    display: none;
}





#detailClassement div{
    padding-left: 5%;
}



#detailEquipement div{
    padding-left: 5%;
}
#detailPaiement div{
    padding-left: 5%;
}





#detailTarif div{
    padding-left: 5%;
}



#detailHandicap div{
    padding-left: 5%;
}

.separator{
    height: 1px;
    width: 90%;
    margin-left: 5%;
    margin-top: 5%;
    background: #dddddd;/*background: #30B5C1;*/
}

#boutonEcouter, #boutonVente, #boutonAgrandirTexte{
    
     
     border-radius:5px;
     background-color: var(--param_couleur2)!important;
}


#boutonEcouter, #boutonVente
{
    display: none;
}




.boutonDisabled{
    opacity: 0.5;
}

#infoErrorAudio{
    width: 100%;
    color: red;
    font-size: 4vmin;
    text-align: center;
    margin-bottom: 5%;
}

/*=============================================
=============== DETAIL CIRCUIT ================
=============================================*/

.boutonDetail{
    width: 52%;
    margin-left: 20%;
    background: var(--param_couleur2)!important; 
    font-size: 6vmin;
    color: var(--param_couleurTexte2);;
    padding: 4%;
    text-align: center;
    margin-top: 5%;

}



#boutonActiviteProximite {
    width: 52%;
     margin-left: 0;
    background: var(--param_couleur2)!important;
    font-size: 6vmin;
    color: var(--param_couleurTexte2);
    padding: 4%;
    text-align: center;
    margin-top: 5%;
    border-radius: 10px;
    height: 50px;


}

#boutonEcouter, #boutonAgrandirTexte{
    width: 25vw;
    font-size: 4vmin;
    padding: 4%;
    text-align: center;
    margin-top: 3%;
    margin-left:0%
}

#boutonAgrandirTexte
{
    background-image: url('../img/agrandir.png')  !important;
    background-position: left !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.boutonReservation
{
    width:140px;    
    border-radius: 20px;
    margin:0;
    font-size: 18pt;
    margin-right: 10px;
    padding:10px;
}


.separatorVertical{
    position: absolute;
    background: white;
    height: 70%;
    width: 1px;
    top: 15%;
    left: 0;
}

.fenetreFooter{
    height: 8vh;
    min-width: 100%;
    color: black;
    
}

/*=============================================
===================== CGU =====================
=============================================*/


#CGUIframeContainer{
    width: 100%;
    height: 90%;
    /*overflow: hidden;*/
    overflow : scroll;
}

#CGUIframeContainer iframe{
    width: 100%;
    height: 100%;
    overflow: scroll;
}
/*=============================================
==================== CARTE ====================
=============================================*/

.fenetreFooter td{
    background-size: auto 80%;
    background-repeat: no-repeat;

    background-size: auto 80%;
    background-repeat: no-repeat;
    text-align: center;
    bottom: 0;
    vertical-align: bottom;
    font-size: 3vmin;
    width: 33%;
    background-position: center top;
}

.fenetreFooter td:nth-child(1){
    background-image: url('../custom/pictos/IconePosition.png');
}

.fenetreFooter td:nth-child(2){
    background-image: url('../custom/pictos/IconeMeRecentrer.png');
}

.fenetreFooter td:nth-child(3){
    background-image: url('../custom/pictos/IconeSatellite.png');
}


/*=============================================
=================== FOOTER ====================
=============================================*/

#footerDetailImages td{
    background-size: auto 60%;
    background-position: center 20%;
    background-repeat: no-repeat;
    width: 25%;
    text-align: center;
    position: relative;
}

#fenetreDetail .fenetreFooter tr:nth-child(1){
    font-size: 3vmin;
    /*height: 70%;*/
}

#fenetreDetail .fenetreFooter tr:nth-child(2){
    font-size: 3vmin;
    height: 30%;
    text-align: center;
}

#boutonFooterAppel{
    background-image: url('../custom/pictos/call.png'); 
}

#boutonFooterMail{
    background-image: url('../custom/pictos/pictoMail.png');   
}

#boutonFooterGps{
    background-image: url('../custom/pictos/route.png'); 
}

#boutonFooterQR{
    background-image: url('../custom/pictos/qrcode.png'); 
}


#boutonFooterCalendrier{
    background-image: url('../custom/pictos/calendar.png'); 
}



#boutonFooterPartager{
    background-image: url('../custom/pictos/share.png'); 
}


#boutonFooterWeb{
    background-image: url('../custom/pictos/site.png');  
}

#boutonFooterStart{
    font-size: 8vmin;
  color:var(--param_couleurTexte2)!important;
    vertical-align: middle;
    border: solid 5px white;
    font-variant: all-small-caps;
    border-radius: 15px;
    width: 70vw;
    background-repeat: no-repeat  !important;
	background-position: right center !important;
}




.boutonFooterStart_lock
{
	background-image:url(../img/lock.png)  !important;
	
}


.boutonFooterStart_unlock
{
	background-image:url(../img/unlock.png) !important;
	
}


.boutonFooterStart{

    background-color: var(--param_couleur2)!important;
}

.fenetreFooter img{
    height: 100%;
    display: none;
}

.fenetreErreurText{
    font-size: 6vmin;
    padding: 5%;
    color: var(--param_couleurTexte2);;
    text-align: center;
}

.fenetreErreurBoutonContainer{
    text-align: center;
    padding-bottom: 3%;
}

.fenetreErreurBoutonContainer span{
    font-size: 6vmin;
    padding: 1% 4%;
    background-color: white;
}

/*=============================================
=================== CIRCUIT ===================
=============================================*/

#circuitContainer{
    display: none;
    height: 100%;
    width: 100%;
    overflow: hidden;

}


#div_video
{
    background-image: url(../custom/param_icone_appli.jpg);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0px;

    display:none;
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:1000;
    top:2000px;

    top: 0;


}

#controls_audio
{
    position: absolute;
    bottom: 50px;
    left: 5vw;
    width: 90vw;
}



#div_videoStop
{

    display:none;
    z-index:9999;
    background-color:transparent;
    position:absolute;
    width:100vw;
    height:20vh;
    top:0;
    left:0
}



#MapCircuitConteneur{
    height: calc( 100% - 45px );
    width: 100%;
    position: relative;    
    margin-top: 0px;
    overflow-y: scroll;
}

#MapCircuitConteneur iframe{
    height: 90%;
}

#footerMapCircuit{
    height: 12%;   
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}


#footerMapAudio{
    height: 12%;  
    bottom: 0%; 
    position: absolute;    
    left: 0;
    width: 100%;
    color: var(--param_couleurTexte1);
    color:var(--param_couleurTexte2);
    display: none;
}


#footerVisiteGuidee{
    height: 12%;
    background: var(--param_couleur1)!important;;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: var(--param_couleurTexte2);;
    font-size:11pt;
}





#btFinCircuit, #btRetourAudioGuide{
    width: 20%;
    padding:0 !important;
    left: 0;
    position: absolute;
    text-align: left;
    transform: translateY(-50%);
    top: 50%;

    font-size: 5vmin;
    padding-left: 5%;
   
    font-family: "Arial";
    font-weight: bold;
    color: var(--param_couleur1)!important; 
}

#btFinCircuit i{
    font-size: 9vmin;
   
    padding-left: 15%;
}

#btEtapesCicuit, #btMapCicuit{
    width: 20%;    
    right: 0;
    position: absolute;
    text-align: right;
    transform: translateY(-50%);
    top: 50%;

    font-size: 5vmin;
    padding-right: 5%;
    
    font-family: "Arial";
    font-weight: bold;
    color: var(--param_couleur2)!important;
}

#btMapCicuit{
    display: none;
}


#fenetreEtapes{
    height: calc( 100% - 25px );
    width: 100%;
    position: absolute;
    top: 45px;
    background-color: #DDDDDD;
    overflow: scroll;
    font-size: 4vmin;
    font-family: Arial;
    display: none;
}


.couleurMapCircuit
{
    
    background: var(--param_couleur2)!important;
}

#headerMapCircuit{
    
    font-size: 5vmin;
    color: var(--param_couleurTexte2);;
    text-align: center;
    padding: 5%;
    position: fixed;
    top: 8vh;
    left: 0;
    z-index: 14;

    background-repeat: no-repeat;
    background-position: 5% center;
    background-size: auto 80%;
    padding-left: 0%;
    width: 100%;
}

#headerCircuit{
    color: var(--param_couleurTexte2);
    font-size: 4vmin;
    text-align: center;
    padding-top: 8%;
    padding-bottom: 5%;
    background-color: var(--param_couleur3);;
}

#listEtapesConteneur{
    margin-top:40px;
}

#listEtapesConteneur table{
    border-radius: 0 20px 20px 0;
    background: white;
    width: 95%;
    margin-top: 5%;
}

#listEtapesConteneur td{
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 2%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.compteurOrdre{
    
    height: 35px;
    width: 40px;
    border-radius: 20px;
    text-align: center;
    color: var(--param_couleurTexte2);;
    font-size: 25px;
    padding-top: 5px;
    background: var(--param_couleur2)!important;
}

#agContainer{
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0;
    z-index: 15;
}

#audioGuideContainer{
    width: 100%;
    height: calc( 100% - 45px );
    position: relative;
    top: 45px;
    background: var(--param_couleur3);;
    color: var(--param_couleurTexte2);;
}

#agHeader{
    /*height: 30%;*/
    height: 0;
    width: 100%;
    font-size: 8vmin;
    font-family: Arial;
    /*background-color: red;*/
}

#agImage{
    height: 36%;
    width: 100%;
    color: var(--param_couleurTexte1);

    /*background-image: url('../img/traveaux.png');*/
    background-image: url('../custom/bandeau.jpg');
    background-position: center;
    
    background-size: contain;
    background-repeat: no-repeat;
}

#agControl{
    /*height: 34%;*/
    height: 0;
    width: 100%;

    /*color: white;*/
    font-size: 9vmin;
    width: 100%;
    text-align: center;
    margin-top: 10%;
}

/*=========== LOADER ===========*/

.loader {    
    left: calc( 50% - 60px );
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid var(--param_couleur1)!important;; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

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








/*=========== POLICE ===========*/




#div_intersticiel
{
    z-index:100;
    background-color:#333333;
    display:none;
    width:100%;
    margin:auto;
    height:100%

}


#image_intersticiel
{
   margin:auto;
   width:100%;

}


#intersticiel_croix
{
    z-index:101;
    position:absolute;
    top:0px;
    right:0px;
    display:none;
}




.rate-base-layer
{
    color: var(--param_couleur3);
}
.rate-hover-layer
{
    color: orange;
}
.rate2
{
    font-size: 35px;
}
.rate2 .rate-hover-layer
{
    color: orange;
}
.rate2 .rate-select-layer
{
    color: orange;
}



.boutonSyRendre
{
 

    
}



#boutonSyRendre
{


    width: 160 px !important;;
    height: 20px;
   text-align: center;
    font-size: 12pt;
    padding-top: 3px;


    background-color: white !important;
    color: var(--param_couleur1)!important;
    border-color:var(--param_couleur1)!important;
    border-style: solid;
    border-width: 1 px !important;

}


    


@media screen and (orientation: landscape) {
    .screen {
        width: 35em;
    }


    .txtMenu{
       font-size: 3vmin;       
    }

    #ecranChargement
    {
        width: 35em;
        margin:auto;
        position: relative;
    }
        
    #image_intersticiel
    {    
        width:35em;

    }

    #div_intersticiel
    {

        width:35em;
    }

  
    

    #fenetreDetail
    {

        width:45em;
        position : relative;
        margin:auto;        
        /*margin-top:10%;*/
        left:0%;

    }

    .title, #detailAdresse, #detailDescComplet, #detailDesc, #detailHoraire, #detailClassement, #detailEquipement, #detailTarif, #detailHandicap, #detailContact, #detailPaiement,#detailStatutHoraire{
     
        font-size: 3vmin;
    }
    
    .txtItem
    {
        font-size: 3vmin;
    }

    .fenetreHeader
    {
                font-size: 4vmin;
    }

    #circuitContainer
    {
        width: 35em;

        margin:auto;
    }


    #headerMapCircuit
    {
        display:none;
    }
    

    #footerMapCircuit
    {
        display:none;
    }


    
body
{
    background-size: auto, auto;
    background-repeat: repeat;

}



}




#PannierContener_etape1
{
 background-color: 	var(--param_couleur2)!important;
}

.bouton_map2, #bouton_collection_add, #bouton_collection_profil
{
	background-color: 	var(--param_couleur2)!important;
	
}



.bottom_bar_map{
	background-color: var(--param_couleur2)!important;
}




#bodyIndex
{
	background-image:var(--texture)!important;
}



.bouton_bascule_actif
{
	color: var(--param_couleur2)!important;  
    font-weight: bold;
}



.ms-view_connexionok{
   border-bottom: solid var(--param_couleur2) 5px!important;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--param_couleur1)!important; 
    opacity: 1; /* Firefox */
}






#headerMapCircuit
{
	color:var(--param_couleurTexte2);
}



.vignette, .vignette2
{

	color:var(--param_couleurTexte2);
	
}