* {
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;

}

html {
    background-color: black;

}


body {
    margin: 0;


}


.container_12 {
    /* border: 2px solid black;*/

}




/**DEBUT MENU**/

#menu nav {
    justify-content: space-between;
    padding: 0 5%;
    float: left;
    width: 15%;
    margin-top: 1%;

    z-index: 1000;
    background-color: transparent;
    position: fixed;

}

#menu nav .nav-list {
    background-color: transparent;
    display: grid;
    position: absolute;
    width: 100%;
    margin-top: 25%;
    margin-left: 10%;
    left: 0;
    transform: translateY(-200%);
    z-index: -10;
    transition: 0.6s;

}




#menu nav .nav-list .nav-item {
    cursor: pointer;

    padding: 5% 0;
    margin-bottom: 3%;
    transition: 0.4s;
    text-align: center;

    background: white;
    color: black;
    border: 2px solid black;
    border-radius: 50%;

}

/*formes*/
#menu nav .nav-list .nav-item:nth-of-type(1) {
    border-radius: 60%;
    transform: rotate(20deg);

}




#menu nav .nav-list .nav-item:nth-of-type(3) {
    border-radius: 60%;
    transform: rotate(-10deg);
    z-index: 10;


}

#menu nav .nav-list .nav-item:nth-of-type(5) {
    border-radius: 60%;
    transform: rotate(20deg);


}

#menu nav .nav-list .nav-item:hover:nth-of-type(1) {
    background-color: rgba(260, 102, 9, 0.9);

}

#menu nav .nav-list .nav-item:hover:nth-of-type(2) {
    background-color: #F2A413;

}

#menu nav .nav-list .nav-item:hover:nth-of-type(3) {
    background-color: rgba(9, 158, 137, 0.9);

}

#menu nav .nav-list .nav-item:hover:nth-of-type(4) {
    background-color: rgba(260, 102, 9, 0.9);

}

#menu nav .nav-list .nav-item:hover:nth-of-type(5) {
    background-color: rgba(9, 158, 137, 0.9);

}

#menu nav .nav-list .nav-item:hover:nth-of-type(6) {
    background-color: #F2A413;

}





#menu nav .nav-list .nav-link {
    font-family: 'Anuphan', monospace;
    text-transform: uppercase;
    font-size: 16px;
    color: black;
    background-color: transparent;




}

#menu nav .nav-list .nav-link:hover {
    color: white;

}

#menu nav .navbar-toggler {
    background-color: transparent;
    display: grid !important;
    height: min-content;
    margin: 20% -3% 0 -60%;
    cursor: pointer;
    float: left;

}

#menu nav .navbar-toggler .bar {
    width: 30px;
    height: 4px;
    margin-bottom: 20%;
    background: orangered;
    border-radius: 10%;
    transition: .4s;
}

#menu input {
    display: none;
}

#menu input:checked ~ nav .nav-list {
    transform: translateY(0);
}



#menu input:checked ~ nav .navbar-toggler {
    margin-top: 20%;
}

#menu input:checked ~ nav .navbar-toggler .bar:nth-child(1) {
    position: absolute;
    transform: rotate(45deg);
}

#menu input:checked ~ nav .navbar-toggler .bar:nth-child(2) {
    display: none;
}

#menu input:checked ~ nav .navbar-toggler .bar:nth-child(3) {
    transform: rotate(-45deg);
}



/**FIN MENU**/


#accueil {
    margin: 0;
}



#accueil #animation {
    width: 100%;
    height: 100vh;
    align-items: center;
    background-color: black;

}


#accueil #animation {
    width: 100%;
    height: 100vh;
    align-items: center;
    background-color: black;

}



#accueil video {
    background-color: black;
    width: 100%;
    height: 90vh;


}

#accueil #vertical {
    display: none;
    background-color: black;
    width: 100%;
    height: 90vh;
}


#accueil #separateur{
    margin-bottom: 15%;
}


#accueil .rond {
    border: 2px solid white;
    width: 20%;
    height: 5vh;
    border-radius: 100%;
    margin-left: 40%;


}


#accueil .rond:nth-last-of-type(1) {
    position: relative;


    animation-name: forme1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 2s;

}

#accueil .rond:nth-last-of-type(2) {
    position: relative;


    animation-name: forme2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 1s;

}

#accueil .rond:nth-last-of-type(3) {
    position: relative;

}



@keyframes forme1 {
    0% {
        bottom: 10vh;
    }

    100% {
        bottom: 0;
    }
}

@keyframes forme2 {
    0% {
        bottom: 5vh;
    }

    100% {
        bottom: 0;
    }
}



/***************GENERAL**********************/

section {
    margin-bottom: 30%;
    margin-top: 40%;
}



/*titre*/
.grid_11 h1 {
    font-family: 'Anuphan', sans-serif;
    font-size: 40px;
    text-transform: uppercase;
    color: orangered;
    margin-top: 4%;
    margin-bottom: 12%;
    width: 100%;
    padding: 2% 0;
    text-align: center;
    background-color: black;
    border: 2px solid orangered;
    border-radius: 50%;
    transform: rotate(20deg);




    animation-name: rotation;
    animation-duration: 3s;
    animation-iteration-count: infinite;

}

@keyframes rotation {
    0% {
        transform: translateY(-300%);
    }

    25% {
        transform: rotate(-15deg);
    }

    50% {
        transform: rotate(15deg);
    }

    75% {
        transform: rotate(0);
        ;
    }

    100% {
        transform: translateX(400%);
        ;
    }
}




/*citation*/

.grid_12 h4 {
    margin-top: 10%;
    margin-bottom: 10%;
    font-family: 'Anuphan', sans-serif;
    color: white;
    border-left: 1px solid white;
    font-size: 16px;
    text-align: center;



}

.grid_6 h4 {
    margin-top: 10%;
    margin-bottom: 10%;
    font-family: 'Anuphan', sans-serif;
    color: white;
    border-left: 1px solid white;
    font-size: 16px;
    text-align: center;
    padding-left: 3%;

}

#realisateur .grid_5 h4 {
    margin-top: 10%;
    margin-bottom: 10%;
    font-family: 'Anuphan', sans-serif;
    color: white;
    border-left: 1px solid white;
    font-size: 16px;
    text-align: center;
    padding-left: 3%;

}

.grid_5 h4 {
    margin-top: 10%;
    margin-bottom: 10%;
    font-family: 'Anuphan', sans-serif;
    color: white;
    border-left: 1px solid black;
    font-size: 16px;
    text-align: center;
    padding-left: 3%;




}

/*texte*/
.grid_5 p {
    font-family: 'Work Sans', sans-serif;
    color: white;
    font-size: 16px;
    margin-bottom: 4%;
    line-height: 1.6;
    
}

.grid_6 {
    font-family: 'Work Sans', sans-serif;
    color: white;
    font-size: 16px;
    margin-bottom: 4%;
    line-height: 1.6;
    
}

.grid_12 p {
    font-family: 'Work Sans', sans-serif;
    color: white;
    font-size: 16px;
    margin-bottom: 4%;
    line-height: 1.6;
    
}

.grid_6 h5 {
    font-family: 'Work Sans', sans-serif;
    color: white;
    font-size: 16px;
    line-height: 1.6;
    margin-top: 4%;
    
}





/*******************GENERIQUE***********************/
#generique {
    margin-top: 10%;
    margin-bottom: 10%;
    

}






#generique .grid_5 img {
    width: 100%;
    margin-bottom: 3%;
   

}



#generique .grid_5 video {
    margin-top: 0;
    min-height: 100%;
    margin-bottom: 10%;
    width: 100%;

}

#generique .grid_11 video {
    margin-top: 0;
    min-height: 100%;
    margin-bottom: 10%;
    width: 100%;

}


/*****************FILM**************************/
#film {

    margin-top: 10%;
    margin-bottom: 10%;
   

}



#film .grid_5 img {
    width: 100%;
    margin-bottom: 10%;
}




/*REALISATEUR*/
#realisateur {

    margin-top: 10%;
    margin-bottom: 10%;
    

}



#realisateur .grid_11 a {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    color: black;
    margin-bottom: 3%;
    
}



#realisateur .grid_5 img {
    width: 100%;
    
}




/****************SAUL BASS******************/
#saul {
    margin-top: 10%;
    margin-bottom: 10%;
    

}



#saul .grid_5 img {
    width: 100%;
    margin-bottom: 3%;
}


#saul .grid_6 a p {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    color: white;
    margin-bottom: 3%;
   
}


/*****************BLOW UP********************/
#blowup {
    margin-top: 10%;
    margin-bottom: 10%;
   

}


#blowup .grid_11 video {
    min-height: 100%;
    margin-bottom: 6%;
    width: 100%;
}


#blowup .grid_12 p::first-letter {
    text-transform: uppercase;

}

#blowup .grid_12 a {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    color: white;

   
}



/**********FOOTER****************************/
footer {

    border-top: 2px solid orangered;
    border-bottom: 2px solid orangered;
    margin-bottom: 2%;

}


footer h2 {
    font-family: 'Anuphan', sans-serif;

    font-size: 15px;
    color: orangered;
    margin-top: 2%;
    text-align: center;
}


footer #footer {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    color: orangered;
    margin-top: 2%;
    text-align: center;
}

footer nav {
    text-align: center;
    justify-content: space-between;
    margin-top: 2%;
    margin-bottom: 2%;
}

footer nav ul li {
    display: inline-block;
    width: 20%;
}

footer nav ul li a {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    color: orangered;

}



/**RESPONSIVE**/
/*pour tablette*/
@media only screen and (max-width: 820px) {



    #menu nav {
        width: 20%;
    }

    #menu nav .navbar-toggler {
        margin: 20% 3% 0 10%;

    }

    #menu nav .navbar-toggler .bar {
        width: 30px;
        height: 4px;
        margin-bottom: 20%;

    }




    .grid_11 h1 {
        font-size: 35px;
       width: 100%;
       
    }

    .grid_6 h4 {
        font-size: 16px;
        line-height: 1.4em;
    }

    .grid_12 h4 {
        font-size: 16px;
    line-height: 1.4em;
    }

    .grid_6 p {
        font-size: 15px;
    }

    .grid_5 p {
        font-size: 15px;
    }

    .grid_12 p {
        font-size: 15px;
    }

    .grid_5 h5 {
        font-size: 16px;
    }

   .grid_12 a {
        font-size: 10px;
    }
}

/*pour portable*/
@media only screen and (max-width: 600px) {

    #accueil .grid_12 #animation {
        display: none;
    }

    #accueil .grid_12 #vertical {
        display: block;
    }



    #menu nav {
        width: 35%;
        margin-top: 5%;

    }

    #menu nav .navbar-toggler {
        margin-top: 20%;
        margin-bottom: 10%;
        margin-left: 2%;

    }


    #menu nav .navbar-toggler .bar {
        width: 30px;
        height: 4px;
        margin-bottom: 20%;

    }

    #menu input:checked ~ nav .navbar-toggler {
        margin-top: 70px;
    }

    #menu input:checked ~ nav .nav-list {
        transform: translateY(30%);
    }



    .container_12 #generique .grid_6 {
        width: 80%;
    }

    .container_12 #generique .grid_5 {
        width: 90%;
    }

    .container_12 #film .grid_6 {
        width: 80%;
    }

    .container_12 #film .grid_5 {
        width: 90%;
    }

    .container_12 #realisateur .grid_6 {
        width: 80%;
    }

    .container_12 #realisateur .grid_5 {
        width: 90%;
    }

    .container_12 #saul .grid_6 {
        width: 80%;
    }

    .container_12 #saul .grid_5 {
        width: 90%;
    }





    .container_12 .grid_5 {
        width: 100%;
    }

    .container_12 .grid_6 {
        width: 100%;
    }

    .container_12 .grid_3 {
        width: 100%;
    }



#footer a {
        font-size: 10px;
    }


    .grid_11 h1 {
        font-size: 20px;
        padding: 5%;
    }



}