* {
	box-sizing: border-box;
}

body {
	margin:0;
	padding: 0;
}
.fondNoir {
	background: #000;
}
@font-face {
    font-family: alexBrush;
    src: url(font/alexBrush.ttf);
}
@font-face {
	font-family: dancingRegular;
	src:url(font/DancingScript-Regular.ttf);
}
@font-face {
	font-family: dancingBold;
	src:url(font/DancingScript-Bold.ttf);
	font-weight: bold;
}
@font-face {
	font-family: geoSans;
	src:url(font/GeosansLight.ttf);
}

#countdown {
	display: block;
	width: 100%;
	height: 100%;
	z-index: 100;
}
#countdown2 {
	position : absolute;
	top:25%;
	width: 100%;
	text-align: center;
	font-family: "Raleway";
	font-size: 5em;
	color: #00ff00;
	font-weight: bold;
	z-index: 100;
	background-color: #000;
	padding: 2em 0;
	border-radius: 5px;
}





/*
***************************************************** ADAPTER TAILLE POLICES
*/
#logo {
	display:block;
	width: 100%;	
	height: 100px;
	margin : 0;
	padding : 0 0 0 1em;	
}
.logoNormal {
 background: linear-gradient(to bottom, #d9d9d9 20%, #b3d7ff 100%);
}
.logoNoir {
	background-color: #000;
}

#logoCache {
	margin:0;
	padding:0;
	display: none;

}

.logo_01 {
	width: 25%
	max-height:100px;
	margin: 0 auto;
	height: 100%;
}

.logo_02 {
	text-align: center;
	width:73%;
	max-height: 100px;
}
.deroule {
	position: fixed;
	left:0;
	top:8px;
	padding: 2em 0 0 0;
	height: 50px;
	width: 100%;	
}

/*
*******************************
		Menu responsive
********************************
 */
#menu, #menu-contenu,#menu-contenu ul {
	margin: 0;
	padding: 0;
}
#menu.enHaut {
 background: linear-gradient(to bottom, #b3d7ff 60%, #ffffff 100%);

}

#menu-contenu {
	font-family: "Raleway", sans-serif;
	text-align: center;
	padding-bottom: 1em;
}


#menu-contenu li{
	display: inline;
}

#menu-contenu li a {
	border-radius: 25px;
	background-color: #FFF;
	padding: .5em 1em;
	margin-left: 1em;
	margin-right: 1em;
	text-align: center;
	color:blue;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: normal;
	transition: letter-spacing .4s;
	transition: background-color .4s;
}

#menu-contenu li a:hover {
	color: #FFF;
	background-color: blue;
	letter-spacing: 3px;
	transition: letter-spacing .3s;
	transition: background-color .3s;
}

#menu-bouton {
	display:none;
	cursor: pointer;
	background: none;
	border:none;
	padding: 0;
	font-size: 30px;
	vertical-align: top;
	line-height: 47px;
	float: right;
	margin-right: 32px;
}

#menu-overlay {
	display: none;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.4);
}

#menu-barrelat {
	display: none;
	position: fixed;
	width: 80%;
	z-index: 20;
	height: 100%;
	top :0;
	left: 0;
	background-color: #cccccc;
	transform: translateX(-100%);
	transition: transform .2s ease-out;
	font-family: "Raleway", sans-serif;
}

#menu-barrelat li {
	display: block;
	color: #000;
	margin :2em 1em 3em 0;
	background-color: #f1f1f1;
	text-decoration: none;
	border-radius: 10px;
	border:1px solid #000;
	font-family: geoSans;
	font-weight: bold;
}
#menu-barrelat li a {
	color: #000;
	text-decoration: none;
	font-weight: bold;
	vertical-align: middle;
}

#menu-barrelat-header {
	background: url(../images/logo_250_supermini.png) center;
	background-size: 400px 100px;
	background-repeat: no-repeat;
	height: 120px;
	background-color: #000;
	margin: 0 0 .5em 0;
}

#menu-barrelat-body{
	padding: 2em 1em 3em 1em;
	font-family: arial-black;
	color:#000;
}

#menu-barrelat-body li:before {
	content: ' ';
	display: inline-block;
	vertical-align: middle;
	width: 4em;
	height: 4em;
	margin-right: .5em;
	margin-bottom: 0;
}
#menu-barrelat-body li:first-child:before {
	background: url(../images/home.svg);
}
#menu-barrelat-body li:nth-child(2):before {
	background: url(../images/galeries.svg);
}
#menu-barrelat-body li:nth-child(3):before {
	background: url(../images/infos.svg);
}
#menu-barrelat-body li:nth-child(4):before {
	background: url(../images/earth.svg);
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	padding: 0;
}

#menu-barrelat-body .bouton {
	float: none;
	display: block;
	text-align: center;
	margin-top: 16px;
	height: auto;
	padding: 10px;
	line-height: inherit;
}


/*
=========================================
=========================================
		contenu modal UNE galerie
=========================================
=========================================
*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}


/* The Close Button */
.close {
    color: #00ffff;
    float: right;
    font-size: 6em;
    font-weight: bold;
}

.close:hover,.close:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 1em 16px;
    background-color: #006699;
    color: #39e600;
    text-align: center;
    font-size: 2em;
    font-variant: small-caps;
    font-weight: normal;
    font-family: "Arial";
}

.modal-body {
	padding: 2px 16px;
	font-size: 1.2em;
	font-family: "Raleway";
}

.modal-footer {
    padding: 2px 16px;
    background-color: #006699;
    color: #e6e600;
    padding: 1em 0;
    text-align: center;
    font-weight: bold;
    font-family: "Raleway";
    font-size: 1.2em;
    font-weight: normal;
}
/*
=========================================
=========================================
		contenu principal
=========================================
=========================================
*/
h1 {
	color: #1a8cff;
}
h2{
	color: #6666ff;
}
h3{
	display: block;
	width: 70%;
	font-size: 4em;
	text-align: center;
	color: #e60000;
	padding: .5em 0 0 0;
	margin: 0 auto;
	font-family: alexBrush;

}
.complh3 {
	font-size: 1.5em;
	font-family: alexBrush;
	color:#e60000;
	text-align: center;
	margin:0 0 3em 0;
}

h4{
	text-align: center;
	text-decoration: underline;
	color: #000;
	font-weight: bold;
}
h5 {
	color: #6666ff;
	font-size: 1.5em;
	font-weight:bold;
	text-decoration: none;
	text-align: center;
}
h6 {
	color: #6666ff;
	font-size: 1.2em;
	margin:0;
	padding: .8em 0;
	font-family: geoSans;
	font-weight:bold;
	text-decoration: none;
	text-align: center;
}

#auHasard {
	position: relative;
	float: left;
	margin:2em 2em 0 0;
	width: 422px;
	padding: 0 10px 15px 10px;
	border : 1px solid #000;
	border-radius: 20px;
	background: #d9d9d9;
}

#liens {
	float: right;
	margin:2em 2em 0 0;
	padding: 0 1em;
	border : 1px solid #000;
	border-radius: 20px;
	background: #d9d9d9;
	height : 10em;
}
#liens ul li a{
	text-decoration: none;
	color: #009999
}
#nouvelles1 {
	float: right;
	width: 30%;
	margin:2em 2em 0 0;
	border : 1px solid #000;
	padding: 0 1em .5em 1em;
	height: 10em;
	border-radius: 20px;
	background: #e6ccff;
}
#nouvelles2 {
	position: relative;
	margin: 0 auto;
	padding: .5em 0;
	width: 100%;
	height: 5em;
	border-radius: 10px;
	background: #f1f1f1;
	overflow-y: hidden;
	font-size: 1em;

}
#affichNouvelles {
	margin: 0;
	padding: 0;
	overflow-y: hidden;
	font-size: 1em;
}

#affichNouvelles ul li {
	list-style: none;
	padding: .2em .5em;
	margin: 0;
	font-size: 1em;
}

#affichNouvelles ul {
	margin-top: 0;
	padding: 0;
	animation-name: nouvelles;
	animation-duration: 15s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}

@keyframes nouvelles {
0% {margin-top: 0}
90% {margin-top:  -99%}
100% {margin-top: 0}
}

#leBlog {
	display:block;
	float: right;
	margin:2em 2em 0 0;
	padding: 0 1em;
	border : 1px solid #000;
	border-radius: 20px;
	background: #d9d9d9;
}

#principal {
	display: block;
	width: 90%;
	margin: 3em auto;
	padding:1em;
	border-radius: 25px;
	font-family: "Raleway";
}
.principalFond {
	background: #cccccc;
	border: 1px solid #f1f1f1;
}


#suivprec {
	width: 80%;
	margin: 1em auto;
}

#suivprec li{
	display: inline;
	margin: 0 2em;
	font-weight: bold;
}

#lepied {
	background: #b30000;
	width: 60%;
	margin:2em auto;
	border-radius: 25px;
	height: 3em;
}

#pied {
	width: 90%;
	margin: 0 auto;
	border-radius: 25px;
	text-align: center;
}

#pied a {
	margin-top: 1em;
	text-decoration: none;
	text-align: center;
	font-family: sans-serif;
	font-size: 1em;
	line-height: 3em;
	color: #FFF;
	font-size: bold;
}

.imagePres {
	border : 1px solid black;
	border-radius: 20px;
	width:100%;
	max-width: 500px;
}
/*
======================================================
======================================================
					Page TOUTES GALERIES
======================================================
======================================================

*/
#presentation {
	background-color: rgba(127,127,127,.5);
	width: 90%;
	margin: 0 auto;
	border-radius: 25px;
}
div.adaptableToutes {
	padding: 10px;
	float: left;
	width: 32.99%;
	margin : 0 0 1em 0;
}
div.galerieToutes {
	position: relative;
	border-radius: 10px;
	margin:0 auto;
	max-width: 400px;
	max-height: 267px;
	object-fit: scale-down;
}
.imgToutesgal {
	width: 100%;
	border-radius: 10px;
	object-fit: scale-down;
}
.lienImage {
	text-decoration: none;
	font-family: "Raleway";
	color: #000;
	font-weight: bold;
}
#infosPubGal {
	float: right;
	border-radius: 10px;
	border:1px solid black;
	margin: 0 0 02em;
	padding: 0 1em .5em 0;">
}

.tagRouge{
	font-family: "geoSans";
	position: absolute;
	right:0;
	top:0;
	background:red;
	font-weight: bold;
	text-align: center;
	border-radius: 10px;
	color:#FFF;
	padding:.5em 1em;
	font-size:.8em;
	margin:0;
}

.tagGalRouge {
	font-family: "geoSans";
	float: right;
position: relative;
	top:2em;
	right : 1em;
	z-index: 200;
	
	background:red;
	color: red;
	font-weight: bold;
	text-align: center;
	border-radius: 10px;
	color:#FFF;
	padding:0 .5em ;
	font-size:.6em;
	margin:0;
}
.tagVert{
	font-family: "geoSans";
	position: absolute;
	right:0;
	top:0;
	background:green;
	text-align: center;
	font-weight: bold;
	border-radius: 10px;
	color:#FFF;
	padding:.5em 1em;
	font-size:.8em;
	margin:0;
}
.tagGris{
	font-family: "geoSans";
	position: absolute;
	right:0;
	top:0;
	background:grey;
	text-align: center;
	font-weight: bold;
	border-radius: 10px;
	color:#FFF;
	padding:.5em 1em;
	font-size:.8em;
	margin:0;
}
.descripToutes {
	font-family: "Raleway";
	font-size: 1em;
	background-color: rgba(127,127,127,.5);
	text-align: center;
	border-radius: 0 0 10px 10px;
	width: 70%;
	margin: 0 auto;
}

/*
======================================================
======================================================
					Page UNE galerie
======================================================
======================================================
*/
#diapOrdonn, #diapoAlea {
	font-family: 'Raleway';
	font-size: 1em;
	border-radius: 20px 5px 20px 5px;
	cursor: pointer;
	padding: 0.4em .5em;
	margin: 0 1em 0 0;
}

#diapOrdonn {
	background-color: #df9fbf;
}
#diapOrdonn:hover {
	box-shadow: 5px 10px 12px #f2d9e6;	
}
#diapoAlea {
	background-color: #ffb84d;
}
#diapoAlea:hover {
	box-shadow: 5px 10px 12px #ffd699;	
}

.option_visu {
	display: inline-block;
	font-family: "Raleway";
	margin: 0 2em;
	font-weight: bold;
	text-align: left;
	line-height: 1.2em;
}
#option_visu a {
	text-decoration: none;
	color: #000;
}

.info {
	display: inline-block;
	background-color: blue;
	border-radius: 90px;
	font-family: 'Arial';
	font-weight: bold;
	vertical-align:middle;
	margin: 0 0 0 1em;
	padding:.5em 1em;
	color: #FFF;"
	cursor: help;
}

.info:hover {
	background-color: #3399ff;
		cursor: pointer;
}

#lesphotos {
	width: 100%;
	margin: 0;
}
.laPhoto {
	width: 100%
	margin:0;
}
.adaptable {
	padding: 10px;
	float: left;
	width: 32.99%;
	object-fit: scale-down;
}

div.galerie {	
	border-radius: 10px;
	margin:0 auto;
	height: 267px;
	max-width: 400px;
	}

.imgGalerie {
	display: block;
	height: 100%;
	opacity: 1;
	float: none;
	max-height: 267px;
	width: 100%;
	margin:0 auto;
	object-fit: scale-down;
	border-radius: 10px 10px 10px 10px;	
}


#imgGalerie:hover {
	opacity: .6;
}

.descrip {
	text-align: center;
	font-family: "geoSans";
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}


/*
======================================================
======================================================
					Page DIAPORAMA
======================================================
======================================================

*/
#conteneurDiapo {
	width: 100%;
}

#imageUneDiapo {
	display: block;
	margin: 0 auto;
	width: 100%;
}

#btnRetourDiapo {
	width: 100%;
	margin:0 auto;
	text-align: center;
	margin: .2em 0 0 0;
}


#boutonRetourDiapo {
	font-family: "Raleway";
	font-size: 1em;
	width: 100%;
	margin:0 auto;
	background-color: rgba(41, 128, 185, .6);
	color: #f1f1f1;
	border-radius: 10px;
	padding: .5em 1em;
}
#principalDiapo {
	position: relative;
	width:100%;
	margin: 0 auto;
	border-radius: 5px;
	max-width: 1200px;
}
#aideDiapo {
	float: right;
	position: absolute;
	top: .5em;
	right: .5em;
	margin: 0;
	padding: 0 .5em;
	font-size: 2em;
	font-weight: bold;
	color: #FFF;
	background: blue;
	border-radius: 30px;
	cursor: pointer;
}
/*=========================================
		contenu modal Diapo
=========================================*/

.modalDiapo {
    display: none; 
    position: fixed; 
    z-index: 100; 
    padding-top: 5em; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
}
.modal-contentDiapo {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 60%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.closeDiapo {
    color: #00ffff;
    float: right;
    font-size: 6em;
    font-weight: bold;
}
.closeDiapo:hover,.closeDiapo:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}
.modal-headerDiapo {
    padding: .5em 0 1.5em 0;
    background-color: #006699;
    color: #39e600;
    text-align: center;
    font-size: 2em;
    font-variant: small-caps;
    font-weight: normal;
    font-family: "Arial";
    font-weight: bold;
}
.modal-bodyDiapo {
	padding: 2px 16px;
	font-size: 1em;
	font-family: "Raleway";
}

.modal-footerDiapo {
    padding: 2px 16px;
    background-color: #006699;
    color: #e6e600;
    padding: 1em 0;
    text-align: center;
    font-weight: bold;
    font-family: "Raleway";
    font-size: 1.2em;
    font-weight: normal;
}

/*
======================================================
======================================================
					Page SOLO
======================================================
======================================================
*/
#overBtnG, #overBtnD {
	position: absolute;
	top: 0;
	margin: 0;
	padding:0;
	width: 25%;
	text-align: center;
	z-index: 2;
	color: #000;
	font-size: 10em;
	line-height: 1.7em;
	opacity: 0;
	cursor: pointer;
	border-radius: 0;
}

#overBtnG{
	left: 0;
}

#overBtnD {
	right: 0;
}

#overBtnG:hover, #overBtnD:hover {
	opacity: .2;
	border-radius: 0;
}

#legende {
	text-align: center;
	margin:0 0 10px 0;
	font-family: geoSans;
	font-size: 1em;
	font-weight: normal;
	color: #ff8000;
}
#legendePetite {
	text-align: right;
	margin:0 5px 0 0;
	font-family: geoSans;
	font-size: 1em;
	font-weight: normal;
	color: #ff8000;
	display: none;
}

#boutonRetour, #boutonRetour2, #boutonGdeCarte, #boutonGdeCarte2   {
	background-color: darkgrey;
	border-radius: 5px;
	padding: 0 1em;
	color: #000;
	text-decoration: none;
	font-family: "Raleway";
	line-height: 3em;
}

#btnGdeCarte {
	margin:0;
	padding: 0 2em 0 0;
	display: block;
	float: right;
}

#boutonRetour, #boutonRetour2 {
		font-size: .8em;
		background-color: rgba(41, 128, 185, .6);
		color: #f1f1f1;
}

#boutonGdeCarte, #boutonGdeCarte2 {
		background-color: rgba(90, 184, 161, .6);
		color: #f1f1f1;
		font-size: .8em;
}

#boutonRetour2 {
	display: block;
		margin: 3em 0 0 0;
}


#zoneInfos {
	float: right;
	margin: 0 ;
	font-family: "Raleway";
}
#tblInfos {
	margin: 0 auto;
	padding: 0;
}
#petiteCarte {
	float: right;
	display: block;
	margin: 0;
	padding: 0;
}

#map {
	margin:0;
	padding: 0;
	}

#gdeCarte {
	position: absolute;
	top: 0;
	left:0;
	z-index:-1;
	visibility: hidden;
}
#principalUne {
	position: relative;
	margin: 0;
	background-color: #404040;
	border-radius: 5px;
	z-index: 0;	
	max-width: 1498px;
}


img.affichUne {
	display: block;
	width:99%;
	margin: 0 auto;
}
#aideSolo {
	float: right;
	position: absolute;
	top: .5em;
	right: .5em;
	margin: 0;
	padding: 0 .5em;
	font-size: 2em;
	font-weight: bold;
	color: #FFF;
	background: blue;
	border-radius: 30px;
	cursor: pointer;

}
/*=========================================
		contenu modalSolo
=========================================*/

.modalSolo {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    padding-top: 5em; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-contentSolo {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 60%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);

}

/* The Close Button */
.closeSolo {
    color: #00ffff;
    float: right;
    font-size: 6em;
    font-weight: bold;
}

.closeSolo:hover,.closeSolo:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}

.modal-headerSolo {
    padding: .5em 0 1.5em 0;
    background-color: #006699;
    color: #39e600;
    text-align: center;
    font-size: 2em;
    font-variant: small-caps;
    font-weight: normal;
    font-family: "Arial";
    font-weight: bold;
}

.modal-bodySolo {
	padding: 2px 16px;
	font-size: 1em;
	font-family: "Raleway";
}

.modal-footerSolo {
    padding: 2px 16px;
    background-color: #006699;
    color: #e6e600;
    padding: 1em 0;
    text-align: center;
    font-weight: bold;
    font-family: "Raleway";
    font-size: 1.2em;
    font-weight: normal;
}

/*
****************************************
****************************************
			Slide index
****************************************
****************************************
*/
#slidePres01 {
	position: relative;
	width:100%;
	margin: 0 auto;
	left: 0px;
	max-width: 400px;
	height: 270px;
}

#slidePres02 {
	width: 98%;
	padding: 0;
	margin : 0 auto;
}

#slidebase {
	position: absolute;
	left: 0;
	z-index: 0;
	width: 400px;
	height:267px;
	object-fit: scale-down;
	margin: 0 auto;
	padding: 0;
}

#slideImg1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height:267px;
	object-fit: scale-down;
	z-index: 1;
	margin: 0 auto;
	padding: 0;
}



/*
=========================================
=========================================
		VIDEOS
=========================================
=========================================
*/
#photosvideos {
	width: 100%;
	margin:.5em auto;
	text-align: center;
}

.btnOn {
	background-color: #0040ff;
	color: #FFF;
	font-weight: bold;
	border-bottom: 2px solid #f1f1f1;
	border-right: 2px solid #f1f1f1;
	border-top: 2px solid #999999;
	border-left: 2px solid #999999;
}

.btnPhotos {
	margin: 0;
	padding: 0 1em;
	font-family: geoSans;
	font-size: 1.5em;
	text-decoration: none;
	border-radius: 10px 0 0 10px;
}

.btnVideos {
	margin: 0;
	padding: 0 1em;
	font-family: geoSans;
	font-size: 1.5em;
	text-decoration: none;
	border-radius: 0 10px 10px 0;
}

.btnOff {
	background-color: #d9d9d9;
	color: #0040ff;
	font-weight: normal;
	border-bottom: 2px solid #999999;
	border-right: 2px solid #999999;
	border-top: 2px solid #f1f1f1;
	border-left: 2px solid #f1f1f1;
}
.adaptableVideo {
	padding: 0 10px 15px 10px;
	float: left;
	width: 32.9%;
	object-fit: scale-down;
	text-align: center;
}

/*
=========================================
		contenu modalVideo
=========================================
*/
.modalVideo {
    display: none; 
    position: fixed; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-contentVideo {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}


.closeVideo {
    color: #b3b3b3;
    float: right;
    font-size: 6em;
    font-weight: bold;
}

.closeVideo:hover,.closeVideo:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}

.modal-headerVideo {
    padding: 1em 16px;
    background-color: #000;
    text-align: center;
    font-size: 2em;
    font-variant: small-caps;
    font-weight: bold;
    font-family: Arial;
    color: #999999;
}

.modal-bodyVideo {
	padding: 2px 16px;
	font-size: 1.2em;
	font-family: "Raleway";
	background-color: #666666;
}

.modal-footerVideo {
    padding: 2px 16px;
    background-color: #000;
    color: #999999;
    padding: 1em 0;
    text-align: center;
    font-weight: bold;
    font-family: "Raleway";
    font-size: 1.2em;
    font-weight: normal;
}
#sourceVid {
	width: 99%;
	margin: 0 auto;
}
#locVideo {
	margin: 0;
	padding: 1em 0;
	background-color: #666666;

}
#carteVideo {
	width: 300px;
	height:200px;
	margin: 0 auto;
}


/*
===================================================================================
===================================================================================
===================================================================================
								MEDIA QUERIES
===================================================================================
===================================================================================
===================================================================================
*/
@media  screen and (orientation:landscape) and (max-width: 800px) {
	#logo {
		object-fit: scale-down;
		display: block;
		height:30px;
	}
	.logo_01, .logo_02 {
		max-height: 30px;
	}
	#menu-contenu {
		display: none;
	}
	#menu-bouton {
		display: block;
	}
	#menu-barrelat, .menu-active #menu-overlay {
		display: block;
		font-size: .7em;
	}
	#menu-barrelat {
		top: 5px;
	}
	#menu-barrelat {
		top: 20px;
	}
	.menu-active #menu-barrelat {
		transform: translateX(0);
	}
	#menu-barrelat-header {
		display: block;
		object-fit: scale-down;
		background-size: 200px 50px;
		max-height: 30px;
	}
	#menu-barrelat li {
		width: 40%;
		float: left;
		margin:2em 1em;
	}
	#menu-barrelat li a {
		font-size: 1em;
	}
	#infosPubGal {
		float: none;
	}
	#principal {
		margin:1em auto;
	}
	div.adaptableToutes {
	width: 49%;
	}
	div.adaptable {
	width: 49%;
	}
	h3 {
		font-size: 2.2em;
	}
	.complh3 {
		margin:0 0 1em 0;
	}
	.option_visu {
		font-size: .9em;
	}
	#aideSolo {
		font-size: 1em;
		padding : 0 1.5em;
	}
	.modal-contentSolo {
		width: 80%;
	}
	#petiteCarte {
		display: none;
	}
	#gdeCarte {
		width: 400px;
		height: 250px;
	}
	#zoneInfos {
		float: none;
		font-size: .8em;
	}
	#tblInfo {
		width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	.simple {
		display: inline-block;
		margin: 0 auto;
		padding: 0 2em;
		color: #FFF;
	}
	#btnGdeCarte {
		display: none;
	}
	#boutonGdeCarte {
		font-size: .7em;
	}
	#legendePetite {
		display: block;
		float: right;
		width:40%;
		margin:.4em 1em 0 0;
		font-size: .9em;
	}
	#boutonRetourDiapo {
		padding: 0 .5em;
		font-size: .9em;
	}
	#aideDiapo {
		font-size: 1em;
		padding : 0 1.5em;
	}
	.modal-contentDiapo {
		width: 80%;
		font-size: .9em;
	}

}

@media screen and (max-width: 320px) and (orientation:portrait) {
	#logo {
		object-fit: scale-down;
		display: block;
		height: 50px;
	}
	.logo_01, .logo_02 {
		max-height: 50px;
	}
	#menu-contenu {
		display: none;
	}
	#menu-bouton {
		display: block;
	}
	#menu-barrelat, .menu-active #menu-overlay {
		display: block;
		font-size: .7em;
	}
	#menu-barrelat {
		top: 20px;
	}
	.menu-active #menu-barrelat {
		transform: translateX(0);
	}
	#menu-barrelat-header {
		display: block;
		background-size: 200px 50px;
	}
	
	#principal {
		padding: 5px;
	}
	#presentation {
		width: 95%;
		font-size: .9em;
	}

	div.adaptableToutes {
	width: 99%;
	}

	div.adaptable {
		width: 99.99%;
		margin: 6px 0;
	}
	.adaptableVideo {
		width: 98%;
	}
	div.galerie {
	height: 180px;
	}

	#imgGalerie {
		height: 180px;
		object-fit: scale-down;
	}
	#principalUne {
		display: block;
		width: 100%;
	}
	img.affichUne {
		width: 100%;
	}
	#zoneInfos {
		float: right;
		width: 100%;
		padding: 0;
		margin: 0;
		color: #FFF;
		text-align: center;
		font-size: .7em;
	}
	#tblInfo {
		width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	.simple {
		display: inline-block;
		margin: 0 auto;
		padding: 0 1.3em;
	}
	#legendePetite {
		display: block;
		float: right;
		width:40%;
		margin:.4em 1em 0 0;
		font-size: .9em;
	}
	#gdeCarte {
		width: 250px;
		height: 250px;
	}
	#overBtnG, #overBtnD {
		font-size: 7em;
		line-height: 1.1em;
	}
	#petiteCarte {
		display: none;
	}
	#boutonRetour {
		display: inline-block;
		font-size: .9em;
		line-height: 2em;
	}
	#boutonGdeCarte {
		line-height: 1.4em;
		font-size: .9em;
		margin: .2em 0;
		padding: 0 .3em;

	}
	#btnGdeCarte {
		display: none;
	}
	#slidebase {
		width: 250px;

	}
	#slideImg1 {
		width: 250px;
	}
	#liens {
		margin:1em 0;
		float: none;
		width: 95%;
	}
	#option_visu{
		width: 100%;
		font-size: .9em;
		margin: 1em 0;
		text-align: right;
	}
	.option_visu {
		display: block;
		margin: 1.2em 0;
		font-weight: normal;
	}
	#diapOrdonn, #diapoAlea {
		font-weight: normal;
		font-size: .9em;
	}

	h3 {
		font-size: 2em;
	}
	#auHasard {
		float: none;

		width: 99%;
		margin: 0;
		padding: 0;
		max-width: 420px;
	}
	#nouvelles1, #liens {
		float: none;
		margin: 1em auto;
		width: 90%;
		height: auto;
	}
	#affichNouvelles ul li {
		font-size: .8em;
	}
	#infosPubGal {
		float: none;
	}
	.modal-contentSolo {
		width: 98%;
	}
	.closeSolo {
		font-size: 5em;
	}
	.modal-bodySolo {
		font-size: .8em;
	}
	.modal-bodySolo img {
		width: 100%;
		max-width: 600px;
	}
	.modal-footerSolo {
		font-size: 1em;
	}
	/*============== Modal Une galerie ==============*/
	.modal-content {
		width: 98%;
	}

	/* The Close Button */
	.close {
		font-size: 5em;
	}
	.modal-body {
		font-size: .9em;
	}

	.modal-footer {
		font-size: 1em;
	}
	#aideSolo {
	float: right;
	position: absolute;
	top: 0.2em;
	right: 0;
	margin: 0;
	padding: 0 .5em;
	font-size: 2em;
	}
	/*============== Modal Une Diapo ==============*/
	.modal-contentDiapo {
		width: 98%;
	}

	/* The Close Button */
	.closeDiapo {
		font-size: 5em;
	}
	.modal-bodyDiapo {
		font-size: .9em;
	}

	.modal-footerDiapo {
		font-size: 1em;
	}
	#aideDiapo {
	float: right;
	position: absolute;
	top: 0.2em;
	right: 0;
	margin: 0;
	padding: 0 .5em;
	font-size: 2em;
	}
	/*============== Modal Video ==============*/

    .modal-contentVideo {
		width: 98%;
		font-size: .9em;
	}
	.closeVideo {
		font-size: 5em;
	}
	.modal-bodyVideo {
		font-size: .9em;
	}

	.modal-footerVideo {
		font-size: 1em;
	}
	
}




@media screen and (min-width: 321px) and (max-width: 700px) and (orientation:portrait) {
	
	#logo {
		height: 50px;
		width: 90%;
		margin:0 0 0 1em;
	}
	.logo_01, .logo_02 {
		max-height: 50px;
	}
	#menu-contenu {
		display: none;
	}
	#menu-bouton, #menu-barrelat, .menu-active #menu-overlay {
		display: block;
	}
	.menu-active #menu-barrelat {
		transform: translateX(0);
	}
	#menu-barrelat-header {
		display: block;
		background-size: 320px 50px;
		object-fit: contain;
		background-position: center;
		background-repeat: no-repeat;
	}
	#liens {
		float :none;
		width:80%;
		margin:0 0 2em 2em;
	}
	#presentation {
		width: 95%;
	}

	div.adaptableToutes {
	width: 49.8%;
	font-size: .9em;
	}

	div.adaptable {
		width: 49.99%;
		margin: 6px 0;
	}
	.adaptableVideo {
		width: 99%;
	}
	
	div.galerie {
	height: 180px;
	}

	#imgGalerie {
		height: 180px;
		object-fit: scale-down;
	}

	img.affichUne {
		width: 100%;
	}
	#zoneInfos {
		float: right;
		width: 100%;
		padding: 0;
		margin: 0;
		color: #FFF;
		text-align: center;
		border:none;
		display: inline-block;
	}
	#tblInfo {
		width: 100%;
		padding: 0;
		margin: 0 auto;
		display: inline-block;
	}
	.simple {
		display: inline-block;
		margin: 0 auto;
		padding: 0 2em;
	}
	#gdeCarte {
		width: 300px;
		height: 200px;
	}
	#petiteCarte {
		display: none;
	}
	#overBtnG, #overBtnD {
		font-size: 7em;
		line-height: 1.1em;
	}
	#boutonRetour {
		display: inline-block;
		font-size: .9em;
		line-height: 2em;
	}
	#boutonGdeCarte {
		line-height: 2em;
		font-size: .9em;
	}
	#btnGdeCarte {
		display: none;
	}
	#legendePetite {
		display: inline-block;
	}
	#slidebase {
		width: 300px;

	}
	#slideImg1 {
		width: 300px;
	}
	#liens {
		margin:1em 0;
		float: none;
		width: 95%;
	}
	#option_visu{
		font-size: .9em;
	}
	.option_visu {
		display: block;
		margin: 1.2em 2em;
	}
	h3 {
		font-size: 3em;
	}
	#auHasard {
		float: none;
		width: 99%;
		margin:1em auto;
		max-width: 420px;
	}
	#slidePres01 img {
		width: 99%;
		margin: 0 auto;
	}
	#nouvelles1, #liens {
		float: none;
		margin: 1em auto;
		width: 90%;
		height: auto;
	}
	#affichNouvelles ul li {
		font-size: .9em;
	}
	#infosPubGal {
	float: none;
	}
	.modal-contentSolo {
		width: 98%;
	}
	.closeSolo {
		font-size: 5em;
	}
	.modal-bodySolo {
		font-size: .9em;
	}
	.modal-bodySolo img {
		width: 100%;
		max-width: 600px;
	}
	.modal-footerSolo {
		font-size: 1em;
	}
	/*============== Modal Une galerie ==============*/
	
	.modal-content {
		width: 98%;
	}

	/* The Close Button */
	.close {
		font-size: 5em;
	}
	.modal-body {
		font-size: 1em;
	}

	.modal-footer {
		font-size: 1em;
	}
	#aideSolo {
	float: right;
	position: absolute;
	top: 0.2em;
	right: 0;
	margin: 0;
	padding: 0 .5em;
	font-size: 2em;
	}
	/*============== Modal Une Diapo ==============*/
	.modal-contentDiapo {
		width: 98%;
	}

	/* The Close Button */
	.closeDiapo {
		font-size: 5em;
	}
	.modal-bodyDiapo {
		font-size: .9em;
	}

	.modal-footerDiapo {
		font-size: 1em;
	}
	#aideDiapo {
	float: right;
	position: absolute;
	top: 0.2em;
	right: 0;
	margin: 0;
	padding: 0 .5em;
	font-size: 2em;
	}
	/*============== Modal Video ==============*/
	
    .modal-contentVideo {
		width: 98%;
		font-size: .9em;
	}
	.closeVideo {
		font-size: 5em;
	}
	.modal-bodyVideo {
		font-size: .9em;
	}

	.modal-footerVideo {
		font-size: 1em;
	}

}


@media screen and (min-width: 701px) and (max-width: 1199px) {
	#logo {
		height: 60px;
		width: 90%;
		margin:0 0 0 1em;
	}
	.logo_01, .logo_02 {
		max-height: 50px;
	}
	#menu-contenu {
		display: none;
	}
	#menu-bouton, #menu-barrelat, .menu-active #menu-overlay {
		display: block;
	}
	.menu-active #menu-barrelat {
		transform: translateX(0);
	}
	#liens {
		margin: 0;
		float: right;
	}
	.adaptable {
		width: 49.99%;
		margin: 6px 0;
	}
	.adaptableToutes {
		width: 49.9%;	
	}
	.adaptableVideo {
		width: 49%;
	}

	img.affichUne {
		width: 100%;
	}
	#principalUne {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#zoneInfos {
		float: left;
		width: 100%;
		padding: 0;
		margin: 0;
		color: #FFF;
		text-align: center;
		border:none;
		display: inline-block;
	}
	#tblInfo {
		display: inline-block;
		width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	.simple {
		display: inline-block;
		margin: 0 auto;
		padding: 0 2em;
	}
	#gdeCarte {
		width: 400px;
		height:300px;
	}
	#petiteCarte {
		display: none;
	}
	#legendePetite {
		display: inline-block;
	}
	#overBtnG, #overBtnD {
		font-size: 12em;
		line-height: 1.3em;
	}
	#boutonRetour {
		display: inline-block;
		font-size: .9em;
		line-height: 2em;
	}
	#boutonGdeCarte {
		line-height: 2em;
		font-size: .9em;
	}
	#btnGdeCarte {
		display: none;
	}
	#btnPetiteCarte {
		display: inline-block;
	}
	#option_visu{
		font-size: .9em;
	}
	#nouvelles1, #liens {
		float: left;
		margin: 2em 0 1em 2em;
	}
	#infosPubGal {
		float: none;
	}
	.modal-contentSolo {
		width: 80%;
	}
	.closeSolo {
		font-size: 5em;
	}

	.modal-bodySolo {
		font-size: 1em;
	}
	.modal-bodySolo img {
		width: 100%;
		max-width: 600px;
	}
	.modal-footerSolo {
		font-size: 1.1em;
	}
	/*============== Modal Une galerie ==============*/
	
	.modal-content {
		width: 80%;
	}

	/* The Close Button */
	.close {
		font-size: 6em;
	}
	.modal-body {
		font-size: 1em;
	}

	.modal-footer {
		font-size: 1.1em;
	}
/*============== Modal Une Diapo ==============*/
	.modal-contentDiapo {
		width: 98%;
	}

	/* The Close Button */
	.closeDiapo {
		font-size: 6em;
	}
	.modal-bodyDiapo {
		font-size: .9em;
	}

	.modal-footerDiapo {
		font-size: 1.1em;
	}
	/*============== Modal Video ==============*/

    .modal-contentVideo {
		width: 98%;
		font-size: .9em;
	}
	.closeVideo {
		font-size: 6em;
	}
	.modal-bodyVideo {
		font-size: .9em;
	}

	.modal-footerVideo {
		font-size: 1.1em;
	}
}

@media screen and (min-width: 1200px) and (max-width: 1459px) {
	
	#principalUne {
		float: left;
		width: 82%;
		padding: 1px;
	}
	img.affichUne {
		width: 99%;
	}
	#petiteCarte {
		margin:0;
		display: block;
		float: right;
		width: 210px;
	}
	#map {
		padding:0;
		width: 220px;
		height: 220px;
	}
	#zoneInfos {
		width: 17%;
		float: right;
		padding: 0;
		margin: 0 0 2em 0;
		text-align: center;
		font-family: "Raleway";
		font-size: 1.5em;
		color: lightgrey;
		border-radius: 10px;
		border:1px solid #f1f1f1;
	}
	#tblInfo {
		padding: 0;
		margin: 0 auto;
	}
	.simple {
		display: block;
		margin: 0 auto;
	}
	#overBtnG, #overBtnD {
		font-size: 14em;
		line-height: 1.4em;
	}
	#gdeCarte {
		width: 600px;
		height: 400px;
	}
	#boutonRetour2 {
		font-size: .9em;
		margin: 8em 0 0 0;
	}
	#btnGdeCarte {
		display: block;
		float: right;
	}
	#btnPetiteCarte {
		display: none;
	}
	#nouvelles1, #liens {
		float: left;
		margin: 2em 0 1em 2em;
	}

}

@media screen and (min-width: 1460px) {
	.adaptable {
		width: 24.99%;
		margin: 6px 0;
	}
	#principalUne {
		float: left;
		padding: 1px;
		max-width: 1200px;
	}
	img.affichUne {
		width: 99%;
	}
	#overBtnG, #overBtnD {
		font-size: 14em;
		line-height: 1.4em;
	}
	#gdeCarte {
		width: 600px;
		height: 400px;
	}
	#petiteCarte {
		width: 17%;
		margin: 0 0 0 5px;
		padding: 0;
		display: block;
		float: left;
	}
	#map {
		width: 250px;
		height: 250px;
		float: left;
	}
	#zoneInfos {
		width:15%;
		float: left;
		padding: 0;
		margin: 0 0 2em 5px;
		text-align: center;
		font-family: "Raleway";
		font-size: 1.5em;
		color: lightgrey;
		border-radius: 10px;
		border:1px solid #f1f1f1;
	}
	#tblInfo {
		padding: 0;
		margin: 0 auto;
	}
	.simple {
		display: block;
		margin: 0 auto;
	}
	#overBtnG, #overBtnD {
		font-size: 14em;
		line-height: 1.3em;
	}
	#btnPetiteCarte {
		display: none;
	}
	#btnGdeCarte {
		display: block;
		float: left;
		padding: 0;
		margin: 0 0 0 10px;
	}
}