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

.wrappero {
    background-color: rgb(232, 248, 213);
    height: 100%;
 }
.hexbox {
    width: 300px;
    height: 520px;
    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: min(4vw,4vh);
     color: #fff;
     text-shadow: 1px 1px #000;
     transform: rotate(-60deg);
     transition: 1.5s ease-out;
   }
   .carousel-inner {
    top: 0px;
    height: 100%;
    background-color: coral;
 }
 
 #imgcarousel1 {
    height: 100%;
    max-width: 1000%;
    width: auto;
 } 
 #imgcarousel2 {
    height: 100%;
    max-width: 1000%;
    width: auto;
 } 
 
 #carousel-example-generic {
    position: fixed;
    width: min(60vw,60vh);
    height:min(104vw,104vh);
    top: calc(50vh - min(52vw,52vh));
    left: calc(50vw - min(30vh,30vw));
 }
 #hexcarr1 {
    position: fixed;
    width: min(60vw,60vh);
    height:min(104vw,104vh);
    top: calc(50vh - min(52vw,52vh));
    left: calc(50vw - min(30vh,30vw));
    z-index: 2;
 }
 #hexcarr1 .hexbox-in2 {
    background-image: url("Logo-grande.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
 }
 #hexcarr2 {
    display: none;
    position: fixed;
    width: min(60vw,60vh);
    height:min(104vw,104vh);
    top: calc(50vh - min(52vw,52vh));
    left: calc(50vw - min(30vh,30vw));
    z-index: 0;
 }
 #hexcarr2 .hexbox-in2 {
    -webkit-mask-image: url("hexamasc.svg");
    -webkit-mask-size: 100% 100%;
    background: rgb(161, 55, 202);
 }
 #hexcarr3 {
   display: none;
   position: fixed;
   width: min(60vw,60vh);
   height:min(104vw,104vh);
   top: calc(50vh - min(52vw,52vh));
   left: calc(50vw - min(30vh,30vw));
   z-index: 0;
}
#hexcarr3 .hexbox-in2 {
   background-image: url("allogohexg.png");
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: center;
}
#hexcarr4 {
   display: none;
   position: fixed;
   width: min(60vw,60vh);
   height:min(104vw,104vh);
   top: calc(50vh - min(52vw,52vh));
   left: calc(50vw - min(30vh,30vw));
   z-index: 0;
}
#hexcarr4 .hexbox-in2 {
   -webkit-mask-image: url("hexamasc.svg");
   -webkit-mask-size: 100% 100%;
   background: rgb(153, 219, 77);
}
 #hexanimat {
    position: fixed;
    width: min(60vw,60vh);
    height:min(104vw,104vh);
    top: calc(50vh - min(52vw,52vh));
    left: calc(50vw - min(30vh,30vw));
    animation: animahex 8s infinite;
    animation-timing-function: ease-in-out; 
    opacity: 0.5;
 }
 #hexanimat .hexbox-in2 {
    background: grey;
    border-color: firebrick;
    border-width: 20pt;
 }
 #hexanimat2 {
    position: fixed;
    width: min(60vw,60vh);
    height:min(104vw,104vh);
    top: calc(50vh - min(52vw,52vh));
    left: calc(50vw - min(30vh,30vw));
    animation: animahex 8s infinite;
    animation-timing-function: ease-in-out; 
    animation-delay: 0.5s;
    opacity: 0.5;
 }
 #hexanimat2 .hexbox-in2 {
    background: purple;
    border-color: firebrick;
    border-width: 20pt;
 }

 #hexanimat3 {
    position: fixed;
    width: min(60vw,60vh);
    height:min(104vw,104vh);
    top: calc(50vh - min(52vw,52vh));
    left: calc(50vw - min(30vh,30vw));
    animation: animahex 8s infinite;
    animation-timing-function: ease-in-out; 
    animation-delay: 0.8s;
    opacity: 1;
 }
 #hexanimat3 .hexbox-in2 {
    background: rgb(232, 248, 213);
 }

 @keyframes animahex {
    0%   {left: 50vw; top: 50vh; width: 0; height:0}
    80%   {left: 50vw; top: 50vh; width: 0; height:0}
    100%  {left: calc(50vw - min(120vh,120vw)); top: calc(50vh - min(208vw,208vh)); width: min(240vw,240vh); height:min(416vw,416vh)}
  }

 @keyframes animahexb {
    0%   {left: calc(50vw - min(30vh,30vw)); top: calc(50vh - min(52vw,52vh)); width: min(60vw,60vh); height:min(104vw,104vh)}
    80%  {left: calc(50vw - min(120vh,120vw)); top: calc(50vh - min(208vw,208vh)); width: min(240vw,240vh); height:min(416vw,416vh)}
    100% {left: calc(50vw - min(30vh,30vw)); top: calc(50vh - min(52vw,52vh)); width: min(60vw,60vh); height:min(104vw,104vh)}
  }

  @keyframes hexredu {
    0%   {left: 50vw; top: 50vh; width: 0; height:0}
    100% {left: calc(50vw - min(30vh,30vw)); top: calc(50vh - min(52vw,52vh)); width: min(60vw,60vh); height:min(104vw,104vh)}
  }

  @keyframes hexdesapa {
   0%   {opacity: 1}
   10%  {opacity: 1}
   100% {opacity: 0}
  }

/* Estilo de la hoja de registro */
.form-group {
    opacity: 50%;
}
  #hexregister {
    position: fixed;
    width: 80vmin;
    min-width: 400px;
    height: 92.6vmin;
    min-height: 463px;
    top: calc(50vh - max(46.3vmin,232px));
    left: calc(50vw - max(40vmin,200px));
 }
 #hexregister .hexbox-in2 {
    background-image: url("hexaint-signup-trans.png");
    background-repeat:no-repeat;
    background-size: 100%;
    background-position: center;
 }
 #divinregister {
    position: absolute;
    width: 82%;
    height: 90%;
    top: 5%;
    left: 9%;
 }
 #divinregister form {
    position: absolute;
    width: 100%;
    height: 100%;
 }
 #divinregister p {
    text-align: center;
 }
 #hexsubbut {
    position: absolute;
    width: 22%;
    height: 22%;
    bottom: max(18%, 15px);
    left: 39%;
 }
 #bckhombut {
    position: absolute;
    width: 14%;
    height: 14%;
    bottom: 28%;
    right: 1%;
 }

 #signinbut {
    position: absolute;
    width: 14%;
    height: 14%;
    bottom: 18%;
    right: 8%;
 }

 #bckhombut .hexbox-in2{
   background-image: url("icohexhome.png");
   background-repeat:no-repeat;
   background-size: 100%;
   background-position: center;
}
#bckhombut .hexbox-in2:hover {
   background-image: url("icohexhomehov.png");
}
#signinbut .hexbox-in2{
   background-image: url("icohexli.png");
   background-repeat:no-repeat;
   background-size: 100%;
   background-position: center;
}
#signinbut .hexbox-in2:hover {
   background-image: url("icohexlih.png");
}
#hexsubbut .hexbox-in2{
   background-image: url("icohexsu.png");
   background-repeat:no-repeat;
   background-size: 100%;
   background-position: center;
}
#hexsubbut .hexbox-in2:hover {
   background-image: url("icohexsuh.png");
}

 #hexloginbox {
   position: fixed;
   width: 70vmin;
   min-width: 350px;
   height: 80.8vmin;
   min-height: 404px;
   top: calc(50vh - max(40.4vmin,202px));
   left: calc(50vw - max(35vmin,175px));
}
#hexloginbox .hexbox-in2 {
   background-image: url("hexaint-signup-trans.png");
   background-repeat:no-repeat;
   background-size: 100%;
   background-position: center;
}
#formlogin {
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;       
 }
 .login-box-msg {
   position: absolute;
   top: 15%;
   left: 10%;
   width: 80%;
   height: 12%;
  }
#loginemailinput {
 position: absolute;
 top: 25%;
 left: 30%;
 width: 40%;
 height: 7%;
}
#loginpassinput {
 position: absolute;
 top: 35%;
 left: 35%;
 width: 30%;
 height: 7%;
}
#butwrap {
   position: absolute;
   width: 20%;
   height: 20%;
   bottom: 38%;
   left: 50%;
  }
#loginsubmit {
   position: absolute;
   width: 20%;
   height: 20%;
   top: 22%;
   right: 5%;
}
 #passfg {
   position: absolute;
   top: 62%;
   left: 4%;
   width: 16%;
   height: 16%;
  }
  #suboton {
   position: absolute;
   top: 62%;
   left: 20%;
   width: 16%;
   height: 16%;
  }
  #homeboton {
     position: absolute;
     top: 74%;
     left: 28%;
     width: 16%;
     height: 16%;
  }
  #loginsubmit .hexbox-in2{
   background-image: url("icohexli.png");
   background-repeat:no-repeat;
   background-size: 100%;
   background-position: center;
}
  #loginsubmit .hexbox-in2:hover {
   background-image: url("icohexlih.png");
}
  #passfg .hexbox-in2{
     background-image: url("includes/icohexforgot.png");
     background-repeat:no-repeat;
     background-size: 100%;
     background-position: center;
  }
  #passfg .hexbox-in2:hover {
     background-image: url("includes/icohexforgothov.png");
  }
  #suboton .hexbox-in2{
   background-image: url("includes/icohexreg.png");
   background-repeat:no-repeat;
   background-size: 100%;
   background-position: center;
}
  #suboton .hexbox-in2:hover {
   background-image: url("includes/icohexreghov.png");
}
  #homeboton .hexbox-in2{
     background-image: url("icohexhome.png");
     background-repeat:no-repeat;
     background-size: 100%;
     background-position: center;
  }
  #homeboton .hexbox-in2:hover {
     background-image: url("icohexhomehov.png");
  }