/* 
Theme name: Kulstik
Version: 0.7
Description:
Author: Kulstik
Author URI: https://kulstik.com/
Requires at least: 6.8.1
Tested up to: 6.8.1
Requires PHP: 8.3
Text Domain: kultura
*/

:root {
    --background: #f4ecde;
    --color: #000;
    --link-color: blue;
    --link-color-hover: #c39b42; /*#ce8e37;*/
    --button-color: #fff;
    --button-color-hover: transparent;
    --button-bg: #c39b42;
    --button-bg-hover: transparent;
    --button-border-color: #c39b42;
    --button-border-thickness: 2px;
    --burger-color: #fff !important;    
    --burger-color-hover: #c39b42;
    --burger-line-thickness: 3px;
    --burger-line-seperation: 7px;
    --burger-line-width: 22px;
    --header-height: auto;
    --header-height-full: auto;
    --header-background: transparent;

    --tec-color-accent-primary: #ce8e37;
    --tec-color-accent-primary-background-datepicker: #d2ad624d;

    --swiper-theme-color: #c39b42 !important;
}

div:empty {display: none;}
::-moz-selection {
  color: #fff;
  background: #ce8e37;
}

::selection {
  color: #fff;
  background: #ce8e37;
}

.grecaptcha-badge {display:none !important}

body {overflow-x: hidden; background-color: var(--background) !important; color: var(--color) !important;}

a { color: var(--link-color); text-decoration: underline; }
a:hover, a:focus {color: var(--link-color-hover)}

b, strong {font-weight: bold !important;}

.button {font-size: 18px; padding: 13px 30px; color: var(--button-color); background-color: var(--button-bg); border: var(--button-border-thickness) solid var(--button-border-color); text-transform: uppercase; text-decoration: none; backdrop-filter: blur(60px); width: unset !important;}
.button:hover {color: var(--button-color-hover); background-color: var(--button-bg-hover);}


header {position: relative; height: var(--header-height); font-size: 18px; z-index: 2;  padding: 20px 0}
.burger-wrap{padding:5px; display: none;}
.burger {margin: 5px; position: relative;}
.burger::before, .burger::after {position: absolute;}
.burger::before, .burger::after, .burger {content: ''; display: block; width: var(--burger-line-width); height: var(--burger-line-thickness); background-color: var(--burger-color)}
.burger::before {top: var(--burger-line-seperation)}
.burger::after {bottom: var(--burger-line-seperation)}

.burger-wrap.menu-active .burger{ transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); background: var(--burger-color-hover);}
.burger-wrap.menu-active .burger::before {top: 0; opacity: 0; transition: top 0.2s ease, opacity 0.1s 0.12s ease;background: var(--burger-color-hover)}
.burger-wrap.menu-active .burger::after {bottom: 0; transform: rotate(-90deg); transition: bottom 0.2s ease, transform 0.2s 0.12s;background: var(--burger-color-hover)}

.home header {background: #000000; background: linear-gradient(180deg, rgba(0, 0, 0, 1) -25%, rgba(255, 255, 255, 0) 100%);}
header {background-color: #000}
.tribe-events header {background-color: unset}

.menu-active #menu-header {display: block;}
#menu-header {position: absolute; top: var(--header-height); list-style: none; padding: 0; margin: 0; width: 100%; display: none; left: 0; color: #000;}
/*#menu-header li {border-bottom: 1px solid #ededed;}*/
#menu-header li a {text-decoration: none; display: inline-block; padding: 0 15px;}
.menu-header-container #menu-header > li > a {color: #fff; text-transform: uppercase; font-size: 16px}
.menu-header-container ul > li > a {color: #000}
#menu-header > li > a:hover {color: #fff;}
#menu-header .menu-item-has-children, #menu-header .sub-menu {list-style: none;}
/*#menu-header .menu-item-has-children > a:after {content: "\e903"; font-family: 'icomoon';}*/
#menu-header .menu-item-has-children .sub-menu {display: none}

#menu-header li a:hover, #menu-header .current-menu-item a, footer .current-menu-item a {text-decoration: underline; text-decoration-color: #ce8e37; text-underline-offset: 10px; }

.logo-wrap {position: relative; height: 60px; display: flex; align-items: center; margin: 10px 0 !important;}
.logo-wrap img {padding: 20px}

.header-icons {display: flex; align-items: center; justify-content: center; gap: 10px;}
.header-icons a {color: #000; text-decoration: none; font-size: 20px;}

.menu-mobile-container .gumb-meni > a {padding: 10px 12px !important; margin-top: 10px}

.menu-mobile-container li a {color: #fff; padding: 10px 0 !important;}
.menu-mobile-container > ul > li {padding-right: 40px;}
.menu-mobile-container #menu-header {padding-top: 20px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 1) 100%); padding-bottom: 20px; padding-right: 15px; text-align: right; height: auto; margin-top: 20px}
.menu-mobile-container .menu-item-has-children{position: relative;}
.menu-mobile-container .menu-item-has-children::after {content: "\e901"; position: absolute; font-size: 20px; font-family: 'icomoon'; margin-left: 15px; top: 10px}

.menu-active header {background: #000}

.menu-item-has-children > a:after {content:'\e901'; display: inline-block; font-family: "icomoon"; margin-left: 5px}

.gumb-meni > a {padding: 10px 12px !important; background-color: #c39b42; color: #fff; border-radius: 5px; border: 1px solid #c39b42}
.gumb-meni > a:hover {background-color: transparent; text-decoration: none !important}


.wpcf7 input, .wpcf7 textarea {padding: 13px 20px; border: 1px solid #000; color: #000; background: transparent; width: 100%; margin-bottom: 10px; border-radius: 5px}
.wpcf7 textarea {width: 100%;}
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder {color: #000; font-size: 12px;}
.wpcf7 input[type="checkbox"] {width: unset;}
.wpcf7 input[type="submit"] {margin-top: 10px; width: unset; font-size: 18px; padding: 13px 30px; color: var(--button-color); background-color: var(--button-bg); border: var(--button-border-thickness) solid var(--button-border-color); text-transform: uppercase; text-decoration: none; backdrop-filter: blur(60px);}
.wpcf7 input[type="submit"]:hover {color: var(--button-color-hover); background-color: var(--button-bg-hover);}
.home .contact-wrap {display: none;}
.wpcf7-list-item {margin: unset;} 
.content-break {width: 100%; height: 5px; border-top: 2px solid #e1e1e1; margin-top: 50px; margin-bottom: 50px;}
.wpcf7-spinner {display: none;}


.button {padding: 5px 12px; background-color: transparent; color: #fff; border-radius: 5px; border: 1px solid #c39b42; display: block; font-size: 15px; justify-self: baseline; margin-top: 50px}
.button:after {content: '>'; display: inline-block; margin-left: 20px; color: #c39b42; font-size: 16px}
.button:hover {background-color: #c39b42; color: #fff}
.button:hover:after {color: #fff}
.button-alt:after {content: unset}
.button-alt {background-color: #c39b42;}
.button-alt:hover {background-color: transparent}

#copyright {font-size: 12px; margin-top: 100px;}

.wp-block-spacer {display: block !important;}

.vstopni-slider {margin-top: -156px}
.swiper-slide {position: relative; max-height: 80vh; min-height: 1000px}
.swiper-slide:before {content: ' '; background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 60%); position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%}
.swiper-slide img {object-fit: cover; width: 100%; max-height: 80vh; min-height: 1000px}
.intro-text .button {margin-top: 20px}

.intro-text span {color: #c39b42}
.intro-text h1 {margin-bottom: -5px !important}
.intro-text h2 {margin-bottom: 20px}
.intro-text h1, .intro-text h2 {font-size: 2.3rem !important}
.intro-text p {font-style: italic; max-width: 80%}
.intro-text {position: absolute; bottom: 10%; width: 100%; color: #dad3c2}

.intro-text .button{display: inline-block; margin-right: 5px}

.single-page {padding: 50px 0}

.home footer {border-top: unset}
footer {padding-top: 50px; text-align: center; border-top: 8px solid #c39b42}
.footer-firma {font-size: 12px;}
.footer-firma p {margin-top: 20px}
.footer-social {margin-bottom: 15px}
.footer-social a {text-decoration: none; background-color: #c39b42; border-radius: 50%; padding: 5px; display: inline; color: #fff; font-size: 18px}

.copyright {background-color: #c39b42; color: #fff; font-size: 12px; padding: 10px 0; margin-top: 50px}
.copyright a {text-decoration: none; color: #fff}

.znacaj .row {gap: 30px !important}

.img-znacaj {border-radius: 50%; object-fit: cover; width: 300px; height: 300px; margin-bottom: 10px; border-style: none solid solid none; border-width: 12px; border-color: #c39b42 }

.znacaji {font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 20px; font-weight: 600}
.znacaji hr {width: 25%; margin: 1rem auto; border-top: 3px solid #c39b42; opacity: unset}

.pad-50 {padding: 50px 0}

.pretext {letter-spacing: 5px; color: #c39b42; text-transform: uppercase; margin-bottom: 10px;}
.f-h2 {font-family: "Cormorant Garamond", serif; margin-bottom: 10px}
.f-h2 span {display: block; color: #c39b42}

.p-podpis {font-family: "Gloria Hallelujah", cursive; font-size: 20px; margin-top: 30px}

.pasica-img-container {height: 440px; overflow: hidden}
.img-pasica {object-fit: contain; width: 100%; height: 100%}

.pasice-black {background-color: #000; color: #dad3c2}

.pasica-content {padding: 50px 0}

.pasica-white {color: #000}
.pasice-white .button {color: #000}

.trenutki {border-bottom: 5px solid #c39b42;}
.trenutki span {display: inline-block}
.img-trenutek {width: 100%; height: 120px; mix-blend-mode: multiply; object-fit: contain; padding: 10px}
.trenutki .f-h2 {margin-bottom: 50px}
.trenutki hr {width: 40%; margin: 1rem auto; border-top: 3px solid #c39b42; opacity: unset}
.trenutki .button {color: #000; border: unset; font-size: 12px; justify-self: center; margin-top: 10px}
.trenutki .button:after {margin-left: 5px}
.trenutki h3 {text-transform: uppercase; font-family: "Montserrat", sans-serif; line-height: 1.5; margin-bottom: unset; letter-spacing: unset !important}

.page-template-sushi main {background: #000; color: #dad3c2}
.page-template-sushi h1 {margin-bottom: unset}
.page-template-sushi hr {opacity: 1; border-top: 2px solid #c39b42}
.sushi-stolpec {margin: 30px 0}
.page-template-sushi .wpcf7-list-item {display: block; padding: 10px 0}
.page-template-sushi .wpcf7 input, .page-template-sushi  .wpcf7 textarea {border: 1px solid #dad3c2}

.h2, h2 {
    font-size: 3rem !important;
}

@media only screen and (max-width: 576px){
    .trenutek {gap: 20px}
}

@media only screen and (min-width: 768px){  
  .galerija a {width: 25%;}
}

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

@media only screen and (min-width: 992px) {
   
}

@media screen and (max-width: 1199px) {
    .burger-wrap {display: flex; align-items: center; justify-content: right}
    .mobile-hidden {display: none !important;}

    .menu-header-container {display: none;}
}

@media screen and (min-width: 1200px) {
    header {height: var(--header-height-full)}

    .lg-menu {text-align: right}
    .lg-menu .sub-menu {text-align: left}

    #menu-header {position: relative; top: unset; display: block}
    #menu-header > li {display: inline-block;}
    .menu-header-container {display: inline-block;}

    #menu-header .menu-item-has-children {position: relative;}
    #menu-header .menu-item-has-children .sub-menu {padding: 0;}
    #menu-header .menu-item-has-children:hover > .sub-menu {display: block;}
    #menu-header .menu-item-has-children > .sub-menu {display: none; position: absolute; white-space: nowrap; left: 0; z-index: 9999; padding-top: 10px; background-color: #fff;}
    #menu-header .menu-item-has-children .menu-item-has-children:hover > .sub-menu {display: block;}
    #menu-header .menu-item-has-children .menu-item-has-children > .sub-menu {display: none; position: absolute;right: 0; top: 50px; background-color: #fff; white-space: nowrap;}
    #menu-header li a {display: block; padding: 30px 17px; height: 100%;}

    .menu-mobile-container {display: none;}

    header {padding-top: 50px}

    .intro-text h1 {margin-bottom: -10px !important}

    .intro-text h1  {font-size: 80px !important;}
    .intro-text p {max-width: 35%}
    h1 {font-size: 80px !important}

    footer {text-align: unset}

    .footer-social {display: flex; flex-direction: column; gap: 15px; margin-bottom: unset}
    .footer-social a {display: flex; align-self: self-end}

    .znacaj .row {gap: unset !important}

    .pretext {font-size: 18px}

    .img-pasica {object-position: 0 -100px; object-fit: cover; width: 100%; height: 100%;}

    .home h1, .home h2, .home h3 {letter-spacing: -3px}

}

@media screen and (min-width: 1600px) {


}