.parent_item{
   position: relative;
}
.center_item {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
@charset "UTF-8";
 CSS Document */

@import url('https://fonts.googleapis.com/css?family=Cutive+Mono');
*, *:before, *:after {
  box-sizing: border-box;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:300);
body {
  background: #000000;
	overflow-x: hidden; 
 	
 
}

#lyon{
z-index: 5000!important; 
}
	
#logoAccueil{
  margin:0vw; 
  scale:0.2; 
text-align:center;
z-index: 5000!important; 
}

#logoIndex{
  margin-right:5vw; 
  scale:0.2; 
	text-align:center;
z-index: 5000!important; 
}
.ripple-box3 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box3.goripple {
  display: block;
}
.ripple-box3.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;

}

.ripple-box12 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box12.goripple {
  display: block;
}
.ripple-box12.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}

.ripple-box10 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box10.goripple {
  display: block;
}
.ripple-box10.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}
.ripple-box10 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box10.goripple {
  display: block;
}
.ripple-box10.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}
.ripple-box7 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box7.goripple {
  display: block;
}
.ripple-box7.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}
.ripple-box7 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box7.goripple {
  display: block;
}
.ripple-box7.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}

.ripple-box4 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box4.goripple {
  display: block;
}
.ripple-box4.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}
.ripple-box4 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box4.goripple {
  display: block;
}
.ripple-box4.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}

.ripple-box3 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box3.goripple {
  display: block;
}
.ripple-box3.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}
.ripple-box3 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box3.goripple {
  display: block;
}
.ripple-box3.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}

.ripple-box21 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box21.goripple {
  display: block;
}
.ripple-box21.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}
.ripple-box21 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #1e1e28;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: #1e1e28;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: #1e1e28;
	z-index: 5;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #1e1e28;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 5; 	
}
.ripple-box21.goripple {
  display: block;
}
.ripple-box21.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}

.ripple-box16 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 1000;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: red;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: red;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: red;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: red;
	z-index: 1000;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: red;
	z-index: 1000;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: red;
	z-index: 1000;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: red;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 1000; 	
}
.ripple-box16.goripple {
  display: block;
}
.ripple-box16.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}
.ripple-box16 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 1000;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color:#eccd9a;
	z-index: 1000;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color:#eccd9a;
	z-index: 1000;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #eccd9a;
	z-index: 1000;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: black;
	z-index: 5000!important;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: black;
	z-index: 5000!important;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: black;
	z-index: 5000!important;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #eccd9a;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 1000; 	
}
.ripple-box16.goripple {
  display: block;
}
.ripple-box16.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}


.ripple-box27 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 1000;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color: red;
	z-index: 5;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color: red;
	z-index: 5;  
  }
  100% {
    border-width: 1500px;
    
    border-color: red;
	z-index: 5;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: red;
	z-index: 1000;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: red;
	z-index: 1000;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: red;
	z-index: 1000;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: red;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 1000; 	
}
.ripple-box27.goripple {
  display: block;
}
.ripple-box27.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}
.ripple-box27 {
  display: none;
  overflow: hidden;
  position: fixed;
  font-size: 0;
  z-index: 1000;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 	
}
@-webkit-keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0; 
    border-color:#eccd9a;
	z-index: 1000;  
  }
  
  41% { 
    height: 0;
    width: 0; 
    border-color:#eccd9a;
	z-index: 1000;  
  }
  100% {
    border-width: 1500px;
    
    border-color: #eccd9a;
	z-index: 1000;  
  }
}
@keyframes RIPPLER {
  0%   { border-width: 0; }
  40% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: black;
	z-index: 5000!important;  
  }
  41% { 
    height: 0;
    width: 0;
    border-width: 1500px;
    margin-top: -1500px;
    margin-left:-1500px; 
    border-color: black;
	z-index: 5000!important;  
  }
  100% {
    border-width: 1500px;
    height: 2000px;
    width: 2000px;
    margin-top: -2500px;
    margin-left:-2500px;
    border-color: black;
	z-index: 5000!important;  
  }
}
.ripple {
  display: block;
  height: 0;
  width: 0;
  border-width: 0px;
  border-style: solid;
  border-color: #eccd9a;
  border-radius: 100%;
  position: absolute;
  top: 300px;
  left: 300px;
  -webkit-animation: none;
  animation: none;
  z-index: 1000; 	
}
.ripple-box27.goripple {
  display: block;
}
.ripple-box27.goripple .ripple {
 -webkit-animation-name: RIPPLER;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-fill-mode: forwards;
 animation-name: RIPPLER;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}
/* This bit is just to look pretty. Not relevant to the implementation */

.menuOverflow {
	overflow: hidden;
	}
label .menu {
  position: absolute;
  right: -100px;
  top: -100px;
  z-index: 0;
  width: 200px;
  height: 200px;
  background: #eccd9a;
  border-radius: 50% 50% 50% 50%;
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff;
  cursor: pointer;
  
}
label .hamburger {
  position: absolute;
  top: 135px;
  left: 50px;
  width: 30px;
  height: 2px;
  background: #FFF;
  display: block;
  transform-origin: center;
  transition: 0.5s ease-in-out;
	z-index: 0;
}
label .hamburger:after, label .hamburger:before {
  transition: 0.5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #FFF;
	z-index: 0;
}
label .hamburger:before {
  top: -10px;
}
label .hamburger:after {
  bottom: -10px;
  
}
label input {
  display: none;
 
}
label input:checked + .menu {
  box-shadow: 0 0 0 100vw #000000, 0 0 0 100vh #000000;
  border-radius: 0;
 
}
label input:checked + .menu .hamburger {
  transform: rotate(45deg);
}
label input:checked + .menu .hamburger:after {
  transform: rotate(90deg);	

  bottom: 0;
}
label input:checked + .menu .hamburger:before {
  transform: rotate(90deg);
  

  top: 0;
}
label input:checked + .menu + ul {
  opacity: 1;
  
}
label ul {
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;

}
label a {
  margin-bottom: 1em;
  display: block;
  color: #FFF;
  text-decoration: none;

}

.grid {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	align-items:center;
	margin-top: 0vw;
	margin-left: 0;
	padding:0vw;
	z-index:1000; 
	
	}

.grid1 {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	align-items:center;
	margin-top: 0vw;
	margin-left: 0;
	padding:0vw;
	z-index:-100; 
	
	}


.boxMenu{
	grid-column:4/4;
	grid-row:1/2; 
	display:block; 
	margin:0;
	padding: 0;
	z-index:0;
	
	}

.box1{
	grid-column:1/4;
	grid-row:2/2; 
	z-index:0;
	padding: 0;
	}

#myVideo {
  margin-top:-7vw; 
  z-index:0; 
}

.video-container video{
	max-height: 80%;
	max-width: 80%;
	outline :none;
	z-index:0;
	width: auto;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	}

li{
	list-style-type: none;
	text-align: center;
	text-transform: uppercase;
	transition: 1s;
	font-size: 1.5vw !important;
	color:#eccd9a; 
}
.font_menu{
	color:#eccd9a; 

}

.box2{
	grid-column:2/4;
	grid-row:2/2;
	margin-top:0vw; 
	z-index: 0; 
	text-align: center;
	font-size:10vw; 
	
}

.box2-bis{
	grid-column:2/4;
	grid-row:2/2; 
	z-index: 1; 
	text-align: center;
	
	
}


#titre{
	font-family: 'Poiret One', cursive;
	text-align: center;
	margin-top:-40vw; 
	z-index: 0; 
	font-size: 8vw;
	
}



/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 600px) {

	.footer-distributed .footer-left,
	.footer-distributed .footer-right{
		text-align: center;
	}

	.footer-distributed .footer-right{
		float: none;
		margin: 0 auto 20px;
	}

	.footer-distributed .footer-left p.footer-links{
		line-height: 1.8;
	}
}



/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Global */

body{
  font-family: 'Poiret One', cursive; 
  background-color: rgb(0,0,0); 
	overflow-x: hidden; 
  }
h1{
background-color: #000000;
  font-family: 'Poiret One', cursive; 
 text-align: center; 
 overflow-x: hidden;
z-index: 5000; 
color: #eccd9a;
text-decoration:none; 
  }
p{
  font-family: 'Poiret One', cursive; 
 text-align: center; 
 overflow-x: hidden;
z-index: 5000; 
color: #eccd9a;
text-decoration:none; 
  }
a{
  font-family: 'Poiret One', cursive; 
  text-align: center; 
  overflow-x: hidden;
z-index: 1000; 
  }

.line-1{
    position: relative;
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;   
}
.text{
	text-align: justify;
}

/* Animation */
/*.anim-typewriter{
  animation: typewriter 2s steps(25) normal both,
             blinkTextCursor 500ms steps(50) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 11em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,0.75);}
  to{border-right-color: transparent;}
}

.letterfx-container{}

.letterfx{
    display:inline-block;
    margin:0;
    padding:0;
    transition: all 1s; -ms-transition: all 1s; -webkit-transition: all 1s;
}

/* Spin FX */
/*.letterfx-spin-before{
    transform:rotate(3600deg); -ms-transform:rotate(3600deg); -webkit-transform:rotate(3600deg);
}

.letterfx-spin-after{
    transform:none;
}

/* Fade FX */
.letterfx-fade-before{
  opacity: 0;
}


/* Grow FX */
.letterfx-grow-before{
    transform:scale(0,0); -ms-transform:scale(0,0); -webkit-transform:scale(0,0);
}

.letterfx-grow-after{
    transform:none;
}


/* Smear FX */
.letterfx-smear-before{
    color: transparent;
    text-shadow:-1px -1px 25px transparent;
}

.letterfx-smear-after{
    color:inherit;
    text-shadow:0 0 #333;

}

/* Fall FX */
.letterfx-fall-before
{
    visibility: hidden;
    transform:scale(3,3); -ms-transform:scale(3,3); -webkit-transform:scale(3,3);
}

.letterfx-fall-after{
    transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1);
    text-shadow:0;
}

/* Swirl FX */
.letterfx-swirl-before
{
    visibility: hidden;
    transform:scale(3,3) rotate(3600deg); -ms-transform:scale(3,3) rotate(3600deg); -webkit-transform:scale(3,3) rotate(3600deg);
}

.letterfx-swirl-after{
    transform:none;
    text-shadow:0;
}


/* Wave FX */
.letterfx-wave-container .letterfx
{
    position:relative;
}

.letterfx-wave-before
{
    bottom:0;
}

.letterfx-wave-after{
    bottom:15px;
}



/* FLY FX */
.letterfx-fly-left-container .letterfx,
.letterfx-fly-right-container .letterfx,
.letterfx-fly-top-container .letterfx,
.letterfx-fly-bottom-container .letterfx
{
    position:relative;
}

.letterfx-fly-left-before{ left:-50em; }
.letterfx-fly-left-after{ left:0; }

.letterfx-fly-right-before{ right:-50em; }
.letterfx-fly-right-after{ right:0; }

.letterfx-fly-top-before{ top:-20em; }
.letterfx-fly-top-after{ top:0; }

.letterfx-fly-bottom-before{ bottom:-20em; }
.letterfx-fly-bottom-after{ bottom:0; }

/*atlanta.html*/

html{
	overflow-x: hidden; 
	}

.box3{
	grid-column:2/4;
	grid-row:1/2; 
	margin-top : 8vw;  
	text-align: center;
	z-index: 1000;
	
	
}


#presentation{
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
	z-index: 1000; 
	color: #eccd9a;
	font-size: 1.5vw;
	background:black; 
	}

#presentationNous{
  font-family: 'Poiret One', cursive; 
  text-align: justify;
margin-top:10vw; 
  overflow-x: hidden;
	z-index: 0; 
	color: #eccd9a;
	font-size: 1.5vw;
	}

#iloveyou{
  font-family: 'Poiret One', cursive; 
  text-align: center;
margin-top:10vw; 
  overflow-x: hidden;
	z-index: 0; 
	color: #eccd9a;
	font-size: 10vw;
	
	}



#prezFloraison{
  font-family: 'Poiret One', cursive; 
  text-align: justify;
margin-top:10vw; 
  overflow-x: hidden;
	z-index: 0; 
	color: #eccd9a;
	font-size: 1.5vw;
	}
#presentationSynapse{
  font-family: 'Poiret One', cursive; 
  text-align: justify;
margin-top:5vw; 
  overflow-x: hidden;
	z-index: 0; 
	color: #eccd9a;
	font-size: 1.5vw;
	}
#prezImago{
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
	margin-top:5vw; 
	z-index: 1; 
	color: #eccd9a;
	font-size: 1.5vw;
	}

#prezFloraison{
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
	margin-top:5vw; 
	z-index: 1; 
	color: #eccd9a;
	font-size: 1.5vw;
	}


#prezMagritte{
  font-family: 'Poiret One', cursive; 
  text-align: center; 
  overflow-x: hidden;
	margin-top:5vw; 
	z-index: 1; 
	color: #eccd9a;
	font-size: 1.5vw;
	}


#prezTurpitude{
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
	margin-top:2vw; 
	z-index: 1; 
	color: #eccd9a;
	font-size: 1.5vw;
	}


.box4{ 
	font-size:1.5vw; 
	text-align:justify!important; 
	grid-column:2/4!important;
	grid-row:1/2!important; 
	margin-top:8vw;  
	z-index: 100; 
	overflow-y:visible!important; 
	
} 

.box21{ 
	font-size:1.5vw; 
	text-align:justify!important; 
	grid-column:2/4!important;
	grid-row:1/2!important; 
	margin-top:8vw;  
	z-index: 100;  
	
} 

.box27{ 
	font-size:1.5vw; 
	text-align:justify!important; 
	grid-column:2/4!important;
	grid-row:1/2!important; 
	margin-top:8vw;  
	z-index: 100;  
	
} 

#turpitude{ 
	font-size:1.5vw; 
	text-align:justify; 
	grid-column:2/4!important;
	grid-row:1/2!important;  
	z-index: 100; 
	margin-top:-15vw; 
	margin-bottom:5vw; 
	background:black; 
	
	
}

#atouts2{ 
	font-size:1.5vw; 
	text-align:justify !important; 
	grid-column:2/4;
	grid-row:1/2;  
	margin-right:0vw; 
	z-index: 100;
	background:black; 
	
}

#synesisText{
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
	margin-top:0vw; 
	z-index: 1; 
	color: #eccd9a;
	font-size: 1.5vw;
	}
button0 {
  font-size: 2vw !important;	
  border: none;
  border-color: black;	
  color: #FFF!important;
  background:none; 
  text-decoration: none;
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
  z-index: 1000; 
  transition-property: color; /* Active la transition sur background-color */
  transition-duration: 1s; /* La transition dure 1s */
  -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
	}


#button0 :hover {
	color: #eccd9a;
	border-bottom: 1px solid white; 
    width: 200px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
}

button0:focus { outline:0 !important; }

button {
  font-size: 2vw !important;	
  border: none;
  border-color: black;	
  color: #FFF;
  background:none; 
  text-decoration: none;
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
  z-index: 0; 
  transition-property: color; /* Active la transition sur background-color */
  transition-duration: 1s; /* La transition dure 1s */
  -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
	}


#button :hover {
	color: #eccd9a;
	border-bottom: 1px solid white; 
    width: 200px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
}

button:focus { outline:0 !important; }
button2 {
	
  font-size: 2vw !important;	
  border: none;
  border-color: black;	
  color: #FFF;
  background:none; 
  text-decoration: none;
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
  z-index: 0; 
  transition-property: color; /* Active la transition sur background-color */
  transition-duration: 1s; /* La transition dure 1s */
  -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
	}


#button2 :hover {
	color: #eccd9a;
	border-bottom: 1px solid white; 
    width: 200px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
}

button2:focus { outline:0 !important; }
button3 {
  font-size: 2vw !important;	
  border: none;
  border-color: black;	
  color: #FFF;
  background:none; 
  text-decoration: none;
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
  z-index: 0; 
  transition-property: color; /* Active la transition sur background-color */
  transition-duration: 1s; /* La transition dure 1s */
  -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
	}


#button3 :hover {
	color: #eccd9a;
	border-bottom: 1px solid white; 
    width: 200px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
}

button3:focus { outline:0 !important; }
button4 {
  font-size: 2vw !important;	
  border: none;
  border-color: black;	
  color: #FFF;
  background:none; 
  text-decoration: none;
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
  z-index: 0; 
  transition-property: color; /* Active la transition sur background-color */
  transition-duration: 1s; /* La transition dure 1s */
  -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
	}


#button4 :hover {
	color: #eccd9a;
	border-bottom: 1px solid white; 
    width: 200px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
}

button4:focus { outline:0 !important; }

.box13{
	grid-column:4/4;
	grid-row:1/4; 
	margin-top : -50vw;   
	z-index: 1; 
	text-align: center;
	font-size: 2vw; 
	
	
}

button5 {
	
  font-size: 2vw !important;	
  border: none;
  border-color: black;	
  color: #FFF!important;
  background:none; 
  text-decoration: none;
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
  z-index: 1000; 
  transition-property: color; /* Active la transition sur background-color */
  transition-duration: 1s; /* La transition dure 1s */
  -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
	}


#button5 :hover {
	color: #eccd9a;
	border-bottom: 1px solid white; 
    width: 200px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
}

button5:focus { outline:0 !important; }
button6 {
  font-size: 2vw !important;	
  border: none;
  border-color: black;	
  color: #FFF!important;
  background:none; 
  text-decoration: none;
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
  z-index: 1000; 
  transition-property: color; /* Active la transition sur background-color */
  transition-duration: 1s; /* La transition dure 1s */
  -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
	}


#button6 :hover {
	color: #eccd9a;
	border-bottom: 1px solid white; 
    width: 200px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
}

button6:focus { outline:0 !important; }



button7 {
   
  font-size: 2vw !important;	
  border: none;
  border-color: black;	
  color: #FFF!important;
  background:none; 
  text-decoration: none;
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
  z-index: 1000; 
  transition-property: color; /* Active la transition sur background-color */
  transition-duration: 1s; /* La transition dure 1s */
  -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	display:block; 
	
	}


#button7 :hover {
	color: #eccd9a;
	border-bottom: 1px solid white; 
    width: 200px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
}

button7:focus { outline:0 !important; }


button10 {
   
  font-size: 2vw !important;	
  border: none;
  border-color: black;	
  color: #FFF!important;
  background:none; 
  text-decoration: none;
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
  z-index: 1000; 
  transition-property: color; /* Active la transition sur background-color */
  transition-duration: 1s; /* La transition dure 1s */
  -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	display:block; 
	
	}


#button10 :hover {
	color: #eccd9a;
	border-bottom: 1px solid white; 
    width: 200px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
}

button10:focus { outline:0 !important; }









button8 {
  font-size: 2vw !important;	
  border: none;
  border-color: black;	
  color: #FFF!important;
  background:none; 
  text-decoration: none;
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
  z-index: 1000; 
  transition-property: color; /* Active la transition sur background-color */
  transition-duration: 1s; /* La transition dure 1s */
  -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
	}


#button8 :hover {
	color: #eccd9a;
	border-bottom: 1px solid white; 
    width: 200px;
    margin-right: 9px;
    -webkit-animation: mymove infinite 1s alternate;
    -o-animation: mymove infinite 1s alternate;
    animation: mymove infinite 1s alternate;
    -webkit-transition: 0.9s ease;
            transition: 0.9s ease;
	
}

button8:focus { outline:0 !important; }

#background{  
	position:absolute; 
	width:100%;
	height:100%; 
	z-index: 1000; 
	color:black;
	
	
	
}


.box6{
	grid-column:4/4;
	grid-row:1/4; 
	margin-top : -45vw;   
	z-index: 1000; 
	text-align: center;
	font-size: 2vw; 
	
	
}
#experiences{
	color:white;  
	
	
}
#intro{
	color:white;  
	
	
}

#ongletNous{
	color:white;  
	
	
}
#competences{
	color:white;  
	
	
}

#synesisButton{
	color:white;  
	
	
}
#formation{
	color:white;  
	
	
}
#interets{
	color:white; 
	
	
	
}
.box11{
	grid-column:4/4;
	grid-row:1/4; 
	margin-top : -40vw;   
	z-index: 1; 
	text-align: center;
	font-size: 2vw; 
	
	
}



.box12{
	grid-column:2/4;
	grid-row:1/2; 
	text-align: justify;
	z-index: 0;
	
}

#madeIn{
	grid-column:2/4;
	grid-row:1/2; 
	margin-top : -5vw;  
	text-align: justify;
	z-index: 0;
	font-size:1.5vw; 
	
}
.box10{
	grid-column:2/4;
	grid-row:1/2; 
	margin-top : 8vw;   
	z-index: 1; 
	text-align: justify;
	font-size: 2vw; 
	
	
}

#gouts{
	grid-column:2/4;
	grid-row:1/2;   
	z-index: 1; 
	text-align: justify;
	font-size: 2vw; 
	
	
}

.box8{
	grid-column:4/4;
	grid-row:1/4; 
	margin-top : -35vw;   
	z-index: 1; 
	text-align: center;
	font-size: 2vw; 
	
	
}

.box7{
	grid-column:2/4;
	grid-row:1/2; 
	margin-top : 8vw;   
	z-index: 1; 
	text-align: center;
	font-size: 2vw; 
	
	
}
.atouts2{   
	z-index: 1; 
	text-align: justify;
	font-size: 1.5vw;
	background:black; 
	
	
	
}
#activites{  
	z-index: 1; 
	text-align: justify;
	font-size: 1.5vw; 
	background:black; 
	
	
}
.box9{
	grid-column:4/4;
	grid-row:1/4; 
	margin-top : -30vw;   
	z-index: 1; 
	text-align: center;
	font-size: 2vw; 
	
	
}




#twine{
  color: #eccd9a;
  font-family: 'Poiret One', cursive; 
  text-align: justify;
  z-index: 0; 
  font-size: 1.5vw;
}
#synesis{
  color: #eccd9a;
  font-family: 'Poiret One', cursive; 
  text-align: justify;
  z-index: 0; 
  font-size: 1.5vw;
}
#laBreche{
  color: #eccd9a;
  font-family: 'Poiret One', cursive; 
  text-align: justify;
  z-index: 0; 
  font-size: 1.5vw;
}





	
@-webkit-keyframes mymove {
    from {top: 24px;}
    to {top: 9px;}
} 

/* Standard syntax */ 
@keyframes mymove {
    from {top: 24px;}
    to {top: 9px;}
}

.box14{
	grid-column:1/4;
	grid-row:1/2; 
	display:block; 
	margin:0;
	z-index:0;
	padding: 0; 
	}

.box15{
	grid-column:2/4;
	grid-row:1/2; 
	margin-top : 45vw;  
	text-align: justify;
	z-index: 0;
	font-size:1.5vw; 
	
}

.video-container2 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  outline :none;
  z-index:0; 
  text-align:center; 
}
.video-container2 video {
  /* Make video to at least 100% wide and tall */
  max-height: 80%; 
  max-width: 80%;
  outline :none;

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
 
.video-container3 {
  position: absolute;
  top: 700px;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  outline :none;
  text-align:center; 	
  z-index:0!important; 
}
.video-container3 video {   
  max-height: 80%; 
  max-width: 80%;
  outline :none;
 text-align:center;
	z-index:0!important;

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.video-container3-bis {
  position: absolute;
  top: 0vw;
left:0vw; 
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow-y: hidden;
  outline :none;
  z-index:0; 
  text-align:center; 
}
.video-container3-bis video {
  /* Make video to at least 100% wide and tall */
  max-height: 80%; 
  max-width: 80%;
  outline :none;
  z-index:0; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.video-container4 {
  position: absolute;
  top: 1800px;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  outline :none;
  text-align:center; 	
  z-index:0; 
}
.video-container4 video {
  /* Make video to at least 100% wide and tall */
  max-height: 80%; 
  max-width: 80%;
  outline :none;

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.video-container5 {
  position: absolute;
  top: 2700px;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  outline :none;
  z-index:0; 
  text-align:center; 
}
.video-container5 video {
  /* Make video to at least 100% wide and tall */
  max-height: 80%; 
  max-width: 80%;
  outline :none;

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.video-container6 {
  position: absolute;
  top: 3600px;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  outline :none;
 text-align:center; 	
  z-index:0; 
}
.video-container6 video {
  /* Make video to at least 100% wide and tall */
  max-height: 80%; 
  max-width: 80%;
  outline :none;

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.video-container7 {
  position: absolute;
  top: 4500px;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  outline :none;
 text-align:center; 
  z-index:0; 
}
.video-container7 video {
  /* Make video to at least 100% wide and tall */
  max-height: 80%; 
  max-width: 80%;
  outline :none;

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.video-container8 {
  position: absolute;
  top: 5400px;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  outline :none;
 text-align:center; 
  z-index:0; 
}
.video-container8 video {
  /* Make video to at least 100% wide and tall */
  max-height: 80%; 
  max-width: 80%;
  outline :none;

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.box0{
	grid-column:1/4;
	tex-align:center; 
	grid-row:1/2; 
	margin-top : 2vw; 
	margin-left:2vw; 
	z-index: 1000;
	font-size:1.5vw; 
	
}
.box0-0{
	grid-column:1/4;
	grid-row:1/2; 
	margin-top : 0vw; 
	margin-right:0vw; 
	text-align: center;
	z-index: 1000;
	font-size:1.5vw; 
	
}
.box24{
	grid-column:4/4;
	grid-row:2/4; 
	margin-top : -65vw; 
	
	text-align: center;
	font-size:2vw; 
	z-index: 1;
	
}



.box31{

	grid-column:2/4;
	grid-row:2/4; 
	margin-top : -80vw;
	margin-left:-27vw; 
	text-align: center;
	font-size:2vw; 
	z-index: 10;
	
}

.box32{

	grid-column:2/4;
	grid-row:2/4; 
	margin-top : -75vw;
	margin-left:-27vw; 
	text-align: center;
	font-size:2vw; 
	z-index: 10;
	
}
.box33{

	grid-column:2/4;
	grid-row:2/4; 
	margin-top : -70vw;
	margin-left:-27vw; 
	text-align: center;
	font-size:2vw; 
	z-index: 10;
	
}

.box16{
	grid-column:2/4;
	grid-row:1/2; 
	margin-top : 8vw;  
	text-align: center;
	z-index: 1;
	font-color:#eccd9a; 
	
	
}

.box26{
	grid-column:4/4;
	grid-row:2/4; 
	margin-top : -60vw; 
	text-align: center;
	font-size:2vw; 
	z-index: 1;
	
}

.box17-1{
	grid-column:4/4;
	grid-row:2/4; 
	margin-top : -60vw; 
	text-align: center;
	font-size:2vw; 
	z-index: 1;
	
}

.box42{
	grid-column:4/4;
	grid-row:2/4; 
	margin-top : -55vw; 
	text-align: center;
	font-size:2vw; 
	z-index: 1;
	
}


.box30{
	grid-column:4/4;
	grid-row:2/4; 
	margin-top : -55vw; 
	text-align: center;
	font-size:2vw; 
	z-index: 1;
	
}
.box18{
	grid-column:4/4;
	grid-row:2/4; 
	margin-top : -60vw; 
	text-align: center;
	font-size:2vw; 
	z-index: 1;
	
}

.box14-0{
	grid-column:2/4;
	grid-row:1/2;
	margin-top:-50vw; 
	z-index: 1; 
	text-align: center;
	font-size:10vw; 
	
}

#titreNous{
	font-family: 'Poiret One', cursive;
	text-align: center;
	margin-top:-15vw; 
	z-index: 0; 
	
}
#titreNous{
	font-family: 'Poiret One', cursive;
	text-align: center;
	margin-top:-15vw; 
	z-index: 0; 
	
}

#titreSynapse{
	font-family: 'Poiret One', cursive;
	text-align: center;
	margin-top:-20vw; 
	z-index: 0; 
	
}
#titreImago{
	font-family: 'Poiret One', cursive;
	text-align: center;
	margin-top:-35vw;  
	z-index: 0; 
	
}

#titreSynesis{
	font-family: 'Poiret One', cursive;
	text-align: center;
	margin-top:-35vw;  
	z-index: 0; 
	
}

#titreFloraison{
	font-family: 'Poiret One', cursive;
	text-align: center;
	margin-top:-35vw;  
	z-index: 0; 
	
}


#nous{ 
	text-align: center;
	z-index: 0;
	font-size:1.5vw;
	overflow-y: hidden;
	
	
}

#cellule{ 
	text-align: center;
	z-index: 0; 
	
	
}
#nousButton{ 
	color:white;
	
	
	
}

#iloveyou{ 
	color:white;
	
	
	
}

#imagoButton{ 
	color:white;
	
	
}
#floraisonButton{ 
	color:white;
	font-size:2vw; 
	
	
}


#nousFilm{ 
	text-align: center;
	z-index: 0;
	font-size:1.5vw; 
	overflow-y: hidden;
	margin-top:-7vw; 
	
}

#celluleSonore{ 
	text-align: center;
	z-index: 0;
	font-size:1.5vw; 
	overflow-y: hidden;
	margin-top:35vw;
	
}
.box16-2{
	grid-column:2/4;
	grid-row:1/2; 
	margin-left : 5vw;  
	text-align: center;
	z-index: 0;
	font-size:1.5vw; 
	overflow-y: hidden;
	
}

.box22{
	grid-column:2/4;
	grid-row:1/2;  
	text-align: center;
	z-index: 1;
	font-size:1.5vw; 
	overflow-y: hidden;
	
}
#nousText{
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
   z-index: 1; 
  color: #eccd9a;
	font-size: 1.5vw;
	}

#imagoText{
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
   z-index: 1; 
  color: #eccd9a;
	font-size: 1.5vw;
	}

#atouts{
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
 
  color: #eccd9a;
	font-size: 1.5vw;
	}
#floraisonText{
  font-family: 'Poiret One', cursive; 
  text-align: justify; 
  overflow-x: hidden;
   z-index: 1; 
  color: #eccd9a;
	font-size: 1.5vw;
	}

#imago{ 
	text-align: center;
	z-index: 0;
	
	
}

#floraison{ 
	text-align: center;
	z-index: 0;
	
	
}

#imagoFilm{ 
	text-align: center;
	z-index: 0;
	margin-top:-7vw; 
	
	
}

#protoFilm{ 
	text-align: center;
	z-index: 0;
	margin-top:-7vw;
	 
	
	
}
#floraisonFilm{ 
	text-align: center;
	z-index: 0;
	margin-top:-7vw; 
	
	
}


.box17-0{
	grid-column:2/4;
	grid-row:2/4; 
	z-index: 100; 
	margin-top : -40vw; 
	text-align: center;
	font-size:10vw; 
	
}

.box16-0{
	grid-column:2/4;
	grid-row:4/4;
	z-index: 1; 
	margin-top : -65vw; 
	text-align: center;
	font-size:10vw; 
		
	
}
.box50{
	grid-column:2/4;
	grid-row:4/4;
	z-index: 1; 
	margin-top : -65vw; 
	text-align: center;
	font-size:8vw; 
		
	
}
.box40{
	grid-column:2/4;
	grid-row:4/4;
	z-index: 1; 
	margin-top : -65vw; 
	text-align: center;
	font-size:10vw; 
		
	
}

.box25{
	grid-column:2/4;
	grid-row:4/4;
	z-index: 1; 
	margin-top : -40vw; 
	text-align: center;
	font-size:10vw; 
	
}
.box26{
	grid-column:2/4;
	grid-row:4/4;
	z-index: 1; 
	margin-top : -40vw; 
	text-align: center;
	font-size:10vw; 
	
}
.box23{
	grid-column:2/4;
	grid-row:4/4;
	z-index: 1; 
	margin-top : -40vw; 
	text-align: center;
	font-size:10vw; 
	
}


.synapseTurpitude{
  font-family: 'Poiret One', cursive;
	margin-top:50vw; 
  text-align: center; 
  overflow-x: hidden;
	z-index: 1; 
	color: #eccd9a;
	font-size: 10vw;
	}

#synpaseTurpitude{
  font-family: 'Poiret One', cursive;
  text-align: center;
  overflow-x: hidden;
  z-index: 1; 
  color: #eccd9a;
  font-size: 10vw;
	}

.box17{
	grid-column:1/4;
	grid-row:1/2; 
	margin-top : 0vw;  
	text-align: center;
	z-index: 0;
	font-size:1.5vw; 
	
}






#mains {
	position:absolute;
	text-align:center; 
	margin-left:35vw; 
	margin-top:2vw;
	width:300px;
	height:300px; 
	
	z-index:0;
	}

#pieds {
	position:absolute;
	text-align:center; 
	margin-left:35vw; 
	margin-top:2vw;
	width:300px;
	height:300px; 
	
	z-index:0;
	}
#motifs {
	position:absolute;
	text-align:center; 
	margin-left:38vw; 
	margin-top:2vw;
	width:300px;
	height:400px; 
	
	z-index:0;
	}
#portrait {
	position:absolute;
	text-align:center; 
	margin-left:36vw; 
	margin-top:2vw;
	width:300px;
	height:300px; 
	
	z-index:0;
	}




#dim {
	position:absolute;
	text-align:center; 
	margin-left:38vw; 
	margin-top:2vw;
	width:300px;
	height:300px; 
	
	z-index:0;
	}

#waves {
	position:absolute;
	text-align:center; 
	margin-left:36vw; 
	margin-top:3vw;
	width:300px;
	height:300px; 
	
	z-index:0;
	}

#oeil {
	position:absolute;
	text-align:center; 
	margin-left:37vw; 
	margin-top:4vw;
	width:300px;
	height:300px; 
	opacity:0.3; 
	
	z-index:0;
	}

#mapping {
	position:absolute;
	text-align:center; 
	margin-left:30vw; 
	margin-top:0vw;
	width:450px;
	height:350px; 
	
	z-index:0;
	}

#cercle {
	position:absolute;
	text-align:center; 
	margin-left:30.5vw; 
	margin-top:-3vw;
	width:450px;
	height:450px;
	opacity:0.6; 
	
	z-index:0;
	}
.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  outline :none;
  z-index:0; 
}	

#slider {
   margin: -90px 0 auto;
   width: 1080px;
   max-width: 100%;
   text-align: center;
}
#slider input[type=radio] {
   display: none;
}
#slider label {
   cursor:pointer;
   text-decoration: none;
}










#slider-1 {
   margin: -90px 0 auto;
   width: 1080px;
   max-width: 100%;
   text-align: center;
}
#slider-1 input[type=radio] {
   display: none;
}
#slider-1 label {
   cursor:pointer;
   text-decoration: none;
}

#slides-1 {
   margin-top:10vw; 
   padding: 0px;
   background: black;
   position: relative;
   z-index: 1;
}

#overflow-1 {
   width: 100%;
   overflow: hidden;
}

#slide1-1:checked ~ #slides-1 .inner {
   margin-left: 0;
}
#slide2-1:checked ~ #slides-1 .inner {
   margin-left: -100%;
}
#slide3-1:checked ~ #slides-1 .inner {
   margin-left: -200%;
}
#slide4-1:checked ~ #slides-1 .inner {
   margin-left: -300%;
}

#slides-1 .inner {
   transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   width: 400%;
   line-height: 0;
   height: 500px;
}
#slides-1 .slide {
   width: 25%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   color: #fff;
}


#slides-1 .slide_1 {
   background: black;
}
#slides-1 .slide_2 {
  background: black;
}
#slides-1 .slide_3 {
   background: black;
}
#slides-1 .slide_4 {
    background: black;
}

#controls-1 {
   margin: -180px 0 0 0;
   width: 100%;
   height: 50px;
   z-index: 3;
   position: relative;
}
#controls-1 label {
   transition: opacity 0.2s ease-out;
   display: none;
   width: 50px;
   height: 50px;
   opacity: .4;
}
#controls-1 label:hover {
   opacity: 1;
}
#slide1-1:checked ~ #controls-1 label:nth-child(2),
#slide2-1:checked ~ #controls-1 label:nth-child(3),
#slide3-1:checked ~ #controls-1 label:nth-child(4),
#slide4-1:checked ~ #controls-1 label:nth-child(1) {
   background: url("../images/slide1.png") no-repeat;
   float:right; 
	margin-top: -100px;
   margin-right: 180px;
   display: block;
}
#slide1-1:checked ~ #controls-1 label:nth-last-child(2),
#slide2-1:checked ~ #controls-1 label:nth-last-child(3),
#slide3-1:checked ~ #controls-1 label:nth-last-child(4),


#bullets-1 {
   margin: 150px 0 0;
   text-align: center;
	padding: -80px;
}

#bullets-1 label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:100%;
   background: #444;
	  
   margin: 0 10px;
}



#slide1-1:checked ~ #bullets-1 label:nth-child(1),
#slide2-1:checked ~ #bullets-1 label:nth-child(2),
#slide3-1:checked ~ #bullets-1 label:nth-child(3),
#slide4-1:checked ~ #bullets-1 label:nth-child(4) {
   background: #eccd9a;
}


#bullets-1 {
  
   text-align: center;
	padding: 0px;

}
.bullets2 {
   margin-top: 150px;


}

#bullets-1 label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:100%;
   background: #444;
	  
   margin: 0 10px;
}


@media screen and (max-width: 900px) {
   #slide1-1:checked ~ #controls-1 label:nth-child(2),
   #slide2-1:checked ~ #controls-1 label:nth-child(3),
   #slide3-1:checked ~ #controls-1 label:nth-child(4),
   #slide4-1:checked ~ #controls-1 label:nth-child(1),
   #slide1-1:checked ~ #controls-1 label:nth-last-child(2),
   #slide2-1:checked ~ #controls-1 label:nth-last-child(3),
   #slide3-1:checked ~ #controls-1 label:nth-last-child(4),
   #slide4-1:checked ~ #controls-1 label:nth-last-child(1) {
      margin: 0;
   }
   #slides-1 {
      max-width: calc(100% - 140px);
      margin: 0 auto;
   }
}








#slider3 {
   margin: -90px 0 auto;
   width: 1080px;
   max-width: 100%;
   text-align: center;
}
#slider3 input[type=radio] {
   display: none;
}
#slider3 label {
   cursor:pointer;
   text-decoration: none;
}

#slides-3 {
   margin-top:10vw; 
   padding: 0px;
   background: black;
   position: relative;
   z-index: 1;
}

#overflow-3 {
   width: 100%;
   overflow: hidden;
}

#slide1-3:checked ~ #slides-3 .inner {
   margin-left: 0;
}
#slide2-3:checked ~ #slides-3 .inner {
   margin-left: -100%;
}
#slide3-3:checked ~ #slides-3 .inner {
   margin-left: -200%;
}
#slide4-3:checked ~ #slides-3 .inner {
   margin-left: -300%;
}

#slides-3 .inner {
   transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   width: 400%;
   line-height: 0;
   height: 500px;
}
#slides-3 .slide {
   width: 25%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   color: #fff;
}


#slides-3 .slide_1 {
   background: black;
}
#slides-3 .slide_2 {
  background: black;
}
#slides-3 .slide_3 {
   background: black;
}
#slides-3 .slide_4 {
    background: black;
}

#controls-3 {
   margin: -180px 0 0 0;
   width: 100%;
   height: 50px;
   z-index: 3;
   position: relative;
}
#controls-3 label {
   transition: opacity 0.2s ease-out;
   display: none;
   width: 50px;
   height: 50px;
   opacity: .4;
}
#controls-3 label:hover {
   opacity: 1;
}
#slide1-3:checked ~ #controls-3 label:nth-child(2),
#slide2-3:checked ~ #controls-3 label:nth-child(3),
#slide3-3:checked ~ #controls-3 label:nth-child(4),
#slide4-3:checked ~ #controls-3 label:nth-child(1) {
   background: url("../images/slide1.png") no-repeat;
   float:right; 
	margin-top: -100px;
   margin-right: 180px;
   display: block;
}
#slide1-3:checked ~ #controls-3 label:nth-last-child(2),
#slide2-3:checked ~ #controls-3 label:nth-last-child(3),
#slide3-3:checked ~ #controls-3 label:nth-last-child(4),


#bullets-3 {
   margin: 150px 0 0;
   text-align: center;
	padding: -80px;
}

#bullets-3 label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:100%;
   background: #444;
	  
   margin: 0 10px;
}



#slide1-3:checked ~ #bullets-3 label:nth-child(1),
#slide2-3:checked ~ #bullets-3 label:nth-child(2),
#slide3-3:checked ~ #bullets-3 label:nth-child(3),
#slide4-3:checked ~ #bullets-3 label:nth-child(4) {
   background: #eccd9a;
}


#bullets-3 {
  
   text-align: center;
	padding: 0px;

}
.bullets2 {
   margin-top: 150px;


}

#bullets-3 label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:100%;
   background: #444;
	  
   margin: 0 10px;
}


@media screen and (max-width: 900px) {
   #slide1-3:checked ~ #controls-3 label:nth-child(2),
   #slide2-3:checked ~ #controls-3 label:nth-child(3),
   #slide3-3:checked ~ #controls-3 label:nth-child(4),
   #slide4-3:checked ~ #controls-3 label:nth-child(1),
   #slide1-3:checked ~ #controls-3 label:nth-last-child(2),
   #slide2-3:checked ~ #controls-3 label:nth-last-child(3),
   #slide3-3:checked ~ #controls-3 label:nth-last-child(4),
   #slide4-3:checked ~ #controls-3 label:nth-last-child(1) {
      margin: 0;
   }
   #slides-3 {
      max-width: calc(100% - 140px);
      margin: 0 auto;
   }
}

























#slider1 {
   margin: -90px 0 auto;
   width: 1080px;
   max-width: 100%;
   text-align: center;
}
#slider1 input[type=radio] {
   display: none;
}
#slider label {
   cursor:pointer;
   text-decoration: none;
}
#slides {
   margin-top:10vw; 
   padding: 0px;
   background: black;
   position: relative;
   z-index: 1;
}









#slidesbis {
	margin-top:8vw; 
   padding: 0px;
   background: black;
   position: relative;
   z-index: 1;
}

#overflow {
   width: 100%;
   overflow: hidden;
}
#slide1:checked ~ #slides .inner {
   margin-left: 0;
}
#slide2:checked ~ #slides .inner {
   margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
   margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
   margin-left: -300%;
}




#slide1:checked ~ #slidesbis .inner {
   margin-left: 0;
}
#slide2:checked ~ #slidesbis .inner {
   margin-left: -100%;
}
#slide3:checked ~ #slidesbis .inner {
   margin-left: -200%;
}
#slide4:checked ~ #slidesbis .inner {
   margin-left: -300%;
}


#slides .inner {
   transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   width: 400%;
   line-height: 0;
   height: 500px;
}
#slides .slide {
   width: 25%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   color: #fff;
}


#slides .slide_1 {
   background: black;
}
#slides .slide_2 {
  background: black;
}
#slides .slide_3 {
   background: black;
}
#slides .slide_4 {
    background: black;
}


#slidesbis .inner {
   transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   width: 400%;
   line-height: 0;
   height: 650px;
}
#slidesbis .slide {
   width: 25%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   color: #fff;
}


#slidesbis .slide_1 {
   background: black;
}
#slidesbis .slide_2 {
  background: black;
}
#slidesbis .slide_3 {
   background: black;
}
#slidesbis .slide_4 {
    background: black;
}

#controls {
   margin: -180px 0 0 0;
   width: 100%;
   height: 50px;
   z-index: 3;
   position: relative;
}
#controls label {
   transition: opacity 0.2s ease-out;
   display: none;
   width: 50px;
   height: 50px;
   opacity: .4;
}
#controls label:hover {
   opacity: 1;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(1) {
   background: url("../images/slide.png") no-repeat;
   float:right; 
	margin-top: -100px;
   margin-right: 180px;
   display: block;
}
#slide1:checked ~ #controls label:nth-last-child(2),
#slide2:checked ~ #controls label:nth-last-child(3),
#slide3:checked ~ #controls label:nth-last-child(4),


#bullets {
   margin: 150px 0 0;
   text-align: center;
	padding: -80px;
}

#bullets label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:100%;
   background: #444;
	  
   margin: 0 10px;
}



#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4) {
   background: #eccd9a;
}

#slide1-1:checked ~ #bullets label:nth-child(1),
#slide2-1:checked ~ #bullets label:nth-child(2),
#slide3-1:checked ~ #bullets label:nth-child(3),
#slide4-1:checked ~ #bullets label:nth-child(4) {
   background: #eccd9a;
}
#bullets2 {
  
   text-align: center;
	padding: 0px;

}
.bullets2 {
   margin-top: 150px;


}

#bullets2 label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:100%;
   background: #444;
	  
   margin: 0 10px;
}



#slide1:checked ~ #bullets2 label:nth-child(1),
#slide2:checked ~ #bullets2 label:nth-child(2),
#slide3:checked ~ #bullets2 label:nth-child(3),
#slide4:checked ~ #bullets2 label:nth-child(4) {
   background: #eccd9a;
}
@media screen and (max-width: 900px) {
   #slide1:checked ~ #controls label:nth-child(2),
   #slide2:checked ~ #controls label:nth-child(3),
   #slide3:checked ~ #controls label:nth-child(4),
   #slide4:checked ~ #controls label:nth-child(1),
   #slide1:checked ~ #controls label:nth-last-child(2),
   #slide2:checked ~ #controls label:nth-last-child(3),
   #slide3:checked ~ #controls label:nth-last-child(4),
   #slide4:checked ~ #controls label:nth-last-child(1) {
      margin: 0;
   }
   #slides {
      max-width: calc(100% - 140px);
      margin: 0 auto;
   }
}

@media screen and (max-width: 900px) {
   #slide1-1:checked ~ #controls1 label:nth-child(2),
   #slide2-1:checked ~ #controls1 label:nth-child(3),
   #slide3-1:checked ~ #controls1 label:nth-child(4),
   #slide4-1:checked ~ #controls1 label:nth-child(1),
   #slide1-1:checked ~ #controls1 label:nth-last-child(2),
   #slide2-1:checked ~ #controls1 label:nth-last-child(3),
   #slide3-1:checked ~ #controls1 label:nth-last-child(4),
   #slide4-1:checked ~ #controls1 label:nth-last-child(1) {
      margin: 0;
   }
   #slides-1 {
      max-width: calc(100% - 140px);
      margin: 0 auto;
   }
}


#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4) {
   background: #eccd9a;
}
@media screen and (max-width: 900px) {
   #slide1:checked ~ #controls label:nth-child(2),
   #slide2:checked ~ #controls label:nth-child(3),
   #slide3:checked ~ #controls label:nth-child(4),
   #slide4:checked ~ #controls label:nth-child(1),
   #slide1:checked ~ #controls label:nth-last-child(2),
   #slide2:checked ~ #controls label:nth-last-child(3),
   #slide3:checked ~ #controls label:nth-last-child(4),
   #slide4:checked ~ #controls label:nth-last-child(1) {
      margin: 0;
   }
   #slidesbis {
      max-width: calc(100% - 140px);
      margin: 0 auto;
   }
}

video {
	outline:none; 
	}