@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/Quicksand-Light.ttf');}
@font-face{font-family:'quick-regul'; src:url('../assets/fonts/Quicksand-Regular.ttf');}
@font-face{font-family:'quick-bold'; src:url('../assets/fonts/quicksand/Quicksand-Bold.ttf');}
@font-face{font-family:'google-light'; src:url('../assets/fonts/google/GoogleSansFlex_9pt-Light.ttf');}

/*********** NAV1 ****************/
.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;}

/****************** page demarches **************/

.container_demarches{width: 100%; margin:0; padding:0; background-color: #fff;}
h1.titre_page_demarches{color:#fff; font-family: 'roboto-extra', 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;font-weight: 200;width: 80%; margin: auto;}
a{text-decoration: none; color:#fff;} a:hover{text-decoration: solid;}
a.blanc{color:#fff;} a.blanc:hover{text-decoration: underline;}
.container_bandeau_demarches{display: flex;background:linear-gradient(90deg, rgb(45, 46, 128) 0%, rgb(30, 79, 173) 100%); height: 150px ; align-items: center; }

.container_items_demarches{width: 80%; margin: auto;} h2.titre_items{text-align: center; font-family: 'roboto-extra','Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 2em;}
.container_cartes_demarches{display: flex; flex-direction: row;flex-wrap: wrap;}
.carte_item{padding:0px 10px !important; margin-top: 30px; width: 300px;}
.icone{width: 100%; height: 100px;text-align: center;}
h3.titre_carte{font-family: "quick-bold",'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: 1rem; text-align: center;line-height: 1.2; text-transform: uppercase; color: #1e4fad !important;}
ul.items{display: flex; flex-direction: row; flex-wrap: wrap; }
li{display: block; list-style-type: none; margin-right: 3px; text-align: center; color: #808080; font-family: "quick-bold",'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.4; font-size: 15px; }
.container_bleu{width: 100%; height: auto;display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;margin-top: 30px; }
.carte_bleu{width: 300px;height: auto;background:linear-gradient(90deg, rgb(45, 46, 128) 0%, rgb(30, 79, 173) 100%); padding:0 10; margin-bottom: 10px; border-radius: 0 7% 0 7%;}
h3.titre_carte_bleu{color: #fff; text-align: center; margin-bottom: 20px;font-family: "roboto-extra", 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;}

li.item_panel{margin-bottom: 20px; color:#fff;text-align: left;}
p.tous{text-align: center; font-size: 1.2em; font-family: "roboto-bold",'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif; }


/*** 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;}