@import url(https://fonts.googleapis.com/css?family=Capriola);
* {margin: 0; padding: 0; border: none; position: relative;
}


.dropbtn {
  background-color: #3498DB;
  color: white;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.midropdown {
  position: relative;
  display: inline-block;
}

.midropdown-content {
  display: none;
  position: absolute;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.midropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.midropdown a:hover {background-color: #ddd;}

.ddshow {
  display: block;
  animation: ddmenuani 0.4s ;
  animation-timing-function: ease-in-out; 
}
@keyframes ddmenuani {
  0%   {transform: translate(calc(0.5*var(--finwid)), calc(0.5*var(--finhei))); width: 0; height:0}
  100% {width: var(--finwid); height: var(--finhei)}
}


.linkincl {
    position:absolute;
    left: 175px;
    bottom: -40px;
    transform: rotate(-30deg);
 }
.hexmenu {
   width: 300px;
   height: 348px;
   overflow: hidden;
   visibility: hidden;
   transform: rotate(120deg);
   list-style-type: none;
}
.hexmenualt {
  width: 300px;
  height: 348px;
  overflow: hidden;
  visibility: hidden;
  transform: rotate(120deg);
  list-style-type: none;
}
.hexmenu-in1 {
   display: block;
   overflow: hidden;
   width: 100%;
   height: 100%;
   transform: rotate(-60deg);
   text-decoration: none;
}
.hexmenu-in2 {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("hexaint1zb.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    overflow: hidden;
    visibility: visible;
    line-height: 400px;
    font-family: 'Capriola', sans-serif;
    font-size: 2em;
    color: #fff;
    text-shadow: 1px 1px #000;
    transform: rotate(-60deg);
    transition: 1.5s ease-out;
  }
#hexabout {
position: fixed;
top: -10px;
left: -75px;
z-index: 4;
}
#butaboutin {
  background-image: url("icohexabout.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#butaboutin:hover {
  background-image: url("icohexabouthov.png");
}
.labelcont {
  position: fixed;
  display: flex;
  bottom: 1vh;
  height: 5vh;
  left: 30vw;
  width: 40vw;
  justify-content: center;
  align-items: center;
}
.buttonlabels {
  position: relative;
  pointer-events: none;
  display: none;
  padding-top: 1px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 1px;
  background: white;
  border: 2px solid rgb(174, 231, 16);
  font-size: 3vh;
  border-radius: 50vh;
  z-index: 6;
}
#hexcont {
position: fixed;
top: -250px;
left: 180px;
z-index: 3;
}
#butcontin {
  background-image: url("icohexcont.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#butcontin:hover {
  background-image: url("icohexconthov.png");
}
#hexhome {
   position: fixed;
   top: -126px;
   left: -23px;
   z-index: 5;
  }
  #buthomein {
    background-image: url("icohexhome.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #buthomein:hover {
    background-image: url("icohexhomehov.png");
  }
   #hexcat {
      position: fixed;
      top: -210px;
      left: 290px;
      z-index: 2;
      }
      #hexcatop {
         position: fixed;
         top: 90px;
         left: 420px;
         z-index: 2;
         --finwid: 300px;
         --finhei: 348px;
         }
         #butcatin {
          background-image: url("icohexcat.png");
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: center;
        }
        #butcatin:hover {
          background-image: url("icohexcathov.png");
        }
#hexsearch {
      position: fixed;
      top: -200px;
      left: 530px;
   }
   #butseain {
    background-image: url("icohexsea.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #butseain:hover {
    background-image: url("icohexseahov.png");
  }
   #hexlogcart {
      position: fixed;
      top: -120px;
      right: -50px;
      z-index: 5;
      }
      #hexcartmenu {
         position: fixed;
         top: 170px;
         right: 50px;
         --finwid: 300px;
         --finhei: 348px;
         z-index: 5;
      }
      #hexcartmenu #hexmenu-in2{
         background-image: url("hexaint1b.png");
         background-repeat: no-repeat;
         background-size: 100%;
         background-position: center;
      }

#hexlogin {
bottom: 71px;
left: 5px;
}
#butloginin {
    background-image: url("icohexlogin.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
#butloginin:hover {
  background-image: url("icohexloginhov.png");
}
#hexlogout {
   bottom: 11%;
   left: 15%;
   }
   #butlogoutin {
    background-image: url("icohexlo.png");
    background-repeat: no-repeat;
    background-size:100% 100%;
    background-position: center;
    text-align: center;
    vertical-align: middle;
   }
   #butlogoutin:hover {
    background-image: url("icohexlohov.png");
   }

   #butcartin {
   background-image: url("icohexcart.png");
   background-repeat: no-repeat;
   background-size:100% 100%;
   background-position: center;
   text-align: center;
   vertical-align: middle;
   font-size: 2em;
   }
   #butcartin:hover {
    background-image: url("icohexcarthov.png");
  }
  #butcartin2 {
    background-image: url("icohexcart.png");
    background-repeat: no-repeat;
    background-size:100% 100%;
    background-position: center;
    text-align: center;
    vertical-align: middle;
    }
    #butcartin2:hover {
     background-image: url("icohexcarthov.png");
   }
   #butcartinmov2 {
    background-image: url("icohexcart.png");
    background-repeat: no-repeat;
    background-size:100% 100%;
    background-position: center;
    text-align: center;
    vertical-align: middle;
    }
    #butcartinmov2:hover {
     background-image: url("icohexcarthov.png");
   }

   .numitemcart {
    pointer-events: none;
    top: 30%;
    color:rgb(190, 240, 127);
    font-size: 0.6em;
    text-shadow: 2px 2px rgb(86, 10, 131);
   }
   #hexprofile {
      position: absolute;
      left: 29%;
      bottom: 29%;
      width: 42%;
      height: 42%;
   }
   #hexprofile .hexbut-in2 {
    -webkit-mask-image: url("../hexamasc.svg");
    -webkit-mask-size: 100% 100%;
    background-color: rgb(86, 10, 131, 0.2);
   }
   .labelcart {
      position: absolute;
      align: center;
      width: 30%;
      height: 30%;
      bottom: 35%;  
      left: 35%;
   }  
#hexsignup {
bottom: 135px;
left: 40px;
}
#butregin {
  background-image: url("icohexreg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#butregin:hover {
  background-image: url("icohexreghov.png");
}
#navseafor {
   position: absolute;
   width: 100%;
   height: 100%;  
   overflow: hidden;
}
#input-search {
  position: absolute;
  width: 60%;
  left: 22%;
  bottom: 29%;
} 
#navbar-search-input {
   height: 92%;
   width: 100%;
   border-radius: 1em;
   } 
   .flashea {
      background-color: rgb(187, 149, 149);
   } 
   #cart_menu {
      position: absolute;
      width: 100%;
      height: 100%; 
      top: 0%;
      left: 0%; 
   }    
   #cartmenucont {
      background-color: blue;
      position: absolute;
      width: 70%;
      height: 50%; 
      left: 15%;
      top: 20%; 
   }    

    .hexbut {
        position: absolute;
        bottom: 3.3%;
        width: 26%;
        height: 26%;
        overflow: hidden;
        visibility: hidden;
        transform: rotate(120deg);
        display: inline-block;
        list-style-type: none;
        }
     .hexbut-in1 {
        display: block;
        overflow: hidden;
        width: 100%;
        height: 100%;
        transform: rotate(-60deg);
        text-decoration: none;
        }
     .hexbut-in2 {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        visibility: visible;
        line-height: 10px;
        font-family: 'Capriola', sans-serif;
        font-size: 2em;
        text-shadow: 1px 1px #000;
        transform: rotate(-60deg);
        transition: 1.5s ease-out;
        }
     .hexbut-in2 img { 
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;       
   }
   .hexbut-in2 a { 
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;       
   }
   .hexbut-in2 small { 
      position: absolute;
      left: 50%;
      top: 30%;
      width: 30%;
      height: 5%;       
   }
   .butinhex {
     left: 37%;
   }

li:nth-child(1) span {
   background-position: -15px center;
 }
li:nth-child(2) span {
   background-position: -115px center;
 }
li:nth-child(3) span {
   background-position: -215px center;
 }
li:nth-child(4) span {
   background-position: -315px center;
 }
li:nth-child(5) span {
   background-position: -415px center;
 }

 }
ul {text-align: center;}

@media screen and (max-width: 800px) {

  :root {
    --factorvh: 0.6;
  }

  .hexmenu {
    width: 300px;
    height: 348px;
    overflow: hidden;
    visibility: hidden;
    transform: rotate(120deg);
    list-style-type: none;
 }
 .hexmenualt {
   width: 300px;
   height: 348px;
   overflow: hidden;
   visibility: hidden;
   transform: rotate(120deg);
   list-style-type: none;
 }

   #hexmenumov {
    position: fixed;
    width: 100vw;
    height: 70vh;
    --finwid: 100vw;
    --finhei: 70vh;
    top: 0;
    left: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    z-index: 9;
   }

   /* Botones menu movil permanente*/

  #hexbutmenumov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(2vw,calc(var(--factorvh)*2vh));
    left: min(2vw,calc(var(--factorvh)*2vh));
    padding: 0;
    border: 0;
    z-index: 9;
   }
   #hexbutmenumovin {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  .hexbutmenumovclosed {
    background-image: url("icohexmmov.png");
  }
  .hexbutmenumovclosed:hover {
    background-image: url("icohexmmovhov.png");
  }
  .hexbutmenumovopen {
    background-image: url("icohexclos.png");
  }
  .hexbutmenumovopen:hover {
    background-image: url("icohexcloshov.png");
  }
  #hexbutcartmov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(2vw,calc(var(--factorvh)*2vh));
    right: min(2vw,calc(var(--factorvh)*2vh));
    padding: 0;
    margin: 0;
    z-index: 9;
   }
   #hexbutcartmovin {
    background-image: url("icohexcart.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    text-align: center;
    vertical-align: middle;
    font-size: min(12vw,calc(var(--factorvh)*12vh));
  }
  #hexbutcartmovin:hover {
    background-image: url("icohexcarthov.png");
  }
  #hexbutusermov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(2vw,calc(var(--factorvh)*2vh));
    right: min(22vw,calc(var(--factorvh)*22vh));
    padding: 0;
    margin: 0;
    z-index: 9;
   }
   #hexbutusermovin {
    background-image: url("icohexuser.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #hexbutusermovin:hover {
    background-image: url("icohexuserhov.png");
  }
  #hexbutyoumov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(2vw,calc(var(--factorvh)*2vh));
    right: min(22vw,calc(var(--factorvh)*22vh));
    padding: 0;
    margin: 0;
    z-index: 9;
   }
   #hexbutyoumov .hexbut-in2 {
    -webkit-mask-image: url("../hexamasc.svg");
    -webkit-mask-size: 100% 100%;
    background-color: rgb(86, 10, 131, 0.2);
  }
  #hexbutyoumovin:hover {
    background-color: rgb(190, 240, 127, 0.5);
  }
  #hexbutyoumovin img {
    pointer-events: none;
  }
  #labelnamemov {
    position: fixed;
    pointer-events: none;
    right: min(41vw,calc(var(--factorvh)*41vh));
    top: min(9vw,calc(var(--factorvh)*9vh));
    min-width: min(20vw,calc(var(--factorvh)*20vh));
    max-width: 30vw;    
    height: min(5vw,calc(var(--factorvh)*5vh));
    padding-left: 5px;
    padding-right: 5px;
    background: rgba(212, 183, 219,0.5);
    font-size: min(3vw,calc(var(--factorvh)*3vh));
    border-radius: 50vw;
    z-index: 9;
    text-align: center;
    margin: 0;
  }

   /* etiquetas botones*/
  .buttonlabelsmov {
    display: inherit;
    min-width: min(30vw,calc(var(--factorvh)*30vh));
    height: min(5vw,calc(var(--factorvh)*5vh));
    padding-left: 10px;
    padding-right: 10px;
    background: rgb(212, 183, 219);
    border: 2px solid rgba(174, 231, 16, 0.6);
    font-size: min(3vw,calc(var(--factorvh)*3vh));
    border-radius: 50vw;
    z-index: 9;
    text-align: center;
    margin: 0;
  }
  .buttonlabelsmov a {
    padding: 0;
    margin: 0;   
  }
  .buttonlabelsmov b {
    text-align: center;   
    color: rebeccapurple;
  }

     /* Botones menu desplegable izquierdo*/
  #hexbuthomemov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(18vw,calc(var(--factorvh)*18vh));
    left: min(11vw,calc(var(--factorvh)*11vh));
    z-index: 9;
   }
   #hexbuthomemovin {
    background-image: url("icohexhome.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #hexbuthomemovin:hover {
    background-image: url("icohexhomehov.png");
  }
  #labelbuthomemovin {
    position: fixed;
    top: min(26vw,calc(var(--factorvh)*26vh));
    left: min(31vw,calc(var(--factorvh)*31vh));
    z-index: 9;     
  }

  #hexbutcontmov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(34vw,calc(var(--factorvh)*34vh));
    left: min(2vw,calc(var(--factorvh)*2vh));
    z-index: 9;
   }
   #hexbutcontmovin {
    background-image: url("icohexcont.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #hexbutcontmovin:hover {
    background-image: url("icohexconthov.png");
  }
  #labelbutcontmovin {
    position: fixed;
    top: min(42vw,calc(var(--factorvh)*42vh));
    left: min(22vw,calc(var(--factorvh)*22vh));
    z-index: 9;     
  }

  #hexbutaboutmov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(50vw,calc(var(--factorvh)*50vh));
    left: min(11vw,calc(var(--factorvh)*11vh));

    z-index: 9;
   }
   #hexbutaboutmovin {
    background-image: url("icohexabout.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #hexbutaboutmovin:hover {
    background-image: url("icohexabouthov.png");
  }
  #labelbutaboutmovin {
    position: fixed;
    top: min(58vw,calc(var(--factorvh)*58vh));
    left: min(31vw,calc(var(--factorvh)*31vh));
    z-index: 9;     
  }

  #hexbutcatmov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(66vw,calc(var(--factorvh)*66vh));
    left: min(2vw,calc(var(--factorvh)*2vh));
    z-index: 9;
   }
   #hexbutcatmovin {
    background-image: url("icohexcat.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #hexbutcatmovin:hover {
    background-image: url("icohexcathov.png");
  }
  #labelbutcatmovin {
    position: fixed;
    cursor: pointer;
    top: min(74vw,calc(var(--factorvh)*74vh));
    left: min(22vw,calc(var(--factorvh)*22vh));
    z-index: 9;     
  }

  #labelbutcatmovin b {
    cursor: pointer;
  }

  #input-search-mov {
    position: fixed;
    width: min(48vw,calc(var(--factorvh)*48vh));
    left: min(4vw,calc(var(--factorvh)*4vh));
    top: min(89vw,calc(var(--factorvh)*89vh));
    height: min(5vw,calc(var(--factorvh)*5vh));
    padding: 0;
    margin: 0;
    font-size: min(4vw,calc(var(--factorvh)*4vh));
  } 
  #navbar-search-input-mov {
     position: absolute;
     height: 60%;
     width: 100%;
     border-radius: 1em;
     background: rgb(212, 183, 219);
     font-size: min(4vw,calc(var(--factorvh)*4vh));
     } 

     #hexbutseamov {
      position: fixed;
      width: min(18vw,calc(var(--factorvh)*18vh));
      height: min(20.8vw,calc(var(--factorvh)*20.8vh));
      top: min(82vw,calc(var(--factorvh)*82vh));
      left: min(54vw,calc(var(--factorvh)*54vh));
      z-index: 9;
     }
     #hexbutseamovin {
      background-image: url("icohexsea.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
    }
    #hexbutseamovin:hover {
      background-image: url("icohexseahov.png");
    }

    #hexbutblomov {
      position: fixed;
      width: min(18vw,calc(var(--factorvh)*18vh));
      height: min(20.8vw,calc(var(--factorvh)*20.8vh));
      top: min(98vw,calc(var(--factorvh)*98vh));
      left: min(45vw,calc(var(--factorvh)*45vh));
      z-index: 9;
     }
     #hexbutblomovin {
      background-image: url("icohexblogp.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
    }
    #hexbutblomovin:hover {
      background-image: url("icohexblogphov.png");
    }
    #labelbutblomovin {
      position: fixed;
      top: min(105vw,calc(var(--factorvh)*105vh));
      left: min(10vw,calc(var(--factorvh)*10vh));
      min-width: min(30vw,calc(var(--factorvh)*30vh));
      max-width: min(30vw,calc(var(--factorvh)*30vh));
      z-index: 8;         
    }
         /* menu colecciones movil*/
    #hexcatop {
      position: fixed;
      top: 20vh;
      left: 30vw;
      z-index: 2;
    }
    #hexcato {
      position: fixed;
      width: min(60vw, 60vh);
      height: min(69.3vw, 69.3vh);
      top: min(70vw,70vh);
      left: min(24vw,24vh);
      --finwid: min(60vw, 60vh);
      --finhei: min(69.3vw, 69.3vh);
      padding: 0;
      border: 0;
      z-index: 10;
     }
         /* menu carro movil*/
     #hexcartmenu {
      position: fixed;
      width: min(60vw, 60vh);
      height: min(69.3vw, 69.3vh);
      --finwid: min(60vw, 60vh);
      --finhei: min(69.3vw, 69.3vh);
      top: min(15vw,15vh);
      right: min(4vw,4vh);
      left: min(36vw,36vh);
      padding: 0;
      border: 0;
      z-index: 8;
     }
         /* menu usuario movil*/


    #menusermov {
          position: fixed;
          width: 100vw;
          height: 70vh;
          --finwid: 100vw;
          --finhei: 70vh;
          top: 0;
          left: 0;
          overflow: hidden;
          background: rgba(0,0,0,0.2);
          padding: 0;
          border: 0;
          z-index: 9;
    }

   #hexbutlimov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(18vw,calc(var(--factorvh)*18vh));
    right: min(12vw,calc(var(--factorvh)*12vh));
    z-index: 9;
   }
   #hexbutlimovin {
    background-image: url("icohexlogin.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #hexbutlimovin:hover {
    background-image: url("icohexloginhov.png");
  }
  #labelbutlimov {
    position: fixed;
    top: min(26vw,calc(var(--factorvh)*26vh));
    right: min(31vw,calc(var(--factorvh)*31vh));
    z-index: 9;     
  }
  #hexbutprofmov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(18vw,calc(var(--factorvh)*18vh));
    right: min(12vw,calc(var(--factorvh)*12vh));
    z-index: 9;
   }
   #hexbutprofmovin {
    background-image: url("icohexuser.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #hexbutprofmovin:hover {
    background-image: url("icohexuserhov.png");
  }
  #labelbutprofmov {
    position: fixed;
    top: min(26vw,calc(var(--factorvh)*26vh));
    right: min(31vw,calc(var(--factorvh)*31vh));
    z-index: 9;     
  }

  #hexbutregmov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(34vw,calc(var(--factorvh)*34vh));
    right: min(2vw,calc(var(--factorvh)*2vh));
    padding: 0;
    margin: 0;
    z-index: 9;
   }
   #hexbutregmovin {
    background-image: url("icohexreg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #hexbutregmovin:hover {
    background-image: url("icohexreghov.png");
  }
  #labelbutregmov {
    position: fixed;
    top: min(41vw,calc(var(--factorvh)*41vh));
    right: min(21vw,calc(var(--factorvh)*21vh));
    z-index: 9;     
  } 

  #hexbutlomov {
    position: fixed;
    width: min(18vw,calc(var(--factorvh)*18vh));
    height: min(20.8vw,calc(var(--factorvh)*20.8vh));
    top: min(34vw,calc(var(--factorvh)*34vh));
    right: min(2vw,calc(var(--factorvh)*2vh));
    padding: 0;
    margin: 0;
    z-index: 9;
   }
   #hexbutlomovin {
    background-image: url("icohexlo.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  #hexbutlomovin:hover {
    background-image: url("icohexlohov.png");
  }
  #labelbutlomov {
    position: fixed;
    top: min(41vw,calc(var(--factorvh)*41vh));
    right: min(21vw,calc(var(--factorvh)*21vh));
    z-index: 9;     
  } 
 }