html, body {
    height: 100%;
    font-family: 'Staatliches', cursive;
}
body{
    width: 100vw;
    padding: 0;
    margin: 0;


}
/*  debut menu burger */

.menu_burger a{
    text-decoration: none;
}
.menu_burger{
    width: 50px;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 10px;
    z-index: 100;
    position: fixed;
    top: 10px;
    left: 10px;
    background-color: black;
    opacity: 0.8;
    display: none;
}

.menu_burger div{
    height: 25%;
    width: 80%;
border-bottom: 1px solid #fff;
margin-left: 5px;
margin-right: 5px;
}

/*  fin menu burger */




/* début header */
header{
    width: 100vw;
    height: 900px;
    background: url(../img/arton173-1450x800-c.jpg) no-repeat center/cover;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    z-index: 50;
    position: relative;

}

header h1{
    font-size: 150px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    padding-left: 50px ;
    opacity: 1!important;
    transform: translate3d(0,0,0)!important;
}

header h2{
    font-size: 120px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    padding-left: 150px ;
    margin-bottom: 0px;
    padding-top: 100px ;
    padding-bottom: 0px ;

}

.title_coreen{
    display: flex;
    align-items: flex-end;
}


/* fin header */

/* début about */
.about{
    width: 100vw;
    padding: 15% 15%;
    position: relative;
    z-index: 30;
    transition: 0.3s all ease-in-out;
}

.about:hover h1{
    display: inline;
    padding-left: 5%;
    border-bottom: 2px solid black;
}






}
.about h1{
    font-size: 50px;
    display: inline;
    transition: 0.3s all ease-in-out;


}

.about p{
    display: inline;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 45px;
}


.arbre{
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
    height: 600px;
    background-image: url(../img/02.png);
    background-repeat: no-repeat;
    background-size: 45% ;
    background-position: right;
    line-height: 30px;
    /* background-position: right; */
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;

}

.arbre div{
    width: 33.33%;
    height: 100%;
    padding-right: 45px;
    display: flex;
}


/* .background_arbre{
    background-color: white;
    z-index: 26;
    height: 75%;
} */

/* fin about */


/* début filmographie */

.filmographie{
    padding-left: 25px;
    width: 100vw;
    }

.filmographie h1{
    font-size: 40px;
    display: inline-block;
    width: 25px;
    transform: rotate(-90deg);
    border-bottom: 2px solid #000;
    position: absolute;
}

.all_images {
    width: 100vw;
 padding-left: 15%;

}

.all_images img{
    overflow: hidden;
}

.all_images img[alt="mister"] {
 width: 800px;
 border: 2px solid black;
display: inline-block;
position: relative;
transition: 0.3s all ease-in-out;

}

.all_images img[alt="mister"]:hover {
 width: 910px;
 z-index: 1;
    
}


.all_images .title1{
    /* padding-top: 15px; */
   
}

.all_images img[alt="freek"]{
border: 2px solid black;
margin-top: 5%;
}

.all_images .guns{
    display: inline-block;
    position: absolute;
margin-top: -250px;
padding-left: 150px;
right: 10%;
}
.all_images img[alt="gun"]{
height: 450px;
transition: 0.3s all ease-in-out;

}

.all_images img[alt="gun"]:hover {
    height: 600px;
   }

 .all_images img[alt="freek"]:hover {
    height: 200px;
    transition: 0.3s all ease-in-out;

   }   


.all_images img[alt="green"]{
position: relative;    
display: block;
border: 2px solid black;
width: 1000px;
margin-top: 150px;
transition: 0.3s all ease-in-out;
}

.all_images  .figcaption{
    display: inline;
    
}
.all_images .green2 .figcaption{
    color: black;
    font-size: ;
}

.all_images .green2:hover .figcaption{
    color: green;
}


 .all_images img[alt="green"]:hover {
    width: 1100px;
   }

.all_images img[alt="arbre_noir"]{
padding-left: 30%;
margin-top: -10%;
z-index: -10;
transition: 0.3 all ease-in-out;
}

.all_images img[alt="green"] img[alt="arbre_noir"]{
background-color: white;
    opacity: 0.8;    

}

/* fin filmographie */


/* début section movie */
.movies{
    background: url(../img/featured-image.jpg) no-repeat left/cover;
    height: 800px;
    width: 100vw;
    margin-top: 200px;
    padding-left: 25px;
    transition: 0.3s all ease-in-out;
    z-index: 0;
    position: relative;
}

.movies:hover{
    background-position: center;
}

.movies::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.6;
    transition: opacity 1s;
    z-index: 1;

}

.movies:hover:before{
    opacity: 0.8;
}

.movies h1{
    font-size: 40px;
    display: inline-block;
    width: 25px;
    transform: rotate(-90deg);
    border-bottom: 2px solid #000;
    position: absolute;
    z-index: 2;
    transition: 0.3s all ease-in-out;

}

.movies:hover h1{
    transform: rotateZ(-0deg);

}

.colonnes{
    display: flex;
    justify-content: space-evenly;
    z-index: 10;
    font-size: 35px;

}

.colonne_left{
    padding-left: 20px;
    padding-top: 30px;
    border-left: 2px solid black;
    z-index: 10;
}

.colonne_right{
    padding-top: 30px;
    padding-left: 20px;
    border-left: 2px solid black;
    z-index: 10;
}


/* fin section movie */



.second_menu{
    padding: 25px;
    width: 100vw;
}

.second_menu a{
    text-decoration: none;
    color: black;
}
.buy{
    transform: rotate(270deg);
    border-bottom: 2px solid #000;
    position: fixed;
    bottom: 35px; 
    left: 25px;
    z-index: 40;
    

}


.upcoming{
    transform: rotate(90deg);
    border-bottom: 2px solid #000;
    position: fixed;
    bottom: 75px; 
    right: 5px; 
    z-index: 25;

}

/* début movie */
#buy_all_movies{
    width: 100vw;
    padding: 15% 15%;
    position: relative;
    z-index: 30;
    transition: 0.3s all ease-in-out;
}

#buy_all_movies:hover h1{
    display: inline;
    padding-left: 5%;
    border-bottom: 2px solid black;
}







#buy_all_movies h1{
    font-size: 50px;
    display: inline;
    transition: 0.3s all ease-in-out;
    margin-bottom: 25px;
}

#buy_all_movies h2{
    display: inline;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 45px;
}


.jacket{
    padding-top: 40px;
    padding-bottom: 40px;
    height: 600px;
  
    background-repeat: no-repeat;
    background-size: 45% ;
    background-position: right;
    line-height: 30px;
    /* background-position: right; */
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;

}
.jacket{
    display: flex;
}


.jacket div{
    /* width: 33.33%; */
    height: 100%;
    padding-right: 45px;
}

.jacket p{
    font-family: 'Staatliches', cursive;
    padding-right: 15%;
    font-size: 20px;
}

.jacket img{
    height: 70%;
    padding-right: 15%;

    }

.jacket .sous_txt {
    font-family: 'Staatliches', cursive;
    color:grey;

}   

.old_boy{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;
    
}



.handmaiden{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
}



.ladyvendgeance{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;

}

/* fin  movie */

/* footer */
.footer{
    display: flex;
    justify-content: center;

}
.footer a{
    text-decoration: none;
    width: 4%;
    margin: 5px;
    height: 100%;
   
    
}

.footer a:hover{
    background-color: coral;
    opacity: 0.3;
}


/* responsive */
@media only screen and (max-device-width: 600px)
{
/* header{
    width: auto;
    height: 250px;
} */
/* .title_coreen h1{
font-size: 45px;
}

.title_coreen h2{
    font-size: 39px;
    } */
.menu_burger{
  width: 80px;
    height: 100px;
    display: inline-block;
} 
.second_menu{
    display: none;
    background-color: lightblue;
}

/* section about */
.arbre{
    display: flex;
    flex-direction: column;
   
    height: auto;
    
    background-size: 80% ;
}
.arbre div{
    width: auto;
    padding: 0px;
}

.arbre .responsive_hide1{
    display: none;
}

.arbre .responsive_hide2{
    display: none;
}

.about h1{
    font-size: 70px;
}

.about .background_arbre{
    font-size: 60px;
    font-size: 45px;
    font-family: 'Staatliches', cursive;
    line-height: 2;
}



/* section about */


/* .all_images img:not([alt="freek"]) {
    width: 70%;
    

} */

/* debut filmographie */

.filmographie h1{
    font-size: 70px;
    padding-left: 30px;
    margin-left: 30px;
}



.all_images figcaption{
    font-size: 65px;
}

.all_images .figcaption{
    display: none;
}

.all_images .guns{
    width: 70%;
    height: 20px;
    position: relative;
    display: inline-block;
    margin-top: 40px;
    margin-left: 10%;
    padding-left: 0;

}
.all_images img[alt="gun"] {
    width: 136%;
    height: auto;
}
.all_images img[alt="green"]{
margin-top: 40px;
width: 95%;
} 

.all_images img[alt="freek"]{
    margin-top: 40px;
    width: 95%;
    } 

.all_images img[alt="arbre_noir"]{
    padding-left: 5%;
    margin-top: -8%;
    z-index: -10;
    }
/* fin filmographie */


 
/* début Movies */
.movies{
    height: auto;
}

.movies h1{
    font-size: 70px;
    padding-left: 30px;
    margin-left: 30px;
}
.colonnes{
    font-size: 25px;

}
.colonne_left{
    padding-left: 10%;
    border-left: hidden;
   
}
.movies{
margin-top: 10%;

}

.colonnes p{
    font-size: 45px;
    line-height: 60px;
    font-family: 'Staatliches', cursive;


}


/* fin Movies */

/* buy all movies */
#buy_all_movies{
    margin-left: 30px;
}

#buy_all_movies h1{
   font-size: 60px;
}

#buy_all_movies .sous_txt{
    display: none;
}

.jacket .old_boy{
    display: none;
}

.jacket p{
    font-size: 40px;
    line-height: 1;
}
.jacket img{
   height: 80%;

}
.footer a{
    text-decoration: none;
    width: 90px;
    margin: 15px;
   
    
}


}