/* Landing page - App EPICS */

#app .bg-color-primary {
    background-color: #1CB795!important;
}

#app .text-color-primary {
    color: #1CB795!important;
}


/* Landing page - Loja */

#loja .bg-color-primary {
    background-color: #2795CC!important;
}

#loja .text-color-primary {
    color: #2795CC!important;
}

#loja .avatar {
    width: 54px;
    height: 54px;
}

#loja #icons img {
    max-width: 118px;
    height: auto;
}

#loja #bonus .text-content {
    bottom: 2em;
    left: 9%;
}

#loja .max-125-por {
    max-width: 125%;
}
#loja .max-150-por {
    max-width: 150%;
}


#loja #lojaEpics .box-left {
    max-width: 515px;
    min-width: 320px;
    width: 100%;
    height: 852px;
    box-shadow: 0px 12px 30px 4px #00000018;
    border-radius: 15px;
    z-index: 3;
    background-color: #ffff;
}

#loja #lojaEpics .box-right {
    max-width: 515px;
    min-width: 320px;
    width: 100%;
    height: 852px;
    background-color: #F5F8FE;
    z-index: 1;
}


/* default css */

.text-color-secundary {
    color: #707070;
}

.text-color-dark {
    color: #3C3C3C!important;
}

.text-color-default {
    color: #2E2C2C;
}

.text-color-light {
    color: #878882;
}

.text-color-lighter {
    color: #A5A5A5;
}

.d-grid {
    display: grid!important;
}

.d-flex-safari {
    display: -webkit-inline-box!important;
}

.btn-custom {
    font-weight: bold;
    color: #fff;
    padding: 11px 50.25px;
    border: none;
    border-radius: 25px;
    transition: all 300ms ease-in-out;
}

.btn-custom:hover {
    filter: brightness(.8);
}

.align-center {
    display: flex;
    justify-content: center;
}

.owl-carousel {
    touch-action: manipulation;
}

.out-none {
    outline: none!important;
}

.oh {
    overflow: hidden!important;
}


/* Medias Query */

@media only screen and (max-width:768px) {
    #loja .over {
        height: 100%;
        position: absolute;
        background: linear-gradient(0deg, rgba(255, 255, 255), rgba(255, 255, 255, 0.5));
        width: 100%;
        left: 0px;
        z-index: 1;
    }
    #loja .box-left {
        height: 650px!important;
    }
    #loja .box-right {
        margin: -.375rem auto 0px auto !important;
        padding: 0px!important;
        height: 500px!important;
    }
}

@media only screen and (min-width:768px) {
    .max-md-auto {
        max-width: 100%!important;
    }
    .w-md-auto {
        width: 4%!important;
    }
}

@media only screen and (max-width:375px) {
    #loja #bonus .text-content {
        bottom: 1em;
        left: 6%;
        font-size: 0.85em !important;
    }
}