.button-div{
    overflow: hidden;
    position: relative;
    display: inline-block;

    -moz-border-radius: 5.59091px;
    -webkit-border-radius: 5.59091px;
    border-radius: 5.59091px;
}

.button-circle{
    background-color: red;

    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
    border-radius:1000px;

    position: absolute;
    left:0;
    top:0;
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    pointer-events: none;
    /*animation-timing-function: ease-in-out; */
}

.normal-button:hover{
    text-decoration: none;
    color: #FFFFFF;
}
.normal-button {
    display: inline-block;
    background-color: #3CAEA3;
    color: #FFFFFF;

    text-align: center;
    -moz-border-radius: 5.59091px;
    -webkit-border-radius: 5.59091px;
    border-radius: 5.59091px;

    height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    font-family: 'Nunito', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 16px !important;

    transition: 400ms;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;

}
.normal-button.disabled {
    pointer-events: none;
    cursor: default;
    background-color: #CEEBE8;
}

.normal-button-container{
    position:relative;
    z-index: 10;
}

.normal-button-explode {
    animation: nb-explode 1s forwards;
}

.normal-button-desplode {
    animation: nb-desplode 0.5s forwards;
}

.normal-button-pressed-explode {
    animation: nb-pressed-explode 1s forwards;
}

.normal-button-pressed-desplode {
    animation: nb-pressed-desplode 0.5s forwards;
}

@keyframes nb-explode {
    0% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(42, 145, 135,0.6);
    }
    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(42, 145, 135,0.8);
    }
}

@keyframes nb-desplode {
    0% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(42, 145, 135,0.8);
    }
    100% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(42, 145, 135,0.6);
    }
}
@keyframes nb-pressed-explode {
    0% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(88, 197, 187,0.6);
    }
    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(88, 197, 187,0.8);
    }
}

@keyframes nb-pressed-desplode {
    0% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(88, 197, 187,0.8);
    }
    100% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(88, 197, 187,0.6);
    }
}

.yellow-button:hover{
    text-decoration: none;
    color: #FFFFFF;
}
.yellow-button {
    display: inline-block;
    background-color: #F4CA64;
    color: #FFFFFF;

    text-align: center;
    -moz-border-radius: 5.59091px;
    -webkit-border-radius: 5.59091px;
    border-radius: 5.59091px;

    height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    font-family: 'Nunito', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 16px !important;

    transition: 400ms;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;

}
.yellow-button.disabled {
    pointer-events: none;
    cursor: default;
    background-color: #CCD4DB;
}

.yellow-button-container{
    position:relative;
    z-index: 10;
}

.yellow-button-explode {
    animation: yb-explode 1s forwards;
}

.yellow-button-desplode {
    animation: yb-desplode 0.5s forwards;
}

.yellow-button-pressed-explode {
    animation: yb-pressed-explode 1s forwards;
}

.yellow-button-pressed-desplode {
    animation: yb-pressed-desplode 0.5s forwards;
}

@keyframes yb-explode {
    0% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(244, 202, 100,0.6);
    }
    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(244, 202, 100,0.8);
    }
}

@keyframes yb-desplode {
    0% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(244, 202, 100,0.8);
    }
    100% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(244, 202, 100,0.6);
    }
}
@keyframes yb-pressed-explode {
    0% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(244, 184, 37,0.6);
    }
    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(244, 184, 37,0.8);
    }
}

@keyframes yb-pressed-desplode {
    0% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(244, 184, 37,0.8);
    }
    100% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(244, 184, 37,0.6);
    }
}

.white-button-hover{
    color: #FEFEFE !important;
}
.white-button:hover{
    text-decoration: none;
}

.white-button {
    display: inline-block;
    background-color: #FEFEFE;
    color: #3CAEA3;

    text-align: center;

    border: 1.7px solid #3CAEA3;
    -moz-border-radius: 5.59091px;
    -webkit-border-radius: 5.59091px;
    border-radius: 5.59091px;

    height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 6px;
    font-family: 'Nunito', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 16px !important;

    transition: 400ms;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;

}
.white-button.disabled {
    pointer-events: none;
    cursor: default !important;
    background-color: transparent;

    color: rgba(60, 174, 163, 0.25);
    border: 1.5px solid rgba(60, 174, 163, 0.25);
}

.white-button-container{
    position:relative;
    z-index: 10;
}
.white-botton-active {
    background-color: #2A9187 !important;
}

.white-button-explode {
    animation: wb-explode 1s forwards;
}

.white-button-desplode {
    animation: wb-desplode 0.5s forwards;
}

.white-button-pressed-explode {
    animation: wb-pressed-explode 1s forwards;
}

.white-button-pressed-desplode {
    animation: wb-pressed-desplode 0.5s forwards;
}

@keyframes wb-explode {
    0% {
        width: 600px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        /*color: rgba(254, 254, 254,0.6);*/
        background-color: rgba(60, 174, 163,0.6);
    }
    100% {
        width: 600px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        color: rgba(254, 254, 254,0.8);
        /*color: #FEFEFE;*/
        background-color: rgba(60, 174, 163,0.8);
    }
}

@keyframes wb-desplode {
    0% {
        width: 600px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(60, 174, 163,0.8);
    }
    100% {
        width:600px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(60, 174, 163,0.6);
    }
}
@keyframes wb-pressed-explode {
    0% {
        width: 200px;
        height: 200px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(42, 145, 135,0.6);
    }
    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(42, 145, 135,0.8);
    }
}

@keyframes wb-pressed-desplode {
    0% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(42, 145, 135,0.8);
    }
    100% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(42, 145, 135,0.6);
    }
}

.white-yellow  bbb-button-hover{
    color: #FEFEFE !important;
}
.white-yellow-button:hover{
    text-decoration: none;
}
.white-yellow-button {
    display: inline-block;
    background-color: #FEFEFE;
    color: #F4CA64;

    text-align: center;

    border: 1.7px solid #F4CA64;
    -moz-border-radius: 5.59091px;
    -webkit-border-radius: 5.59091px;
    border-radius: 5.59091px;

    height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 6px;
    font-family: 'Nunito', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 16px !important;

    transition: 400ms;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;

}
.white-yellow-button.disabled {
    pointer-events: none;
    cursor: default;
    background-color: transparent;

    color: #CCD4DB;
    border: 1.5px solid #CCD4DB;
}

.white-yellow-button-container{
    position:relative;
    z-index: 10;
}
.white-yellow-botton-active {
    background-color: #F4B825 !important;
}

.white-yellow-button-explode {
    animation: wyb-explode 1s forwards;
}

.white-yellow-button-desplode {
    animation: wyb-desplode 0.5s forwards;
}

.white-yellow-button-pressed-explode {
    animation: wyb-pressed-explode 1s forwards;
}

.white-yellow-button-pressed-desplode {
    animation: wyb-pressed-desplode 0.5s forwards;
}

@keyframes wyb-explode {
    0% {
        width: 400px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        /*color: rgba(254, 254, 254,0.6);*/
        background-color: rgba(244, 202, 100,0.6);
    }
    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        color: rgba(254, 254, 254,0.8);
        /*color: #FEFEFE;*/
        background-color: rgba(244, 202, 100,0.8);
    }
}

@keyframes wyb-desplode {
    0% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(244, 202, 100,0.8);
    }
    100% {
        width:400px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(244, 202, 100,0.6);
    }
}
@keyframes wyb-pressed-explode {
    0% {
        width: 200px;
        height: 200px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(244, 184, 37,0.6);
    }
    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(244, 184, 37,0.8);
    }
}

@keyframes wyb-pressed-desplode {
    0% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(244, 184, 37,0.8);
    }
    100% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(244, 184, 37,0.6);
    }
}

.white-button-silver-hover{
    color: #FEFEFE !important;
}
.white-button-silver:hover{
    text-decoration: none;
    border: 1.7px solid #404B5A;
}

.white-button-silver {
    display: inline-block;
    background-color: #FEFEFE;
    color: #6E7A8A;

    text-align: center;

    border: 1.7px solid #6E7A8A;
    -moz-border-radius: 5.59091px;
    -webkit-border-radius: 5.59091px;
    border-radius: 5.59091px;

    height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    font-family: 'Nunito', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 16px !important;

    transition: 400ms;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;

}

.white-button-silver.disabled {
    pointer-events: none;
    cursor: default !important;
    background-color: transparent;

    color: #CCD4DB;
    border: 1.7px solid #CCD4DB;
}

.white-button-silver-container{
    position:relative;
    z-index: 10;
}

.white-button-silver-explode {
    animation: wbs-explode 1s forwards;
}

.white-button-silver-desplode {
    animation: wbs-desplode 0.5s forwards;
}

@keyframes wbs-explode {
    0% {
        width: 400px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        /*color: rgba(254, 254, 254,0.6);*/
        background-color: rgba(64, 75, 90,0.6);
    }
    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        color: rgba(254, 254, 254,0.8);
        /*color: #FEFEFE;*/
        background-color: rgba(64, 75, 90,0.8);
    }
}

@keyframes wbs-desplode {
    0% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(64, 75, 90,0.8);
    }
    100% {
        width:400px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(64, 75, 90,0.6);
    }
}

.white-button-spindle-hover{
    color: #FEFEFE !important;
}
.white-button-spindle:hover{
    text-decoration: none;
    border: 1.5px solid #404B5A;
}
.white-button-spindle-disabled:hover{
    text-decoration: none;
    color: #CCD4DB !important;
}

.white-button-spindle {
    display: inline-block;
    background-color: #FEFEFE;
    color: #404B5A;

    text-align: center;

    border: 1.5px solid #AEBECD;
    -moz-border-radius: 5.59091px;
    -webkit-border-radius: 5.59091px;
    border-radius: 5.59091px;

    height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    font-family: 'Nunito', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 16px !important;

    transition: 400ms;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;

}
.white-button-spindle.disabled{
    display: inline-block;
    background-color: #FEFEFE;
    color: #CCD4DB;

    text-align: center;

    border: 1.5px solid #E1E7EC;
    -moz-border-radius: 5.59091px;
    -webkit-border-radius: 5.59091px;
    border-radius: 5.59091px;

    height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    font-family: 'Nunito', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 16px !important;

    transition: 400ms;
    text-decoration: none;
    z-index: 10;
    cursor: default;
}
.white-button-spindle-disabled {
    display: inline-block;
    background-color: #FEFEFE;
    color: #CCD4DB;

    text-align: center;

    border: 1.5px solid #E1E7EC;
    -moz-border-radius: 5.59091px;
    -webkit-border-radius: 5.59091px;
    border-radius: 5.59091px;

    height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    font-family: 'Nunito', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 16px !important;

    transition: 400ms;
    text-decoration: none;
    z-index: 10;
    cursor: default;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;

}

.white-button-spindle-container{
    position:relative;
    z-index: 10;
}

.white-button-spindle-explode {
    animation: wbsp-explode 1s forwards;
}

.white-button-spindle-desplode {
    animation: wbsp-desplode 0.5s forwards;
}

@keyframes wbsp-explode {
    0% {
        width: 500px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(64, 75, 90,0.6);
    }
    100% {
        width: 500px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(64, 75, 90,0.8);
    }
}

@keyframes wbsp-desplode {
    0% {
        width: 500px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(64, 75, 90,0.8);
    }
    100% {
        width:500px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(64, 75, 90,0.6);
    }
}


.light-blue-circle-button:hover{
    text-decoration: none;
    color: #3CAEA3;

    background-color: #A8EEEB;
}
.light-blue-circle-button {
    display: inline-block;
    background-color: rgba(110, 215, 211, 0.3);
    color: #3CAEA3;

    text-align: center;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;

    height: 30px;
    width: 30px;
    padding-top: 15px;
    font-family: 'Nunito', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 25px !important;
    line-height: 0px !important;

    transition: 400ms;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;

}
.light-blue-circle-button.disabled {
    pointer-events: none;
    cursor: default;
    background-color: #CEEBE8;
}

.light-blue-circle-button-container{
    position:relative;
    z-index: 10;
}