body {
  background: rgb(23, 23, 23);
}


.fullimg {
  transform: scale(1.3);
  transition: 1s;
}

.fullimg {
  transform: scale(1.3);
  transition: 1s;
}



.vanish-left {
  transform: translateX(-50vw);
  transition: 1s;
}

.vanish-right {
  transform: translateX(50vw);
  transition: 1s;
}

.fulldotleft {
  transform: translateX(43vw);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.dotright {
  transform: translateX(-43vw);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.pocetak {
  animation-name: pocetak;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  z-index: 9999999999999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(23, 23, 23);
}

@keyframes pocetak {
  0% {transform: translateX(0vw);}
  100% {transform: translateX(100vw);}
}

.ms-left .ms-left .ms-section div {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: cover;
}


.ms-section {
  width: 100%;
}


.fullscreen {
  transition: 1s;
  width: 100% !important;
  
}


.fullscreenalt {
  transition: 1s;
    width: 93% !important;
}

.invert {
  filter: invert(1);
}

.noscreen {
  transition: 1s;
  width: 7% !important;
}



@keyframes full {
  0% {  width: 0% !important;}
  100% {  width: 100% !important;}
}



.ms-right  .ms-section div {
  background-size: 22px 22px; 
  display: flex;
  align-items: center;
  background: var(--padrao) !important;


  justify-content: center;
}

.ms-left .ms-section div{

  background: linear-gradient(90deg, var(--check) 21px, transparent 1%) center, linear-gradient(var(--check) 21px, transparent 1%) center, var(--padrao);
  background-size: 22px 22px; 
  display: flex;
  align-items: center;
  justify-content: center;

}

.ms-left {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.ms-right {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}



.colornav {
  background: white !important;
}


.title {
  color: white;
  z-index: 10;
  text-align: center;
  justify-content: center;
  display: flex;
  margin-top: 12vh;
}

.titlebg {
  position: absolute;
  z-index: 9;
  opacity: 0.03 ;
  transition: 1s;
  font-size: 15rem;
  font-weight: 700;
  top: 5vh;
  mix-blend-mode: difference ;
}

.h1 {
  z-index: 10;
  transition: 1s;
  font-weight: 600;
  font-size: 6rem;
  font-family: montserrat;
  mix-blend-mode: difference;
}

.ms-section .ms-table {
  height: 50%;
}

#multiscroll-nav {
  left: 1.2rem;
  top: 57vh;
  position: absolute;
  display: flex;
  justify-content: center;
  z-index: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

#multiscroll-nav li {
  display: flex;
   margin: 3vh 0rem;
  position: relative;

} 


.blackdot {
  background-image: linear-gradient(
    to right,
    black 0%,
    black  50%,
    rgb(188, 188, 188)  50%,
    rgb(188, 188, 188)
  );
}

#multiscroll-nav li .active span {
  background-image: linear-gradient(
    to right,
    black 0%,
    black  50%,
    white  50%,
    white 100%
  );
  animation-name: rotate;
  animation-duration: 0.3s;
  animation-fill-mode:both ;
}

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(90deg);}
}


#multiscroll-nav.right {
  display: flex;
}



.plus {
  width: 4.5rem;
  height: 4.5rem;
  margin-top: -10px;
  margin-left: -2px;


}

.plus:hover {
  transform: scale(1.2);
  transition: 0.3s;
}

.divimg {
  cursor: pointer;
  z-index: 5;
  display: flex ;
  width: 45vw;
  height: 25vw;
  overflow: hidden;
  margin-top: 10vh;
  background-color: red;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}


.img {
  height: 100%;
  z-index: 4;
  transform: scale(1);

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


.img:hover {
  transform: scale(1.1);

}

.navigation1 {
    margin-top: 64vh;
    display: flex;
    justify-content: center;
    z-index: 10;
    

}
.navigation1 ul {
  z-index: 10;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  gap: 1.5vw;
  
}

.navigation1 ul li span i {
  display: flex;
  justify-content: center;
  align-items: center;
    border: 0.1vw solid;
    border-radius: 100%;
    mix-blend-mode: difference;
    font-size: 2vw;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    transition: all .3s ease 0s;
    text-align: center;
    
}


.nav {
  display: flex;
  position: fixed;
  justify-content: center;
  width: 100vw;
  height: 10vh;
  justify-content:space-between;
  z-index: 10;
  
}





.logo {
  left: 43.2vw;
  top: 3vh;
  mix-blend-mode: difference;
  color: rgb(92, 92, 92);
  font-size: 2.5vw;
  font-family: montserrat;
  position: fixed;
  text-align: center;
  font-weight: 400;
}

.surname {
  z-index: 10;
  font-weight: 700;
  mix-blend-mode: difference;
}

.up {
  color: var(--padrao);

}


.down {
  color: var(--check);

}
.why-multiscroll-container {
  
}

#multiscroll-nav span {
  background-image: linear-gradient(
    to right,
    var(--padrao) 0%,
    var(--padrao)  50%,
    var(--check)  50%,
    var(--check) 100%
  );
  position: absolute;
  border: none;
  left: -0VW;
  width: 1.5rem;
  height: 1.5rem;
}

#multiscroll-nav span a {
  margin: 20vw;
}


.infodiv {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgb(22, 22, 22);
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(100vh);
  transition: 1s;
  background: var(--padrao);
}


.infop {
  font-size: 2.3rem;
  font-family: montserrat;
  margin: 15vw;
  color: var(--check);
  text-align: center;
}

.infoup {
  transition: 1s;
  transform: translateY(0vh);
}