/*-----------------------------------------------------------------------------
VERSION:   1.1.1
DATE:      06/04/23
AUTHOR:    Atvise
EMAIL:     support@atvise.nl
WEBSITE:   https://atvise.nl
-----------------------------------------------------------------------------*/

/*
-----------------------------------------------------------------------------
-------------------------------- Index --------------------------------------
-----------------------------------------------------------------------------

000 | Global Styles
-----------------------------------------------------------------------------
    | 000.0 | Root Colors & Fonts
    | 000.0 | Root Fonts
    | 000.1 | Fonts, Headings and Paragraphs
    | 000.2 | Classes
    | 000.3 | Icons
    | 000.4 | Forms
    | 000.5 | Styled Blocks - Borders, Border-radius and Box-shadows
-----------------------------------------------------------------------------
010 | Global Sections
-----------------------------------------------------------------------------
    | 010.1 | Header and Navigation
-----------------------------------------------------------------------------
    |       |  010.1.1 | Mobile Menu
    |       |  010.2 | Breadcrumbs
    |       |  010.3 | Pagination
-----------------------------------------------------------------------------
    | 010.2 | Shopping- and Mini-Cart
    | 010.4 | Wishlist
    | 010.5 | Compare
    | 010.6 | Footer
    | 010.7 | Pop-ups
-----------------------------------------------------------------------------
020 | Global Elements
-----------------------------------------------------------------------------
    | 020.1 | Pricing (Containers)
    | 020.2 | Special Pricing (Containers)
    | 020.3 | Product Grid
    | 020.8 | Messages and Notifications
-----------------------------------------------------------------------------
030 | Template Pages
-----------------------------------------------------------------------------
    | 030.1 | Homepage
    | 030.2 | Categorypage
    | 030.3 | Productpage
-----------------------------------------------------------------------------
    |       |  030.3.0 | Productpage Layout
    |       |  030.3.1 | Product Main Info
    |       |  030.3.2 | Product Media
    |       |  030.3.3 | Product Additional Info
    |       |  030.3.4 | Sidebar
-----------------------------------------------------------------------------
    | 030.4 | Checkoutpage
    | 030.5 | Accountpage
    | 030.6 | FAQ
    | 030.7 | CMS Pages
    | 030.8 | Brands
-----------------------------------------------------------------------------
040 | Custom Widgets & Blocks
-----------------------------------------------------------------------------
    | 040.1 | Amasty Multiple Wishlists
-----------------------------------------------------------------------------
999 | Media Queries

*/

/*---------------------------------------------------------------------------
000 | Global Styles
---------------------------------------------------------------------------*/

/*  | 000.0 | Root Colors & Fonts */
:root {
    --primary-dark: #2d2822 !important;
    --primary-light: #FFFFFF !important;
    --light-brown: #E0D6C9 !important;
    --dark-brown: #bf9170 !important;
    --darker-brown: #9f6c47 !important;
    --body-font: "Raleway", Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
    --heading-font: "remora-sans-w5", Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
    --subheading-font: var(--body-font);
}

/*  | 000.1 | Fonts, Headings and Paragraphs    */
*,
input[type="text"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="datetime"],
input[type="email"] {
    -webkit-font-smoothing: antialiased !important;
    font-family: var(--body-font);
}

.main-font,
h4,
h5,
.section-title,
.products-list .product-name,
.filter .block-subtitle,
.feature .heading,
.uaccordion .heading,
.block .block-title,
#opc-login h3,
.box-account .box-head h2,
.order-items h2.table-caption,
.order-items h2.sub-title,
.order-items .order-comments h2,
.product.data.items>.item.title>.switch,
.footer .heading,
#subscribe-form label,
.caption .heading {
    -webkit-font-smoothing: antialiased !important;
    font-family: var(--body-font) !important;
}

.header-regular .block-search .input-text,
.header-regular .block-search .action.search .icon,
.header-regular .block-search.expanding .input-text,
#action-search {
    font-family: var(--subheading-font);
    font-weight: 600;
}

h1,
.headings-font,
h1 strong {
    font-family: var(--heading-font) !important;
    text-transform: uppercase;
}

h2,
h2 strong {
    color: #303030;
    font-family: var(--heading-font) !important;
    text-transform: uppercase;
    font-style: inherit;
    font-weight: 700;
    line-height: 1.1;
    font-size: 2.4rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}

h2 a {
    font-family: var(--heading-font) !important;
}

h3,
h3 strong {
    font-family: var(--subheading-font) !important;
    text-transform: uppercase;
    line-height: 1.1;
    font-size: 2.4rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

p {
    font-weight: 400;
}

/*  | 000.2 | Classes    */
.nopadding {
    padding: 0 !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.center {
    text-align: center !important;
}

@media (min-width: 1400px) {
    .nopadding-desktop {
        padding: 0 !important;
    }
}

/*  | 000.5 | Styled Blocks - Borders, Border-radius and Box-shadows */
.cms-home .button,
a.pagebuilder-button-primary,
button.pagebuilder-button-primary,
div.pagebuilder-button-primary,
.cart.table-wrapper .actions-toolbar>.action.pagebuilder-button-primary,
.action-gift.pagebuilder-button-primary {
    background-color: var(--darker-brown);
    color: #e0d6c9;
    float: left;
    font-size: 16px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0;
    margin: 40px 0 0;
    text-align: center;
    text-shadow: none;
    padding: 10px 12px;
}

.cms-home .button:hover,
a.pagebuilder-button-primary:hover,
button.pagebuilder-button-primary:hover,
div.pagebuilder-button-primary:hover,
.cart.table-wrapper .actions-toolbar>.action.pagebuilder-button-primary:hover,
.action-gift.pagebuilder-button-primary:hover {
    box-shadow: 0px 2px 15px 0px rgba(3, 4, 4, 0.25);
}


/* Fix voor Loading Mask */
.product.media .loading-mask {
    display: none;
}

/*---------------------------------------------------------------------------
010 | Global Sections
---------------------------------------------------------------------------*/

/*  | 010.1 | Header and Navigation*/
.welcome {
    font-size: 12px;
}

.dropdown-block .dropdown-heading .label {
    font-size: 12px;
}

.header-top.container .inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.header-container .header-primary-container {
    background-color: var(--light-brown);
}

.header-container .nav-container {
    padding-top: 0;
}

.header-primary .logo-wrapper img {
    max-width: 149px;
    padding: 50px 0;
}

.header-m-primary .action.nav-toggle {
    display: none;
}

.nav-container.sticky-container a>span {
    font-size: 16px;
    font-weight: 600;
}


/* | 010.2 | Shopping- and Mini-Cart */
.action-primary.action-accept {
    background-color: var(--darker-brown) !important;
}

.block-minicart .block-content>.actions>.primary .action.primary:hover,
.product-view .action.primary:hover,
.action.primary.checkout:hover,
.action.primary:hover,
.action.primary:focus {
    background-color: var(--darker-brown);
    box-shadow: 0px 2px 15px 0px rgba(3, 4, 4, 0.25);
}

/* | 010.6 | Footer */
.copyright {
    text-align: center;
}

.footer-bottom-container>.footer-bottom.container .inner-container {
    display: flex;
    justify-content: center;
}

/* -----------------------------------------------------------------------------
030 | Template Pages
----------------------------------------------------------------------------- */

/*  | 030.1 | Homepage */
.cms-home .main.container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 1st Banner */
.alca-home-banner {
    background-color: var(--light-brown);
}

.cms-home .alca-home-banner p {
    font-size: 16px;
}

.cms-home .alca-home-banner a {
    display: block;
}

.alca-home-banner .full-width img {
    width: 100%;
}

/* 1st Promotion */
.cms-home .promotion p {
    background-color: #2d2822;
    color: #e0d6c9;
    margin: 0;
    padding: 12px 10px;
}

.cms-home .categories {
    margin-top: 60px;
}

.cms-home .categories .hp-title {
    color: var(--primary-dark);
    font-size: 30px;
    margin: 0 0 40px;
}

.cms-home .categories .cat-container {
    margin-left: -15px;
    margin-right: -15px;
}

.cms-home .promo {
    position: relative;
    max-width: 300px;
}

.cms-home .promo-overlay {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

.cms-home .promo-overlay::before {
    background-color: #2e2921;
    content: '';
    height: 100%;
    left: 0;
    opacity: .75;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

.cms-home .spotlight-tile:hover .promo-overlay {
    opacity: 1;
}

.cms-home .promo-overlay .title {
    background-color: var(--darker-brown);
    color: var(--light-brown);
    bottom: 40%;
    font-size: 16px;
    font-weight: 600;
    height: 49px;
    left: 0;
    line-height: 49px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    text-align: center;
    right: 0;
    width: 112px;
    z-index: 3;
}

.cms-home .promo-overlay .title:hover {
    box-shadow: 0px 2px 15px 0px rgba(3, 4, 4, 0.25);
}

/* 2nd Banner */
.cms-home .banner-secondary {
    margin-top: 60px;
    margin-bottom: 30px;
}

/* Plaatje links en tekst rechts  */
.cms-home .features:not(.secondary) {
    margin-top: 60px;
}

.cms-home .features .features-box-subtitle {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 35px;
}

.cms-home .features .features-box-list {
    list-style: none;
    padding: 0;
}

.cms-home .features .features-box-list li {
    color: #2d2822;
    display: block;
    float: left;
    font-size: 16px;
    font-weight: 400;
    width: 100%;
}

.cms-home .features .features-box-list li::before {
    content: "check";
    font-family: 'Material Icons';
    float: left;
    display: block;
    margin-right: 25px;
    width: 5%;
}

.cms-home .features .features-box-list li span {
    display: block;
    float: left;
    width: 90%;
}

/* 3rd Banner */
.cms-home .banner-third {
    margin-top: 60px;
}

.cms-home .banner-third .button {
    display: block;
    float: none;
    margin: 40px auto 0;
    width: 220px;
}

/* 2nd Promotion */
.cms-home .promotion.secondary {
    margin-top: 60px;
}

.cms-home .promotion.secondary p {
    background-color: #bf9170;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}

.cms-home .promotion.secondary .material-icons {
    margin-left: 10px;
    margin-right: 5px;
    font-size: 14px;
    font-weight: bold;
}

/* | 030.2 | Categorypage */
.category-image {
    position: relative;
}

.category__title {
    position: absolute;
    bottom: 0px;
    left: 20px;
    color: var(--primary-dark);
    font-size: 3.5em;
    font-family: "Remora Sans W5";
    font-weight: 900;
    text-shadow: none;
    padding: 5px 20px;
    background: var(--light-brown);
    box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.2);
}

.category-extra-description {
    margin-top: 60px;
    margin-bottom: 0px;
}

/* 030.3 | Productpage */

/* | 030.3.1 | Product Main Info */

.slick-dots {
    display: none;
}

.swatch-option.color,
.swatch-option.text {
    border-radius: 50%;
}

#layered-filter-block .swatch-option {
    border-radius: unset;
}

/* | 030.4 | Checkoutpage */
.page-layout-checkout .header-container-micro .header-primary-container {
    background-color: var(--light-brown);
}

/* | 030.6 | FAQ */
.back.am-back-button {
    display: none;
}



.row-eq-height.spotlight-container .spotlight-main {
    height: 100%;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(12, 1fr);
}

.row-eq-height.spotlight-container .spotlight-main .spotlight-tile {
    grid-column: auto / span 4;
    grid-row: auto / span 1;
    height: 100%;
    position: relative;
    color: white;
}

.row-eq-height.spotlight-container .spotlight-main .spotlight-tile .spotlight-content-wrapper {
  z-index: 1;
  padding: 30px;
  display: flex;
  height: 100%;
  min-height: 250px;
}
.row-eq-height.spotlight-container .spotlight-main .spotlight-tile .alca_spotlight-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 999 | Media Queries */

/* Max Width */
@media (max-width: 1200px) {

    /* 1st Promotion */
    .cms-home .promo {
        margin: 0 auto;
    }

    .row-eq-height.spotlight-container .spotlight-main .spotlight-tile {
        grid-column: auto / span 6;
    }
}

@media (max-width: 768px) {

    /* Site Wide */
    .columns .column.main {
        padding-bottom: 0;
    }

    .page.messages,
    .columns .column.main {
        margin-top: 0 !important;
    }

    /* 1st Promotion */
    .cms-home .categories .promo {
        margin: 5px auto;
    }

    /* Plaatje links en tekst rechts */
    .cms-home .features.secondary {
        display: flex;
        flex-flow: column;
    }

    .cms-home .features.secondary .text {
        order: 2;
    }

    .cms-home .features.secondary .image {
        margin-top: 60px;
        order: 1;
    }

}


/* Min Width */
@media screen and (min-width: 768px) {

    /* 1st Banner */
    .cms-home .alca-home-banner .text {
        margin-top: 0;
        position: absolute;
    }

    /* Homepage | Plaatje links en tekst rechts */
    .cms-home .features {
        align-items: center;
        display: flex;
        flex-flow: row;
    }

    .cms-home .features:not(.secondary) .text {
        margin-left: 60px;
    }

    .cms-home .features.secondary .text {
        margin-right: 60px;
    }
}

@media (min-width: 1024px) {

    /* 1st Banner */
    .cms-home .alca-home-banner .text {
        top: 25%;
    }
}

@media (min-width: 1500px) {

    /* 1st Banner */
    .cms-home .alca-home-banner .text {
        left: 12.5%;
        margin-top: 8%;
        z-index: 1;
    }
}