.greenblue {
    background-color: #35e4bc !important;
}

.greenbluedark {
    background-color: #0eb3a4;
}

.bg-dark-one {
    background-color: #030120;
}

.bg-dark-blue {
    background-color: #100857;
}

.bg-purple-milk {
    background-color: #D7BDCE;
}

.bg-dark-orange {
    background-color: #f4812e;
}

.bg-dark-purple{
    background-color: #02142B;
}

.primary-dark{
    background-color: #100e17;
}

.header-dark{
    color: #0d0c22;
}

.subheader-dark{
    color: #333;
}

.tab-links-color{
    color: #6e6d7a;
}

.tab-links-color:hover{
    color: #3d3d4e;
}

.tab-links-color.activelink{
    color: #0d0c22 !important; 
}

select:hover, 
select:active, 
select:focus, 
textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
}


 
.cart-button {
    position: relative;
    outline: 0;
    border: none;
    height: 48px;
    width: 100%;
    padding: 10px;
    line-height: 0px;
    overflow: hidden;
    cursor: pointer;
                border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: fuchsia;
}

.cart-button:focus {
    outline: none !important
}

.cart-button .fa-shopping-cart {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: -20%;
    font-size: 1.8em;
    transform: translate(-50%, -50%)
}

.cart-button .fa-square {
    position: absolute;
    z-index: 1;
    top: -20%;
    left: 53%;
    font-size: 0.8em;
    transform: translate(-50%, -50%)
}

.cart-button span {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    transform: translate(-50%, -50%)
}

.cart-button span.added {
    opacity: 0
}

.cart-button.clicked .fa-shopping-cart {
    animation: cart 2s ease-in forwards
}

.cart-button.clicked .fa-square {
    animation: box 2s ease-in forwards
}

.cart-button.clicked span.add-to-cart {
    animation: addcart 2s ease-in forwards
}

.cart-button.clicked span.added {
    animation: added 2s ease-in forwards
}

@keyframes cart {
    0% {
        left: -10%
    }

    40%,
    60% {
        left: 50%
    }

    100% {
        left: 110%
    }
}

@keyframes box {

    0%,
    40% {
        top: -20%
    }

    60% {
        top: 36%;
        left: 53%
    }

    100% {
        top: 40%;
        left: 112%
    }
}

@keyframes addcart {

    0%,
    30% {
        opacity: 1
    }

    30%,
    100% {
        opacity: 0
    }
}

@keyframes added {

    0%,
    80% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}