/***Container1 == topbar 1 ***/
@font-face{font-family:'roboto-med'; src:url('../assets/fonts/Roboto_Condensed-Medium.ttf');}
@font-face{font-family:'roboto-light'; src:url('../assets/fonts/Roboto_Condensed-Light.ttf');}
@font-face{font-family:'roboto-extra'; src:url('../assets/fonts/Roboto-ExtraLight.ttf');}
@font-face{font-family:'quick-light'; src:url('../assets/fonts/Quicksand-Light.ttf');}
@font-face{font-family:'quick-bold'; src:url('../assets/fonts/Quicksand-Bold.ttf');}
@font-face{font-family:'quick-regul'; src:url('../assets/fonts/Quicksand-Regular.ttf');}
@font-face{font-family:'google-light'; src:url('../assets/fonts/GoogleSansFlex_9pt-Light.ttf');}
/*** Bibliotheque  ***/

.page{margin:0; padding:0}
.center{text-align: center;}
.cursor{cursor: pointer;}
a.blanc, .fleche_blanc{text-decoration: none; color:#fff;}
.mot_blanc{color:#fff;}
.gras, .bold{font-weight: bold;} .blanc_texte{color:#fff}
.italic{font-style: italic;}
.marR{margin-right: 10px;} .marL{margin-left: 10px;} 
.marT5{margin-top: 5px !important;} .marB5{margin-bottom: 5px !important;}
.marB10{margin-bottom: 10px;} .marR10{margin-right: 10px;}
.pad20{padding: 20px;}.padL20{padding-left: 20px;} .marT50{margin-top: 50px;}
.Mauto{margin:auto;} .Hauto{height: auto;}
.row{display: flex; flex-direction: row;} .space{justify-content: space-around;} .wrap{justify-content: space-around; flex-wrap: wrap;}
.relative{position: relative;} .absolu{position: absolute;}
.z1{z-index: 1;} .z2{z-index: 2;}
.colum{display: flex; flex-direction: column;}
.bleu{color: #1e4fad !important;} 
.gris{color: #808080;font-family: "quick-bold"}
.bleu_quick{color:#1e4fad; font-family: 'quick-regul','Segoe UI', Roboto;} a.bleu_quick:hover{text-decoration: underline;}
.gris-fonce{color: #676666; font-family: "quick-light";}
.small{font-size: 10px;}
.gris_pale{color:#e1dfdf;} a.text_noir{color:#0000;}
.bouton_bleu{width: 300px;text-align: center;background:linear-gradient(90deg, rgb(45, 46, 128) 0%, rgb(30, 79, 173) 100%); margin-top: 10px;}
.quickR{font-family:'quick-regul','Segoe UI', Roboto;} .quickL{font-family: 'quick-light','Segoe UI', Roboto;} .quickB{font-family: 'quick-bold', 'Segoe UI', Roboto;}

.robotoM{font-family: 'roboto-med', 'Segoe UI', Roboto;}
.size30{font-size: 30px;} .size22{font-size: 22px;} .size20{font-size: 20px;} .size18{font-size: 18px;}
.line18{line-height: 18px;} .line15{line-height: 15px;} .line10{line-height: 10px;}
.structure{width: 90%; margin: auto;}
.cadre_gris{width: 40%;margin: auto;background-color: #e1dfdf; padding: 15px}
h1.titre_page{color:#fff; font-family: 'roboto-extra';width: 90%; margin: auto;}
.container_mairie{width:100%; min-height: 1700px; max-height: 3500px;}
.container1_mairie, .container_histoire{right: 1px; width: 80%;}
.container_bandeau_mairie{display: flex;flex-direction: column;background:linear-gradient(90deg, rgb(45, 46, 128) 0%, rgb(30, 79, 173) 100%); height: 150px ; }
.menu_gris{background-color: #e1dfdf;display: flex; flex-direction: column;width: 18%; border-radius: 0px 15px;top:5px; left:5px;}
h3.center{width: 100%;}
li.chevron{list-style-image:url('../assets/icones/chevron-list.svg'); display: list-item; margin-bottom: 3px;}
.bloc_presentation{width: 100%;margin: auto; min-height: 400px; max-height: 800px;}
/*** container1 == topbar1 **/
.container{margin:0px; padding:0px; width: 100%; height: 45px; background:linear-gradient(90deg, rgb(45, 46, 128) 0%, rgb(30, 79, 173) 100%); display: flex;}
.top1{width: 80%; margin-left: 18%; margin-right: 2%;display: flex;flex-direction: row; justify-content: space-around;}
.horaires, .demarches, .contact, .reseaux{display: flex; flex-direction: row;}
.horaires{width: 25%;} .demarches{width:35% ;} .contact{width: 25%;} .reseaux{width: 15% ! important;}
.image{width: 50px;/*background-size: 100%;*/text-align: center;margin-top: 9px;} 
.ecran{margin-top: 2px;} /*.mot_horaires{width: 80%;} .mot_demarche{width: 80%px;}.mot_contact{width: 80%;}*/ .texte_horaires{cursor: pointer;}
.mot_horaires p, .mot_demarche p, .mot_contact p{color: #fff;margin-left: 5px;font-family: 'roboto-med';text-align: center;}

.facebook1, .youtube{margin-top: 7px; margin-right: 5px; padding-left: 3px;} 
.overlay-popup{display: none;}
.horaire{width: 60%; margin: auto; background:#d6d4d4;text-align: center;} .horaire img{margin-left: 500px; margin-top: 5px;}
.active-popup{display: flex ! important;}
/*** popup horaires ***/
.texte_horaires{width: 100%;font-family:'roboto-med'; padding-bottom: 5px;}
/***Container2 == topbar2 ***/
.list-group a{text-decoration: none; color:#494848;padding-left: 2px;} a:hover{color:#7e1426;}
.container2{margin:0px; padding:0px; width: 100%; height: auto;background-color: #f7f6f6;}
.menu_top2{display: flex;flex-direction: row;width: 100%; height: 150px;}
.logo_img{width: 20%;padding-left: 40px;} .image_logo{width: 150px; height: 150px; text-align: center;padding-top: 10px;} 
.items{width: 80%;height: auto;align-items: center;font-family: 'roboto-light';font-weight: 600;font-size: 1.2em;
    display: flex;flex-direction: row; justify-content: space-around; }
.mot_content{/*position:absolute; top: 55px;z-index: 1;*/ color:#494848;width: 200px;height: auto;}
.mot_content a{color:#494848;}
.mot_content a:hover, .mot_content p:hover{color: #7e1426; font-weight: bold;}
.item_content{width: 200px;} #text{display: none;} #text2{display: none;} #text3{display: none;} #text4{display: none;}
.municipale, .moncel, .economique, .associative, .cctlb{width: 20%; height: 150px; cursor: pointer;display: flex; flex-direction: column;}
.list-group{background-color: #fff;display: flex; flex-direction: column;width: 200px; text-align: justify; /*position: absolute; z-index:2;*/}
.list-group-item{padding-top: 5px; padding-bottom: 5px;margin-bottom: 2px;border-bottom:1px #e1dfdf solid;}
.list-group a{margin-left: 8px;}
.list-group a:hover{color:#0c0c87;}

/*** footer **/
.container_footer{width: 100%; margin:0; padding:0; background:linear-gradient(90deg, rgb(45, 46, 128) 0%, rgb(30, 79, 173) 100%); }
.part1{display: flex; flex-direction: row;}
a{text-decoration: none; color:#fff;} a:hover{text-decoration: solid;}
a.blanc{color:#fff;} a.blanc:hover{text-decoration: underline;}
a.bleu:hover{text-decoration: underline;}
.bloc{width: 33%;padding-top: 20px; font-family: "quick-light";} .reseaux{display: flex; flex-direction:row; justify-content:left; width: 80%; margin: auto; }
.muros{margin-left: 10px;}
.bloc_titre{width: 80%; margin:auto;border-bottom: 1px solid #fff; color:#fff;}
.bloc_texte_footer{width: 80%; margin:auto; color: #fff; line-height: 10px;}
.part2{padding-bottom: 30px;}
.facebook_footer{padding: 10px;} .youtube_footer{padding: 10px;} 
.bloc2{display: flex; flex-direction: row;}
.logo{width: 40%; margin:auto; display: flex; flex-direction: row; margin-left: 30px;} .bouton_contact{width: 60%; padding-top: 20px;}
.image_logo{width: 150px;}
img.img_logo, img.img_blason{width: 70%;;} .bouton{width: 200px; background-color: #fff; padding:3px; text-align: center;} .bleu{color:#1e4fad ;}
.mention{background-color: #fff; text-align: center; font-size: 1.2rem; font-weight: bold; padding: 7px;}