@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap');
.fullscreen-div {
  display: none;        
  opacity: 0;
  transition: opacity 0.5s ease;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
.curtain {position: fixed; top:0; right:0; background-color: #000; opacity: 1; width: 100%; height: 100vh; 
    animation: curtain-off .5s; animation-delay: .5s;z-index:99; animation-fill-mode: forwards;}
    @keyframes curtain-off {
        0% {opacity:1;width:100vw}
        100% {opacity:1;width:0}
    }
:root {
    --ff: 'Anton', sans-serif;
    --ffsnd : 'Work Sans', sans-serif;
    --prim:#000;
    --snd:#bcbcbc;
    --thr:rgb(246, 226, 129);
    --light:#FFF;
    --dark:rgba(143, 143, 143, 0.333);
    --pad:3vh;
}

.edito {text-align:center;}
.edito button {  background-color: var(--thr);
    color: var(--prim);
    border: none;
    margin-left:var(--pad);
    padding: 10px 20px;
    cursor: pointer;
    font-size:1.5em;
    font-family: var(--ff);
    text-transform:uppercase;
}

.edito button:hover {  background-color: var(--light);
    color: var(--prim);
}


.legende {font-size: 70%; text-align: right; margin-top:.5rem}
.edito h4 {line-height: 140%;}
a {
    color: inherit;
}
body {
    background: var(--prim);
    background-image: url("images/fond2.jpg");
    background-size: cover;
    background-attachment:fixed;
    background-position: center;
    color: var(--snd);
    font-size: 130%;
    font-family: var(--ffsnd);
}

h1, h2, h3 {
    font-family: var(--ff);
    color:var(--thr);
}

h1 {
    position: absolute;
    top:0; left:0;
    opacity:0;
    z-index:1
}

p {
    line-height: 150%;
}

h3 {
    font-size: 12vh;
    line-height: 100%;
    letter-spacing: 0.175vh;
}

h4 {
    font-family: var(--ff);
    font-size: 3.5vh;
    line-height: 100%;
    letter-spacing: 0.175vh;
}
h5, h6 {display: inline-block;}


/* NAVIGATION ///////////////////////////// */

nav {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    width:100%;
    z-index:98;
}

#menu {
    background-color: rgba(0, 0, 0, 1);
    border: 0px solid var(--snd);
    padding: 0 var(--pad) ;
    margin:calc(var(--pad) / 4) var(--pad) calc(var(--pad) / 2) var(--pad);
}
#menu ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 120%;
    font-family: var(--ff);
    letter-spacing: 0.175vh;
    justify-content: space-between;
}
#menu li {
    padding: calc(var(--pad) / 2) var(--pad);
    transition: .3s;
}

#menu li:hover {
    transition: .5s;
    background-color: var(--thr);
    color:var(--prim);
}

nav header {display:grid; grid-template-columns: 1fr 1fr; font-size: 50%;}
#logo figure {padding: calc(var(--pad) / 2) var(--pad);}
#baseline figure {padding: calc(var(--pad) / 2) var(--pad) 0 0;}
#logo img {max-width: 320px; height: auto;}
#baseline img {max-width: 400px; height: auto;}
#ham {display: none;}
label{
    display:flex;
     flex-direction:column;
     width:70px;
     cursor:pointer;
   }
   
   label span{
     background: var(--thr);
     border-radius:10px;
     height:7px;
     margin: 7px 0;
     transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
   }
   
   
   span:nth-of-type(1){
     width:50%;
     
   }
   
   span:nth-of-type(2){
     width:100%;
   }
   
   
   span:nth-of-type(3){
     width:75%;
    
   }
   
   
   input[type="checkbox"]{
     display:none;
   }
   
   
   input[type="checkbox"]:checked ~ span:nth-of-type(1){
     transform-origin:bottom;
     transform:rotatez(45deg) translate(8px,0px)
   }
   
   
   input[type="checkbox"]:checked ~ span:nth-of-type(2){
     
     transform-origin:top;
     transform:rotatez(-45deg)
   }
   
   
   input[type="checkbox"]:checked ~ span:nth-of-type(3){
     
     transform-origin:bottom;
     width:50%;
     transform: translate(30px,-11px) rotatez(45deg);
   
   }
   #animatedmenu {
    width: 100vw;
    height: auto;
    background-color: var(--thr);
    color: var(--prim);
    text-align: center;
    line-height: 100px;
    display: none;
    transition: opacity 0.5s, transform 0.5s;
  }

  #animatedmenu li {
    font-family: var(--ff);
    font-size:5vh;
    color:var(--prim);
    padding:calc(var(--pad) /4)
  }
  #animatedmenu li:hover {
    color:var(--prim);
    transition: .5s;
    background-color: var(--light);
    padding:calc(var(--pad) /4)
  }
  #english, #francais {
    position: fixed;
    top:95vh;
    right:var(--pad);
    z-index:99;
    border:none;
    cursor: pointer;
    background-color: var(--thr);
    color:var(--prim);
    padding:calc(var(--pad) / 4);
  }
/* MAIN ///////////////////////////// */

main {
    margin:0 auto;
    max-width: 2200px;
    padding:0 var(--pad);
}
main h3 {padding:calc(var(--pad)) 0 calc(var(--pad)) 0;}

.cap {font-size: 130%;}
.ban {
    width:100%;
    max-height: 60vh;
    height:100vw;
    background-color: var(--thr);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin: 0 auto 0 auto;
}
#index-2026 {
    background-image: url("id/index-2026.jpg");
    background-position: center;

}
#concours-ban {
    background-image: url("id/concours.jpg");
    background-position: center;

}
#noel {
    background-image: url("id/noel.jpg");
    background-position: center;
    
}
#jury-ban {
    background-image: url("id/jury.jpg");
    background-position: center;

}
#mahoney {
    background-image: url("id/mahoney.jpg");
    background-position: top;
    min-height:60vh;
    

}


#tss {
    background-image: url("id/tss.jpg");
    background-position: center;
    min-height:60vh;
}

.ten56 {
    background-image: url("id/ten56.jpg");
    background-position: center;
    min-height:60vh;
}


.napalm {
    background-image: url("id/napalm.jpg");
    background-position: center;
    min-height:60vh;
}

.cornwell {
    background-image: url("id/cornwell.jpg");
    background-position: center;
    min-height:60vh;
}

#photom {
    background-image: url("id/photom.jpg");
    background-position: center;
    min-height:60vh;
}

#masters {
    background-image: url("id/masters.jpg");
    background-position: top;
    min-height:60vh;
}

.durand {
    background-image: url("id/durand.jpg");
    background-position: top;
    min-height:60vh;
}

.mendez {
    background-image: url("id/mendez.jpg");
    background-position: top;
    min-height:60vh;
}

#jondixexpo {
    background-image: url("id/jondix.jpg");
    background-position: center;
    min-height:60vh;
}
#sayalero {
    background-image: url("id/sayalero.jpg");
    background-position: center;
    min-height:60vh;
}
.shashin 
    {background-image: url("id/shashin.jpg");
    background-position: center;
    min-height:60vh;}

.douglas {
    background-image: url("id/douglas.jpg");
    background-position: top;
    min-height:60vh;
}

#stabile {
    background-image: url("id/stabile.jpg");
    background-position: top;
    min-height:60vh;
}

#amenra {
    background-image: url("id/amenra.jpg");
    background-position: bottom;
    min-height:60vh;
}
#hangman {
    background-image: url("id/hangman.jpg");
    background-position: center;
    min-height:60vh;
}
.baba {
    background-image: url("id/baba.jpg");
    background-position: center;
    min-height:60vh;


}
#shimada {
    background-image: url("id/shimada.jpg");
    background-position: top;
    min-height:60vh;


}
.leu {
    background-image: url("id/leu.jpg");
    background-position: top;
    min-height:60vh;


}
#aktinson {
    background-image: url("id/aktinson.jpg");
    background-position: top;
    min-height:60vh;


}

.timetable strong {
    color: var(--thr);

}
.timetable {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--pad);
    text-align: center;
}
.timetable h4, #billetterie .timetable h4  {
    padding-left: 0;
    color: var(--thr);    
    font-size: 3.5vh;
    text-transform: uppercase;
}
.timetable ul {
    padding: var(--pad) var(--pad) calc(var(--pad)*2) var(--pad);
    background-color: var(--dark);
    color: var(--snd);
    border-radius: 2em 0 2em 0;
}
.timetable li {
    line-height: 140%;
    border-bottom: 1px solid var(--thr);
    padding-bottom: 0.4em;
    margin-top: 0.4em ;

}

.duo {display: grid; grid-template-columns: 1fr 1fr; margin-top:calc(var(--pad)); gap:calc(var(--pad)*2)}
.duo h4, #billetterie h4, #contacts h4, #faq h4 {font-size: 5vh; text-transform: uppercase;     margin-bottom:calc(var(--pad) / 2);
}
#contacts a {color:var(--light);}
#contacts a:hover {color:var(--snd);text-decoration: underline; transition: .5s;}
#faq h5 {font-size: 3vh; color: var(--thr); text-transform: uppercase;}
#faq {margin:2rem 0}
.duo h5 {margin-bottom: var(--pad);font-size: 2.5vh;color: var(--thr);}
.duo p {
    padding-top: var(--pad);
}
article .duo p {    border-top: 1px solid var(--thr);
}
.duo figure {
    background-color: var(--thr);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.note { font-size: 80%; padding:var(--pad); border:1px solid var(--snd); margin: var(--pad) 0;}
.note strong {color: var(--light);}
#horaires h5 {
    font-size: 3vh; color: var(--light); text-transform: uppercase;
}

/* GRID ///////////////////////////// */
#loadMoreContainer {text-align: center; margin:var(--pad); display: flex; align-items: center; justify-content: center;}
#loadMoreContainer button {
    border: none;
    font-family: var(--ffsnd);
    padding:calc(var(--pad) / 4) calc(var(--pad) / 2);
    background-color: var(--thr);
    color: var(--prim);
}
#loadMoreContainer button:hover {
    padding:calc(var(--pad) / 4) calc(var(--pad) / 2);
    background-color: var(--snd);
    color: var(--prim);
}
.grid, .grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap:var(--pad);
    row-gap:calc(var(--pad) / 2);
}
#artists-header {
    display:flex;
    margin-bottom: 0;
}
.grid2 figure {
    display: block;
    background: none;
    height: auto;
    margin-bottom: calc(var(--pad) / 2);
    transition: 1s;
    background-position: center;
    background-size: cover;}
.grid figure {
    display: block;
    background: var(--thr);
    height: 33vh;
    margin-bottom: calc(var(--pad) / 2);
    transition: 1s;
    background-position: center;
    background-size: cover;

}
.grid2 figure img {width: 100%; height: auto;}
.grid article {
    text-align: center;
    padding: calc(var(--pad) / 2) 0;
    transition: background-color .3s ease-in-out;
    animation: grid-anim 1s;
}

@keyframes grid-anim {
    0% {opacity:0;width:90%;margin-left:5%}
    100% {opacity:1;width:100%; margin-left:0}
}


.grid article h6 {
    border:1px solid var(--snd);
    padding: calc(var(--pad) / 8)  calc(var(--pad) / 4);
    border-radius: 50%;
    color: var(--snd);
} 

.grid article:hover {
    background-color: var(--thr);
    color: var(--prim);
    transition: .5s ease;
}

.grid article:hover figure {
    transform: scale(90%);
    background-color: var(--light);
    transition: 1s ease;
    filter: grayscale();
    mix-blend-mode: multiply;
}
.grid article:hover h6 {
    border:1px solid var(--prim);
    transition: .5s ease;
    color: var(--prim);

}


/* SINGLE ///////////////////////////// */

#single-art {display:grid; grid-template-columns: 2fr 3fr; column-gap: var(--pad); border-bottom: 1px solid var(--thr);margin-bottom:  2vh;}
#single-art figure { background-size: cover; height:auto; background-position: center;}
#single-art h3 {margin:0; padding: 0;}
#single-art h5 {font-size: 2rem;    padding: calc(var(--pad) / 8)  0);
}
#single-info {
    padding: var(--pad);
    margin-bottom: var(--pad);
}
#single-info h6 {
    margin:calc(var(--pad) / 4);
    position: absolute;
    border:1px solid var(--snd);
    padding: calc(var(--pad) / 8)  calc(var(--pad) / 4);
    border-radius: 50%;
} 

#artist-gallery {
    margin-top: calc(var(--pad) / 2);
    width: 100%;
    display: grid;
    grid-template-columns: 20% 20% 20%;
    column-gap: var(--pad);
}

.gallery-item {
    background-color: var(--thr);
    height: 10vw;
    background-size: cover;
    background-position: center;
}
.gallery-item:hover {
    background-color: var(--thr);
    height: 10vw;
    background-size: cover;
    background-position: center;
    opacity: .7;
    transition: .5s;
}

.rdv {padding:var(--pad); margin-top:var(--pad); border:1px solid var(--snd); font-size: 90%;}
#artist-links a {color:var(--snd); transition: .3s;}
#artist-links a:hover {color:var(--thr); transition: .3s;}
#artist-mail {margin:var(--pad) 0;}
#artist-mail a {background:var(--thr); color:var(--prim); font-size: 90%; padding:1rem}
#artist-mail a:hover {background:var(--snd); color:var(--prim); transition:.3s}



/* FOOTER ///////////////////////////// */
footer {
    background-color: rgba(0, 0, 0, 1);
    padding: calc(var(--pad)*2) var(--pad) ;
    margin:0;
    gap: var(--pad);
    font-size: 80%;
    min-height:10vh;
    display:flex;
}

footer img {width:40px; height:auto;opacity:1}
footer img:hover {opacity:.7; transition: .5s;cursor: pointer;}


/* LIST ///////////////////////////// */
.list-artist {
    background-color: var(--prim);
    padding:var(--pad) var(--pad) calc(var(--pad) * 10) var(--pad);
}
#list-art {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#list-art article h4, #list-art article h5, #list-art article h6 {
    display: inline;
}
#list-art article h4 {color: var(--thr);}
#list-art article h4, #list-art article h5 {padding-right: 1rem;padding-left:.3rem}
#list-art article {
    display: flex; align-items: center; 
    border-bottom: 1px solid var(--thr); padding: calc(var(--pad) / 4) 0;
}
#list-art article:hover {background-color: var(--thr); color:var(--prim); transition: .5s;}
#list-art article:hover h4, #list-art article h5:hover, #list-art article:hover h6 {
    color: var(--prim); transition: .5s;
}
#list-art article h6 {
border:1px solid var(--snd);
padding: calc(var(--pad) / 8)  calc(var(--pad) / 4);
border-radius: 50%;
color: var(--snd);}
#list-art article:hover h6 {border:1px solid var(--prim);
}


.fullscreen-div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    min-height:100vh;
    height:100%;
    background-color: var(--prim);
    transition: opacity .5s;
    z-index:99;
}

.content {
    height:100%;
    background-color: var(--prim);
}
.content h3 {
    margin-left:var(--pad);
 
}
#closeButton, #openButton {
    background-color: var(--thr);
    color: var(--prim);
    border: none;
    margin-left:var(--pad);
    padding: 10px 20px;
    cursor: pointer;
}

#closeButton {margin-bottom: 30px;}

#openButton {    height:50%;margin-top:var(--pad)}


.focus-item {
    padding:calc(var(--pad) / 4) calc(var(--pad) / 4) calc(var(--pad) / 4) var(--pad);     transition:.3s;
}
.focus-item:hover {
    background-color:var(--light);
    color:var(--prim);
    transition:.3s;
}
.focus-item:hover h3 {
    color:var(--prim);
}
.focus-item p {margin-top:0; padding-top:0; margin-bottom:var(--pad);}

.ban-txt {
    background-color:var(--thr);
    color:var(--prim);
    text-align:center;
    padding:calc(var(--pad) * 2) var(--pad);
}
.ban-txt h3 {    color:var(--prim);
}


/* RESPONSIVE ///////////////////////////// */
.ghost {display:none;}


@media only screen and (max-width: 1940px) {
    .grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 1700px) {
    .grid {
        grid-template-columns: 1fr 1fr 1fr;
    }


}

@media only screen and (max-width: 1220px) {
    #single-art {display:grid; grid-template-columns: 2fr 2fr; column-gap: var(--pad); border-bottom: 1px solid var(--thr);margin-bottom:  2vh;}

    #ham {display: flex; align-items: center; transform: scale(70%); z-index:99}
    .ghost {display:inline;}
    .onlydesktop {display:none;}    nav header {grid-template-columns:4fr 4fr 1fr; }
    #logo img {max-width:30vw}
    #baseline img {max-width:40vw}

    .grid {
        grid-template-columns: 1fr 1fr;
    }
    .duo {display: grid; grid-template-columns: 1fr;}
    .duo figure {min-height:60vh}

    .timetable {
        grid-template-columns: auto auto;
    }
    h3 {
        font-size: 10vh;
    }
    #list-art {
        grid-template-columns: 1fr;
    }
    .content h3 {
        text-align: left;
    }
    #openButton {    height:50%;margin:calc(var(--pad) /2) auto;}
    #list-art article h4 {font-size:3vh}     #list-art article h5 {font-size:1.5vh}


}


@media only screen and (max-width: 860px) {
    #animatedmenu {
        width: 100vw;
        height: auto;
        background-color: var(--thr);
        color: var(--prim);
        text-align: center;
        line-height: 80px;}
    .edito h4 {font-size:3vh}

    .rdv {font-size: 80%;}
    #partenaires h3 {font-size:7vh}
    .ban-txt h3 {font-size:7vh !important;}
    .ban {
        width:100%;
        max-height: 70vh;
        height:58vw;
        background-color: var(--thr);
        background-size: cover;
        background-attachment:scroll;
        background-repeat: no-repeat;
        margin: 0 auto 0 auto;
    }
    .duo {display: grid; grid-template-columns: 1fr;}
    h3 {
        font-size: 9vh;
    }
    #baseline img {max-width:35vw}
    #baseline figure {padding: calc(var(--pad) / 2) 0 0 0;}
#baseline {position:relative;}
    main h3 { text-align: center; }
    .grid {
        grid-template-columns: 1fr;
    }
    .grid2 {
        grid-template-columns: 1fr 1fr;
    }
    .timetable {
        margin-top: var(--pad);
        grid-template-columns: 1fr ;
    }
    #artists-header {
        flex-direction: column;
    }
    .cap {font-size: 110%;}
    nav header {grid-template-columns:2fr, 1fr 1fr;}
    #single-art h3 {margin:0 0 1rem 0; padding: 0;}

    #single-art {display:grid; grid-template-columns: 1fr; column-gap: var(--pad); border-bottom: 1px solid var(--thr);margin-bottom:  2vh;}
    #single-art figure { height:120vw;}
    #single-info {text-align: center;}
    #artist-gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .gallery-item {
        height: 30vw;
    }
    .gallery-item:hover {
        height: 30vw;
    }
    .focus h3 {text-align:left}

}