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

@font-face {
    font-family: 'dinregular';
    src: url('fonts/din_bold-webfont.woff2') format('woff2'),
         url('fonts/din_bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style:normal;
}

@font-face {
    font-family: 'dinregular';
    src: url('fonts/din_light_regular-webfont.woff2') format('woff2'),
         url('fonts/din_light_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'activeregular';
    src: url('fonts/active-regular-webfont.woff2') format('woff2'),
         url('fonts/active-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body { background-color:#EDEDED; padding:0; margin:0; color:#33364C;  font-family: 'dinregular', sans-serif; }

header { background-color:#FFF; width:100%; height:95px; padding-top:15px; background-image:url("img/cher-loiret-nievre.png"); background-repeat:no-repeat; background-position:center; }

h2 { font-weight:normal !important; }

.dpt { display:block; margin:auto; }

.logo { float:left; width:110px; }

.container { width:100%; max-width:1200px; background-color:transparent; height:auto; display:block; margin:auto; }

.accroche { display:block; margin:auto; margin-top:20px; margin-bottom:20px; }

#bloc-video { width:100%; background-color:#009597; height:auto; margin-bottom:45px; color:#FFF; font-size:30px; }

.small .video-line p { margin-top:29px; }

.small { font-size:25px !important; margin-bottom:75px !important; }

.video-line { display:inline-block; width:50%; vertical-align:top; text-align:center; }

.image-video { float:right; width:100%; transition: 0.35s; }

.image-video:hover { opacity:0.7; }

.video-line p { margin-top:100px; margin-bottom:15px !important; }

#bloc-banque { width:100%; background-color:#FFF; height:120px; text-align:center; margin-bottom:45px; font-size:20px; padding-top:25px; }

#bloc-guide { background-image:url("img/picto_guide_societaire.png"); background-repeat:no-repeat; background-position:left; background-size:contain; width:100%; background-color:#FFF; height:120px; text-align:center; margin-bottom:45px; font-size:20px; padding-top:25px; }

#bloc-guide span{ margin: auto; line-height: 90px; margin-left: 50px; }

.intro { text-align: center; font-size: 21px; margin-bottom:55px; display:block; padding-left:35px; padding-right:35px; }

#bloc-mosaique { width:100%; height:auto; margin-bottom:75px; }

.temoignage { background-color:#FFF; height:300px; width:300px; display:inline-block; vertical-align:top; }

.citation { width:300px; display:inline-block; vertical-align:top; text-align:center; font-family: 'activeregular'; font-size:33px; line-height:38px; padding-top:30px; font-weight:normal; }

.elu { font-family: 'activeregular'; font-size:24px; line-height:25px; margin-top:20px; width:300px; display:inline-block; text-align:center; }

.nom { color:#009597; font-size:20px;  font-family: 'dinregular', sans-serif; }

.photo { height:300px; width:300px; display: inline-block; text-align:center; overflow:hidden; }

.photo img { width:100%; }

.rouge { background-color:#E52333; color:#FFF; padding-left:6px; padding-right:6px; }

.white { color:#FFF; }

.vert { color:#009597; }

.active { font-family: 'activeregular'; }

footer { background-color:#FFF; width:100%; height:auto; padding-top:20px; padding-bottom:20px; text-align: justify; }

.logo-footer { float:right; width:100px; margin-top:10px; }

.btn { position:absolute; font-family: 'activeregular'; font-size:23px; background-color:#FFF; border-radius:25px; padding:5px; padding-left:25px; padding-right:25px; margin-left:-205px; margin-top:220px; color:#33364C; transition: 0.35s; }

.btn:hover { background-color:#009597; color:#FFF; cursor:pointer; }

.moins5 { margin-top:-5px; }

.btn-rouge { background-color:#E52333; font-family: 'activeregular'; border-radius:25px; padding:3px; padding-left:40px; padding-right:40px; cursor:pointer; color:#FFF; transition: 0.35s; }

.btn-rouge:hover { background-color:#FFF; color:#E52333; }

.btn-footer { color:#009597; border:solid 2px #009597; border-radius:20px; padding-top:3px; padding-bottom:4px;  padding-left:20px; padding-right:20px; margin-top:10px; display:inline-block; cursor:pointer; transition: 0.35s; }

.btn-footer:hover { background-color:#009597; color:#FFF; }

.right { float:right; margin-top:10px; }

#page { background-color:#FFF; height:auto; margin-bottom:45px; width:68%; display:inline-block; padding-left:25px; padding-right:25px; padding-top:25px; padding-bottom:70px; }

#colonne-droite { background-color:transparent; height:auto; width:300px; display:inline-block; vertical-align:top; float:right; }

#page h1, #page h2 { text-align:center; }

#page h1 { color:#009597; margin-bottom:0; font-weight:normal; }

#page h2 { font-family: 'activeregular'; margin-top:0; margin-bottom:0; font-size:30px; }

#page h3 { color:#33364c; font-size:23px; }

#page img { width:100%; }

.chapo { font-family: 'activeregular'; margin-bottom:40px; font-size:26px; }

.bloc-elu { width:100%; height:220px; overflow:hidden; }

.bloc-elu img { width:100%; }

.bloc-elu-nom { width:100%; height:80px; background-color:#009597; margin-bottom:25px; }

.bloc-elu-nom .nom { color:#FFF; }

.bloc-elu-nom .elu { margin-top:12px; }

.btn-bleu { background-color:#33364c; font-family: 'activeregular'; border-radius:25px; padding-top:5px; padding-bottom:5px; width:100%; cursor:pointer; display:block; color:#FFF; text-align:center; font-size:22px; }

.btn-bleu:hover { background-color:#FFF; color:#33364c; }

a { text-decoration:none !important; color:#009597; transition: 0.35s; }

a:hover { color:#33364c; }

.page-type h1 { font-family: 'activeregular'; font-size:45px; color:#33364c !important; }

.videoyt { background-color:#33364c; width:100%; height:430px; display:block; margin-bottom:40px; margin-top:40px; }

footer p { width:85%; display:inline-block; }

#page.page-type { margin-bottom:75px; padding-bottom:60px; padding-top:0; }

#videos #page.page-type { padding-bottom:0px; }

.citation-photo { display: block; width: 100%; margin-top: -70px; text-align: center; margin-bottom: 70px; color: #FFF; font-family: 'activeregular'; font-size:35px; }

#colonne-droite .btn { margin-top:160px; }

.role { text-align:center; margin-top:0; margin-bottom:60px; font-size:21px; color:#009597; }

#videos iframe.video { margin-bottom:25px; margin-top:10px; }

@media all and (min-width: 750px) and (max-width: 1200px) {
	
	.container { width:80%; margin:auto; }
	
	.temoignage { width:50%; }
	
	.citation { width:100%; }
	
	.elu { width:100%; }
	
	.photo { float:left; width:50%; }
	
	.carre-right { float:right; }
	
	.moins5 { margin-top:0; }
	
	.btn { margin-left:-26%; }
	
	#page { width: calc(92% - 300px); }
	
	.video-line p { margin-top:12%; }
	
	.small { font-size:23px !important; margin-bottom:75px !important; }
	
	.small .video-line p { margin-top:15px; }
	
	.citation-photo { font-size:30px; }
	
	#colonne-droite .btn { margin-left:-205px; }
	
	#videos iframe.video { width:100% !important; }
	
}

@media all and (min-width: 0px) and (max-width: 1050px) {
	
	#page { width:calc(100% - 50px); }
	
	#colonne-droite { display:none; }
	
	#bloc-banque { width:calc(100% - 80px); height:auto; padding-bottom:30px; padding-left:40px; padding-right:40px; }

	#bloc-guide {background-image: none; width:calc(100% - 80px); height:auto; padding-bottom:30px; padding-left:40px; padding-right:40px; height: 75px; }

  #bloc-guide span { line-height: 30px; margin-left: 0; }
	
	.small { font-size:20px !important; margin-bottom:75px !important; }
	
	.small .video-line p { margin-top:13px; margin-bottom:5px !important; }
	
}

@media all and (min-width: 750px) and (max-width: 900px) {

	footer p { width:80% !important; }
	
	.video-line p { margin-top:9%; }
	
	.small .video-line p { margin-top:6px; margin-bottom:5px !important; }
	
}


@media all and (min-width: 600px) and (max-width: 749px) {
	
	.container { width:100%; margin:auto; }
	
	.temoignage { width:50%; }
	
	.citation { width:100%; }
	
	.elu { width:100%; }
	
	.photo { float:left; width:50%; }
	
	.carre-right { float:right; }
	
	.moins5 { margin-top:0; }
	
	.btn { margin-left:-33%; }
	
	#page { width: calc(100% - 50px); }
	
	footer { background-color:transparent; padding-top:0; }
	
	.logo-footer { display:none; }
	
	footer p { width:calc(100% - 60px); margin-top:0; padding-left:30px; padding-right:30px; }
	
	#bloc-banque { background-color:transparent; height:auto; padding-bottom:30px; }
	
  #bloc-guide { background-color:transparent; height:auto; padding-bottom:30px; }
	
	.video-line p { margin-top:10%; }
	
	.small { font-size:23px !important; margin-bottom:75px !important; }
	
	.small .video-line p { margin-top:3px; }
	
	.citation-photo { font-size:30px; }
	
	.button_container { margin-right:25px; }
	
	#videos iframe.video { width:100% !important; height:400px !important; }
	
}

@media all and (min-width: 0px) and (max-width: 599px) {
	
	.container { width:100%; margin:auto; }
	
	.temoignage { width:100%; }
	
	.citation { width:100%; }
	
	.elu { width:100%; }
	
	.moins5 { margin-top:0; }
	
	.photo { float:left; width:100%; }
	
	.btn { margin-left:-62%; }
	
	#page { width: calc(100% - 50px); }
	
	footer { background-color:transparent; padding-top:0; }
	
	.logo-footer { display:none; }
	
	footer p { width:calc(100% - 60px); margin-top:50px; margin-bottom:30px; padding-left:30px; padding-right:30px; }
	
	#bloc-banque { background-color:transparent; }

  #bloc-guide { background-color:transparent; }
	
	.citation-photo { display:none; }
	
	.button_container { margin-right:25px; }
	
	.resp { display:none; }
	
	.video-line { width:100%; padding-bottom:30px; }
	
	.video-line p, .small .video-line p { margin-top:20px; }
	
	#videos iframe.video { width:100% !important; height:300px !important; }
	
	.overlay nav { font-size:45px !important; }
	
}

@media all and (min-width: 0px) and (max-width: 400px) {
	
	header { background-image:none; }
	
	.overlay nav { font-size:32px !important; }
	
}

/* MENU */

.button_container {
  position: relative;
  margin-top: 25px;
  /*right: 2%;*/
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity 0.25s ease;
	float:right;
}
.button_container:hover {
  opacity: 0.7;
}
.button_container.active .top {
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: #009597;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed;
  background: #009597;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, height 0.35s;
  overflow: hidden;
}
.overlay.open {
  opacity: 0.9;
  visibility: visible;
  height: 100%;
  z-index:10;
}
.overlay.open li {
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
  animation-delay: 0.4s;
}
.overlay.open li:nth-of-type(3) {
  animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(4) {
  animation-delay: 0.5s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-family: 'dinregular';
  font-weight: bold;
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: inline-block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}
.overlay ul li a:hover {
  opacity: 0.7;
  transition: 0.35s;
}
/*.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}*/
.overlay ul li a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  transition: 0.35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}