@import url('https://fonts.googleapis.com/css?family=Bubbler+One|Roboto ');
/* Raleway */

BODY { margin:0; padding:0; font-size:18px;font-family: 'Roboto', sans-serif;font-size:20px;font-stretch:extra-expanded;background-color:#FFF; color:#000;background:url(images_mairie_grimaud/mairie-grimaud.jpg) no-repeat center fixed; background-size:cover} 
input, textarea, select {border-radius:5px; font-size:14px;font-family: 'Roboto', sans-serif;color:#000;padding:5px;margin:4px;font-weight:100;width:90%;border: solid 1px #dcdcdc; }
input:focus,  textarea:focus, select:focus { border: solid 1px #000;  box-shadow: 0 0 2px 2px #A4D38E;padding:5px}
.bouton {background-color:#A4D38E;cursor:pointer;width:300px}
.back_top {position: fixed;bottom:30px;margin:10px;right:30px;width:50px;height:50px;display:block;opacity:0.4;transition: .5s;background-image:url(images_mairie_grimaud/fleche-haut.png);
cursor:pointer;}
.back_top:hover {opacity:0.9;transition: .5s;}
h2 {font-size:46px;font-family: 'Bubbler One', sans-serif;color:#0A2B68}
h1 {font-size:50px;font-family: 'Bubbler One', sans-serif;color:#0A2B68;}
a:link { color:#072969; text-decoration:none; } 
a:visited { color:#072969; text-decoration:none; } 
a:hover { color:#666; text-decoration:none; }
.slide1 {height:0px}
.slide2 {height:180px; }
.bas200px {width:auto;text-align:center; background-color:#FFF;overflow:hidden}
.mairie_grimaud {width:auto;background-color:#FFF}
.recherarticle {margin:20px auto 0 auto;max-width:800px;text-align:center}
.buttons {font-size:20px;line-height:32px; color:#FFF;border:1px #333 solid; border-radius:4px; margin:1px; padding:4px 15px; text-align:center;
min-width:400px;text-decoration:none; background:linear-gradient(#041B44,#83868B);display:inline-block;transition:all .4s;
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4); text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);}
.buttons:hover {background:linear-gradient(#83868B,#041B44);transition:all .4s;text-decoration:none; cursor:pointer;}
#button2:hover {transition:all .4s;text-decoration:none; cursor:pointer;background-color:#041B44}

.divin {width:auto; margin:25px; padding:25px 25px 50px 30px; text-align:justify; border:#CCC 1px solid; border-radius: 10px 10px 0 10px; background-color:#DADBDC; }
.contact {text-align:center;max-width:360px;margin:0 auto}

.txtpt {font-size:14px}

.lignehaute {width:100%;background-color: rgba(255, 255, 255, 0.6);height:100px;line-height:100px;position:absolute;z-index:1000;}
.lignehaute .droite {width:40%;float:right;text-align:left;font-size:34px;font-family: 'Bubbler One', sans-serif; color:#000}
.lignehaute .gauche {width:30%;float:left;text-align:right;font-family: 'Bubbler One', sans-serif;font-size:64px;color:#000;}

.elu1 {width:50%;text-align:center;background-color:#0C9;padding:15px;margin:10px auto 0 auto;border-radius:20px 20px 0 0}
.elu2 {width:50%;text-align:center;background-color:#D6D6D6;padding:15px;margin:0 auto 10px auto; border-radius:0 0 20px 20px}

.mairie {width:auto;text-align:center; }
.mairieH1 {width:auto;text-align:center;margin:80px 0 }
.mairieH12 {display:none;text-align:center;width:auto; }
.mairie-in {width:100%; max-width:1300px; text-align:center;margin:0 auto;}

.rapide {overflow:auto; min-height:400px}
.rapidebtn {width:40%;margin:5px 20px;padding:15px 0;border:4px solid #FFF;display:inline-block;vertical-align:top;transition:all .5s; }
.rapidebtn:hover {background-color:#B90001; border:4px solid #B90001; transition:all .5s; }
.rapidebtn h2 {font-family: 'Bubbler One', sans-serif;font-size:24px; color:#FFF; padding:0; margin:0 }

.actubtn {width:40%;margin:5px 20px;padding:15px 0;border:2px solid #041B44; background-color:#0B599B; color:#FFF !important; display:inline-block;vertical-align:top;transition:all .5s; border-radius: 10px 10px 0 10px }
.actubtn:hover {background-color:#B90001; color:#FFF; border:2px solid #B90001; transition:all .5s; }

.webcamlien {background-color:#4689CD;height:187px;background-image:url(images_mairie_grimaud/webcam-grimud.png);background-position:center;background-repeat:no-repeat;}
.webcamlien a {font-size:58px;color:#FFF;font-family: 'Bubbler One', sans-serif; transition:all .5s;text-decoration:none }
.webcamlien a:hover {font-size:58px;color:#000;transition:all .5s; }
.webcamimage {margin:40px 50px 40px 0;vertical-align:middle}

.divindex {height:400px; width:350px; margin:15px; border:#CCC 1px solid; border-radius: 10px 10px 0 10px; display:inline-block;  
			background-color:#FFF; cursor:pointer; vertical-align:top; transition:all .5s;}
.divindex:hover { box-shadow: 8px 8px 12px #062A69;transition:all .5s;}
.divindex .txt { overflow:hidden;height:178px;font-size:16px;padding:15px; margin:0; text-align:justify; background-color: rgba(255, 255, 255, 0.8);border-radius: 10px 10px 0 10px;transition:all .5s;}
.divindex .txtfull {background-color:#F4F4F4; overflow:hidden;height:370px;font-size:16px;padding:15px; margin:0; text-align:justify;border-radius: 10px 10px 0 10px; }
.divindex h2 {font-family: 'Bubbler One', sans-serif;font-size:24px;text-align:center}
.divindex:hover .txt { animation: show-hide .5s linear forwards; background-color: rgba(255, 255, 255, 1);transition:all .5s;height:370px;margin:0;vertical-align:top }
@keyframes show-hide { 
	100% { height:370px; overflow:auto; }  
	}

.page {min-height:600px; width:auto; max-width:1050px; margin:15px auto; border:#CCC 1px solid; border-radius: 20px 20px 0 20px; background-color:#DADBDC; }
.page .txt {width:auto;font-size:16px; padding:30px; margin:0; text-align:justify;}

.btnPrintOffre {width:84px; height:84px; margin:15px auto; background-image:url(images_mairie_grimaud/print.png);display:block; transition:all .5s;}
.btnPrintOffre:hover {background-image:url(images_mairie_grimaud/print-s.png); transition:all .5s;}

.conseils {margin:20px auto;padding:15px;max-width:700px;display:block;transition:all .5s;}
.conseils:hover {background-color:#B90001 !important;color:#FFF;transition:all .5s;}

.fixNavigation { z-index: 9999; position: fixed; top: 0; width: 100%; transition:all .5s; }
/* .fixNavigation .smenus {position:fixed; transition:all .5s; } */
.fixNavigation .logo a:link, .logo a:visited { font-size:32px; transition:all .5s;}
#map_canvas {width:100%;height:450px}
.logobas {position:relative;top:-30px;}
.btnpdf {border:#FFF 1px solid;max-width:450px;width:100%;margin:15px auto;padding:10px; background-color:#DADBDC; transition:all .5s;text-align:center; display:block}
.btnpdf:hover {border:#1C3A36 1px solid; background-color:#FFF;transition:all .5s;}
	
.btns {position:fixed;right:0;top:70px;z-index:100000;overflow:hidden; transition:all .5s; }
.btnlangue {width:38px; height:38px; opacity:0.5; transition:all .4s;border:0;margin:7px; transition:all .4s;display:inline-block}
.btnlangue:hover {opacity:1;transition:all .4s;border:0;background-color:#FFF}
.btnlangueOn {width:35px; height:35px; opacity:1;border:0;background-color:#FFF;display:inline-block}
.btnlangueactif {width:35px; height:35px;transition:all .4s;border:0;padding:5px 5px}
.btnbas {width:100%; max-width:345px; margin:5px; background-color:rgba(255,255,255,0.5);transition:all .5s;}
.btnbas:hover {background-color:rgba(255,255,255,0.8);transition:all .5s;}

#navigation td { border-bottom: 1px solid #333333; text-align:left }
#navigation a { font-family: 'Roboto', sans-serif; font-size:20px; color:#082667; line-height:40px; text-decoration: none; display:block; padding:0 0 0 20px;}
#navigation a:hover { background:#B90001; color:#FFFFFF; }

.pagination {text-align:center;overflow:hidden;padding:30px;margin-top:70px}
.page2 { border: 1px solid #3B3F40; background-color:#EBEBEB; font-size:12px; line-height:16px; color:#333; padding:10px 10px;display:inline-block;margin:3px }
.page2:hover { background-color:#ADC9E7; font-size:12px; color:#FFF; }
.page1 { border: 1px solid #3B3F40; background-color:#EBEBEB; font-size:12px; line-height:16px; color:#999; padding:10px 10px;display:inline-block;margin:3px }
.pageactive {border: 1px solid #3B3F40; background-color:#ADC9E7; line-height:16px; padding:10px 10px;display:inline-block;margin:3px;color:#900;font-weight:bold; font-size:14px}

@media only screen and (max-width: 1100px)
	{
		 .lignehaute {height:80px;line-height:80px;}
		 .lignehaute .droite {width:55%;}
		 .lignehaute .gauche {font-size:54px;width:40%}
		 .elu1 {width:80%}
		 .elu2 {width:80%}
	}

@media only screen and (max-width: 768px)
	{ 
		h2 {font-size:30px;}
		h1 {font-size:34px;}
		.btns {position:relative;width:100%;text-align:center;vertical-align:top;margin:0 0 70px 0;}
		.btnlangue { opacity:0.5; transition:all .4s;border:0;padding:5px;display:inline-block}
		.btnlangueactif { opacity:1; transition:all .4s;border:0;padding:5px;display:inline-block}
		.btns {top:30px}
		.back_top {bottom:10px;right:10px;width:40px;height:40px;background-size:cover}
		.mairie-in {width:100%;margin:0}
		.rapidebtn {width:90%;margin:5px 0;}
		.lignehaute {width:100%;background-color:#DDE8F2;position:relative;}
		.lignehaute .droite {width:100%;float:none;text-align:center;font-size:24px;color:#052868}
		.lignehaute .gauche {display:none}
		.webcamlien a {font-size:38px;color:#FFF; }
		.webcamlien a:hover {font-size:38px; }
		.webcamimage {margin:40px 10px 40px 0;vertical-align:middle;width:80px;height:auto}	
		.page { width:auto; margin:15px; border-radius: 10px 10px 0 10px; }
		.page .txt {width:auto;font-size:16px; padding:30px; margin:0;}
		.fixNavigation { position:relative; }
		.mairieH1 {display:none}
		.mairieH12 {display:block}
		.divindex {width:280px; }
		
	}