* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.tourism-banner {
  background-image: url("../img/landgraph.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

.tourism-trapeze {
  background-color: none;
}

.tourism-description {
  color: none;
}

.tourism-type {
  display: none;
}

.tourism-video {
  display: none;
}

.tourism-title {
  color: white;
  height: 50vh;
  font-family: Sedgwick, sans-serif;
  font-size: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.514);
}

.tourism-polygone-classique {
  width: 100vw;
  height: 15vh;
  background-image: url("../img/tourismebike.webp");
  background-position: center;
  background-size: cover;
  color: white;
  text-align: center;
  font-family: Sedgwick, sans-serif;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.tourism-polygone-vip {
  width: 100vw;
  height: 15vh;
  background-image: url("../img/workshop.webp");
  background-position: center;
  background-size: cover;
  color: white;
  text-align: center;
  font-family: Sedgwick, sans-serif;
  margin-bottom: 10px;
}

.tourism-polygone-vip .title-events {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 15vh;
  background-color: rgba(0, 0, 0, 0.35);
}

.tourism-polygone-urbain {
  width: 100vw;
  height: 15vh;
  background-image: url("../img/parcoururbain.webp");
  background-position: center;
  background-size: cover;
  color: white;
  text-align: center;
  font-family: Sedgwick, sans-serif;
  margin-bottom: 10px;
}

.tourism-polygone-urbain .title-tourisme {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 15vh;
  background-color: rgba(0, 0, 0, 0.35);
}

.separatorContainer {
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.separatorContainer h3 {
  font-family: Sedgwick, sans-serif;
  font-size: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

.separatorContainer .couvert {
  width: 12rem;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .event-title {
    font-size: 4rem;
  }
  .separatorContainer {
    font-family: Roboto, sans-serif;
    padding-top: 0rem;
    padding-bottom: 0rem;
  }
  .separatorContainer h3 {
    font-size: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .separatorContainer .couvert {
    width: 12rem;
  }
}

@media only screen and (min-width: 1025px) {
  .tourism-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    height: 85vh;
    width: 100vw;
  }
  .tourism-trapeze {
    -webkit-clip-path: polygon(58% 0, 100% 0%, 100% 100%, 76% 100%);
            clip-path: polygon(58% 0, 100% 0%, 100% 100%, 76% 100%);
    background-color: rgba(0, 0, 0, 0.514);
    width: 70%;
    padding: 2%;
  }
  .tourism-description {
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 100%;
  }
  .tourism-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .tourism-title {
    font-weight: lighter;
    font-family: Sedgwick, sans-serif;
    text-align: right;
    font-size: 4rem;
    background-color: rgba(0, 0, 0, 0);
    height: auto;
  }
  .tourism-subtitle {
    margin-top: 8%;
    font-weight: lighter;
    font-family: Roboto, sans-serif;
    z-index: 2;
    text-align: right;
    color: #db3632;
    font-size: 2rem;
  }
  .tourism-p {
    margin-top: 2%;
    font-weight: lighter;
    color: white;
    text-align: right;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    width: 16vw;
  }
  .textBold {
    font-family: Roboto-bold, sans-serif;
  }
  .event-video {
    margin-top: 1rem;
    width: 10vw;
    height: 15vh;
    display: block;
  }
  .separatorContainer {
    font-family: Roboto, sans-serif;
    padding-top: 0rem;
    padding-bottom: 0rem;
  }
  .separatorContainer h3 {
    font-size: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .separatorContainer .couvert {
    width: 12rem;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1920px) {
  .tourism-polygone-classique {
    background-image: url("../img/tourismebikeNB.webp");
    background-size: cover;
    background-position: center;
    height: 74.07407407vh;
    width: 33.3333%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    margin-bottom: 0;
  }
  .tourism-polygone-classique .title-graffiti {
    height: 30vh;
    width: 30vw;
    -webkit-clip-path: polygon(0 0, 0% 100%, 70% 100%);
            clip-path: polygon(0 0, 0% 100%, 70% 100%);
    background-color: rgba(255, 0, 0, 0.274);
    font-family: Sedgwick, sans-serif;
    position: relative;
  }
  .tourism-polygone-classique .title-graffiti p {
    position: absolute;
    line-height: 90%;
    left: 17%;
    bottom: 0%;
    color: white;
  }
  .tourism-polygone-classique:hover {
    background-image: url("../img/tourismebike.webp");
    height: 62.5vh;
  }
  .tourism-polygone-classique:hover .title-graffiti {
    display: none;
  }
  .tourism-polygone-vip {
    margin-left: -38px;
    margin-bottom: 0;
    background-image: url("../img/workshopNB.webp");
    background-size: cover;
    background-position: center;
    height: 74.07407407vh;
    width: 33.3333%;
    float: left;
    -webkit-clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0%, 100%);
    clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
  }
  .tourism-polygone-vip .title-events {
    height: 25vh;
    -webkit-clip-path: polygon(0 0, 0 80%, 94% 0);
            clip-path: polygon(0 0, 0 80%, 94% 0);
    background-color: rgba(255, 0, 0, 0.274);
    color: white;
    font-family: Sedgwick, sans-serif;
    position: relative;
  }
  .tourism-polygone-vip .title-events p {
    position: absolute;
    left: 25%;
    top: 0%;
    color: white;
    padding-top: 2%;
  }
  .tourism-polygone-vip:hover {
    background-image: url("../img/workshop.webp");
    height: 62.5vh;
  }
  .tourism-polygone-vip:hover .title-events {
    display: none;
  }
  .tourism-polygone-urbain {
    background-image: url("../img/parcoururbainNB.webp");
    background-size: cover;
    background-position: center;
    margin-left: 4vh;
    margin-bottom: 0;
    height: 74.07407407vh;
    width: 29%;
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  }
  .tourism-polygone-urbain .title-tourisme {
    height: 20vh;
    -webkit-clip-path: polygon(0 0, 0 100%, 88% 100%);
            clip-path: polygon(0 0, 0 100%, 88% 100%);
    background-color: rgba(255, 0, 0, 0.274);
    color: white;
    font-family: Sedgwick, sans-serif;
    position: relative;
  }
  .tourism-polygone-urbain .title-tourisme p {
    position: absolute;
    left: 7%;
    bottom: 0%;
    color: white;
  }
  .tourism-polygone-urbain:hover {
    background-image: url("../img/parcoururbain.webp");
    height: 62.5vh;
    width: 26.2%;
  }
  .tourism-polygone-urbain:hover .title-tourisme {
    display: none;
  }
  .event-title {
    font-size: 4rem;
    margin-bottom: -3%;
    margin-top: -1%;
  }
  .event-subtitle {
    font-size: 2rem;
  }
  .event-p {
    line-height: 120%;
    font-size: 1rem;
    text-align: right;
  }
  .event-video {
    margin-top: 7%;
    width: 9rem;
    height: 6rem;
  }
}

.streetart-banner {
  background-image: url("../img/fresqueOrange.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

.streetart-trapeze {
  background-color: none;
}

.streetart-description {
  color: none;
}

.streetart-type {
  display: none;
}

.event-video {
  display: none;
}

.streetart-title {
  color: white;
  height: 50vh;
  font-family: Sedgwick, sans-serif;
  font-size: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.514);
}

.streetart-subtitle-mobile a {
  text-decoration: none;
  color: #db3632;
}

.container-picture {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.boxOne {
  padding: 11rem;
  margin: 2.5rem;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.64)), to(rgba(0, 0, 0, 0.64))), url("../img/fresqueMusique.webp") no-repeat;
  background: linear-gradient(rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64)), url("../img/fresqueMusique.webp") no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
}

.boxTwo {
  padding: 11rem;
  margin: 2.5rem;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.64)), to(rgba(0, 0, 0, 0.64))), url("../img/livePaint.webp") no-repeat;
  background: linear-gradient(rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64)), url("../img/livePaint.webp") no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
}

.boxOne:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: -webkit-transform 0.9s ease;
  transition: -webkit-transform 0.9s ease;
  transition: transform 0.9s ease;
  transition: transform 0.9s ease, -webkit-transform 0.9s ease;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))), url("../img/fresqueMusique.webp") no-repeat;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("../img/fresqueMusique.webp") no-repeat;
}

.boxTwo:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: -webkit-transform 0.9s ease;
  transition: -webkit-transform 0.9s ease;
  transition: transform 0.9s ease;
  transition: transform 0.9s ease, -webkit-transform 0.9s ease;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))), url("../img/livePaint.webp") no-repeat;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("../img/livePaint.webp") no-repeat;
}

.titleOne {
  position: absolute;
  text-align: center;
  color: #db3632;
  font-family: Sedgwick, sans-serif;
  font-size: 2rem;
  overflow: hidden;
  opacity: 1;
}

.titleTwo {
  position: absolute;
  text-align: center;
  color: #db3632;
  font-family: Sedgwick, sans-serif;
  font-size: 2rem;
  overflow: hidden;
}

.titleOne:hover {
  opacity: 0;
  display: block;
  position: absolute;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
}

.titleTwo:hover {
  opacity: 0;
  display: block;
  position: absolute;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .streetart-title {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1025px) {
  .streetart-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    height: 85vh;
    width: 100vw;
  }
  .streetart-trapeze {
    -webkit-clip-path: polygon(58% 0, 100% 0%, 100% 100%, 76% 100%);
            clip-path: polygon(58% 0, 100% 0%, 100% 100%, 76% 100%);
    background-color: rgba(0, 0, 0, 0.514);
    width: 70%;
    padding: 2%;
  }
  .streetart-description {
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 100%;
  }
  .streetart-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .streetart-title {
    font-weight: lighter;
    font-family: Sedgwick, sans-serif;
    text-align: right;
    font-size: 2rem;
    background-color: rgba(0, 0, 0, 0);
    height: auto;
    margin-bottom: -50px;
    margin-top: -40px;
  }
  .streetart-subtitle {
    margin-top: 8%;
    font-weight: lighter;
    font-family: Roboto, sans-serif;
    z-index: 2;
    text-align: right;
    color: #db3632;
    font-size: 2rem;
  }
  .streetart-p {
    margin-top: 2%;
    font-weight: lighter;
    color: white;
    text-align: right;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    width: 16vw;
  }
  .textBold {
    font-family: Roboto-bold, sans-serif;
  }
  .event-video {
    margin-top: 1rem;
    width: 10vw;
    height: 15vh;
    display: block;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1920px) {
  .index-black-box {
    height: 7vh;
    width: 100vw;
    background-color: black;
  }
  .streetart-title {
    font-size: 2rem;
    margin-bottom: -3%;
    margin-top: -1%;
  }
  .streetart-subtitle {
    font-size: 1.5rem;
  }
  .streetart-p {
    line-height: 120%;
    font-size: 1rem;
    text-align: right;
  }
  .event-video {
    margin-top: 7%;
    width: 9rem;
    height: 6rem;
  }
}

.partenaires-banner {
  background-image: url("../img/parcoururbain.webp");
  background-repeat: no-repeat;
  background-size: cover;
  height: 10rem;
}

.filter {
  background-color: rgba(0, 0, 0, 0.5);
  height: 10rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: white;
  font-family: Sedgwick, sans-serif;
}

.filter h1 {
  font-weight: normal;
  font-size: 3rem;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .partenaires-banner {
    height: 15rem;
  }
  .filter {
    height: 15rem;
  }
  .filter h1 {
    font-size: 4rem;
  }
}

@media only screen and (min-width: 1025px) {
  .partenaires-banner {
    height: 20rem;
  }
  .filter {
    height: 20rem;
  }
  .filter h1 {
    font-size: 4rem;
  }
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.event-banner {
  background-image: url("../img/blockparty.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

.event-trapeze {
  background-color: none;
}

.event-description {
  color: none;
}

.event-type {
  display: none;
}

.event-video {
  display: none;
}

.event-title {
  color: white;
  height: 50vh;
  font-family: Sedgwick, sans-serif;
  font-size: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.514);
}

.event-subtitle-mobile a {
  text-decoration: none;
  color: #db3632;
}

.indigenskull {
  display: none;
}

/*TEXTE_PHOTO EN DIAGONALE PAT*/
.title {
  font-family: Sedgwick, sans-serif;
  color: #db3632;
  font-size: 2rem;
  padding: 1rem;
}

.event-text {
  font-family: Roboto, sans-serif;
  font-size: 0.9rem;
  color: black;
  padding: 1rem;
}

.title {
  font-family: Sedgwick, sans-serif;
  color: #db3632;
  font-size: 2rem;
  padding: 1rem;
}

.event-text {
  font-family: Roboto, sans-serif;
  font-size: 0.8rem;
  color: black;
  padding: 1rem;
}

.container_verse {
  overflow: hidden;
  height: 50vh;
  width: 80vw;
  text-align: right;
  margin-left: 10%;
  border-left: 2px solid #db3632;
  margin-right: 10%;
  margin-top: 5%;
  margin-bottom: 15%;
}

.shaped {
  height: 50vh;
  width: 40vw;
  float: right;
  background: black url(../img/graph.webp) center top no-repeat;
  background-size: cover;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
  shape-margin: 1.5rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
  border: 1px solid black;
}

.container_reverse {
  overflow: hidden;
  height: 50vh;
  width: 80vw;
  text-align: left;
  margin-right: 10%;
  margin-left: 10%;
  border-right: 2px solid #db3632;
  margin-top: 5%;
  margin-bottom: 15%;
}

.shaped_reverse {
  height: 50vh;
  width: 40vw;
  float: left;
  background: black url(../img/mama.webp) center top no-repeat;
  background-size: cover;
  shape-outside: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
  shape-margin: 1.5rem;
  -webkit-clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
  border: 1px solid black;
}

.title {
  font-size: 1.2rem;
  padding: 0.4rem;
}

/*disparition du banner en responsive*/
.separator-event {
  visibility: visible;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 3%;
  font-family: Roboto-bold, sans-serif;
  color: #db3632;
  font-size: 0.6rem;
  margin-top: 5%;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .event-title {
    font-size: 4rem;
  }
  .separator-event {
    visibility: visible;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 3%;
    font-family: Roboto-bold, sans-serif;
    color: #db3632;
    font-size: 1rem;
    margin-top: 5%;
  }
  .logoIndigen {
    display: none;
  }
}

.event-text {
  font-size: 1rem;
}

.title {
  font-size: 1.5rem;
}

@media only screen and (min-width: 1025px) {
  .logoIndigen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
  .indigenskull {
    display: block;
    padding-top: 10rem;
    padding-bottom: 10rem;
    width: 4rem;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .event-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    height: 85vh;
    width: 100vw;
  }
  .event-trapeze {
    -webkit-clip-path: polygon(58% 0, 100% 0%, 100% 100%, 76% 100%);
            clip-path: polygon(58% 0, 100% 0%, 100% 100%, 76% 100%);
    background-color: rgba(0, 0, 0, 0.514);
    width: 70%;
    padding: 2%;
  }
  .event-description {
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 100%;
  }
  .event-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .event-title {
    font-weight: lighter;
    font-family: Sedgwick, sans-serif;
    text-align: right;
    font-size: 4rem;
    background-color: rgba(0, 0, 0, 0);
    height: auto;
    margin-bottom: -50px;
    margin-top: -40px;
  }
  .event-subtitle {
    margin-top: 8%;
    font-weight: lighter;
    font-family: Roboto, sans-serif;
    z-index: 2;
    text-align: right;
    color: #db3632;
    font-size: 1.5rem;
  }
  .event-p {
    margin-top: 2%;
    font-weight: lighter;
    color: white;
    text-align: right;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    width: 16vw;
  }
  .textBold {
    font-family: Roboto-bold, sans-serif;
  }
  .event-video {
    margin-top: 1rem;
    width: 10vw;
    height: 15vh;
    display: block;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1920px) {
  .index-black-box {
    height: 7vh;
    width: 100vw;
    background-color: black;
  }
  .event-title {
    font-size: 4rem;
    margin-bottom: -3%;
    margin-top: -1%;
  }
  .event-subtitle {
    font-size: 1.5rem;
  }
  .event-p {
    line-height: 120%;
    font-size: 1rem;
    text-align: right;
  }
  .event-video {
    margin-top: 7%;
    width: 9rem;
    height: 6rem;
  }
  .separator-event {
    display: none;
  }
}

.partenaires {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 40px;
  margin: 30px 0 50px 0;
}

.partenaires img {
  margin: 20px;
}

/*HEADER*/
.navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: black;
  height: 7rem;
  width: 100%;
}

.hamburger {
  display: none;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #101010;
}

.nav-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 80%;
}

.nav-item {
  list-style: none;
  margin-left: 5rem;
}

.nav-link {
  text-decoration: none;
  font-family: "Sedgwick";
  font-size: 1.3rem;
  font-weight: 400;
  color: white;
  /*padding-left: 2rem;
  padding-right: 2rem;*/
}

.nav-link:hover {
  color: #db3632;
}

.logo {
  position: absolute;
  width: 11%;
  height: auto;
  opacity: 100%;
  z-index: 1;
  margin: 1.2rem;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .nav-menu {
    position: absolute;
    left: -100%;
    top: 5rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: #fff;
    width: 100%;
    height: auto;
    border-radius: 10px;
    text-align: center;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
            box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  }
  .nav-menu.active {
    left: 0;
  }
  .nav-item {
    margin: 1.8rem 0;
  }
  .nav-link {
    color: black;
  }
  .hamburger {
    position: absolute;
    display: block;
    cursor: pointer;
    background-color: white;
    margin: 2px 1em 0 80%;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
            transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
            transform: translateY(-8px) rotate(-45deg);
  }
  .logo {
    position: absolute;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%);
    margin: 3.5em auto 1em 1em;
    width: 5rem;
  }
  .navbar {
    height: 80px;
    opacity: 100%;
  }
  .video {
    position: relative;
    margin-top: -80px;
    z-index: 1;
    width: 100%;
  }
}

@media screen and (min-width: 320px) and (max-width: 768px) {
  .nav-menu {
    position: absolute;
    left: -100%;
    top: 5rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: #fff;
    width: 100%;
    height: auto;
    border-radius: 10px;
    text-align: center;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
            box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  }
  .nav-menu.active {
    left: 0;
  }
  .nav-item {
    margin: 1.8rem 0;
  }
  .nav-link {
    color: black;
  }
  .hamburger {
    position: absolute;
    display: block;
    cursor: pointer;
    background-color: white;
    margin: 2px 1em 0 80%;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
            transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
            transform: translateY(-8px) rotate(-45deg);
  }
  .logo {
    position: absolute;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%);
    margin: 3.5em auto 1em 1em;
    width: 5rem;
  }
  .navbar {
    height: 80px;
    opacity: 100%;
  }
  .video {
    margin-top: -80px;
    z-index: 1;
    width: 100% !important;
    height: auto !important;
  }
}

video {
  display: block;
  width: 100%;
}

.video {
  position: relative;
  z-index: -1;
}

@media screen and (min-width: 1024px) {
  .video {
    position: relative;
    margin-top: -115px;
    z-index: -1;
  }
}

.gallery-banner {
  background-image: url("https://cdn.pixabay.com/photo/2016/03/27/16/23/woman-1283009__340.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.event-trapeze {
  background-color: none;
}

.event-description {
  color: none;
}

.event-type {
  display: none;
}

.event-video {
  display: none;
}

.event-title {
  color: white;
  height: 50vh;
  font-family: Sedgwick, sans-serif;
  font-size: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.514);
}

#galleryContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.galerie {
  display: -ms-flexbox;
  /* IE10 */
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
  max-width: 70%;
}

.item {
  -ms-flex: 25%;
  /* IE10 */
  -webkit-box-flex: 25%;
          flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.item img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  height: auto;
}

.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 10px;
}

.prev, .next {
  border: 1px solid black;
  padding: 0.5rem;
}

.sep {
  text-align: center;
  padding: 1rem;
}

.title-gallery {
  display: none;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
  .item {
    -ms-flex: 100%;
    -webkit-box-flex: 100%;
            flex: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .item {
    -ms-flex: 50%;
    -webkit-box-flex: 50%;
            flex: 50%;
    max-width: 50%;
  }
  .gallery-title {
    font-size: 6rem;
  }
  .event-title {
    font-size: 4rem;
  }
}

@media only screen and (min-width: 1025px) {
  .gallery-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    height: 85vh;
    width: 100vw;
  }
  .event-trapeze {
    -webkit-clip-path: polygon(58% 0, 100% 0%, 100% 100%, 76% 100%);
            clip-path: polygon(58% 0, 100% 0%, 100% 100%, 76% 100%);
    background-color: rgba(0, 0, 0, 0.514);
    width: 70%;
    padding: 2%;
  }
  .event-description {
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .event-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .event-title {
    font-weight: lighter;
    font-family: Sedgwick, sans-serif;
    text-align: right;
    font-size: 4rem;
    background-color: rgba(0, 0, 0, 0);
    height: auto;
    margin-bottom: -50px;
    margin-top: -40px;
  }
  .event-subtitle {
    margin-top: 8%;
    font-weight: lighter;
    font-family: Roboto, sans-serif;
    z-index: 2;
    text-align: right;
    color: #db3632;
    font-size: 2rem;
  }
  .event-p {
    margin-top: 2%;
    font-weight: lighter;
    color: white;
    text-align: right;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    width: 16vw;
  }
  .textBold {
    font-family: Roboto-bold, sans-serif;
  }
  .event-video {
    margin-top: 1rem;
    width: 10vw;
    height: 15vh;
    display: block;
  }
  .title-gallery {
    display: block;
    padding: 1rem;
    font-size: 3rem;
    font-family: Sedgwick, sans-serif;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1500px) {
  .event-title {
    font-size: 4rem;
    margin-bottom: -3%;
    margin-top: -1%;
  }
  .event-subtitle {
    font-size: 2rem;
  }
  .event-p {
    line-height: 120%;
    font-size: 1rem;
    text-align: right;
  }
  .event-video {
    margin-top: 7%;
    width: 9rem;
    height: 6rem;
  }
}

footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: black;
  color: white;
  padding: 2rem;
  font-family: Roboto, sans-serif;
}

.info-Asbl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 60%;
  text-align: left;
}

.info-Asbl p:nth-child(3) {
  line-height: 1.5rem;
  width: 50%;
}

.socialContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 60%;
}

.socialLinks a {
  color: white;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  font-size: 2rem;
}

.socialLinks a:hover {
  color: #db3632;
}

.partner {
  font-size: 1rem;
}

footer a {
  text-decoration: none;
  color: white;
}

@media screen and (min-width: 1025px) {
  footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: black;
    color: white;
    padding: 2rem;
    font-family: Roboto, sans-serif;
  }
  .info-Asbl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 30%;
    text-align: left;
  }
  .socialContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 40%;
  }
  .socialLinks a {
    color: white;
    font-family: Roboto, sans-serif;
    text-decoration: none;
    font-size: rem;
  }
  .socialLinks a:hover {
    color: #db3632;
  }
  footer a {
    color: white;
    font-family: Roboto, sans-serif;
    text-decoration: none;
    font-size: 1.5rem;
  }
  footer a:hover {
    color: #db3632;
  }
}

@font-face {
  font-family: "Sedgwick";
  src: url("../fonts/SedgwickAveDisplay-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto-bold";
  src: url("../fonts/Roboto-Bold.ttf") format("truetype");
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.event-banner {
  background-image: url("../img/blockparty.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

.event-trapeze {
  background-color: none;
}

.event-description {
  color: none;
}

.event-type {
  display: none;
}

.event-video {
  display: none;
}

.event-title {
  color: white;
  height: 50vh;
  font-family: Sedgwick, sans-serif;
  font-size: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.514);
}

.event-subtitle-mobile a {
  text-decoration: none;
  color: #db3632;
}

.indigenskull {
  display: none;
}

/*TEXTE_PHOTO EN DIAGONALE PAT*/
.title {
  font-family: Sedgwick, sans-serif;
  color: #db3632;
  font-size: 2rem;
  padding: 1rem;
}

.event-text {
  font-family: Roboto, sans-serif;
  font-size: 0.9rem;
  color: black;
  padding: 1rem;
}

.title {
  font-family: Sedgwick, sans-serif;
  color: #db3632;
  font-size: 2rem;
  padding: 1rem;
}

.event-text {
  font-family: Roboto, sans-serif;
  font-size: 0.8rem;
  color: black;
  padding: 1rem;
}

.container_verse {
  overflow: hidden;
  height: 50vh;
  width: 80vw;
  text-align: right;
  margin-left: 10%;
  border-left: 2px solid #db3632;
  margin-right: 10%;
  margin-top: 5%;
  margin-bottom: 15%;
}

.shaped {
  height: 50vh;
  width: 40vw;
  float: right;
  background: black url(../img/graph.webp) center top no-repeat;
  background-size: cover;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
  shape-margin: 1.5rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
  border: 1px solid black;
}

.container_reverse {
  overflow: hidden;
  height: 50vh;
  width: 80vw;
  text-align: left;
  margin-right: 10%;
  margin-left: 10%;
  border-right: 2px solid #db3632;
  margin-top: 5%;
  margin-bottom: 15%;
}

.shaped_reverse {
  height: 50vh;
  width: 40vw;
  float: left;
  background: black url(../img/mama.webp) center top no-repeat;
  background-size: cover;
  shape-outside: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
  shape-margin: 1.5rem;
  -webkit-clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
  border: 1px solid black;
}

.title {
  font-size: 1.2rem;
  padding: 0.4rem;
}

/*disparition du banner en responsive*/
.separator-event {
  visibility: visible;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 3%;
  font-family: Roboto-bold, sans-serif;
  color: #db3632;
  font-size: 0.6rem;
  margin-top: 5%;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .event-title {
    font-size: 4rem;
  }
  .separator-event {
    visibility: visible;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 3%;
    font-family: Roboto-bold, sans-serif;
    color: #db3632;
    font-size: 1rem;
    margin-top: 5%;
  }
  .logoIndigen {
    display: none;
  }
}

.event-text {
  font-size: 1rem;
}

.title {
  font-size: 1.5rem;
}

@media only screen and (min-width: 1025px) {
  .logoIndigen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
  .indigenskull {
    display: block;
    padding-top: 10rem;
    padding-bottom: 10rem;
    width: 4rem;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .event-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    height: 85vh;
    width: 100vw;
  }
  .event-trapeze {
    -webkit-clip-path: polygon(58% 0, 100% 0%, 100% 100%, 76% 100%);
            clip-path: polygon(58% 0, 100% 0%, 100% 100%, 76% 100%);
    background-color: rgba(0, 0, 0, 0.514);
    width: 70%;
    padding: 2%;
  }
  .event-description {
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 100%;
  }
  .event-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .event-title {
    font-weight: lighter;
    font-family: Sedgwick, sans-serif;
    text-align: right;
    font-size: 4rem;
    background-color: rgba(0, 0, 0, 0);
    height: auto;
    margin-bottom: -50px;
    margin-top: -40px;
  }
  .event-subtitle {
    margin-top: 8%;
    font-weight: lighter;
    font-family: Roboto, sans-serif;
    z-index: 2;
    text-align: right;
    color: #db3632;
    font-size: 1.5rem;
  }
  .event-p {
    margin-top: 2%;
    font-weight: lighter;
    color: white;
    text-align: right;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    width: 16vw;
  }
  .textBold {
    font-family: Roboto-bold, sans-serif;
  }
  .event-video {
    margin-top: 1rem;
    width: 10vw;
    height: 15vh;
    display: block;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1920px) {
  .index-black-box {
    height: 7vh;
    width: 100vw;
    background-color: black;
  }
  .event-title {
    font-size: 4rem;
    margin-bottom: -3%;
    margin-top: -1%;
  }
  .event-subtitle {
    font-size: 1.5rem;
  }
  .event-p {
    line-height: 120%;
    font-size: 1rem;
    text-align: right;
  }
  .event-video {
    margin-top: 7%;
    width: 9rem;
    height: 6rem;
  }
  .separator-event {
    display: none;
  }
}

*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: hidden;
}

/*HEADER*/
.navbar:hover {
  opacity: 100%;
}

.opacity {
  opacity: 50%;
}

.separatorContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.separatorContainer .separatorLogo {
  width: 2rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

.separatorContainer .couvert {
  width: 7rem;
}

.triptych-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.triptych-wrapper p {
  font-size: 1.3rem;
  line-height: 95%;
}

.index-polygone-graffiti {
  width: 100vw;
  height: 15vh;
  background-image: url("../img/graffiti.webp");
  background-position: center;
  background-size: cover;
  color: white;
  text-align: center;
  font-family: Sedgwick, sans-serif;
  margin-bottom: 10px;
}

.index-polygone-graffiti .title-graffiti {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 15vh;
  background-color: rgba(0, 0, 0, 0.35);
}

.index-polygone-events {
  width: 100vw;
  height: 15vh;
  background-image: url("../img/blockparty.webp");
  background-position: center;
  background-size: cover;
  color: white;
  text-align: center;
  font-family: Sedgwick, sans-serif;
  margin-bottom: 10px;
}

.index-polygone-events .title-events {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 15vh;
  background-color: rgba(0, 0, 0, 0.35);
}

.index-polygone-tourisme {
  width: 100vw;
  height: 15vh;
  background-image: url("../img/parcoururbain.webp");
  background-position: center;
  background-size: cover;
  color: white;
  text-align: center;
  font-family: Sedgwick, sans-serif;
  margin-bottom: 10px;
}

.index-polygone-tourisme .title-tourisme {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 15vh;
  background-color: rgba(0, 0, 0, 0.35);
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .triptych-wrapper p {
    font-size: 2.5rem;
  }
  .separatorContainer {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }
  .separatorContainer .separatorLogo {
    width: 4rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .separatorContainer .couvert {
    width: 12rem;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1920px) {
  .index-polygone-graffiti {
    background-image: url("../img/graffitiNB.webp");
    background-size: cover;
    background-position: center;
    height: 74.07407407vh;
    width: 33.3333%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    margin-bottom: 0;
  }
  .index-polygone-graffiti .title-graffiti {
    height: 30vh;
    -webkit-clip-path: polygon(0 0, 0% 100%, 70% 100%);
            clip-path: polygon(0 0, 0% 100%, 70% 100%);
    background-color: rgba(255, 0, 0, 0.274);
    font-family: Sedgwick, sans-serif;
    position: relative;
  }
  .index-polygone-graffiti .title-graffiti p {
    position: absolute;
    line-height: 90%;
    left: 17%;
    bottom: 0%;
    color: white;
  }
  .index-polygone-graffiti:hover {
    background-image: url("../img/graffiti.webp");
    height: 62.5vh;
  }
  .index-polygone-graffiti:hover .title-graffiti {
    display: none;
  }
  .index-polygone-events {
    margin-left: -38px;
    margin-bottom: 0;
    background-image: url("../img/blockpartyNB.webp");
    background-size: cover;
    background-position: center;
    height: 74.07407407vh;
    width: 33.3333%;
    float: left;
    -webkit-clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0%, 100%);
    clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
  }
  .index-polygone-events .title-events {
    height: 25vh;
    -webkit-clip-path: polygon(0 0, 0 80%, 94% 0);
            clip-path: polygon(0 0, 0 80%, 94% 0);
    background-color: rgba(255, 0, 0, 0.274);
    color: white;
    font-family: Sedgwick, sans-serif;
    position: relative;
  }
  .index-polygone-events .title-events p {
    position: absolute;
    left: 25%;
    top: 0%;
    color: white;
    padding-top: 2%;
  }
  .index-polygone-events:hover {
    background-image: url("../img/blockparty.webp");
    height: 62.5vh;
  }
  .index-polygone-events:hover .title-events {
    display: none;
  }
  .index-polygone-tourisme {
    background-image: url("../img/parcoururbainNB.webp");
    background-size: cover;
    background-position: center;
    margin-left: 4vh;
    margin-bottom: 0;
    height: 74.07407407vh;
    width: 29%;
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  }
  .index-polygone-tourisme .title-tourisme {
    height: 20vh;
    -webkit-clip-path: polygon(0 0, 0 100%, 88% 100%);
            clip-path: polygon(0 0, 0 100%, 88% 100%);
    background-color: rgba(255, 0, 0, 0.274);
    color: white;
    font-family: Sedgwick, sans-serif;
    position: relative;
  }
  .index-polygone-tourisme .title-tourisme p {
    position: absolute;
    left: 7%;
    bottom: 0%;
    color: white;
  }
  .index-polygone-tourisme:hover {
    background-image: url("../img/parcoururbain.webp");
    height: 62.5vh;
    width: 26.2%;
  }
  .index-polygone-tourisme:hover .title-tourisme {
    display: none;
  }
  .triptych-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .triptych {
    -webkit-transform: scale(1.35);
            transform: scale(1.35);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  .triptych:hover {
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
  }
  .index-black-box {
    height: 7vh;
    width: 100vw;
    background-color: black;
  }
  .index-black-box-bot {
    margin-top: 25.9vh;
    width: 100vw;
    background-color: black;
  }
  .triptych-wrapper p {
    font-size: 1.8rem;
  }
  .separatorContainer {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .separatorContainer .separatorLogo {
    width: 4rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .separatorContainer .couvert {
    width: 12rem;
  }
}

@media only screen and (min-width: 1920px) {
  .triptych-wrapper p {
    font-size: 2.8rem;
  }
}

.fresco {
  background-image: url(https://www.heta-graffiti.com/wp-content/uploads/2019/05/fresque-chambery-singe.jpg);
}

.school {
  background-image: url(https://www.parissurunfil.com/wp-content/uploads/2019/05/1-art42.jpeg);
}
/*# sourceMappingURL=style.css.map */