/*-----------------------------------------------------------------------------------
Theme Name: Slovcimi
Description: Custom Theme based on Twenty Twenty-Five
Author: MartinFajnor
Assigned to:	marti.fajnor.eu 
-----------------------------------------------------------------------------------*/

:root {
  --black: #000;
  --white: #FFF;
  --main-green: #85C226;
  --main-red: #FF4100;
  --main-sec: #B7782A;
  --main-light: #EDEDE6;
  --main-light-bgr: #EDEDE6;
  --main-sec-gray: #E6E7E8;
  --main-black: #232323;
  --main-white: #FDFBFB;
  --main-orange: #F37021;
  --main-darkred: #bf5747;
  --main-gray: #918F8B;
  --main-light-gray: #F6F7F7;
  --main-lghtb: #CFCABE;
  --main-border-gray: #CACCCE; 
  --main-border-lightblue: #E0E0EB; 
  --main-dark: #242424;
  --main-light-dark: #4B4A4A;
  --main-hover: #050606;
  --scroll--rounded_button-color-hover: #FABFBF;
  --scroll--rounded_button-color: #fff;

    --main-darkgreen-color:   #153B3A;
    --main-gold-color:        #C7A65F;
    --main-bonewhite-color:   #EAE7DC;


    --main-vivid-orange: #ff6900;
    --main-vivid-red: #f63f5e;
    --main-old-pink: #c5458c;
    --main-turtle: #7e5398;
    --main-darkblue-bgr: #405481;
    --main-finedark-bgr: #2f4858;

    --main-priorita-1: #7bdcb5;
    --main-priorita-2: #fcb900;
    --main-priorita-3: #ff6900;
    --main-priorita-4: #9b51e0;
}



/* ------------------------------------------------------------- *
 * General
/* ------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
    padding: 0;
    margin: 0;
}
body {
    position: relative;
    margin: 0;
    line-height: 1.6;
    font-size: 19px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.nooverflow,.no-overflow { overflow: hidden; }
.nooverflow:after { content: ""; display: block; box-sizing: border-box; position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; 
    background-color: #000000ab;  
}
a {
    position: relative;
    color: currentColor;
    text-decoration: none;
    outline: none
}
a:hover, a:focus {
    color: currentColor;
}
p a { 
    color: currentColor;
    opacity: .8;
    font-style: italic;
}
p a:hover,
p a:focus { 
    color: currentColor;
    opacity: .6;
}
a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background-color: currentColor;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
a:not(.custom-logo-link):not(.close-modal-small):not(.fbx-inner a):hover:after { 
  width: 100%; 
  left: 0; 
}

img {
    max-width: 100%;
    height: auto;
}

.fbx-link > p { margin: 0 }

b, strong {
    font-weight: bold;
    font-weight: 700;
}
section { 
    position: relative; 
}
button {}
button:focus { 
    outline: none; 
}
.small, small {
    font-size: 80%;
}
hr {
    width: 100%;
    height: 0;
    border: none;
    border-bottom: 1px solid rgb(144 144 144 / 30%);
}
.anim-image-parallax {
    transform: scale(1.2);
    transform-origin: 50% 100%;
}

/* Selection */
::selection {
    color: #fff;
    text-shadow: none;
    background: var(--main-gold-color);
}
::-moz-selection {
    color: #fff;
    text-shadow: none;
    background: var(--main-gold-color); /* Firefox */
}
::-webkit-selection {
    color: #fff;
    text-shadow: none;
    background: var(--main-gold-color); /* Safari */
}

/* Lists */
.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}
.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
.wp-block-navigation a:where(:not(.wp-element-button)):hover {
    text-decoration: none;
}


/* ------------------------------------------------------------- *
 * Menu
/* ------------------------------------------------------------- */

@media screen and (max-width: 800px) {
    nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        padding: 0 0 15px !important;
        border-top: 1px solid var(--main-border-gray) !important;
    }
    nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        color: var(--main-gray);
    }
    nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        padding: 0 !important;
        border-top: 1px solid #F3702185 !important;
    }
    nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        color: var(--main-orange);
    }
}



@media screen and (min-width: 800px) {
    nav.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
      background-color: var(--main-light);
      border: none;
      box-shadow: 0 10px 10px rgb(0 0 0/20%);
        transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transform: translate(25% ,10px);
      -webkit-transform: translate(25% ,10px);
      -moz-transform: translate(25% ,10px);
      -ms-transform: translate(25% ,10px);
      -o-transform: translate(25% ,10px);
      visibility: hidden;
      opacity: 0;
    }
    nav.wp-block-navigation li:hover > .wp-block-navigation__submenu-container,
    nav.wp-block-navigation li .wp-block-navigation__submenu-container li:hover > .wp-block-navigation__submenu-container {
        visibility: visible;
        opacity: 1;
        transform: translate(25% ,0);
        -webkit-transform: translate(25% ,0);
        -moz-transform: translate(25% ,0);
        -ms-transform: translate(25% ,0);
        -o-transform: translate(25% ,0);
      }

    nav.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { 
      position: absolute;
      top: 0;
      left: 75%;
      border: none;
      border-radius: 0 4px 4px 4px;
      z-index: 1;
    }
}





/* ------------------------------------------------------------- *
 * Page transitions
/* ------------------------------------------------------------- */

#page-transition {
    display: none;
}
body.huu-transition #page-transition {
    position: relative;
    display: block;
    z-index: 99999;
}

/* Transition overlay */
body.huu-transition .ptr-overlay {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #A2B3B3;
    z-index: 1;
}

/* Transition preloader */
body.huu-transition .ptr-preloader {
    position: fixed;
    top: 50vh;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

body.huu-transition .ptr-prel-content {
    margin-top: 10px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    font-weight: 500;
    color: #444;
}

.ptr-prel-image {
    max-height: 55px; /* You may need to change the img height to match your logo type! */
    opacity: .75; /* You may need to change the opacity as well! */
    max-width: 225px;
    height: auto;
}


header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;

    margin-block-start: 0rem;

    color: var(--main-darkgreen-color);
    background-color: white
}

header > div.has-base-background-color { 
    background-color: white !important;
}


/* ------------------------------------------------------------- *
 * Custom scrollbar style
/* ------------------------------------------------------------- */

.tt-custom-scrollbar {
    overflow-y: auto;
}

/* Works on Firefox */
.tt-custom-scrollbar,
.tt-sliding-sidebar-inner,
.tt-sidebar {
    scrollbar-width: thin;
    scrollbar-color: #555 #2a2a2a;
}
select {
    scrollbar-width: thin;
    scrollbar-color: #666 #2a2a2a;
}

/* Works on Chrome, Edge, and Safari */
.tt-custom-scrollbar::-webkit-scrollbar,
.tt-sliding-sidebar-inner::-webkit-scrollbar,
.tt-sidebar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
select::-webkit-scrollbar {
    width: 10px;
}
.tt-custom-scrollbar::-webkit-scrollbar-track,
.tt-sliding-sidebar-inner::-webkit-scrollbar-track,
.tt-sidebar::-webkit-scrollbar-track,
select::-webkit-scrollbar-track {
    background: var(--main-black);
}
.tt-custom-scrollbar::-webkit-scrollbar-thumb,
.tt-sliding-sidebar-inner::-webkit-scrollbar-thumb,
.tt-sidebar::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 50px;
}
select::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 50px;
}


/* ------------------------------------------------------------- *
 * Smooth Scrollbar
 * Source: https://github.com/idiotWu/smooth-scrollbar/
/* ------------------------------------------------------------- */

/* Hide default scrollbar */
body:not(.is-mobile).smooth-scroll {
    overflow: hidden !important;
}

/* Scroll content (added if <body> contain class "tt-smooth-scroll". Disabled on mobile devices!) */
body:not(.is-mobile).smooth-scroll #scroll-container { 
    width: auto;
    height: 100vh;
    overflow: auto;
    margin: 0;
}

/* Styling scrollbar */
.scrollbar-track {
    background: transparent !important;
    z-index: 99999 !important;
    transition: background 0.2s ease-in-out;
}
.scrollbar-track:hover {
    background: rgba(222, 222, 222, 0.15) !important;
}
.scrollbar-thumb {
    background: #DDD !important;
    opacity: .25;
    transition: opacity 0.2s ease-in-out;
}
.scrollbar-track:hover .scrollbar-thumb {
    opacity: .5;
}


/* ------------------------------------------------------------- *
 * Magic cursor
/* ------------------------------------------------------------- */
:where(.wp-site-blocks) > #magic-cursor {
  margin-block-start: 0;
  margin-block-end: 0;
}
#magic-cursor {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
}
body.magic-cursor #magic-cursor {
    display: block;
}

#ball {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main-bonewhite-color);
    pointer-events: none;
    border-style: solid;
    border-radius: 50%;
    border-color: #FFF;
    /* Note: border width handled through JS */
}


/* Ball view 
============= */
#ball.ball-view {
    background-color: var(--main-gold-color);
    font-size: 15px;
    font-weight: 500;
    color: var(--main-bonewhite-color);
    line-height: 1.2;
    text-align: center;
}
#ball .ball-view-inner {
    padding: 0 5px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}
#ball .ball-view-inner i {
    font-size: 19px;
}


/* Ball drag 
============= */
#ball .ball-drag {
    position: absolute;
    display: block;
    width: 100%;
    padding: 0 5px;
    font-size: 15px;
    font-weight: 500;
    color: var(--main-bonewhite-color);
    line-height: 1.2;
    text-align: center;
    transition: all 0.3s;
}
#ball .ball-drag::before,
#ball .ball-drag::after {
    position: absolute;
    top: 50%;
    margin-top: -5px;
    font-size: 16px;
    color: var(--main-bonewhite-color);
    height: 10px;
    line-height: 10px;

    /* Font Awesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
#ball .ball-drag::before {
    content: "\f060"; /* Font Awesome */
    left: 0;
    transform: translate3d(-30px, 0, 0);
    transition: all 0.25s;
}
#ball .ball-drag::after {
    content: "\f061"; /* Font Awesome */
    right: 0;
    transform: translate3d(30px, 0, 0);
    transition: all 0.25s;
}


/* Ball close 
============== */
#ball.ball-close-enabled {
    opacity: 1 !important;
}
#ball .ball-close {
    position: absolute;
    padding: 0 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--main-bonewhite-color);
    line-height: 1;
    text-align: center;
}


/* Magnetic cursor
=================== */
.magnetic-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#ball.magnetic-active {
    border-color: var(--main-gold-color) !important;
}



/*
 * ............. Buttons ............................................... 
 */
.cta-btn { width: fit-content; }
.button, .wp-block-button > .wp-element-button { font-style: normal; font-size: 20px; letter-spacing: 0.04em !important; 
    display: flex; flex-direction: row; justify-content: center; align-items: center; transition: all .4s ease-in-out;
}
.button-primary { 
    color: var(--white); 
    background-color: var(--main-dark); 
    border: 1px solid var(--main-dark); 
}
.button-social { font-weight: 700; font-size: 13px; text-transform: uppercase; padding: 8px 16px;
    color: var(--main-black);
    border: 1px solid var(--main-black); 
    background-color: transparent;
}
.site-header .button-social,
.color-bgr-section .button-social,
.site-footer .button-social { font-weight: 700; font-size: 13px; text-transform: uppercase; padding: 8px 16px;
    color: var(--main-light);
    border: 1px solid var(--main-light); 
    background-color: transparent;
}

.button-secondary,
.wp-block-button-secondary > .wp-element-button, 
.woocommerce-Button.button.wp-element-button { 
    color: var(--main-black); 
    background-color: transparent; 
    border: 1px solid var(--main-black) !important; 
}
.button-light,
.site-header .button-light,
.site-footer .button-light  { 
    color: var(--main-color); 
    background-color: var(--main-light); 
    border: 1px solid var(--main-light) !important; 
}
.button-light-outline,
.site-header .button-light-outline,
.color-bgr .button-light-outline { 
    color: var(--main-light); 
    background-color: transparent; 
    border: 1px solid var(--main-light) !important; 
}
.button:hover:not([disabled]), 
.button.active, 
.single_add_to_cart_button:hover { cursor: pointer;
    color: var(--main-light) !important; 
    background-color: var(--main-sec) !important; 
    border: 1px solid var(--main-sec) !important;  
}
.button-secondary:hover, 
.button-social:hover,
.button-secondary.active,
.button-detail:hover { cursor: pointer;
    color: var(--main-light) !important; 
    background-color: var(--main-dark) !important; 
    border: 1px solid var(--main-dark) !important;  
}
.button-badge { font-weight: 700; font-size: 13px; text-transform: uppercase; padding: 8px 16px; 
    color: var(--main-black) !important;
    border: 1px solid var(--main-light-gray) !important;
    background-color: var(--main-light-gray) !important;
}
.button-uppercase { text-transform: uppercase; }




/*----- MODAL -----*/
.show-in-modal.hide { display: none; }
.modal-wrapper { display: none; z-index: 999999; position: fixed; top: 0; right: 0; 
    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.15); 
    box-shadow: 0 1px 10px rgba(0,0,0,0.15);
}
.modal { position: relative; width: calc(100vw - 40px); height: calc(100vh - 40px); padding: 60px 20px; margin: 0 20px; border-radius: 17px;
    color: var(--main-dark);
    background-color: var(--white);
}
.modal .close-modal-small { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 18px; cursor: pointer; z-index: 9999;  
    background-color: var(--main-dark);
}
.modal .close-modal-small:before, 
.modal .close-modal-small:after { transform: rotate(-45deg); content: ""; position: absolute; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; display: block; height: 2px; width: 16px; border-radius: 1px; transition: all 0.25s ease-out;
    background-color: var(--white);   
}
.modal .close-modal-small:after{ transform: rotate(-135deg); }
.modal .close-modal-small:hover:before{ transform: rotate(45deg); }
.modal .close-modal-small:hover:after{ transform: rotate(-45deg); }
#modal-content { position: relative; width: 100%; height: 100%; padding: 20px; overflow-y: auto; display: block; }





/*
 * ............. FOOTER ............................................... 
 */
.site-footer { padding: 0; position: relative; 
    color: var(--main-light); 
    background-color: var(--main-color); 
}
.site-footer a.button { color: var(--main-color); }
.site-footer a.button-social { color: var(--main-light); }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6, .site-footer .widget .widget-title, .site-footer .widget .widgettitle, .site-footer a:not(.button):not(.components-button), .site-footer li:not(.menu-item) a:not(.link)  {
    color: var(--main-light);
}
.footer-menu a.link:hover {
    color: var(--main-sec);
}
.widget {  margin: 0; }
  .footer-top { padding: 24px 0 4px; }
  .footer-top > .row { padding: 0; }
  .footer-top .cta-btn { padding: 24px 0 0; }
  .footer-top p a { font-family: 'PP Radio Grotesk', sans-serif; font-style: normal; font-weight: 400; font-size: 22px; line-height: 1; text-decoration: none; }
  .footer-top .widget_text:last-child p a { font-family: 'PP Radio Grotesk', serif; font-weight: 400; font-size: 22px; line-height: 1; }
  .footer-top .row > div:nth-child(1) { order: 2 }
  .footer-top .row > div:nth-child(2) { order: 1 }
  


.footer-widgets.row-1.col-2.fix {
      border-top: 1px solid var(--main-light); 
      border-bottom: 1px solid var(--main-light); 
    }
.footer-widgets.footer-top { display: flex; flex-direction: column; justify-content: center; }
.footer-menu { width: 100%; }
.footer-widget-1 h3 { font-size: 30px; line-height: 48px; padding: 24px 0 5px; margin: 0; }

.site-footer .footer-menu li a { font-family: 'PP Radio Grotesk'; font-style: normal; font-weight: 700; font-size: 30px; line-height: 48px; text-decoration: none; }
.site-footer .social li { display: inline-block; }
.site-footer .social li a { font-family: 'PP Radio Grotesk'; font-style: normal; font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 0.02em; text-transform: uppercase; }

.site-info { padding: 40px 0 0; text-align: center; display: flex; flex-direction: column; justify-content: space-between; }
.site-info p { display: block; padding: 24px 0 0; }
.site-info, .site-info  a { font-family: 'PP Radio Grotesk', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; 
    color: var(--main-light); 
}
.site-info .build-by, .site-info .build-by a, .site-info .cred, .site-info .cred a  { font-family: 'PP Radio Grotesk', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; text-align: left; text-decoration: none; margin: 0; 
    color: var(--main-light);
}
.site-footer .footer-bottom { min-height: 500px }
.site-footer .footer-bottom .column-left { padding: 100px 0 0 }
.site-footer .footer-bottom .column-right { position: relative; width: 100%; height: 324px; }
.site-footer .footer-bottom .column-right::after { content: ""; position: absolute; width: calc(100vw + 16%); height: 330px; left: -16%; top: 0; background-repeat: no-repeat; background-size: cover; background-position: center bottom; 
    background-image: url(../images/mapa-line.svg) 
}
.site-footer .footer-widget-2 { padding-bottom: 24px }

.sub-menu-wrapper { padding: 24px 0 0 }
.full-menu-column-left .lang-menu-wrapper { margin: 24px 0 95px }




/* START TOOLTIP STYLES */
[tooltip] { display: inline-block; position: relative; background-repeat: no-repeat; background-size: 100%; width: 16px; height: 16px; top: 2px; left: 5px;
    background-image: url(../images/help.svg); 
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}



/*
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *  RESPONZIVNE  
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
/*------ DESKTOP ------*/
@media (min-width: 769px) {
    html { margin-top: 0px !important } 

    .hide-on-desktop { display: none !important }

    .search-box-mobile { display: none; }
    .body-no-title .storefront-breadcrumb { margin-top: 135px }

    .small-12 { flex: 0 0 100%;	width: 100%;}
    .small-11 {	flex: 0 0 91.6666666667%;	width: 91.6666666667%;}
    .small-10 {	flex: 0 0 83.3333333333%;	width: 83.3333333333%;}
    .small-9 {	flex: 0 0 75%;	width: 75%;}
    .small-8 {	flex: 0 0 66.6666666667%;	width: 66.6666666667%;}
    .small-7 {	flex: 0 0 58.3333333333%;	width: 58.3333333333%;}
    .small-6 {	flex: 0 0 50%;	width: 50%;}
    .small-5 {	flex: 0 0 41.6666666667%;	width: 41.6666666667%;}
    .small-4 {	flex: 0 0 33.33333333%;	width: 33.33333333%;}
    .small-3 {	flex: 0 0 25%;	width: 25%;}
    .small-2 {	flex: 0 0 16.6666666667%;	width: 16.6666666667%;}

    .offset-1 {  margin-left: 8.333333%;  }
    .offset-2 {  margin-left: 16.666667%; }
    .offset-3 {  margin-left: 25%;        }
    .offset-4 {  margin-left: 33.333333%; }
    .offset-5 {  margin-left:41.666667%   }
    .offset-6 {  margin-left:50%          }

    .col-full {
      max-width: 90%;
      padding-right: 16px;
      padding-left: 16px;
    }
    .col-full .col-full { width: 100%; max-width: 100%; }
    .h1, h1, h1 font { font-size: 100px; line-height: 0.96;    }
    .h2, h2, h2 font { font-size: 48px; line-height: 1.3;    }
    .h3, h3, h3 font { font-size: 42px; line-height: 1.2;    }
    .h4, h4, h4 font { font-size: 36px; line-height: 1.2;    }
    .h5, h5, h5 font { font-size: 26px; line-height: 1.2;    }
    h1.headline { font-size: 68px; line-height: 72px; margin: 0 }
    h2.headline.textC { margin: 0 auto; width: 70% }

    .section p.time { margin: 0 0 100px; }
    .cta-btn .button { font-weight: 700; font-size: 18px; line-height: 20px; }
    .cta-btn .button-social { font-size: 14px }
    .nav-bar-inner-right .cta-btn .button { font-weight: 700; font-size: 18px; line-height: 20px; }
    .site-header { height: 135px; border: none;  }

    #logo { padding: 0; }
    #logo img { width: 100%; }
    #nav_bar .col-full { display: flex; flex-direction: row; justify-content: space-between; padding: 48px 0 45px; align-items: center; 
      max-width: calc(100% - 7%); ;
      height: calc(88px - 50px); 
    }

    .main-menu { display: flex; flex-direction: row; padding: 0; }
    .main-menu li { display: inline-block; margin: 0 15px; padding: 0; border-top: none; }
    .main-menu li:last-child { border-bottom: none; }
    .nav-bar-inner-right { display: flex; flex-direction: row; gap: 10px }


    .footer-menu { width: 320px; float: right; }


}

@media (min-width: 992px) {
    .medium-12 {  flex: 0 0 100%;	width: 100%;}
    .medium-11 {	flex: 0 0 91.6666666667%;	width: 91.6666666667%;}
    .medium-10 {	flex: 0 0 83.3333333333%;	width: 83.3333333333%;}
    .medium-9 {	flex: 0 0 75%;	width: 75%;}
    .medium-8 {	flex: 0 0 66.6666666667%;	width: 66.6666666667%;}
    .medium-7 {	flex: 0 0 58.3333333333%;	width: 58.3333333333%;}
    .medium-6 {	flex: 0 0 50%;	width: 50%;}
    .medium-5 {	flex: 0 0 41.6666666667%;	width: 41.6666666667%;}
    .medium-4 {	flex: 0 0 33.33333333%;	width: 33.33333333%;}
    .medium-3 {	flex: 0 0 25%;	width: 25%;}
    .medium-2 {	flex: 0 0 16.6666666667%;	width: 16.6666666667%;}

    .col-full {
      max-width: 90%;
      padding-right: 16px;
      padding-left: 16px;
    }

}

@media (min-width: 1024px) { 
    .col-full {
      max-width: 90%;
      padding-right: 16px;
      padding-left: 16px;
    }

}

@media (min-width: 1124px) {
    .col-full {
      max-width: 100%;
      padding-right: 16px;
      padding-left: 16px;
    }

}

@media (min-width: 1224px) {
    .col-full {
      max-width: 99%;
      padding-right: 16px;
      padding-left: 16px;
    }

}

@media (min-width: 1440px) {
    .col-full {
      max-width: 1232px;
      padding-right: 16px;
      padding-left: 16px;
    }

}

@media (min-width: 1540px) {
    .col-full {
      max-width: 1344px;
      padding-right: 16px;
      padding-left: 16px;
    }

}



/*------ TABLET ------*/
@media only screen and (max-width: 992px) {
    .radio-buttons label { font-size: 10px; line-height: 1.5; padding: 5px;  }
    .radio-buttons label:first-of-type { padding: 5px;  }

}

/*------ MOBIL ------*/
@media only screen and (max-width: 767px) { 

    body .wp-site-blocks { margin-top: 75px }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
        transform: translate(0%, 0%); 
    }
    .wp-block-navigation__responsive-dialog {
        margin-top: 25px;
    }
    header .wp-block-navigation-item__content {
        font-size: 26px;
    }
    header .wp-block-navigation-item.has-child .wp-block-navigation-item__content {
        font-size: 22px;
    }

 
        .xs-m-0    {margin: 0px}
        .xs-mt-0   {margin-top: 0px}
        .xs-mb-0   {margin-bottom: 0px}
        .xs-mx-0   {margin-left: 0px; margin-right: 0px}
        .xs-my-0   {margin-top: 0px; margin-bottom: 0px}

        .xs-p-0    {padding: 0px;}
        .xs-px-0   {padding-left: 0px; padding-right: 0px;}
        .xs-py-0   {padding-top: 0px; padding-bottom: 0px;}
        .xs-pt-0   {padding-top: 0px;}
        .xs-pr-0   {padding-right: 0px;}
        .xs-pb-0   {padding-bottom: 0px;}
        .xs-pl-0   {padding-left: 0px;}
        .xs-p-1    {padding: 4px;}
        .xs-px-1   {padding-left: 4px; padding-right: 4px;}
        .xs-py-1   {padding-top: 4px; padding-bottom: 4px;}
        .xs-pt-1   {padding-top: 4px;}
        .xs-pr-1   {padding-right: 4px;}
        .xs-pb-1   {padding-bottom: 4px;}
        .xs-pl-1   {padding-left: 4px;}
        .xs-p-2    {padding: 8px;}
        .xs-px-2   {padding-left: 8px; padding-right: 8px;}
        .xs-py-2   {padding-top: 8px; padding-bottom: 8px;}
        .xs-pt-2   {padding-top: 8px;}
        .xs-pr-2   {padding-right: 8px;}
        .xs-pb-2   {padding-bottom: 8px;}
        .xs-pl-2   {padding-left: 8px;}
        .xs-p-3    {padding: 12px;}
        .xs-px-3   {padding-left: 12px; padding-right: 12px;}
        .xs-py-3   {padding-top: 12px; padding-bottom: 12px;}
        .xs-pt-3   {padding-top: 12px;}
        .xs-pr-3   {padding-right: 12px;}
        .xs-pb-3   {padding-bottom: 12px;}
        .xs-pl-3   {padding-left: 12px;}
        .xs-p-4    {padding: 16px;}
        .xs-px-4   {padding-left: 16px; padding-right: 16px;}
        .xs-py-4   {padding-top: 16px; padding-bottom: 16px;}
        .xs-pt-4   {padding-top: 16px;}
        .xs-pr-4   {padding-right: 16px;}
        .xs-pb-4   {padding-bottom: 16px;}
        .xs-pl-4   {padding-left: 16px;}
        .xs-p-5    {padding: 20px;}
        .xs-px-5   {padding-left: 20px; padding-right: 20px;}
        .xs-py-5   {padding-top: 20px; padding-bottom: 20px;}
        .xs-pt-5   {padding-top: 20px;}
        .xs-pr-5   {padding-right: 20px;}
        .xs-pb-5   {padding-bottom: 20px;}
        .xs-pl-5   {padding-left: 20px;}
        .xs-p-6    {padding: 24px;}
        .xs-px-6   {padding-left: 24px; padding-right: 24px;}
        .xs-py-6   {padding-top: 24px; padding-bottom: 24px;}
        .xs-pt-6   {padding-top: 24px;}
        .xs-pr-6   {padding-right: 24px;}
        .xs-pb-6   {padding-bottom: 24px;}
        .xs-pl-6   {padding-left: 24px;}
        .xs-p-7    {padding: 28px;}
        .xs-px-7   {padding-left: 28px; padding-right: 28px;}
        .xs-py-7   {padding-top: 28px; padding-bottom: 28px;}
        .xs-pt-7   {padding-top: 28px;}
        .xs-pr-7   {padding-right: 28px;}
        .xs-pb-7   {padding-bottom: 28px;}
        .xs-pl-7   {padding-left: 28px;}
        .xs-p-8    {padding: 32px;}
        .xs-px-8   {padding-left: 32px; padding-right: 32px;}
        .xs-py-8   {padding-top: 32px; padding-bottom: 32px;}
        .xs-pt-8   {padding-top: 32px;}
        .xs-pr-8   {padding-right: 32px;}
        .xs-pb-8   {padding-bottom: 32px;}
        .xs-pl-8   {padding-left: 32px;}
        .xs-p-9    {padding: 36px;}
        .xs-px-9   {padding-left: 36px; padding-right: 36px;}
        .xs-py-9   {padding-top: 36px; padding-bottom: 36px;}
        .xs-pt-9   {padding-top: 36px;}
        .xs-pr-9   {padding-right: 36px;}
        .xs-pb-9   {padding-bottom: 36px;}
        .xs-pl-9   {padding-left: 36px;}
        .xs-p-10   {padding: 40px;}
        .xs-px-10  {padding-left: 40px; padding-right: 40px;}
        .xs-py-10  {padding-top: 40px; padding-bottom: 40px;}
        .xs-pt-10  {padding-top: 40px;}
        .xs-pr-10  {padding-right: 40px;}
        .xs-pb-10  {padding-bottom: 40px;}
        .xs-pl-10  {padding-left: 40px;}
        .xs-p-12   {padding: 48px;}
        .xs-px-12  {padding-left: 48px; padding-right: 48px;}
        .xs-py-12  {padding-top: 48px; padding-bottom: 48px;}
        .xs-pt-12  {padding-top: 48px;}
        .xs-pr-12  {padding-right: 48px;}
        .xs-pb-12  {padding-bottom: 48px;}
        .xs-pl-12  {padding-left: 48px;}
        .xs-p-16   {padding: 64px;}
        .xs-px-16  {padding-left: 64px; padding-right: 64px;}
        .xs-py-16  {padding-top: 64px; padding-bottom: 64px;}
        .xs-pt-16  {padding-top: 64px;}
        .xs-pr-16  {padding-right: 64px;}
        .xs-pb-16  {padding-bottom: 64px;}
        .xs-pl-16  {padding-left: 64px;}
        .xs-p-20   {padding: 80px;}
        .xs-px-20  {padding-left: 80px; padding-right: 80px;}
        .xs-py-20  {padding-top: 80px; padding-bottom: 80px;}
        .xs-pt-20  {padding-top: 80px;}
        .xs-pr-20  {padding-right: 80px;}
        .xs-pb-20  {padding-bottom: 80px;}
        .xs-pl-20  {padding-left: 80px;}
        .xs-p-24   {padding: 96px;}
        .xs-px-24  {padding-left: 96px; padding-right: 96px;}
        .xs-py-24  {padding-top: 96px; padding-bottom: 96px;}
        .xs-pt-24  {padding-top: 96px;}
        .xs-pr-24  {padding-right: 96px;}
        .xs-pb-24  {padding-bottom: 96px;}
        .xs-pl-24  {padding-left: 96px;}
        .xs-p-32   {padding: 128px;}
        .xs-px-32  {padding-left: 128px; padding-right: 128px;}
        .xs-py-32  {padding-top: 128px; padding-bottom: 128px;}
        .xs-pt-32  {padding-top: 128px;}
        .xs-pr-32  {padding-right: 128px;}
        .xs-pb-32  {padding-bottom: 128px;}
        .xs-pl-32  {padding-left: 128px;}
        .xs-p-40   {padding: 160px;}
        .xs-px-40  {padding-left: 160px; padding-right: 160px;}
        .xs-py-40  {padding-top: 160px; padding-bottom: 160px;}
        .xs-pt-40  {padding-top: 160px;}
        .xs-pr-40  {padding-right: 160px;}
        .xs-pb-40  {padding-bottom: 160px;}
        .xs-pl-40  {padding-left: 160px;}

}


/*------ DESKTOP margins / paddings ------*/
@media (min-width: 769px) {
        .m-0    {margin: 0px}
        .mt-0   {margin-top: 0px}
        .mb-0   {margin-bottom: 0px}
        .mx-0   {margin-left: 0px; margin-right: 0px}
        .my-0   {margin-top: 0px; margin-bottom: 0px}

        .p-0    {padding: 0px;}
        .px-0   {padding-left: 0px; padding-right: 0px;}
        .py-0   {padding-top: 0px; padding-bottom: 0px;}
        .pt-0   {padding-top: 0px;}
        .pr-0   {padding-right: 0px;}
        .pb-0   {padding-bottom: 0px;}
        .pl-0   {padding-left: 0px;}
        .p-1    {padding: 4px;}
        .px-1   {padding-left: 4px; padding-right: 4px;}
        .py-1   {padding-top: 4px; padding-bottom: 4px;}
        .pt-1   {padding-top: 4px;}
        .pr-1   {padding-right: 4px;}
        .pb-1   {padding-bottom: 4px;}
        .pl-1   {padding-left: 4px;}
        .p-2    {padding: 8px;}
        .px-2   {padding-left: 8px; padding-right: 8px;}
        .py-2   {padding-top: 8px; padding-bottom: 8px;}
        .pt-2   {padding-top: 8px;}
        .pr-2   {padding-right: 8px;}
        .pb-2   {padding-bottom: 8px;}
        .pl-2   {padding-left: 8px;}
        .p-3    {padding: 12px;}
        .px-3   {padding-left: 12px; padding-right: 12px;}
        .py-3   {padding-top: 12px; padding-bottom: 12px;}
        .pt-3   {padding-top: 12px;}
        .pr-3   {padding-right: 12px;}
        .pb-3   {padding-bottom: 12px;}
        .pl-3   {padding-left: 12px;}
        .p-4    {padding: 16px;}
        .px-4   {padding-left: 16px; padding-right: 16px;}
        .py-4   {padding-top: 16px; padding-bottom: 16px;}
        .pt-4   {padding-top: 16px;}
        .pr-4   {padding-right: 16px;}
        .pb-4   {padding-bottom: 16px;}
        .pl-4   {padding-left: 16px;}
        .p-5    {padding: 20px;}
        .px-5   {padding-left: 20px; padding-right: 20px;}
        .py-5   {padding-top: 20px; padding-bottom: 20px;}
        .pt-5   {padding-top: 20px;}
        .pr-5   {padding-right: 20px;}
        .pb-5   {padding-bottom: 20px;}
        .pl-5   {padding-left: 20px;}
        .p-6    {padding: 24px;}
        .px-6   {padding-left: 24px; padding-right: 24px;}
        .py-6   {padding-top: 24px; padding-bottom: 24px;}
        .pt-6   {padding-top: 24px;}
        .pr-6   {padding-right: 24px;}
        .pb-6   {padding-bottom: 24px;}
        .pl-6   {padding-left: 24px;}
        .p-7    {padding: 28px;}
        .px-7   {padding-left: 28px; padding-right: 28px;}
        .py-7   {padding-top: 28px; padding-bottom: 28px;}
        .pt-7   {padding-top: 28px;}
        .pr-7   {padding-right: 28px;}
        .pb-7   {padding-bottom: 28px;}
        .pl-7   {padding-left: 28px;}
        .p-8    {padding: 32px;}
        .px-8   {padding-left: 32px; padding-right: 32px;}
        .py-8   {padding-top: 32px; padding-bottom: 32px;}
        .pt-8   {padding-top: 32px;}
        .pr-8   {padding-right: 32px;}
        .pb-8   {padding-bottom: 32px;}
        .pl-8   {padding-left: 32px;}
        .p-9    {padding: 36px;}
        .px-9   {padding-left: 36px; padding-right: 36px;}
        .py-9   {padding-top: 36px; padding-bottom: 36px;}
        .pt-9   {padding-top: 36px;}
        .pr-9   {padding-right: 36px;}
        .pb-9   {padding-bottom: 36px;}
        .pl-9   {padding-left: 36px;}
        .p-10   {padding: 40px;}
        .px-10  {padding-left: 40px; padding-right: 40px;}
        .py-10  {padding-top: 40px; padding-bottom: 40px;}
        .pt-10  {padding-top: 40px;}
        .pr-10  {padding-right: 40px;}
        .pb-10  {padding-bottom: 40px;}
        .pl-10  {padding-left: 40px;}
        .p-12   {padding: 48px;}
        .px-12  {padding-left: 48px; padding-right: 48px;}
        .py-12  {padding-top: 48px; padding-bottom: 48px;}
        .pt-12  {padding-top: 48px;}
        .pr-12  {padding-right: 48px;}
        .pb-12  {padding-bottom: 48px;}
        .pl-12  {padding-left: 48px;}
        .p-16   {padding: 64px;}
        .px-16  {padding-left: 64px; padding-right: 64px;}
        .py-16  {padding-top: 64px; padding-bottom: 64px;}
        .pt-16  {padding-top: 64px;}
        .pr-16  {padding-right: 64px;}
        .pb-16  {padding-bottom: 64px;}
        .pl-16  {padding-left: 64px;}
        .p-20   {padding: 80px;}
        .px-20  {padding-left: 80px; padding-right: 80px;}
        .py-20  {padding-top: 80px; padding-bottom: 80px;}
        .pt-20  {padding-top: 80px;}
        .pr-20  {padding-right: 80px;}
        .pb-20  {padding-bottom: 80px;}
        .pl-20  {padding-left: 80px;}
        .p-24   {padding: 96px;}
        .px-24  {padding-left: 96px; padding-right: 96px;}
        .py-24  {padding-top: 96px; padding-bottom: 96px;}
        .pt-24  {padding-top: 96px;}
        .pr-24  {padding-right: 96px;}
        .pb-24  {padding-bottom: 96px;}
        .pl-24  {padding-left: 96px;}
        .p-32   {padding: 128px;}
        .px-32  {padding-left: 128px; padding-right: 128px;}
        .py-32  {padding-top: 128px; padding-bottom: 128px;}
        .pt-32  {padding-top: 128px;}
        .pr-32  {padding-right: 128px;}
        .pb-32  {padding-bottom: 128px;}
        .pl-32  {padding-left: 128px;}
        .p-40   {padding: 160px;}
        .px-40  {padding-left: 160px; padding-right: 160px;}
        .py-40  {padding-top: 160px; padding-bottom: 160px;}
        .pt-40  {padding-top: 160px;}
        .pr-40  {padding-right: 160px;}
        .pb-40  {padding-bottom: 160px;}
        .pl-40  {padding-left: 160px;}
}















.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    white-space: nowrap;
}



/* ------------------------------------------------------------- *
 * main - Lightbox
/* ------------------------------------------------------------- */

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

/* Lightbox content */
.lightbox-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
}

.lightbox-close {
  position: absolute;
  font-size: 48px;
  font-weight: bold;
  top: 10px;
  right: 10px;
  color: var(--main-light);
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.lightbox-close:hover {
  color: var(--main-hover);
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  color: var(--main-light);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.lightbox-arrow:hover {
  opacity: 1;
}

.lightbox-arrow-prev {
  left: 10px;
}

.lightbox-arrow-next {
  right: 10px;
}

.lightbox-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90vh;
  padding: 1.6rem;
  margin: auto;
}

/* Lightbox image */
.lightbox-image {
  cursor: pointer;
  transition: opacity 0.2s;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox-image:hover {
  opacity: 0.7;
}

.lightbox-enlarged {
  opacity: 1;
}

.lightbox-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: auto;
  padding: 1rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  color: var(--main-light);
  border-radius: 17px;
}

 @-webkit-keyframes tilt{
              0% {
                opacity: 0;
              }
              
              100% {
                opacity: 1;
              }
            }
            @keyframes tilt {
              0% {
                opacity: 0;
              }
                
              100% {
                opacity: 1;
              }
            }

            @-webkit-keyframes tilt-back {
              0% {
                opacity: 0;
              }
                
              100% {
                opacity: 1;
              }
            }
            @keyframes tilt-back {
              0% {
                opacity: 0;
              }
                
              100% {
                opacity: 1;
              }
            }