/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

-------------------------------------------------------------- */

/* police additionelle  */
@font-face{font-family: "allerit"; src: url('../polices/allerit.ttf'); }  
@font-face{font-family: "bebasneue"; src: url('../polices/bebasneue.otf'); }  
@font-face{font-family: "verdanab"; src: url('../polices/verdanab.ttf') format('truetype'); }   

/*body { text-align: center; background: #FFF url(img/background.png); border-top: 5px solid; }*/
.page { position: relative; width: 50%; margin: 0 auto 0 0; padding: 1.5em; text-align: left; border:1px solid black; }

.header {}
.main { padding: 6% 0 ; text-align: left;}
.mainmentions { padding: 0; text-align: left;}

.footer { position:fixed; width: 100%; bottom:0;  background: rgba(0,0,0,0.8); z-index: 1000;height: 40px;}

.wrapper { position: relative;
      top: 10%;
      margin: 0 auto ;
      width: 100%;
	  min-height:70%;
	  padding:2em 0em;
      z-index: 3;clear: both; 
	  /* border-bottom: solid 9px rgba(0, 105, 181, 0.7); */
	  	  background: rgba(255, 255, 255, 0.5);
  margin: 1em auto 0;
  width: 100%;
  overflow: hidden;
  padding-bottom:0;
/* border-top: solid 6px rgba(1, 152, 213, 0.7) */;  }

#separateur{background : url(img/bgbordure.png) repeat-X;margin-bottom:0; padding-bottom:0;height:7px}

.content { position: relative;
      margin: 0 auto;
      width: 80%;
	  max-width: 1200px;
	  padding:0em 3em 1em 3em;
      z-index: 4; 
	  text-align:left;}

.content h1{
      padding:50px 50px 65px 150px;
      float: left;
      width: 100%;
     text-shadow: 0 -1px 0 rgba(0,0,0,0);
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      font-weight: 100;
     margin: 0;
	  background: url(img/logoigloo.png) no-repeat 15px 0em;
	  display: block; 
	  color:#0069B5;
    }

.content-70 { float: left; width: 73%; min-height: 450px; padding: 1em 0 0 2em;}
.aside { float: right; width: 25%; overflow: hidden; padding: 6em 1em 0; text-align:center; }

.content-50 { float: left; width: 48%; min-height: 450px; padding: 1em 0 0 2em;}
.aside-50 { float: right; width: 48%; overflow: hidden; padding: 6em 1em 0; text-align:center; }





/* Entete et barre de navigation
------------------------------------------ 

.header { padding-bottom: 1.5em; padding-right: 30%; border-bottom: 1px solid; }
.header #logo { display: block; margin: 0; line-height: 1; font-weight: bold;  }
.header #logo,
.header #logo a,
.header #logo a:hover { background: transparent; text-decoration: none; color: #222; }
.header #slogan { margin: 0; }*/

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

/* .nav { border: solid #222; border-width: 1px 0; }
.nav ul {}
.nav ul li {}
.nav ul li a { float: left; display: block; padding: .5em 1em; border-right: 1px solid #222; text-decoration: none; }
.nav ul li.on a { background: #EED; color: #222; font-weight: normal; }
.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { background: #222; color: #FFF; } */

#formulaire_recherche { position: absolute; top: 50px; right: 50px; border: 0; }


/* Logos sites partenaires 
------------------------------------------ */
ul.sites {
	background:transparent;
	margin:0 auto ;
	padding:0px;
	width:100%; 
	text-align:center;
	}
ul.sites li {
	display:inline;
	margin: 0 10px 10px 0;
	padding: 0 15px;
	list-style-type:none;
	
	}
ul.sites li a:focus,
ul.sites li a:hover,
ul.sites li a:active { background-color: transparent; }	

ul.sites li img { background-color: rgba(1, 153, 215, 0.3); 
-webkit-border-radius: 15px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius: 15px;
-moz-border-radius-topright: 50px;
-moz-border-radius-bottomleft: 50px;
border-radius: 15px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;}


/* Logos sites partenaires 
------------------------------------------ */
ul.articles {
	background:transparent;
	margin:0 auto ;
	padding:0px;
	width:100%; 
	text-align:center;
	}
ul.articles li {
	display:inline;
	margin:  0;
	padding: 0 10px;
	list-style-type:none;
	
	}
ul.articles li a:focus,
ul.articles li a:hover,
ul.articles li a:active { background-color: transparent; }	

ul.articles li img {margin: 10px 0;
}	



	  
.aem{
      position: fixed;
      bottom: -18px;
      left: 0;
      z-index:100;
      display: block;
      padding: 0px;
      width: 180px;
	  height:180px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      background: rgba(255, 255, 255, 0.25);
	  background: url(img/aem.png) no-repeat;
	  }
	  
.aem:hover{/* opacity: 0.6;
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    filter: alpha(opacity=60); */
background: url(img/aemhover.png) no-repeat;	}
	  
	  

.navvertical {
	position: fixed;
      top: 30%;
      right: 0;
      z-index:50;
      display: block;
      padding: 0px;
      width: 30px;
	  height:120px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      /* background: rgba(255, 255, 255, 0.25); */
	  background:transparent;
	  /* background: url(img/alpesduleman.png); */
}

.navvertical li{
list-style-type: none;
}


.facebook a{
	width:30px;
	height:30px;
	padding:0;
	margin:0;
	float:right;
	background: url(img/facebook.png) no-repeat;
	border-bottom:1px solid #fff;
}

.facebook  a:hover , .facebook a:focus,.facebook a:active{
	width:30px;
	height:30px;
	padding:0;
	margin:0;
	float:right;
	background: url(img/facebookhover.png)no-repeat;
	border-bottom:1px solid #fff;
}

.contact a{
	width:30px;
	height:30px;
	padding:0;
	margin:0;
	float:right;
	background: url(img/contact.png)no-repeat;
	border-bottom:1px solid #fff;
}

.contact  a:hover , .contact a:focus,.contact a:active {
	width:30px;
	height:30px;
	padding:0;
	margin:0;
	float:right;
	background: url(img/contacthover.png)no-repeat;
	border-bottom:1px solid #fff;
}

.photo a{
	width:30px;
	height:30px;
	padding:0;
	margin:0;
	float:right;
	background: url(img/photo.png)no-repeat;
	border-bottom:1px solid #fff;
}

.photo  a:hover, .photo a:focus,.photo a:active{
	width:30px;
	height:30px;
	padding:0;
	margin:0;
	float:right;
	background: url(img/photohover.png)no-repeat;
	border-bottom:1px solid #fff;
}

.map a{
	width:30px;
	height:30px;
	padding:0;
	margin:0;
	float:right;
	background: url(img/map.png)no-repeat;
}

.map  a:hover, .map a:focus,.map a:active{
	width:30px;
	height:30px;
	padding:0;
	margin:0;
	float:right;
	background: url(img/maphover.png)no-repeat;
}
	
#remonter {
    position: fixed;z-index: 40; 
    bottom: 5%;
    right: 3%;
    cursor: pointer;
    display: none;
    opacity: 0.3;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    filter: alpha(opacity=30); }

#remonter:hover {
    position: fixed;
    bottom: 5%;
    right: 3%;
    cursor: pointer;
    display: none;
    opacity: 0.7;
    -moz-opacity: 0.7;
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    filter: alpha(opacity=70); }

.image_opacity {
    opacity: 1;
    -moz-opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100); }

.image_opacity:hover {
    opacity: 0.8;
    -moz-opacity: 0.8;
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    filter: alpha(opacity=80); }
	

	
#colorbox, #colorbox * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; z-index:99;
}
#colorbox img { height: inherit; } 

 img {
  max-width: 100%;
  height:auto;
}   


/* Gallery example
------------------------------------------*/
ul.gallery li{display: inline-block; margin:10px;}


.gallery a {
  display: inline-block;
  margin-top: .4em;
  margin-bottom: .4em;
}

.gallery img {
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(0,0,0,0);
  -webkit-transition: box-shadow .5s;
  -moz-transition: box-shadow .5s;
  -ms-transition: box-shadow .5s;
  -o-transition: box-shadow .5s;
  transition: box-shadow .5s;
}

.gallery a:hover img,
.gallery a:focus img {
  box-shadow: 0 0 0 6px rgba(255,255,255,1);
}





/* Gallery example
------------------------------------------*/
ul.gallery li{display: inline-block; margin:10px;}


.gallery a {
  display: inline-block;
  margin-top: .4em;
  margin-bottom: .4em;
}

.gallery img {
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(0,0,0,0);
  -webkit-transition: box-shadow .5s;
  -moz-transition: box-shadow .5s;
  -ms-transition: box-shadow .5s;
  -o-transition: box-shadow .5s;
  transition: box-shadow .5s;
}

.gallery a:hover img,
.gallery a:focus img {
  box-shadow: 0 0 0 6px rgba(255,255,255,1);
}

/* custom gallery gutters */

.gallery {
  margin: 0 -.4em;
}

.gallery .unit {
  padding: 0 .4em;
}

img {
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

figure img {
  display: block;
}

#colorbox, #colorbox * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
#colorbox img { height: inherit; } 

/* Gabarit d'impression
------------------------------------------ */
@media print {
.page,
.wrapper,
.content { width: auto; }
.nav,
.arbo,
.aside,
.footer { display: none; }
}



/* Navigation */

.navsup a {float: left; display: block; padding: 0.5em 1em; text-decoration: none; font-size:1em; color:#fff; border:2px solid transparent; font-family:"verdanab", verdana; font-weight:bold; margin-top:0.5em}
.navsup.on a {background:#fff; border :2px solid transparent; color: #0069B5; -webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px; }
.navsup a:focus,
.navsup a:hover,
.navsup a:active {background:#fff; border :2px solid transparent; color: #0069B5; -webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;}

#menuh a {float: left; display: block; padding: 0.5em 1em; text-decoration: none; font-size:1em; color:#fff;font-family:verdanab, verdana; font-weight:bold; margin-top:0.5em}
#menuh.on a {background:#3F496D; border :2px solid #fff; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px; }
#menuh a:focus,
#menuh a:hover,
#menuh a:active {background:#3F496D; border :2px solid #fff; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;}



#navsup {
	clear: both;	
	position: fixed; 
	top:0;
	margin: 0; 
	padding: 0;		
	width: 100%; 
	height:60px;
	z-index:99; 
	background:#0069B5;
	text-align:center; 
	padding-left:20px;	}

#nav_top { position: fixed; bottom: 0px; background:#0069B5; height: 30px;width: 100%; z-index: 99; font-size:0.8em;text-align:center;padding-top:10px; border-top:2px solid #fff;}
#nav_top ul {}
#nav_top ul li {}
#nav_top a {text-decoration: none; color:#fff; padding:0 10px; font-weight:bold}
#nav_top .on a { color: #000; font-weight: bold;  }
#nav_top a:focus,
#nav_top a:hover,
#nav_top a:active { color: #000; font-weight: bold; }


#qrcodepopup {
	float:left;
	margin-left:10px;
	padding-left:10px;
	margin-bottom:20px;

}

#postale{
padding-bottom:10px;
}

#contacts{
	display:block;
	color:#000;
	font-size:12px;
	line-height:20px;
	margin:0 0 10px;
	

}



#contacts a{
	color:#BBBFC3;
}

#contacts dl{
	display: block;
    margin: 0;
    padding: 0 0 10px;
	clear:both;
	min-height:25px;
	margin-left:70px;
	}
	
#contacts dl a{color:#000}

#contacts dl a:focus,
#contacts dl a:hover,
#contacts dl a:active {color:#0069B5}


#contacts dt{
	float: left;
    height: 18px;
    margin: 0 4px 0 0;
    width: 24px;
}

#contacts dd{
	height: 18px;
    margin: 0;
    padding: 0;
	float:left;
	font-size:120%;
}

#contacts h1 a{color:#fff}

#contactpopup{float:left;margin-left:20px;width:45%; text-align:center;}
.formulaire_contact_pied{width:50%;float:left}

#contactbox{
/* background-color:#4891DD;  */
/* color:#fff; */
padding:20px;
}

.carte { height:300px;margin:auto;}

.articles.comments {
    background: rgba(250, 250, 250, 0.4) none repeat scroll 0 0;
    -moz-border-radius:40px 0;
-webkit-border-radius:40px 0;

	border-radius: 40px 0;
	
}

.titre_commment {
    color: #0069B5;
    font-weight: 800;
    padding-left: 50px;
    text-align: left;
}

.date_comment {
    font-style: italic;
    padding-left: 50px;
    padding-top: 5px;
    text-align: left;
	font-weight: 400;
}

.text_comment > p {
    font-weight: 600;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 5px;
    text-align: left;
}

.button_plus {
    background: #0069B5;
    -moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px; 
    color: #fff;
    padding: 10px 20px;
}
ul.articles li .etoile_comment {
    margin: -5px 5px;
}
	
	
/* Affichage sur petits ecrans
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */
@media (max-width: 1024px) {

h2 { text-size: 80%; -webkit-text-size-adjust: 80%; }


}

@media (max-width: 800px) {

h2 { text-size: 80%; -webkit-text-size-adjust: 80%; }

.aem {
      display:none;
    }


}

@media (max-width: 800px) {

/* passer tous les elements de largeur fixe en largeur automatique */
body,
.page,
.header,
.main,
.footer,
.wrapper,
.content,
.aside { width: auto !important; margin: auto !important; padding: auto !important; }

.page { margin: 0; padding: 5%; }

nav { display: none; }
section { background-image: none; }
.container > header {
	display:none;

}
.container > header h1 img{
	width: 50px; position:absolute; top:-0.25em; right:-0.25em;}

body { text-size: 80%; -webkit-text-size-adjust: 80%; }

#contactpopup{width:100%;margin-left:0; margin-top:20px}
.formulaire_contact_pied{width:100%}
#contactbox{padding:0}
#contacts dl{margin:0}
#contacts dd{font-size:90%}


/* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
.content,
.aside { clear: both; float: none !important; width: auto !important; }
.nav ul li a { float: none; border: 0; }
#formulaire_recherche { display: none; position: static; text-align: center; }
.arbo { display: none; }
.footer .colophon { width: auto; float: none; }
.footer .generator { display: none; }

/* header du calendrier full-calendar */
table.fc-header td { display: block; text-align: left; }

}

.section1_cadeau{width:350px!important}

/* end */