/*Boton Ingresar*/
button.ingresar {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
}

button.ingresar {
    width: 12vmax;
    height: auto;
}
   
button.ingresar .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3vmax;
    height: 3vmax;
    background: #00414f;
    border-radius: 1.625vmax;
}
   
button.ingresar .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #f7bd01;
}
   
button.ingresar .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625vmax;
    width: 1.125vmax;
    height: 0.125vmax;
    background: none;
}
   
button.ingresar .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29vmax;
    right: 0.0625vmax;
    width: 0.625vmax;
    height: 0.625vmax;
    border-top: 0.125vmax solid #f7bd01;
    border-right: 0.125vmax solid #f7bd01;
    transform: rotate(45deg);
}
   
button.ingresar .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5vmax 0;
    margin: 0 0 0 1.85vmax;
    color: #00414f;
    line-height: 1.6;
    text-align: center;
}
   
.ingresar:hover .circle {
    width: 100%;
}


.ingresar:hover .circle .icon.arrow {
    background: #f7bd01;
    transform: translate(1vmax, 0);
}
   
.ingresar:hover .button-text a {
    color: #f91866;
}






/* Boton volver */

button.volver {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    cursor: pointer;
    border: 0;
    vertical-align: middle;
    background: transparent;
    padding: 0;
}
   
button.volver {
    width: 12vmax;
    height: auto;
}
   
button.volver .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3vmax;
    height: 3vmax;
    background: #00414f;
    border-radius: 1.625vmax;
}
   
button.volver .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #f7bd01;
}
   
button.volver .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    right: 0.625vmax;
    width: 1.125vmax;
    height: 0.125vmax;
    background: none;
}
   
button.volver .circle .arrow::before {
    position: absolute;
    content: "";
    top: -0.29vmax;
    left: 0.0625vmax;
    width: 0.625vmax;
    height: 0.625vmax;
    border-top: 0.125vmax solid #f7bd01;
    border-right: 0.125vmax solid #f7bd01;
    transform: rotate(225deg);
    /*transform: translate(-2rem, 225deg);*/
}
   
button.volver .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5vmax 0;
    margin: 0 1.85vmax 0 0;
    color: #00414f;
    line-height: 1.6;
    text-align: center;
}
   
.volver:hover .circle {
    width: 100%;
}
   
.volver:hover .circle .icon.arrow {
    background: #f7bd01;
    transform: translate(-1vmax, 0);
}
   
.volver:hover .button-text a {
    color: #f91866;
}