/* defaults */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
/* background-image:url("../images/sea.jpg"); */
background-color: red;
/* mix-blend-mode:difference; */
overflow:hidden;
cursor: url("ellipse.png");	
}


@font-face {
  font-family: 'microgamma';
  src: url(../fonts/microgamma.woff2) format('woff2'),
       url(../fonts/microgamma.woff) format('woff');

       
      
}

*, body, html {
color: blue;
text-transform: uppercase;
cursor: help;
}

::selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

::-moz-selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

ol, ul {
  list-style: none;
}

#container2 {
display: flex;
flex-direction: column;
 align-items: center; 
  justify-content: center;

}

.bluemiddle{

  position: absolute;
  /* content:url("../images/saumon.png"); */
/*     border: 1px solid red; */

  transform: translate(-50%, -50%) rotateZ(0deg);
  top: 50%;
  left: 50%;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color:blue;
  transition: all 2s ease;
 /* mix-blend-mode: hue;*/
  /* box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px white,
    0 0 100px 180px rgb(255, 175, 100)
    ;
  */
  z-index:120;

animation-name: crushboutonmilieu;

animation-duration: 1.8s;

animation-iteration-count: 1;

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}

@keyframes crushboutonmilieu {
0% {

height: 20vw;

width: 20vw;

opacity:100%;
}
90%{
  opacity:100%;
}

100% {
  pointer-events: none ;
  height: 55vw;

  width: 90vw;
  opacity:0%;
}
}

.hauteurovaleblanc{
position:absolute;
bottom:0%;
z-index:110;
}
/* .ovaleblanc0 {
  font-size: 4em;
  top:50%;
  left:50%;
    width:100vw;
    height: 201px;
    background-color: white;
    display: flex;
    transition: all .1s ease;
    border-radius:50% ;
    font-family:'microgamma';
    overflow:hidden;
    align-items: center; 
    justify-content: center;
       min-width: 16px;
       text-transform: uppercase;
       z-index:10;
       stroke:red ;
  stroke-width:3em; 
  } */

.ovaleblanc {
font-size: 2.8vw;
top:50%;
left:50%;
  width:100vw;
  height: 201px;
  background-color: white;
  display: flex;
  transition: all .1s ease;
  border-radius:50% ;
  font-family:'microgamma';
  overflow:hidden;
  align-items: center; 
  justify-content: center;
     min-width: 16px;
     text-transform: uppercase;
     z-index:10;
     
stroke-width:3em; 
}

#ovaleblanc1 {
  font-size: 2.8vw;
  top:50%;
  left:50%;
    width:100vw;
    height: 201px;
    background-color: white;
    display: flex;
    transition: all .1s ease;
    border-radius:50% ;
    font-family:'microgamma';
    overflow:hidden;
    align-items: center; 
    justify-content: center;
       min-width: 16px;
       text-transform: uppercase;
       z-index:10;
       stroke:red ;
  stroke-width:3em; 
  }

#ovaleblanc1:hover{
background-color:blue;
cursor: pointer;
}

#ovaleblanc2 {
  font-size: 2.8vw;
  top:50%;
  left:50%;
    width:100vw;
    height: 201px;
    background-color: white;
    display: flex;
    transition: all .1s ease;
    border-radius:50% ;
    font-family:'microgamma';
    overflow:hidden;
    align-items: center; 
    justify-content: center;
       min-width: 16px;
       text-transform: uppercase;
       z-index:10;
       stroke:red ;
  stroke-width:3em; 
  }

#ovaleblanc2:hover{
background-color:blue;
cursor: pointer;
}

#ovaleblanc3 {
  font-size: 2.8vw;
  top:50%;
  left:50%;
    width:100vw;
    height: 201px;
    background-color: white;
    display: flex;
    transition: all .1s ease;
    border-radius:50% ;
    font-family:'microgamma';
    overflow:hidden;
    align-items: center; 
    justify-content: center;
       min-width: 16px;
       text-transform: uppercase;
       z-index:10;
       stroke:red ;
  stroke-width:3em; 
  }

#ovaleblanc3:hover{
background-color:blue;
cursor: pointer;
}

.ovaleblanc2{
background-color:blue;
cursor: pointer;
}

#ovaleblanctop1 {
position:relative;
top:0%;
left:50%;
width:50vw;
  height:100%;
  /* border-radius:30px; */
  transition: left 1s ease-in;
  pointer-events: none ;
  left:0vw;
}

#ovaleblanctop1:hover{
background-color:white;
}

#ovaleblanctop2 {
position:fixed;
top:0%;
left:15%;
/* transform: translate(-50%, -50%); */
width:50vw;
  height:316px;
  transition: left 1s ease-in;
  pointer-events: none ;
  /* border-radius:30px; */
}

#ovaleblanctop3 {
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:50vw;
  height:316px;
  transition: left 1s ease-in;
  /* border-radius:30px; */
  pointer-events: none ;
}

#ovaleblanctop4 {
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:50vw;
  height:316px;
  transition: left 1s ease-in;
  /* border-radius:30px; */
  pointer-events: none ;
}
#ovaleblanctop5 {
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:50vw;
    height:316px;
    transition: left 1s ease-in;
    /* border-radius:30px; */
    pointer-events: none ;
  }

.ovalegris {
position: absolute;
top:17%;
left:50%;
transform: translate(-50%, -50%);
width:70vw;
height:316px;
background-color: grey;
display: flex;
transition: all 1s ease;
border-radius:50% ;
font-family:'microgamma';
overflow:hidden;
align-items: center; 
justify-content: center;
   min-width: 16px;
   text-transform: uppercase;
   z-index:9;
}

.backgroundYellow {
background-color: yellow !important ; 
transition: all 2s ease;
}

.backgroundRed {
background-color: red !important ;
transition: all 2s ease;
}

.text1{
align-items: center; 
justify-content: center;
text-align: center;
text-transform: uppercase;
font-size: 40px;
padding-left: 120px;
padding-right:120px;
padding-top: 100px;
line-height: 1.1;
padding-bottom: 120px;
transition: all 1s ease;

}

@media screen and (max-width: 1000px) {
  .text1{
    align-items: center; 
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    font-size: 3.5vw;
    padding-left: 40px;
    padding-right:40px;
    padding-top: 40px;
    line-height: 1.1;
    padding-bottom: 40px;
    transition: all 1s ease;
    
    }
  }

.text2{
align-items: center; 
justify-content: center;
text-align: justify;
text-transform: uppercase;
white-space: nowrap;
/* line-height: 1.1; */
padding : 190px;
font-size: 45px;
transition: all .1s ease;


}

.text2:hover{
color:white; 
cursor: pointer;
}

@media screen and (max-width: 1000px) {
  .text2{
    align-items: center; 
    justify-content: center;
    text-align: justify;
    text-transform: uppercase;
    white-space: nowrap;
    /* line-height: 1.1; */
    padding : 190px;
    font-size: 4vw;
    transition: all .1s ease;
    
    
    }
    
    .text2:hover{
    color:white; 
    cursor: pointer;
    }
  }


.text3{
  align-items: center; 
  font-size: 40px;
  justify-content: center;
  text-align: justify;
  
  
  }
  
  .text3:hover{
  color:white; 
  cursor: pointer;
  }


.ovalebleu{
  position:absolute;
top:0%;
vertical-align: center;
}

     


#ovalebleu{
position:absolute;
top:50%;
left:50%;
width:90vw;
height: 900px;
background-color: blue;
display: flex;
transform: translate(-50%, -50%);
transition: all 1s ease;
border-radius:50% ;
font-family:'microgamma';
overflow:hidden;
align-items: center; 
justify-content: center;
   min-width: 16px;
   text-transform: uppercase;
   z-index:5;
}



/* #ovalebleu2{
position: absolute;
top:34%;
left:0%;
width:100vw;
height: 300px;
background-color: blue;
display: flex;
transition: all 1s ease;
border-radius:50% ;
font-family:'microgamma';
overflow:hidden;
align-items: center; 
justify-content: center;
   min-width: 16px;
   text-transform: uppercase;
   z-index:5;
}


#ovalebleu3{
position: absolute;
top:10%;
left:0%;
width:100vw;
height: 300px;
background-color: blue;
display: flex;
transition: all 1s ease;
border-radius:50% ;
font-family:'microgamma';
overflow:hidden;
align-items: center; 
justify-content: center;
   min-width: 16px;
   z-index:5;
}
  
#ovalebleu4{
  position: absolute;
  top:70%;
  left:0%;
  width:100vw;
  height: 300px;
  background-color: blue;
  display: flex;
  transition: all 1s ease;
  border-radius:50% ;
  font-family:'microgamma';
  overflow:hidden;
  align-items: center; 
  justify-content: center;
     min-width: 16px;
     z-index:5;
  } */
   
#ovalebleu3_move{

animation-name: bounce2 ;

   animation-duration: 5s;
   
   animation-iteration-count: infinite;
   
   animation-timing-function: alternate;

   text-decoration:none;
}


@keyframes bounce2 {
  0% {
  
   transform: translateY(-100%);
  }
  
  50% {
  
   transform: translateY(100%);
  }
  
  100% {
  
   transform: translateY(-100%);
  }
  }

.farleft {
left:-200vw !important;
top:10%;

}

.farright {
left:200vw !important;
top:10%;
pointer-events: none ;


}

.farfarleft {
left:-5000vw !important;


}