@font-face {
    font-family:'Wavehaus' ;
    src: url(../font/Wavehaus-95SemiBold.otf);
}
*{
    padding:0 ;
    margin:0 ;
    color:#fff ;
    font-family:'Wavehaus', sans-serif ;
}
body{
    background-color:#25262A ;
    overflow-x:hidden ;
    max-width:1200px ;
    margin:auto ;
}
header{
    display:flex ;
    justify-content:space-between ;
    align-items:center ;
    position:relative ;
    padding:15px 30px ;
}
header img{
    width: 130px ;
}
header nav{
    display:flex ;
    flex-direction:column ;
    text-align:left ;
    position:fixed ;
    top:0 ;
    left:-70vw ;
    transition:250ms ease-out ;
    height:100vh ;
    width:70vw ;
    background-color:#212225 ;
    padding-top:50px ;
}
header nav a{
    text-decoration:none ;
    text-transform:uppercase ;
    font-size:1.7em ;
    margin-top:25px ;
    margin-left:15px ;
    transition:200ms ease-out ;
}
header nav a:hover, header nav a:active{
    color:#F21E36 ;
}
header nav a.active_link{
    color:#F21E36 ;
}
header nav a#tickets_link{
    margin-top:100px ;
    padding:7px ;
    font-size:2em ;
    margin-left:0 ;
    text-align:center ;
    position:relative ;
    background-image:url(../img/pictos/tickets.svg) ;
    background-repeat:no-repeat ;
    background-position:35% center ;
}
header #burger div{
    height:3px ;
    width:50px ;
    background-color:#fff ;
    margin:15px 0 ;
    transition:250ms ease-out ;
}
header.active_nav #burger #part_cross_1{
    transform:translateY(9px) rotate(45deg) ;
}
header.active_nav #burger #part_cross_2{
    transform:translateY(-9px) rotate(-45deg) ;
}
header.active_nav nav{
    left:0 ;
}

/*--Main--*/

#accueil #herobanner{
    padding-top:50px ;
}
#accueil #herobanner img{
    width:90% ;
    max-width:500px ;
    display:block ;
    margin:0 auto 50px ;
}
#accueil #herobanner #container_main{
    display:flex ;
    flex-direction:column ;
    align-items:flex-start ;
    display:block ;
    width:90% ;
    max-width:500px ;
    margin:auto ;
}
#accueil #herobanner audio{
    display:none ;
}

#accueil #herobanner #container_main #player{
    display:block ;
    margin:0 auto 25px ;
    width:300px ;
}
#accueil #herobanner #container_main #player p{
    font-size:1em ;
}
#accueil #herobanner #container_main #player #titre{
    text-align:center ;
}
#accueil #herobanner #container_main #player #time, #accueil #herobanner #container_main #player #controls{
    display:flex ;
    align-items:center ;
    justify-content:space-around ;
}
#accueil #herobanner #container_main #player #time #timeline{
    position:relative ;
    z-index:-1 ;
}
#accueil #herobanner #container_main #player #time #timeline #timeline_global{
    height:5px ;
    width:200px ;
    background-color:rgba(255, 255, 255, .3) ;
}
#accueil #herobanner #container_main #player #time #timeline #time_passed{
    height:5px ;
    position:absolute ;
    background-color:#F21E36 ;
    top:0 ;
    left:0 ;
    bottom:0 ;
    right:100% ;
    transition:200ms ease-out ;
}
#accueil #herobanner #container_main #player #controls img{
    height:30px ;
    transition:200ms ease-out ;
    cursor:pointer ;
}
#accueil #herobanner #container_main #player #controls img:hover{
    opacity:.7 ;
}

#accueil #herobanner h2{
    text-transform:uppercase ;
    font-size:45px ;
    line-height:35px ;
    margin-bottom:25px ;
}
#accueil #herobanner h2 span{
    color:#F21E36 ;
}
#accueil #herobanner #icons, #infos #icons{
    display:flex ;
    justify-content:center ;
}
#accueil #herobanner #icons img, #infos #icons img{
    height:40px ;
    margin:0 15px ;
    width:unset ;
    filter: brightness(100);
    z-index:-1 ;
    transition:200ms ease-out ;
    cursor:pointer ;
}
#accueil #herobanner #icons img:hover, #infos #icons img:hover{
    filter: brightness(1);
}
#accueil #herobanner #container_main h3{
    font-size:30px ;
    margin-top:50px ;
    padding:30px ;
    text-transform:uppercase ;
    background-image:url(../img/pictos/entoure.svg) ;
    background-repeat:no-repeat ;
    background-position:center center ;
    text-align:center ;
    cursor:pointer ;
    transition:200ms ease-out ;
}
#accueil #herobanner #container_main h3:hover{
    color:#F21E36 ;
}

#accueil #section2{
    width:90% ;
    max-width:500px ;
    margin:100px auto 50px ;
}
#accueil #section2 h2{
    text-transform:uppercase ;
    font-size:45px ;
    line-height:35px ;
    margin-bottom:25px ;
}
#accueil #section2 h2 span{
    color:#F21E36 ;
}
#accueil #section2 #container_section2{
    display:flex ;
    flex-flow:row wrap ;
    align-items:center ;
    justify-content:center ;
}
#accueil #section2 #container_section2 .img_txt{
    display:flex ;
    flex-direction:column ;
    align-items:center ;
    margin:0 15px 20px ;
}
#accueil #section2 #container_section2 .img_txt img{
    width:80% ;
    max-width:260px ;
    margin-bottom:15px ;
}
#accueil #section2 #container_section2 .img_txt p{
    font-size:1.05em ;
    text-align:center ;
}
#accueil #section2 #container_section2 .img_txt p span{
    color:#F21E36 ;
}




/*--Disco.html--*/

#disco main{
    margin-top:50px ;
}
#disco span{
    color:#F21E36 ;
}
#disco .base_container{
    margin:0 auto ;
    width:90% ;
    max-width:350px ;
    display:flex ;
    align-items:center ;
    flex-direction:column ;
}
#disco .base_container img{
    width:80% ;
    max-width:260px ;
}
#disco .base_container h2{
    text-align:center ;
    font-size:1.7em ;
    margin-bottom:25px ;
}
#disco .base_container ol{
    list-style:none ;
    counter-reset:li ;
}
#disco .base_container ol li{
    counter-increment:li ;
}
#disco .base_container ol li::before {content:'.' counter(li);
    color: #F21E36;
    display: inline-block;
    width: 1em;
    margin-left: -1em ;
    text-align: right; 
    direction: rtl;
}
#disco .base_container h3{
    margin-top:30px ;
    padding:30px ;
    font-size:1.5em ;
    text-align:center ;
    text-transform:uppercase ;
    background-image:url(../img/pictos/entoure.svg) ;
    background-repeat:no-repeat ;
    background-position:center center ;
}


/*--Infos.html--*/

#infos main{
    margin:50px auto 50px ;
    width:90% ;
    max-width:550px ;
}
#infos #main_img{
    width:90% ;
    max-width:500px ;
    display:block ;
    margin:0 auto 50px ;
}
#infos h2{
    font-size:1.6em ;
    margin-bottom:50px ;
}
#infos h2 span{
    color:#F21E36 ;
}
#infos form{
    width:90% ;
    max-width:300px ;
    margin:0 auto ;
}
#infos form input, #infos form textarea{
    margin:10px 0 ;
    padding:2.5px 0 ;
    font-size:1.1em ;
    background-color:transparent ;
    outline:none ;
    border:none ;
    border-bottom:1px solid #fff ; ;
}
#infos form input::placeholder, #infos form textarea::placeholder{
    color:#fff ;
    opacity:1 ;
    transition:200ms ease-out ;
}
#infos form input:focus::placeholder, #infos form textarea:focus::placeholder{
    opacity:.3 ;
}
#infos form #name, #infos form #surname{
    width:47% ;
}
#infos form #name{
    margin-right:4% ;
}
#infos form #mail{
    width:100% ;
}
#infos form textarea{
    width:100% ;
    display:flex ;
    flex-direction:column ;
    align-items:flex-end ;
}
#infos form #submit{
    width:100% ;
    padding:50px 0 ;
    font-size:1.4em ;
    background-image:url(../img/pictos/entoure.svg) ;
    background-repeat:no-repeat ;
    background-position:center center ;
    border:none ;
    text-transform:uppercase ;
    transition:200ms ease-out ;
    cursor:pointer ;
}
#infos form #submit:hover{
    color:#F21E36 ;
}


/*--En Tournee.html--*/

.main_T_I{
    margin-top:50px ;
}
.imggriup{
    width: 35%;
    max-width:260px ;
}

.cases{
    display: flex;
    flex-direction:column ;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
    width:90% ;
    max-width:500px ;
    text-align:center ;
}

.petitstextes{
    font-size: 1em;
    margin-bottom: 1vw;
    margin-left: 1vw;
}

.reservation{
    text-transform:uppercase ;
    font-size: 1em;
    text-decoration:none ;
}

.boutonagn{
color: white;
background-image:url(../img/pictos/entoure.svg) ;
background-repeat: no-repeat;
background-position:center center;
font-size: 1.5em;
padding-top: 25px;
padding-bottom: 25px;
margin-top: 20px;
margin-bottom: 30px;
text-align: center;
}


.bienbien{
    width: 55%;
}

.rouge{
    color: #F21E36;
}

#texteshauts{
    font-size:2.5em ;
}

/*--Media Queries--*/

@media screen and (min-width:1024px){
    header nav{
        position:initial ;
        background-color:transparent ;
        flex-direction:row ;
        justify-content:flex-end ;
        align-items:center ;
        height:unset ;
        padding:0 ;
    }
    header nav a{
        font-size:1.3em ;
        margin-top:0 ;
    }
    header nav a#tickets_link{
        margin-top:0 ;
        padding:7px ;
        margin-left:50px ;
        font-size:1.5em ;
        background-image:url(../img/pictos/tickets.svg) ;
        background-repeat:no-repeat ;
        background-position:0% center ;
    }
    header #burger{
        display:none ;
    }

    /*--Main--*/

    #accueil #herobanner{
        display:flex ;
        align-items:center ;
        justify-content:space-around ;
        padding-top:100px ;
    }
    #accueil #herobanner img{
        margin:0 0 50px ;
        max-width:60% ;
    }
    #accueil #herobanner #container_main #player #current_time{
        transform:translateX(-10px) ;
    }
    #accueil #herobanner #container_main #player #total_time{
        transform:translateX(10px) ;
    }
    #accueil #herobanner #container_main{
        margin:0 0 50px ;
        width:unset
    }
    #accueil #herobanner #container_main #player #time #timeline #timeline_global{
        width:270px ;
    }

    #accueil #section2{
        max-width:unset ;
    }

    /*--Disco--*/

    #disco .base_container{
        margin:0 auto ;
        width:90% ;
        max-width:unset ;
        display:flex ;
        align-items:center ;
        flex-direction:row ;
    }
    #disco .base_container.flex_reverse{
        flex-direction:row-reverse ;
    }
    #disco .base_container img{
        width:80% ;
        max-width:400px ;
    }
    #disco .base_container h2{
        text-align:left ;
        font-size:2em ;
        margin-bottom:25px ;
    }
    #disco .base_container.flex_reverse h2{
        text-align:right ;
    }
    #disco .base_container .little_container .baby_container{
        display:flex ;
    }
    #disco .base_container.flex_reverse .baby_container{
        flex-direction:row-reverse ;
    }
    #disco .base_container h3{
        margin:0 50px 0 ;
        padding:80px ;
        font-size:1.7em ;
        background-size:90% ;
        transition:200ms ease-out ;
        cursor:pointer ;
        display:flex ;
        align-self:center ;
    }
    #disco .base_container h3:hover{
        color:#F21E36 ;
    }

    /*--Infos.html--*/

    #infos main{
        margin-top:150px ;
        display:flex ;
        flex-direction:row-reverse ;
        max-width:unset ;
        width:95% ;
    }
    #infos h2{
        font-size:2em ;
    }
    #infos #main_img{
        max-width:600px ;
    }
    #infos main form{
        margin:0 ;
        max-width:unset ;
    }
    #infos form #submit{
        width:70% ;
        font-size:1.6em ;
    }
    #infos #icons{
        justify-content:space-around ;
        width:70% ;
    }

    /*--En tournee.html--*/

    .main_T_I{
        margin-top:100px ;
        display: flex;
        flex-flow:row wrap ;
        align-items: center;
        justify-content: center;
    }
    .main_T_I a{
        transition:200ms ease-out ;
        text-transform:uppercase ;
    }
    .main_T_I a:hover{
        color:#F21E36 ;
    }
    
    .imggriup{
        width: 40%;
    }
    
    .cases{
        flex-direction:row ;
        margin:10px 5px ;
    }
    
    .petitstextes{
        font-size: 1.3em;
        margin-bottom: 1vw;
        margin-left: 1vw;
    }
    
    .reservation{
    
        font-size: 1.5em;
    }
    
    .boutonagn{
    font-size: 1em;
    }
    
    
    .bienbien{
        width: 55%;
    }
    
    .rouge{
        color: #F21E36;
    }
}