*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* border: 2px solid pink; */
}

body{
    font-family: 'Oswald', sans-serif;
    font-family: 'Poppins', sans-serif;
    background: #11131f;
    color: white;
    overflow-x: hidden;
}

#presentation,
#avenir,
#glowee,
#Bioluminescence,
#youtube,
#Actualite,
#Contact{
    width: 100%;
    margin-bottom: 100px;
    position: relative;
    padding: 0 2%;
    /* border: 2px solid red;     */
}

p{
font-family: 'Poppins';
font-weight: normal;
font-size: 18px;
line-height: 140.62%;
margin-bottom: 20px;
}

h2{
    font-family: 'Oswald';
    font-weight: 200;
    font-size: 80px;
    line-height: 142px;
}

h3{
margin-bottom: 70px;
font-family: 'Oswald';
}

span{
    color: #42ABCF;
    }
    
    
    .light{
    color: #FFFFFF;
    font-weight: 300;
    font-size: 50px;
    line-height: 71px;
    }
    
    .bold{
    font-family: 'Oswald';
    font-weight: bold;
    font-size: 30px;
    line-height: 53px;
    color: #FFFFFF;
    }




/* section accueil  */

#accueil{
    position: relative;
    height: 100%;
    width: 100%;
    margin-bottom: 10%;
    
    
}

header{
    position: relative;
    top: 0; 
}


nav, a{
    color: white;
    text-decoration: none;
    font-family: 'Poppins';
    font-weight: lighter;
    font-size: 16px;
    padding: 10px;
    -webkit-animation: neon .08s ease-in-out infinite alternate;
            animation: neon .08s ease-in-out infinite alternate; 
}

nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    z-index: 2;
    position: fixed;
    top: 0;
    right: 0; 
    margin: 0 4%;
    
}




.burger{
    display: none;
    }
    


#accueil h1{
    font-family: 'Oswald';
    font-weight: lighter;
    width: 100%;
    font-size: 450px;
    text-align: center;
    position: relative;
    bottom: 10%;
    right: 0;
    z-index: 1;
    -webkit-animation: neon .08s ease-in-out infinite alternate;
            animation: neon .08s ease-in-out infinite alternate;   
}

  @-webkit-keyframes neon {
    from {
      text-shadow:
      0 0 6px rgba(202,228,225,0.92),
      0 0 30px rgba(202,228,225,0.34),
      0 0 12px rgba(30,132,242,0.52),
      0 0 21px rgba(30,132,242,0.92),
      0 0 34px rgba(30,132,242,0.78),
      0 0 54px rgba(30,132,242,0.92);
    }
    to {
      text-shadow:
      0 0 6px rgba(220, 228, 202, 0.98),
      0 0 30px rgba(202,228,225,0.42),
      0 0 12px rgba(30,132,242,0.58),
      0 0 22px rgba(30,132,242,0.84),
      0 0 38px rgba(30,132,242,0.88),
      0 0 60px rgba(30,132,242,1);
    }
  }

  @keyframes neon {
    from {
      text-shadow:
      0 0 6px rgba(202,228,225,0.92),
      0 0 30px rgba(202,228,225,0.34),
      0 0 12px rgba(30,132,242,0.52),
      0 0 21px rgba(30,132,242,0.92),
      0 0 34px rgba(30,132,242,0.78),
      0 0 54px rgba(30,132,242,0.92);
    }
    to {
      text-shadow:
      0 0 6px rgba(220, 228, 202, 0.98),
      0 0 30px rgba(202,228,225,0.42),
      0 0 12px rgba(30,132,242,0.58),
      0 0 22px rgba(30,132,242,0.84),
      0 0 38px rgba(30,132,242,0.88),
      0 0 60px rgba(30,132,242,1);
    }
  }

  
video{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
       object-fit: cover;
}




/* <!-- Section Présentation--------------- --> */

#presentation{
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}


#presentation h2{
margin-right: 58%;
}


.blocPre1 .mobileH2{
    display: none;
}



/* div1 */

.blocPre1,
.blocPre2,
.Actu{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:end;
        -ms-flex-pack:end;
            justify-content:flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100vh;
    margin-top: 5%;  
    margin: 0 0;
    /* border: 2px solid yellow;  */
}


.blocPre1 article{
    -webkit-transform: translateX(-45%);
        -ms-transform: translateX(-45%);
            transform: translateX(-45%);
    width: 40%;
    
} 

.plage{
    width: 40%;
    height: 100vh;
    -webkit-transform: translateX(-8%);
        -ms-transform: translateX(-8%);
            transform: translateX(-8%);
}



/* div2 */

.blocPre2 h2{
 -ms-flex-item-align: start;
     align-self: flex-start;
 -webkit-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
         transform: translateX(-100%); 
 position: absolute;  
}

.blocPre2 img{
    width: 60%;
    position: absolute;
    bottom: 10%;
    left: 0%;       
}

.blocPre2 article{
    -webkit-transform: translate(-20%, 30%);
        -ms-transform: translate(-20%, 30%);
            transform: translate(-20%, 30%);
    width: 40%;
}


/* div3 */

.GirlsParis{
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack:distribute;
        justify-content:space-around;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;

    
}
.GirlsParis img{
    width: 50%;
}

.GirlsParis article{
    width: 40%;
}

/* .galerie photo */

.galerie{  
    height: 250px;
    margin-top: 8%;
}

.galerie img{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;    
}


/* .bioluminescence */

#Bioluminescence{
    height: 100vh;
}

.bioluminescence{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100vh;
    margin-top: 5%;  
    margin: 0 0;

}

.bioluminescence .raie{
    width: 30%;
}

.bioluminescence article{
    -webkit-transform: translateX(-10%);
        -ms-transform: translateX(-10%);
            transform: translateX(-10%);
    width: 50%;
    margin: 30px;   
}

.mobilepoisson{
    display: none;
}

.videoYoutube{
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}


/*------------------ Actualité-------------- */


.Actu{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:end;
        -ms-flex-pack:end;
            justify-content:flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100vh;
    margin-top: 5%;  
}

.Actu .mobileActu{
    display: none;
}

.Actu .mobilepont{
    display: none;
}

.Actu article{
    position: absolute;
    z-index: 1;
	bottom: 5%;
    left:-12%;
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);
    width: 25%;
}

.arcade{
    width: 100%;
    -webkit-transform: translateY(20%);
        -ms-transform: translateY(20%);
            transform: translateY(20%);
}

.actuWeb{
    -webkit-transform: translate(-130%, 60%);
        -ms-transform: translate(-130%, 60%);
            transform: translate(-130%, 60%);
}

#Contact{
    position: relative;
    height:auto;

}

.icons{
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}

#Actualite h2{
    position: absolute;
    right: 10%;
    top:0;
 
   
}

#Contact p{
    font-size: 10px;
    text-align: center;
    margin: 20px;
}


/* -------------------------------------------Responsive-------------------------------------- */


@media (max-width:650px){
#presentation,
#Bioluminescence,
#Actualite,
#Contact,
#avenir{
    margin-bottom: 2%;
    width: 100%;
    height: auto;    
    
}


.blocPre1,
.blocPre2,
.Actu{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100vh;
    margin-top: 2%;  
    margin: 0 0;
}

#accueil{
    height: 100vh;
    overflow: hidden;
}

#accueil h1{
        width: 50%;
        font-size: 150px;
        -webkit-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
                writing-mode: vertical-rl;
        -webkit-text-orientation: upright;
                text-orientation: upright;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        right: -20%; 
        -webkit-transform: translateY(15%); 
            -ms-transform: translateY(15%); 
                transform: translateY(15%); 
    }

    h3{
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 40px;   
    }
    
    p{
    font-size: 16px;
    line-height: 140.62%;
    }


    nav,
    .actuWeb,
    video,
    .galerie,
    .bioluminescence .raie,
    .Actu .arcade,
    .webH2,
    #Actualite h2,
    #glowee,
    #youtube{
    display: none;
    }

.burger,
.blocPre1 .mobileH2,
.mobilepoisson,
.Actu .mobilepont,
.Actu .mobileActu{
    display: block;
}



.burger div{
    position: fixed;
    width: 25px;
    height: 3px;
    margin: 5px 0px;
    background: white;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    z-index: 3;    
    }
    
    .croix .b1{
        -webkit-transform: rotate(-45deg) translate(-5px, 6px);
            -ms-transform: rotate(-45deg) translate(-5px, 6px);
                transform: rotate(-45deg) translate(-5px, 6px);
        
    }
    
    .croix .b3{
        -webkit-transform: rotate(45deg) translate(-5px, -6px);
            -ms-transform: rotate(45deg) translate(-5px, -6px);
                transform: rotate(45deg) translate(-5px, -6px);
        
    }
    
    .croix .b2{
        opacity:0;
        
    }
    
    nav{
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 40%;
        background-color:rgb(17, 19, 31);
        font-size: 14px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        -webkit-transform: translate(100%);
            -ms-transform: translate(100%);
                transform: translate(100%);
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        opacity: 0;
    }

    .navOpen{
        -webkit-transform: translate(0);
            -ms-transform: translate(0);
                transform: translate(0);
        opacity: 1;
        }
    
    header{
        width: 100%;
        padding: 10px 10px; 

        }

   h2{
    font-size: 30px;
    line-height: 36px;
    color: #FFFFFF;
    text-align: center;
    }

    span{
        color: white;
        
    }


    .plage{
        width: 50%;
        height: auto;
        position: absolute;
        -webkit-transform: translateY(50%);
            -ms-transform: translateY(50%);
                transform: translateY(50%);
        
    }

    .blocPre1 article{
        z-index: 1;
         -webkit-transform: translateY(90%);
             -ms-transform: translateY(90%);
                 transform: translateY(90%);
         width: 100%; 
         position: absolute;
         bottom: 110%;
    } 

   .blocPre1 .mobileH2{
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);
    margin-bottom: 10%; 
      
   }

    .blocPre2 h2{
        top: 0%;
        left: -32%;
    }
    
    .blocPre2 img{
       position: absolute;
       width: 100%;
        bottom: 10%;
        left: 0%;   
        } 
    
    .blocPre2 article{
        position: absolute;
        right: 22%;
        bottom: 45%;
        -webkit-transform: translateX(25%);
            -ms-transform: translateX(25%);
                transform: translateX(25%);
        width: 100%;
    }

    .bioluminescence{
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
    }

    .mobilepoisson{
        height: 100vh;
        width: 100%; 
        -o-object-fit: cover; 
           object-fit: cover;   
    }

    .bioluminescence article{
        width: 96%;
        position: absolute;
        bottom: 20%;
        right: -15%;
    }

    .bioluminescence h2{
       text-align: left;
       margin-bottom: 5%;

    }

    .Actu article{
        -webkit-transform: translate(20%, -20%);
            -ms-transform: translate(20%, -20%);
                transform: translate(20%, -20%);
        width: 90%;
    }

    .Actu .mobilepont{
        width: 100%;
        height: 100vh;
        -o-object-fit: cover;
           object-fit: cover;
    }

        

}