@charset "UTF-8";

@font-face {
	font-family:'favorit-std-extended-book';
	font-style:normal;
	src:local('favorit-std-extended-book'), url('font/favorit-std-extended-book.woff') format('woff');
}

html, html a, input, textarea, select, button { -webkit-font-smoothing:antialiased !important; }

body { width:100%; height:100vh; padding:0; margin:0; font-family:'favorit-std-extended-book'; font-size:8px; color:#000; }

a:hover img, a:hover img { color:transparent !important; }
p, form, ul, li, label, input, hr, select, img { padding:0; margin:0; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus{ outline:none; }
/*input { -webkit-appearance:none; }*/

.clearer { display:block; clear:both; }
.spacer08 { height:8px; display:block; clear:both; }
.spacer15 { height:15px; display:block; clear:both; }
.spacer25 { height:25px; display:block; clear:both; }


a { text-decoration:none; color:black; }
a img { border:0; padding:0; margin:0; }
a:hover, .active { color:#0000ff !important; }

#container { /*width:100vw;*/ height:87vw; max-height:100vh; background-color:transparent; }
#container::before { height:100%; width:100%; content:" "; background-image:url(/img/fond-cercle.png); background-position:-20vw center; background-repeat:no-repeat; background-size:cover; position:absolute; z-index:1; pointer-events:none; }

#lignes3 { height:calc(65.0% - 1px); width:100%; background-image:url(/img/Vanijken-Jan.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; position:relative; z-index:0; border-bottom:1px solid white; }
#lignes2 { height:35.0%; width:100%; background-color:transparent; position:relative; z-index:0; }
#lignes2::before { height:calc(92vh - 150%); width:100%; content:" "; background-image:url(/img/Wolff-Barbara-mobile.jpg); background-position:top left; background-repeat:no-repeat; background-size:cover; position:absolute; z-index:0; }

#ligne1 { width:100%; height:calc(27.4% - 1px); border-bottom:1px solid white; position:relative; overflow:hidden; } 
#ligne2 { width:100%; height:calc(27.4% - 1px); border-bottom:1px solid white; position:relative; overflow:hidden; }
#ligne3 { width:100%; height:calc(26.2% - 0px); /*border-bottom:1px solid white;*/ position:relative; overflow:hidden; } /* met la bottom border à la fin des #lignes3 */
#ligne4 { width:100%; height:calc(50% - 1px); border-bottom:1px solid white; position:relative; overflow:hidden; }
#ligne5 { width:100%; height:calc(50% - 1px); border-bottom:1px solid white; position:relative; overflow:hidden; }

.ligne { height:74%; width:94%; margin:0 3%; top:13%; position:relative; }
.ligne a img { height:100%; width:auto; }
.ligne a:hover img { filter: /* start #000 */ brightness(0) saturate(100%) /* end #000 */ invert(8%) sepia(100%) saturate(6751%) hue-rotate(248deg) brightness(103%) contrast(146%); }

ul#langues { display:none; }

#langues_mobile { width:calc(25% + 1px); height:calc(19% - 1px); padding-left:calc(3% - 1px); padding-right:72%; border-bottom:1px solid white; position:relative; overflow:hidden; display:table;	}
#langues_mobile a { display:table-cell; vertical-align:middle; color:#FFF; text-decoration:none; font-size:6vw; }

#news { position:fixed; height:30px; width:100%; bottom:0; z-index:1; background-color:#0000ff; color:#fff; line-height:30px; font-size:3em; overflow:hidden; }
#news span { margin-right:100px; }

/************************************** PAGES ****************************************/

#titre { position:fixed; width:100%; background-color:white; z-index:1; }
#titre, #stitre, #artiste, #event { padding:0 calc(10px + 1vw) calc(5px + 1.5vw) calc(10px + 1vw); border-bottom:1px solid black; overflow:hidden; }

#titre img { height:11vw; width:auto; float:left; }
#titre img:hover { filter:invert(8%) sepia(88%) saturate(6665%) hue-rotate(243deg) brightness(116%) contrast(154%); }

.retouche2 { height:10.7vw !important; width:auto !important; }

#menu { display:none; }

#menu_mobile { border-bottom:1px solid black; height:8vw; width:100%; margin-left:calc(-10px - 1vw); margin-bottom:calc(5px + 1.5vw); }
#menu_mobile a { font-size:2.2em; line-height:8vw; color:black; text-decoration:none; display:block; margin-left:calc(10px + 1vw); }

#stitre { top:calc(15px + 22.3vw); position:relative; } 
#stitre, #artiste, #event { font-size:2.2em; padding-bottom:15px; overflow:hidden; }
#stitre div, #artiste_nom { margin-bottom:5vw; }
#stitre p, #artiste_desc, #event_desc { text-align:left; }
#stitre span { float:right; display:none; }

#artistes, #liste_events { border-top:1px solid black; position:relative; top:calc(15px + 22.3vw); width:100%; }
#artistes { padding-bottom:50vh; }
#artistes li, #s_artistes, #liste_events li { display:block; font-size:2.2em; border-bottom:1px solid black; padding:4px 0 4px calc(10px + 1vw); position:relative; }
#artistes li a span:last-child { padding-right:calc(10px + 1vw); right:0; top:2px; position:absolute; display:none; }
#artistes li a, #liste_events li a, #blog div a { display:block; }
#artistes li a span:first-child { display:block; width:90%; }
#s_artistes { border:none; width:50%; position:relative; top:calc(15px + 22.3vw); }
input#s_artistes::placeholder { color:#0000ff; opacity:1; }

#artiste_desc, #event_desc { display:flex; flex-direction:column; }
#artiste_infos, #event_infos { order:2; margin-top:5vw; }
#artiste_img, #img_event { order:1; }

#artiste, #event { border-bottom:none; position:relative; top:calc(15px + 22.3vw); padding-bottom:5vw; }
#artiste_infos, #event_infos { font-size:0.6em; line-height:13px; text-align:left; overflow:hidden; width:100%; }
#artiste img, #event img { width:100%; height:auto; }
#artiste p, #event p { margin-bottom:25px; }
#artiste p:last-child, #event p:last-child { padding-top:5vw; }

#event { top:calc(15px + 11vw) !important }
#liste_events { border-top:none; position:relative; padding-bottom:60px; padding-top:-32px; }
#liste_events li { position:relative; overflow:hidden; padding:calc(5px + 1.5vw) 0 calc(5px + 1.5vw) calc(10px + 1vw); }
#liste_events p { display:block; overflow:hidden;  }
.date_event { }
.theme_event { margin-bottom:20px; color:#0000ff; }
.titre_event { margin-bottom:20px; padding-right:calc(10px + 1vw); }
.lieu_event { }
.lien_event { padding-right:calc(10px + 1vw); position:absolute; top:10px; right:0; display:none !important; }

.retouche { top:calc(15px + 23.8vw) !important; }

#blog div p, #infos div p, #cinqjpg div p { overflow:hidden; padding:10px calc(10px + 1vw) 10px calc(10px + 1vw); border-bottom:1px solid black; }
#blog, #infos, #cinqjpg { border-top:none; position:relative; top:calc(9px + 22.3vw); width:100%; padding-bottom:60px; }
#blog div, #infos div, #cinqjpg div { font-size:2.2em; border-bottom:1px solid black; }
.blog_titre, .infos_titre, .cinqjpg_titre { border-bottom:none !important; padding:4px calc(10px + 1vw) 4px calc(10px + 1vw); }
.blog_infos { border-bottom:none !important; font-size:0.6em; }
.partage { font-size:0.6em; border-bottom:none !important; }
#blog div:first-child .blog_titre { border-bottom:1px solid black !important; }
.blog_desc:first-child, .infos_desc, .cinqjpg_desc { border-bottom:1px solid black; }
.blog_desc, .infos_desc, .cinqjpg_desc, .credit { border-bottom:none !important; }
.infos_desc img { width:100%; margin-top:-20px !important; height:auto; margin-bottom:-18px; }
#blog img, .youtube { width:calc(98% - 20px); height:auto; margin-left:calc(10px + 1vw); padding-bottom:12px; }
.youtube { height:60vw; }
.soundcloud { height:166px !important; }
.credit { margin-bottom:40px; font-size:0.6em; }

#infos div:nth-child(2), #infos div:nth-child(3), #infos div:nth-child(4) { padding-bottom:4px; min-height:20px; line-height:20px; }