/*
Theme Name: Kika
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

:root {
    --base-600: #200d51;
    --menu-nav-link-color: #141517;
    --secondary-color: #2d146e;
    --menu-nav-sublink-backgroundcolor-hover: #e5f8fa;
}

@font-face {
    src: url('assets/fonts/MarkPro-Bold_20220511.woff2') format("woff2");
    font-family: Mark Pro;
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    src: url('assets/fonts/MarkPro-Medium_20220511.woff2') format("woff2");
    font-family: Mark Pro;
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    src: url('assets/fonts/MarkPro-Book_20220511.woff2') format("woff2");
    font-family: Mark Pro;
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    src: url('assets/fonts/MarkPro-Light_20220511.woff2') format("woff2");
    font-family: Mark Pro;
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: Mark Pro,sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal
}

body {
    font-size: 1rem;
    line-height: 1.75
}

@keyframes float {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-16px)
    }
}

.nav-donate {
    color: #fff !important;
    padding: 0px 1rem !important;
}


/* General Styles */
/*.text-base-500, .hover\:text-base-500:hover {*/
/*    --tw-text-opacity: 1;*/
/*    color: rgb(45 20 110 / var(--tw-text-opacity));*/
/*}*/
/*.bg-primary-500 {*/
/*    --tw-bg-opacity: 1;*/
/*    background-color: rgb(0 190 205 / var(--tw-bg-opacity));*/
/*}*/

.hover\:bg-primary-300:hover {
    --tw-bg-opacity: 1;
    background-color: #c2620e;
}

.btn:hover {
    background: var(--base-600);
}

.boxshadow-none, .boxshadow-none:hover {
    box-shadow: none;
}


/* Menu */
#top-bar .gk-icon {
    font-size: 0.7rem;
    margin-top: -1px;
}

#top-bar .nav>li>a.nav-top-link {
    font-size: 1em;
}

.nav-dropdown {
    padding: 0;
}

.nav-column>li>a,
.nav-dropdown>li>a,
.nav-vertical-fly-out>li>a,
.nav>li>a {
    font-weight: 500;
    color: var(--menu-nav-link-color);
}

.nav-column>li>a.nav-top-link,
.nav-dropdown>li>a.nav-top-link,
.nav-vertical-fly-out>li>a.nav-top-link,
.nav>li>a.nav-top-link {
    font-size: 1.1875rem;
}

.nav-column li.active>a,
.nav-dropdown li.active>a,
.nav>li.active>a,
.nav>li.current>a,
.nav>li>a.active,
.nav>li>a.current,
.nav-column>li>a:hover,
.nav-dropdown>li>a:hover,
.nav-vertical-fly-out>li>a:hover,
.nav>li>a:hover {
    color: var(--primary-color);
}

.nav-dropdown-simple .nav-column li>a,
.nav-dropdown.nav-dropdown-simple>li>a {
    font-weight: 400;
}

.nav-dropdown-simple .nav-column li>a:hover,
.nav-dropdown.nav-dropdown-simple>li>a:hover {
    background-color: var(--menu-nav-sublink-backgroundcolor-hover);
    text-decoration: none;
}


/* Banner */
.banner-overlay .banner-inner .banner-bg::before {
    content: '';
    background: url('assets/images/header-shape.svg');
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    pointer-events: none;
}

.social-button, .social-icons .button.icon:hover, .social-icons .button.icon:not(.is-outline) {
    background-color: #e87511 !important;
    border-color: #e87511 !important;
}

.social-button, .social-icons .button.icon:hover, .social-icons .button.icon:not(.is-outline) {
    background-color: #e87511 !important;
    border-color: #e87511 !important;
}

.social-button, .social-icons .button.icon, .social-icons .button.icon:not(.is-outline) {
    color: #e87511;
    border: 1px solid #e8eaed;
}

.copyright-footer {
    color: rgb(119, 119, 119);
    font-size: 0.8rem;
}

.ux-menu-link__link.flex:hover {
    text-decoration: unset;
}

.ux-menu-link__link.flex:hover > .ux-menu-link__text {
    text-decoration: underline;
}

#header #logo img {
    max-height: 6.3rem !important;
}

/* Footer */
.footer-1, .footer-2 {
    border: 0;
}

#footer .nopadding > .col-inner {
    padding: 0 0 20px !important;
}

#footer .newsletter-banner {
    background: #fdf1e7;
    border-radius: .5rem;
}

#footer .newsletter-banner a.button {
    color: #fff;
}

#footer  a {
    color: #2d2d2d;
}

#footer .social-icons a {
    color: #e87511;
    display: inline-flex;
    justify-content: center;
    flex-direction: row;
    width: fit-content;
    align-items: center;
    font-size: 14px;
}

#footer .widget {
    margin-bottom: 0.5rem;
}

#footer .widget-title {
    color: #e87511;
}

#footer .footer-2 {
    line-height: 1rem;
    padding: 0;
}

#footer .footer-2 .widget_text,
#footer .footer-2 .widget_nav_menu {
    font-size: 14px;
}

#footer .footer-2 .widget_nav_menu a {
    padding: 0 0 18px;
}

#footer .widget>ul>li+li,
#footer ul.menu>li+li {
    border: 0;
}

#footer .widget .is-divider {
    opacity: 0;
}

.absolute-footer {
    font-size: 1rem;
    color: var(--secondary-color);
}


/* Cart/Checkout */
.shop_table .shipping__table th {
    color: #2D2D2D;
}

/* Homepage */
.smaller-boxes .product-small > .box-image {
    height: 234px;
}



@media (min-width: 850px) {
    .nav-divided>li {
        margin: 0 1.2em 0 0.7em;
    }
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .header.show-on-scroll, .stuck .header-main {
        height: 80px !important;
    }

    #header #logo img {
        max-height: 5rem !important;
    }

    .nav>li>a:hover {
        color: #e87511;
    }
}