/*@font-face {
 font-family: 'arsenal-regular-webfont';
 src: url('/fonts/arsenal-regular-webfont.eot');
 src: url('/fonts/arsenal-regular-webfont.eot?#iefix') format('embedded-opentype'),
 url('/fonts/arsenal-regular-webfont.woff') format('woff'),
 url('/fonts/arsenal-regular-webfont.ttf') format('truetype'),
 url('/fonts/arsenal-regular-webfont.svg#FontName') format('svg');
 font-weight: normal;
 font-style: normal;
}*/


/* Reset */

html, body { width:100%; height:100%; /* ou min-height: 100%; height: auto; */ }
p, ul, ol, li, blockquote, input, div, input, textarea, select, option, form, label, fieldset, img { margin:0; padding:0; border:0; }
input, select, textarea, table, td, th {  font: inherit; }
textarea { resize: vertical; }
td, th { vertical-align:top; text-align:left; }
em { font-style:italic; font-weight:normal; font-height:15px; }
sup { vertical-align:baseline; font-size:75%; position:relative; top:-0.5em; }
audio, canvas, img, video { vertical-align: middle; }


body {
	margin:0 auto; padding:0; text-align:center; overflow-x:hidden;
	background:#0c0704 url(/images/background.jpg) no-repeat center top scroll;
	/*Pour qu-une grande image de background sorte bien sur un mobile (sans shrinker) */
	background-size: 2500px 1600px;
	min-width:1024px; height:100%;
	font-size:100%; color:#676761;
	font-family: 'Roboto', sans-serif; 
}

/* Font-family possible 
	font-family: Verdana, Arial, Verdana, Sans-serif;
	font-family: Myriad, "Myriad", "Myriad Pro", sans-serif;
	font-family: Geneva, sans-serif;
	font-family: Georgia, "Lucida Bright", Times, Serif;
	font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
	font-family:"Tahoma", sans-serif;
	font-family:"Trebuchet MS", sans-serif;
	font-family:"Arial Black", Arial, sans-serif;
	font-family: Myriad, "Myriad", "Myriad Pro", Arial, Verdana, Sans-serif;
*/

html, body {
	height: 100%;
	/* ou min-height: 100%; height: auto; */
}

a, a:visited {
	text-decoration:underline; color:#11497e;
}
a:hover, a:visited:hover {
	text-decoration:none; color:#11497e;
}



/**** Container ****/

.wrapper {
	position: relative; text-align:left; zoom: 1; margin:0 auto; padding:50px 0 0 0; width:1000px;
}
.wrapper:after {
    content: ""; display: table; clear: both;
}




/************ Top menu *************/ 

nav#navtop {
	font-family: Verdana, Arial, Verdana, Sans-serif; text-align:right; color:#000000; font-size:.7em; position:absolute; top:10px; right:0px;
}

nav#navtop a, nav#navtop a:visited {
	text-decoration:none; color:#000000;
}
nav#navtop a:hover, nav#navtop a:visited:hover {
	text-decoration:underline; color:#000000;
}
nav#navtop span {
	padding:0 10px;
}



/************ Header *************/ 

.header-container {
	/*background-color:#cccccc;*/
}
header {
	width:1000px; margin:0 auto; position:relative;
}

#logo {
	text-align:center; padding:15px 0;
}


.slideshow-container {
	background: url(/images/background_conteneur.png) repeat-y center top;
}
#slideshow {
	overflow:hidden; position:relative; width:100%; margin:0;
}

.royalSlider {
	width:100% !important; display:none; text-align:center !important; height:425px !important;
}


/*********** Nav *************/

.nav-container {
	/*background-color:#000000;*/
}

.navigation {
	width:1000px; margin:0 auto; position:relative; background: url(/images/background-nav.png) no-repeat center top;
}

nav[role=navigation] ul {
	margin:0; padding:0; list-style-type:none; background: url(/images/ligne-nav.png) no-repeat left bottom;
}

nav[role=navigation] li {
	padding:0; margin:0 15px; display:inline-block; position:relative;
}

nav[role=navigation] a, nav[role=navigation] a:visited {
	text-decoration:none; color:#FFFFFF; display:block; padding:15px 0;
}
nav[role=navigation] a:hover, nav[role=navigation] a:visited:hover, nav[role=navigation] a.on {
	text-decoration:none; color:#f0dd0d;
}

nav[role=navigation] li.avec-sub-nav {
	background: url(/images/sub-nav-triangle.png) no-repeat right center; padding:0 17px 0 0;
}
/*nav[role=navigation] .avec-sub-nav a:hover, nav[role=navigation] .avec-sub-nav a:visited:hover, nav[role=navigation] .avec-sub-nav a.on {
	text-decoration:none; color:#f0dd0d; background-color:#666666; border-right:1px solid #ffffff; border-left:1px solid #ffffff;
}*/



nav[role=navigation] ul ul { 
	margin:0; padding:10px 0; list-style-type:none; font-size:14px; line-height:16px; text-align:left; display:none; position:absolute; left:0; top:45px; z-index:1000;
	border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:10px solid #777778; min-width:200px; background-color:#ffffff;
	-moz-box-shadow: 2px 2px 4px #666;
	-webkit-box-shadow: 2px 2px 4px #666;
	box-shadow: 2px 2px 4px #666;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#666')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#666');
}

nav[role=navigation] li li {
	margin:0; padding:0 0 0 15px; border:none; display:block; background: url(/images/bullet.png) no-repeat 8px 15px;
}

nav[role=navigation] li li a, nav[role=navigation] li li a:visited {
	text-decoration:none; color:#666666; display:inline-block; padding:10px; min-width:180px;
}
nav[role=navigation] li li a:hover, nav[role=navigation] li li a:visited:hover {
	text-decoration:none; color:#000000;
}

#nav-mobile { display:none; position:relative; }



/************ Contenu *************/



/**** Colonne de droite ****/

aside#colonne-droite {
	width:240px; float:left; margin:0 0 2em 60px;
}
.aside-container {
	background-color:#e5e5e5; border-radius:15px; padding:15px; color:#41413f; line-height: 1.5em;
}




/**** Contenu ****/

.main-container { 
	background-color:#ffffff;
}

article {
	padding:0 0 2em 0;
	font-size: 1.1em; text-align:justify; line-height:1.4em; min-height:500px;
	/*background: url(/images/background_contenu_top.png) no-repeat 311px top, url(/images/background_contenu_bottom.jpg) no-repeat 311px bottom;*/
}
@media only screen and (max-width: 750px) {
    article { text-align: left; }
}

article.avec-colonne-droite {
	width:700px; float:left;
}

body.large article {
	padding: 40px 33px 30px 361px; /* width reel = 630px */
}

article strong {
	font-weight: 800;
}

article > h1:first-of-type {
	padding-top:0;
}
hr + h1, h1 + h2, hr + h2 {
	padding-top:0;
}

p {
	padding: 0 0 1.1em 0;
	margin: 0;
}

ul {
	margin:0 0 .6em 17px; padding:0;
}
ol {
	margin:0 0 .6em 17px; padding:0;
}
ul ul, ul ol, ol ol, ol ul {
	margin-bottom:0; margin-top:.5em;
}
li {
	padding:0 0 .2em 0; margin:0;
}
ul li ul, ul li ol,
ol li ul, ol li ol {
	margin-bottom:0;
}

.retour {
	padding:0; font-size:.8em; text-align:right; clear:both;
}


.section {
	padding:0 0 0 25px;
}
.indention {
	padding:0; margin:0 0 0 25px;
}

a.lienAnchor {
	text-decoration:none; font-size:0px; line-height:0px;
}


hr {
	display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; clear:both;
}

.zone-repetable {
	border-top:1px solid #cccccc; clear:both; margin:0 0 1em 0;
}
.repeatable {
	padding:1.5em 0 .4em 0; border-bottom:1px solid #cccccc; clear:both;
}
.repeatable:after {
    clear: both; content: " "; display: table;
}
.repeatable--sans-bordure {
	border-bottom:none;
}



/** Haut de page **/
.scrollToTop {
	cursor:pointer;	position:fixed; width:44px; height:44px; border-radius:2px; /*bottom:1px; right:25px;*/
	bottom:50px; left:50%; margin-left:500px; display:none; z-index:2000;
}
.scrollToTop:hover {
	border:1px solid #ffffff;
}



/**** Footer ****/

.footer-container {
	background:#323332 url(/images/background-footer.png) repeat-x left top; min-height:200px;
}

footer {
	width:1000px; position:relative; margin:0 auto; padding:25px 20px 20px 20px; text-align:right; font-size:.8em; color:#ffffff;
}

footer a, footer a:visited {
	text-decoration:underline; color:#ffffff;
}
footer a:hover, footer a:visited:hover {
	text-decoration:none; color:#ffffff;
}

footer table.trois-colonnes td:nth-of-type(2) { border-right:1px solid #b29b8e; border-left:1px solid #b29b8e; }

footer ul.navigation-list > li {
	padding:0 0 .5em;
}
footer ul.navigation-list a, ul.navigation-list footer a:visited {
	text-decoration:none; color:#ffffff;
}
footer ul.navigation-list a:hover, footer ul.navigation-list a:visited:hover {
	text-decoration:underline; color:#ffffff;
}


/************ Accueil *************/ 

#accueil #webmaster {
	display:inline;	
}
#webmaster {
	display:none;	
}


/************ Elements flottants **************/

#element-flottant-top-droite {
	top:480px; left:780px; width:356px; height:225px; background: url(/images/jumelle.png) no-repeat left top; position:absolute; z-index:2000; 
}

#element-flottant-top-gauche {
	top:100px; left:-40px; width:356px; height:225px; background: url(/images/jumelle.png) no-repeat left top; position:absolute; z-index:2000; 
}

#element-flottant-bas-droite {
	top:-100px; left:780px; width:356px; height:225px; background: url(/images/jumelle.png) no-repeat left top; position:absolute; z-index:2000; 
}

#element-flottant-bas-gauche {
	top:-100px; left:-40px; width:356px; height:225px; background: url(/images/jumelle.png) no-repeat left top; position:absolute; z-index:2000; 
}



/*** Album ***/

#album_contenu td {
	padding:0 14px 14px 0;
}

#album_contenu img {
	-moz-box-shadow: 2px 2px 4px #666;
	-webkit-box-shadow: 2px 2px 4px #666;
	box-shadow: 2px 2px 4px #666;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#666666')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#666666');
}
#album_contenu img:hover {
	outline:2px solid #666;
	-moz-box-shadow: 0px 0px 4px #000000;
	-webkit-box-shadow: 0px 0px 4px #000000;
	box-shadow: 0px 0px 4px #000000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000');
}

.visible-xs-block { display: none !important; }


/*** Responsive ***/


.main img { max-width: 100%; }

/* reView link to switch viewport */
.reView-container { padding:15px 0; }
a.reView { display:none; width:100%; background-color:#000000; padding:10px; margin:15px 0 0 0; font-size:20px; color:#ffffff; }


@media only screen 
and (max-width: 1100px) {
	
	.scrollToTop { margin-left:450px; }
	
}

@media only screen 
and (max-width: 1000px) {
	
	body { min-width:100%; margin:0; }
	
	.main img { 
		height: auto; max-width: 100%; 
		/* width:100%; height:auto;  */
	}
	
	header, #slideshow, .navigation { width:100% }
	
	.main-container { width:100%; overflow-x:hidden; padding:0; margin:0; }
	
	.main { background:none; background-color:#ffffff }
	
	.wrapper { width:100%; padding: 50px 0 0 0; }
	
	#logo img { width:100%; height:auto; }
	
	#navtop, aside#colonne-gauche,
	#element-flottant-top-droite, #element-flottant-top-gauche, #element-flottant-bas-droite, #element-flottant-bas-gauche
	{ display:none; }

	
	/*** Mobile nav ***/
	.navigation { /*postion:absolute; top:70px; background-image:none; left:0;*/ width:100%; padding:0; text-align:left; display:none; }
	
	#nav-mobile {
		display:block; padding:20px 0; text-align:center;
	}
	#nav-mobile img {
		width:auto;
	}
	#nav-mobile .navicon {
		cursor:pointer;
	}
	nav#nav-mobile[role=navigation] a, nav#nav-mobile[role=navigation] a:hover {
		padding:0;
	}
	nav#nav-mobile[role=navigation] a:hover, nav#nav-mobile[role=navigation] a:visited:hover, nav#nav-mobile[role=navigation] a.on {
		background: none;
	}
	
	nav[role=navigation] {
		background-color:#333333;
	}
	nav[role=navigation] ul {
		margin:0; padding:0; border-top:1px solid #FFFFFF; list-style-type:none;
	}
	nav[role=navigation] li {
		padding:0; margin:0; border-bottom:1px solid #FFFFFF; display:block;
	}
	nav[role=navigation] a, nav[role=navigation] a:visited {
		text-decoration:none; color:#FFFFFF; display:block; padding:10px 10px 7px 20px; text-shadow:none;
	}
	nav[role=navigation] a:hover, nav[role=navigation] a:visited:hover, nav[role=navigation] a.on {
		text-decoration:none; color:#FFFFFF; background:none; background-color:#000000;
	}
    nav[role="navigation"] li li a:hover, nav[role="navigation"] li li a:visited:hover {
        background-color:#fff;
    }
	
	nav[role=navigation] ul ul { 
		margin:0; padding:0; list-style-type:none; font-size:.8em; line-height:1em; text-align:left; display:block; position:relative; left:auto; top:auto; z-index:auto;
		border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; border-left:1px solid #ffffff;
	}
	
	
	article { padding: 20px; background:none; background-color:#FFFFFF; }
	
	
	footer { width:100%; margin:0; padding:50px 20px !important; }
	footer table.trois-colonnes td:nth-of-type(2) { border:none; border-top:1px solid #b29b8e; border-bottom:1px solid #b29b8e; padding:30px 0 !important; display:none !important; }
	
}

@media only screen 
and (max-width: 700px) {
    article.avec-colonne-droite { width:auto; float:none; }
}

@media only screen 
and (max-width: 750px) {
	
	table.deux-colonnes td { width:100% !important; clear: both; }
	table.deux-colonnes td:first-child { padding-right:0px !important; }
	table.deux-colonnes td:last-child { padding-left:0px !important; }
	table.trois-colonnes td { width:100% !important; clear: both; }
	table.trois-colonnes td:first-child { padding-right:0px !important; }
	table.trois-colonnes td:nth-of-type(2) { padding-right:0px !important;padding-left:0px !important; }
	table.trois-colonnes td:last-child { padding-left:0px !important; }
    .visible-xs-block { display: block !important; }
	
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	
	
}


#popup {
    max-width: 650px;
}

.is-cms .introduction {
   max-width: 600px; text-align: center; margin: 50px auto 0 auto; font-size: 14px; line-height: 18px; color: #555555;
   img { max-width: 45px; display: inline; vertical-align: bottom; }
}
.is-cms #popup-container {
    padding: 40px; max-width: 680px; min-height: 200px; margin: 100px auto; height: auto;
}
.is-cms #popup-container > div {
    width: 600px; margin: 0 auto 60px auto; outline: 1px dashed #999;
}
.is-cms #popup-container > div:first-child {
    outline: 5px solid green; position: relative;
}
.is-cms #popup-container > div:first-child::before {
    content: "POPUP ACTIF"; position: absolute; top: -40px; left: 0; width: 100%; text-align: center; color: green;
}