html {
  /* scroll-snap-type: y mandatory; */
  overscroll-behavior: none;
  overflow: smooth;
}
body {
  font-size:2vw;
  background: #0e0e0e;
  margin:0;
  padding:0;
  font-family: proxima-nova,sans-serif;
/* height: 100vh; */
/* overflow: auto; */
z-index: -999999999999999999999999999999999;
}

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

#mobile{
    display: none;
}



.container{
  /* margin-top: -30px; */

  width: 100vw;
  position: relative;
  float: left;
  overflow: hidden;
  z-index: -9999999;
  background: #0e0e0e;
  scroll-snap-align: start;
  overflow: hidden;
  height: 300vh;
  z-index: -99999999999999999;
  pointer-events: visible;
  pointer-events: visibleFill;
}

/* logo icon */
.logo-Wrap{
    position: absolute;
    width: 25vw;
    height: 50vh;
    top: 0;
  /* position:  fixed; */
  z-index: 99999999;
  /* background: red; */
}

.logo{
position: relative;
z-index:1;
width: 25vw;
height: 50vh;
transform-origin: center;
transform: scale(.2);
pointer-events: visible;
pointer-events: visibleFill;
}

/* line start */


.line-vertical{
  z-index: 999999999;
  opacity:0.4;
  width: 1px;
  height: 300vh;
  position: absolute;
  background: white;
animation: scale-ver .95s cubic-bezier(0.55,0.05,0.855,0.06) both;
}
.line-vertical-1{
  left: 25vw;
}
.line-vertical-2{
  left: 50vw;
  z-index: 99999;
}
.line-vertical-3{
  left: 75vw;
}


.line-middle{
  z-index: 99999;
  width: 100vw;
  height: 1px;
  background: white;
  position: absolute;
  opacity:0.4;
animation: scale-ho .95s cubic-bezier(0.55,0.05,0.855,0.06) both;
}
.line-middle-1{
  top: 0vh;
}
.line-middle-2{
  top: 50vh;
}
.line-middle-3{
  top: 100vh;
}

.line-middle-5{
  top: 150vh;
  z-index: 999999;
}
.line-middle-6{
  top: 200vh;
    z-index: 999999;
}
.line-middle-7{
  top: 250vh;
  z-index: 999999;
}
.line-middle-8{
  top: 299.9vh;
  z-index: 999999;
}



/* line end */

.img-page01-1{
  position: absolute;
  left: 300px;
}
.img-page01-1.clicked{
  transform: scale(2);
}

/* A img */
.Aimg-Wrap{
    position: relative;
    width: 25vw;
    height: 50vh;
    top: 0vh;
    left: 50%;
    /* background: red; */
    text-align: center;
background: #0e0e0e;
/* animation: intro 2s ease; */
animation: intro2 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

z-index: 999;
}


.Aimg{
  height: 75%;
  margin: 0;
    /* background: yellow; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}


@-webkit-keyframes intro2{0%{-webkit-transform:translateZ(80px);transform:translateZ(80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-bck{0%{-webkit-transform:translateZ(80px);transform:translateZ(80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes fade-in-bl{0%{-webkit-transform:translateX(-50px) translateY(50px);transform:translateX(-50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-bl{0%{-webkit-transform:translateX(-50px) translateY(50px);transform:translateX(-50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes fade-in-br{0%{-webkit-transform:translateX(50px) translateY(50px);transform:translateX(50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-br{0%{-webkit-transform:translateX(50px) translateY(50px);transform:translateX(50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-in-tl{0%{-webkit-transform:translateX(-50px) translateY(-50px);transform:translateX(-50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-tl{0%{-webkit-transform:translateX(-50px) translateY(-50px);transform:translateX(-50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes fade-in-tr{0%{-webkit-transform:translateX(50px) translateY(-50px);transform:translateX(50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-tr{0%{-webkit-transform:translateX(50px) translateY(-50px);transform:translateX(50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}

/* Menu-icon start */

.halfbox{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background: blue; */
    z-index: 111;
}

.menu-icon-Wrap{
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
background: #0e0e0e;
z-index: 9999;
/* background: red; */
/* position: fixed; */

}



.x-icon-Wrap{
width: 60px;
height: 60px;
position: relative;
background: yellow;
background: #0e0e0e;
z-index: 9999;
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;



animation: intro 1.5 ease-in-out;
}





.x-iconWW{
width: 60px;
height: 60px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
/* background: yellow; */
z-index: 9999;
}
.x-icon{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  transition: 0.7s ease-in-out;
  background: white;

}
.x-icon-1{
transform:rotate(-45deg);
transform-origin: center;
}
.x-icon-2{
transform:rotate(45deg);
transform-origin:center;

}

.x-iconWW:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* X icon END */

/* scroll */
.scroll-Wrap{
    position: absolute;
    width: 25vw;
    height: 50vh;
    top: 50vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background:#0e0e0e;
    z-index: 9999;
}
.scroll-text{
    z-index: 111;
    margin: 0;
    font-family: proxima-nova,sans-serif;
    font-weight: 300;
    font-size:1.2rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.25em;
    position: absolute;
    animation: intro 1.5s ease-in-out;
}


.line-scroll{
  z-index: 99;
  position: absolute;
    top: 54%;
  height: 70px;
  width: 1.3px;
  background: rgba(255,255,255,.4);
margin: 0;
  animation: line 1.5s  1.5s infinite ease-in-out both;
  }

  @-webkit-keyframes line {
    0% {
      transform: scaleY(0);
      transform-origin: 0% 100%;
      opacity: 1;
    }
    1% {
      transform: scaleY(1);
      transform-origin: 0% 100%;
      opacity: 1;
    }
    33.3% {
      transform: scaleY(0);
      transform-origin: 0% 100%;
      opacity: 1;
    }
    66.6% {
      transform: scaleY(0);
      transform-origin: 0% 0%;
      opacity: 1;
    }
    100% {
      transform: scaleY(1);
      transform-origin: 0% 0%;
      opacity: 1;
    }
  }

  @-webkit-keyframes opacity {
    0% {
background: black;
      opacity: 1;


    }
    99% {
background: black;
      opacity: 1;


    }

    100% {
  background: white;
      opacity: 0;


    }
  }


  /* scorll end */




  /* -text */

.artist-name{
  position: relative;
/* left: -8px; */
top: 10px;
  font-size: 1rem;

font-style: normal;
float: right;
}
/* copy*/
.copyright-Wrap{
  margin-top: -42px;
  position: absolute;
  width: 25vw;
  height: 50vh;
  left: 50%;
  top: 250vh;
  z-index: 99999;
  font-family: proxima-nova, sans-serif;
  background: #0e0e0e;
  z-index: 9999;
  }
.copyright-text-Wrap{
  height: 50vh;
  width: 25vw;
  font-size: 1rem;
  color: #f0f0f0;
  line-height: 1.5;
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
}
.copyright{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 200px 40px 40px 40px;
}
.quatation-Wrap5{
  height: 50vh;
  width: 25vw;
  position: absolute;
  left: 25vw;
  top: 250vh;
  font-size: 1em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.quatation5{
  overflow: hidden;
  margin: 0;
  position: absolute;
  line-height: 1.5;
  font-size: 1.25rem;
  color: #f0f0f0;
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
  font-style: italic;
}

/* -text end */


/* -img start */
.imgWrap{
  position: relative;
  width: 25vw;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
  overflow: hidden;

}
.imgP1{
  position: absolute;
  width: 25vw;
  margin: 0;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  vertical-align: middle;
  cursor:grab;
}

.img{
  position: absolute;
  background: #0e0e0e;
}

.img1 img {
  overflow: hidden;
  animation-duration: 1.5s;
  animation: slide-in-bottom2img 2.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) both;
}

.img2 img {
  overflow: hidden;

  animation: slide-in-bottom2img 2.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) both;
}
.img1{
  z-index: -99;
  top: 50vh;
  left: 50%;
  overflow: hidden;
  /* transition: transform .3s, box-shadow .4s; */
  transform: scale(1);
  transition: .3s all;

}

.img2{

  top: 50vh;
  left: 75%;
  /* animation: slide-in-bottom1 2s  ease-in-out; */
  overflow: hidden;
  transform-origin: center;
  transform: scale(1);
}

.img2:hover {
  width: 25vw;
  height: 50vh;
  overflow: hidden;
  z-index: -9999999;
  position: absolute;


}


.img3{
  z-index: 9;
  top: 100vh;
  left: 0%;
  transform: scale(1);
  transform-origin: center;
}
.img4{
  z-index: 9;
  top: 100vh;
  left: 25%;
  transform: scale(1);
  transform-origin: center;

}
.img5{
  z-index: 99;
  top: 100vh;
  left: 50%;
  transform: scale(1);
  transform-origin: center;
}
.img5:hover{
  z-index: -99999999;
  z-index: 99;
  top: 100vh;
  left: 50%;
  transform: scale(1);
  transform-origin: center;
}

.img6{
z-index: 999;
top: 100vh;
left: 75%;
transform: scale(1);
z-index: -9;

}
.img7{
  z-index: 999;
  top: 150vh;
  left: 0%;
transform: scale(1);
}

.img8{

  z-index: 999;
  top: 150vh;
  left: 25%;
transform: scale(1);

}
.box88{
  position: absolute;
  z-index: 999999;
  width: 25vw;
  height: 50vh;
   left: 25%;
   top: 200vh;
  background: #0e0e0e;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.box99{
  position: absolute;
  z-index: 99999;
  width: 25vw;
  height: 50vh;
   left: 50%;
   top: 200vh;
  background: #0e0e0e;
}
.box999{
  position: absolute;
  z-index: 99999;
  width: 25vw;
  height: 50vh;
   left: 75%;
   top: 200vh;
  background: #0e0e0e;
}

.img9{
  z-index: 999;
  top: 150vh;
  left: 50%;
transform: scale(1);
background: #0e0e0e;
}

.img10{
  z-index: 999;
  top: 150vh;
  left: 75%;
transform: scale(1);
}

.img11{
  z-index: 999;
  top: 200vh;
  left: 0%;
transform: scale(1);
background: #0e0e0e;
}


.img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9, .img10, .img11{
  transition: .3s all;
  overflow: hidden;

}

.title{
  position: absolute;
  opacity: 1;
  color: #f0f0f0f0;
  background: rgba(14, 14, 14, 0.85);
  width: 25vw;
  height: 50vh;
  line-height: 50vh;
  text-align: center;
  z-index: 999999;
  margin: 0;
  font-size: 55%;
  font-weight: 600;
  font-family: proxima-nova-condensed, sans-serif;
  letter-spacing: 0.3em;
  text-transform:uppercase;
  /* transition: .3s all; */
  opacity: 0;
  pointer-events: none;
  cursor:grab;
}

.img2:hover {
      overflow: hidden;
      transition: 0s;
}
.img1:hover {
      z-index: -999;
      overflow: hidden;
      transition: 0s;
      transition: .3s all;

}





.img1:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
width: 25vw;

}

.img2:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
width: 25vw;
}

.img3:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
  width: 25vw;
}
.img4:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
  width: 25vw;
}
.img5:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
  overflow: hidden;
  width: 25vw;


}
.img6:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
  width: 25vw;
}
.img7:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
  width: 25vw;
}
.img8:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
  width: 25vw;
}
.img9:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
  width: 25vw;
}
.img10:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
  width: 25vw;
}
.img11:hover .title{
  opacity: 1;
  cursor:grab;
  transition: .3s all;
  width: 25vw;
}





.img1:hover{
  cursor:grab;
  transition: .3s all;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);

}

.img2:hover{
  cursor:grab;
  transition: .3s all;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);
}
.img3:hover{
  cursor:grab;
  transition: .3s all;
  z-index: -9;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);
    z-index: -9999;
}
.img4:hover{
  cursor:grab;
  transition: .3s all;
  z-index: -9;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);
    z-index: -9999;
}
.img5:hover{
  cursor:grab;
  transition: .3s all;
  z-index: -9;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);
    z-index: 99;
}
.img6:hover{
  cursor:grab;
  transition: .3s all;
  z-index: -9;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);
    z-index: -9999;
}

.img7:hover{
  cursor:grab;
  transition: .3s all;
  z-index: -9;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);
    z-index: -9999;
}
.img8:hover{
  cursor:grab;
  transition: .3s all;
  z-index: -9;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);
    z-index: -9999;
}

.img9:hover{
  cursor:grab;
  transition: .3s all;
  z-index: -9;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);
    z-index: -9999;
}

.img10:hover{
  cursor:grab;
  transition: .3s all;
  z-index: -9;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);
    z-index: -9999;
}
.img11:hover{
  cursor:grab;
  transition: .3s all;
  z-index: -9;
  transform: perspective(1px) scale(1.048); transform: perspective(1px) scale(1.048);
  transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  transform: perspective(1px) scale(1.1);
    z-index: -9999;
}




@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



@keyframes slide-in-bottom1 {

  0% {
            transform: translateY(50vh);
    opacity: 0;
  }
  50% {
            transform: translateY(50vh);
    opacity: 0;
  }
  100% {
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom2 {

  0% {
            transform: translateY(50vh);
    opacity: 0;
  }
  50% {
            transform: translateY(50vh);
    opacity: 0;
  }
  100% {
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom2img {


  0% {
            transform: translateY(50vh) translateX(-50%);
    opacity: 0;
  }
  100% {
            transform: translateY(-50%) translateX(-50%);
    opacity: 1;
  }
}






.bkbox1{
  width: 25vw;
  height: 50vh;
  background: #0e0e0e;
  position: absolute;
  top: 100vh;
  left: 50%;
z-index: 9;
}
/* .bkbox2{
  width: 25vw;
  height: 50vh;
  background: #0e0e0e;
  position: absolute;
  top: 100vh;
  left: 75%;
z-index: 9;
} */


/*
*/




/* text start */
 .textWWW1{
    width: 25vw;
    height: 50vh;
    position: absolute;
    top: 50vh;
    left: 75vw;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
       pointer-events : none;
}
.textWWW2{
   width: 25vw;
   height: 50vh;
   position: absolute;
   top: 50vh;
   left: 75vw;
   z-index: 999;

   display: flex;
   align-items: center;
   justify-content: center;
      pointer-events : none;
}

.textWWW3{
   width: 25vw;
   height: 50vh;
   position: absolute;
   top: 50vh;
   left: 75vw;
   z-index: 999;

   display: flex;
   align-items: center;
   justify-content: center;
      pointer-events : none;
}

.textWWW4{
   width: 25vw;
   height: 50vh;
   position: absolute;
   top: 50vh;
   left: 75vw;
   z-index: 999;

   display: flex;
   align-items: center;
   justify-content: center;
      pointer-events : none;
}

.textWWW5{
   width: 25vw;
   height: 50vh;
   position: absolute;
   top: 50vh;
   left: 75vw;
   z-index: 999;

   display: flex;
   align-items: center;
   justify-content: center;
      pointer-events : none;
}


.textWWW6{
   width: 25vw;
   height: 50vh;
   position: absolute;
   top: 50vh;
   left: 75vw;
   z-index: 999;

   display: flex;
   align-items: center;
   justify-content: center;
      pointer-events : none;
}

.textWWW7{
   width: 25vw;
   height: 50vh;
   position: absolute;
   top: 50vh;
   left: 75vw;
   z-index: 999;

   display: flex;
   align-items: center;
   justify-content: center;
      pointer-events : none;
}

.textWWW8{
   width: 25vw;
   height: 50vh;
   position: absolute;
   top: 50vh;
   left: 75vw;
   z-index: 999;

   display: flex;
   align-items: center;
   justify-content: center;
      pointer-events : none;
}

.textWWW9{
   width: 25vw;
   height: 50vh;
   position: absolute;
   top: 50vh;
   left: 75vw;
   z-index: 999;

   display: flex;
   align-items: center;
   justify-content: center;
      pointer-events : none;
}

.textWWW10{
   width: 25vw;
   height: 50vh;
   position: absolute;
   top: 50vh;
   left: 75vw;
   z-index: 999;

   display: flex;
   align-items: center;
   justify-content: center;
      pointer-events : none;
}
.quatation-Wrap{
    top: 0;
    position: absolute;
    width: 25vw;
    height: 50vh;
    left: 25%;
    top: 50vh;
    z-index: 99;
    font-size: 1.25em;

    background: #0e0e0e;


  }


.quatation-text-Wrap{
  height: 50vh;
  width: 25vw;
  overflow: hidden;
  display: flex;
 align-items: center;
 justify-content: center;
     overflow: hidden;
     z-index: 99;
     animation: intro 2s ease-in-out;

}
.quatation{
margin: 0;
position: absolute;
padding: 10px 40px 10px 40px;
line-height: 1.5;
font-size: 1.25rem;
color: #f0f0f0;
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: italic;
}


.textWWW11{
    width: 25vw;
    height: 50vh;
    position: absolute;
    top: 50vh;
    left: 75vw;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events : none;
}

 .Big-text{
  margin: 0;
  position: absolute;
  line-height: 1.5;
  font-family: proxima-nova, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
  color: #f0f0f0;
     pointer-events : none;
}
 .lightText{
  font-weight: 300;
  opacity: 0.6;
  padding-right:2px;
  position: relative;
}
 .TitleText{
  font-size: 1rem;
  font-family: proxima-nova, sans-serif;
  font-weight: 500;
}


.Bigimg1, .Bigimg2, .Bigimg3, .Bigimg4, .Bigimg5, .Bigimg6, .Bigimg7, .Bigimg8, .Bigimg9, .Bigimg10, .Bigimg11{
opacity: 0;
}

.textWWW2, .textWWW1, .textWWW3, .textWWW4, .textWWW5,
 .textWWW6, .textWWW7, .textWWW8, .textWWW9, .textWWW10, .textWWW11{
  opacity: 0;
}

.Bigimg2{
  position:absolute;
  top:0;
}

.BigimgW{
  pointer-events : none;

}
/* text end */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */
/* Click function */

/* text animation end.  */
.active-0 .quatation-Wrap5{
  display: none;
}
.active-1 .quatation-Wrap5{
  display: none;
}
.active-2 .quatation-Wrap5{
  display: none;
}
.active-3 .quatation-Wrap5{
  display: none;
}
.active-4 .quatation-Wrap5{
  display: none;
}
.active-5 .quatation-Wrap5{
  display: none;
}
.active-6 .quatation-Wrap5{
  display: none;
}
.active-7 .quatation-Wrap5{
  display: none;
}
.active-8 .quatation-Wrap5{
  display: none;
}
.active-9 .quatation-Wrap5{
  display: none;
}
.active-10 .quatation-Wrap5{
  display: none;
}
.active-0 .container{
  height: 100vh;
  position: fixed;
}
.active-1 .container{
  height: 100vh;
  position: fixed;
}
.active-2 .container{
  height: 100vh;
}
.active-3 .container{
  height: 100vh;
}
.active-4 .container{
  height: 100vh;
}
.active-5 .container{
  height: 100vh;
}
.active-6 .container{
  height: 100vh;
}
.active-7 .container{
  height: 100vh;
}
.active-8 .container{
  height: 100vh;
}
.active-9 .container{
  height: 100vh;
}
.active-10 .container{
  height: 100vh;
}
.active-11 .container{
  height: 100vh;
}



 .active-0 .textWWW1{
 opacity: 1;
 animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 animation-delay: 1.5s;
}

.active-1 .textWWW2{
opacity: 1;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.5s;
}

.active-2 .textWWW3{
opacity: 1;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.5s;
}

.active-3 .textWWW4{
opacity: 1;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.5s;
}

.active-4 .textWWW5{
opacity: 1;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.5s;
}

.active-5 .textWWW6{
opacity: 1;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.5s;
}

.active-6 .textWWW7{
opacity: 1;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.5s;
}

.active-7 .textWWW8{
opacity: 1;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.5s;
}

.active-8 .textWWW9{
opacity: 1;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.5s;
}

.active-9 .textWWW10{
opacity: 1;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.5s;
}

.active-10 .textWWW11{
opacity: 1;
animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-delay: 1.5s;
}




@keyframes slide-in-bottom {
 0% {
           transform: translateY(1000px);
   opacity: 0;
 }
 100% {
           transform: translateY(0);
   opacity: 1;
 }
}
/* explanation animation end  */






.active-0 .img-page01, .active-0 .quatation-Wrap{
  animation: slide-out-bottom222 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
transform-origin: center;
}


@keyframes slide-out-bottom222 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
}



/* small disappear *//* disappear *//* disappear *//* disappear */

.active-0 .img1{
  z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-0 .img2{
  z-index: -9;

  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-0 .img3{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-0 .img4{

  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-0 .{

  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
/* 2 */
.active-1 .img1{
  z-index: -9;

  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-1 .img2{
  z-index: -9;

  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-1 .img3{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-1 .img4{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-1 .{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

/* 3 */
.active-2 .img1{
  z-index: -9;

  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-2 .img2{
  z-index: -9;

  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-2 .img3{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-2 .img4{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-2 .{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

/* 4 */
.active-3 .img1{
  z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-3 .img2{
  z-index: -9;

  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-3 .img3{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-3 .img4{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-3 .{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

/* 5 */
.active-4 .img1{
  z-index: -99999;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-4 .img2{
    z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.active-5 .img1{
  z-index: -99999;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-5 .img2{
    z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-6 .img1{
  z-index: -99999;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-6 .img2{
    z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.active-7 .img1{
  z-index: -99999;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-7 .img2{
    z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.active-8 .img1{
  z-index: -99999;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-8 .img2{
    z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.active-9 .img1{
  z-index: -99999;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-9 .img2{
    z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}


.active-10 .img1{
  z-index: -99999;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-10 .img2{
    z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.active-11 .img1{
  z-index: -99999;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-11 .img2{
    z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-4 .img3{
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-4 .img4{

  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
.active-4 .{
  z-index: -9;
  animation: slide-out-bottom 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

@keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
}

/* disappear END*//* disappear *//* disappear *//* disappearEND */

/* All disappear *//* All disappear *//* All disappear *//* All disappear */

.active-0 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-1 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-2 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-3 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-4 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-5 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-6 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-7 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-8 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-9 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-10 .Aimg-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.active-0 .scroll-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-1 .scroll-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-2 .scroll-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-3 .scroll-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-4 .scroll-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.active-0 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-1 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-2 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-3 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-4 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-5 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-6 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-7 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-8 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-9 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-10 .quatation-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.active-0 .copyright-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-1 .copyright-Wrap{
  animation: fade-out-bck 1.5 cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-2 .copyright-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-3 .copyright-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.active-4 .copyright-Wrap{
  animation: fade-out-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes fade-out-left{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-50px);opacity:0}}@keyframes fade-out-bl{0%{transform:translateX(0) translateY(0);opacity:1}100%{transform:translateX(-50px) translateY(50px);opacity:0}}@keyframes fade-out-tl{0%{transform:translateX(0) translateY(0);opacity:1}100%{transform:translateX(-50px) translateY(-50px);opacity:0}}@keyframes fade-out-bottom{0%{transform:translateY(0);opacity:1}100%{transform:translateY(50px);opacity:0}}@keyframes fade-out-br{0%{transform:translateX(0) translateY(0);opacity:1}100%{transform:translateX(50px) translateY(50px);opacity:0}}@keyframes fade-out-right{0%{transform:translateX(0);opacity:1}100%{transform:translateX(50px);opacity:0}}@keyframes fade-out-tr{0%{transform:translateX(0) translateY(0);opacity:1}100%{transform:translateX(50px) translateY(-50px);opacity:0}}@keyframes fade-out-top{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-50px);opacity:0}}@keyframes fade-out-fwd{0%{transform:translateZ(0);opacity:1}100%{transform:translateZ(80px);opacity:0}}@keyframes fade-out-bck{0%{transform:translateZ(0);opacity:1}100%{transform:translateZ(-80px);opacity:0}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}

/* All disappear END *//* All disappear END *//* All disappear END *//* All disappear END */


/* Click Big image appear -1 */
.active-0 .BigimgW
{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 0;

 }
.active-0 .Bigimg1{
    z-index: 99999;
    position:absolute;
    top: 0;
    width: 50vw;
    margin: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    opacity:1;
    animation: slide-in-bottom 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}

/* Click Big image appear end -1    */
/* Click Big image appear -2 */
.active-1 .BigimgW
{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    display: flex;
  align-items: center;
  justify-content: center;
 }

 .active-1 .Bigimg2{
  /* position: fixed; */
    z-index: 999999;
    position:absolute;
    width: 50vw;
    margin: 0;
    opacity:1;
    top: -15px;
    animation: slide-in-bottom 1.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}


/* Click Big image appear end -2   */
/* Click Big image appear -3 */

.active-2 .BigimgW
{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  z-index: 999999;
 }
 .active-2 .Bigimg3{
  background: yellow;
 z-index: 999999;
 position:absolute;
    top: 47px;
    width: 45vw;
    margin: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    opacity:1;
    animation: slide-in-bottom 1.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}
.active-2 .Bk-img3{
 background:#0e0e0e;
 z-index: 999998;
 position:absolute;
 width: 50vw;
 height: 100vh;
 margin: 0;
 display: block;
    margin-left: auto;
    margin-right: auto;
 opacity:1;
 left: 25%;
 animation: slide-in-bottom 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}

/* Click Big image appear end -3    */
/* Click Big image appear -4 */

.active-3 .BigimgW
{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  z-index: 999999;
 }
 .active-3 .Bigimg4{
  background: yellow;
 z-index: 999999;
 position:absolute;
    top: 55px;
    width: 40vw;
    margin: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    opacity:1;
    animation: slide-in-bottom 1.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}
.active-3 .Bk-img4{
 background:#0e0e0e;
 z-index: 999998;
 position:absolute;
 width: 50vw;
 height: 100vh;
 margin: 0;
 display: block;
    margin-left: auto;
    margin-right: auto;
 opacity:1;
 left: 25%;
 animation: slide-in-bottom 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}


/* Click Big image appear end -4    */
/* Click Big image appear -5 */
.active-4 .BigimgW
{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: red; */
    position: absolute;
    top: 0;
 }
.active-4 .Bigimg5{
  z-index: 999991;
  position:absolute;
  width: 45vw;
  margin: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity:1;
  animation: slide-in-bottom 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}
 .active-4 .Bk-img5{
  background:#0e0e0e;
  z-index: 99999;
  position:absolute;
  top: 0px;
  width: 50vw;
  height: 100vh;
  margin: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity:1;
  left: 25%;
  animation: slide-in-bottom 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}

/* Click Big image appear end -5    */
/* Click Big image appear -6 */


 .active-5 .BigimgW
{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: red; */
    position: absolute;
    top: 0;
 }

.active-5 .Bigimg6{
  position:absolute;
  width: 50vw;
z-index: 999999;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity:1;
  animation: slide-in-bottom 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}

/* Click Big image appear end -6    */
/* Click Big image appear -7 */
.active-6 .BigimgW
{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: red; */
    position: absolute;
    top: 0;
 }
.active-6 .Bigimg7{
  z-index: 99999;
  position:absolute;
  top: -10vh;
  width: 50vw;
  margin: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity:1;
  animation: slide-in-bottom 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}
/* Click Big image appear end -7    */
/* Click Big image appear -8 */
.active-7 .BigimgW
{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: red; */
    position: absolute;
    top: 0;
 }
.active-7 .Bigimg8{
  z-index: 99999;
  position:absolute;
  top: 0vh;
  width: 50vw;
  margin: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity:1;
  animation: slide-in-bottom 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}

/* Click Big image appear end -8    */
/* Click Big image appear -9 */
.active-8 .BigimgW
{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: red; */
    position: absolute;
    top: 0;
 }
.active-8 .Bigimg9{
  z-index: 99999;
  position:absolute;
  top: 0vh;
  width: 50vw;
  margin: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity:1;
  animation: slide-in-bottom 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}
/* Click Big image appear end -9    */
/* Click Big image appear -10 */
.active-9 .BigimgW
{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: red; */
    position: absolute;
    top: 0;
 }
.active-9 .Bigimg10{
  z-index: 99999;
  position:absolute;
  top: 0;
  width: 50vw;
  margin: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity:1;
  animation: slide-in-bottom 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;




}
/* Click Big image appear end -10   */
/* Click Big image appear -11 */
.active-10 .BigimgW
{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    display: flex;
  align-items: center;
  justify-content: center;
 }

 .active-10 .Bigimg11{
    z-index: 999999;
    position:absolute;
    width: 50vw;
    margin: 0;
    opacity:1;
    top: 0px;
    animation: slide-in-bottom 1.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.5s both;
}




@keyframes slide-in-bottom {
  0% {
            transform: translateY(1000px);
    opacity: 0;

  }
  100% {
            transform: translateY(0);
    opacity: 1;
  }
}






#scrollMarker {
  position: absolute;
  left:10000px;
  width:10px;
  height:10px;
}



/* X-ICON START*/
/* X-ICON START*/
/* X-ICON START*/
/* 1 X-icon *//* 1 X-icon *//* 1 X-icon *//* 1 X-icon */
.active-0 .menu-icon-Wrap{
  display: none;
}
 .active-0 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-0 .menu-icon-Wrap2{
   /* position: fixed; */
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
background: : yellow;

}

 .active-0 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}


 .active-0 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-0 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;

}
 .active-0 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-0 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;

}

.active-0 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* 1 X-icon end*//* 1 X-icon end*//* 1 X-icon end*//* 1 X-icon end*/
/* 2 X-icon *//* 2 X-icon *//* 2 X-icon *//* 2 X-icon *//* 2 X-icon */
.active-1 .menu-icon-Wrap{
  display: none;
}

 .active-1 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-1 .menu-icon-Wrap2{
   /* position: fixed; */
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;

background: : yellow;

}

 .active-1 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}



 .active-1 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-1 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;

}
 .active-1 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-1 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;

}

.active-1 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* 2 X-icon end*//* 2 X-icon end*//* 2 X-icon end*//* 2 X-icon end*/
/* 2 X-icon *//* 2 X-icon *//* 2 X-icon *//* 2 X-icon *//* 2 X-icon */
.active-2 .menu-icon-Wrap{
  display: none;
}

 .active-2 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-2 .menu-icon-Wrap2{
   /* position: fixed; */
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;

background: : yellow;

}

 .active-2 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}


 .active-2 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-2 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;

}
 .active-2 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-2 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;

}

.active-2 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* 2 X-icon end*//* 2 X-icon end*//* 2 X-icon end*//* 2 X-icon end*/
/*3 X-icon *//* 3 X-icon *//* 2 X-icon *//* 2 X-icon *//* 2 X-icon */
.active-3 .menu-icon-Wrap{
  display: none;
}

 .active-3 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-3 .menu-icon-Wrap2{
   /* position: fixed; */
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;

background: : yellow;
}

 .active-3 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}


 .active-3 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-3 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;

}
 .active-3 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-3 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;

}

.active-3 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* 4 X-icon end*//* 4 X-icon end*//* 2 X-icon end*//* 2 X-icon end*/
/* 5 X-icon *//* 5 X-icon *//* 5 X-icon *//* 5 X-icon *//* 5 X-icon */

.active-4 .menu-icon-Wrap{
  display: none;
}

 .active-4 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-4 .menu-icon-Wrap2{
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
/* position: fixed; */
background: : yellow;
}

 .active-4 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}

 .active-4 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-4 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;
}
 .active-4 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-4 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;
}
.active-4 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}

/* 5 X-icon end*//* 5 X-icon end*//* 5 X-icon end*//* 5 X-icon end*/
/* 6 X-icon *//* 6 X-icon *//* 6 X-icon *//* 6 X-icon *//* 6 X-icon */
.active-5 .menu-icon-Wrap{
  display: none;
}

 .active-5 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-5 .menu-icon-Wrap2{
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
/* position: fixed; */
background: : yellow;
}

 .active-5 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}


 .active-5 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-5 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;
}
 .active-5 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-5 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;
}
.active-5 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* 7-xicon  *//* 7-xicon  *//* 7-xicon  *//* 7-xicon  *//* 7-xicon  */
.active-6 .menu-icon-Wrap{
  display: none;
}

 .active-6 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-6 .menu-icon-Wrap2{
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
/* position: fixed; */
background: : yellow;
}

 .active-6 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}

 .active-6 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-6 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;
}
 .active-6 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-6 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;
}
.active-6 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}

/* 8-xicon  *//* 8-xicon  *//* 8-xicon  *//* 8-xicon  *//* 8-xicon  */
.active-7 .menu-icon-Wrap{
  display: none;
}

 .active-7 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-7 .menu-icon-Wrap2{
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
/* position: fixed; */
background: : yellow;
}

 .active-7 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}


 .active-7 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-7 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;
}
 .active-7 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-7 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;
}
.active-7 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* 9-xicon *//* 9-xicon *//* 9-xicon *//* 9-xicon *//* 9-xicon */
.active-8 .menu-icon-Wrap{
  display: none;
}

 .active-8 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-8 .menu-icon-Wrap2{
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
/* position: fixed; */
background: : yellow;
}

 .active-8 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}


 .active-8 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-8 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;
}
 .active-8 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-8 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;
}
.active-8 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* 10-xicon *//* 10-xicon *//* 10-xicon *//* 10-xicon *//* 10-xicon *//* 10-xicon */
.active-9 .menu-icon-Wrap{
  display: none;
}

 .active-9 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-9 .menu-icon-Wrap2{
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
/* position: fixed; */
background: : yellow;
}

 .active-9 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}


 .active-9 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-9 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;
}
 .active-9 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-9 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;
}
.active-9 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* 11-xicon *//* 11-xicon *//* 11-xicon *//* 11-xicon *//* 11-xicon *//* 11-xicon */

.active-10 .menu-icon-Wrap{
  display: none;
}

 .active-10 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-10 .menu-icon-Wrap2{
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
/* position: fixed; */
background: : yellow;
}

 .active-10 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}

@-webkit-keyframes intro {
0% {

  opacity: 0;
}
50% {

  opacity: 0;
}


100% {

  opacity: 1;
}
}
 .active-10 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-10 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;
}
 .active-10 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-10 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;
}
.active-10 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* 11icon*//* 11D*//* 11D*//* 11D*//* 11D*//* 11D*//* 11D*/
.active-11 .menu-icon-Wrap{
  display: none;
}

 .active-11 .halfbox2{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background:blue; */
    z-index: 111;
    z-index: 99999;
}

 .active-11 .menu-icon-Wrap2{
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
/* position: fixed; */
background: : yellow;
}

 .active-11 .x-icon-Wrap2{
width: 120px;
height: 120px;
position: relative;
/* background: pink; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
/* animation: intro 1.5 ease-in-out; */
}


 .active-11 .x-iconWW2{
width: 120px;
height: 120px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
}
 .active-11 .x-icon2{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  background: white;
}
 .active-11 .x-icon-12{
transform:rotate(-45deg);
transform-origin: center;
}
 .active-11 .x-icon-22{
transform:rotate(45deg);
transform-origin:center;
}
.active-11 .x-iconWW2:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* X-ICON END*/
/* X-ICON END*/

.active-0 .title{
  display: none;
}
.active-1 .title{
  display: none;
}
.active-2 .title{
  display: none;
}
.active-3 .title{
  display: none;
}
.active-4 .title{
  display: none;
}.active-5 .title{
  display: none;
}
.active-6 .title{
  display: none;
}
.active-7 .title{
  display: none;
}
.active-8 .title{
  display: none;
}
.active-9 .title{
  display: none;
}
.active-10 .title{
  display: none;
}
.active-11 .title{
  display: none;
}