@media only screen and (min-width: 1024px) {

    .homepage-content{
        width: 50%;
        padding: 1% ;
    }

    .homepage{
        height:calc(100vh - 70px);
         background-image: linear-gradient(180deg, #9b9b9b, #ebebeb), url(../images/intro-background.jpg);
         padding: 7% 0% 0% 0%;
         overflow: hidden;
    }

    .boris{

        text-align: center;
        bottom: 80px;
        font-size: 0.5em;
        right: 100px;
    }
    

    .homepage-title{
       
        font-size: 3.125rem;
          
    }
    .homepage-title span{
       
        color: #0b1127;
          
    }

    .arrow {
        display: block;
        margin: 15vh auto;
        grid-column: 1 / 3;

    }
    .arrow span{
        border-bottom: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
    }

    .langIcon{
        width: 20%;

     }

     #livreicon{
        width: 55px ;
        height: 55px;
     }

     .coco{ 
        max-height: 90vh;
    }

     .coco:hover{
        transform: scale(1.05);
        transition: 1s;
    }

    .homepage-book{
        grid-row-start: 2;

        }

     .homepage-book{
            font-size: 2em;
            width: 50%;
            margin: 0 auto;
        }

    .homepage-content{
        grid-column: auto;
        grid-row: auto;
        width: 100%;
    }

    .nav-menu.active {
        right: -5%;
    }  

    .NavIcon{
        width: 10%;

    }

    .hamburger {
        display: none;
    }

    .header{
        height: 10px;
    }

    .header-navigation{
        background-color: #0b1127;
        overflow: hidden;
    }

    .nav-menu {
        position: static;
        left: 0;
        top: 0;
        flex-direction: row;
        justify-content: flex-end;
        background-color: #0b1127;
        width: 100%;
        border-radius: 0px;
        text-align: center;
        transition: none;
        box-shadow: none ;
    }

    
    .nav-item {
        margin: 0 0 0 0;
        width: 10%;

    }

    .nav-link{
        font-size: 1.2rem;
    }

    .homepage-title{
       
        font-size: 5rem;
          
    }

    .text{
        width: 40vw;


        
    }
    .text p{
        margin: 0 auto;

    }

    .firstBackdrop, .secondBackdrop, .thirdBackdrop, .fourthBackdrop, .fifthBackdrop, .sixthBackdrop, .seventhBackdrop{
        padding: 0 0;
        width: 300px;
        height: 300px;
        position: absolute;
        left: 15%;
        top: 0;
    }

    
.firstSection, .secondSection, .thirdSection, .fourthSection, .fifthSection, .sixthSection, .seventhSection{
    padding-left: 40vw;
    

}

    .date{
        position: absolute;
        text-align: center;
        top: 30%;
        left: 51%;
        color: black;
        z-index: 15;
        
    }
    .starTitle{
        display: initial;
        position: relative;
        margin-left: 30%;
        width: auto;
        height: 65%;

    }
    .nostarTitle{
        position: absolute;
        transition: 2s;
        top: 20%;
        left: 0%;
        margin: 0;
        opacity: 0;
    }
    #cinquantenaire{
        
        position: absolute;
        color: white;
        left: 60%;
        width: 100%;
        
        }



.formulaire{
    width: 50%;
    margin: 0 auto;
    background:none ;

}

.input{
    padding: 1% 0;
}

.input::placeholder {
    padding: 2%;
    font-size: 1em;
  }

.inputBox{
    width: 70%;
    margin: 2vh auto;
    
}


.submitButton{

    width: 25%;
    padding: 2%;
    margin: 5% auto;
}
.closeButton{

    width: 25%;
}


.legbox{
    width: 50%;
    margin: 0 auto;
}

.leg{
    margin-top: 10%;
}

}