@font-face {
     font-family: "Naja";
     src: url('fonts/Naja/Naja.eot');
     src: url('fonts/Naja/Naja.eot?#iefix') format('embedded-opentype'), url('fonts/Naja/Naja.woff') format('woff'), url('fonts/Naja/Naja.ttf') format('truetype'), url('fonts/Naja/Naja.svg#Naja') format('svg');
     font-weight: normal;
     font-style: normal;
}
@font-face {
  font-family: 'Graffogie';
  src: url('fonts/Graffogie/Graffogie.eot?#iefix') format('embedded-opentype'),  url('fonts/Graffogie/Graffogie.woff') format('woff'), url('fonts/Graffogie/Graffogie.ttf')  format('truetype'), url('fonts/Graffogie/Graffogie.svg#Graffogie') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ChalkItUp';
  src: url('fonts/ChalkItUp/ChalkItUp.eot?#iefix') format('embedded-opentype'),  url('fonts/ChalkItUp/ChalkItUp.woff') format('woff'), url('fonts/ChalkItUp/ChalkItUp.ttf')  format('truetype'), url('fonts/ChalkItUp/ChalkItUp.svg#ChalkItUp') format('svg');
  font-weight: normal;
  font-style: normal;
}


/* MAIL */
 .scroll-wrapper-mail iframe {
 	position: absolute;
 	bottom: 7%;
 	left:0;
    height: 260px;
     width: 92%;
     border: 0;
     margin-left: 4%;
}
 .mail-open {
     overflow: hidden;
}
 .mail {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10059;
     display: none;
     overflow: hidden;
     -webkit-overflow-scrolling: touch;
     outline: 0;
     text-align: center;
     background: #fff url(../design/mail/mur-1.jpg);
     background-size: cover;
}
 .mail.fade {
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .mail.in {
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .mail-box {
     position: relative;
     top: 15%;
     left:10%;
     width: 70%;
     height: 80%;
     min-height: 420px;
     max-width: 600px;
     max-height: 550px;
     margin: 0 auto;
     background: url(../design/mail/boite-1.png) no-repeat;
     background-size: 100% 100%;
     -webkit-border-radius: 40px 60px 40px 40px;
     -moz-border-radius: 40px 60px 40px 40px;
     -ms-border-radius: 40px 60px 40px 40px;
     -o-border-radius: 40px 60px 40px 40px;
     border-radius: 40px 60px 40px 40px;
     outline: 0;
     -webkit-box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
     -moz-box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
     box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
}

 .mail p {
     position: absolute;
     top: 5px;
     left: 40px;
     font-family: "Graffogie";
     font-size: 52px;
     color: #fff;
     font-weight: 400;
     letter-spacing: 2px;
}
 .mail-box .fermer {
     position: absolute;
     top: 5px;
     right: 30px;
     font-family: "Naja";
     font-size: 20px;
     color: #C50109;
     font-weight: 400;
     background: none;
     cursor: url('../design/icones-site/select.cur'), pointer;
     width: 100px;
     height: 100px;
}
 .mail-box .fermer:after {
     content: "\0041";
}
 .mail-box .fermer:hover {
     color: #232DA0;
}
 @media (max-width: 850px) {
     .mail p {
         font-size: 40px;
         letter-spacing: 2px;
         font-weight: 400;
    }
         .mail-box {
     padding-top: 18%;
    }
}
 @media (max-width: 767px) {
     .mail p {
         display: none;
    }
     .mail-box {
     top: 5%;
     left:0;
     width: 90%;
     height: 90%;
     max-height: 500px;
     margin: 0 auto;
    }
}
 @media (max-width: 590px) {
    
     .mail {
         background: #fff url(../design/mail/mur-2.jpg);
         background-size: cover;
    }
         .mail-box {
     top: 5%;
     width: 90%;
     height: 90%;
     max-height: 500px;
     margin: 0 auto;
    }
 }
    
     @media (max-width: 480px) {
    
         .mail-box {
     background: url(../design/mail/boite-2.png) no-repeat;
     background-size: 100% 100%;
     max-height: 500px;
     margin: 0 auto;
    }
        /* super important pour scrool sur mobile : */
     body.mail-open {
         overflow: hidden;
         position: fixed;
    }
}

 @media (max-width: 360px) {
     .mail-box {
         position: relative;
         top: 20px;
         width: 96%;
         max-height: 500px;
         margin: 0 2%;
         
    }
     .mail-box .fermer {
         position: absolute;
         right: 12px;
         top: -2px;
         font-size: 25px;
         padding-left: 25px;
         color: #C50109;
         font-weight: 400;
         background: none;
         cursor: url('../design/icones-site/select.cur'), pointer;
         width: 100px;
         height: 100px;
    }
     .mail-box .fermer:hover {
         color: #C50109;
    }
}
/* proust */
 .scroll-wrapper-proust {
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll;
     height: 100%;
     width: 100%;
}
 .scroll-wrapper-proust iframe {
     height: 96%;
     width: 100%;
}
 .proust-open {
     position: fixed;
     width: 100%;
     overflow: hidden;
}
 .proust {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10050;
     display: none;
     outline: 0;
     text-align: center;
     background: #fff url(../design/fonds/chine.jpg) repeat;
}
 .proust.fade {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999;
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .proust.in {
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .proust-box {
     display: inline-block;
     position: relative;
     margin: 5% auto auto 25%;
     width: 60%;
     height: 80%;
     min-height:300px;
     padding: 30px 0 10px 20px;
     background: #fff;
     font-weight: 300;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -ms-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     outline: 0;
     -webkit-box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
     -moz-box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
     box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
}
 .proust .fermer {
     display: block;
     position: absolute;
     top: 0px;
     right: 5px;
     width: 100px;
     height: 100px;
     text-align: right;
     font-family: "Naja";
     font-size: 20px;
     font-weight: 400;
     color: #C50109;
     cursor: url('../design/icones-site/select.cur'), pointer;
}
 .proust .fermer:after {
     content: "\0041";
}
 .proust .fermer:hover {
     color: #999;
}
 @media (max-width: 767px) {
     .proust-box {
         width: 90%;
         height: 90%;
         margin: 5%;
    }
}
 @media (max-width: 480px) {
     .proust-box {
         margin: 0px;
         width: 100%;
         height: 100%;
         padding: 50px 10px 20px 10px;
         border-radius: 0px;
         box-shadow: none;
    }
     .proust.fade {
         -webkit-transition: -webkit-transform 0.5s ease-in;
         -moz-transition: -moz-transform 0.5s ease-in;
         -o-transition: -o-transform 0.5s ease-in;
         transition: transform 0.5s ease-in;
         -webkit-transform: translate(50%, 0);
         -ms-transform: translate(50%, 0);
         -moz-transform: translate(50%, 0);
         -o-transform: translate(50%, 0);
         transform: translate(50%, 0);
    }
     .proust.in{
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
         transform: translate(0, 0);
    }
     .proust .fermer {
         top: 10px;
         right: 10px;
         font-family: "Naja";
         font-size: 25px;
         font-weight: 300;
         color: #C50109;
         cursor: url('../design/icones-site/select.cur'), pointer;
    }
    /* super important pour scrool sur mobile : */
     body.proust-open {
         overflow: hidden;
         position: fixed;
    }
}
/* PIVOT */
 .scroll-wrapper-pivot {
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll;
     height: 100%;
     width: 100%;
}
 .scroll-wrapper-pivot iframe {
     height: 96%;
     width: 100%;
}
 .pivot-open {
     position: fixed;
     width: 100%;
     overflow: hidden;
}
 .pivot {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10050;
     display: none;
     outline: 0;
     text-align: center;
     background: #fff url(../design/fonds/chine.jpg) repeat;
}
 .pivot.fade {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999;
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .pivot.in {
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .pivot-box {
     display: inline-block;
     position: relative;
     margin: 5% auto auto 25%;
     width: 60%;
     height: 80%;
     min-height:300px;
     padding: 30px 0 10px 20px;
     background: #fff;
     font-weight: 300;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -ms-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     outline: 0;
     -webkit-box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
     -moz-box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
     box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
}
 .pivot .fermer {
     display: block;
     position: absolute;
     top: 0px;
     right: 5px;
     width: 100px;
     height: 100px;
     text-align: right;
     font-family: "Naja";
     font-size: 20px;
     font-weight: 400;
     color: #C50109;
     cursor: url('../design/icones-site/select.cur'), pointer;
}
 .pivot .fermer:after {
     content: "\0041";
}
 .pivot .fermer:hover {
     color: #999;
}
 @media (max-width: 767px) {
     .pivot-box {
         width: 90%;
         height: 90%;
         margin: 5%;
    }
}
 @media (max-width: 480px) {
     .pivot-box {
         margin: 0px;
         width: 100%;
         height: 100%;
         padding: 50px 10px 20px 10px;
         border-radius: 0px;
         box-shadow: none;
    }
     .pivot.fade {
         -webkit-transition: -webkit-transform 0.5s ease-in;
         -moz-transition: -moz-transform 0.5s ease-in;
         -o-transition: -o-transform 0.5s ease-in;
         transition: transform 0.5s ease-in;
         -webkit-transform: translate(50%, 0);
         -ms-transform: translate(50%, 0);
         -moz-transform: translate(50%, 0);
         -o-transform: translate(50%, 0);
         transform: translate(50%, 0);
    }
     .pivot.in{
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
         transform: translate(0, 0);
    }
     .pivot .fermer {
         top: 10px;
         right: 10px;
         font-family: "Naja";
         font-size: 25px;
         font-weight: 300;
         color: #C50109;
         cursor: url('../design/icones-site/select.cur'), pointer;
    }
    /* super important pour scrool sur mobile : */
     body.pivot-open {
         overflow: hidden;
         position: fixed;
    }
}
/* PHILO */
 .scroll-wrapper-philo {
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll;
     height: 100%;
     width: 100%;
}
 .scroll-wrapper-philo iframe {
     height: 96%;
     width: 100%;
}
 .philo-open {
     position: fixed;
     width: 100%;
     overflow: hidden;
}
 .philo {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10050;
     display: none;
     outline: 0;
     text-align: center;
     background: #fff url(../design/fonds/rideau-theatre.jpg);
     background-size: 100% 100%;
}
 .philo.fade {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999;
     -webkit-transition: -webkit-transform 0.5s ease-in;
     -o-transition: -o-transform 0.5s ease-in;
     -moz-transition: -moz-transform 0.5s ease-in;
     transition: transform 0.5s ease-in;
     -webkit-transform: translate(0, -50%);
     -ms-transform: translate(0, -50%);
     -moz-transform: translate(0, -50%);
     -o-transform: translate(0, -50%);
     transform: translate(0, -50%);
}
 .philo.in {
     -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
     -o-transform: translate(0, 0);
     transform: translate(0, 0);
}
 .philo-box {
     display: inline-block;
     position: relative;
     margin: 5% auto auto auto;
     width: 60%;
     height: 80%;
     padding: 30px 0 10px 20px;
     background: #fff;
     font-weight: 300;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -ms-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     outline: 0;
     -webkit-box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
     -moz-box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
     box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
}
 .philo .fermer {
     display: block;
     position: absolute;
     top: 0px;
     right: 5px;
     width: 100px;
     height: 100px;
     text-align: right;
     font-family: "Naja";
     font-size: 20px;
     font-weight: 400;
     color: #C50109;
     cursor: url('../design/icones-site/select.cur'), pointer;
}
 .philo .fermer:after {
     content: "\0041";
}
 .philo .fermer:hover {
     color: #999;
}
 @media (max-width: 680px) {
     .philo-box {
         width: 90%;
         height: 90%;
    }
}
 @media (max-width: 480px) {
     .philo-box {
         margin: 0px;
         width: 100%;
         height: 100%;
         padding: 50px 10px 20px 10px;
         border-radius: 0px;
         box-shadow: none;
    }
     .philo.fade {
         -webkit-transition: -webkit-transform 0.5s ease-in;
         -moz-transition: -moz-transform 0.5s ease-in;
         -o-transition: -o-transform 0.5s ease-in;
         transition: transform 0.5s ease-in;
         -webkit-transform: translate(50%, 0);
         -ms-transform: translate(50%, 0);
         -moz-transform: translate(50%, 0);
         -o-transform: translate(50%, 0);
         transform: translate(50%, 0);
    }
     .philo.in{
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
         transform: translate(0, 0);
    }
     .philo .fermer {
         top: 10px;
         right: 10px;
         font-family: "Naja";
         font-size: 25px;
         font-weight: 300;
         color: #C50109;
         cursor: url('../design/icones-site/select.cur'), pointer;
    }
    /* super important pour scrool sur mobile : */
     body.philo-open {
         overflow: hidden;
         position: fixed;
    }
}
/* PIGEON */
 .scroll-wrapper-pigeon {
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll;
     height: 100%;
     width: 100%;
}
 .pigeon-open {
     position: fixed;
     width: 100%;
     overflow: hidden;
}
 .pigeon {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10050;
     display: none;
     overflow: hidden;
     -webkit-overflow-scrolling: touch;
     outline: 0;
     text-align: center;
     background: #fff url(../design/fonds/ciel.jpg);
     background-size: cover;
}
 .pigeon.fade {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999;
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .pigeon.in {
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .pigeon-box {
     display: inline-block;
     position: relative;
     margin: 2% 15% auto 15%;
     width: auto;
     height: auto;
     padding: 0 20px 20px 20px;
     font-weight: 100;
     outline: 0;
     background: none;
}
 .pigeon-box img{
     display: inline-block;
     width: 40%;
     margin-top: 0px;
     margin-bottom: 0px;
}
.pigeon-box .bulle {
	background: #eee ;
     border-radius: 50px;
     padding: 0 20px 15px 20px;
     opacity: 0.8;
     border: 1px solid #aaa;
}

.pigeon-box .bulle:before {
	content: '';
	position: relative;
	top: -55px;
	right: -140px;
	width: 0;
	height: 0;
	border: 35px solid transparent;
	border-bottom-color: #eee;
	opacity: 1;
	border-top: 0;
	border-left: 0;
	margin-left: 0;
	margin-top: 0;
}


 .pigeon-box p {
     margin: -10px 0px auto 0px;
     line-height: 28px;
     font-size: 25px;
     font-family: "ChalkItUp";
     background: none ;
     border-radius: 15px;
     padding:5px;
}
 .pigeon .fermer {
     display: block;
     position: absolute;
     top: -10px;
     right: -15px;
     width: 100px;
     height: 100px;
     text-align: right;
     font-family: "Naja";
     font-size: 20px;
     font-weight: 400;
     color: #C50109;
     cursor: url('../design/icones-site/select.cur'), pointer;
}
 .pigeon .fermer:after {
     content: "\0041";
}
 .pigeon .fermer:hover {
     color: #999;
}

 @media (max-width: 920px) {
     .pigeon-box { 
         margin: 2% 10% auto 10%;
    }
}
 @media (max-width: 767px) {
         .pigeon-box img{
	width: 50%;
    }
     .pigeon-box p {
         line-height: 28px;
         font-size: 25px;
    }
    .pigeon-box .bulle:before {
	content: '';
	position: relative;
	top: -55px;
	right: -100px;
	width: 0;
	height: 0;
	border: 35px solid transparent;
	border-bottom-color: #eee;
	opacity: 1;
	border-top: 0;
	border-left: 0;
	margin-left: 0;
	margin-top: 0;
}
}

 @media (max-width: 480px) {
     .pigeon-box {
         margin: 0;
         border-radius: 0;
    }
     .pigeon-box img{
	width: 70%;
    }
     .pigeon-box .bulle {
     padding: 5px 20px 10px 20px;
     border-radius: 50px;
     

}
.pigeon-box .bulle:before {
	top: -45px;
	right: -80px;
	width: 0;
	height: 0;
	border: 25px solid transparent;
	border-bottom-color: #eee;
	opacity: 1;
	border-top: 0;
	border-left: 0;
	margin-left: 0;
	margin-top: 0;
	
}
     .pigeon-box p {
         text-align: left;
         line-height: 24px;
         font-size: 22px;
         margin-top: -15px;
         font-weight: 500;
    }
     .pigeon .fermer {
         top: 10px;
         right: 10px;
         font-family: "Naja";
         font-size: 25px;
         font-weight: 300;
         color: #C50109;
         cursor: url('../design/icones-site/select.cur'), pointer;
    }
    
     @media (max-width: 360px) {

     .pigeon-box .bulle {
     padding: 5px 10px 10px 20px;
     border-radius: 50px;
     }
     .pigeon-box .bulle:before {
	top: -45px;
	right: -60px;
	width: 0;
	height: 0;
	border: 25px solid transparent;
	border-bottom-color: #eee;
	opacity: 1;
	border-top: 0;
	border-left: 0;
	margin-left: 0;
	margin-top: 0;
	
}

}
    /* super important pour scrool sur mobile : */
     body.pigeon-open {
         overflow: hidden;
         position: fixed;
    }
}
/* CHARLIE */
 .charlie-box iframe {
     height: 100%;
     width: 100%;
     overflow: hidden;
}
 .charlie-open {
     position: fixed;
     width: 100%;
     overflow: hidden;
}
 .charlie {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10050;
     display: none;
     outline: 0;
     text-align: center;
     background: #fff url(../design/fonds/ou-est-charlie.jpg) no-repeat;
     background-size: cover;
}
 .charlie.fade {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999;
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .charlie.in {
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .charlie.fade p {
     position: fixed;
     top: 2px;
     left: 3px;
     font-size: 11px;
     line-height: 11px;
     background: #fff;
     padding: 3px 5px 3px 5px;
}
 .charlie-box {
     display: inline-block;
     position: relative;
     margin: 7% 40% auto auto;
     width: 345px;
     height: 245px;
     padding: 18px 0 0 22px;
     background: #fff url(../design/fonds/polaroid.jpg) no-repeat;
     background-size: 100% 245px;
     font-weight: 300;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -ms-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     outline: 0;
     -webkit-box-shadow: 30px 30px 9px rgba(0, 0, 0, .5);
     -moz-box-shadow: 30px 30px 9px rgba(0, 0, 0, .5);
     box-shadow: 30px 30px 9px rgba(0, 0, 0, .5);
}
 .charlie .fermer {
     display: block;
     position: absolute;
     top: 0px;
     right: 5px;
     width: 100px;
     height: 100px;
     text-align: right;
     font-family: "Naja";
     font-size: 13px;
     font-weight: 400;
     color: #C50109;
     cursor: url('../design/icones-site/select.cur'), pointer;
}
 .charlie .fermer:after {
     content: "\0041";
}
 .charlie .fermer:hover {
     color: #999;
}
 @media (max-width: 767px) {
     .charlie-box {
         margin: 20% auto auto auto;
    }
}
 @media (max-width: 480px) {
     .charlie-box iframe {
         height: 100%;
         width: 110%;
         overflow: hidden;
    }
     .charlie {
         background: #fff url(../design/fonds/ou-est-charlie-2.jpg) no-repeat;
         background-size: cover;
         background-position: top right ;
    }
     .charlie-box {
         display: inline-block;
         margin: 35% auto auto auto;
         width: 320px;
         height: 250px;
         padding: 20px 0 0 10px;
         background-size: 108% 250px;
         background-position: -12px 0px;
         -webkit-box-shadow: 20px 20px 9px rgba(0, 0, 0, .5);
         -moz-box-shadow: 20px 20px 9px rgba(0, 0, 0, .5);
         box-shadow: 20px 20px 9px rgba(0, 0, 0, .5);
    }
    /* super important pour scrool sur mobile : */
     body.charlie-open {
         overflow: hidden;
         position: fixed;
    }
}
/* SLIDEPUB */
 .scroll-wrapper-slidepub {
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll;
     height: 100%;
     width: 100%;
}
 .scroll-wrapper-slidepub iframe {
     height: 96%;
     width: 100%;
}
 .slidepub-open {
     position: fixed;
     width: 100%;
     overflow: hidden;
}
 .slidepub {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10050;
     display: none;
     outline: 0;
     text-align: center;
     background: #fff url(../design/fonds/bg.gif) repeat;
}
 .slidepub.fade {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999;
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .slidepub.in{
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .slidepub-box {
     display: inline-block;
     position: relative;
     margin-top:5%;
     width: 50%;
     height: 50%;
     padding: 0px;
     background: none;
     font-weight: 300;
}
 .slidepub .fermer {
     display: block;
     position: absolute;
     top: 0px;
     right: 5px;
     width: 100px;
     height: 70px;
     text-align: right;
     font-family: "Naja";
     font-size: 20px;
     font-weight: 400;
     color: #C50109;
     cursor: url('../design/icones-site/select.cur'), pointer;
}
 .slidepub .fermer:after {
     content: "\0041";
}
 .slidepub .fermer:hover {
     color: #999;
}
 @media (max-width: 767px) {
     .slidepub-box {
         margin:20px;
         width: 80%;
         height: 80%;
    }
}
 @media (max-width: 480px) {
     .slidepub-box {
         margin:0;
         width: 100%;
         height: 100%;
         padding: 150px 0 0 0;
         border-radius: 0;
         box-shadow: none;
         background: #000;
    }
     .slidepub.fade {
         -webkit-transition: -webkit-transform 0.5s ease-in;
         -moz-transition: -moz-transform 0.5s ease-in;
         -o-transition: -o-transform 0.5s ease-in;
         transition: transform 0.5s ease-in;
         -webkit-transform: translate(50%, 0);
         -ms-transform: translate(50%, 0);
         -moz-transform: translate(50%, 0);
         -o-transform: translate(50%, 0);
         transform: translate(50%, 0);
    }
     .slidepub.in{
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
         transform: translate(0, 0);
    }
     .slidepub .fermer {
         position: absolute;
         top: 10px;
         right: 10px;
         font-family: "Naja";
         font-size: 22px;
         font-weight: 300;
         color: #C50109;
         cursor: url('../design/icones-site/select.cur'), pointer;
    }
    /* super important pour scrool sur mobile : */
     body.slidepub-open {
         overflow: hidden;
         position: fixed;
    }
}
/* SLIDEOPUS */
 .scroll-wrapper-slideopus {
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll;
     height: 100%;
     width: 100%;
}
 .slideopus-open {
     position: fixed;
     width: 100%;
     overflow: hidden;
}
 .slideopus {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10050;
     display: none;
     outline: 0;
     text-align: center;
     background: #fff url(../design/fonds/bg.gif) repeat;
}
 .slideopus.fade {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999;
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .slideopus.in{
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .slideopus-box {
     display: inline-block;
     position: relative;
     margin: 5% auto auto auto;
     width: 60%;
     height: 80%;
     padding: 30px 20px 10px 20px;
     background: #fff;
     font-weight: 300;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -ms-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     outline: 0;
     -webkit-box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
     -moz-box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
     box-shadow: 20px 10px 9px rgba(0, 0, 0, .5);
}
 .slideopus .fermer {
     display: block;
     position: absolute;
     top: 0px;
     right: 5px;
     width: 100px;
     height: 70px;
     text-align: right;
     font-family: "Naja";
     font-size: 20px;
     font-weight: 400;
     color: #C50109;
     cursor: url('../design/icones-site/select.cur'), pointer;
}
 .slideopus .fermer:after {
     content: "\0041";
}
 .slideopus .fermer:hover {
     color: #999;
}
 @media (max-width: 680px) {
     .slideopus-box {
         width: 90%;
         height: 90%;
    }
}
 @media (max-width: 480px) {
     .slideopus-box {
         margin: 0px;
         width: 100%;
         height: 100%;
         padding: 50px 0 20px 0;
         border-radius: 0;
         box-shadow: none;
         background: #000;
    }
     .slideopus.fade {
         -webkit-transition: -webkit-transform 0.5s ease-in;
         -moz-transition: -moz-transform 0.5s ease-in;
         -o-transition: -o-transform 0.5s ease-in;
         transition: transform 0.5s ease-in;
         -webkit-transform: translate(50%, 0);
         -ms-transform: translate(50%, 0);
         -moz-transform: translate(50%, 0);
         -o-transform: translate(50%, 0);
         transform: translate(50%, 0);
    }
     .slideopus.in{
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
         transform: translate(0, 0);
    }
     .slideopus .fermer {
         position: absolute;
         top: 10px;
         right: 10px;
         font-family: "Naja";
         font-size: 22px;
         font-weight: 300;
         color: #C50109;
         cursor: url('../design/icones-site/select.cur'), pointer;
    }
    /* super important pour scrool sur mobile : */
     body.slideopus-open {
         overflow: hidden;
         position: fixed;
    }
}

/* SLIDEmagie */
 .scroll-wrapper-slidemagie {
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll #005214;
     height: 100%;
     width: 100%;
     background: #005214 url(../design/fonds/magie.jpg) repeat;
}
 .scroll-wrapper-slidemagie iframe {
     height: 96%;
     width: 100%;
     border: 0;
     background: #005214;
}
 .slidemagie-open {
     position: fixed;
     width: 100%;
     overflow: hidden;
}
 .slidemagie {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10050;
     display: none;
     outline: 0;
     text-align: center;
     background: #fff url(../design/fonds/slidemagie.jpg) repeat;
}
 .slidemagie.fade {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999;
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .slidemagie.in {
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .slidemagie-box {
     display: inline-block;
     position: relative;
     margin-top: 2%;
     width: 70%;
     height: 90%;
     padding: 30px 0 10px 20px;
     font-weight: 300;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
     border-radius: 4px;
     outline: 0;
     box-shadow: none;
      background: #005214 url(../design/fonds/slidemagie.jpg) repeat;
}
 .slidemagie .fermer {
     display: block;
     position: absolute;
     top: 0px;
     right: 5px;
     width: 100px;
     height: 100px;
     text-align: right;
     font-family: "Naja";
     font-size: 20px;
     font-weight: 400;
     color: #D9D712;
     cursor: url('../design/icones-site/select.cur'), pointer;
}
 .slidemagie .fermer:after {
     content: "\0041";
}
 .slidemagie .fermer:hover {
     color: #C50109;
}
 @media (max-width: 767px) {
     .slidemagie-box {
         width: 90%;
         height: 90%;
    }
     .scroll-wrapper-slidemagie {
     overflow-y: scroll;

}
}

 @media (max-width: 700px) {
          .slidemagie-box {
        margin: 0px;
         width: 100%;
         height: 100%;
         padding: 35px 10px 10px 10px;
         border-radius: 0px;
         box-shadow: none;
    }
}
 @media (max-width: 480px) {

     .slidemagie.fade {
         -webkit-transition: -webkit-transform 0.5s ease-in;
         -moz-transition: -moz-transform 0.5s ease-in;
         -o-transition: -o-transform 0.5s ease-in;
         transition: transform 0.5s ease-in;
         -webkit-transform: translate(50%, 0);
         -ms-transform: translate(50%, 0);
         -moz-transform: translate(50%, 0);
         -o-transform: translate(50%, 0);
         transform: translate(50%, 0);
    }
     .slidemagie.in{
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
         transform: translate(0, 0);
    }
    
     .slidemagie-box {
         margin: 0px;
         width: 100%;
         height: 100%;
         padding: 50px 5px 0 5px;
         border-radius: 0;
         box-shadow: none;
         background: #005214 url(../design/fonds/magie.jpg) repeat;
         border: none;
    }
     .slidemagie .fermer {
     	     width: 100px;
     height: 50px;
         top: 10px;
         right: 10px;
         font-family: "Naja";
         font-size: 22px;
         font-weight: 300;
         cursor: url('../design/icones-site/select.cur'), pointer;
    }

    /* super important pour scrool sur mobile : */
     body.slidemagie-open {
         overflow: hidden;
         position: fixed;
    }
}

/* RUBABRAC */
 .scroll-wrapper-rubabrac {
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll;
     height: 100%;
     width: 100%;
}
 .scroll-wrapper-rubabrac iframe {
     height: 100%;
     width: 100%;
     border: 0;
}
.rubabrac-open {
     position: fixed;
     width: 100%;
     overflow: hidden;
}
.rubabrac {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10050;
     display: none;
     outline: 0;
     text-align: center;
     background: #fff url(../design/fonds/magie.jpg) repeat;
}
.rubabrac.fade {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999;
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
.rubabrac.in {
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
.rubabrac-box {
     display: inline-block;
     position: relative;
     margin: 10% auto auto auto;
     width: 550px;
     height: 420px;
     padding: 0px;
     background: #000
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
     border-radius: 4px;
     outline: 0;
     -webkit-box-shadow: 10px 10px 9px rgba(0, 0, 0, .5);
     -moz-box-shadow: 10px 10px 9px rgba(0, 0, 0, .5);
     box-shadow: 10px 10px 9px rgba(0, 0, 0, .5);
}
.rubabrac .fermer {
     display: block;
     position: absolute;
     top: 0px;
     right: 5px;
     width: 100px;
     height: 100px;
     text-align: right;
     font-family: "Naja";
     font-size: 20px;
     font-weight: 400;
     color: #D9D712;
     cursor: url('../design/icones-site/select.cur'), pointer;
}
.rubabrac .fermer:after {
     content: "\0041";
}
.rubabrac .fermer:hover {
     color: #C50109;
}
 @media (max-width: 800px) {
    .rubabrac-box {
         width: 90%;
         
    }
}

 @media (max-width: 700px) {
         .rubabrac-box {
         border-radius: 0px;
         box-shadow: none;
         background:#000;
    }
}
 @media (max-width: 480px) {
 	
 	         .rubabrac-box {
 	         	margin: 0;
 	         	height:90%;
     padding: 60px 0px 30px 0px;
    }
         .rubabrac {
         background: #000;
    }
    .rubabrac.fade {
         -webkit-transition: -webkit-transform 0.5s ease-in;
         -moz-transition: -moz-transform 0.5s ease-in;
         -o-transition: -o-transform 0.5s ease-in;
         transition: transform 0.5s ease-in;
         -webkit-transform: translate(50%, 0);
         -ms-transform: translate(50%, 0);
         -moz-transform: translate(50%, 0);
         -o-transform: translate(50%, 0);
         transform: translate(50%, 0);
    }
    .rubabrac.in{
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
         transform: translate(0, 0);
    }
    .rubabrac .fermer {
    	display: block;
         top: 10px;
         right: 0px;
         font-family: "Naja";
         font-size: 20px;
         font-weight: 300;
         cursor: url('../design/icones-site/select.cur'), pointer;
    }
    /* super important pour scrool sur mobile : */
     body.rubabrac-open {
         overflow: hidden;
         position: fixed;
    }
}



/* SLIDETEXTE */
 .scroll-wrapper-slidetexte {
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll;
     height: 100%;
     width: 100%;
}
 .scroll-wrapper-slidetexte iframe {
     height: 96%;
     width: 100%;
     border: 0;
}
 .slidetexte-open {
     position: fixed;
     width: 100%;
     overflow: hidden;
}
 .slidetexte {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10050;
     display: none;
     outline: 0;
     text-align: center;
     background: #fff url(../design/fonds/slidetexte.jpg) repeat;
}
 .slidetexte.fade {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 9999;
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .slidetexte.in {
     -webkit-transition: opacity 0.5s ease-in;
     -moz-transition: opacity 0.5s ease-in;
     -ms-transition: opacity 0.5s ease-in;
     -o-transition: opacity 0.5s ease-in;
     transition: opacity 0.5s ease-in;
}
 .slidetexte-box {
     display: inline-block;
     position: relative;
     margin-top: 2%;
     width: 70%;
     height: 90%;
     padding: 30px 0 10px 20px;
     background: #fff url(../design/fonds/textes.jpg) repeat;
     font-weight: 300;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
     border-radius: 4px;
     outline: 0;
     -webkit-box-shadow: 10px 10px 9px rgba(0, 0, 0, .5);
     -moz-box-shadow: 10px 10px 9px rgba(0, 0, 0, .5);
     box-shadow: 10px 10px 9px rgba(0, 0, 0, .5);
}
 .slidetexte .fermer {
     display: block;
     position: absolute;
     top: 0px;
     right: 5px;
     width: 100px;
     height: 100px;
     text-align: right;
     font-family: "Naja";
     font-size: 20px;
     font-weight: 400;
     color: #000;
     cursor: url('../design/icones-site/select.cur'), pointer;
}
 .slidetexte .fermer:after {
     content: "\0041";
}
 .slidetexte .fermer:hover {
     color: #999;
}
 @media (max-width: 800px) {
     .slidetexte-box {
         width: 90%;
         height: 90%;
    }
}

 @media (max-width: 700px) {
          .slidetexte-box {
        margin: 0px;
         width: 100%;
         height: 100%;
         padding: 35px 10px 10px 10px;
         border-radius: 0px;
         box-shadow: none;
    }
}
 @media (max-width: 480px) {
          .slidetexte-box {
     	background:#fff;

    }
     .slidetexte.fade {
         -webkit-transition: -webkit-transform 0.5s ease-in;
         -moz-transition: -moz-transform 0.5s ease-in;
         -o-transition: -o-transform 0.5s ease-in;
         transition: transform 0.5s ease-in;
         -webkit-transform: translate(50%, 0);
         -ms-transform: translate(50%, 0);
         -moz-transform: translate(50%, 0);
         -o-transform: translate(50%, 0);
         transform: translate(50%, 0);
    }
     .slidetexte.in{
         -webkit-transform: translate(0, 0);
         -ms-transform: translate(0, 0);
         -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
         transform: translate(0, 0);
    }
     .slidetexte .fermer {
         top: 10px;
         right: 10px;
         font-family: "Naja";
         font-size: 15px;
         font-weight: 300;
         color: #000;
         cursor: url('../design/icones-site/select.cur'), pointer;
    }
     .slidetexte .fermer:hover {
     color: #999;}
    /* super important pour scrool sur mobile : */
     body.slidetexte-open {
         overflow: hidden;
         position: fixed;
    }
}