@charset "utf-8";
/* CSS Document */

/*
Thin scrollbar
Mobile-friendly "wide-table" wrapper 
Zoom-in pic hover effect
Accordion
Carousel
Circle li-list
Before vs. After Img container
*/

.circle-label {
    padding: 6px 4px;
    position: absolute; 
    z-index: 10; 
    font-size: 0.875em; 
    text-align: center; 
    width: 90%; 
    left: 5%; 
    top: 70%; 
    border-bottom:1px solid #666;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0.5;
    transition: all .25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
}
.circle-menu {
    /* border:1px solid #000; */
    justify-content: start; 
    align-items: flex-start;
}
.circle-menu > div {
    /* border:1px solid #000; */
}
.circle-menu > div:hover .circle-label {
    opacity: 1;
}
.circle-menu .circle {
    max-width: 100px!important;
    padding: 6px;
}


/* thin scrollbar */
.thin-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.thin-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.thin-scrollbar::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 0px solid slategrey;
}
/* end thin scrollbar */


/* Mobile-friendly "wide-table" wrapper */
/*
div class="wide-table-wrapper">
    <table class="seznam table-catalog-tech-details" style="max-width: 1050px; width: 1040px;">
    <tbody>
        <tr class="tr_uvodna text-center">
            <td>Izdelek</td>
            <td>Za velikost savne m3</td>
            <td>Dimenzije (mm)</td>
            <td>Teža kg</td>
            <td>Kamenje kg</td>
        </tr>
        <tr class="text-center hover">
            <td>SAVC-105N-P</td>
            <td>7-13</td>
            <td>505x410x655</td>
            <td>24</td>
            <td>18-22</td>
        </tr>
        <tr class="text-center hover">
            <td>SAVC-120N-P</td>
            <td>8-14</td>
            <td>505x410x655</td>
            <td>25</td>
            <td>18-22</td>
        </tr>
    </tbody>
    </table>
</div>
<!-- div.wide-table-wrapper -->
*/

.wide-table-wrapper {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: min(1920px, 100vw - 2em);
  
    overflow-x: scroll;
    border: 0px solid #ccc;
    /* display:none; */
}
/* Remove last border-bottom for beet look as this wrapper has a color scroll-bar */
.wide-table-wrapper .seznam tr.hover:last-child td{
    border-bottom: 0px; 
}
.wide-table-wrapper::-webkit-scrollbar-thumb {
    background-color: #999;
}
.wide-table-wrapper::-webkit-scrollbar {
    height: 6px;
    background-color: #ccc;

    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
} 

@media only screen and (max-width: 600px) {
    .wide-table-wrapper::-webkit-scrollbar,
    .wide-table-wrapper::-webkit-scrollbar-track, 
    .wide-table-wrapper::-webkit-scrollbar-thumb  {

        transition: all .5s ease-in-out;
        transition: height 1s ease-in-out;
    }

    .wide-table-wrapper::-webkit-scrollbar {
        width: 3px;
        height: 2px;
        background-color: #eee;

        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    } 
    
    .wide-table-wrapper::-webkit-scrollbar-track {
        background-color: #eee;
        padding-right:2px;
    }
    
    .wide-table-wrapper::-webkit-scrollbar-thumb {
        background-color: #999;
    }


    /* this is already mobile 
    .ul-tags-tpl005::-webkit-scrollbar-thumb,
    */
    .wide-table-wrapper:hover::-webkit-scrollbar-thumb {
        background-color: rgba(var(--base-rgb), 0.85)!important;
    }
} /* end media */

/* END Mobile-friendly "wide-table" wrapper */


/* Hover > img zoom + transition */
.img-hover-zoom {
    overflow: hidden; 
    display: block; 
    padding: 0; 
    margin: 0; 
    width: 100%;
}

.img-hover-zoom img {
    width: inherit; 
    height: auto;
    transition: transform .75s ease;
}
.img-hover-zoom:hover img {
    transform: scale(1.05);
}


.bgimg-hover-zoom-wrapper {
    overflow: hidden;
}

.bgimg-hover-zoom {
    display: inline-block; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    
    background-size: cover;
    background-repeat: no-repeat;
    transition: all .5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    overflow: hidden;
}

.bgimg-hover-zoom:hover {
    transform: scale(1.05);
}

/* ENd Hover > img zoom + transition */




/* 
Activate with: 
class="accordion 
+ 
optional: accordion-base / accordion-base-light accordion-base-dark / accordion-accent
*/
/* Default colors for Accordion */
.accordion {
    --acc-label-active-color:#fff; /*  #fe9700; */
    --acc-label-active-bgcolor: #939393; /* #3f51b4; #fe9700; */
    --acc-label-active-bgcolor-light: #eee; /* #e6eafa; */
}

.accordion .acc-section {
  display: grid;
  grid-template-columns: minmax(48px, 48px) 1fr;
  
  margin: 0 0 12px 0;
  padding: 0 0 12px 0;
  cursor: pointer;
  border: 0px solid #fc0; 
  border-bottom: 1px solid transparent;
  transition: background-color .5s, color 0.3s, opacity 1s, border-color 0.3s;
}

.accordion .acc-label {
    height: auto;
    min-height: 48px;
    max-height: 48px;
    border: 1px solid transparent;
    border-color: #c0c0c0;

    border-radius: 50%;
    background: transparent;
    font-size: 24px;
    line-height: 24px;
    padding: 12px;
    text-align: center;
    transition: all .2s ease-in-out;
}

.accordion .acc-content {
    border: 1px solid transparent;
    /* border-color: #c0c0c0; */
  padding: 0 0 0 1em;
  text-align: left;
}

.accordion .acc-title {
  font-size: 1.15em;
  font-weight: bold;
  line-height: 1.15em;
  padding: 0;
  margin: 12px 0 12px 0;
}

.accordion .acc-section-active .acc-label {
  background: var(--acc-label-active-bgcolor)!important; /* #e0e0e0; */
  color: var(--acc-label-active-color)!important; /* #cc0000; */
}

.accordion .acc-section .acc-content-toggle {
  display: none;
  opacity: 1;
  padding: 0.25em 0;
  transition: opacity 0.5s ease-in-out;
}

.accordion .acc-section .acc-content-toggle {
  color: inherit; /* Activated p content in acc-item  var(--acc-label-active-color)!important;  */
}

.accordion .acc-section-active .acc-title {
    /* color: #cc0000!important; */
}

.accordion .acc-section-active .acc-content-toggle {
  display: inline;
  /* color: #cc0000!important; */
}

.accordion .acc-section:not(.acc-section-active):hover .acc-label {
    /* border-bottom: 1px solid#ccc;  #c7623a */
    background: var(--acc-label-active-bgcolor-light)!important; /* #e0e0e0; */
}

/* end accordion-tpl-01 */


/* Carousel based on slick() */


.slick-loading .slick-list
{
    background: #fff url('../../ajax/libs/slick-carousel/1.9.0/ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('../../ajax/libs/slick-carousel/1.9.0/fonts/slick.eot');
    src: url('../../ajax/libs/slick-carousel/1.9.0/fonts/slick.eot#iefix') format('embedded-opentype'), url('../../ajax/libs/slick-carousel/1.9.0/fonts/slick.woff') format('woff'), url('../../ajax/libs/slick-carousel/1.9.0/fonts/slick.ttf') format('truetype'), url('../../ajax/libs/slick-carousel/1.9.0/fonts/slick.svg') format('svg');

}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    z-index: 10;
    top: 50%;

    display: block;

    width: 45px;
    height: 45px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;

    border: none;
    outline: none;
    background: transparent; /* this one makes the circle bg transparent. Must not be solid color */ 

    outline: 0px solid green;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
    opacity: 1;
}

.slick-prev:focus:before,
.slick-next:focus:before,
.slick-prev:hover:before,
.slick-next:hover:before
{
    opacity: 1;
    background-color: #f78357;
    background-color: #000000;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    display: inline-block;
    font-size: 1em;
    line-height: 1em;
    width: 45px;
    height: 45px;

    opacity: .5;
    color:  #ececec;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background-color: #000000;
    
    background-size: 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;

    border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
}

.slick-prev:before
{
    /* background-color: #2f15c2; */
}

.slick-prev
{
    left: 25px;
    left: 10px;
}
[dir='rtl'] .slick-prev
{
    right: -15px;
    left: auto;
}
.slick-prev:before
{
    /* content: '←'; */
    content: ' '; 
    background-image:url(../pic/arrow-left-semi-thin-64-240.png);
}
[dir='rtl'] .slick-prev:before
{
    /* content: '→'; */
    
}

.slick-next
{
    right: 5px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -10px;
}
.slick-next:before
{
    /* content: '→'; */
    content: ' '; 
    background-image:url(../pic/arrow-right-semi-thin-64-240.png);
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;
    /* left: -20px; */
    left: 0px;
    z-index: 50;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center!important; /* otherwise out mobile: post-content align left will push them on the left */
}
.slick-dots li
{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 6px;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 30px;
    height: 30px;
    padding: 10px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 18px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 30px;
    height: 30px;

    content: '•';
    text-align: center;

    opacity: .5;
    color: black;
    color: green;
    color: #999;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}


.carousel {
    width: 100%;
    height: auto;
    max-height: 85vh!important;
    margin: 0;
    padding: 0;
    
    /*
    border: 1px solid #202020!important;
    background: lightgreen;

    overflow: hidden;
    max-width:100vw; 
    overflow: hidden;
    */
}
.carousel .slick-prev,
.carousel .slick-next
{
    font-size: 1px!important; /* To hide labels: Previous & Next */
    line-height:1.5em!important;
}

.carousel .slide {
    background: transparent!important; /* Without this it makes a gradient bg */
    padding: 0;
    margin: 0;

    height: auto;
    max-height: 100%;
    overflow: hidden;
    object-fit: contain!important;


    border: 0px solid green!important;
}

.carousel:not(.slick-default-1) .slide {
    padding: 12px 8px;
}

.carousel .slide img {
    /*
    width: auto!important;
    margin: 0 auto;
    height: 100%;
    max-height: 100%;
    border: 1px solid red!important;
    */
}

/* Flex, center TEXT card */
.carousel .slide > div {
    display: flex; 
    align-items: center; 
    justify-content: center;  
    margin: 0;
    width: 100%; 
    aspect-ratio: 2 / 1; 
    /* 
    aspect-ratio: 16 / 9;
    aspect-ratio: inherit; 
    */
    border: 0px solid red!important;
}


@media only screen and (max-width: 600px) {
    .slick-prev,
    .slick-next,
    .slick-prev:before,
    .slick-next:before
    {
        width: 40px;
        height: 40px;
        font-size: 40px;
    }

    .slick-next
    {
        /* right: 35px; */
    }
    
    .carousel .slide {
        padding: 0;
    }

    /*
    .slick-dots li
    {
        width: 30px; 
        height: 12px;
        margin: 4px 2px;
    }
    */
    .carousel .slide > div {
        aspect-ratio: 1 / 1;  /* MAke it Square by default on Mobile */
    }

}

/*
.carousel-base .slick-prev,
.carousel-base .slick-next
{
    color: #f78357;
}

.carousel-base .slick-prev:focus:before,
.carousel-base .slick-next:focus:before,
.carousel-base .slick-prev:hover:before,
.carousel-base .slick-next:hover:before
{
    background-color: #f78357;
    opacity: 1;
}

.carousel-base .slick-dots li button:before
{
    opacity: .75;
    color: black;
}
.carousel-base .slick-dots li.slick-active button:before
{
    opacity: 1;
    color:#f78357;  
}
*/
/* end: carousel-screenshots */


/* ENd Carousel */


/* --- COCOEN Before-After img container */
.cocoen-container {
	--outlinewidth: 1px;

    position: relative; 
	margin: var(--outlinewidth) auto 0 auto; /* add 1px for outline size */ 
	text-align: center; 
	outline: var(--outlinewidth) solid #202020; 
	overflow: hidden; 
	width: 1920px; 
	max-width: 100%; 	
}

.cocoen-container .cocoen-label-before,
.cocoen-container .cocoen-label-after {
	position: absolute; 
	top: 0; 
	margin-top: 4px; 
	text-align: left;
	font-size: 16px; 
	line-height: 1.05em;
	z-index: 100; 
	padding: 6px 12px;
	/* opacity: 0.5; */
	font-weight: bold;
	overflow: hidden;
	width: 45%;
	outline: 0px solid #202020;
}

.cocoen-container .cocoen-label-after {
	right: 0; 
    text-align: right;
}

.cocoen-container .cocoen-label-btn {
    display: inline-block;
    width: auto; 
    padding: 6px 12px 3px 12px; 
    background:rgba(0, 0, 0, 0.5);
    color: #fff;

}

/* 
Important to keep! 
Otherwise our base-css img max-width:100% makes img-1 resize on cocoen +
height:100% also affects comparing precisely in-line 2 images 
*/
cocoen-component img {
	max-width: none!important;
    height: 100%; 
	/* border: 1px solid red; */
}

/*
cocoen-component::part(drag) {
    background: #202020;
}
cocoen-component::part(drag)::before {
    border-color: #202020;
} 
*/
/* --- End COCOEN Before-After img container */




/* --- ol-list > circles --- 
Usage: 
circles-list circles-list-bgcolor-eee 
circles-list big-circles-list circles-list-hover
circles-list big-circles-list circles-list-hover circles-list-base
circles-list big-circles-list circles-list-hover circles-list-base-light
*/

.circles-list {
    counter-reset: section;
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.circles-list li {
    margin: 0 0 10px 0!important;
    padding: 0;
    line-height: 36px;
}

.circles-list li * {
    display: inline-block;
    text-decoration: none;
    padding: 0;
    margin: 1px 0 0 0;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    outline: 0px solid #ccc;
}

.circles-list li:before {
    content: counter(section);
    counter-increment: section;
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 0 8px 0 0;
    border: 1px solid #ccc;
    border-radius: 100%;
    text-align: center;
    transition: all ease-in 0.3s;
}


.big-circles-list li {
    margin: 0 0 12px 0;
    line-height: 48px;
    font-size: 1.15rem;
}


.big-circles-list li:before {
    width: 48px;
    height: 48px;
    margin: 0 12px 0 0;
}

.circles-list-hover li:hover:before {
    border: 1px solid #999;
    background-color: #ccc;
}

.circles-list-bgcolor-eee li:before {
    border: 1px solid transparent;
    background-color: #eee;
}

@media only screen and (max-width: 1025px){
    /*
    .circles-list {
        padding: 0 0 0 0.5em!important;
    }
    
    .circles-list li {
        margin: 0 8px 12px 0!important;
    }
    */
}

/* --- END ol-list > circles --- */


/* --- YouTube VIDEO Wrapper Container --- */

/* banner-embed-video-tpl-001 */
.video-wrapper, 
.video-wrapper-tpl001 {
	width:100%;
	height: 0;
	position: relative;
	padding-top: 56.25%!important; /* 16:9 */
	outline: 0px solid #ff9900;
	margin:0 auto;
	/* background-color:#ff9900;  */
}

.video-wrapper iframe,
.video-wrapper-tpl001 iframe,
.video-wrapper-yt_main {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	max-height: 1200px; 
	max-width: 1920px;		
	outline: 1px solid #000;
}


/* banner-embed-video top-hero position */

.top-hero-video-container .video-overlay-nav {
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 10; 
	background-image: linear-gradient(to bottom, #000, transparent);
	opacity: 0.75;
	transition: opacity ease-in 0.3s;
	height: 25vh; 
	max-height: 250px; 
	border: 0px solid #ffcc00; 
	/* display:none; */
}

.top-hero-video-container .video-overlay-nav:hover {
	opacity: 1;
	outline: 0px solid #cc0000;
}

.top-hero-video-container .webpage-nav-container:hover  {
	color: #eee!important;
}

.top-hero-video-container .webpage-nav-container:hover .grid-items a {
	color: #eee!important;
}

.top-hero-video-container .shop-nav-top li a {
	color: #ccc;
}

.top-hero-video-container .svg {
	/* fill: #cc6666!important; */
	fill: #ccc!important; 
}

.video-wrapper-top-hero .video-thumb {

}

.video-wrapper-top-hero .video-thumb a {
	border: 0px solid #ccffff;
	
	height: 100px;
	width: 100px;
	z-index: 100;

	top: 100%;
	left: 50%;
	margin-left: -50px;
	margin-top: -120px;
	displayXXX:none!important;
}

.hero-video-thumb .hero-video-thumb {
	position: relative;
}

/* END banner-embed-video top-hero  */


/* banner-embed-video-tpl-003 */
.tpl-banner-embed-video-003 .video-thumb {	
	height: 66vh; 
}

/* media */ 
@media screen and (max-width: 1079px){

	.top-hero-video-container .video-overlay-nav {
		max-height: 150px; 
		border: 0px solid #000; 
	}

}

/* -- END Video wrapper --/



/* curved-boxes */
.curved-boxes {
	border: 0px solid #999;
	align-items: flex-start;
	justify-content: space-between;
	height: auto;
	padding: 0;
	gap: 1%; /* */
}

.curved-boxes div.flex-item {

	flex-grow: 0;
	flex-shrink: 1;

	padding: 0px!important;
	border: 0px solid #ccc;
	
	transition: all 0.3s ease-in;
}

.curved-boxes div.flex-item a {
	width: 100%;
	/* max-width: 90%; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 110px;

	padding: 0.5em;
	margin: 0;
	text-decoration: none!important;

	border: 0px;

	border-radius: 0 10px;

	background-color: #cfcfcf;
	color: #202020;

	-moz-transition: background-color .3s ease-in;
	-o-transition: background-color .3s ease-in;
	-webkit-transition: background-color .3s ease-in;
	transition: background-color .3s ease-in;
}

.curved-boxes div.flex-item img {
	margin: 0 0 12px 0;
	height: 42px;
}

.curved-boxes > div span {
/* height: 30%; */
}

.curved-boxes div.flex-item a:hover {
	background-color: #909090;
	color: #fff;
	/* background-color: #efefef; */
	text-decoration: none;
}

.curved-boxes div.flex-item a:hover img.hover-invert,
.curved-boxes div.flex-item a.active img.hover-invert  {
	filter:invert(80%);
}

/* -- tpl colors -- */
.curved-boxes-base-light div.flex-item a {
	background-color: var(--base-light);
	color: var(--base-light-text);
}
.curved-boxes-base-light div.flex-item a:hover,
.curved-boxes-base-light div.flex-item a.active {
	background-color: var(--base);
	color: var(--base-text);
}

/*
.curved-boxes-base div.flex-item a {
	background-color: var(--base);
	color: var(--base-text);
}
.curved-boxes-base div.flex-item a:hover {
	border-color: var(--base-dark);
	background-color: var(--base-dark);
	color: var(--base-dark-text);
}
.curved-boxes-base div.flex-item a.active {
	border-color: var(--accent);
	background-color: var(--accent);
	color: var(--accent-text);
}
*/
/* END curved-boxes */


/* img-animate-from-thumbs */
.placeholder-img-animate {
    background-color: #f6f6f6;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    height: auto;
    overflow: hidden; /* */
}  

.placeholder-img-animate img {
    position: absolute;  
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: auto;
    transition: opacity 1.25s linear;
}

.placeholder-img-animate img.sizer {
    position: relative;  
    outline: 3px solid #000;
    opacity: 0.7;
}

.placeholder-img-animate img.loaded {
    opacity: 1;
}

.placeholder-img-animate .img-small {
    filter: blur(50px);
}
/* end img-animate-from-thumbs */