<?php
/**
 * CSS template for theme design settings.
 *
 * WARNING: do not edit this file. Your changes will be overwritten and lost after update.
 * To modify styles generated by this file, override these styles in your custom CSS file.
 */
?>
/**
 * <?php echo date("Y-m-d H:i:s"); ?>
 */
<?php
    $storeCode = $block->getStoreViewCode();
    $t = $this->helper('Infortis\Base\Helper\Data'); //Base theme helper
    $helperDesign = $this->helper('Infortis\Base\Helper\Design'); //Base theme design helper
    $d = $t->getCfgSectionDesign($storeCode);
    $b = $block;

    $isResponsive = $t->getCfgLayout('responsive/responsive', $storeCode);
?>





<?php
//Global
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>
<?php
    //Determine background color of the main content area
    $mainBgColor = '#fff';
    if ($b->isColor($d['main']['inner_bg_color']))
    {
        $mainBgColor = $d['main']['inner_bg_color'];
    }
    elseif ($b->isColor($d['main']['bg_color']))
    {
        $mainBgColor = $d['main']['bg_color'];
    }
    elseif ($b->isColor($d['page']['bg_color']))
    {
        $mainBgColor = $d['page']['bg_color'];
    }

    //Convert the value to an integer. In previous versions the font size was stored as a number with "px" suffix.
    $baseFontSize = trim($d['font']['font_size']);
    if (strpos($baseFontSize, "px") !== FALSE)
    {
        //If "px" found in the string
        $part = explode("px", $baseFontSize);
        $baseFontSize = intval($part[0]);
    }
    else
    {
        $baseFontSize = intval($baseFontSize);
    }

    if (empty($baseFontSize))
    {
        $baseFontSize = 12;
    }
?>

<?php /*
<?php if ($d['page']['viewport_bg_color']): ?>
html
{
    background-color: <?php echo $d['page']['viewport_bg_color']; ?>;
}
<?php endif; ?>
*/ ?>

body
{
    <?php if ($b->isColor($d['page']['bg_color'])): ?>
        background-color: <?php echo $d['page']['bg_color']; ?>;
    <?php endif; ?>

    <?php if ($b->isColor($d['colors']['color'])): ?>
        color: <?php echo $d['colors']['color']; ?>;
    <?php endif; ?>

    font-size: <?php echo $baseFontSize; ?>px;
}

a
{
    <?php if ($b->isColor($d['colors']['link_color'])): ?>
        color: <?php echo $d['colors']['link_color']; ?>;
    <?php endif; ?>
}
a:hover,
.sideacco li.current > a,
h2.product-name a:hover,
h3.product-name a:hover,
h4.product-name a:hover,
h5.product-name a:hover,
p.product-name a:hover
{
    <?php if ($b->isColor($d['colors']['link_hover_color'])): ?>
        color: <?php echo $d['colors']['link_hover_color']; ?>;
    <?php endif; ?>
}


<?php
/* Buttons
-------------------------------------------------------------- */
?>
<?php //All buttons ?>
.action.primary
{
    background-color: <?php echo $d['colors']['button_bg_color']; ?>;
    color: <?php echo $d['colors']['button_color']; ?>;
}
.action.primary:hover,
.action.primary:focus
{
    background-color: <?php echo $d['colors']['button_hover_bg_color']; ?>;
    color: <?php echo $d['colors']['button_hover_color']; ?>;
}

<?php //Add to cart (product view) & Proceed to checkout ?>
.product-view .action.primary,
.action.primary.checkout
{
    background-color: <?php echo $d['colors']['button_active_bg_color']; ?>;
    color: <?php echo $d['colors']['button_active_color']; ?>;
}
.product-view .action.primary:hover,
.action.primary.checkout:hover
{
    background-color: <?php echo $d['colors']['button_hover_bg_color']; ?>;
    color: <?php echo $d['colors']['button_hover_color']; ?>;
}


<?php
/* Inline horizontal links (on hover)
-------------------------------------------------------------- */
?>

.links > li > a:hover {
    <?php if ($b->isColor($d['colors']['important_link_hover_bg_color'])): ?>
        background-color: <?php echo $d['colors']['important_link_hover_bg_color']; ?>;
    <?php endif; ?>
    <?php if ($b->isColor($d['colors']['important_link_hover_color'])): ?>
        color: <?php echo $d['colors']['important_link_hover_color']; ?> !important;
    <?php endif; ?>
}


<?php
/* Product labels
-------------------------------------------------------------- */
?>
.sticker.new {
    background-color: <?php echo $d['colors']['label_new_bg_color']; ?>;
    color: <?php echo $d['colors']['label_new_color']; ?>;
}
.sticker.sale {
    background-color: <?php echo $d['colors']['label_sale_bg_color']; ?>;
    color: <?php echo $d['colors']['label_sale_color']; ?>;
}
.sticker.custom {
    background-color: <?php echo $d['colors']['label_custom_bg_color']; ?>;
    color: <?php echo $d['colors']['label_custom_color']; ?>;
}


<?php
/* TODO: Main color
-------------------------------------------------------------- */
?>

.opc-progress-bar-item._active:before,
.opc-progress-bar-item._active > span:before,
.opc-wrapper .shipping-address-item.selected-item:after,
/*
.minicart-wrapper .action.showcart .counter.qty,
.mini-cart .dropdown-heading.action .counter.qty,
.mini-compare .dropdown-heading.action .counter.qty,
*/
.filter-title strong[data-count]:after,
.main-color--bg
{
    background-color: #5bd2ec;
}

.opc-wrapper .shipping-address-item.selected-item,
.main-color--border
{
    border-color: #5bd2ec;
}

.fotorama__thumb-border
{
    border-color: #333;
}

.swatch-option.selected,
.swatch-attribute.size .swatch-option.selected, 
.swatch-attribute.manufacturer .swatch-option.selected,

.swatch-option:not(.disabled):hover,
.swatch-option.image:not(.disabled):hover,
.swatch-option.color:not(.disabled):hover
{
    outline-color: #333;
}



<?php
/* Other colors
-------------------------------------------------------------- */
?>

<?php // Regular price ?>

<?php /*.cart-price .price,
.minicart-price .price, */ ?>

<?php //Color for price-excluding-tax when displayed together with price-including-tax ?>
<?php /*
.product-info-main .price-box .price-including-tax + .price-excluding-tax,
.product-options-bottom .price-box .price-including-tax + .price-excluding-tax, 
*/ ?>

.price-box .price
{
    color: <?php echo $d['colors']['price_color']; ?>;
}

<?php // Special price ?>
.special-price .price,
.special-price .price-label
{
    color: #F70046;
}

<?php // Special price of configurable product (on product page in main price box) has regular color ?>
.page-product-configurable .product-info-price .special-price .price
{
    color: <?php echo $d['colors']['price_color']; ?>;
}

<?php // Old price ?>
.old-price .price,
.old-price .price-label,
.old-price, <?php // Important: required because line-through for old prices is applied on the outermost price containers  ?>
.old.price
{
    color: #ccc;
}

<?php // Star ratings ?>
.rating-summary .rating-result > span:before,
.review-control-vote label:before {
    color: <?php echo $d['colors']['rating_active_color']; ?>;
}

<?php // Additional background color ?>
.additional-bg-color,

.cart-summary,
.opc-block-summary,
.opc-estimated-wrapper,
.bundle-options-container .block-bundle-summary,
.block-collapsible-nav .content, <?php // Customer account menu ?>

/* Legacy styles selectors, may be deprecated (review it later): */
.checkout-agreements li
{
    background-color: <?php echo $d['colors']['additional_bg_color']; ?>;
}

<?php // Dropdown counters ?>
.minicart-wrapper .action.showcart .counter.qty, <?php // Magento's default selector for counter, e.g. needed for mini cart on checkout page  ?>
.mini-cart .dropdown-heading.action .counter.qty,
.mini-compare .dropdown-heading.action .counter.qty,
.dropdown-heading.action .counter.qty,
.skip-link .counter <?php // This one may be not needed any more ?> 
{
    background-color: <?php echo $d['header']['counter_color']; ?>;
}


<?php
//Main font
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>
/* Custom content class */
.main-font,

/* Headings */
h1, h2, h3, h4, h5,
.section-title,
.products-list .product-name,
.filter .block-subtitle,

/* Generic  */
.feature .heading,
.uaccordion .heading,

/* Main menu */
    /* Regular mode */
    .nav-regular .nav-item.level0 > a, /* level 1 */

        /* Mega dropdown */
        .nav-regular .nav-submenu--mega > li > a, /* First level of mega dropdown */

    /* Mobile mode */
    .menu-trigger,
    .nav-mobile .nav-item.level0 > a,
    .nav-mobile .nav-item.level1 > a,
    .nav-mobile .nav-item.level2 > a,

    /* Holder for additional elements inside the menu bar */
    .nav-holder .dropdown-block .dropdown-heading,

/* Block headings */
.block .block-title,

/* Checkout headings */
#opc-login h3,

/* Multiple checkout */
/*.fieldset .legend,
.multiple-checkout .col2-set h2.legend,
.info-set h2.legend,*/

/* Account */
.box-account .box-head h2,
.order-items h2.table-caption,
.order-items h2.sub-title,
.order-items .order-comments h2,

/* TODO: Product page */
.gen-tabs .tabs a, <?php //TODO: deprecated, remove ?>
.product-view .product.data.items > .item.title > .switch,

/* Footer headings */
.footer .heading,
#subscribe-form label,

/* Captions */
.caption .heading
{
    <?php if ($d['font']['primary_font_family_group'] == 'google'): //Google Fonts ?>
        font-family: "<?php echo $d['font']['primary_font_family']; ?>", georgia, serif;
    <?php elseif ($d['font']['primary_font_family_group'] == 'custom'): //User-defined font stack ?>
        font-family: <?php echo $d['font']['primary_font_family_custom']; ?>;
    <?php else: //Predefined font stack ?>
        font-family: <?php echo $d['font']['primary_font_family_group']; ?>;
    <?php endif; ?>

    <?php
        $primaryFontWeight = $d['font']['primary_font_weight'];
        $primaryFontWeight = trim($primaryFontWeight);
        // If it doesn't contain comma (which indicates multiple weights), print the weight
    ?>
    <?php if ($primaryFontWeight && strpos($primaryFontWeight, ',') === FALSE): ?>
        font-weight: <?php echo $primaryFontWeight; ?>;
    <?php endif; ?>
}



<?php
//Effects
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>
<?php //Animation of structural elements ?>

<?php if ($d['effects']['structural_elements_transition']): ?>
/* Layered nav */
.block-layered-nav dd li,

/* Grid */
.container,
.grid12-1,
.grid12-2,
.grid12-3,
.grid12-4,
.grid12-5,
.grid12-6,
.grid12-7,
.grid12-8,
.grid12-9,
.grid12-10,
.grid12-11,
.grid12-12,
.grid-full,
.grid-col2-sidebar,
.grid-col2-main,

/* Products */
.product-view .product-img-column, /* Deprecated */

/* Misc */
.header .logo
{
    transition:         all 300ms ease-in-out;
    -moz-transition:    all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition:      all 300ms ease-in-out;
}
<?php endif; ?>



<?php
//Icons
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

<?php
/* Interface icons: toolbar, pager
-------------------------------------------------------------- */
?>

<?php //Default icon ?>

.modes-mode,
.sorter-action,

.pages .page,
.pages .action,
.pages .action.previous,
.pages .action.next
{
    background-color: <?php echo $d['colors']['tool_icon_bg_color']; ?>;
    color: <?php echo $d['colors']['tool_icon_color']; ?>;
}

.modes-mode:before,
.sorter-action:before,

.pages .action:before,
.pages .action.previous:before,
.pages .action.next:before
{
    color: <?php echo $d['colors']['tool_icon_color']; ?>;
}


<?php //Hover icon ?>
.modes-mode:hover,
.sorter-action:hover,

.pages .page:hover,
.pages .action:hover
{
    background-color: <?php echo $d['colors']['tool_icon_hover_bg_color']; ?>;
    color: <?php echo $d['colors']['tool_icon_hover_color']; ?>;
}

.modes-mode:hover:before,
.sorter-action:hover:before,

.pages .action:hover:before,
.pages .action.previous:hover:before,
.pages .action.next:hover:before
{
    color: <?php echo $d['colors']['tool_icon_hover_color']; ?>;
}


<?php //Active icon ?>
.modes-mode.active,

.pages .current .page
{
    background-color: <?php echo $d['colors']['tool_icon_active_bg_color']; ?>;
    color: <?php echo $d['colors']['tool_icon_active_color']; ?>;
}

.modes-mode.active:before
{
    color: <?php echo $d['colors']['tool_icon_active_color']; ?>;
}


<?php
/* Interface icons: prev/next slide, scroll to top etc.
-------------------------------------------------------------- */
?>

<?php //Default icon ?>

/* Add-to links */
.addto-links .ic,

/* Slider arrows */
.slider-arrows1 .owl-controls .owl-buttons div,
.slider-arrows1 .owl-controls.clickable .owl-buttons div.disabled:hover,
.slider-arrows2 .owl-controls .owl-buttons div,
.slider-arrows3 .owl-controls .owl-buttons div,
.slider-arrows3 .owl-controls.clickable .owl-buttons div.disabled:hover,

/* Slider pagination */
.slider-pagination1 .owl-controls .owl-page span,
.slider-pagination2 .owl-controls .owl-page span,

/* Lightbox */
#cboxPrevious,
#cboxNext,
#cboxClose,

/* Accordion and collapsible: opener */
.uaccordion-style1 .opener,
.collapsible .opener,

/* Quantity button */
.qty-button,

/* Scroll to top */
#scroll-to-top
{
    background-color: <?php echo $d['colors']['tool_icon_bg_color']; ?>;
    color: <?php echo $d['colors']['tool_icon_color']; ?>;
}


<?php //Hover icon ?>

/* Add-to links */
.addto-links .ic:hover,
.addto-links .feature-icon-hover:hover .ic,

/* Slider arrows */
.slider-arrows1 .owl-controls.clickable .owl-buttons div:hover,
.slider-arrows2 .owl-controls.clickable .owl-buttons div:hover,
.slider-arrows3 .owl-controls.clickable .owl-buttons div:hover,

/* Slider pagination */
.slider-pagination1 .owl-controls.clickable .owl-page:hover span,
.slider-pagination2 .owl-controls.clickable .owl-page:hover span,

/* Lightbox */
#cboxPrevious:hover,
#cboxNext:hover,
#cboxClose:hover,

/* Accordion and collapsible: opener */
.uaccordion-style1 .opener:hover,
.collapsible .opener:hover,

/* Quantity button */
.qty-button:hover,

/* Scroll to top */
#scroll-to-top:hover
{
    background-color: <?php echo $d['colors']['tool_icon_hover_bg_color']; ?>;
    color: <?php echo $d['colors']['tool_icon_hover_color']; ?>;
}


<?php //Active icon ?>

/* Slider pagination */
.slider-pagination1 .owl-controls           .owl-page.active span,
.slider-pagination1 .owl-controls.clickable .owl-page.active:hover span, /* Active state overrides hover state */
.slider-pagination2 .owl-controls           .owl-page.active span,
.slider-pagination2 .owl-controls.clickable .owl-page.active:hover span /* Active state overrides hover state */
{
    background-color: <?php echo $d['colors']['tool_icon_active_bg_color']; ?>;
    color: <?php echo $d['colors']['tool_icon_active_color']; ?>;
}


<?php
/* Iconbox - an icon with background color
-------------------------------------------------------------- */
?>
<?php
    $iconboxBgColor             = $d['colors']['icon_bg_color'];
    $iconboxColor               = $d['colors']['icon_color'];
    $iconboxHoverBgColor        = $d['colors']['icon_hover_bg_color'];
    $iconboxHoverColor          = $d['colors']['icon_hover_color'];
?>

<?php // Default iconbox ?>

.ib
{
    background-color: <?php echo $iconboxBgColor; ?>;
    color: <?php echo $iconboxColor; ?>;
}

<?php // Hover iconbox ?>

.ib-hover:hover,
.feature-icon-hover:hover .ib
{
    background-color: <?php echo $iconboxHoverBgColor; ?>;
    color: <?php echo $iconboxHoverColor; ?>;
}


<?php
/* Iconbox effects
-------------------------------------------------------------- */
?>

<?php // Effect 1 ?>

.ib-ef-1:hover,
.feature-icon-hover:hover .ib-ef-1
{
    background-color: <?php echo $iconboxHoverBgColor; ?>;
    color: <?php echo $iconboxHoverColor; ?>;
}
.ib-ef-1:after
{
    box-shadow: 0 0 0 4px <?php echo $iconboxHoverBgColor; ?>;
}

<?php // Effect 2 ?>

.ib-ef-2
{
    box-shadow: 0 0 0 4px <?php echo $iconboxBgColor; ?>;
}
.ib-ef-2:after
{
    background-color: <?php echo $iconboxBgColor; ?>;
}

<?php // Effect 2a ?>

.ib-ef-2a:hover,
.feature-icon-hover:hover .ib-ef-2a 
{
    color: <?php echo $iconboxColor; ?>;
}

<?php // Effect 2b ?>

.ib-ef-2b:hover,
.feature-icon-hover:hover .ib-ef-2b 
{
    color: <?php echo $iconboxBgColor; ?>;
}

<?php // Effect 3 ?>

.ib-ef-3 {
    box-shadow: 0 0 0 4px <?php echo $iconboxBgColor; ?>;
}
.ib-ef-3:after
{
    background-color: <?php echo $iconboxBgColor; ?>;
}

<?php // Effect 3a ?>

.ib-ef-3a:hover,
.feature-icon-hover:hover .ib-ef-3a {
    color: <?php echo $iconboxBgColor; ?>;
}

<?php // Effect 3b ?>

.ib-ef-3b {
    color: <?php echo $iconboxBgColor; ?>;
}
.ib-ef-3b:hover,
.feature-icon-hover:hover .ib-ef-3b {
    color: <?php echo $iconboxColor; ?>;
}


<?php
/* Add-to icons on product page
-------------------------------------------------------------- */
?>
.ib.icon-color-productview
{
    background-color: <?php echo $d['product_page']['addto_icon_bg_color']; ?>;

    <?php if (isset($d['product_page']['addto_icon_color'])): ?>
        color: <?php echo $d['product_page']['addto_icon_color']; ?>;
    <?php endif; ?>
}
.ib-hover.icon-color-productview:hover,
.feature-icon-hover:hover .ib.icon-color-productview
{
    background-color: <?php echo $d['product_page']['addto_icon_hover_bg_color']; ?> !important;

    <?php if (isset($d['product_page']['addto_icon_hover_color'])): ?>
        color: <?php echo $d['product_page']['addto_icon_hover_color']; ?> !important;
    <?php endif; ?>
}



<?php
//Banners
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

<?php // Caption ?>

<?php if ($d['colors']['ban_cap_bg_color']): ?>
    .cap {
        background-color: <?php echo $d['colors']['ban_cap_bg_color']; ?>;
    }
<?php endif; ?>



<?php
//Entire page
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

<?php
/* Backgrounds and patterns
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>

<?php //Page ?>

<?php if ($d['page']['bg_image']): ?>
    body
    {
        background-image: url(<?php echo $helperDesign->getBackgroundUrl( $d['page']['bg_image'] ); ?>);
        background-repeat: <?php echo $d['page']['bg_repeat']; ?>;
        background-attachment: <?php echo $d['page']['bg_attachment']; ?>;
        background-position: <?php echo $d['page']['bg_positionx'] .' '. $d['page']['bg_positiony']; ?>;
    }
<?php endif; ?>
<?php if ($d['page']['tex']): ?>
    .page-wrapper
    {   
        background-image: url(<?php echo $helperDesign->getPatternUrl( $d['page']['tex'] ); ?>);
    }
<?php endif; ?>


<?php //Header ?>

<?php if ($d['header']['bg_image']): ?>
    .header-container
    {
        background-image: url(<?php echo $helperDesign->getBackgroundUrl( $d['header']['bg_image'] ); ?>);
        background-repeat: <?php echo $d['header']['bg_repeat']; ?>;
        background-attachment: <?php echo $d['header']['bg_attachment']; ?>;
        background-position: <?php echo $d['header']['bg_positionx'] .' '. $d['header']['bg_positiony']; ?>;
    }
<?php endif; ?>
<?php if ($d['header']['tex']): ?>
    .header-container2
    {
        background-image: url(<?php echo $helperDesign->getPatternUrl( $d['header']['tex'] ); ?>);
    }
<?php endif; ?>
<?php if ($d['header']['tex2']): ?>
    .header-container3
    {
        background-image: url(<?php echo $helperDesign->getPatternUrl( $d['header']['tex2'] ); ?>);
    }
<?php endif; ?>


<?php //Main ?>

<?php if ($d['main']['tex']): ?>
    .main-container
    {
        background-image: url(<?php echo $helperDesign->getPatternUrl( $d['main']['tex'] ); ?>);
    }
<?php endif; ?>


<?php //Footer ?>

<?php if ($d['footer']['bg_image']): ?>
    .footer-container
    {
        background-image: url(<?php echo $helperDesign->getBackgroundUrl( $d['footer']['bg_image'] ); ?>);
        background-repeat: <?php echo $d['footer']['bg_repeat']; ?>;
        background-attachment: <?php echo $d['footer']['bg_attachment']; ?>;
        background-position: <?php echo $d['footer']['bg_positionx'] .' '. $d['footer']['bg_positiony']; ?>;
    }
<?php endif; ?>
<?php if ($d['footer']['tex']): ?>
    .footer-container2
    {
        background-image: url(<?php echo $helperDesign->getPatternUrl( $d['footer']['tex'] ); ?>);
    }
<?php endif; ?>
<?php if ($d['footer']['tex2']): ?>
    .footer-container3
    {
        background-image: url(<?php echo $helperDesign->getPatternUrl( $d['footer']['tex2'] ); ?>);
    }
<?php endif; ?>


<?php
/* Header top border
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>

.page-wrapper
{
    <?php if ($b->isColor($d['header']['top_border_color'])): ?>
        border-top-color: <?php echo $d['header']['top_border_color']; ?>;
        border-top-style: solid;
        border-top-width: 5px;
    <?php else: ?>
        border: none !important;
    <?php endif; ?>
}


<?php
/* Side padding of page sections
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>

<?php
/* Default side padding of page sections.
   Important: it's inherited by all sections but can be disabled per section. */
?>
.inner-container {
    padding-left: <?php echo $d['page']['content_padding_side']; ?>px;
    padding-right: <?php echo $d['page']['content_padding_side']; ?>px;
}

<?php
/* Additional variable for default side padding which will be added to "inner-container" when viewport is narrow.
   Below this breakpoint (479px), if side padding for inner container is disabled (so the container is stretched),
   some small side padding needs to be added to the "inner-container" to move the contents away from the edge of the screen. */

    $mobileContentPaddingSide = 12;
?>
<?php if ($d['page']['content_padding_side'] === '0'): ?>
    @media only screen and (max-width: 479px) {
        .container > .inner-container {
            padding-left: <?php echo $mobileContentPaddingSide; ?>px;
            padding-right: <?php echo $mobileContentPaddingSide; ?>px;
        }
    }
<?php endif; ?>


<?php
/* Top header
-------------------------------------------------------------- */
?>
<?php if ($d['header_top']['content_padding_side'] === 'full'): ?>
    .header-top.container {
        width: 100%;
        max-width: none;
    }
<?php elseif ($d['header_top']['content_padding_side'] === 'full-expanded'): ?>
    .header-top.container {
        width: 100%;
        max-width: none;
    }
    .header-top.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php elseif ($d['header_top']['content_padding_side'] === 'expanded'): ?>
    .header-top.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php endif; ?>


<?php
/* Primary header
-------------------------------------------------------------- */
?>
<?php if ($d['header_primary']['content_padding_side'] === 'full'): ?>
    .header-primary.container {
        width: 100%;
        max-width: none;
    }
<?php elseif ($d['header_primary']['content_padding_side'] === 'full-expanded'): ?>
    .header-primary.container {
        width: 100%;
        max-width: none;
    }
    .header-primary.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php elseif ($d['header_primary']['content_padding_side'] === 'expanded'): ?>
    .header-primary.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php endif; ?>


<?php
/* Main menu
-------------------------------------------------------------- */
?>
<?php if ($d['nav']['content_padding_side'] === 'full'): ?>
    .nav.container {
        width: 100%;
        max-width: none;
    }
<?php elseif ($d['nav']['content_padding_side'] === 'full-expanded'): ?>
    .nav.container {
        width: 100%;
        max-width: none;
    }
    .nav.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php elseif ($d['nav']['content_padding_side'] === 'expanded'): ?>
    .nav.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php elseif ($d['nav']['content_padding_side'] === 'override'): ?>
    .nav.container > .inner-container {
        padding-left: <?php echo intval($d['nav']['content_padding_side_value']); ?>px;
        padding-right: <?php echo intval($d['nav']['content_padding_side_value']); ?>px;
    }
<?php endif; ?>


<?php
/* Main
-------------------------------------------------------------- */
?>
<?php if ($d['main']['content_padding_side'] === 'full'): ?>
    .main.container {
        width: 100%;
        max-width: none;
    }
<?php elseif ($d['main']['content_padding_side'] === 'full-expanded'): ?>
    .main.container {
        width: 100%;
        max-width: none;
    }
    .main.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php elseif ($d['main']['content_padding_side'] === 'expanded'): ?>
    .main.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
    @media only screen and (max-width: 479px) {
        .main.container:not(.no-side-padding) > .inner-container {
            padding-left: <?php echo $mobileContentPaddingSide; ?>px;
            padding-right: <?php echo $mobileContentPaddingSide; ?>px;
        }
    }
<?php endif; ?>


<?php
/* Top footer
-------------------------------------------------------------- */
?>
<?php if ($d['footer_top']['content_padding_side'] === 'full'): ?>
    .footer-top.container {
        width: 100%;
        max-width: none;
    }
<?php elseif ($d['footer_top']['content_padding_side'] === 'full-expanded'): ?>
    .footer-top.container {
        width: 100%;
        max-width: none;
    }
    .footer-top.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php elseif ($d['footer_top']['content_padding_side'] === 'expanded'): ?>
    .footer-top.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php endif; ?>


<?php
/* Primary footer
-------------------------------------------------------------- */
?>
<?php if ($d['footer_primary']['content_padding_side'] === 'full'): ?>
    .footer-primary.container {
        width: 100%;
        max-width: none;
    }
<?php elseif ($d['footer_primary']['content_padding_side'] === 'full-expanded'): ?>
    .footer-primary.container {
        width: 100%;
        max-width: none;
    }
    .footer-primary.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php elseif ($d['footer_primary']['content_padding_side'] === 'expanded'): ?>
    .footer-primary.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php endif; ?>


<?php
/* Bottom footer
-------------------------------------------------------------- */
?>
<?php if ($d['footer_bottom']['content_padding_side'] === 'full'): ?>
    .footer-bottom.container {
        width: 100%;
        max-width: none;
    }
<?php elseif ($d['footer_bottom']['content_padding_side'] === 'full-expanded'): ?>
    .footer-bottom.container {
        width: 100%;
        max-width: none;
    }
    .footer-bottom.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php elseif ($d['footer_bottom']['content_padding_side'] === 'expanded'): ?>
    .footer-bottom.container > .inner-container {
        padding-left: 0;
        padding-right: 0;
    }
<?php endif; ?>



<?php
//Header
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>
.header-container
{
    <?php if ($d['header']['bg_color']): ?>
        background-color: <?php echo $d['header']['bg_color']; ?>;
    <?php endif; ?>
}
.header.container
{
    <?php if ($d['header']['inner_bg_color']): ?>
        background-color: <?php echo $d['header']['inner_bg_color']; ?>;
    <?php endif; ?>
    
    <?php if ($b->isColor($d['header']['color'])): ?>
        color: <?php echo $d['header']['color']; ?>;
    <?php endif; ?>
}
.header a {
    <?php if ($b->isColor($d['header']['link_color'])): ?>
        color: <?php echo $d['header']['link_color']; ?>;
    <?php endif; ?>
}
.header a:hover {
    <?php if ($b->isColor($d['header']['link_hover_color'])): ?>
        color: <?php echo $d['header']['link_hover_color']; ?>;
    <?php endif; ?>
}

<?php //Additional spacing - it's applied to the third div (lowermost "layer") of the outer header container ?>
.header-container3
{
    <?php if ($d['header']['padding_top']): ?>
        padding-top: <?php echo intval($d['header']['padding_top']); ?>px;
    <?php endif; ?>

    <?php if ($d['header']['padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['header']['padding_bottom']); ?>px;
    <?php endif; ?>
}


<?php
/* Search box
-------------------------------------------------------------- */
?>
<?php //Important: set width only in regular header ?>
<?php if (trim($d['header']['search_max_width']) !== '' ): ?>
.header-regular .search-wrapper {
    max-width: <?php echo $d['header']['search_max_width']; ?>;
}
<?php endif; ?>

.header-regular .block-search .input-text
{
    background-color: <?php echo $d['header']['search_bg_color']; ?>;
    border-color: <?php echo $d['header']['search_border_color']; ?>;
}
.header-regular .block-search .input-text:hover,
.header-regular .block-search .input-text:focus
{
    background-color: <?php echo $d['header']['search_hover_bg_color']; ?>;
    border-color: <?php echo $d['header']['search_border_hover_color']; ?>;
}

<?php if ($b->isColor($d['header']['search_color'])): ?>
.header-regular .block-search .input-text,
.header-regular .block-search .action.search:before 
{
    color: <?php echo $d['header']['search_color']; ?>;
}
.header-regular .block-search .input-text::-webkit-input-placeholder 
<?php /*
.header-regular .block-search .input-text:-moz-placeholder,
.header-regular .block-search .input-text::-moz-placeholder,
.header-regular .block-search .input-text:-ms-input-placeholder */ ?>
{
    color: <?php echo $d['header']['search_color']; ?>;
}
<?php endif; ?>

<?php if ($b->isColor($d['header']['search_hover_color'])): ?>
.header-regular .block-search .input-text:hover,
.header-regular .block-search .input-text:focus,
.header-regular .block-search .action.search:hover,
.header-regular .block-search .action.search:focus,
.header-regular .block-search .action.search:hover:before,
.header-regular .block-search .action.search:focus:before
{
    color: <?php echo $d['header']['search_hover_color']; ?>;
}
.header-regular .block-search .input-text:hover::-webkit-input-placeholder,
.header-regular .block-search .input-text:focus::-webkit-input-placeholder 
<?php /*
.header-regular .block-search .input-text:hover:-moz-placeholder,
.header-regular .block-search .input-text:focus:-moz-placeholder,
.header-regular .block-search .input-text:hover::-moz-placeholder,
.header-regular .block-search .input-text:focus::-moz-placeholder,
.header-regular .block-search .input-text:hover:-ms-input-placeholder,
.header-regular .block-search .input-text:focus:-ms-input-placeholder */ ?>
{
    color: <?php echo $d['header']['search_hover_color']; ?>;
}
<?php endif; ?>

<?php
    // If no border color, then remove border and button's margin 
    // important: not only for regular header.
?>
<?php if ($b->isColor($d['header']['search_border_color']) == false && $b->isColor($d['header']['search_border_hover_color']) == false): ?>
    .block-search .input-text { border: none; }
<?php endif; ?>


<?php
/* Header drop-downs: see later in this file.
   Header drop-down styles need to override menu styles. */ ?>


<?php
/* Header drop-downs.
   Moved after menu to override menu styles, because drop-downs can
   be also placed inside menu (inside nav-holder class).
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>

.header-container .dropdown-block .dropdown-content,
.header-container .dropdown-block.open > .dropdown-heading.cover > *,
.header-container .truncated .truncated_full_value .item-options, <?php //Deprecated ?>
.header-container .form-search .search-autocomplete
{
    <?php if ($b->isColor($d['header']['dropdown_bg_color'])): ?>
        background-color: <?php echo $d['header']['dropdown_bg_color']; ?>;
    <?php else: ?>
        background-color:#fff;
    <?php endif; ?>
    
    <?php if ($b->isColor($d['header']['dropdown_color'])): ?>
        color: <?php echo $d['header']['dropdown_color']; ?>; <?php //It will be inherited by child elements ?>
    <?php endif; ?>
}

<?php //Header drop-downs: link colors ?>
.header-container .dropdown-block .dropdown-content a,
.header-container .dropdown-block .dropdown-content .action:before,
.header-container .dropdown-block.open > .dropdown-heading.cover a,
.header-container .form-search .search-autocomplete li
{
    <?php if ($b->isColor($d['header']['dropdown_link_color'])): ?>
        color: <?php echo $d['header']['dropdown_link_color']; ?>;
    <?php endif; ?>
}
.header-container .dropdown-block .dropdown-content a:hover,
.header-container .dropdown-block .dropdown-content .action:hover:before,
.header-container .dropdown-block.open > .dropdown-heading.cover a:hover,
.header-container .form-search .search-autocomplete li:hover
{
    <?php if ($b->isColor($d['header']['dropdown_link_hover_color'])): ?>
        color: <?php echo $d['header']['dropdown_link_hover_color']; ?>;
    <?php endif; ?>
}



<?php
//Header top
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

.header-top-container
{
    <?php if ($d['header_top']['bg_color']): ?>
        background-color: <?php echo $d['header_top']['bg_color']; ?>;
    <?php endif; ?>

    <?php if ($d['header_top']['padding_top']): ?>
        padding-top: <?php echo intval($d['header_top']['padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['header_top']['padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['header_top']['padding_bottom']); ?>px;
    <?php endif; ?>
}
.header-top
{
    <?php if ($d['header_top']['inner_bg_color']): ?>
        background-color: <?php echo $d['header_top']['inner_bg_color']; ?>;
    <?php endif; ?>
    
    <?php if ($b->isColor($d['header_top']['color'])): ?>
        color: <?php echo $d['header_top']['color']; ?>;
    <?php endif; ?>

    <?php if ($d['header_top']['content_padding_top']): ?>
        padding-top: <?php echo intval($d['header_top']['content_padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['header_top']['content_padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['header_top']['content_padding_bottom']); ?>px;
    <?php endif; ?>
}
.header-top a
{
    <?php if ($b->isColor($d['header_top']['link_color'])): ?>
        color: <?php echo $d['header_top']['link_color']; ?>;
    <?php endif; ?>
}
.header-top a:hover
{
    <?php if ($b->isColor($d['header_top']['link_hover_color'])): ?>
        color: <?php echo $d['header_top']['link_hover_color']; ?>;
    <?php endif; ?>
}


<?php
/* Height of the top header.
   Important: set max height to improve layout of inline elements.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>
<?php
    $topHeaderLineHeight = $d['header_top']['line_height'];
?>
<?php if ($topHeaderLineHeight): ?>
    .header-top,
    .header-top .dropdown-block .dropdown-heading,
    .header-top .links > li > *
    {
        line-height: <?php echo $topHeaderLineHeight; ?>px;
        max-height: <?php echo $topHeaderLineHeight; ?>px;
    }
    .header-top .dropdown-block .dropdown-heading
    {
        max-height: <?php echo $topHeaderLineHeight; ?>px;
    }
<?php endif; ?>



<?php
//Header primary
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

.header-primary-container
{
    <?php if ($d['header_primary']['bg_color']): ?>
        background-color: <?php echo $d['header_primary']['bg_color']; ?>;
    <?php endif; ?>

    <?php if ($d['header_primary']['padding_top']): ?>
        padding-top: <?php echo intval($d['header_primary']['padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['header_primary']['padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['header_primary']['padding_bottom']); ?>px;
    <?php endif; ?>
}
.header-primary
{
    <?php if ($d['header_primary']['inner_bg_color']): ?>
        background-color: <?php echo $d['header_primary']['inner_bg_color']; ?>;
    <?php endif; ?>

    <?php /*
    <?php if ($b->isColor($d['header_primary']['color'])): ?>
        color: <?php echo $d['header_primary']['color']; ?>;
    <?php endif; ?>
    */ ?>

    <?php if ($d['header_primary']['content_padding_top']): ?>
        padding-top: <?php echo intval($d['header_primary']['content_padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['header_primary']['content_padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['header_primary']['content_padding_bottom']); ?>px;
    <?php endif; ?>
}
<?php /*
.header-primary a
{
    <?php if ($b->isColor($d['header_primary']['link_color'])): ?>
        color: <?php echo $d['header_primary']['link_color']; ?>;
    <?php endif; ?>
}
.header-primary a:hover
{
    <?php if ($b->isColor($d['header_primary']['link_hover_color'])): ?>
        color: <?php echo $d['header_primary']['link_hover_color']; ?>;
    <?php endif; ?>
}
*/ ?>

<?php
/* Height of the elements in the primary header.
   Important: set max height to improve layout of inline elements.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>
<?php
    $primaryHeaderFontSize = $d['header_primary']['font_size'];
    $primaryHeaderLineHeight = $d['header_primary']['line_height'];
?>
.header-primary .dropdown-block .dropdown-heading,
.header-primary .links > li > *
{
    <?php if ($primaryHeaderFontSize): ?>
        font-size: <?php echo $primaryHeaderFontSize; ?>px;
    <?php endif; ?>
    <?php if ($primaryHeaderLineHeight): ?>
        line-height: <?php echo $primaryHeaderLineHeight; ?>px;
    <?php endif; ?>
}
<?php if ($primaryHeaderLineHeight): ?>
    .header-primary .dropdown-block .dropdown-heading
    {
        max-height: <?php echo $primaryHeaderLineHeight; ?>px;
    }
<?php endif; ?>



<?php
// Megamenu
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

<?php /* Common elements */ ?>

<?php
/* Category labels
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>

.cat-label-label1 {
    <?php if ($d['nav']['label_bg_color']): ?>
        background-color: <?php echo $d['nav']['label_bg_color']; ?>;
    <?php endif; ?>
    <?php if ($b->isColor($d['nav']['label_color'])): ?>
        color: <?php echo $d['nav']['label_color']; ?>;
    <?php endif; ?>
}
.cat-label-label2 {
    <?php if ($d['nav']['label_bg_color2']): ?>
        background-color: <?php echo $d['nav']['label_bg_color2']; ?>;
    <?php endif; ?>
    <?php if ($b->isColor($d['nav']['label_color2'])): ?>
        color: <?php echo $d['nav']['label_color2']; ?>;
    <?php endif; ?>
}

<?php //Top-category label pin ?>

li.level0 > a > span > .cat-label-label1.pin-bottom:before {
    <?php if ($d['nav']['label_bg_color']): ?>
        border-top-color: <?php echo $d['nav']['label_bg_color']; ?>;
    <?php endif; ?>
}
li.level0 > a > span > .cat-label-label2.pin-bottom:before {
    <?php if ($d['nav']['label_bg_color2']): ?>
        border-top-color: <?php echo $d['nav']['label_bg_color2']; ?>;
    <?php endif; ?>
}

<?php //Category label hover ?>

li > a:hover > span > .cat-label,
.nav-regular li.level0:hover > a > span > .cat-label /* Top-level category label is highlighted on item hover, not on link hover */
{
    <?php if ($d['nav']['label_hover_bg_color']): ?>
        background-color: <?php echo $d['nav']['label_hover_bg_color']; ?>;
    <?php endif; ?>
    <?php if ($b->isColor($d['nav']['label_hover_color'])): ?>
        color: <?php echo $d['nav']['label_hover_color']; ?>;
    <?php endif; ?>
}
li.level0 > a:hover > span > .pin-bottom:before,
.nav-regular li.level0:hover > a > span > .pin-bottom:before
{
    <?php if ($d['nav']['label_hover_bg_color']): ?>
        border-top-color: <?php echo $d['nav']['label_hover_bg_color']; ?>;
    <?php endif; ?>
}

<?php
/* Dropdowns.
   IMPORTANT: common for menu in regular and mobile mode
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>

.navi .nav-panel--dropdown
{
    <?php if ($b->isColor($d['nav']['dropdown_bg_color'])): ?>
        background-color: <?php echo $d['nav']['dropdown_bg_color']; ?>;
    <?php else: ?>
        background-color:#fff;
    <?php endif; ?>
    
    <?php if ($b->isColor($d['nav']['dropdown_color'])): ?>
        color: <?php echo $d['nav']['dropdown_color']; ?>;
    <?php endif; ?>
}

<?php // Items containing only category blocks ?>
.nav-mobile.opt-sb0.opt-sob .nav-item.nav-item--only-blocks > div
{
    <?php if ($b->isColor($d['nav']['dropdown_bg_color'])): ?>
        background-color: <?php echo $d['nav']['dropdown_bg_color']; ?> !important;
    <?php else: ?>
        background-color: #fff !important;
    <?php endif; ?>
}

<?php //Item hover background color - level 2+  ?>
<?php if ($b->isColor($d['nav']['dropdown_item_hover_bg_color'])): ?>
    .nav-regular .nav-panel--dropdown .nav-item > a:hover
    {
        background-color: <?php echo $d['nav']['dropdown_item_hover_bg_color']; ?>;
    }
<?php endif; ?>


<?php //Link colors  ?>

.navi .nav-panel--dropdown a
{
    <?php if ($b->isColor($d['nav']['dropdown_link_color'])): ?>
        color: <?php echo $d['nav']['dropdown_link_color']; ?>;
    <?php endif; ?>
}
.navi .nav-panel--dropdown a:hover
{
    <?php if ($b->isColor($d['nav']['dropdown_link_hover_color'])): ?>
        color: <?php echo $d['nav']['dropdown_link_hover_color']; ?>;
    <?php endif; ?>
}

<?php
/* Dropdown borders. Only regular mode.
-------------------------------------------------------------- */
?>

<?php if ($d['nav']['dropdown_border_top'] > 0): ?>

    <?php //All types, only level 1 ?>
    .nav-regular .nav-item.level0 > .nav-panel--dropdown

        <?php //If border should be displayed on dropdowns of all levels ?>
        <?php if ($d['nav']['dropdown_border_all_levels']): ?>
        , 
        <?php //Important: note the comma above which is required after the first rule ?>
        .nav-regular .mega > .nav-panel--dropdown,
        .nav-regular .classic > .nav-panel--dropdown
        <?php endif; ?>

    {
        border-top:<?php echo $d['nav']['dropdown_border_top']; ?>px solid <?php echo $d['nav']['dropdown_border_top_color']; ?>;
    }

<?php endif; ?>

<?php
/* Dropdowns shadow
-------------------------------------------------------------- */
?>

<?php if ($d['nav']['dropdown_shadow']): ?>
<?php //All types of dropdowns ?>
.nav-regular .nav-panel--dropdown
{
    -moz-box-shadow:0 3px 10px rgba(0,0,0, 0.15);
    -webkit-box-shadow:0 3px 10px rgba(0,0,0, 0.15);
    box-shadow:0 3px 10px rgba(0,0,0, 0.15);
}
<?php endif; ?>

<?php
//Mobile mode.
//Apply only to top-level dropdowns which are divs (so when submenu is wrapped inside a div).
?>

<?php if ($d['nav']['mobile_shadow']): ?>
.nav-mobile div.nav-panel--dropdown,

<?php // Items containing only category blocks ?>
.nav-mobile.opt-sb0.opt-sob .nav-item.nav-item--only-blocks > div
{
    -moz-box-shadow:    0 3px 10px rgba(0,0,0, 0.15);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0, 0.15);
    box-shadow:         0 3px 10px rgba(0,0,0, 0.15);

    <?php //Pull dropdown above top-level items to show shadow at the bottom of the dropdown ?>
    z-index: 1;
    position: relative;
}
<?php //Hide shadow in nested dropdowns ?>
.nav-mobile div.nav-panel--dropdown div.nav-panel--dropdown
{
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}
<?php endif; ?>


<?php
/* Menu base styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>

<?php
/* Menu containers
-------------------------------------------------------------- */
?>

<?php //Menu outer container ?>
.nav-container 
{
    <?php if ($d['nav']['outer_bg_color']): ?>
        background-color: <?php echo $d['nav']['outer_bg_color']; ?>;
    <?php endif; ?>

    <?php if ($d['nav']['padding_top']): ?>
        padding-top: <?php echo intval($d['nav']['padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['nav']['padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['nav']['padding_bottom']); ?>px;
    <?php endif; ?>
}

<?php // Important: added class "container" to make this selector unique because Magneto 2 adds "nav" class to footer links ?>
.nav.container
{
    <?php //Menu bar inner background color (which is visible as an outline) ?>
    <?php if ($b->isColor($d['nav']['inner_bg_color'])): ?>
        background-color: <?php echo $d['nav']['inner_bg_color']; ?>;
    <?php endif; ?>

    <?php if ($d['nav']['content_padding_top']): ?>
        padding-top: <?php echo intval($d['nav']['content_padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['nav']['content_padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['nav']['content_padding_bottom']); ?>px;
    <?php endif; ?>
}

<?php //If menu bar has inner background color, it can have an outline, so remove bottom margin of the trigger ?>
<?php if ($b->isColor($d['nav']['inner_bg_color'])): ?>
.nav .mobnav-trigger {
    margin-bottom: 0;
}
<?php endif; ?>


<?php
/* Menu bar with an outline.
   If nav container has background color, remove padding from it and from its "inner-container".
   add padding, the same value as for side padding of all page sections. */
?>
<?php
    //Inner background color of primary header container can be inherited from header container
    $headerInnerBgColor = '';
    if ($b->isColor($d['header_primary']['inner_bg_color']))
    {
        $headerInnerBgColor = $d['header_primary']['inner_bg_color'];
    }
    else
    {
        if ($b->isColor($d['header']['inner_bg_color']))
        {
            $headerInnerBgColor = $d['header']['inner_bg_color'];
        }
    }

    $headerStretched = FALSE;
    if ($d['header_primary']['content_padding_side'] === 'expanded')
    {
        $headerStretched = TRUE;
    }

    //Inner background color of nav container
    $navInnerBgColor = '';
    if ($b->isColor($d['nav']['inner_bg_color']))
    {
        $navInnerBgColor = $d['nav']['inner_bg_color'];
    }

    $navStretched = FALSE;
    if ($d['nav']['content_padding_side'] === 'expanded')
    {
        $navStretched = TRUE;
    }

    //Check if nav container should be stretched
    $makeNavStretched = FALSE;

    //If primary header container has inner background color but nav container has no background color and is not stretched
    if ($headerInnerBgColor)
    {
        if ((! $navInnerBgColor) && (! $navStretched))
        {
            $makeNavStretched = TRUE;
        }
    }

    //If primary header container is stretched but nav container is not stretched
    if ($headerStretched)
    {
        if (! $navStretched)
        {
            $makeNavStretched = TRUE;
        }
    }
    
?>
<?php if ($makeNavStretched): ?>

    <?php //Make inner container stretched ?>
    .header-mobile .nav
    {
        padding: 0;
    }
    .header-mobile .nav > .inner-container
    {
        padding: 0;
    }

<?php endif; ?>


<?php
/* Sticky menu
-------------------------------------------------------------- */
?>
<?php
/* Important: these rules have to be declared before rules
   of the colors of non-sticky menu, so that hover item color
   and current item color can override sticky menu color rules. */
?>
<?php //Override default menu bar color when sticky menu is enabled. Important: regular mode only. ?>
<?php if ($d['nav']['sticky_item_bg_color']): ?>
    .sticky-header .nav-container, <?php //Sticky menu container ?>
    .sticky-header .navi-wrapper, <?php //Menu bar wrapper ?>
    .sticky-header .nav-regular:not(.nav-vert) <?php //Menu bar ?>
    {
        background-color: <?php echo $d['nav']['sticky_item_bg_color']; ?>;
    }
<?php endif; ?>

<?php //Top-level items ?>
<?php if ($b->isColor($d['nav']['sticky_item_color'])): ?>
    .sticky-header .nav-regular:not(.nav-vert) .nav-item.level0 > a,
    .sticky-header .nav-regular .nav-item--homeicon a, <?php //TODO: Single icon has the same color as default item ?>
    .sticky-header .nav-regular .nav-item--homeicon.active a, <?php //TODO: ?>
    .sticky-header .nav-holder .dropdown-block .dropdown-heading
    {
        color: <?php echo $d['nav']['sticky_item_color']; ?>;
    }

<?php endif; ?>

<?php //Hide bottom border of menu ?>
<?php if (! $d['nav']['sticky_border']): ?>
    .sticky-header .nav-border-bottom
    {
        border-bottom: none;
    }
<?php endif; ?>


<?php
/* Top-level menu items - basic colors (default, hover, current)
-------------------------------------------------------------- */
?>
<?php
    //Regular menu
    $navBgColor             = $d['nav']['bg_color'];
    $navColor               = $d['nav']['color'];
    $navActiveBgColor       = $d['nav']['active_bg_color'];
    $navActiveColor         = $d['nav']['active_color'];
    $navHoverBgColor        = $d['nav']['hover_bg_color'];
    $navHoverColor          = $d['nav']['hover_color'];

    //Mobile menu
    $mobNavBgColor          = $d['nav']['bg_color'];
    $mobNavColor            = $d['nav']['color'];
    $mobNavBgColorLevel2    = $d['nav']['bg_color'];
    $mobNavColorLevel2      = $d['nav']['color'];
    $mobNavActiveBgColor    = $d['nav']['active_bg_color'];
    $mobNavActiveColor      = $d['nav']['active_color'];
    $mobNavHoverBgColor     = $d['nav']['hover_bg_color'];
    $mobNavHoverColor       = $d['nav']['hover_color'];
?>

<?php //Default item ?>

    <?php //Regular mode only ?>

        <?php //Level 1 ?>
        .navi-wrapper,
        .nav-regular
        {
            background-color: <?php echo $navBgColor; ?>;
        }

        .nav-regular:not(.nav-vert) .nav-item.level0 > a,

        <?php //Containers for additional elements in the menu bar ?>
        .nav-holder .dropdown-block .dropdown-heading,

        <?php //In case a link ("a" tag) is used as a dropdown heading, apply hover color to override link's default hover color ?>
        .nav-regular .nav-holder a.dropdown-heading:hover
        {
            color: <?php echo $navColor; ?>;
        }

        <?php //Single icon has the same color as default item.
              //It doesn't change on hover so we added "!important". ?>
        .navi .nav-item--homeicon a
        {
            color: <?php echo $navColor; ?> !important;
        }

    <?php //Mobile mode only ?>

        <?php //Level 1 ?>
        .nav-mobile .nav-item.level0 > a
        {
            background-color: <?php echo $mobNavBgColor; ?>;
            color: <?php echo $mobNavColor; ?>;
        }
        .nav-mobile .nav-item.level0 > .opener
        {
            color: <?php echo $mobNavColor; ?>;
        }

        <?php //Level 2+ ?>
        <?php //TODO: check. Important: added .navi to make rule more specific and override dropdown styles of the regular menu ?>
        .navi.nav-mobile ul.level0 .nav-item > a
        {
            background-color: <?php echo $mobNavBgColorLevel2; ?>;
            color: <?php echo $mobNavColorLevel2; ?>;
        }
        .nav-mobile ul.level0 .nav-item > .opener
        {
            color: <?php echo $mobNavColorLevel2; ?>;
        }

<?php //Currently selected item ?>

    <?php //All modes ?>

        <?php //Level 1 ?>
        .nav-regular:not(.nav-vert) .nav-item.level0.active > a
        {
            background-color: <?php echo $navActiveBgColor; ?>;
            color: <?php echo $navActiveColor; ?>;
        }

    <?php //Mobile mode only ?>

        <?php //Level 1 ?>
        .nav-mobile .nav-item.level0.current > a
        {
            background-color: <?php echo $mobNavActiveBgColor; ?>;
            color: <?php echo $mobNavActiveColor; ?>;
        }
        .nav-mobile .nav-item.level0.current > .opener
        {
            color: <?php echo $mobNavActiveColor; ?>;
        }

        <?php //Level 2+ ?>
        <?php //Important: added .navi to make rule more specific to override dropdown styles ?>
        .navi.nav-mobile ul.level0 .nav-item.current > a
        {
            background-color: <?php echo $mobNavActiveBgColor; ?>;
            color: <?php echo $mobNavActiveColor; ?>;
        }
        .nav-mobile ul.level0 .nav-item.current > .opener
        {
            color: <?php echo $mobNavActiveColor; ?>;
        }

<?php //Hover item ?>

    <?php //All modes ?>

        <?php //Level 1 ?>
        .nav-regular:not(.nav-vert) .nav-item.level0:hover > a
        {
            background-color: <?php echo $navHoverBgColor; ?>;
            color: <?php echo $navHoverColor; ?>;
        }

    <?php //Mobile mode only ?>

        <?php //Level 1 ?>
        .nav-mobile .nav-item.level0 > a:hover
        {
            background-color: <?php echo $mobNavHoverBgColor; ?>;
            color: <?php echo $mobNavHoverColor; ?>;
        }
        .nav-mobile .nav-item.level0 > a:hover + .opener
        {
            color: <?php echo $mobNavHoverColor; ?>;
        }

        <?php //Level 2+ ?>
        <?php //Important: added .navi to make rule more specific and override dropdown styles of the regular menu ?>
        .navi.nav-mobile ul.level0 .nav-item > a:hover
        {
            background-color: <?php echo $mobNavHoverBgColor; ?>;
            color: <?php echo $mobNavHoverColor; ?>;
        }
        .nav-mobile ul.level0 .nav-item > a:hover + .opener
        {
            color: <?php echo $mobNavHoverColor; ?>;
        }


<?php
/* Vertical menu:
   - top menu (vertical layout): top-level items
   - sidebar accordion menu: all levels
-------------------------------------------------------------- */
?>
<?php
    $vertItemBgColor                = $d['nav']['vert_item_bg_color'];
    $vertItemColor                  = $d['nav']['vert_item_color'];
    $vertItemHoverBgColor           = $d['nav']['vert_item_hover_bg_color'];
    $vertItemHoverColor             = $d['nav']['vert_item_hover_color'];
    $vertItemActiveBgColor          = $d['nav']['vert_item_active_bg_color'];
    $vertItemActiveColor            = $d['nav']['vert_item_active_color'];
?>

<?php //Default item ?>

    .nav-vert .nav-item.level0 > a
    {
        background-color: <?php echo $vertItemBgColor; ?>;
        color: <?php echo $vertItemColor; ?>;
    }

    <?php //Sidebar accordion menu ?>

    .sideacco .nav-item > a
    {
        background-color: <?php echo $vertItemBgColor; ?>;
        color: <?php echo $vertItemColor; ?>;
    }
    .sideacco .nav-item > .opener
    {
        color: <?php echo $vertItemColor; ?>;
    }

<?php //Currently selected item ?>

    .nav-vert .nav-item.level0.active > a
    {
        background-color: <?php echo $vertItemActiveBgColor; ?>;
        color: <?php echo $vertItemActiveColor; ?>;
    }

    <?php //Sidebar accordion menu ?>

    .sideacco .nav-item.current > a
    {
        background-color: <?php echo $vertItemActiveBgColor; ?>;
        color: <?php echo $vertItemActiveColor; ?>;
    }
    .sideacco .nav-item.current > .opener
    {
        color: <?php echo $vertItemActiveColor; ?>;
    }

<?php //Hover item ?>

    .nav-vert .nav-item.level0:hover > a
    {
        background-color: <?php echo $vertItemHoverBgColor; ?>;
        color: <?php echo $vertItemHoverColor; ?>;
    }

    <?php //Sidebar accordion menu ?>

    <?php //Important: set color on link hover, NOT on item hover (otherwise multiple items would change color on hover if menu has multiple levels) ?>
    .sideacco .nav-item > a:hover
    {
        background-color: <?php echo $vertItemHoverBgColor; ?>;
        color: <?php echo $vertItemHoverColor; ?>;
    }
    .sideacco .nav-item > a:hover + .opener
    {
        color: <?php echo $vertItemHoverColor; ?>;
    }
    <?php //Important: change font color of opener on item hover (NOT on link hover) ?>


<?php
/* Vertical menu dropdown's shadow
-------------------------------------------------------------- */
?>

<?php if ($d['nav']['vert_shadow']): ?>
.navi.nav-vert-triggerable
{
    -moz-box-shadow: 0 3px 10px rgba(0,0,0, 0.15);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0, 0.15);
    box-shadow: 0 3px 10px rgba(0,0,0, 0.15);
}
<?php endif; ?>


<?php
/* Height of the menu bar (and other elements inisde menu bar)
-------------------------------------------------------------- */
?>

<?php if ($d['nav']['line_height'] > 0): ?>

    <?php /* Top-level items and menu triggers */ ?>
    .navi-wrapper .menu-trigger, /* TODO:NEW */
    .nav-regular .nav-item.level0 > a {
        line-height: <?php echo $d['nav']['line_height']; ?>px;
    }

    <?php /* Position of the menu (displayed by vertical menu trigger) when vertical menu type is enabled */ ?>
    .navi-wrapper .navi.nav-vert-triggerable /* TODO:NEW. Replace the old one (below) */
    
    /* , .navi.nav-vert-triggerable */

    {
        top: <?php echo $d['nav']['line_height']; ?>px;
    }

    <?php 
    /* Other elements inisde menu bar need to have the same height as height of the menu bar.
       Also, set max height to avoid issues with excessive height of the elements. */
    ?>

    .nav-holder > * {
        line-height: <?php echo $d['nav']['line_height']; ?>px;
        max-height: <?php echo $d['nav']['line_height']; ?>px;
    }

    .nav-holder .dropdown-block .dropdown-heading {
        line-height: <?php echo $d['nav']['line_height']; ?>px;
        max-height: <?php echo $d['nav']['line_height']; ?>px;
    }

<?php endif; ?>


<?php
/* Height of vertical menu items:
   - top menu (vertical layout): top-level items
   - sidebar accordion menu: all levels
   Important: it has to be set after the height of
   the top menu items to override it.
-------------------------------------------------------------- */
?>

<?php if ($d['nav']['vert_item_line_height'] > 0): ?>

    .menu-trigger,
    .nav-vert .nav-item.level0 > a
    {
        line-height: <?php echo $d['nav']['vert_item_line_height']; ?>px;
    }

    <?php /* Position of the menu (displayed by vertical menu trigger) when vertical menu type is enabled. TODO: check if needed */ ?>
    .vertnav-trigger + .navi.nav-vert-triggerable {
        top: <?php echo $d['nav']['vert_item_line_height']; ?>px;
    }

    <?php //Sidebar accordion menu ?>

    .sideacco .nav-item > a
    {
        line-height: <?php echo $d['nav']['vert_item_line_height']; ?>px;
    }
    .sideacco .nav-item.parent > a
    {
        <?php //Space for openner if item has children. Space has to be a few pixels wider than openner. ?>
        padding-right: <?php echo $d['nav']['vert_item_line_height']; ?>px;
    }
    .sideacco .nav-item > .opener
    {
        width: <?php echo $d['nav']['vert_item_line_height']; ?>px;
        height: <?php echo $d['nav']['vert_item_line_height']; ?>px;
        line-height: <?php echo $d['nav']['vert_item_line_height']; ?>px;
    }

<?php endif; ?>


<?php
/* Mobile menu
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>

<?php
/* Gaps
-------------------------------------------------------------- */
?>
<?php if ($b->isColor($d['nav']['mobile_link_separator_color'])): ?>

    <?php //Important: gap has to be at the top of the item to show space between the first item and the mobile menu trigger.
          //Selector needs to have proper specificity. ?>
    .nav-mobile .nav-item { margin-top: 1px !important; }
    .nav-mobile { background-color: <?php echo $d['nav']['mobile_link_separator_color']; ?>; }

<?php endif; ?>


<?php
/* Menu - other
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */?>

<?php
/* Menu triggers
-------------------------------------------------------------- */ ?>

<?php //Default ?>
.menu-trigger .menu-trigger-inner
{
    background-color: <?php echo $navBgColor; ?>;
    color: <?php echo $navColor; ?>;
}

<?php //Hover ?>
.menu-trigger .menu-trigger-inner:hover
{
    background-color: <?php echo $navHoverBgColor; ?>;
    color: <?php echo $navHoverColor; ?>;
}

<?php //Active ?>
.menu-trigger.active .menu-trigger-inner
{
    background-color: <?php echo $navHoverBgColor; ?>;
    color: <?php echo $navHoverColor; ?>;
}

<?php //Icon ?>
.menu-trigger .menu-trigger-inner .trigger-icon .line {
    background-color: <?php echo $navColor; ?>;
}
.menu-trigger .menu-trigger-inner:hover .trigger-icon .line {
    background-color: <?php echo $navHoverColor; ?>;
}
.menu-trigger.active .menu-trigger-inner .trigger-icon .line {
    background-color: <?php echo $navHoverColor; ?>;
}


<?php
/* Vertical menu trigger
   Important: has to be after generic menu trigger styles to override them
-------------------------------------------------------------- */ ?>
<?php
    $vertTriggerBgColor     = $d['nav']['vert_trigger_bg_color'];
    $vertTriggerColor       = $d['nav']['vert_trigger_color'];
?>

<?php // Default ?>
.vertnav-trigger .menu-trigger-inner
{
    <?php if ($vertTriggerBgColor): ?>
        background-color: <?php echo $vertTriggerBgColor; ?>;
    <?php endif; ?>

    <?php if ($vertTriggerColor): ?>
        color: <?php echo $vertTriggerColor; ?>;
    <?php endif; ?>
}

<?php // Icon ?>
<?php if ($vertTriggerColor): ?>
.vertnav-trigger .menu-trigger-inner .trigger-icon .line {
    background-color: <?php echo $vertTriggerColor; ?>;
}
<?php endif; ?>


<?php
/* Menu bottom border
-------------------------------------------------------------- */
?>

<?php //Bottom border of menu bar ?>
<?php if ($d['nav']['border'] > 0): ?>
    .nav-border-bottom
    {
        border-bottom:<?php echo $d['nav']['border']; ?>px solid <?php echo $d['nav']['border_color']; ?>;
    }
<?php endif; ?>


<?php
/* Menu font
-------------------------------------------------------------- */
?>
<?php
    $navFontSize                    = $d['nav']['level1_font_size'];
    $navFontUppercase               = $d['nav']['level1_font_uppercase'];
    $navFontSizeDropdowns           = $d['nav']['level2_font_size'];

    $navFontSizeMegaLevel1          = $d['nav']['mega_lev1_font_size'];
    $navFontUppercaseMegaLevel1     = $d['nav']['mega_lev1_font_uppercase'];
    $navFontSizeMegaLevel2          = $d['nav']['mega_lev2_font_size'];

    $mobNavFontSize                 = $d['nav']['mobile_level1_font_size'];
    $mobNavFontUppercase            = $d['nav']['mobile_level1_font_uppercase'];
    $mobNavFontSizeLevel2           = $d['nav']['mobile_level2_font_size'];
    $mobNavFontUppercaseLevel2      = $d['nav']['mobile_level2_font_uppercase'];

    //Font for level 3+
    if ($mobNavFontSizeLevel2)
    {
        if ($mobNavFontSizeLevel2 >= 16)
        {
            $level3FontSize = $mobNavFontSizeLevel2 - 2;
        }
        else
        {
            $level3FontSize = 14;
        }
    }

?>

    <?php //Regular menu ?>

        <?php //All types of dropdowns ?>

            <?php //Level 1 ?>
            .vertnav-trigger,
            .nav-regular .nav-item.level0 > a,

            <?php //Holders for additional elements in the menu bar ?>
            .nav-holder .dropdown-block .dropdown-heading
            {
                <?php if ($navFontSize): ?>
                    font-size:<?php echo $navFontSize; ?>px;
                <?php endif; ?>

                <?php if ($navFontUppercase): ?>
                    text-transform:uppercase;
                <?php endif; ?>
            }

            <?php //Level 2+ ?>
            <?php if ($navFontSizeDropdowns): ?>
                .nav-regular .nav-item > a
                {
                    font-size:<?php echo $navFontSizeDropdowns; ?>px;
                }
            <?php endif; ?>

        <?php //Mega dropdown: ?>

            <?php //Level 2 inside the mega dropdown  ?>
            <?php if ($navFontSizeMegaLevel2): ?>
                .nav-regular .nav-submenu--mega .nav-item > a
                {
                    font-size:<?php echo $navFontSizeMegaLevel2; ?>px;
                }
            <?php endif; ?>

            <?php //Level 1 inside the mega dropdown  ?>
            .nav-regular .nav-submenu--mega > .nav-item > a
            {
                <?php if ($navFontSizeMegaLevel1): ?>
                    font-size:<?php echo $navFontSizeMegaLevel1; ?>px;
                <?php endif; ?>

                <?php if ($navFontUppercaseMegaLevel1): ?>
                    text-transform:uppercase;
                <?php endif; ?>
            }
            

    <?php //Mobile menu ?>

        <?php //All levels (for level 3+)
              //It has to be on top, settings for upper levels will override it ?>
        <?php if (isset($level3FontSize)): ?>
            .nav-mobile li.nav-item > a
            {
                font-size:<?php echo $level3FontSize; ?>px;
            }
        <?php endif; ?>

        <?php //Level 1, and mobile menu trigger ?>
        .mobnav-trigger,
        .nav-mobile .nav-item.level0 > a
        {
            <?php if ($mobNavFontSize): ?>
                font-size:<?php echo $mobNavFontSize; ?>px;
            <?php endif; ?>

            <?php if ($mobNavFontUppercase): ?>
                text-transform: uppercase;
            <?php else: ?>
                text-transform: none;
            <?php endif; ?>
        }

        <?php //Level 2 ?>
        .nav-mobile .nav-item.level1 > a
        {
            <?php if ($mobNavFontSizeLevel2): ?>
                font-size:<?php echo $mobNavFontSizeLevel2; ?>px;
            <?php endif; ?>

            <?php if ($mobNavFontUppercaseLevel2): ?>
                text-transform: uppercase;
            <?php else: ?>
                text-transform: none;
            <?php endif; ?>
        }


<?php
/* Menu font - for a width of less than 1280 px
-------------------------------------------------------------- */
?>
<?php if ($isResponsive): ?>

    @media only screen and (min-width: 1024px) and (max-width: 1279px) {

        /* Menu */
        .nav-regular:not(.nav-vert) .nav-item.level0 > a,
        .nav-regular .nav-holder .dropdown-heading
        {
            <?php if ($navFontSize >= 15): ?>
                font-size: <?php echo ($navFontSize - 2); ?>px;
            <?php endif; ?>
        }
        .nav-regular:not(.nav-vert) .nav-item.level0 > a {
            padding: 0 6px;
        }

    }

    @media only screen and (min-width: 960px) and (max-width: 1023px) {

        /* Menu */
        .nav-regular:not(.nav-vert) .nav-item.level0 > a,
        .nav-regular .nav-holder .dropdown-heading
        {
            <?php if ($navFontSize >= 15): ?>
                font-size: <?php echo ($navFontSize - 2); ?>px;
            <?php endif; ?>
        }
        .nav-regular:not(.nav-vert) .nav-item.level0 > a {
            padding: 0 4px;
        }

    }

    @media only screen and (max-width: 959px) {

        /* Menu */
        .nav-regular:not(.nav-vert) .nav-item.level0 > a,
        .nav-regular .nav-holder .dropdown-heading
        {
            <?php if ($navFontSize >= 15): ?>
                font-size: <?php echo ($navFontSize - 3); ?>px;
            <?php endif; ?>
        }
        .nav-regular:not(.nav-vert) .nav-item.level0 > a {
            padding: 0 3px;
        }

    }

<?php endif; ?>



<?php
//Minimal header (displayed on checkout page)
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

.header-container-micro {
    background-color: rgba(0,0,0, 0.02);
}



<?php
//Header container - mobile view
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>
<?php
    $mobHeaderBgColor               = $d['m_header']['bg_color'];
    $mobHeaderInnerBgColor          = $d['m_header']['inner_bg_color'];
    $mobHeaderContentPaddingSide    = $d['m_header']['content_padding_side'];
    $mobHeaderPaddingTop            = $d['m_header']['padding_top'];
    $mobHeaderPaddingBottom         = $d['m_header']['padding_bottom'];
?>

<?php //Outer containers ?>
<?php /*
.header-mobile .header-top-container,
.header-mobile .header-top-container .header-top,
.header-mobile .header-primary-container,
.header-mobile .header-primary-container .header-primary,
*/ ?>
.header-mobile.header-container, <?php //Important: note that both classes are combined because "header-mobile" is applied on "header-container" div ?>
.header-mobile .header-m-container,
.header-mobile .nav-container
{
    <?php if ($mobHeaderBgColor): ?>
        background-color: <?php echo $mobHeaderBgColor; ?>;
    <?php endif; ?>

    padding-top: 0;
    padding-bottom: 0;
}

<?php //Inner containers ?>
<?php /*
.header-mobile .header-top,
.header-mobile .header-primary,
*/ ?>
.header-mobile .header-m-top,
.header-mobile .header-m-primary,
.header-mobile .nav
{
    <?php if ($mobHeaderInnerBgColor): ?>
        background-color: <?php echo $mobHeaderInnerBgColor; ?>;
    <?php endif; ?>
}

<?php //Vertical padding of outer container - it's applied to the third div (lowermost "layer") of the outer header container ?>
.header-mobile .header-container3
{
    <?php if ($mobHeaderPaddingTop): ?>
        padding-top: <?php echo intval($mobHeaderPaddingTop); ?>px;
    <?php endif; ?>

    <?php if ($mobHeaderPaddingBottom): ?>
        padding-bottom: <?php echo intval($mobHeaderPaddingBottom); ?>px;
    <?php endif; ?>
}

<?php //Side padding of inner containers ?>
<?php if ($mobHeaderContentPaddingSide === 'full'): ?>
    .header-mobile .header-m-top.container,
    .header-mobile .header-m-primary.container,
    .header-mobile .header-top.container,
    .header-mobile .header-primary.container,
    .header-mobile .nav.container
    {
        width: 100%;
        max-width: none;
    }
<?php elseif ($mobHeaderContentPaddingSide === 'full-expanded'): ?>
    .header-mobile .header-m-top.container,
    .header-mobile .header-m-primary.container,
    .header-mobile .header-top.container,
    .header-mobile .header-primary.container,
    .header-mobile .nav.container
    {
        width: 100%;
        max-width: none;
    }
    .header-mobile .header-m-top.container > .inner-container,
    .header-mobile .header-m-primary.container > .inner-container,
    .header-mobile .header-top.container > .inner-container,
    .header-mobile .header-primary.container > .inner-container,
    .header-mobile .nav.container > .inner-container
    {
        padding-left: 0;
        padding-right: 0;
    }
<?php elseif ($mobHeaderContentPaddingSide === 'expanded'): ?>
    .header-mobile .header-m-top.container > .inner-container,
    .header-mobile .header-m-primary.container > .inner-container,
    .header-mobile .header-top.container > .inner-container,
    .header-mobile .header-primary.container > .inner-container,
    .header-mobile .nav.container > .inner-container
    {
        padding-left: 0;
        padding-right: 0;
    }
<?php endif; ?>



<?php
//Mobile Header elements
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

.header-mobile .skip-link
{
    <?php if ($d['m_header']['tab_item_bg_color']): ?>
        background-color: <?php echo $d['m_header']['tab_item_bg_color']; ?>;
    <?php endif; ?>
    <?php if ($b->isColor($d['m_header']['tab_item_color'])): ?>
        color: <?php echo $d['m_header']['tab_item_color']; ?>;
    <?php endif; ?>
}
.header-mobile .skip-link.skip-active
{
    <?php if ($d['m_header']['tab_item_active_bg_color']): ?>
        background-color: <?php echo $d['m_header']['tab_item_active_bg_color']; ?>;
    <?php endif; ?>
    <?php if ($b->isColor($d['m_header']['tab_item_active_color'])): ?>
        color: <?php echo $d['m_header']['tab_item_active_color']; ?>;
    <?php endif; ?>
}
.header-mobile .skip-link:hover {
    <?php if ($d['m_header']['tab_item_hover_bg_color']): ?>
        background-color: <?php echo $d['m_header']['tab_item_hover_bg_color']; ?>;
    <?php endif; ?>
    <?php if ($b->isColor($d['m_header']['tab_item_hover_color'])): ?>
        color: <?php echo $d['m_header']['tab_item_hover_color']; ?>;
    <?php endif; ?>
}

<?php //Skip content. Important: applied only to "skip-content--style", not to "skip-content". ?>
.header-mobile .skip-content--style
{
    <?php if ($d['m_header']['tab_content_bg_color']): ?>
        background-color: <?php echo $d['m_header']['tab_content_bg_color']; ?>;
    <?php endif; ?>

    <?php if ($b->isColor($d['m_header']['tab_content_color'])): ?>
        color: <?php echo $d['m_header']['tab_content_color']; ?>;
    <?php endif; ?>
}
.header-mobile .skip-content--style a
{
    <?php if ($b->isColor($d['m_header']['tab_content_link_color'])): ?>
        color: <?php echo $d['m_header']['tab_content_link_color']; ?>;
    <?php endif; ?>
}
.header-mobile .skip-content--style a:hover
{
    <?php if ($b->isColor($d['m_header']['tab_content_link_hover_color'])): ?>
        color: <?php echo $d['m_header']['tab_content_link_hover_color']; ?>;
    <?php endif; ?>
}



<?php
//Main content area
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>
.main-container
{
    <?php if ($d['main']['bg_color']): ?>
        background-color: <?php echo $d['main']['bg_color']; ?>;
    <?php endif; ?>

    <?php if ($d['main']['padding_top']): ?>
        padding-top: <?php echo intval($d['main']['padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['main']['padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['main']['padding_bottom']); ?>px;
    <?php endif; ?>
}
.main.container
{
    <?php if ($d['main']['inner_bg_color']): ?>
        background-color: <?php echo $d['main']['inner_bg_color']; ?>;
    <?php endif; ?>

    <?php if ($d['main']['content_padding_top']): ?>
        padding-top: <?php echo intval($d['main']['content_padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['main']['content_padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['main']['content_padding_bottom']); ?>px;
    <?php endif; ?>
}

<?php
/* Magento product tooltips
-------------------------------------------------------------- */
?>
.truncated .item-options
{
    background-color: <?php echo $mainBgColor; ?>;
}



<?php
//Category View
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

<?php
/* Product grid/list
-------------------------------------------------------------- */
?>

<?php //Item background color ?>

<?php if ($d['category']['grid_item_bg_color']): ?>
.category-products-grid .item,
.products-list .item
{
    background-color: <?php echo $d['category']['grid_item_bg_color']; ?>;
}
<?php endif; ?>

<?php if ($d['category']['grid_item_hover_bg_color']): ?>
.category-products-grid .item:hover,
.products-list .item:hover
{
    background-color: <?php echo $d['category']['grid_item_hover_bg_color']; ?>;
}
<?php endif; ?>



<?php
//Product page
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

<?php
/* Product page tabs
-------------------------------------------------------------- */
?>

<?php /*
.product-view .product.data.items
{
    <?php if ($d['product_page']['tab_inner_bg_color']): ?>
        background-color: <?php echo $d['product_page']['tab_inner_bg_color']; ?>;
    <?php endif; ?>
}

<?php //Basic colors - default, hover, active: ?>

<?php //Default tab ?>
.product-view .product.data.items > .item.title > .switch
{
    background-color: <?php echo $d['product_page']['tab_bg_color']; ?>;
    color: <?php echo $d['product_page']['tab_color']; ?>;

  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent; // This color is set for accordion
  border-left-color: transparent;
}

<?php //Hover ?>
.product-view .product.data.items > .item.title:not(.disabled) > .switch:focus,
.product-view .product.data.items > .item.title:not(.disabled) > .switch:hover,
.product-view .product.data.items > .item.title:not(.disabled) > .switch:active
{
    background-color: <?php echo $d['product_page']['tab_hover_bg_color']; ?>;
    color: <?php echo $d['product_page']['tab_hover_color']; ?>;

    <?php //Border of the item on hover has the same color as background of the item. Except bottom border which is transparent. ?>
    border-color: <?php echo $d['product_page']['tab_hover_bg_color']; ?>;
    border-bottom-color: transparent;
}

<?php //Active ?>
.product-view .product.data.items > .item.title.active > .switch,
.product-view .product.data.items > .item.title.active > .switch:focus,
.product-view .product.data.items > .item.title.active > .switch:hover
{
    background-color: <?php echo $d['product_page']['tab_active_bg_color']; ?>;
    color: <?php echo $d['product_page']['tab_active_color']; ?>;

    <?php //Border of the active item has the same color as border of panels. Bottom border is transparent. ?>
    border-color: <?php echo $d['product_page']['tab_border_color']; ?>;
    border-bottom-color: transparent;
}

<?php //Borders and panels ?>
.product-view .product.data.items > .item.content {
    background-color: <?php echo $d['product_page']['tab_panel_bg_color']; ?>;
    border-color: <?php echo $d['product_page']['tab_border_color']; ?>;
}

<?php //Accordion: 
      //TODO: we need to add special class indicating that tabs are in accordion mode
?>

<?php //Accordion default tab ?>
<?php //TODO ?>
.product-view .collateral-acco .product.data.items > .item.title > .switch
{
    background-color: <?php echo $d['product_page']['acco_bg_color']; ?>;
    color: <?php echo $d['product_page']['acco_color']; ?>;

    border-color: <?php echo $d['product_page']['tab_border_color']; ?>;
}

<?php //Accordion active/hover tab ?>
.product-view .collateral-acco .product.data.items > .item.title:not(.disabled) > .switch:focus,
.product-view .collateral-acco .product.data.items > .item.title:not(.disabled) > .switch:hover,
.product-view .collateral-acco .product.data.items > .item.title:not(.disabled) > .switch:active,
.product-view .collateral-acco .product.data.items > .item.title.active > .switch,
.product-view .collateral-acco .product.data.items > .item.title.active > .switch:focus,
.product-view .collateral-acco .product.data.items > .item.title.active > .switch:hover
{
    background-color: <?php echo $d['product_page']['acco_active_bg_color']; ?>;
    color: <?php echo $d['product_page']['acco_active_color']; ?>;
}

*/ ?>




<?php /* TODO: remove old styles

<?php //Tabs wrapper class ?>
.gen-tabs .tabs
{
    <?php if ($d['product_page']['tab_inner_bg_color']): ?>
        background-color: <?php echo $d['product_page']['tab_inner_bg_color']; ?>;
    <?php endif; ?>
}

<?php //Basic colors: default, hover, active ?>
<?php //Default tab?>
.gen-tabs .tabs a
{
    background-color: <?php echo $d['product_page']['tab_bg_color']; ?>;
    color: <?php echo $d['product_page']['tab_color']; ?>;
}

<?php //Hover ?>
.gen-tabs .tabs a:hover
{
    background-color: <?php echo $d['product_page']['tab_hover_bg_color']; ?>;
    color: <?php echo $d['product_page']['tab_hover_color']; ?>;

    <?php // Border of the item on hover has the same color as background of the item. Except bottom border which is transparent. ?>
    border-color: <?php echo $d['product_page']['tab_hover_bg_color']; ?>;
    border-bottom-color: transparent;
}

<?php //Active ?>
.gen-tabs .tabs a.current
{
    background-color: <?php echo $d['product_page']['tab_active_bg_color']; ?>;
    color: <?php echo $d['product_page']['tab_active_color']; ?>;
}


<?php //Borders and panels ?>
.gen-tabs .tabs-panels
{
    background-color: <?php echo $d['product_page']['tab_panel_bg_color']; ?>;
    border-top-color: <?php echo $d['product_page']['tab_border_color']; ?>;
}
.gen-tabs .tabs a.current
{
    <?php // Border of the active item has the same color as border of panels. Bottom border is transparent. ?>
    border-color: <?php echo $d['product_page']['tab_border_color']; ?>;
    border-bottom-color: transparent;
}
.gen-tabs .tabs a.current:hover
{
    <?php // Bottom border is transparent. ?>
    border-bottom-color: transparent;
}

<?php //Accordion ?>

<?php //Accordion default tab ?>
.gen-tabs .acctab
{
    background-color: <?php echo $d['product_page']['acco_bg_color']; ?>;
    color: <?php echo $d['product_page']['acco_color']; ?>;

    border-color: <?php echo $d['product_page']['tab_border_color']; ?>;

    <?php if ($b->isColor($d['product_page']['acco_bg_color'])): ?>
        padding-left: 0.5em;
        padding-right: 0.5em;
    <?php endif; ?>
}

<?php //Accordion active/hover tab ?>
.gen-tabs .acctab:hover,
.gen-tabs .acctab:focus,
.gen-tabs .acctab.current {
    background-color: <?php echo $d['product_page']['acco_active_bg_color']; ?>;
    color: <?php echo $d['product_page']['acco_active_color']; ?>;
}

*/ ?>



<?php
//Slideshow
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

<?php
/* Slideshow interface icons: prev/next arrows, pagination
-------------------------------------------------------------- */
?>

<?php //Default icon ?>
/* Slider arrows */
.slideshow-wrapper .owl-controls .owl-buttons div,

/* Slider pagination */
.slideshow-wrapper.slider-pagination1 .owl-controls .owl-page span,

/* For pagination2 default color overrides color of active state and hover state */
.slideshow-wrapper.slider-pagination2 .owl-controls .owl-page span,
.slideshow-wrapper.slider-pagination2 .owl-controls .owl-page.active span,
.slideshow-wrapper.slider-pagination2 .owl-controls.clickable .owl-page.active:hover span 
{
    background-color: <?php echo $d['slideshow']['tool_icon_bg_color']; ?>;
    color: <?php echo $d['slideshow']['tool_icon_color']; ?>;
}


<?php //Hover icon ?>
/* Slider arrows */
.slideshow-wrapper .owl-controls.clickable .owl-buttons div:hover,

/* Slider pagination */
.slideshow-wrapper.slider-pagination1 .owl-controls.clickable .owl-page:hover span,
.slideshow-wrapper.slider-pagination2 .owl-controls.clickable .owl-page:hover span
{
    background-color: <?php echo $d['slideshow']['tool_icon_hover_bg_color']; ?>;
    color: <?php echo $d['slideshow']['tool_icon_hover_color']; ?>;
}


<?php //Active icon ?>
.slideshow-wrapper.slider-pagination1 .owl-controls .owl-page.active span,
.slideshow-wrapper.slider-pagination1 .owl-controls.clickable .owl-page.active:hover span /* Active state overrides hover state */
{
    background-color: <?php echo $d['slideshow']['tool_icon_active_bg_color']; ?>;
    <?php //Not needed for pagination: ?>
    <?php /* color: <?php echo $d['slideshow']['tool_icon_active_color']; ?>; */ ?>
}



<?php
//Footer
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>
.footer-container
{
    <?php if ($d['footer']['bg_color']): ?>
        background-color: <?php echo $d['footer']['bg_color']; ?>;
    <?php endif; ?>
}
.footer
{
    <?php if ($d['footer']['inner_bg_color']): ?>
        background-color: <?php echo $d['footer']['inner_bg_color']; ?>;
    <?php endif; ?>
    
    <?php if ($b->isColor($d['footer']['color'])): ?>
        color: <?php echo $d['footer']['color']; ?>;
    <?php endif; ?>
}

<?php //Links ?>
.footer a
{
    <?php if ($b->isColor($d['footer']['link_color'])): ?>
        color: <?php echo $d['footer']['link_color']; ?>;
    <?php endif; ?>
}
.footer a:hover
{
    <?php if ($b->isColor($d['footer']['link_hover_color'])): ?>
        color: <?php echo $d['footer']['link_hover_color']; ?>;
    <?php endif; ?>
}


<?php
/* Buttons
-------------------------------------------------------------- */
?>
.footer .button
{
    background-color: <?php echo $d['footer']['button_bg_color']; ?>;
    color: <?php echo $d['footer']['button_color']; ?>;
}
.footer .button:hover,
.footer .button:focus
{
    background-color: <?php echo $d['footer']['button_hover_bg_color']; ?>;
    color: <?php echo $d['footer']['button_hover_color']; ?>;
}


<?php
/* Custom icons - iconbox
-------------------------------------------------------------- */
?>
.footer .ib,
.footer span.icon /* For backward compatibility */
{
    background-color: <?php echo $d['footer']['icon_bg_color']; ?>;
    color: <?php echo $d['footer']['icon_color']; ?>;
}
.footer .ib-hover:hover,
.footer span.icon-hover:hover, /* For backward compatibility */
.footer .feature-icon-hover:hover .ib,
.footer .feature-icon-hover:hover span.icon /* For backward compatibility */
{
    background-color: <?php echo $d['footer']['icon_hover_bg_color']; ?> !important;
    color: <?php echo $d['footer']['icon_hover_color']; ?> !important;
}



<?php
/* Interface icons: only selected, not all are needed in the footer
-------------------------------------------------------------- */
?>

<?php //Default icon ?>
/* Slider arrows */
.footer .slider-arrows1 .owl-controls .owl-buttons div,
.footer .slider-arrows1 .owl-controls.clickable .owl-buttons div.disabled:hover,
.footer .slider-arrows2 .owl-controls .owl-buttons div,
.footer .slider-arrows3 .owl-controls .owl-buttons div,
.footer .slider-arrows3 .owl-controls.clickable .owl-buttons div.disabled:hover,

/* Slider pagination */
.footer .slider-pagination1 .owl-controls .owl-page span,
.footer .slider-pagination2 .owl-controls .owl-page span,

/* Accordion and collapsible: opener */
.footer .uaccordion-style1 .opener,
.footer .collapsible .opener
{
    background-color: <?php echo $d['footer']['tool_icon_bg_color']; ?>;
    color: <?php echo $d['footer']['tool_icon_color']; ?>;
}

<?php //Hover icon ?>
/* Slider arrows */
.footer .slider-arrows1 .owl-controls.clickable .owl-buttons div:hover,
.footer .slider-arrows2 .owl-controls.clickable .owl-buttons div:hover,
.footer .slider-arrows3 .owl-controls.clickable .owl-buttons div:hover,

/* Slider pagination */
.footer .slider-pagination1 .owl-controls.clickable .owl-page:hover span,
.footer .slider-pagination2 .owl-controls.clickable .owl-page:hover span,

/* Accordion and collapsible: opener */
.footer .uaccordion-style1 .opener:hover,
.footer .collapsible .opener:hover
{
    background-color: <?php echo $d['footer']['tool_icon_hover_bg_color']; ?>;
    color: <?php echo $d['footer']['tool_icon_hover_color']; ?>;
}


<?php
/* Footer top
-------------------------------------------------------------- */
?>
.footer-top-container
{
    <?php if ($d['footer_top']['bg_color']): ?>
        background-color: <?php echo $d['footer_top']['bg_color']; ?>;
    <?php endif; ?>

    <?php if ($d['footer_top']['padding_top']): ?>
        padding-top: <?php echo intval($d['footer_top']['padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['footer_top']['padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['footer_top']['padding_bottom']); ?>px;
    <?php endif; ?>
}
.footer-top
{
    <?php if ($d['footer_top']['inner_bg_color']): ?>
        background-color: <?php echo $d['footer_top']['inner_bg_color']; ?>;
    <?php endif; ?>
    
    <?php if ($b->isColor($d['footer_top']['color'])): ?>
        color: <?php echo $d['footer_top']['color']; ?>;
    <?php endif; ?>

    <?php if ($d['footer_top']['content_padding_top']): ?>
        padding-top: <?php echo intval($d['footer_top']['content_padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['footer_top']['content_padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['footer_top']['content_padding_bottom']); ?>px;
    <?php endif; ?>
}
.footer-top a
{
    <?php if ($b->isColor($d['footer_top']['link_color'])): ?>
        color: <?php echo $d['footer_top']['link_color']; ?>;
    <?php endif; ?>
}
.footer-top a:hover
{
    <?php if ($b->isColor($d['footer_top']['link_hover_color'])): ?>
        color: <?php echo $d['footer_top']['link_hover_color']; ?>;
    <?php endif; ?>
}


<?php
/* Footer primary
-------------------------------------------------------------- */
?>
.footer-primary-container
{
    <?php if ($d['footer_primary']['bg_color']): ?>
        background-color: <?php echo $d['footer_primary']['bg_color']; ?>;
    <?php endif; ?>
    
    <?php if ($d['footer_primary']['padding_top']): ?>
        padding-top: <?php echo intval($d['footer_primary']['padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['footer_primary']['padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['footer_primary']['padding_bottom']); ?>px;
    <?php endif; ?>
}
.footer-primary
{
    <?php if ($d['footer_primary']['inner_bg_color']): ?>
        background-color: <?php echo $d['footer_primary']['inner_bg_color']; ?>;
    <?php endif; ?>
    
    <?php if ($b->isColor($d['footer_primary']['color'])): ?>
        color: <?php echo $d['footer_primary']['color']; ?>;
    <?php endif; ?>

    <?php if ($d['footer_primary']['content_padding_top']): ?>
        padding-top: <?php echo intval($d['footer_primary']['content_padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['footer_primary']['content_padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['footer_primary']['content_padding_bottom']); ?>px;
    <?php endif; ?>
}
.footer-primary a
{
    <?php if ($b->isColor($d['footer_primary']['link_color'])): ?>
        color: <?php echo $d['footer_primary']['link_color']; ?>;
    <?php endif; ?>
}
.footer-primary a:hover
{
    <?php if ($b->isColor($d['footer_primary']['link_hover_color'])): ?>
        color: <?php echo $d['footer_primary']['link_hover_color']; ?>;
    <?php endif; ?>
}


<?php
/* Footer bottom
-------------------------------------------------------------- */
?>
.footer-bottom-container
{
    <?php if ($d['footer_bottom']['bg_color']): ?>
        background-color: <?php echo $d['footer_bottom']['bg_color']; ?>;
    <?php endif; ?>
}
.footer-bottom
{
    <?php if ($d['footer_bottom']['inner_bg_color']): ?>
        background-color: <?php echo $d['footer_bottom']['inner_bg_color']; ?>;
    <?php endif; ?>
    
    <?php if ($b->isColor($d['footer_bottom']['color'])): ?>
        color: <?php echo $d['footer_bottom']['color']; ?>;
    <?php endif; ?>

    <?php if ($d['footer_bottom']['content_padding_top']): ?>
        padding-top: <?php echo intval($d['footer_bottom']['content_padding_top']); ?>px;
    <?php endif; ?>
    <?php if ($d['footer_bottom']['content_padding_bottom']): ?>
        padding-bottom: <?php echo intval($d['footer_bottom']['content_padding_bottom']); ?>px;
    <?php endif; ?>
}
.footer-bottom a
{
    <?php if ($b->isColor($d['footer_bottom']['link_color'])): ?>
        color: <?php echo $d['footer_bottom']['link_color']; ?>;
    <?php endif; ?>
}
.footer-bottom a:hover
{
    <?php if ($b->isColor($d['footer_bottom']['link_hover_color'])): ?>
        color: <?php echo $d['footer_bottom']['link_hover_color']; ?>;
    <?php endif; ?>
}



<?php
//Other global styles
//They should not be overridden, so they are placed at the end of the file
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
?>

<?php
/* Social icons
-------------------------------------------------------------- */
?>

.social-links .ib,
.social-links a > span.icon /* For backward compatibility */
{
    background-color: <?php echo $d['colors']['social_icon_bg_color']; ?>;
    color: <?php echo $d['colors']['social_icon_color']; ?>;
}
.social-links .ib-hover:hover,
.social-links a > span.icon-hover:hover /* For backward compatibility */
{
    background-color: <?php echo $d['colors']['social_icon_hover_bg_color']; ?> !important;
    color: <?php echo $d['colors']['social_icon_hover_color']; ?> !important;
}


<?php
/* Shadow for the main containers
-------------------------------------------------------------- */
?>
<?php
/* Inner containers which have background color get a shadow.
   They will drop shadow if shadow is enabled (body element has "shadow" class). */
?>

<?php if ($d['effects']['shadow']): ?>

    <?php if ($d['header_top']['inner_bg_color']): ?>
        <?php if ($b->isColor($d['header_top']['inner_bg_color'])): ?>
            .header-top,
        <?php endif; ?>
    <?php else: ?>
        <?php if ($b->isColor($d['header']['inner_bg_color'])): ?>
            .header-top,
        <?php endif; ?>
    <?php endif; ?>

    <?php if ($d['header_primary']['inner_bg_color']): ?>
        <?php if ($b->isColor($d['header_primary']['inner_bg_color'])): ?>
            .header-primary,
        <?php endif; ?>
    <?php else: ?>
        <?php if ($b->isColor($d['header']['inner_bg_color'])): ?>
            .header-primary,
        <?php endif; ?>
    <?php endif; ?>

    <?php // Conditional shadow for main menu bar  ?>
    <?php if ($d['effects']['shadow_nav'] === 'inner-container'): ?>
        .nav.container,
    <?php elseif ($d['effects']['shadow_nav'] === 'bar'): ?>
        .navi-wrapper,
    <?php endif; ?>

    <?php if ($b->isColor($d['main']['inner_bg_color'])): ?>
        .main.container,
    <?php endif; ?>

    <?php if ($d['footer_top']['inner_bg_color']): ?>
        <?php if ($b->isColor($d['footer_top']['inner_bg_color'])): ?>
            .footer-top,
        <?php endif; ?>
    <?php else: ?>
        <?php if ($b->isColor($d['footer']['inner_bg_color'])): ?>
            .footer-top,
        <?php endif; ?>
    <?php endif; ?>

    <?php if ($d['footer_primary']['inner_bg_color']): ?>
        <?php if ($b->isColor($d['footer_primary']['inner_bg_color'])): ?>
            .footer-primary,
        <?php endif; ?>
    <?php else: ?>
        <?php if ($b->isColor($d['footer']['inner_bg_color'])): ?>
            .footer-primary,
        <?php endif; ?>
    <?php endif; ?>











    <?php if ($d['footer_bottom']['inner_bg_color']): ?>
        <?php if ($b->isColor($d['footer_bottom']['inner_bg_color'])): ?>
            .footer-bottom,
        <?php endif; ?>
    <?php else: ?>
        <?php if ($b->isColor($d['footer']['inner_bg_color'])): ?>
            .footer-bottom,
        <?php endif; ?>
    <?php endif; ?>

    .drop-shadow
    {
        -moz-box-shadow:    0 2px 3px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
        box-shadow:         0 2px 3px rgba(0, 0, 0, 0.1);
    }
<?php endif; ?>


<?php
/* Shadows: for pop-ups, drop-downs etc.
-------------------------------------------------------------- */
?>

/* Shadows: for pop-ups, drop-downs etc.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/* Sticky header */
.sticky-header .sticky-container,

/* Dropdowns */
.dropdown-block.open > .dropdown-heading.cover,
.dropdown-block.open .dropdown-content,

/* Search autocomplete */
.search-autocomplete

{
    -moz-box-shadow:    0 3px 10px rgba(0,0,0, 0.15);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0, 0.15);
    box-shadow:         0 3px 10px rgba(0,0,0, 0.15);
}