.text-xs-center {
    text-align: center;
}

.g-recaptcha {
    display: inline-block;
}

.image-fade-gradient {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}

.checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
    stroke: #7ac142;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: scale3d(1.1, 1.1, 1)
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 5px #7ac142
    }
}


.card-coupon:hover {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.1), 0 6px 10px 0 rgba(0,0,0,0.10);
    transition: all .25s ease-in-out;
}


.bg-stoblue {
    background-color: #023f88 !important;
}


body {
    background: linear-gradient(-45deg, #023F88, #002062, #328985, #70A6FF);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



.hero {
    background-color: transparent;
    position: relative;
    height: 100vh;
    overflow: hidden;
}


.cube {
    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 10px;
    height: 10px;
    border: solid 1px #003298;
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    -webkit-animation: cube 12s ease-in forwards infinite;
    animation: cube 12s ease-in forwards infinite;
}

    .cube:nth-child(2n) {
        border-color: #0051f4;
    }

    .cube:nth-child(2) {
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
        left: 25vw;
        top: 40vh;
    }

    .cube:nth-child(3) {
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
        left: 75vw;
        top: 50vh;
    }

    .cube:nth-child(4) {
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
        left: 90vw;
        top: 10vh;
    }

    .cube:nth-child(5) {
        -webkit-animation-delay: 8s;
        animation-delay: 8s;
        left: 10vw;
        top: 85vh;
    }

    .cube:nth-child(6) {
        -webkit-animation-delay: 10s;
        animation-delay: 10s;
        left: 50vw;
        top: 10vh;
    }

@-webkit-keyframes cube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }

    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}

@keyframes cube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }

    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}


.vh-50{
    height: 50vh !important;
}

.vh-40 {
    height: 40vh !important;
}

.vh-35 {
    height: 35vh !important;
}

.vh-30 {
    height: 30vh !important;
}

.vh-25 {
    height: 25vh !important;
}