:root {
  --greyblack: #000;
  --mentos: #bdc6e3;
  --violine: #70c6e3;
  --black: #000;
  --cookie: #7f724f;
  --soblue: #c7faff;
  --blanco: #fff;
  --backgroundSize: 295px;
}
@font-face {
  font-family: medieval;
  src: url('fonts/luxcontratenebrascond.ttf');
}
body {
  background-color: var(--greyblack);
  margin: 0;
  padding: 0;
  font-family: "IBM Plex Mono", monospace;
}
html {
  scroll-behavior: smooth;
  height: 100vh;
  scroll-snap-type: y mandatory;
}
section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
#entete {
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 0 0 40px;
  background-color: rgba(0, 0, 0, 1.00);
  z-index: 1;
}
#entete p {
  font-family: "Literata";
  font-size: 14px;
  color: var(--blanco);
  margin: 0 0 0 15px;
  cursor: pointer;
}
#backgrounds {
  height: 100vh;
  z-index: 2;
  background-image: url("images/SVG/logoblanc.svg"), url("images/pattern2.jpg");
  background-size: 20%, var(--backgroundSize);
  background-repeat: no-repeat, repeat;
  animation: movingBackground 5s linear infinite;
}
#vagueback {
  display: block;
  position: absolute;
  right: 0;
  top: 79px;
  width: 10%;
  height: inherit;
}
#back {
  opacity: 0;
}
#section1 {
  padding-top: 80px;
  position: sticky;
  top: 0;
}
.contenu {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  margin: auto;
}
.contenuXL {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 80%;
  display: flex;
}
.contenuL {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 20%;
}
.titleblocA, .titleblocB, .itembloc {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.titleblocA, .titleblocB {
  padding: 20px 40px;
  margin: 10px 0;
  border-top: white 1px dotted;
  border-bottom: white 1px dotted;
}
.titleblocA p, .titleblocB p {
  margin: 0;
  padding: 0;
}
.itembloc p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0 0 40px;
  margin: 0;
  height: 40px;
  line-height: 40px;
  width: calc(25% - 40px);
}
.titre, .lieu, .ville, .date, .nom, .rs, .bc, .web {
  background-color: none;
  text-decoration: underline solid transparent;
  transition: text-decoration 500ms ease;
}
.nom:hover, .rs:hover, .bc:hover, .web:hover {
  text-decoration: underline solid var(--blanco);
}
.itembloc:hover > .titre, .itemblocM:hover > .titre {
  text-decoration: underline solid var(--blanco);
}
.itembloc:hover > .lieu, .itemblocM:hover > .lieu {
  text-decoration: underline solid var(--blanco);
}
.itembloc:hover > .ville, .itemblocM:hover > .ville {
  text-decoration: underline solid var(--blanco);
}
.itembloc:hover > .date, .itemblocM:hover > .date {
  text-decoration: underline solid var(--blanco);
}
.itembloc {
  color: var(--blanco);
  text-transform: uppercase;
  align-items: center;
  cursor: pointer;
}
.bonus {
  display: none;
}
.titleblocA, .titleblocB {
  font-family: "Literata";
  min-height: 40px;
  font-weight: 700;
  font-size: 20px;
  color: var(--blanco);
  text-transform: capitalize;
}
#events {
  padding-bottom: 20px;
  border-bottom: 1px dotted var(--blanco);
}
#logo {
  aspect-ratio: 1 / 1;
  /*min-height: 100px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #DFE9FF;
}
#logo img {
  width: 45%;
}
#qui {
  background: var(--violine);
  padding: 0;
  align-items: center;
  justify-content: center;
}
#events, #lecteur {
  display: table-cell;
}
#lecteur {
  color: var(--mentos);
  height: 100%;
  vertical-align: top;
  background-image: url("images/pattern2.jpg");
  background-size: var(--backgroundSize);
  animation: movingBackground2 5s linear infinite;
}
#section2 {
  display: table !important;
}
.medieval {
  font-family: "medieval";
}
#rubrik {
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  width: 0;
  background-color: var(--black);
  color: var(--blanco)
}
#rubrik p {
  box-sizing: border-box;
  padding-left: 20px;
  text-transform: uppercase;
  font-size: 14px;
}
/* TICKER */
.ticker-wrap {
  width: 100%;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: normal;
  font-size: 60px;
  text-transform: uppercase;
  color: var(--greyblack);
}
.ticker {
  display: inline-block;
  margin-top: 5px;
  animation: marquee 20s linear infinite;
}
.item-collection-1 {
  position: relative;
  left: 0%;
  animation: swap 20s linear infinite;
}
/* TABLEAUX*/
table {
  table-layout: fixed;
  border: 0;
  width: 75%;
}
tr {
  background-color: var(--blanco);
  color: var(--black);
  height: 40px;
  border: none;
}
td {
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0;
  text-align: left;
  padding: 0 0 0 40px;
}
.Lmenthe {
  background-color: var(--mentos);
}
.Lviolette {
  background-color: var(--violine);
}
/* qui sommes nous /////////////////////////////////////// */
#section3 {
  background-color: #DFE9FF;
  color: var(--black);
  padding: 40px;
  min-height: 100vh;
  border-bottom: 1px dotted #DFE9FF;
}
.text {
  width: 50%;
  margin: auto;
  text-transform: uppercase;
}
.text img {
  width: 100%;
}
/* artistes /////////////////////////////////////// */
#section4 {
  min-height: 100vh;
  background-color: #000;
  color: #DFE9FF;
  padding: 120px 0 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}
#section4 div {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  width: calc(50% - 40px);
  min-height: 512px;
  margin: 0 20px 20px 0;
  text-transform: uppercase;
}
#section4 h1, #section4 p {
  margin: 0;
  padding: 20px;
}
#section4 div img {
  width: 20%;
  float: left;
  padding: 0 30px 30px 0;
}
/* moodboard /////////////////////////////////////// */
#section5 {
  padding: 120px 40px 120px 40px;
  line-height: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
  min-height: 100vh;
  background-color: #DFE9FF;
}
#section5 .pic, #section5 div {
  width: 100% !important;
  height: auto !important;
  margin: 0 0 20px 0;
}
#section5 div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 512px;
}
#section5 .anim {
  background-image: url("images/pattern2.jpg");
  background-size: var(--backgroundSize);
  animation: movingBackground2 5s linear infinite;
}
.blackmood {
  color: #DFE9FF;
  background-color: #000;
}
.whitemood {
  color: #000;
  background-color: #DFE9FF;
}
.bluemood {
  color: #000;
  background-color: var(--violine);
}
.greymood {
  color: #DFE9FF;
  background-color: #15121a;
}
.uvmood {
  color: #DFE9FF;
  background-color: #0f0037;
}
.yellowmood {
  color: #000;
  background-color: #ebc550;
}
#section5 div img {
  width: 50%;
}
.top {
  cursor: pointer;
}
/* footer /////////////////////////////////////// */
#section6 {
  background-color: #000;
  color: #DFE9FF;
  height: 80px;
  margin: 20px 40px;
}
/* formulaire  /////////////////////////////////////// */
#formulaire {
  margin: 0;
  padding: 40px;
  background-color: #70c6e3;
}
#formulaire h1 {
  margin: 0;
  padding: 0 0 20px 0;
	text-transform: uppercase;
}
.my-form {
  margin: 0;
  color: #000;
  padding: 0 0 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  min-width: 200px;
  min-height: 60px;
}
.label-text {
  display: block;
  padding: 0;
  margin: 0;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
	font-weight: 700;
}
input {
  display: block;
  height: 30px;
  max-width: 600px;
  min-width: 50px;
  background-color: #70c6e3;
  border: 1px #000 solid;
  margin-right: 10px;
  outline: none;
  margin-bottom: 10px;
}
input:focus {
  border: 1px #000 solid;
}
.submit-btn {
  background-color: #000;
  padding: 5px 5px;
  height: 35px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: #fff;
  border: none;
  min-width: 50px;
  cursor: pointer;
  margin-top: 5px;
  transition: 0.3s;

}
.submit-btn:hover {
  background-color: #fff;
  color: #000;
		  border: none;
}
@media screen and (max-width: 800px) {
  #section5 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media screen and (max-width: 600px) {
  #section5 {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}
/* Transition /////////////////////////////////////// */
@keyframes movingBackground {
  from {
    background-position: center, 0 0;
  }
  to {
    background-position: center, var(--backgroundSize) var(--backgroundSize);
  }
}
@keyframes movingBackground2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: var(--backgroundSize) var(--backgroundSize);
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}
@keyframes swap {
  0%, 50% {
    left: 0%;
  }
  50.01%, 100% {
    left: 100%;
  }
}
/* GESTION DE SCROLL */
/* resize /////////////////////////////////////// */
@media screen and (min-width: 600px) {
  #petitmenu, #rubrik {
    display: none;
  }
  #qui {
    width: 80% !important;
  }
}
@media screen and (max-width: 600px) {
  .bonus {
    display: block;
  }
  #entete {
    display: none;
  }
  #section1 {
    padding-top: 0;
  }
  #logo img {
    width: 90%;
  }
  #logo, #qui {
    background-image: none;
  }
  #logo {
    width: 40%;
  }
  #qui {
    width: 60%;
  }
  .ticker-wrap {
    font-size: 20px;
  }
  #shows {
    background-image: none;
  }
  .itembloc p {
    width: calc(100% - 40px);
  }
  .lieu, .ville, .date, .rs, .bc, .web {
    display: none;
  }
  .my-form {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 1280px) {
  #logo img {
    width: 80%;
  }
}
@media screen and (max-width: 900px) {
  #events {
    width: 100% !important;
  }
  #lecteur {
    display: none;
  }
  #intro {
    display: none;
  }
  section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
  .text {
    width: 100%;
  }
  #section4 div {
    width: calc(100% - 40px);
    margin: 0 0 20px 0;
  }
}
/* LES LIENS */
a {
  transition: 1s;
}
#section4 a {
  color: inherit;
}
#section4 a:link {
  color: inherit;
  text-decoration: none;
  /*  background-color: #000;*/
}
#section4 a:visited {
  text-decoration: none;
  /*  background-color: #000;*/
}
#section4 a:hover {
  text-decoration: underline;
}
#section4 a:active {
  text-decoration: none;
}
#rubrik a:link {
  color: var(--blanco);
  text-decoration: none;
  /*  background-color: #000;*/
}
#rubrik a:visited {
  color: var(--blanco);
  text-decoration: none;
  /*  background-color: #000;*/
}
#rubrik a:hover {
  color: var(--mentos);
  text-decoration: none;
}
#rubrik a:active {
  color: var(--blanco);
  text-decoration: none;
}
#entete a:link {
  color: var(--blanco);
  text-decoration: none;
  /*  background-color: #000;*/
}
#entete a:visited {
  color: var(--blanco);
  text-decoration: none;
  /*  background-color: #000;*/
}
#entete a:hover {
  color: var(--blanco);
  text-decoration: underline;
}
/* selected link */
#entete a:active {
  color: var(--blanco);
  text-decoration: underline;
}
#section2 a:link {
  color: var(--greyblack);
  text-decoration: none;
}
#section2 a:visited {
  color: var(--greyblack);
  text-decoration: none;
  /*  background-color: #000;*/
}
#section2 a:hover {
  color: var(--greyblack) !important;
  text-decoration: underline !important;
}
/* selected link */
#section2 a:active {
  color: var(--greyblack);
  text-decoration: none;
}