@media screen and (min-width: 500px) {

  .rectangle{
    width: 60%;
    height: auto;
    margin-left: 20%;
  }
  .titretitretitre{
  font-size: 55px;
  }

  .texte{
    font-size: 1.3vw;
    margin-left: 33%;
  }
  .texteevenement{
    margin-left: 50%;
    font-size: 2vw;
    margin-top: 2%;
    margin-right: 5%;
    line-height: 110%;
  }
  .mouvement{
  font-size: 2vw;
  }
  .textehoraire{
    margin-left: 50%;
    font-size: 2vw;
    margin-top: 0.5%;
  }
  .textehoraire1{
    margin-left: 50%;
    font-size: 1.8vw;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-top: 0.5vw;
    padding-left: 0.5vw;
  }
  .textehoraire2{
    margin-left: 50%;
    margin-right: 5%;
  line-height: 120%;
  border-bottom: 0.3vw white solid;
  font-size: 1.5vw;
  }
  .textehoraire3{
    margin-left: 5%;
    font-size: 2vw;
    margin-top: 5%;
    margin-bottom: 2%;
    padding-top: 0.5vw;
    padding-left: 0.5vw;
  }
  .textehoraire4{
    margin-left: 5%;
    margin-right: 5%;
  border-bottom: 0.3vw white solid;
  font-size: 1.8vw;
  text-align: center;
  text-align: justify;
  }


  .titre{
      font-size: 3vw;
      margin-top: 500px;
  }
  .titre1{
      font-size: 3vw;
      margin-top: 150px;
  }
  .titre3{
      font-size: 3vw;
      margin-top: 150px;
  }
  .titretitre{
    font-size: 4vw;
  }


  .imagemusee{
    width: 27.5vw;
    height: auto;
    margin-left: 5%;
    float: left;
  }
  .imagemusee2{
    margin-top: 50px;
    width: 45vw;
    height: auto;
    margin-left: 5%;
  }
  .imagemusee3{
    margin-top: 30px;
    width: 50vw;
    height: auto;
    margin-left: 28%;
    margin-right:  30%;
  }
  .imagemusee5{
    margin-top: 30px;
    width: 50vw;
    height: auto;
    margin-left: 28%;
    margin-right:  30%;
  }

  .image7l{
  width: 400vw;
  height: auto;
  transform: rotateX(180deg);

  }
  .image7{
  width: 400vw;
  height: auto;

  }
 .image{
  width: 50%;
  margin-right:80px;
 }
 .imagel{
   width: 50%;
   margin-right: 0;
   margin-left: 50%;
 }

}

@media screen and (max-width: 700px) {
  .titretitre{
    font-size: 8vw;

  }


  .rectangle{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }
  .titretitretitre{
    font-size: 25px;

  }

  .texte{
    font-size: 4vw;
    margin-left: 5%;
      margin-top: 5%;
  }
  .texteevenement{
    margin-left: 5%;
    font-size: 5vw;
    margin-top: 5%;
    margin-right: 5%;
    line-height: 110%;
  }
  .titre{
      font-size: 7vw;
     margin-top: 80px;
  }
  .titre1{
      font-size: 7vw;
     margin-top: 80px;
  }
  .titre3{
      font-size: 7vw;
     margin-top: 80px;
  }

  .textehoraire{
    margin-left: 5%;
    font-size: 5vw;
    margin-top: 2%;

  }
  .textehoraire1{
    margin-left: 5%;
    font-size: 5vw;
    margin-top: 10%;
    margin-bottom: 5%;
    padding-top: 0.6vw;
    padding-left: 0.2vw;
  }
  .textehoraire2{
    margin-left: 5%;
    margin-right: 5%;
  line-height: 120%;
  border-bottom: 0.3vw white solid;
  font-size: 5vw;
  }
  .textehoraire3{
    margin-left: 5%;
    font-size: 5vw;
    margin-top: 10%;
    margin-bottom: 5%;
    padding-top: 0.6vw;
    padding-left: 0.2vw;
  }
  .textehoraire4{
    margin-left: 5%;
    margin-right: 5%;
  line-height: 120%;
  border-bottom: 0.3vw white solid;
  font-size: 5vw;

  }
  .imagemusee{
    width: 90vw;
    height: auto;
    margin-left: 5%;
    margin-right: 5%;
  }
  .imagemusee2{
    width: 90vw;
    height: auto;
    margin-left: 5%;
    margin-right: 5%;
  }
  .imagemusee3{
    width: 90vw;
    height: auto;
    margin-left: 5%;
    margin-right: 5%;
  }
  .imagemusee5{
    width: 90vw;
    height: auto;
    margin-left: 5%;
    margin-right: 5%;
  }
  .image7{
   flex: 0 0 auto;
   align-self: center;
   width: 201%;
  }

  .image7l{
   transform: rotateX(180deg);
   flex: 0 0 auto;
   align-self: center;
   width: 201%;
  }
  .image{
    width: 100%;
    margin-right: 0%;
  }
  .imagel{
   width: 100%;
   margin-right: 0%;
  }

}


html{
  margin:0;
  padding:0;
  border:0;
  font-family: 'brown', regular;
   scroll-behavior: smooth;
}

div {
    display: block;
}

section {
    width: 100vw;
    height: 100vh;
}

h1 {
  margin: 0;
}

h1, h2, h3, h4, h5, img,
p, a, button, input,div{
  margin: 0;
  padding: 0;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
}



@font-face {
font-family: "brown";
src: url("../fonts/Brown-regular.otf");
}

@font-face {
font-family: "brownregular";
src: url("../fonts/Brown-regular.otf");
}

@font-face {
font-family: "brownregular";
src: url("../fonts/Brown-bold.otf");
}





.show {display: block;}


how {display: block;}


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

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

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

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

.zoom-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.zoom-container {
  width: 100%;
  height: 100%;
}

.zoom-item {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  transform:  scale(0.5);

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.zoom-item__image {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

.zoom-item__logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}




.section1 {
  border: 1px solid red;
}

#left,
#right {
    width: 50vw;
    /* height: calc(100vh - 22px); */
    height: calc(100vh);
    position: fixed;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
}

#left {
  left: 0;
  overflow-y: scroll;
	overflow-x: hidden;
	transform: scale(1, -1);
}

#right {
  left: 50vw;
}

#left section,
#right section {
    width: 50vw;
}

.titre2{
  font-size: 2.5vw;
  border-bottom: solid 0.2vw;
  margin-left: 5%;
  color: red;
}
.texte{
  margin-bottom: 5%;
  margin-right: 5%;
  line-height: 110%;
}
.texteevenement{
  margin-right: 5%;
  line-height: 110%;
}
.textehoraire{
  margin-right: 5%;
line-height: 120%;
border-bottom: 0.3vw white solid;
display: flex;
justify-content: space-between;
}

.textehoraire1{
background-color: white;
color: black;
  margin-right: 5%;
  line-height: 110%;
}

.textehoraire2{
  margin-right: 5%;
line-height: 120%;
border-bottom: 0.3vw white solid;
}
.textehoraire3{
background-color: white;
color: black;
margin-right: 5%;
line-height: 110%;
text-align: center;
}
.textehoraire4{
line-height: 120%;
border-bottom: 0.3vw white solid;
}



.textemenu{
  font-size: 42px;
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 20px;
 border-bottom: 0.2vw  white solid;
}
.titremenu2{
  font-size: 25px;
}


.image{
 height: auto;
}
.imagel{
 height: auto;
 transform: rotateX(180deg);
}

.imagequartier{
   height: auto;
   width: 50vw;
   margin-right: 0%;
   position: relative;
}

.imageql{
  width: 100%;
  height: auto;
  transform: rotateX(180deg);
  margin-bottom: 50px;
  flex: 0 0;
}
.imageq{
  width: 100%;
  height: auto;
  margin-bottom:  50px;
  flex: 0 0;
}

.imagepetite{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.imagepetite2{
 width: 10%;
 height: auto;
 text-align: center;
 margin-bottom: 7%;
}





.textemusee{
  font-size: 9vw;
  margin-left: 20%;
  margin-top: 15%;
  border-bottom: solid 1vw black ;
  margin-right: 18%;
}
.titre{
 margin-left: 5%;
 margin-right: 5%;
 border-bottom: 0.3vw solid white;
  margin-bottom: 10px;
}
.titre3{
 margin-left: 5%;
 margin-right: 5%;
 border-bottom: 0.3vw solid white;
  margin-bottom: 30px;
}
.titre1{
 margin-left: 5%;
 margin-right: 5%;
 border-bottom: 0.3vw solid white;
  margin-bottom: 10px;
}



.titretitre{
  margin-left: 5%;
  margin-right: 5%;
  text-align: center;
  background-color: white ;
  color: black;
  padding-top: 1.7vw;

}

.col1 {
  position: static;
  height: 30vw;
  padding-left: 25%;
  padding-top: 0vw;
  z-index: 1;
	}

  .content {
  font-size: 28vw;
	margin: 0vw;
	height: 50%;
	transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}



.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50vw;
  margin-top: 5%;
  margin-bottom: 5%
}

.slider .slider__slide {
  position: absolute;
  left: 0;
  top: 0
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  transform: rotateY(90deg);
}

.slider .slider__slide.slide--open {
  transform: rotateY(0deg);
}

a.control_prev, a.control_next {
  position: absolute;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: 20vh;
  height: 100%;
  font-size: 0vh;
  opacity: 0;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 2vh auto;
  width: auto;
  font-size: 10vh;
}



.col2 {
  position: static;
  height: 30vw;
  padding-left: 25%;
  padding-top: 9%;
  z-index: 1;
  margin-top: 48%;
  transform: rotateX(180deg);
  }



.textemuseel{
  font-size: 9vw;
  margin-left: 20%;
  margin-bottom: 15%;
  border-bottom: solid 1vw black ;
  margin-right: 18%;
   transform: rotateX(180deg);
}
.textemusee2l{
  font-size: 3vw;
  margin-left: 13%;
  margin-bottom:  8%;
   transform: rotateX(180deg);
}
.textemusee3l{
  font-size: 3vw;
  margin-left: 13%;
  margin-bottom:  8%;
  margin-top: 15%;
   transform: rotateX(180deg);
}
.titrel{
  transform: rotate(-90deg);
  font-size: 8vw;
  margin-bottom: : 35%;
  margin-top: 20%;
    position: static;
   transform: rotateX(180deg);
}


.imagecube2{
  width: 18vw;
  height: auto;
}
.imagecube{
  width: auto;
  height: 43vw;
  margin-left: 120%;
  margin-top: 25%;
}
.titrecube{
  font-size: 5vw;
  margin-top: -5%;
  margin-left: 2%;
  margin-right: 8%;
  color: black;
  border-bottom: black 4px solid;
}
.textecube{
  font-size: 2vw;
  margin-left: 2%;
  margin-right: 3%;
  margin-top: 2%;
  color: red;
}
.scene {
  width: 100%;
  height: 100vh;
  perspective: 600px;
  position: fixed;
  top: 0;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(50vh);
}

.cube__face {
  position: absolute;
  width: 100%;
  height: 100%;

}

.cube__face--front  {
  transform: rotateY( -90deg);
}
.cube__face--right  {
  transform: rotateY( 90deg);
}
.cube__face--back   {
  transform: rotateY(180deg);
}
.cube__face--left   {
  background-color: green;
  transform: rotateY(-90deg);
}
.cube__face--top    {
  transform: rotateX( 90deg);
}
.cube__face--bottom {
  transform: rotateX(-90deg);
}

.face__content {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  margin-left: -4%;
}

.face__content2 {
  width: 100%;
  height: 100%;
  transform: rotateX(180deg);
}

.cube__face--front  { transform: rotateY(  0deg) translateZ(50vh); }
.cube__face--right  { transform: rotateY( 90deg) translateZ(50vh); }
.cube__face--back   { transform: rotateY(180deg) translateZ(50vh); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(50vh); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(50vh); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(50vh); }

.drop-down-button {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  padding: 18px;
  color: white;
  width: 100%;
  text-align: center;
}

.panel-overlay {
  color: white;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: black;
  transform: translate(0, -100%);
  transition: transform 0.9s ease-in-out;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.panel-overlay.panel-overlay__show {
  transform: translate(0, 0);
}

.close-panel {
  flex: 1 1 auto;
  padding: 10px;
}

.panels {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.panels.panels--open {
  pointer-events: all;
}

.panels .panel {
  position: absolute;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  top: 0;
  left: 0;
  background-color: black;
  color: white;
  width: 100%;
  transition: transform 1.4s ease-in-out 0s;
}

.panels .panel--right {
    transform: translate(100%, 0);
    box-shadow: -2px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

.panels .panel--left {
    transform: translate(-100%, 0);
    box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.25);
}

.panels .panel.panel--open {
  transform: translate(0%, 0);
  transition: transform 1.4s ease-in-out 1s;
}

.arrow {
  transition: transform 0.5s ease-in-out;
}

.up .arrow {
  transform: rotateY(0deg);
}

.down .arrow {
  transform: rotateZ(180deg);
}

.panel__close{
  margin-right: 0;
  margin-left: 5%;
  margin-top: 5%;
}



.alignleft {
	float: left;
}
.alignright {
	float: right;
}


.rectangle{
  position: fixed;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
 flex-flow: row nowrap;
 justify-content: center;
 align-content: center;
 align-items: center;
 height:100%;
}

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.titretitretitre{
  text-align: center;
  background-color: black;
  padding-top: 0.5vw;
  padding-left: 0.5vw;
  box-sizing: border-box;
    top: 0;
    left: 0;
    background-color: black;
    padding: 18px;
    color: white;
    width: 100%;
    text-align: center;
}