@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display&display=swap');

.mid { 
  position: relative;
  left:50%;
  transform: translateX(-50%);
}
.dts{
  position:absolute;
  font-size: 5em;
  bottom:-50vh;
  left:50%;
  transform:translateX(-50%);
  opacity: 1;
  color:#4D2777;
  cursor: pointer;
}

.dts > span:hover{
  text-shadow: -1px 0 #4D2777, 0 1px #4D2777, 1px 0 #4D2777, 0 -1px #4D2777;
}

#one .dts > span:nth-child(1){
  text-shadow: -3px 0 #4D2777, 0 3px #4D2777, 3px 0 #4D2777, 0 -3px #4D2777;
}
#two .dts > span:nth-child(2){
  text-shadow: -3px 0 #4D2777, 0 3px #4D2777, 3px 0 #4D2777, 0 -3px #4D2777;
}
#three .dts > span:nth-child(3){
  text-shadow: -3px 0 #4D2777, 0 3px #4D2777, 3px 0 #4D2777, 0 -3px #4D2777;
}
#four .dts > span:nth-child(4){
  text-shadow: -3px 0 #4D2777, 0 3px #4D2777, 3px 0 #4D2777, 0 -3px #4D2777;
}
#five .dts > span:nth-child(5){
  text-shadow: -3px 0 #4D2777, 0 3px #4D2777, 3px 0 #4D2777, 0 -3px #4D2777;
}

.portrait{
  width:80px;
  border-radius: 50%;
  float:right;
}

.decat{
  border-radius:0 !important;
  min-width: 80px;
  width:20vw;
  max-width: 200px;
  margin-top: 35px;
}

#scroll{
  width:auto;
  height:auto;
  position:relative;
  background:#fff;
  scroll-snap-type: y mandatory;
  z-index:-1;
}

div.arrows {
  position: absolute;
  width:100%;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  pointer-events: none; 
}
.shownl {
  animation: l .5s cubic-bezier(.2, .86, .26, .92);
  z-index: 9 !important;
}

.shownr {
  animation: r .5s cubic-bezier(.2, .86, .26, .92);
  z-index: 9 !important; 
}
.out {
  z-index: 8 !important; 
}

@keyframes l {
  from {left: -100%;}
  to {left: 50%;}
}
@keyframes r {
  from {left: 200%;}
  to {left: 50%;}
}

div.arrows>div{
  pointer-events: auto; 
  cursor:pointer;
  font-size: 5em;
  color: white;
  padding: 0px 20px 0px 20px ;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
div.arrows > div:hover{
  padding:0px 25px 0px 25px;
}
div.arrows > div.r{
  float:right;
}
div.arrows > div.l{
  float:left;
}


#scroll div{
  height: 500vh;
}

canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  max-height: 100vh;
}
.imgs{
  min-height:100vh;
}
#imgs{
  background: linear-gradient(180deg, rgba(77,39,119,.8)0%, rgba(143,68,112,.8) 82%, rgba(143,68,93,.8) 100%);
}

body{
  display: flex;
  flex-flow: column nowrap;
  /*scroll-snap-type: y mandatory;*/
  width:100vw;
}
.scroller-container{
  scroll-snap-align: center;
  position:relative;
  margin:0;
  padding:0;
  min-height:100vh;
  overflow-x: hidden;
  overflow-y: visible;
}
#one,#two,#three,#four,#five{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
#one{z-index:5;}
#two{z-index:4;}
#three{z-index:3;}
#four{z-index:2;}
#five{z-index:1;}
.arrows{
  display:block !important;
}
.scroller-container .text{
  position: absolute;
  display: block;
  color:white;
  background: linear-gradient(90deg, rgba(77,39,119,.8)0%, rgba(143,68,112,.8) 82%, rgba(143,68,93,.8) 100%);
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  width:70vw;
  max-width:700px;
  max-height:80vh;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;
  border:none;
  border-radius:20px 0 20px 0px;
  padding:30px;
  font-size:1em;
  box-shadow: 0px 0px 23px -4px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 0px 23px -4px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 23px -4px rgba(0,0,0,0.25);
  margin-bottom: 70px;
}
.scroller-container .text.video{
  width:70vw;
  max-width:33.75vh !important;
}
.scroller-container .text::-webkit-scrollbar {
  display: none;
}
.scroller-container h1 {
  font-family: 'Big Shoulders Display', cursive;
  display: inline-block;
  
}
.scroller-container > .text > div {
  position: relative;
  width:100%;
  height:100%;
}
.btn_container {
  position: relative;
  height: 69px;
}

.allbtns {
  display: flex;
  justify-content: center;
}

.btn-shop,
.subbtn {
  cursor: pointer;
  padding-left: 20px;
  padding-right: 20px;
  height: 50px;
  width: 50vw;
  max-width: 250px;
  min-width: 120px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(77, 39, 119, 1) 0%, rgba(143, 68, 112, 1) 82%, rgba(143, 68, 93, 1) 100%);
  color: #4D2777;
  background: white;

  font-weight: bolder;
  text-align: center;
  font-size: 1.4em;
  padding-top: 19px;
}

h4{
  margin-bottom: 5px;
}

.non {
  opacity: 0;
  min-width: 0px;
}

.subbtn {
  width: 69px;
  height: 69px;
  padding: 0px;
}

.phonee,
.mail {
  opacity: 0;
  min-width: 0px;
  border-radius: 0;
}
.mail {
  border-radius:   0 18px 18px 0  ;
}

.btn_container:hover .btn-shop{
  animation: border .5s forwards cubic-bezier(.53,1.09,.8,.98) ;
}


/*
.btn_container:hover .phonee {
  animation: color .5s forwards cubic-bezier(.53,1.09,.8,.98);
}

.btn_container:hover .mail {
  animation: color .5s forwards cubic-bezier(.53,1.09,.8,.98);
  animation-delay: .2s;
}

.phonee:hover,.mail:hover{
  background: rgba(255, 255, 255,.8);
}
*/     /* ANIMATIONS APPARITION ET TT*/

@keyframes color {
  0% {
    min-width: 0px;
    opacity: 0;
  }
  20%{
    
  }
  100% {
    min-width: 69px;
    opacity: 1;
  }
}

/*
@keyframes border {
  from{border-radius: 18px;background: #fff;}
  to{border-radius:18px 0 0 18px;background: rgba(255, 255, 255,.8);}
}
*/    /* ANIMATIONS APPARITION ET TT*/
@keyframes border {
  from{background: #fff;}
  to{background: rgba(255, 255, 255,.8);}
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
body > div#main, body div#market{
  scroll-snap-align: center;
}
.scroller{
  height:100vh;
  display:block;
  
  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}