*{
    box-sizing: border-box;
}
html{
    font-family: Josafronde;
    font-size:8px;
}
body{
    line-height: 4rem;
    font-size: 3.5rem;
}
html, body{
    margin:0;
    padding:0 1rem;   
}

span.highlight{
    background:var(--color-second);
    color:white;
}

h1, h2, h3, h4, h5, h6{
    margin:0;
    padding:0;
    font-weight:normal;
}
h2, h3{
    line-height:4rem;
    font-size:3.5rem;
    
}
ul, li{
    list-style: none;
    padding:0;
    margin:0;
}
p{
    margin:0 0 2rem 0;
}
strong, b{
    font-weight:normal;
    font-family:DinDong;
}

blockquote{
    padding-left: 2rem;
    margin-left: 0;
    border-left: 2px solid var(--color-second);
}
a{
    color:var(--color-second);
}

select{
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0 2rem;
  border:2px solid var(--color-second);
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  
}

/*HEADER*/
header{
    position:fixed;
    top:0;
    left:0;
    height:calc(50vh + 9rem);
    width:100%;
    padding:0 2rem;
    z-index:1000;
    background:white;
    font-size:2.6rem;
}
.header-gallery{
    position:absolute;
    top:0;
    left:0;
    height:calc(100% - 9rem);
    width:100%;
    background:white;
    overflow:hidden;
}
    .header-gallery .splide{
        height:calc(50vh - 9rem);
        position:absolute;
        z-index:100;
        width:100%;
        top:0;
        left:0;
        margin-top:calc(9rem + 2px);
    }
    .header-gallery .splide__slide{
        display:flex;
        height:calc(50vh - 9rem);
        justify-content: center;
        align-items: center;
        cursor:grab;
        padding:0 1rem;
    }
        .header-gallery .splide__slide .img-container{
            display:flex;
            justify-content: center;
            
        }

            .header-gallery .splide__slide img{
                
                max-width: calc(100% - 3rem);
                max-height: 100%;
                height:auto;
                width:auto;
                align-self:flex-start;
                margin:0;
            }
           
            .header-gallery .splide__slide p.caption{
                margin-top:1rem;
                text-align:center;
                height: 2rem;
                font-size: 1.5rem;
                line-height: 1em;
                margin-bottom: 3rem;
                width: 100%;
                text-align: center;
                width: 3rem;

                white-space: nowrap;
                transform: rotate(90deg);
            }

    .logo{
    position:relative;
    
    height:100%;
    font-size:10rem;
        
    margin-left:1rem;
    } 
    .logo span{
        position:relative;
        display:inline-block;
        letter-spacing: -0.5rem;
        line-height:0.9em;
        text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black; 
        -webkit-text-stroke: 1px black;
        text-stroke: 1px black;      
        color: white;
        z-index:100000;
    }
   
  
.header-nav{
    position:absolute;
    bottom:0;
    width:calc(100% - 2rem);
    height:9rem;
}
div.socials{
    
    height:4rem;
    text-align:right;
    position:fixed;
    right:2rem;
    top:1rem;
    z-index:200000;
}
div.socials a{
    display: inline-block;
    height: 100%;
    padding-top:2px;
}
div.socials img{
    height:100%;
    width:auto;
}
.mobile-nav-toggle{
    position:absolute;
    top:1rem;
    right:2rem;
    cursor:pointer;
    width:4rem;
    height:4rem;
    background:url('../images/menu.svg');
    background-size:100% 100%;
    display:none;
}
.mobile-nav-toggle.active{
    background:url('../images/close.svg');
    background-repeat: no-repeat;
}
nav.topnav{
    width:calc(100% - 2rem);
    z-index: 1000;
    position: relative;

}
    nav.topnav ul{
        display:flex;
        width:100%;
        height:6rem;
        margin-top:3rem;
        font-family:DinDong;
    }
        nav.topnav ul li{
            width:50%;
            text-align:center;
            
            text-transform: uppercase;
            
            padding:1rem 0;

        }
        nav.topnav ul li.active, nav.topnav ul li:hover{
            background:white;
            border-top:1px solid black; 
            border-bottom:1px solid black;
        }

    nav.topnav ul li ul li.active:first-child, nav.topnav ul li ul li:first-child:hover,
    nav.topnav ul li ul li.active+li:hover{
        border-top:0;
    }
    
          
            nav.topnav ul li a{
                text-decoration: none;
                color:black;
                width:100%;
                display:block;
            }
            nav.topnav ul li ul{
                display:none;
            }
            nav.topnav ul li ul li{
                width:100%;
                background:#f8f7f5;
            }
            nav.topnav ul li:hover ul{
                display:block;
                margin-top:1rem;
            }

/*MAIN*/
main{
    margin-top:calc(50vh + 18rem);
    min-height:100vh;
    padding:6rem 0 10rem 0;
}
body.tmpl-season main{
    
}


/*AGENDA + EVENTS*/
div.header h2{
    text-transform:uppercase; 
}
h2.event-artists{
    color:white;
    text-shadow: 0 0 1px black, 0 0 1px black, 0 0 0px black, 0 0 0px black;
}
/*EDITO*/
.edito{
    width:100%;
}
/*AGENDA*/
section.events{
    display:flex;
    flex-wrap: wrap;
    margin:2rem 0 0 -2rem;
}
section.events a.event{
    display:none;
}
section.events a.event.active{
    display:block;
}
a.event h2{
    background:none;
    line-height:4rem;
    font-size:3.5rem;
    text-align:left;
    padding:0;
}
a.event{
    width:calc(25% - 2rem);
    margin-left:2rem;
    margin-bottom:2rem;
    display:block;
    text-decoration: none;
    background:white;
    color:black;
    height:70vh;
    position:relative;
    overflow:hidden;
    
}
a.event::-webkit-scrollbar {
    display: none;
  }
a.event img{
    width:100%;
    height:auto;
}
a.event .image-placeholder{
    width:100%;
    height:50vh;
    background:var(--color-first);
}
a.event .header{
    //padding:1rem;
}
a.event .header.hidden{
    visibility:hidden;
}
a.event .header .filters-list{
    flex-wrap:wrap;
    justify-content:left;
}

.tmpl-season .events .filters-list.filters-accessibilite-et-publics,
.tmpl-home .filters-list.filters-accessibilite-et-publics{
    display:none;
}
.tmpl-season .filters-list.filters-precision-de-type,
.tmpl-home .filters-list.filters-precision-de-type{
    display:none;
}


/*AGENDA*/
.agenda{
    background:white;
    font-size: 2.6rem;
}
.agenda-dates{
    display:flex;
    margin-right:2rem;
    padding-top:2rem;
}
.month-nav{
    display:flex;
    margin-right:2rem;
}
.agenda-dates h4{
    padding:0 0;
    text-transform:uppercase;
    white-space:nowrap;
}
.agenda-dates ul{
    display: flex;
    align-items: center;
    flex: 100% 1 1;
    

}
.agenda-arrows a{
    text-decoration: none;
}
.agenda-arrows.agenda-next{
    margin-left:2rem;
}
.agenda-arrows.agenda-prev{
    margin-right:2rem;
}

.agenda-dates ul li{
    flex: 100% 1 1;
    
}
.agenda-dates ul li span{
    position:relative;
}
.agenda-dates ul li span.current{
    background:var(--color-second);
    display: inline-block;
    padding:0 0.5rem;

}

.agenda-dates ul li span.with-events{
    cursor:pointer;
}
.agenda-dates ul li span.with-events:after{
    content:'•';
    color:var(--color-second);
    font-size: 0.8em;
    position: relative;
    top: 3px;

}

.agenda-dates ul li span.with-events.current:after{
    content:'•';
    color:white;
    font-size: 0.8em;
    position: relative;
    top: 3px;
}
.agenda-result{
    display:none;
    border-bottom: 1px solid var(--color-second);
    margin-right:2rem;
}
.agenda-result.current{
    display:flex;
}

.current-date{
    padding-right:2rem;
}

.show{
   padding:0 0.5rem;
   color:var(--color-second);
    text-transform:uppercase;
}
.show a{
    text-decoration: none;
}
/*FILTERS*/
.filters{
   padding:1rem 0;
   background:white;
   display:flex;
   flex-wrap: wrap;
}
.filters.active .toggle-filters{
    background:url('../images/close.svg');
    background-size: contain;
}

.toggle-filters{
    width:4rem;
    height:4rem;
    background:url('../images/magnifier.svg');
    background-size: contain;
    cursor:pointer;

    margin-right:2rem;
    display:none;
}


.time-filter{
   
}

.tmpl-season span.filter{
    background-color:var(--color-first);
}

.filters .filters-lists{
    margin-right:2rem;
    margin-top:2rem;
}
.filters.active .filters-lists{
    display: flex;
justify-content: right;
flex-direction: row;
}


.filters-lists{
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    flex-direction:row-reverse;
}

ul.filters-list{
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    margin-bottom:2px;
    
    
}
    .filters ul li{
        cursor:pointer;
    }

ul.filters-list li, span.filter{
    background-size: 100% 100%;
    font-size:1.5rem;

    line-height:2.5rem;
    text-transform:lowercase;
    color:white;
    background-color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0 1px white, 0 0 1px white, 0 0 0px white, 0 0 0px white;
    
}
ul.filters-list li.active{
    background-color:var(--color-second);
}

.tmpl-season ul.filters-list li:hover{
    background-color: transparent;
   
    color:black;

    
}


span.filter{
    display:inline-block;
    text-indent:0;
    position: relative;
    top: -0.75rem;
}


ul.filters-categories-principales li, span.filter.main{
    background-color: white;
    color: black;
    padding: 1rem;
    border-radius: 50%;
    border: 1px solid black;
   margin-left:1rem;
}
.tmpl-season ul.filters-categories-principales li:hover{
    background-color: black;
    color:white;
}
ul.filters-categories-principales li.active{
    background-color: white;
    color: black;
    border-color:var(--color-second);
}
ul.filters-precision-de-type li, span.filter.more{
    background:black;
    color:white;
    padding:2rem 2rem 0 2rem;
    margin-right:2px;
}

ul.filters-accessibilite-et-publics li, span.filter.access{
    
    -webkit-mask: url('../images/triangle-fill.svg');
    mask: url('../images/triangle-fill.svg');
    -webkit-mask-size:100% 100%;
    mask-size:  100% 100%;

    padding:2rem 4em 0 4em;
}

.tmpl-season ul.filters-accessibilite-et-publics li:hover{
    -webkit-mask:none;
    mask:none;
    background-image:url('../images/triangle-stroke.svg');
}

ul.filters-formes-devenements li, span.filter.type{
    -webkit-mask: url('../images/triangle2-fill.svg');
    mask: url('../images/triangle2-fill.svg');
    -webkit-mask-size:100% 100%;
    mask-size:  100% 100%;
    
    
    padding:2rem 0.5em 0 6em;
    
    
}
.tmpl-season ul.filters-formes-devenements li:hover{ 
    -webkit-mask:none;
    mask:none;
    background-image:url('../images/triangle2-stroke.svg');
}


ul.filters-ensembles-devenements li, span.filter.group{
    -webkit-mask: url('../images/dome-fill.svg');
    mask: url('../images/dome-fill.svg');
    -webkit-mask-size:100% 100%;
    mask-size:  100% 100%;
    
    
    padding:2rem 2em 0 2em;
}

.tmpl-season ul.filters-ensembles-devenements li:hover{
    -webkit-mask:none;
    mask:none;
    background-image:url('../images/dome-stroke.svg');
}

/*TMPL EVENT DETAIL*/
.event-detail {
    display:flex;
    flex-wrap:wrap;
}
.event-detail h2{
    font-size:5rem;
    line-height:6rem;
}

.event-detail div.header{
    width:calc(25%);
    padding-right:1rem;
    
}
.event-detail div.header div.event-practicals{
    font-family:'DinDong';
    font-size:2.5rem;
    line-height:3rem;
    margin-top:2rem;
}
h3.timetable-title{
    font-family:DinDong;
    font-size: 2.5rem;
    line-height: 3rem;
    background: var(--color-second-alpha);
    text-transform:lowercase;
    padding:0.5rem;
}
.event-detail div.header div.timetable{
    font-size: 2.5rem;
    line-height: 3rem;
    font-family: 'DinDong';
    background: var(--color-second-alpha);
    padding: 0.5rem;
    display:flex;
    flex-wrap:wrap;
}
div.timetable .week{
    flex:50%;
    margin-bottom:3rem;
}
div.timetable p{
    margin:0;
    white-space: nowrap;
}

.event-detail div.blocs{
    width:75%;
    
}
.event-detail div.bloc{
    display:flex;
    flex-wrap:wrap;
    width:100%;
}
.event-detail div.bloc>div{
    width:50%;
    padding:0 2rem;
}

.text-intro{
    font-family:DinDong;
    margin-bottom:2rem;
}
a.ticket-link{
    text-decoration:none;
    display:block;
    margin:2rem 0;
    font-family:DinDong;
    font-size: 2.5rem;
    line-height: 3rem;
}

.bloc h2{
    margin-top:2rem;
}

.text-credits{
    margin-left:25%;
    width:25%;
    font-family:'DinDong';
    padding:0 1rem;
    font-size:2.5rem;
    line-height:3rem;
    margin-top:2rem;
}
.text-credits strong, .text-credits b{
    text-decoration:underline;
}
/*GALLERIES*/
.splide{
    margin-bottom:2rem;
}
.splide__slide iframe{
    width:100%;
    display:block;
    margin:0 auto 4rem auto;
}
.splide__pagination__page{
    border:1px solid black;
    background:white;
}
.splide__slide .img-container{
    width:100%;
    height:100%;

}
.splide__slide img{
    width:100%;
    height:auto;
    display:block;
    margin:0 auto 1rem auto;
}

.splide__slide p.caption{
   
    height:2rem;
    font-size:1.5rem;
    line-height:1em;
    margin-bottom:3rem;
    width:100%;

    text-align:center;
}
.splide__pagination{
    bottom:0;
}

/*INFO BLOCKS*/
.info-block .header-img{
    width:20%;
    margin-right:2rem;
    float:left;
}

.info-blocks{
    display:flex;
    margin-left:-4rem;
    flex-wrap:wrap;
}
.info-block{
    width:calc(50% - 4rem);
    margin-left:4rem;
    margin-bottom:4rem;
}

.info-block h2{
    margin-left:4rem;
    font-size:5rem;
    line-height:6rem;
    margin-bottom:2rem;
}
.info-block>div{
    margin-bottom:2rem;
}

ul.logos{
    display:flex;
    flex-wrap:wrap;
}
ul.logos li{
    width:100px;
    height:100px;
    justify-content: center;
    align-items: center;
    margin: 1rem 2rem 0 0;
    display:flex;

    
}
ul.logos li img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
}

div.map{
    width:100%;
    height:50vh;
}
.info-block img{
    width:100%;
}

.text-body p{

}
.text-body h2{
    margin-left:4rem;
    margin-bottom:2rem;
}
.text-body li{
    margin-bottom:2rem;
}
.text-body p:first-child, .text-body h2+p{
    text-indent: 0;
}

ul.files{
    margin-bottom:2rem;
}
ul.files img{
    width:2rem;
}

form input[type="text"], form input[type="email"]{
    display: block;
margin-bottom: 2rem;
border: 1px solid var(--color-second);
height: 4rem;
padding: 1rem;

color: black;
width: 100%;
}
form input[type="submit"]{
    padding: 1rem;
}
form input{
    font-family: DinDong;
    border: 1px solid var(--color-second);
    background:white;
}
.text-body form p{
    text-indent:0;
}
form span{
    font-family:DinDong;
}
/*HOME BLOCKS*/
.home-blocks{
    margin-left:-2rem;
    width:calc(100% + 2rem);
}
.home-block{
    width:calc(25% - 2rem);
    margin-left:2rem;
    margin-bottom:2rem;
    align-self: flex-start;

}


.home-block.external-link{
    background:var(--color-second);
}
.home-block.message{
    background:var(--color-second);
}

.home-block.linked-page{
    background:var(--color-second);
}

.home-block a{
    color:black;
    text-decoration:none;
}
.home-block a:not(.event) h2, .home-block>h2{
    text-transform:uppercase;
    margin:2rem;
    text-align:center;
    
}
.home-block a:not(.event) h3{
    margin:2rem;
    text-transform:uppercase;
}
.home-block a.event{
    margin:0;
}

.home-block a.event{
    width:100%;
}

/*PROJECT*/
.project-detail h2{
    
    font-size: 5rem;
    line-height: 6rem;
    
}
.project-detail{
    margin-left:-2rem;
    
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
}
.project-detail>div{
    margin-left:2rem;
    margin-bottom:2rem;
    width:calc(25% - 2rem);
   
}
.project-detail a.event{
    width:100%;
}
.project-detail a.event{
    margin-left:0;
} 
.project-detail .project-header{
    width: calc(25% - 2rem);

    /*background: var(--color-second);*/
    padding: 2rem;
    height:auto;
    font-size: 2.5rem;
line-height: 3rem;
}

.event-archive {

    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-second);
    color: black;
    text-decoration: none;
    padding: 2rem;
    transition: background-color 0.1s linear, color 0.1s linear;
    display:none;

}
.event-archive.active.time-active{
    display:flex;
}
.event-archive:hover{
    color:white;
    background-color:var(--color-second);
}
.event-archive h2 {
    width: 33%;
    padding:0 2rem;
}
.event-archive ul.filters-lists{
    width: 100%;
    
}


footer{
    position:fixed;
    bottom:0;
    left:0;
    padding:0 2rem;
    height:4rem;
    background:white;
    width:100%;
    font-size:2rem;
    line-height:4rem;
    border-top:1px solid var(--color-first);
    white-space: nowrap;
    overflow:auto;
    display:flex;
    overflow-y: hidden;
}
footer span:last-child{
    padding-right:2rem;
}

/*MEDIA QUERIES*/
@media screen and (max-width:1800px){
    html{
        font-size:7px;
    }
}

@media screen and (max-width:1600px){
    html{
        font-size:6px;
    }
}

@media screen and (max-width:1200px){
    /*HOME*/
   
    .home-block, a.event, .project-detail > div{
        width:calc(33% - 2rem);
    }

    /*EVENT DETAIL*/
    .event-detail div.blocs, .event-detail div.header, .text-credits{
        width:50%;
    }
    .text-credits{
        margin-left:0;
    }
    .event-detail div.bloc > div{
        width:100%;
    }

}
.error-message{
    text-align:center;
}

@media screen and (max-width:800px){
     /*HOME*/
   
     .home-block, a.event, .project-detail > div{
        width:calc(50% - 2rem);
    }
    .info-block{
        width:100%;
        padding-right:2rem;
    }
    .header-img{
        width:50%;
    }
    .filters .filters-lists{
        display:none;
    }
    /*EVENT DETAIL*/
    .event-detail div.blocs, .event-detail div.header{
        width:100%;
    } 
    .toggle-filters{
    display:inline-block;
}
    /*MENU*/ 
    nav.topnav{
        display:none;
        background:white;
        height:calc(100vh - 13rem);
        font-family:DinDong;
        overflow:scroll;
    }
    nav.topnav.active{
        display:block;
    }
    
    .mobile-nav-toggle{
        display:block;  
        z-index: 10000;
    }
    .mobile-nav-toggle.active + .filters{
        display:none;
    }
    nav.topnav ul{
        height:auto;
    }
    nav.topnav ul li.active, nav.topnav ul li:hover{
        background:white;
        border:0
      
    }

    nav.topnav ul li>a{
        padding-left:1rem;
    }
    nav.topnav>ul{
        display:block;
        padding-bottom:6rem;
        margin-top: 6rem;
    }
    nav.topnav ul li{
        width:calc(100% - 2rem);
        text-align:left;
        padding: 1rem 0 0 0;
    }
    nav.topnav ul li ul, nav.topnav ul li:hover ul{
        display:block;
        margin-top:0; 
    }
    nav.topnav ul li ul li{
        padding-left:4rem;
        background:white;
    }
    .event-archive h2{
        width:100%;
    }

    .agenda-dates{
        display:block;
    }
    .agenda-dates ul{

        flex-wrap: wrap;
    }
    .agenda-dates ul li{
        flex-basis:10%;
    }

    main{
        padding:0 0 10rem 0;
        margin-top:calc(50vh + 12rem);
    }
}
@media screen and (max-width:600px){
    /*HOME*/
  
    .home-block, a.event, .project-detail > div, .project-detail .project-header,  .text-credits{
       width:calc(100% - 2rem);
   }

}