/*Polices*/

@font-face {

    font-family: "BallparkWeiner";
    src: url("polices/ballpark.woff") format("woff");
    font-weight: normal;
    font-style: normal;

}

@font-face {

    font-family: "Dayrom";
    src: url("polices/dayrom.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
}

/*Styles principaux*/

body {

    margin: 0;
}

#main_wrapper {

    width: 100%;
    display: flex;
}

/*Barre de navigation*/

#barDeNav {

    align-self: flex-start;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    width: 20%;
}

#barDeNav a img {

    max-width: 100%;
    max-height: 15vh;
    min-width: 60px;
    min-height: 27px;
}

#return_button {

    align-self: flex-start;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    width: 20%;
    max-width: 150px
}

#return_button img {

    margin-top: 10px;
    width: 100%;
    height: auto;
}


/*Styles des boutons de navigation*/

.topnav .icon {

    display: none;
    color: #FFB6C1;
    font-size: 1.6em;
}

.topnav a {

    display: block;
}

/*Responsive design de la page*/

#page_layout {

    width: 75%;
}

#bonus_layout {

    width: 80%;
    display: flex;
    flex-direction: column;
    margin-top: 2vh;
}

/*Styles du header*/
#header {

    text-align: center;
    margin-bottom: 50px;
}

#header img {

    width: 75%;
    height: auto;
    max-width: max-content;

}

/*Styles de la barre de navigation secondaire*/

#animation_nav {

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin: 30px 0;
}

.animNavButton {

    margin: 5px;
}

.animNavImg {

    width: 90%;
}

/*Styles des Sections*/

#indexHero {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#indexHero img {

    max-width: 100%;
}

.section {

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.imgSection {

    display: flex;
    flex-flow: column wrap;
    align-items: center;
    margin-top: 2vh;
}

.imgGrid {

    width: 95%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.imgGrid_in_colunm {

    width: 95%;
    flex: 1;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.imgGrid_in_colunm img{
 
    width: auto;   
}

#video_grid {

    flex-flow: row wrap;
    justify-content: space-around;
    align-content: center;
}

#video_grid iframe {

    width: 95%;
    max-width: 200px;
    margin: 5px;
}

#video_grid_in_column {

    flex-wrap: wrap;
}

#video_grid_in_column iframe {

    width: 55%;
    max-width: 550px;
    margin: 5px;

}

/*Classes de objets*/
.date {

    align-self: flex-end;
}

.bonus {

    align-self: flex-end;
    max-width: 200px;
    width: 20%;
    min-width: 100px;
}

.bonus a img {

    width: 100%;
    height: auto;
    border: none;
}

.bonus a img:active {

    background: none;
}

.union {

    max-width: 150px;
    width: 10%;
}

.union img {

    width: 100%;
    height: auto;
}

.divImgSection {

    max-width: 90%;
}

.divImgSection img {

    border: none;
    width: 100%;
    max-width: max-content;
    height: auto;
}

.esperluette {

    text-align: center;
    margin: 20px;
}


/*Styles des layouts*/

#video_layout {

    display: flex;
    width: 55%;
    height: auto;
    max-width: 550px;
}

#video_wrapper {

    flex: 1;
    position: relative;
    padding-bottom: 56.25%;

}

#eclip_wrapper {

    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

#billy_layout {

    width: 40%;
    max-width: 300px;
    min-width: 150px;
}

#M_layout {

    width: 40%;
    max-width: 300px;
    min-width: 150px;
}

/*Dimensions des clip video*/

.video {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#bogart {


    right: -36.36%;
    position: absolute;
    bottom: 0;
    height: auto;
    width: 36.36%;
    max-width: 200px;
}


#judas {

    left: -25.45%;
    position: absolute;
    bottom: 0;
    height: auto;
    width: 25.45%;
    max-width: 140px;
}

#adolf {

    right: -36.36%;
    position: absolute;
    bottom: 0;
    height: auto;
    width: 36.36%;
    max-width: 200px;
}

/*Styles des titres des sections*/

.titre_anim {

    width: 55%;
    height: auto;
    max-width: 550px;
}

.titre_anim2 {

    width: 55%;
    height: auto;
    max-width: max-content;
}

.titre_anim img {

    width: 100%;
    height: auto;
}

#titre_billy {

    width: 100%;
    height: auto;
}

#titre_M {

    width: 100%;
    height: auto;
}

#credit_miracle {

    width: 55%;
    height: auto;
    max-width: max-content;
}

/*Styles des paragraphes*/

.pitch {

    width: 55%;
    max-width: 550px;
    overflow: hidden;
}

.pitch p {

    font-size: 0.8em;
    text-align: justify;
    font-family: verdana;
    text-justify: inter-word;
}

.mediumPitch {

    width: 100%;
    height: auto; 
}


.mediumPitch p {

    font-size: 0.8em;
    font-family: verdana;
    text-justify: inter-word;
    text-align: justify;
}

.mediumPitch span {

    color: red;
}

/*Styles des pages bonus*/

.imgFullScreen {

    align-self: center;
    max-width: 100%;
}

.imgFullScreen img {

    width: 100%;
    height: auto;
}

#imgSerieDeMaVie {

    height: auto;
}

#imgProjetDeMaVie {

    height: auto;
}

#esperluette {

    height: auto;
}