/* GENERAL
******************************************************************************************/
body {
    background: black;
    font-family: 'Share', sans-serif;
    color: #FDF100;
    font-size: 22px;
    font-weight: 400;

}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    font-family: 'Share', cursive;
}

h1 {
    font-size: 5vw;
    font-family: 'Share', cursive;
    font-weight: 700;
    text-align: center;
    text-shadow: 1px 1px 21px rgba(253, 240, 0, 0.5);
    margin: 0;
    padding: 0;
    line-height: 1em;
}

h2 {
    font-size: 8vw;
    font-family: 'Share', cursive;
    font-weight: 700;
    text-align: center;
    text-shadow: 1px 1px 21px rgba(253, 240, 0, 0.5);
    margin: 0;
    padding: 0;
    line-height: 1em;

}

h3 {
    font-size: 200%;
    font-family: 'Share', cursive;
    font-weight: 700;
    margin: 2em 0 .5em -1.3em;
    text-shadow: 1px 1px 21px rgba(253, 240, 0, 0.5)
}


h4 {
    font-size: 180%;
    font-family: 'Share', cursive;
    font-weight: 700;
    margin: 1em 0 1em;
    padding: .3em 0;
    text-shadow: 1px 1px 21px rgba(253, 240, 0, 0.5);
    text-align: center;
}

h5 {
    text-align: center;
    padding: .3em 0;
    text-shadow: 1px 1px 21px rgba(253, 240, 0, 0.5);
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    
    body {
        font-size: 18px;
        }
    
    body.nav-on {
        overflow-x: hidden;
        height: 100vh;
        }
    }

/* EN-TETE
******************************************************************************************/
#header {
    width: 100vw;
    /*height: 120px;*/
    display: flex;
    justify-content: space-between;
    margin: 0;
    z-index: 10000;
    /* position: absolute;*/
    /*background: rgba(0,0,0.5);*/
}

#accueil #header {
    position: absolute;
}

#header #logo {
    flex: 0 0 20%;
}

#header #logo a {
    display: block;
    color: #FDF100;
    font-weight: bold;
    text-decoration: none;
    width: 6em;
    background: black;
   margin: 1em;
    padding: .5em;
    text-align: center;
}

#header #title {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
}


#header #title h1 {
    color: white;
    font-size: 4vw;
}

#header #title h2 {
    color: white;
    font-size: 2.5vw;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    #logo {
        display: none;
        }
    
    #header #title {
        flex: 0 0 100%;
        }
    
    #header #title h1 {
        font-size: 5.5vw;
        margin-top: 10px;
        }
    
    #header #title h2 {
        font-size: 3vw;
        }
    }

/* NAVIGATION
***************************************************************************************************************/
#nav {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    padding: 1em;
}

#nav a {
    color: white;
    font-size: 1.8vw;
    text-decoration: none;
    padding: 0 2em 0 0;
    margin:2px 0 ;
}

#nav a.sel {
    color: #FDF100;
    font-weight: bold;
}


@media screen and (min-device-width: 320px) and (max-width: 768px) {

    .btn-mobile-menu {
        display: block;
        position: absolute;
        right: 0px;
        top: 10px;
        width: 40px;
        height: 40px;
    }

    .btn-mobile-menu.open:before {
        font: normal normal normal 14px/1 FontAwesome;
        content: '\f0c9';
        margin-right: .5em;
        width: 1em;
        font-size: 30px;
        display: inline-block;
        color: rgba(253, 241, 0, 1);
    }

    .btn-mobile-menu.close {
        z-index: 20000;
    }

    .btn-mobile-menu.close:before {
        font: normal normal normal 14px/1 FontAwesome;
        content: '\f00d';
        margin-right: .5em;
        width: 1em;
        font-size: 30px;
        display: inline-block;
        color: white;

    }

    #nav-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        visibility: hidden;
  
    }

    #nav {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(253, 241, 0, 0.91);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        /*display: flex;*/
        display: none;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        padding: 0;

    }
    
    .nav-on #nav {
        display: flex;
        }

    #nav .gutter {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100vw;
        height: 100vh;
    }

    .nav-on #nav-wrapper {
        z-index: 9999999999;
        visibility: visible;
    }
    
    .nav-on #content {
        z-index: -10;
        }

    #nav a {
        color: black;
        font-size: 6vw;
        display: block;
        text-align: center;
        padding: 1em 0;
    }

    #nav a.sel {
        color: black;
        font-weight: 900;
    }


}

/*  CONTENUS
******************************************************************************************/
h3.titre {
    font-size: 3vw;
    text-align: center;
    text-transform: uppercase;
    color: rgba(253, 241, 0, 1);
    margin: 2em 0 1em;
}

.item {
    width: 70vw;
    margin: 12vh auto;
    font-size: 2vw;
    line-height: 1.4em;
}

.contenu {
    color: white;
    text-align: center;
}

.contenu a {
    color: rgba(253, 241, 0, 1);
}

.texte_programme {
    color: white;
    text-align: center;
    padding: 1em 0;
}

#home-buttons {
    display: flex;
    justify-content: center;
    padding: 1em 0 ;
}

.map-link {
    color: rgba(253, 241, 0, 1);
    text-align: center;
    display: block;
    margin: .5em 0;
    text-decoration: none;
}

#home-buttons a, .btn , #billets{
    color:black;
    background: rgba(253, 241, 0, 1);
    text-decoration: none;
    padding: .5em 2em;
    margin: 0 1em;
    align-self: center;
}

.btn-bar {

    display: flex;
    margin: 2em 0;
    justify-content: center;
}

mobile {
    #billets{
        font-size: 4vw;
    }
}

#message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 3vw;
    text-transform:uppercase;
    text-align: center;
    font-weight: 900;
    padding: 0 1em;
    
    height: 30vh;
    width: 90vw;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    .map-link {
        font-size: 4vw;
    }


    .item {
        width: 90vw;
        }
    
    h3.titre {
        font-size: 7vw;
        }

    .contenu {
        font-size: 5vw;
        line-height: 1.4em;
    }
    
    #message {
        height: 15vh;
        font-size: 6vw;
        }
    }

/* PROGRAMME */
.event.item {

    display: flex;
    justify-content: space-between;
    text-decoration: none;
    margin: 4vh auto;
}

.event.item .date {
    flex: 0 0 20%;
    color: white;
    font-size: 2vw;
    text-transform: uppercase;
}

.event.item .infos {
    flex: 0 0 75%;
    text-transform: uppercase;
}

.sponsor {
    color: white;
    text-transform: none;
}

#programme.detail .medias {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 1em;
}

#programme.detail p {
    line-height: 1.2em;
}

#programme.detail .medias>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
}

#programme.detail .medias img {
 width: 40%;
    margin-rigth: 10px;
    justify-self: center;
}

#programme.detail .medias iframe {
    flex: 0 0 60%;
}

#programme.detail .sponsor {
    text-align: center;
    font-size: 120%;
}

#programme.detail .sponsor a {
    color: white;

    text-decoration: none;
}

.infos .animation {
    color: white
}

.infos .film {
    font-size: 2vw;
    font-weight: 900;
    color: rgba(253, 241, 0, 1);
}

#programme.detail h3 {
    margin: 1em 0 1em 0;
    font-size: 180%;
    line-height: 1.3em;
}

#programme.detail h4 {
    font-size: 250%;
}

#programme.detail .event.item.animation, #programme.detail .event.item .date {
    color: white
}

#programme.detail .event.item.film .date {
    color: rgba(253, 241, 0, 1);
}

#programme.detail .event.item .infos {
    text-transform: none;
}

#programme.detail .event.item .infos p {
    margin-bottom: .5em;
}

#nav-days {
    width: 80vw;
    margin: 0 auto 0;
    display: flex;
    justify-content: space-between;
    border-top : 1px solid rgba(253, 241, 0, 1);
    border-bottom : 1px solid rgba(253, 241, 0, 1);
}

#nav-days span {
    font-size: 200%;
    color: rgba(253, 241, 0, 1);
    flex: 0 0 10%;
    align-self: center;
    text-align: center;
}

#nav-days span a {
    color: rgba(253, 241, 0, 1);
}

#nav-days  h4 {
    margin: 0;
    font-weight: 100;

}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    
    .event.item {
        flex-wrap: wrap;
        }
    
    .event.item .date {
        flex: 0 0 100%;
        font-size: 7vw;
        margin: 1em 0 .5em;
        text-align: center;
        line-height: 1.4em;
        font-weight: bold;
        }

    .event.item .film {
        line-height: 1.4em;
    }
    
    .event.item .infos {
        text-align: center;
        flex: 0 0 100%;
        }
    
    .event.item .animation, .event.item .film {
        flex: 0 0 100%;
        font-size: 7vw;
        text-align: center;
        margin-bottom: 1em;
        }

    .event.item .infos .animation {
        line-height: 1.2em;
    }
    
    .event.item .btn {
        display: none;
        }


    
    #programme.detail h4 {
        font-size: 140%;
    }

    #nav-days {
        width: 90vw;
    }

    #nav-days span a {
        font-size: 80%;
    }

    #programme.detail .sponsor {
        font-size: 80%;
    }

    #programme.detail .item {
        flex-wrap: wrap;
        width: 90vw;
    }

    #programme.detail h3 {
        line-height: 1.3em;
        font-size: 7vw;
    }

    #programme.detail .medias  {
     flex:0 0 100%;
        display: flex;
        flex-direction: column;
        }
    
    #programme.detail .medias img {
        width: 100%;
        }
    
    #programme.detail .date {
        flex: 0 0 100%;
        font-size: 90%;
        text-align: center;
        margin: 2em 0 0 0;
        padding: 0;
    }

    #programme.detail .infos {
        flex: 0 0 100%;
        font-size: 5vw;
        text-align: left;
    }

    #programme.detail h3 {
        margin: 0em 0 .5em 0;
        text-align: center;
    }

}

/* CARTE */
#map {
    width: 100%;
    aspect-ratio: 16/9;
}

:root {
    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

.leaflet-tile-container {
    /*filter: invert(1) ;*/
}


/* GALERIES */

#galerie {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    margin: 10vh auto;
    justify-content: center;
}

#galerie h3.titre {
    flex: 0 0 100%;
    margin: 2em 0;
}

.thumb {
    width: 20vw;
    height: 15vw;
    float: left;
    margin: 10px 10px 0px 0px;
    border-radius: 4px;
    transition: .4s all ease;
    overflow: hidden;
}

.thumb img {
    opacity: 0;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
    .thumb {
        width: 40vw;
        height: 30vw;
    }
}


/*  PARALLAXE
******************************************************************************************/

#parallax-container {

    display: block;
    width: 100vw;
    aspect-ratio: 16/9;
}

#parallax-container > div {
    background-size: contain;
    position: fixed;
    top: 0;
    background-position: center;
    transform: translateY(0px);
    width: 100vw;
    aspect-ratio: 16/9;
}

.slice-1 {
    margin-top: 10%;
    z-index: 500;
}

.slice-2 {
    margin-top: 5%;
    z-index: 400;
}

.slice-3 {
    margin-top: 6%;
    z-index: 300;
}

.slice {
    pointer-events: none
}

#ecran {
    position: fixed;
    top: calc(22vw / 1.7);
    left: 10vw;
    width: 70vw;
    height: 50vh;
    display: flex;
    justify-content: space-around;
    z-index: 200;
}

#ecran .poster img {
    width: 17vw;
    /*height: 50vh;*/
}


.slice-4 {
    /*margin-top: 600%;*/
    z-index: 100;
}

#content {
    position: relative;
    min-height: 100vh;
    background: black;
    z-index: 10000;
    padding-top: 2em;

}

#fond {
    /*transition: .5s ease background-image;*/
    z-index: 2
}

.slice, #ecran {
    -webkit-transform: translateZ(0px) scale(1);
    transform: translateZ(0) scale(1);
}

#footer {
    color:white;
    text-align: center;
    margin: 5em auto;
}

#footer a {
    color: rgba(253, 241, 0, 1);
}

#credits {
    font-size: 70%;
    padding: 5em ;
    text-align: right;

    }

#credits, #credits a {
    color:grey
    }