/* 
Theme name: Wolfpack trail
Version: 0.5
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: #fff;
    --color: #737373;
    --link-color: blue;
    --link-color-hover: #fac7ce;
    --button-color: #000;
    --button-color-hover: #fff;
    --button-bg: #fac7ce;
    --button-bg-hover: transparent;
    --button-border-color: #fac7ce;
    --button-border-thickness: 2px;
    --burger-color: #fff;
    --burger-color-hover: #fac7ce;
    --burger-line-thickness: 3px;
    --burger-line-seperation: 7px;
    --burger-line-width: 22px;
    --header-height: auto;
    --header-height-full: auto;
    --header-background: #000;

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

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

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

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

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);}

.button-alt {background: #fff; color: #000; border: 1px solid #fff; justify-self: baseline}
.button-alt:hover {background: transparent; border-color: #000; color: #000;}


body > header {position: relative; height: var(--header-height); font-size: 18px; background-color: var(--header-background); z-index: 2; color: #fff}

.tribe-events .tribe-events-calendar-list__event-header, .tribe-events-widget-events-list__event-header {background: #fff}

.burger-wrap{padding:5px;position:absolute;right:0;top:50%;transform:translateY(-50%); 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)}

.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; text-transform: uppercase; font-weight: 900}
/*#menu-header li {border-bottom: 1px solid #ededed;}*/
#menu-header li a {text-decoration: none; display: inline-block; padding: 0 10px;}
.menu-header-container li a {color: #fff;}
#menu-header > li > a:hover {color: var(--link-color-hover);}
#menu-header .current-menu-item > a {color: var(--link-color-hover);}
#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 .menu-item-has-children li:hover {background-color: var(--link-color-hover);}


.menu-mobile-container li a {color: #fff; padding: 10px 0 !important;}
.menu-mobile-container li {padding-right: 30px;}
.menu-mobile-container #menu-header {padding-top: 20px; background-color: #000; padding-bottom: 20px; padding-right: 15px; text-align: right; height: 100vh;}
.menu-mobile-container .menu-item-has-children > a{position: relative;}
.menu-mobile-container .menu-item-has-children > a::after {content: "\e901"; position: relative; font-size: 20px; font-family: 'icomoon'; margin-left: 5px;}

.img-logo {height: 87px !important; width: auto !important; filter: invert(1)}

.menu-active .logo-menu {background: #000}
.menu-active .img-logo {filter: invert(1)}

.wpcf7 input, .wpcf7 textarea {padding: 13px 20px; border: 1px solid #000; color: #fff; background: transparent; width: 100%; margin-bottom: 10px;}
.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; padding: 10px 20px; color: var(--button-color); background-color: var(--button-bg); border: var(--button-border-thickness) solid var(--button-border-color);}
.wpcf7 input[type="submit"]:hover {background: transparent}

.Fslider {margin-top: -100px; color: #fff; text-transform: uppercase}
.Fslider h1 {color: #fff}
.Fslider img {width: 100%; height: 90vh; min-height: 500px; object-fit: cover; object-position: top}
.Fslider .swiper-slide {position: relative}
.Fslider .slider-text {padding: 20px; position: absolute; bottom: 0; left: 9; width: 100%; text-align: center}

.black-container {background-color: #000; color: #fff; padding-bottom: 30px}
.black-container h2 {color: #fff}
.black-container-pw {padding: 30px}

.who-we-are {margin: 50px 0}

.pink-strip {background-color: #fac7ce; color: #000; text-transform: uppercase; text-align: center; padding-top: 30px; padding-bottom: 30px;}

.why-wolfpack{background: #000; color: #fff; border-bottom: 5px solid #fac7ce}
.why-wolfpack-pw {justify-content: center; display: flex; flex-direction: column; padding: 20px 0}
h2 span {color: #fac7ce }
.why-wolfpack-pw h2 {color: #fff}

.clanstvo {background-image: url("assets/img/clanstvo-bg.jpg"); background-repeat: no-repeat; background-size: cover; color: #fff; padding: 50px 0}
.clanstvo-1 ul {list-style: none; display: flex; gap: 10px; margin-top: 30px; padding: unset}
.clanstvo-1 ul li {display: inline-block; text-align: center; flex: 24% 1 1; justify-content: center; align-items: center; border: 1px solid #fff; padding: 10px; display: flex; border-radius: 15px; background: rgba(255, 255, 255, 0.8); color: #000; flex-direction: column}
.clanstvo i {font-size: 15px;}
.pink-h {color: #fac7ce !important}
.clanstvo h2 {color: #fff}
.clanstvo-2 {border-top: 2px dotted #fac7ce}
.clanstvo-1, .clanstvo-2 {padding-top: 50px; padding-bottom: 50px}
.clanstvo-2 ul {list-style: none; display: flex; gap: 10px; margin-top: 30px; padding: unset}
.clanstvo-2 ul li {display: inline-block; text-align: center; flex: 24% 1 1; justify-content: center; align-items: center; border: 1px solid #fff; padding: 10px; display: flex; border-radius: 15px; background: rgba(255, 255, 255, 0.8); color: #000; flex-direction: column}
.clanstvo-2 .sup-ponudba {flex: 45% 0 1}

.front-shop {background: #fac7ce; padding: 50px 0; color: #000}
.front-shop h2 {color: #fff}

.tribe-events-event-image img {width: 100%; height: auto;}

.sponzorji {padding: 50px 0}
.f-sponzor {padding: 10px; display: inline-block}
.f-sponzor img {height: 80px; width: auto; filter: grayscale(1) invert(1)}

.sc_item_title.sc_title_highlight_text_wrap:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -100vw;
    -webkit-transform: skew(-21deg);
    transform: skew(-21deg);
    background-color: #000;
    z-index: -1;
}

.sc_item_title.sc_title_highlight_text_wrap {
    position: relative;
    display: inline-block;
    padding: 0.14em 0.98em 0.24em 0;
    color: #fff
}

.prijavnica {margin: 50px 0}


/* Core functionality */
#animated-text-strip{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    overflow: hidden;
}
#animated-text-strip .marquee {
    white-space: nowrap;
    animation: marquee 5s linear infinite;
    max-width: none;
}


@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

/* Styles for the sake of the demonstration */
#animated-text-strip{
    padding: 1rem 0;
}
.marquee{
    font-family: 'Open Sans', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: white;
}

dip {color: #c1282d}

footer {background: #000; padding-top: 50px; border-top: 5px solid #fac7ce}
footer .menu-header-container {text-align: left;}
footer .menu-header-container ul {list-style: none; margin: unset; padding: unset}
footer a {color: #fff !important; text-decoration: none}

.logo-footer img{filter: invert(1)}


#copyright {font-size: 12px; margin-top: 30px; padding: 20px 0}

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

.f-who-text {justify-self: center; align-items: center; display: flex}

.str-embed {padding: 50px 0}

footer [class*="icon-"] {font-size: 30px}

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

@media only screen and (max-width: 992px){
    footer {text-align: center}
}

@media only screen and (min-width: 992px) {
    .clanstvo-2 {border-left: 2px dotted #fac7ce; border-top: unset}
   
}

@media screen and (max-width: 1199px) {
    .burger-wrap {display: block;}    
    .mobile-hidden {display: none !important;}

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

    .clanstvo-1 ul li {flex: 45% 0 1}
    .clanstvo-1 ul {flex-wrap: wrap}
}

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

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

    #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: #000;}
    #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;}

}

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


}