body {
    background: #eaeaea70;
    overflow-y: hidden;
  }
  * {
    box-sizing: border-box;
  }
  
  /* hide scrollbar */
  ::-webkit-scrollbar {
    width: 1px;
    height: 1px;
  }
  
  ::-webkit-scrollbar-button {
    width: 1px;
    height: 1px;
  }
  .external {
    overflow: hidden;
    height: 57vh;
  }
  
  .horizontal-scroll-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vh;
    transform: rotate(-90deg) translate3d(0,-100vh,0);
    transform-origin: right top;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vw;
    perspective: 1px;
    transform-style: preserve-3d;
    padding: 10rem;
    padding-top: 10rem;
  }

  .img-wrapper {
    transform: rotate(90deg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    transform-origin: 50% 50%;
    transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
    transition: 1s;
  }
  
  .img-wrapper:hover {
   min-height: 65vh;
  }
  
  .slower {
    transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(-27vh);
  }
  .slower1 {
    transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(65%) translateY(-25vh);
  }
  .slower2 {
    transform: rotate(90deg) translateZ(.2px) scale(0.9) translateX(110%) translateY(-22vh);
  }
  .slower-down {
    transform: rotate(90deg) translateZ(.2px) scale(1.1) translateX(130%) translateY(-19vh) ;
  }
  .faster {
    transform: rotate(90deg) translateZ(-.15px) scale(1.1) translateX(180%) translateY(-27vh) ;
  }
  .faster1 {
    transform: rotate(90deg) translateZ(.15px) scale(0.8) translateX(330%) translateY(-24vh) ;
  }
  .faster2 {
    transform: rotate(90deg) translateZ(-.12px) scale(1.1) translateX(295%) translateY(-24vh) ;
  }

  .fastest {
    transform: rotate(90deg) translateZ(.12px) scale(0.9) translateX(400%) translateY(-21vh) ;
  }

  .last {
    transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(370%) translateY(-25vh) ;
  }
  .last2 {
    transform: rotate(90deg) translateZ(.10px) scale(0.9) translateX(530%) translateY(-23vh) ;
  }

  .scroll-info, header {
    position: absolute;
    left: 1rem;
  }
  
  
  header {
    bottom: 1rem;
  }
  .scroll-info {
    top: 1rem;
  }

  .imgs {
    max-width: 53vh;
    max-height: 65vh;
    transition: .5s;
    vertical-align: top;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  }

  a:hover img {
    filter: none;
  }
 
  .scroll-info {
    display: flex;
    align-items: center;
  }
  .icon svg {
      width: 50px;
      fill: currentcolor;
  }
  
  /*EFEITO BORDA COLORIDA*/
  .img-wrapper a {
    overflow: hidden;
    display: block;
    padding: 1vh ;
    box-shadow: 0 10px 50px #4a4a4a82;
    z-index: 0;
    border: none;
    position: relative;
  }

  .img-wrapper a:before {
    content: '';
    background: rgb(255,102,25);
    background: linear-gradient(90deg, rgba(255,102,25,1) 23%, rgba(0,145,210,1) 52%, rgba(255,102,25,1) 82%, rgba(255,102,25,1) 82%); position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.img-wrapper a:hover:after {
    background: transparent;
}

.img-wrapper a:hover:before {
    opacity: 1;
}

.img-wrapper a:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #bcbcbc;
    left: 0;
    top: 0;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.legenda{
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
 font-size: 25px; 
 text-decoration: none;
 color: black;
}

/*TITULO DA PÁGINA*/
.tituloDiv{
 /* background:  rgba(25, 25, 25, 0.253);
  background-image: url("https://www.transparenttextures.com/patterns/concrete-wall.png");
  background-size: cover;*/
  margin-top: 138px;
  color: rgb(4, 4, 4);
}

.tituloGlow{
  margin: 0;
  padding-bottom: 6rem;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  font-family: 'Teko', sans-serif;
  font-size: 10rem;
  text-transform: uppercase;
  animation: glow 2s ease-in-out infinite alternate;
  text-align: center;
}


  .titulo span {
    color: rgb(0, 0, 0);
    letter-spacing: 0;
    display: block;
    text-shadow: 0 0 80px rgb(255, 255, 255);
  }

.btn-esquerda, .btn-direita{
  background-color: #ff66199d;
  border: 2px solid #ff66199d;
  color: white;
  text-align: center;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 15px;
  width: 40px;
  height: 40px;
  margin-left: 10px;
}
.btn-esquerda:hover, .btn-direita:hover{
  background-color: #ff6619 ;
  border-color: #ff6619;
}