html {
  background-color: rgb(121, 150, 110);
  margin: 0;
  padding: 0;
}
body {
  position: absolute;
  padding: 0;
  top: 0%;
  left: 0%;
  width: 0%;
  height:500vw !important;
  background-color: rgb(102, 129, 163);
}
.hexbox {
    width: 300px;
    height: 346.5px;
    overflow: hidden;
    visibility: hidden;
    display: block;
    transform: rotate(120deg);
    list-style-type: none;
 }
 .hexbox-in1 {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: rotate(-60deg);
    text-decoration: none;
 }
 .hexbox-in2 {
     display: block;
     width: 100%;
     height: 100%;
     overflow: hidden;
     visibility: visible;
     font-family: 'Capriola', sans-serif;
     font-size: 2em;
     color: rgba(151, 245, 27, 0.952);
     text-shadow: 1px 1px rgb(82, 17, 156);
     transform: rotate(-60deg);
     transition: 1.5s ease-out;
   }

   .blogart {
    position: absolute;
    width: 20vw;
    height: 23.1vw;
    z-index: 4;
    }
    .blogart .hexbox-in2 {
      background-image: url("fondobaseart.png");
      background-repeat:no-repeat;
      background-size: 100%;
      background-position: center;
    }
    .arthexin {
      position: absolute;
      left: 3%;
      top: 3%;
      width: 94%;
      height: 94%;
    }
    .arthexin .hexbox-in2 {
      -webkit-mask-image: url("hexamascg.png");
      -webkit-mask-size: 100% 100%;
    }
    .blogimg {
      position: fixed;
      opacity: 0.7;
      pointer-events: none;
      overflow: hidden;
      z-index: 3;
    }
    .blogimg img{
      left: 0%;
      top: 0%;
      width: 100%;
      height: 100%;
    }
    .hexbom {
      position: fixed;
      z-index: 2;
      background-color: rgb(163, 96, 163);
    }
    .hexbanner {
      position: fixed;
      z-index: 8;
    }
    .hexbanner img{
      left: 0%;
      top: 0%;
      width: 100%;
      height: 100%;
    }
    .blogimg .hexbox-in2{
      -webkit-mask-image: url("hexamasc.svg");
      -webkit-mask-size: 100% 100%;
      background-color: grey;
    }
    .hexbanner .hexbox-in2{
      -webkit-mask-image: url("hexamasc.svg");
     -webkit-mask-size: 100% 100%;
     background-color: pink;
    }
    .hexbom .hexbox-in2{
      -webkit-mask-image: url("hexamasc.svg");
     -webkit-mask-size: 100% 100%;
     background-color: purple;
    }

    #hexart1{
      --size: min(90vw, max(100vh,60vw));
      width: var(--size);
      height: calc(1.155*var(--size));
      left: 0vw; /*calc(10vw + 0.7*(100vw - var(--size)));*/
      top: 0vw;
    }
    
    #hexart2{
      --size: min(100vw, max(100vh,60vw));
      width: var(--size);
      height: calc(1.155*var(--size));
      left: calc(-1vw + 0.5*(100vw - var(--size)));
      top: calc(1.1*var(--size));
    }
    #hexart3{
      --size: min(100vw, max(100vh,66vw));
      width: var(--size);
      height: calc(1.155*var(--size));
      left: calc(-10vw + 0.3*(100vw - var(--size)));
      top: calc(2*var(--size));
    }
    #hexart3 .hexbox-in2{
        background-position: center;
    }
    #hexart4{
      left: 20vw;
      top: 300vw;
      width: 60vw;
      height: 69.3vw;
    }
    #hexart4 .hexbox-in2{
      -webkit-mask-image: url("hexamascg.png");
      -webkit-mask-size: 100% 100%;
      background-image: url("hexaint-signin.png");
        background-repeat:no-repeat;
        background-size: 100%;
        background-position: center;
    }

    #heximg1{
        left: 22vw;
        top: 5vw;
        width: 66vw;
        height: 76.2vw;
    }
    #heximg2{
      left: -10vw;
      top: 85vw;
      width: 75vw;
      height: 86.6vw;
    }
    #heximg3{
      left: 11vw;
      top: 165vw;
      width: 75vw;
      height: 86.6vw;
    } 
    #heximg4{
      left: 33vw;
      top: 230vw;
      width: 66vw;
      height: 76.2vw;
    }
    #hexban1{
        left: 60vw;
        top: 80vw;
        width: 25vw;
        height: 28.9vw;
    }
    #hexban2{
      left: 2vw;
      top: 145vw;
      width: 20vw;
      height: 23.1vw;
    }
    #hexban3{
      left: 11vw;
      top: 365vw;
      width: 15vw;
      height: 17.32vw;
    } 
    #hexban4{
      left: 33vw;
      top: 400vw;
      width: 13.2vw;
      height: 15.24vw;
    }
    #hexbom1{
      left: 22vw;
      top: -28vw;
      width: 6.6vw;
      height: 7.62vw;
  }
  #hexbom1 .hexbox-in2 {
    background-color: rgb(76, 102, 77);
    background-image: repeating-linear-gradient(30deg, transparent, transparent 50px, rgba(99, 49, 139, 0.6) 50px, rgba(99, 49, 139,.6) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 116px, rgba(0,0,0,.4) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.4) 169px, rgba(0,0,0,.4) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.4) 182px, transparent 232px),
    repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(99, 49, 139, 0.6) 50px, rgba(99, 49, 139,.6) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 116px, rgba(0,0,0,.4) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.4) 169px, rgba(0,0,0,.4) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.4) 182px, transparent 232px),
    repeating-linear-gradient(150deg, transparent, transparent 50px, rgba(99, 49, 139, 0.6) 50px, rgba(99, 49, 139,.6) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 116px, rgba(0,0,0,.4) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.4) 169px, rgba(0,0,0,.4) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.4) 182px, transparent 232px)
    ,repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);
  }
  #hexbom2{
    left: 4vw;
    top: -15vw;
    width: 7.5vw;
    height: 8.66vw;
  }
  #hexbom2 .hexbox-in2 {
    background-color: rgb(141, 74, 141);
  }
  #hexbom3{
    left: 66vw;
    top: -75vw;
    width: 10vw;
    height: 11.55vw;
  } 
  #hexbom3 .hexbox-in2 {
    background-color: rgb(141, 129, 74);
  }
  #hexbom4{
    left: 11vw;
    top: -115vw;
    width: 7.5vw;
    height: 8.66vw;
  } 
  #hexbom4 .hexbox-in2 {
    background-color: rgb(141, 74, 94);
  }
  #hexbom5{
    left: 88vw;
    top: -155vw;
    width: 7.5vw;
    height: 8.66vw;
  } 
  #hexbom5 .hexbox-in2 {
    background-color: rgb(74, 139, 141);
  }
 



   .col-sm-9
   {background: magenta}
   .col-sm-6
   {background: #615561}

   #atimg1 {
    position: absolute;
    z-index: 5;
    left: 0px;
    width: 100%;
    height: 25%;
    top: 0%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%);
   }
   #atimg3 {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 25%;
    top: 0%;
   }
   .col-sm-xx   {
    overflow: auto;
    position: absolute;
    left: 5%;
    width: 90%;
    height: 70%;
    top: 25%;
    bottom: 10%;
 }
   .col-sm-x   {
       overflow-y: auto;
       overflow-x: hidden;
       position: absolute;
       left: 5%;
       width: 90%;
       height: 90%;
       top: 5%;
       bottom: 5%;
       font-size: calc(2vh + 0.5vw);
    }
    .col-sm-x h1   {
      margin: 15%;
      text-align: center;
      font-size: 2em;
   }
    .col-sm-x p   {
      margin: 5%;
      font-size: 1em;
   }
   .col-sm-x::-webkit-scrollbar   {
      width: 10px;
   }
   .col-sm-x::-webkit-scrollbar-track   {
      opacity: 0.5;
   }
    .col-sm-x::-webkit-scrollbar-thumb   {
      background:rgb(141, 209, 101);
      border-radius: 5px;
   }


      @keyframes aniagrandahex {
        0%   {left: var(--lef0); top: var(--top0); width: var(--wid0); height: var(--hei0);}
        100%  {left: var(--leff); top: var(--topf); width: var(--widf); height: var(--heif);}
      }
      @keyframes imgapa {
         0%   {top: -80vh}
         100% {top: 50px}
      }

      @keyframes descapa {
         0%   {top: 1047px; left: -950px}
         100% {top: 470px; left: 50px}
      }

      @keyframes priceapa {
         0%   {top: 1127px; left: 1700px}
         100% {top: 550px; left: 700px;}
      }

      @keyframes formapa {
         0%   {top:-487px; left: -1010px}
         100% {top: 90px; left: -100px;}
      }