@charset "UTF-8";
/* CSS Document */

@font-face {font-family: "Halt";src: url("fonts/Halt.woff") format("woff"),url("fonts/Halt.ttf") format("ttf");}   
@font-face {font-family: "Montserrat";src: url("fonts/Montserrat-Regular.woff") format("woff"),url("fonts/Montserrat-Regular.ttf") format("ttf");}
@font-face {font-family: "MontserratB";src: url("fonts/Montserrat-Bold.woff") format("woff"),url("fonts/Montserrat-Bold.ttf") format("ttf");}   

/*html {height: 100%;display:flex}*/
body {margin:auto;font-family:"Montserrat",sans-serif ; font-size:1.0em;margin: 0;padding: 0;
	background-color: #FFFBF4;
	/*background-image: url(./images/fonds/Logo2.jpg);
	background-blend-mode: multiply;
	background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
background-attachment:fixed*/}

header{background-color:#432F1A}
#logo img{max-width:350px;height: auto;display:block;margin:auto;z-index:99;padding:20px}
 
#navbar {background-color:#FFFBF4 ;box-shadow:0px 0px 5px #432F1A/*0px 3px 5px #422e16*/;overflow:hidden;width:100%;line-height:50px;z-index:100;position:fixed}
#navbar ul {list-style:none;margin:0;padding:0;width:100%;text-align:center}
#navbar li {font-family: "MontserratB"; display:inline; margin:0; font-size:1em; padding:8px 0 8px 0;}
#navbar a {color:#432F1A;text-align: center;text-decoration: none;letter-spacing:1.8px;cursor:pointer;text-transform:uppercase;padding:1% 1% 1% 2%}
#en-cours {font-weight:bold;color:#432F1A;padding:4px;background:url(images/croixmarron.png) no-repeat left 50%;}
li#en-cours  {padding-left:10px}
#navbar li:hover {cursor:pointer;font-weight:bold;text-decoration:none;background:url(images/croixmarron.png) no-repeat left 50%;padding-left:5px}
#navbar a:first-child {border-left:none}
#navbar a.active {background-color: #422e16;color: #FFF;}

.sticky {position: fixed;top: 0; width: 100%;}
#navbar.sticky  {background-color:*#FFFBF4}
.sticky + .content {padding-top: 10px;}

/* Fixed/sticky icon bar (vertically aligned 10% from the top of the screen) */
.icon-bar {position:fixed;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);z-index:1;}

/* Style the icon bar links */
.icon-bar a {display:block;font-size:1.6em;text-align:center;padding:7px 10px 7px 10px; transition: all 0.3s ease;color:white;border-radius:0;border:none;}
   
/* Style the social media icons with color, if you want */
.icon-bar a:hover {background-color:#FFFBF4;}

.facebook {background: #432F1A;color: white;}
.facebook:hover {background:#FFF;color:#000}

.instagram {background: #432F1A ;color: white;}
.instagram:hover {background: #FFF;color:#000}

.google {background: #432F1A;color: white;}
.google:hover {background:#FFF;color:#000}

.linkedin {background: #007bb5;color: white;}

.youtube {background: rgba(0, 0, 0, 0.6);color: white;} 

.youtube:hover {background: #FFF;color:#000}
   

hr {color:#FFF;width:80%}

a.tel  {text-decoration:none;color:unset}

.accueil {display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0px 20px 80px 20px;
  position: relative;
  z-index: 99;
text-align:justify}

.imagesacc {margin-top:50px;
  align-items: center;
  justify-content: center;display:flex}
.imagesacc img {max-width: 418px;margin:10px} 
.text {width:80%}





.cadre {margin:auto; background-color:transparent  ; border:none; width:80%; border-radius:0; margin-top:20px; margin-bottom:10px;padding:0;height:auto; overflow:hidden;}


.textes {width:50%;float:left;margin-top:100px}

.clear {clear:both}

h1 {color:#432F1A; font-family: 'MontserratB'; font-size:3em; text-align:center; text-transform:uppercase;margin:20px 0 20px 0; font-weight:100;padding: 0}
h2 {color:#432F1A; font-family: 'Montserrat'; font-size:1.4em; text-align:left;text-transform:uppercase; text-shadow:1px 1px 1px #FFF; font-weight:100;padding:0 10%}
h3 {color:#432F1A; font-family: 'Montserrat'; font-size:1.3em; text-align:left;margin:10px;text-transform:none;font-weight:100}
h4 {color:#432F1A; font-family: 'Montserrat'; font-size:1.3em; text-align:right;margin:20px 10px 10px 10px; font-weight:100}
h5 {color:#432F1A; font-family: 'Montserrat'; font-size:1.3em; text-align:center;margin:20px 10px 10px 10px;text-transform:none;font-weight:100}
a {color:#432F1A}
a:hover {font-weight:800}

section li {list-style-image:url("images/liste.png");}

p {color:#432F1A; margin:0; text-align:justify;font-family:'Montserrat';padding:0 10%;}

aside {background-color:transparent  ; width:24%; border-radius:0; margin:0 0 0 5px; padding:10px 2px 10px 2px;height:620px; overflow:hidden;}


.toggle-button {border-radius:50%; border: none;width: 40px;height: 40px;margin-top: 10px;background:#FFF;font-size:1em}

footer {width:100%;background-color:#432F1A;padding:5px;box-shadow: 0px 3px 5px #FFFBF4/*#422e16*/;}
footer p, footer a {text-align:left; text-decoration:none; color:#FFFBF4/*#422e16*/; margin:0 0 0 0; padding:0;font-family:"Montserrat";letter-spacing:1px;width:100%;float:none}
footer #contact {font-size:0.9em;text-align:center}
footer #contact a {}
footer #horaires {font-size:0.9em;text-align:center}
footer #l2 {text-align:center;font-size:0.6em}
footer hr {margin:3px;color:rgba(255,255,255,0.40) }
#conf {color:#31CCFC; border:none; background-color: rgba(255,255,255,0.70); border-radius:5px}
#mag {column-count:2;margin:30px}
footer img {max-width:50px;margin-left:46%;padding-bottom:20px}

#col1 {float:left; width:50%;padding:0; }
#col1 h3 {text-align:center}
#col1  p {text-align:center}
#col2 {width:50%;float:right}
#col2 h3 {text-align:center}
#col2  p {text-align:center}
#action {width:80%; margin:auto;}
#action  p {text-align:center}
form {text-align:center;}
legend {width:100%; margin: auto; margin-top:20px;font-size:1.1em;text-align:center;color:#FFF; font-weight:bold; text-transform:uppercase}
fieldset {border:none;text-align:center; margin:15px;display:block;}
fieldset p {margin:15px 0 0 0}
.bouton {font-size:1.1em; text-align:center; cursor:pointer; border-radius:5px; box-shadow: 0 0 5px #ccc;background: rgba(0,0,0,0.2);color: #fff;text-transform: uppercase}
input {background:rgba(255,255,255,0.50); border-radius:2px 0 2px 0; border:1px solid transparent;}
textarea {background:rgba(255,255,255,0.50); border-radius:2px 0 2px 0; border:1px solid transparent;}

iframe {margin:auto;width:100%; height:300px;padding-right:30px}
#map{width:50%; float:right;margin-top:175px}
.contact {width:50%; float:left;margin-top:100px;margin-bottom:100px}
.contact a {color:#FFF}
.contact p {text-align:center}

#plan {text-align:center; list-style:none; margin:0;}
#plan a { text-decoration:none;color:#422e16}
#plan a:hover {color:#320D0D}


.rg-image-wrapper{position:relative;padding:10px 30px 20px 30px;background:transparent;-moz-border-radius: 0 0 10px 10px;-webkit-border-radius: 0 0 10px 10px;border-radius: 0 0 10px 10px;min-height:20px;}
.rg-image{position:relative;float:left;text-align:center;line-height:0px;}
.rg-image img{height:auto;width:720px;}
.rg-image-nav a{position:absolute;top:150px;left:0px;background:transparent url(./images/nav.png) no-repeat -20% 50%;width:40px;height:100%;text-indent:-9000px;cursor:pointer;opacity:0.6;outline:none;-moz-border-radius: 10px 0px 0px 10px;-webkit-border-radius: 10px 0px 0px 10px;border-radius: 10px 0px 0px 10px;}
.rg-image-nav a.rg-image-nav-next{right:0px;left:auto;background-position:115% 50%;-moz-border-radius: 0px 10px 10px 0px;-webkit-border-radius: 0px 10px 10px 0px;border-radius: 0px 10px 10px 0px;}
.rg-image-nav a:hover{opacity:0.8;}
.rg-caption {text-align:center;margin-top:15px;position:relative;float:left;width:40%;}
.rg-caption p{font-size:1.0em;letter-spacing:2px;font-family: Arial, sans-serif;line-height:16px;padding:0 15px;text-transform:uppercase;display:block;}
.rg-view{height:30px;display:none;}
.rg-view a{display:block;float:right;width:16px;height:16px;margin-right:3px;background:#464646 url(./images/views.png) no-repeat top left;border:none;opacity:0.8;}
.rg-view a:hover{opacity:1.0;}
.rg-view a.rg-view-full{display:none;background-position:0px 0px;}
.rg-view a.rg-view-selected{background-color:#6f6f6f;border-color:#6f6f6f;}
.rg-view a.rg-view-thumbs{display:none;background-position:0px -16px;}
.rg-loading{width:46px;height:46px;position:absolute;top:50%;left:50%;background:#000 url(../images/ajax-loader.gif) no-repeat center center;margin:-23px 0px 0px -23px;z-index:97;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;opacity:0.7;}


 /* Add a black background color to the top navigation */
.topnav {overflow: hidden;}
/* Style the links inside the navigation bar */
.topnav a {display: inline;text-align: center;font-family: "Montserrat";}
/* Change the color of links on hover */
.topnav a:hover {}
/* Add an active class to highlight the current page */
.active {}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon { display: none;} 

@media screen and (min-width: 750px) {
	.icon-bar2 {display:none}}

@media screen and (max-width: 1000px) {.column2 {width:50%}
.imagesacc img {max-width: 300px;margin:2px} 

}



 /* When the screen is less than 750 pixels wide, hide all links. Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 750px) {


.head {width:100%}
#logo img {max-width: 250px;
    float: none;
    position: relative;
    top: 5px;
    margin: auto;}
	
	.imagesacc {margin-top:0px;}
header {height:150px}

.topnav a {display: none;}
.topnav a.icon {display: block;}
nav hr {display: none;}
#navbar {width:100%;top:120px;line-height:10px}
#navbar a:hover {background:#FFF;border-bottom:2px solid #422e16}
#navbar li:hover {background:none;padding-left:0}
#navbar.sticky {top:0px}
#en-cours {background:none}
li#en-cours {padding-left:0}
nav li .icon{font-size:2em}

.sticky {position: fixed;top: 0; width: 100%;}
.sticky + .content {padding-top: 10px;}

.topnav.responsive {position: relative;}
.topnav.responsive a.icon {position: absolute;right: 0;top: 0;}
.topnav.responsive a {float: none;display: block;text-align: left;z-index:100;line-height: 30px;background: #FFF;}
.topnav.responsive hr {display:inline}



	.accueil {margin:0 0 20px 0}

	
.column2 {width:100%}
.content {height:auto}
.content3 {height:auto}
	
.btn {width:100%;border-right:none}
	
h1 {font-size:2em}
h4 {font-size:1.1em}
.content p {font-size:0.9em}
p {padding:1%;margin:4%} 
	
#mag
{column-count:1}
#col1 {width:100%}
#col2 {width:100%}
fieldset {margin:1%}

iframe {padding-right:0}
.icon-bar {display:none}
.icon-bar2 {margin:auto;text-align: center;
    margin-top: 30px;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);z-index:1;}
	.icon-bar2 a {display:inline;font-size:1.6em;text-align:center;padding:7px 10px 7px 10px; transition: all 0.3s ease;color:white;border-radius:0;border:none}
	.icon-bar2 a:hover {background-color:#FFFBF4;}

}

@media screen and (max-width: 650px) {


.textes {width:100%;margin-bottom: 15px;}
.container {width:80%; margin:auto;padding:0; float:none}
.prev, .next {display:inline; top:auto; margin-top: -20px;}
.next2 {margin-right:0}
.contact {width:100%;margin-top:130px;margin-bottom:0}
#map {width:100%;margin:auto;float:none;margin-bottom:50px}
footer img {margin-left:40%}
.cadre {margin-top:150px;margin-bottom:75px}
.imagesacc {margin-top:0px;display: inline-grid;max-width:100%}
header {height:150px}



}