*{
margin:0 auto; padding:0; border:0;
}


@font-face {
  font-family: "NunitoSans-Regular";
  src: url("fonts/NunitoSans-Regular.eot"); /* IE9 Compat Modes */
  src: url("fonts/NunitoSans-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/NunitoSans-Regular.otf") format("opentype"), /* Open Type Font */
    url("fonts/NunitoSans-Regular.svg") format("svg"), /* Legacy iOS */
    url("fonts/NunitoSans-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/NunitoSans-Regular.woff") format("woff"), /* Modern Browsers */
    url("fonts/NunitoSans-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-family: "NunitoSans-Light";
  src: url("fonts/NunitoSans-Light.eot"); /* IE9 Compat Modes */
  src: url("fonts/NunitoSans-Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/NunitoSans-Light.otf") format("opentype"), /* Open Type Font */
    url("fonts/NunitoSans-Light.svg") format("svg"), /* Legacy iOS */
    url("fonts/NunitoSans-Light.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/NunitoSans-Light.woff") format("woff"), /* Modern Browsers */
    url("fonts/NunitoSans-Light.woff2") format("woff2"); /* Modern Browsers */
}

body{
font-family: "NunitoSans-Regular";
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size:14px;
line-height:16px;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
overflow-y: auto;
//height:1000px;
width: 100%;
color: #fff;
margin: 0 auto;
text-align: center;
  min-height:100%;
}


html {
  background: #1a1a1a;
  width:100%;
  min-height:100%;
  }

 .arriere {
background-image:url(images/fond_4.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;  
opacity:1;
height:100%;
width:100%;
position:absolute;
left:0%;
top:0;
}

#wrapper {
width: 100%;
//height: 100%;
position: relative;
text-align: center;
top: 40px; 
margin	0 auto;
left:20%;
}
  
.dia{
height:80%;
}

#fond{
position:absolute; 
width:80%;
text-align:center; 
margin:0; 
top:20px;
}

.imga{
max-height:100%;
max-width:100%;
}


h1 {
  font: 600 28px/36px sans-serif;
  margin: 50px 0;
  }

h3 {
  font: 600 18px/24px sans-serif;
  color: #999;
  margin: 0 0 20px;
  }

p.nom{
font-size: 1.1rem;
color:#fff;
}

p.inti{
font-size: 0.8rem;
padding-bottom: 5px; 
margin-bottom: 10px; 
line-height: 24px; 
border-bottom: 1px solid #fff;
color:#fff;
}

a {
  color: #222;
  text-decoration:none;
  }


.rslides_container{
text-align: center;
width:100%;
//margin-top:10%;
}

.rslides {
//position: sticky;
position:relative;
top:30px;
list-style: none;
overflow: hidden;
width: 100%;
  padding: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
 margin-top:5%;
 }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
 //float: left;
 // width: 100%;
  border: 0;
  }

 
/* .large-btns_nav {
  z-index: 3;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  opacity: 0.6;
  text-indent: -9999px;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  background: #000 url("themes.gif") no-repeat left 50%;
  width: 38px;
  }

.large-btns_nav:active {
  opacity: 1.0;
  }

.large-btns_nav.next {
  left: auto;
  background-position: right 50%;
  right: 0;
  }
  */

  
   .transparent-btns_nav {
  z-index: 500;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 0;
  left: 0;
  display: block;
  background: #fff; /* Fix for IE6-9 */
 opacity: 0;
  filter: alpha(opacity=1);
  width: 48%;
  text-indent: -9999px;
  overflow: hidden;
  height: 91%;
  }

.transparent-btns_nav.next {
  left: auto;
  right: 0;
  }

#bloc_1, #bloc_2, #bloc_3{
position:absolute;
width:33%; 
border: bisque 0px solid; 
overflow:hidden;
float:left;
z-index:2000;
opacity:1;
background-color:transparent;
margin:0;
min-height:200%;
}

#bloc_1{
left:0; 
}

#bloc_2{
height:100%; 
left:33%; 
border: red 0px solid; 
top:0;
}

#bloc_3{
left:66%; 
border: blue 0px solid; 
}

.bouge{
width:20%; 
display:block;
position:absolute;
margin-top: -50px; 
z-index:2000;
}
.bouge-a{
margin-left:-50px;

}
.bouge-b{
margin-left:-110%;
}
.bouge-c{
margin-left:-210%;
}

.mail{
color:#ffffff;
}

.mail:hover{
opacity:0.7;
}

.leg-1, .leg-3, .leg-2 {
opacity:0;
transition-property:opacity;
transition-duration: 0.5s;
}

.leg-1:hover, .leg-3:hover, .leg-2:hover {
opacity:1;
}

.essai {
  animation-duration: 2s;
  animation-name: slidein;
}
@keyframes slidein {
  from {
    opacity:0; 
  }
 to {
    opacity:1;
  }
}

p.leg-3:before, p.leg-2:before, p.leg-1:before{
content:"+";
font-size:3rem;
color:rgba(255,255,255,0.7);
}

p.leg-3{
margin-top: -150%; 
padding-top:110%; 
position: absolute; 
background-image: linear-gradient(to top, rgba(0,0,0,0.6), 20%, rgba(0,0,0,0)); 
height: 100%; 
width: 100%;
color:#FFF;
font-family: "NunitoSans-Light";
}

p.leg-2{
margin-top: -100%; 
padding-top:61%; 
position: relative; 
background-image: linear-gradient(to top, rgba(0,0,0,0.6), 20%, rgba(0,0,0,0)); 
min-height: 100%; 
width: 100%;
color:#FFF;
font-family: "NunitoSans-Light";
}
 
 p.leg-1{
margin-top: -67%; 
padding-top:30%; 
position: relative; 
background-image: linear-gradient(to top, rgba(0,0,0,0.6), 20%, rgba(0,0,0,0)); 
min-height: 100%; 
width: 100%;
color:#FFF;
font-family: "NunitoSans-Light";
}

#menu-a {
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
  width: 100%;
}
#menu-a ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
}
#menu-a li li {
   overflow: hidden;
   border-radius:0;
 //  background: #000;
   box-shadow: none;
   border:none;
   margin:0;
   font-size:0.8rem;	
}
#menu-a a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 2px 0;
}
#menu-a ul li a, #menu-a li:hover li a {
//  font-size:1.5vw;
}
#menu-a li:hover {
  // background: #729EBF;
   opacity:1;
}
#menu-a li li:hover {
  // background: #999;
}

#menu-a li {
   margin-bottom:10px;
   border-bottom:solid 1px #fff;
  opacity:0.5;
}

.menu-a{
	padding-bottom:6px;
}

.menu-a li {
	max-height:0px;
	opacity:0;
	transition: max-height 1s, opacity .5s;
}

.menu-a:hover li {
	max-height:200px;
	opacity:1;
}

//.menu-b{
//opacity:1; 
//padding-bottom:6px;
//}

.menu-b li {
	max-height:200px;
	opacity:0.5;
	padding-left:7%;
}
.menu-b:hover li {
	max-height:200px;
	opacity:1;
}

.retour {
font-family: "NunitoSans-Light";
position:fixed; 
padding:58px 10px;
display:block; 
float:left; 
min-width:20%; 
text-align:left; 
//padding: 0 2%;
//background: linear-gradient(to right, #464646, black); 
background-color:#1a1a1a;
height:100%;
}

.retour-b {
font-family: "NunitoSans-Light";
position: fixed;
padding:58px 10px;
display: block;
float: left;
min-width: 20%;
text-align: left;
background: linear-gradient(#1a1a1a, #0000);
max-height: 32%;
}

#texte{
margin-top: 20%;
padding: 0 6%;
line-height: 2rem;
font-size: 1rem;
font-family: "NunitoSans-Light";
position: relative;
width: 42%;
}


.croix{
//display: inline-block;
display: none;
cursor: pointer;
position: fixed;
top: 2%;
right: 9.6%;
text-align: right;
transition: 0.4s;
width: 14%;
//height: 7%;
//padding-top: 3.5%;
z-index:5000;
}



@media only screen and (max-device-width: 450px)
{
//#nav, #wrapper{display:none}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
// background: #1488CC; 
// background: linear-gradient(to right, rgba(#2B32B2, .75), rgba(#1488CC, .75));
}


#wrapper{
left:0;
position:absolute;
}

.bouge{
width:60%;
}

#bloc_1, #bloc_2, #bloc_3{
top:0;
z-index:5000;
position:absolute;
//left:0;
}

#lolcat{
width:80px;
position:fixed;
top:19% !important;
left:11% !important;
}

#lolcat_2{
width:22%;
position:fixed;
top:92%;
left:148%;
}

#lolcat_3{
width:80px;
position:fixed;
top:19% !important;
left:290% !important;
}

.rslides li{
width:90%;
left:5%;
margin-top:44%;
}

#fond{
width:100%;
top:2rem;
}

#menu-a {
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
  width: 100%;
}
#menu-a ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
}
#menu-a li li {
   overflow: hidden;
   border-radius:0;
 //  background: #000;
   box-shadow: none;
   border:none;
   margin:0;
   font-size:0.8rem;	
}
#menu-a a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 2px 0;
}
#menu-a ul li a, #menu-a li:hover li a {
//  font-size:1.5vw;
}
#menu-a li:hover {
  // background: #729EBF;
   opacity:1;
}
#menu-a li li:hover {
  // background: #999;
}

#menu-a li {
   margin-bottom:10px;
   border-bottom:solid 1px #fff;
  opacity:0.5;
}

.menu-a{
	padding-bottom:6px;
}

.menu-a li {
	max-height:0px;
	opacity:0;
	transition: max-height 1s, opacity .5s;
}

.menu-a:hover li {
	max-height:200px;
	opacity:1;
}

//.menu-b{
//opacity:1; 
//padding-bottom:6px;
//}

.menu-b li {
	max-height:200px;
	opacity:0.5;
	padding-left:7%;
}
.menu-b:hover li {
	max-height:200px;
	opacity:1;
}

.retour, .retour-b{
font-family: "NunitoSans-Light";
//position: fixed;
padding-top: 3%;
display: block;
float: left;
width: 100%;
text-align: left;
margin-left: 0;
max-height: 10%;
top: 0; 
left:0%;
background:#1A1A1A; 
cursor: pointer;
transition: 0.4s;
}

.retour-b{
min-height:25px;
}

p.inti{
margin-left:2%;
border-bottom:0;
transition: 0.4s;
}
.rechange p.inti{
border-bottom:1px solid #FFF;
margin-left:0;
}

p.nom{
margin-left:2%;
transition: 0.4s;
display: block;
}

.rechange p.nom{
margin-left:0;
}

.rechange .retour, .rechange .retour-b{
left:10%;
//background:#1488CC;
max-height: 50%;
width:80%;
/*background:#1488CC;
background: linear-gradient(#1488CC, transparent);
background-color: rgba(0, 0, 0, 0);
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: linear-gradient( rgb(20, 136, 204), transparent);
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
border:1px solid #fff;*/
}

.menu-a, .menu-b{
visibility:hidden;
opacity:0;
margin-top:-70%;
transition: 0.6s;
}

.rechange .menu-a, .rechange .menu-b{
visibility:visible;
margin-top:0;
opacity:1;
}

#menu-a {
z-index:5000;
}


.container {
display: inline-block;
cursor: pointer;
position: fixed;
top: 0;
right:0;
text-align:right;
// background #1A1A1A; 
// transition: background-color 2s;
  transition: 0.4s;
  width:20%;
  height:8%;
  padding-top:3%;
  margin-right:2%;
}

.rechange .container {
text-align:right;
padding-top:7%;
margin-right:10%;
}

.bar1, .bar2, .bar3 {
  width: 25px;
  height: 2px;
  background-color: #FFF;
  margin: 5px 44px;
  transition: 0.4s;
}

.rechange .bar1 {
  -webkit-transform: rotate(-45deg) scale(0.8) translate(-4px, 4px);
  transform: rotate(-45deg) scale(0.8) translate(-4px, 4px);
}

.rechange .bar2 {opacity: 0;}

.rechange .bar3 {
  -webkit-transform: rotate(45deg) scale(0.8) translate(-8px, -8px);
  transform: rotate(45deg) scale(0.8) translate(-8px, -8px);
}

#texte{
top:40%;
width:80%;
}

.croix{
width:15%;
top:16%;
opacity: 0.7;
right:42%;
text-align:center;
}

}

@media only screen and (max-device-width: 700px) and (orientation : landscape)
{
//#nav, #wrapper{display:none}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
// background: #1488CC; 
// background: linear-gradient(to right, rgba(#2B32B2, .75), rgba(#1488CC, .75));
}


#wrapper{
left:0;
position:absolute;
}

.bouge{
width:60%;
}

#bloc_1, #bloc_2, #bloc_3{
top:35%;
}

#lolcat{
width:14%;
position:fixed;
top:54%;
left:5%;
}

#lolcat_2{
width:10%;
position:fixed;
top:14%;
left:155%;
}

#lolcat_3{
width:14%;
position:fixed;
top:54%;
left:298%;
}


.rslides li{
width:90%;
left:5%;
margin-top:10%;
}

#fond{
width:100%;
top:60px;
}

#menu-a {
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
  width: 100%;
}
#menu-a ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
}
#menu-a li li {
   overflow: hidden;
   border-radius:0;
 //  background: #000;
   box-shadow: none;
   border:none;
   margin:0;
   font-size:0.8rem;	
}
#menu-a a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 2px 0;
}
#menu-a ul li a, #menu-a li:hover li a {
//  font-size:1.5vw;
}
#menu-a li:hover {
  // background: #729EBF;
   opacity:1;
}
#menu-a li li:hover {
  // background: #999;
}

#menu-a li {
   margin-bottom:10px;
   border-bottom:solid 1px #fff;
  opacity:0.5;
}

.menu-a{
	padding-bottom:6px;
}

.menu-a li {
	max-height:0px;
	opacity:0;
	transition: max-height 1s, opacity .5s;
}

.menu-a:hover li {
	max-height:200px;
	opacity:1;
}

//.menu-b{
//opacity:1; 
//padding-bottom:6px;
//}

.menu-b li {
	max-height:200px;
	opacity:0.5;
	padding-left:7%;
}
.menu-b:hover li {
	max-height:200px;
	opacity:1;
}

.retour, .retour-b{
font-family: "NunitoSans-Light";
position: fixed;
padding: 3% 10px;
display: block;
float: left;
width: 100%;
text-align: left;
margin-left: 0;
max-height: 20%;
top: 0; 
left:0%;
background:#1A1A1A; 
cursor: pointer;
transition: 0.4s;
}

.retour-b{
min-height:25px;
}

p.inti{
margin-left:2%;
border-bottom:0;
transition: 0.4s;
}
.rechange p.inti{
border-bottom:1px solid #FFF;
margin-left:0;
}

p.nom{
margin-left:2%;
transition: 0.4s;
display: block;
}

.rechange p.nom{
margin-left:0;
}

.rechange .retour, .rechange .retour-b{
left:10%;
//background:#1488CC;
max-height: 80%;
width:80%;
/*background:#1488CC;
background: linear-gradient(#1488CC, transparent);
background-color: rgba(0, 0, 0, 0);
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: linear-gradient( rgb(20, 136, 204), transparent);
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
border:1px solid #fff;*/
}

.menu-a, .menu-b{
visibility:hidden;
opacity:0;
margin-top:-70%;
transition: 0.6s;
}

.rechange .menu-a, .rechange .menu-b{
visibility:visible;
margin-top:0;
opacity:1;
}

#menu-a {
z-index:5000;
}


.container {
display: inline-block;
cursor: pointer;
position: fixed;
top: 0;
right:0;
text-align:right;
// background #1A1A1A; 
// transition: background-color 2s;
  transition: 0.4s;
  width:20%;
  height:20%;
  padding-top:3%;
 // margin-right:2%;
}

.rechange .container {
text-align:right;
padding-top:5%;
margin-right:10%;
}

.bar1, .bar2, .bar3 {
  width: 25px;
  height: 2px;
  background-color: #FFF;
  margin: 5px 44px;
  transition: 0.4s;
}

.rechange .bar1 {
  -webkit-transform: rotate(-45deg) scale(0.8) translate(-4px, 4px);
  transform: rotate(-45deg) scale(0.8) translate(-4px, 4px);
}

.rechange .bar2 {opacity: 0;}

.rechange .bar3 {
  -webkit-transform: rotate(45deg) scale(0.8) translate(-8px, -8px);
  transform: rotate(45deg) scale(0.8) translate(-8px, -8px);
}

#texte{
margin-top:0;
width:80%;
}

.croix{
width:6%;
top:6%;
opacity:0.7;
}

}