/************************************************************************************/
/********************************** HANDISKINS **************************************/
/************************************************************************************/

html {
    scroll-behavior: smooth;
}


/***** BODY *****/
body{
    background: black;
    margin: 0;
}

/* Styles */


h2{
    font: 800 38px "Montserrat", sans-serif;
    text-align: center;
    text-transform: uppercase;
    color: white;
    margin: 0;   
}


a:-webkit-any-link {
    text-decoration: none;
}

p{
    font: 300 30px "Montserrat", sans-serif;
    text-align: center;
    color: white; 
    margin: 1em 0; 
}


section .content{
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 30px;
}

@media screen and (max-width: 1366px){
    p {
        font: 300 26px "Montserrat", sans-serif;
    }   
}

@media screen and (max-width: 1024px){
    section .content{
        max-width: 100%;
        padding: 0 30px;
    }   

    h2{
        font: 800 32px "Montserrat", sans-serif;
    }
    p {
        font: 300 22px "Montserrat", sans-serif;
    }   
}

@media screen and (min-width: 1981px){
    h2{
        font: 800 78px "Montserrat", sans-serif;
    }
    p {
        font: 300 36px "Montserrat", sans-serif;
    }   
}




/***** HEADER *****/

.header{
    text-align: center;
    padding-top: 6vh;   
    padding-bottom: 6vh;
    background: url('../img/header.jpg') no-repeat;
    background-size: cover;      
}

.header h1{
    font: 800 64px "Montserrat", sans-serif;
    color: white;
    text-transform: uppercase;
    margin: 0;
    padding: 0 15px;
}
.header h1{
    font: 800 64px "Montserrat", sans-serif;
    color: white;
    text-transform: uppercase;
    margin: 0;
}
.main-logo{
    max-width: 70%;
}

@media screen and (max-width: 1024px){
    .header h1 {
        font: 800 42px "Montserrat", sans-serif;
    } 
}
@media screen and (max-width: 768px){
    .header h1 {
        font: 800 36px "Montserrat", sans-serif;
    } 
}


/************************/
/********* MAIN *********/
/************************/



/***** INTRO + EDITEURS *****/

#intro{
    background: #060622;
    padding: 100px 0 60px;
}

#intro .content{
    max-width: 1400px;
    margin: 0 auto;
}

.separator{
    background: white;
    width: 280px;
    height: 4px;
    margin: 30px auto;
}

@media screen and (max-width: 1480px){
    #intro{
        background-size: contain;  
    }  
}






/*** POWERS ***/

#powers{
    background-color: black;
    background-repeat: no-repeat;
    background-image: url('../img/powers_section.jpg');
    background-size: cover;
    padding-bottom: 17vw;
    padding-top: 5vw;
}
#powers .wrapper{
    max-width: 1640px;
    margin: 0 auto;
    padding: 30px 0;
}

@media screen and (max-width: 1680px){
    #powers .wrapper{
        max-width: calc(100% - 6vw);
        margin: 0 auto;
        padding: 30px 3vw 30px;
    }  
}


#powers .powers-row{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#powers .powers-row .first-event h2, #powers .powers-row .first-event p{
    text-align: left;
}



.replay{
    position: relative;
    margin-left: 60px;
}

.replay .play{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    max-width: 30%;   
}

.replay:hover{
    filter: brightness(0.8);
}

@media screen and (max-width: 1366px){

    #powers .powers-row{
        flex-direction: column;
        text-align: center;
    }
    .replay {
        margin-left: 0px;
    } 
    #powers .powers-row .first-event h2, #powers .powers-row .first-event p{
        text-align: center;       
    }
    .replay-image{
        max-width: 100%;
    }
    
}


.power-boxes{
    position: relative;
    margin: 150px 0 0 30px;
    background-color: rgb(226,266,266,0.28);
    border-radius: 30px;
    width: 40%;
    padding: 60px 10% 60px 60px;    
}

.power-box{
    position: relative;
    transition: all 0.3s ease-out;
    display: none;
}

.power-description{
    max-width: 46vw;   
}


.power-box p{
    text-align: left;
    min-height: 7em;
    margin-bottom: 0;
}

.power-box .skin{
    position: absolute;
    bottom: -21vw;
    right: -35vw;
    max-width: 38vw;
}


@media screen and (max-width: 1366px){
    .power-box .skin {
        bottom: -23vw;
        right: -34vw;
        max-width: 34vw;
    }
}

@media screen and (max-width: 1024px){
    .power-box .skin {
        max-width: 33vw;
        bottom: -214px;
        right: -35vw;
        max-width: 34vw;
    }
    .power-box p{
        min-height: 8em;
    }
    .power-boxes{
        width: 46%;
        padding: 40px 6% 40px 40px; 
    }   
}

@media screen and (max-width: 768px){
    .power-box .skin {
        bottom: -175px;
        right: -33vw;
        max-width: 34vw;
    }
    .power-boxes{
        width: 46%;
        padding: 40px 7% 40px 40px; 
    }   
}

@media screen and (max-width: 680px){
    .skin-name {
        max-width: 80%;
        margin: 0 auto;
        display: block;
    }

    .power-boxes .nav-buttons {
        position: absolute;
        right: 50%;
        top: unset;
        transform: translateX(50%);
        width: 100%;
        text-align: center;
        bottom: 11px;
        z-index: 9;
    }

    .power-boxes .prev-button{
        margin: 0 25vw 10px 0;
    }
    .power-boxes .next-button{
        margin: 0 0 10vw 25vw;
    }
    .power-description {
        max-width: unset;
    }
    .power-boxes {
        width: auto;
        padding: 20px;
        margin: 20px 20px 0;
    }     
    .power-box .skin {
        bottom: unset;
        right: unset;
        max-width: 34vw;
        display: block;
        position: relative; 
        margin: 20px auto 0;       
     }
}



@media screen and (max-width: 480px){
    .power-boxes .prev-button{
        margin: 0 20vw 10px 0;
    }
    .power-boxes .next-button{
        margin: 0 0 10px 20vw;
    }
}



/* Nom skin */

.skin-name{
    max-width: 100%;
    height: 154px;
}


/* Slider */

.prev-button, .next-button{
    background: transparent;
    border: 0;   
    cursor: pointer;
    margin: 0 30px;
}

.nav-buttons{
    position: absolute;
    right: -36vw;
    top: 60px;
}
.prev-button:hover, .next-button:hover{
    filter: brightness(0.8);
}

@media screen and (max-width: 1366px){
    .nav-buttons{
        position: absolute;
        right: -36vw;
        top: 70px;
    }
    .skin-name{
        max-width: 100%;
        height: 14vw;
    }   
}

@media screen and (max-width: 1024px){
    .prev-button svg, .prev-button svg image, .next-button svg image, .next-button svg{
        width: 75px;
    }
    .nav-buttons {
        position: absolute;
        right: -36vw;
        top: 23px;
    }   
}

@media screen and (max-width: 768px){
    .prev-button svg image, .next-button svg image, .prev-button svg, .next-button svg{
        width: 56px;
    }
    .prev-button, .next-button{
        background: transparent;
        border: 0;   
        cursor: pointer;
        margin: 0 15px;
    }   
    .skin-name{
        height: 24vw;
    }       
}
@media screen and (max-width: 480px){
    .prev-button svg image, .next-button svg image, .prev-button svg, .next-button svg {
        width: 45px;
    } 
}

@media screen and (min-width: 1981px){
    .power-boxes {
        position: relative;
        margin: 150px 0 0 30px;
        background-color: rgb(226,266,266,0.28);
        border-radius: 30px;
        width: 21%;
        padding: 60px 10% 60px 60px;
        margin-left: 25%;
    }
    .power-box .skin {
        right: -30vw;
        max-width: 40vw;
        bottom: -220px;    
    }   
    .nav-buttons {
        right: -31vw;
    }
    #powers{
        padding-bottom: 6vw;
    }
}
@media screen and (min-width: 2561px){
    .power-box .skin {
        bottom: -291px;    
    }   
}  
/****** EDITEURS ******/

#editeurs{
    background: #060622;
    padding: 100px 0 20vw;
}

#editeurs .content{
    max-width: 1400px;
    margin: 0 auto;
}

@media screen and (min-width: 1981px){
    #editeurs{
        background: #060622;
        padding: 200px 0;
    }   
}


/****** PHONE *******/

#phone {
    position: relative;
}

#phone .phone-mockup{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 33vw;    
}



#phone .phone-bg{
    max-width: 100%;
}

@media screen and (min-width: 1981px){
    #phone .phone-mockup{
        max-width: 20vw;    
    }  
    #phone .phone-bg{
        width: 100%;
    }    
}
#phone .prev-button{
    position: absolute;
    top: 50%;
    left: 5vw;
    transform: translateY(-50%);   
}
#phone .next-button{
    position: absolute;
    top: 50%;
    right: 5vw;
    transform: translateY(-50%);   
}

@media screen and (max-width: 768px){
    #phone .phone-mockup{
        max-width: 33vw;    
    }
}

@media screen and (max-width: 480px){
    #phone .phone-mockup{
        max-width: 51vw;    
    }
    #phone .prev-button{
        left: 0vw;
    }
    #phone .next-button{
        right: 0vw;
    }    
    #phone .phone-bg{
        height: 260px;
    }
}

/****** SOUTIEN ******/

#soutien{
    background: #060622;
    padding: 20vw 0 60px;
}

.tweeter{
    cursor: pointer;
}
.tweeter:hover img{
    filter: brightness(0.8);
}

.tweeter img{
    display: block;
    margin: 0 auto;
    max-width: 100%;  
    border-radius: 20px;  
}

@media screen and (min-width: 1981px){
    #soutien {
        padding: 200px 0;
    }
}

@media screen and (max-width: 480px){
    #soutien{
        padding: 140px 0 0 0;
    }

    #editeurs{
        padding: 100px 0 140px;
    }
}



/******************/
/***** FOOTER *****/
/******************/

footer{
    background: #060622;
    text-align: center;
    padding: 10em 2em 6em;
}

.logo-footer{
    max-width: 80%;
}

@media screen and (max-width: 768px){
    footer{
        padding: 6em 2em 4em;
    }
       
}