/*!
 * SPHERE FLEX
 * ALEX KOO
 * CREATED BY
 * BIT PIXEL STUDIO
 */
html,body{
    position: relative;
    margin: 0;
    font-size: var(--font-xs);
}
img{
    width: 100%;
}

ul{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

a{
    text-decoration: unset;
}

p{
    font-family: var(--mont-medium);
}

.background{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-theme-gradient{
    background-image: linear-gradient(45deg, var(--color-blue-dark),var(--color-blue-light));
}

.bg-theme-gradient-reverse{
    background-image: linear-gradient(-45deg, var(--color-blue-dark),var(--color-blue-light));
}

.bg-theme-gradient-v{
    background-image: linear-gradient(180deg, var(--color-blue-dark),var(--color-blue-light));
}

.bg-light-gradient{
    background-image: linear-gradient(180deg, transparent, var(--bg-grey-light));
}

.bg-grey-lite{
    background: var(--bg-grey-lite);
}

.bg-grey{
    background: var(--bg-grey);
}

.bg-grey-light{
    background: var(--bg-grey-light);
}

.bg-grey-heavy{
    background: var(--bg-grey-heavy);
}

.bg-green-light{
    background: var(--bg-green-light);
}

.bg-brown{
    background: var(--bg-brown);
}

.bg-orange{
    background: var(--text-orange);
}

.sized-box{
    padding-top: 32px;
}

.btn-outline-blue{
    border-radius: 25px;
    border: 1px solid var(--color-blue-light);
    background: var(--color-white);
    color: var(--color-blue-light);
    padding: 0.375rem 0.875rem;
}

.btn-outline-blue:hover,
.btn-outline-blue:active,
.btn-outline-blue:focus{
    color: var(--color-white);
    background: var(--color-blue-light);
    transition: .3s;
}

.btn-outline-green{
    border-radius: 25px;
    border: 1px solid var(--color-outline-green);
    color: var(--color-outline-green);
    padding: 0.375rem 0.875rem;
}

.btn-outline-green:hover,
.btn-outline-green:active,
.btn-outline-green:focus{
    color: var(--color-white);
    background: var(--color-outline-green);
    transition: .3s;
}

.btn-green{
    border-radius: 25px;
    border: 1px solid var(--color-outline-green);
    background: var(--bg-green);
    color: var(--color-white);
    padding: 0.375rem 0.875rem;
}

.btn-green:hover,
.btn-green:active,
.btn-green:focus{
    color: var(--bg-green);
    background: var(--color-white);
    border: 1px solid var(--bg-green);
    transition: .3s;
}

.btn-transparent{
    border-radius: 25px;
    border: 1px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    padding: 0.375rem 0.875rem;
}

.btn-transparent:hover,
.btn-transparent:active,
.btn-transparent:focus{
    color: var(--color-blue-dark);
    background: var(--color-white);
    border: 1px solid var(--color-white);
    transition: .3s;
}

.font-lightBold{
    font-family: var(--mont-light)!important;
}

.font-medBold{
    font-family: var(--mont-medium)!important;
}

.font-mBold{
    font-family: var(--mont-bold)!important;
}

.font-exBold{
    font-family: var(--mont-exbold)!important;
}

.font-bebas{
    font-family: var(--bebas)!important;
}

.section-title{
    color: var(--color-title);
    font-family: var(--mont-bold);
    font-size: var(--font-md);
}

.section-subtitle{
    color: var(--color-title);
    font-family: var(--mont-light);
    font-size: var(--font-md);
}

.text-theme{
    color: var(--color-title)!important;
}

.text-theme-secondary{
    color: var(--color-blue-light)!important;
}

.text-black{
    color: var(--text-black)!important;
}

.text-grey-dark{
    color: var(--text-grey-dark)!important;
}

.text-orange{
    color: var(--text-orange)!important;
}

.radius-none{
    border-radius: 0!important;
}

.min-100{
    min-height: 100%;
}

.radius-25{
    border-radius: 25px!important;
}

.btlr{
    border-top-left-radius: 25px;
}

.btrr{
    border-top-right-radius: 25px;
}