.wrapper { 
    position: fixed;
    top: 0;
    left: 0;
    height: 100%; 
    width: 100%; 
    background: #F5F5F5;
    opacity: 0.8;
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
    /* clip-path: circle(25px at calc(0% + 45px) 45px); */
    clip-path: circle(0px at calc(100% - 45px) 45px);
    transition: all 0.3s ease-in-out;
  }
  #active:checked ~ .wrapper {
    clip-path: circle(75%);
  } 
.menu-btn{
  position: absolute;
  right: 20px; 
  /* left: 20px; */
  top: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  color: #000;
  cursor: pointer;
  background: transparent;
}


  .wrapper ul{
  position: absolute;
  top: 50%;
  left: 13%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: left;
}
.wrapper ul li{
  margin: 15px 0;
}
.wrapper ul li a{
  color: none;
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;
  padding: 5px 5px;
  color: #000000;
  position: relative;
  line-height: 20px;
  transition: all 0.3s ease;
  opacity: 2;
}

.wrapper  ul li a:after{
  position: absolute;
  content: "";
  background: #fff;
  width: 100%;
  height: 50px;
  left: 0;
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;

  transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{


}
.wrapper ul li a:hover{

   text-decoration: underline;
   color: black;



}






/*MENU*/
input[type="checkbox"]{
  display: none;
}
.side{
  width: 40px;
}

.blue{
  width: 40px;
}
.fixed-left {
  position: fixed;
  top: 20px;
  right: 0;
  left: 10px;
  z-index: 1030;
}




/*LOGO MENU*/
.wer{
  width: 45%;
  transform: rotate(90deg);

  margin-top: 100px;
  position: absolute;
  margin-left: 900px;
}



/*NAV SIDE*/
.line0 {
  border-left: 0.1em solid black;
  height: 200px;
  position: fixed;
  margin-left: 60px;
  z-index: 100000;
  opacity: 1;

}

.line1 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 300px;
  z-index: 10;
  opacity: 0.1;
 /* transform: rotate(90deg);*/
}
.line2 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 600px;
  z-index: 10;
  opacity: 0.1;
}
.line3 {
  border-left: 0.1em solid black;
  height:100%;
  position: fixed;
  margin-left: 900px;
  z-index: 10;
  opacity: 0.1;

}
.line4 {
  border-left: 0.1em solid black;
  height: 100%;
  position: fixed;
  margin-left: 1200px;
  z-index: 10;
  opacity: 0.1;

}

.square{
  width: 70px;
  height: 113%;
  border-color: transparent;
  background-color:  #97999B;
  border-width: 10px;
  border-right: 1px solid black;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}


/*PROGRESS BAR*/
.progress-container {
  width: 220px;
  height: 2px;
  background: #ccc;
  transform: rotate(90deg);
  margin-left: -80px;
  margin-bottom: 290px;

}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}



.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: white;
  text-align: center;
  white-space: nowrap;
  background-color: #ffc800;
  transition: width 0.6s ease;
  height: 2px;
  background: black;
  width: 0%;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  -webkit-animation: 1s linear infinite progress-bar-stripes;
          animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    -webkit-animation: none;
            animation: none;
  }
}

@-webkit-keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}

@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}


.fas{
height: 30px;
margin-left:40px;

}

.fa-arrow-left{
  margin-top: 440px;
  transform: rotate(270deg);
  margin-left: 14px;
}

.fixed-left {
  position: fixed;
  top: 40px;
  right: 0;
  left: 14px;

  z-index: 1030;
}

.out{
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 10px;
  margin-top: 100px;
  transform-origin: 0 0;
  transform: rotate(90deg);
  margin-left: 25px;
   letter-spacing: 2px;
  text-transform: uppercase;
  color:  #2b2c2d;
}


.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.talk{
  font-size: 12px;
  width: 40px;
  background-color: #2b2c2d;
  border-color: transparent;
  border-radius: 5px;
  margin-left: 10px;
  margin-bottom: 40px;
  color: white;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande";
}

/*MAP*/

.map{
  width: 85%;
  margin-left: 335px;

}

.copy{
  color: black;
  font-size: 9px;
  border-bottom: none;
}

.lineborder{
  position: absolute;
}
.border5{
  border: 1px solid red;
}





spann::before {
            content: " LOOK";
            animation: animate infinite 5s;
            padding-left: 30px;
            position: absolute;
            font-weight: bolder;
            font-size: 25px;
            margin-left: 15px;




        }

        @keyframes animate {

            17% {
                content: "LOOK";
            }

            33% {
                content: "WAR";
            }

            49% {
                content: "RACISM";
            }
            65% {
              content: "ANIMALCRUELTY";
            }
            81% {
              content: "UNETHICAL";
            }
            100% {
              content: "XENOPHOBIA";
            }

        }

/*BULB*/

#myVideo {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  margin-left: -15px;
  z-index: -1;
  margin-top: -21px;
}


/*CAROUSEL*/

.container1 {
  height: 80vw;
  width: 100vh;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  position: relative;
  overflow-x: hidden ;
  overflow-y: scroll;
  margin-top: -41px;
  margin-left: -10px;
  overflow-x: hidden;
  scroll-behavior: smooth; 
  perspective: 50px;

}


.wrapper1 {

  display: flex;
  width: 1000vw;
  height: 80vh;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  background-color: none;
}

.slide {
  height: 100vh;
  width: .1vw;
  position: relative;
  overflow-x: hidden;
}

.slide0 {
  height: 100vh;
  width: 500vw;
  position: relative;
  overflow-x: hidden;
  margin-left: 800px;
  margin-top: 200px;
}
.slide1 {
  height: 100vh;
  width: 500vw;
  position: relative;
  margin-left: 1000px;
  margin-top: 200px;
}
.slide2 {
  height: 100vh;
  width: 500vw;
  position: relative;
  margin-left: 1000px;
  margin-top: 200px;
}
.note0 {
  opacity: 2;
  position: relative;
  overflow-x: hidden;
  height: 100vh;
  width: 50vw;
  color: white;
  text-align: left;
  font-size: 24px;
  letter-spacing: 2px;
  margin-top: 300px ;
  margin-left: 2%;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;

}
.note {
  opacity: 2;
  position: relative;
  overflow-x: hidden;
  height: 100vh;
  width: 500vw;
  color: white;
  text-align: left;
  font-size: 22px;
  letter-spacing: 2px;
  margin-top: 300px ;
  margin-left: 18%;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;

}

.note1 {
  color: white;
  position: relative;
  text-align: left;
  justify-content: left;
  font-size: 22px;
  letter-spacing: 2px;
   padding-top: 50px ;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;

}
.mis{
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;
  text-align: left;
   font-size: 50px;

}
.note2 {
  color: white;
  text-align: left;
  font-size: 22px;
  letter-spacing: 2px;
  margin-top: 30px ;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;

}
.note3 {
  color: white;
  text-align: left;
  font-size: 22px;
  letter-spacing: 2px;
  margin-top: 30px ;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande";


}
.note4 {
  opacity: 2;
  position: relative;
  overflow-x: hidden;
  height: 100vh;
  width: 50vw;
  color: white;
  text-align: left;
  font-size: 22px;
  letter-spacing: 2px;
  margin-top: 300px ;
  margin-left: 1500px;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;

}

.note5 {
  opacity: 2;
  position: relative;
  overflow-x: hidden;
  height: 100vh;
  width: 50vw;
  color: white;
  text-align: left;
  font-size: 22px;
  letter-spacing: 2px;
  margin-top: 300px ;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;

}
.note6 {
  opacity: 2;
  position: relative;
  overflow-x: hidden;
  height: 100vh;
  width: 50vw;
  color: white;
  text-align: left;
  font-size: 22px;
  letter-spacing: 2px;
  margin-top: 300px ;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;

}

.note7 {
  opacity: 2;
  position: relative;
  overflow-x: hidden;
  height: 100vh;
  width: 50vw;
  color: white;
  text-align: left;
  font-size: 22px;
  letter-spacing: 2px;
  margin-top: 300px ;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;

}

.description{
  text-align: justify;
  position: relative;
  margin-top: 230px;
  font-size: 19px;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial,  sans-serif;
  color: white;
  font-weight: lighter;
  padding: 15px;
  margin-left: -365px;

}
.descriptionone{
  text-align: justify;
  position: center;
  margin-top: 90px;
  font-size: 19px;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: lighter;
  color: white;
  padding: 15px;

}
.nolook{
  font-weight: bolder;

}




.img-fluid{
          margin-top: -143px;
         position: relative;
          animation: mymove 1.2s infinite;

      }
@keyframes mymove {
  from {left: 0px;}
  to {left: 50px;}
}

.description2{
  text-align: justify;
  position: center;
  margin-top: 30px;
  font-size: 19px;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial,  sans-serif;
  color: black;
  padding: 15px;
  margin-left: -10px;
}
.img-u63{
  margin-top: -223px;
  width: 85%;
  margin-left: 50px;
}

.img-fluid2{
          margin-top: -170px;
         position: relative;
          animation: mymove 1.2s infinite;

      }
@keyframes mymove {
  from {left: 0px;}
  to {left: 50px;}
}

.lights{
  color: black;
}



.description3{
  text-align: justify;
  position: center;
  margin-top: 30px;
  font-size: 19px;
  font-family:  'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  color: white;
  padding: 15px;
  margin-left: -10px;
}
            
.img-u62{
  margin-top: -285px;
  width: 80%;
}


.wer2{
  width:250px;
  position: fixed;
  margin-left: 90px;
  margin-top: -30px;
  z-index: 1;
}
.mobileauto{
  font-size: 60px;
}
.mobilelight{
  font-size: 60px;
}




/*PROGRESS*/



/*.container1:before {
  content: "";
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 125vmax;
  height: 125vmax;
  border-radius: 100%;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  box-shadow: 0 0 20px pink;
  transition: all 500ms cubic-bezier(.49,.23,0,.99) ;
  opacity: 0;

}

.container1:before{
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.5;
}*/

svg {
  position: sticky;
  transform: rotate(-90deg);

}

svg circle {
  stroke: rgba(0,0,0,0.1);
  stroke-width: 3px;
  stroke-linecap: round;
  fill: transparent;
  box-shadow: 5px 5px 5px white;
}

svg .progress-bar {
  stroke: url(#grad);
  transition: stroke-dashoffset 0 ease-in-out;
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
}

.pct {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

hr.solid {
  border-top: 2px solid black;
}
.nubs{
  font-size: 50px; 
  font-weight: lighter;
}
.pct{
  font-size: 24px;color: white;
}

::-webkit-scrollbar {
  display: none;
}

.phil{
 position: absolute;
  color: white;
  margin-top: 170px;
  margin-left: -355px;
}

.wers{
  font-size: 50px;
  margin-left: -3px;
}


.under :hover{

   text-decoration: underline;
   text-decoration-color: white;
}
.get{
  width: 85%;
  margin-top: -18px;


}

.lig :hover{
color: white;
   text-decoration: underline;

}

.ligt :hover{
color: #000000;
   text-decoration: underline;

}

.img-fluid01 {
  
  transition: transform .2s; /* Animation */
 
}

.img-fluid01:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}





.img-fluid02 {
  
  transition: transform .2s; /* Animation */
 
}

.img-fluid02:hover {
  transform: scale(1.1); /* (180% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.exper{
  width: 30%;
  color: white;
  margin-left: 150px;
}

.service{
  width: 30%;
  color: white;
  margin-left: 750px;
  margin-top: -285px;
}

.add{
  font-size: 30px;
}
.tise{

  font-size: 44px;

}
.sizerr{
  width: 100%;
}