/* Quick.Cms.Ext v6.x slider stylesheet */
/* Quick.Slider */

/* GLOBAL */
.quick-slider{position:relative;margin:auto;overflow:hidden;}
.quick-slider ul{padding:0;margin:0;list-style:none;}
.quick-slider-slide{position:absolute;left:0;top:0;width:100%;display:none;text-align:left;overflow:hidden;}
.quick-slider-slide:first-child{display:block;}
.quick-slider-nav-arrows{z-index:5;position:absolute;top:50%;transform:translateY(-50%);float:right;display:block;min-height:60px;height:100%;margin:0;padding:0px 10px;border:0;background:rgba(0,0,0,0);opacity:.25;transition:all 0.3s ease;}
.quick-slider-nav-arrows:hover{opacity:1;}
.quick-slider-nav-arrows:before{content:"";display:block;position:relative;top:50%;transform:translateY(-50%);width:32px;height:32px;background:url('img/arrows.png') no-repeat 0 0;}
.quick-slider-nav-arrows-prev:before{background-position:0 -32px;}
.quick-slider-nav-arrows-next{right:0;border-top-left-radius:8px;border-bottom-left-radius:8px;}
.quick-slider-nav-arrows-prev{left:0;border-top-right-radius:8px;border-bottom-right-radius:8px;}
.quick-slider-nav-dots-wrapper{position:absolute;bottom:1.5rem;width:100%;list-style:none;text-align:center;}
.quick-slider-nav-dots-wrapper li{display:inline-block;}
.quick-slider-nav-dots{display:inline-block;width:16px;height:16px;margin:0 12px 0 0;background:rgba(0,0,0,0.4);color:transparent;font-size:0.5em;border-radius:50%;}
.quick-slider-nav-dots.active, .quick-slider-nav-dots:hover{background:var(--color-delicate);transition:all 0.3s ease;color:transparent;}
.quick-slider-slide .description a{color:inherit;}
.quick-slider-slide .description a:hover{text-decoration:none;}
div[id^="slider-"] > ul > li{display:none;} /* hide slides (and descriptions) before slider images will be loaded and everything is set */

/* CUSTOM - TOP SLIDER */
#slider-1{position:relative;clear:both;/*display:none;*/height:65vh;overflow:hidden;color:var(--color-delicate);background:var(--color-delicate);} /* height:300px; is default height, so page will not change its height after slider is loaded, so you should change it if your slider has different height */
#slider-1 li.img{line-height:0;}
#slider-1 li.img img{max-width:100%;}
#slider-1 li.img img{width:100%;max-height:65vh;object-fit:cover;}
#slider-1 li.no-img{min-height:65vh;}
.home #slider-1 li.img img{width:100%;height:65vh;max-height:65vh;object-fit:cover;}
#content .quick-slider li a img:hover{opacity:1;}
@media screen and (max-height:400px){
  #slider-1{height:65vh;max-height:65vh;}
}

/* CUSTOM - WIDGET SLIDER */
/* standard slider - images */
.slider .description{z-index:3;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);min-width:250px;padding:1em 3% 1.2em;background:rgba(0, 0, 0, 0.45);background-blend-mode: multiply, normal;line-height:1.25em;color:#fff;text-align:center;border-radius:5px;}
.slider .description > h1, .slider .description > h2, .slider .description > h3{font-size:2rem;color:#fff;line-height:1.5em;margin-bottom:10px;font-weight:700;}
.slider .description > p{font-size:1.125rem;line-height:1.4em;font-weight:400;color:#fff;}
.slider .description a{color:var(--color-delicate);}
.slider .description a:hover{color:var(--color-delicate);}
.widget.type-3 .slider{clear:both;display:none;color:var(--color-delicate);text-align:center;}
.widget.type-3 .slider li{background:transparent;}
.widget.type-3 .slider li.img img{max-width:100%;border-radius:8px;}
.widget.type-3 .slider li.img img{width:100%;max-height:55vh;object-fit:cover;}
.widget.type-3 .slider li.no-img{min-height:300px;}
.widget.type-3 .slider .description{top:50%;left:50%;transform:translate(-50%, -50%);padding:1em 3% 1.2em;}

/* subpages slider */
.pages-slider li{line-height:1.25em;} /* you can also set height here */
.pages-slider .image{float:left;padding-right:1em;}
.pages-slider .description{padding:0.5em 0;}
.pages-slider li.no-img .description{width:100%;}
.pages-slider .quick-slider-nav-arrows{top:20%;}
.pages-slider .quick-slider-nav-dots-wrapper{bottom:0px;text-align:center;}

@media print{
  /* PRINT STYLES */
  #slider-1, .quick-slider img, .quick-slider-nav-arrows, .quick-slider-nav-dots{display:none;}
}

/* PLUGINS */

/* COMMENTS_EXT */
.comments-slider > ul > li{min-height:100px;line-height:1.25rem;}
.comments-slider .quick-slider-nav-dots-wrapper{right:0px;top:0px;width:auto;}

#slider-1.slider .description:before {
  content: "";
  display: block;
  width: 45vw;
  height: 15vh;
  margin: .5rem auto .5rem;
  background: url(img/logo.svg) no-repeat center center;
}

.more{display:block;margin:1rem 0 1rem;}
.more a{margin:1rem auto;padding:.6rem 1rem;background:var(--color-primary);border-radius:5px;color:var(--color-delicate);font-weight:700;}
.more a:hover{background:var(--color-secondary);color:var(--color-delicate);text-decoration:none;}

@media screen and (max-width:640px){
  .slider .description > h1, .slider .description > h2, .slider .description > h3{font-size:1.25rem;}
  .slider .description > p, .slider .description > p, .slider .description > p{font-size:1rem;}
}
@media screen and (max-height:360px){
  .slider .description > h1, .slider .description > h2, .slider .description > h3{font-size:1.25rem;}
  .slider .description > p, .slider .description > p, .slider .description > p{font-size:1rem;}
  #logo{min-width:280px;}
}