html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

:root {
	--strong: #e30234;
	--light: #f8c0a2;
	--alt: #e7c102;
	--fourth: #009ee2;
}

body {
	background-color: #111;
	color: var(--light);
	font-family: "proxima_novaregular", Helvetica, sans-serif;
	font-size: 1.2rem;
	line-height: 1.4em;
	max-width: 1080px;
	margin: 0 auto;
}

img.fullwidth {
	width: 100%;
	margin: 1em 0;
}

header {
	text-align: center;
}

section {
	padding: 0 10px;
	text-align: left;
}

.fest-header {
	max-width: 850px;
}

.bigger-text {
	font-size: 1.4em;
}

.centered {
	margin: auto;
	display: block;
}

.centered-lineup {
	display: block;
	text-align: center;
}

.lang-link {
	position: absolute;
	top: 4px;
	right: 4px;
	padding: 12px;
	color: var(--strong);
	text-decoration: none;
	font-family: "proxima_novabold", Helvetica, sans-serif;
}

.lang-link:hover {
	color: var(--fourth);
}

.thin {
	font-size: 0.8em;
	font-family: "proxima_nova_condensedthin", Helvetica, sans-serif;
	opacity: 0.9;
}

.red {
	color: var(--alt);

}

.green {
	color: var(--alt);
}

.mailto {
	color: var(--light);
	text-decoration: none;
	border-bottom: 1px dotted var(--light);
}

.mailto:hover {
	color: var(--alt);
	border-color: var(--alt);
}

b {
	font-family: "proxima_novabold", Helvetica, sans-serif;
}

h1, h2, h3 {
	font-size: 1.7rem;
	font-family: "proxima_novaextrabold", Helvetica, sans-serif;
	color: var(--strong);
}

em {
	opacity: 0.9;
}

h1 {
 	font-size: 2em;
 }
section.lineup h3 {
	margin-bottom: 4px;
}

.cta-p {
	text-align: center;
}

.cta {
	display: inline-block;
	margin: 1em auto;
	padding: 0.7em;
	background-color: var(--fourth);
	font-size: 1.5rem;
	font-family: "proxima_novaextrabold", Helvetica, sans-serif;
	color: #fff9da;
	text-decoration: none;
}

.cta:hover {
	text-decoration: underline;
	/*color: #3e5e11;*/
}

p {
	max-width: 800px;
	margin: 1.2em auto;
}

.lineup {
	display: inline-block;
	margin: 1em;
	vertical-align: top;
}

.big {
	font-size: 1.8em;
}

ul {
	margin-top: 0;
	padding-left: 0px;
  list-style: none;
}

li::before {
  content: "• ";
  color: #e7441e;
}

.lineup ul {
	font-size: 1.3em;
}

body.fr .en {
  display: none;
  opacity: 0;
}

body.en .fr {
  display: none;
  opacity: 0;
}

.faq-bloc {
  margin-top: 2.5em;
}
.faq-question {
  display: block;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.4em;
  margin-bottom: 0.4em;
}
.faq-answer {
  display: block;
  margin-bottom: 2em;
}

.gallery {
  text-align: center;
  max-width: 800px;
  margin: auto;
}
.gallery a {
  display: inline-block;
  padding: 6px;
}
.gallery img {
  object-fit: cover;
  width: 160px;
  height:160px;
}

.img-gallery-last {
  position: relative;
}

.img-gallery-last::before {
  content: "...";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 10px;
  background-color: rgba(0,0,0,0.4);
  color: white;
  text-align: center;
  line-height: 2em;
  font-size: 4em;
}

.gallery a.img-gallery-blind {
  display: none;
}

.reversed {
	transform: rotate(180deg);
	max-width: 75%;
	margin: auto;
	display: block;
}

@media screen and (max-width: 400px) {
  .gallery img {
    width: 42vw;
    height:45vw;
  }
  .gallery a {
    padding: 2vw;
  }
}



@media (max-width: 560px) {
	section.lineup {
		display: block;
	}
	.lineup ul {
		font-size: 1.1em;
	}
	h1, h2, h3 {
		font-size: 1.5rem;
	}
	.desktop-spacer {
		display: none;
	}
 .bigger-text {
	font-size: 1.1em;
 }
}