/*
Theme Name: Shop Local Parabolic
Author: GWP Inc.
Description: Bootstrap Component Blox Child Theme
Version: 1.0
Template: bootstrap-component-blox
*/

:root {
    --sl-dark: #000;
    --sl-green: #42C301;
    --sl-green-light: #e7f9eb;
    --sl-lime: #52ED00;
    --sl-blue: ;
    --sl-serif: 'Playfair Display', serif;
    --sl-san-serif: 'Poppins', sans-serif;
}

/* ===== Global ===== */

html,
body {
    overflow-x: hidden;
    font-family: var(--sl-san-serif);
}

h1, h2, h3 {
    font-family: var(--sl-serif);
}

a, 
a:hover {
    text-decoration: none;
}

/* ===== Custom Classes ===== */

.fs-serif {
    font-family: var(--sl-serif);
}

.fs-san-serif {
    font-family: var(--sl-san-serif);
}

.fw-600 {
    font-weight: 600;
}

.fs-20 {
    font-size: 20px;
}

.ls-1 {
    letter-spacing: 1px;
}

/* ===== Text Color ===== */

.sl-text-dark {
    color: var(--sl-dark);
}

.sl-text-green {
    color: var(--sl-green);
}

.sl-text-green-light {
    color: var(--sl-green-light);
}

.sl-text-lime {
    color: var(--sl-lime);
}

/* ===== Background Color ===== */

.sl-bg-dark {
    background-color: var(--sl-dark);
}

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

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

.sl-bg-lime {
    background-color: var(--sl-lime);
}

/* ===== Button ===== */

.btn {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    padding: 12px 25px;
    letter-spacing: 1px;
}

.sl-btn-green {
    background: var(--sl-green);
    color: #fff;
}

.sl-btn-green:hover {
    background: var(--sl-dark);
    color: #fff;
}

.sl-btn-green-light {
    background: var(--sl-green-light);
    color: var(--sl-dark);
}

.sl-btn-lime {
    background: var(--sl-lime);
    color: var(--sl-dark);
}

.sl-btn-dark {
    background: var(--sl-dark);
    color: #fff;
}

/* ===== Navbar ===== */

#sl-logo {
    width: 400px;
}

/* ===== Logins ===== */

#sl-logins .nav-link.active {
    color: var(--sl-green);
}

#sl-logins .nav-link {
    color: var(--sl-dark);
}

#sl-logins:hover {
    border: none!important;
}

/* ===== Has Form ===== */

.has-form .wpforms-container {
    margin-bottom: 0!important;
}

.has-form input {
    border: none!important;
    padding: 22px 20px!important;
    background: #eee!important;
}

.has-form label {
    font-weight: 400!important;
} 

.has-form .wpforms-submit {
    font-size: 14px!important;
    font-weight: 600!important;
    text-transform: uppercase!important;
    border: none!important;
    border-radius: 3px!important;
    padding: 10px 25px!important;
    letter-spacing: 1px!important;
    color: #fff!important;
    background: var(--sl-green)!important;
}

/* ===== Checkmark ===== */

.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: 56px;
    height: 56px;
    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;
}

@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 30px #7ac142;
    }
}

/* ===== Shops ===== */

#sl-businesses .sale-badge {
    position: relative;
    right: 10px;
	right: 0px;
    border-radius: 0 5px 5px 0;
}

/*
 * #sl-businesses .sale-badge:before {
    content: '';
    position: absolute;
    left: 0px;
    top: -10px;
    width: 0;
    height: 0;
    border-bottom: 10px solid #ccc;
    border-left: 10px solid transparent;
}

*/

#sl-businesses .bi-check-circle {
    top: 50%;
    left: 50%;
    transform: translatex(-50%) translatey(-50%);
}

/* ===== Footer ===== */

footer {
    background: var(--sl-dark);
    color: #fff;
    font-size: 14px;
}

footer .site-info a:hover {
	opacity: 0.8;
	color: var(--sl-green)!improtant
}

@media (max-width: 1550px) {
    #sl-header .display-2 {
        font-size: 3rem;
    }
    
    #sl-header h4 {
       font-size: 1rem; 
    }
}

@media (max-width: 992px) {
    #sl-header .display-2 {
        font-size: 2rem;
    }
    
    #sl-logo {
        width: 100%;
    }
}

@media (max-width: 768px) {}

@media (max-width: 576px) {}