/** ten plik jest załączany we wszystkich branchach
za wyjątkiem festiwalowego!
 */

#vodplayer {position: absolute; top: 0; left: 0; width: 100%; height:100%;}
#vodplayer.play { background-color: #000; z-index: 2; }

.infoprawa .cont {white-space: nowrap; display: flex; align-items: center}
.infoprawa .czasi { float: left; margin-top: 0px;  height: 2em;  width: auto;  margin-right: 1.5em; }
.infoprawa .wesj { float: left; margin-top: 0px;  height: 1.6em;  width: auto;  margin-right: 1em;  }
.infoprawa .term { display: inline-block; color: #fff; max-width: 6em; white-space: normal; }
.infoprawa .term * {color: #fff; }



span.pakietico {
  display: inline-block; background-image: url(../nn/vod/../img/vod/pakiet.svg);
  width: 1em; height: 1em; background-size: contain; background-position: center center;
}
span.freeico {
  display: inline-block; background-image: url(../nn/vod/../img/free3.svg);
  width: 1em; height: 1em; background-size: contain; background-position: center center;
}


span.pakietico.black-light {
  background-image: url(../nn/vod/../img/vod/pakietc_light.svg);
}

.opis .linkzewkafel {display: flex; margin: 1em 0;}
.opis A.linkzewkafel {text-decoration: none }


.glownybutton {
  margin: auto; position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15em;
  height: 13em;
  padding: 0.5em;
  box-sizing: border-box;
  z-index: 1;
  text-align: center;
}

span.karnetico {
  display: inline-block; background-image: url(../nn/vod/../img/vod/karnetc.svg);
  width: 0.6em; height: 0.8em; background-size: contain; margin-bottom: -0.10em;  margin-right: 0.4em;
}
span.koszykico {
  display: inline-block; background-image: url(../nn/vod/../img/koszykbialy.svg);
  width: 1em; height: 0.8em; background-size: contain; margin-bottom: -0.05em;  margin-right: 0.6em;
}
span.pakieticoc {
  display: inline-block; background-image: url(../nn/vod/../img/vod/pakietc.svg);
  width: 1em; height: 0.8em; background-size: contain; margin-bottom: -0.15em;  margin-right: 0.55em;
}


span.pakietico.c37 {font-size: 90%; background-image: url(../nn/vod/../img/vod/pakiet37.svg);  margin-bottom: -0.2em; margin-left: 0.1em   }

span.ico {display: inline-block; width: 1em; height: 1em; background-size: 100% auto; background-position: center center;}
span.ico.watch {background-image: url(../nn/vod/../img/vod/oko.svg);   }
span.ico.dostep {background-image: url(../nn/vod/../img/vod/dostep.svg);   }
body.nhfest span.ico.dostep {background-image: url(../nn/vod/../img/vod/onlineicon.svg);   }
span.ico.cancel {background-image: url(../nn/vod/../img/krzyzyk.svg) ; transition: transform 0.2s;  }
.film-indeks-boks .czolow .dodt .ico.cancel {background-size: 1em auto; width: 1em; height: 1em; margin-right: 1em}

.biletpopupkontent { padding: 1.5em 3em; min-width: 15em; max-width: 18em; margin-left: auto; margin-right: auto;}

.biletpopup .przycisk.zramka {color: #000; border: 2px solid #000;}
.biletpopup .przycisk.zramka:hover {color: #333; border-color: #333}

.glownybutton.zaloguj, .glownybutton.play, .glownybutton.kup {
  cursor: pointer;
}
.glownybutton .ico {
   display: inline-block;
   width: 7em; height: 7em;
   border-radius: 50%;
   border: 0.2em solid #fff;
   background-color: transparent;
   background-image: url(../nn/vod/../img/vod/play_trojkat.svg);
   background-size: 30% auto;
   background-position: center center;
   
   transition:  transform 0.2s; 
}
.glownybutton.play-later .ico {
   background-image: url(../nn/vod/../img/vod/play-later_trojkat.svg);
} 

.glownybutton.kup .ico {
   background-size: 26% auto;
  background-image: url(../nn/vod/../img/vod/buykosz.svg);  
  background-color: #fff; border-radius: 50%;
}
.glownybutton.play .play-action:hover .ico, .glownybutton.kup .play-action:hover  .ico {
   transform: translateZ(0) scale(1.05); 
}
.glownybutton .podp {
  margin-top:0.5em;
  display: block; text-align: center; color: #fff  
}
.glownybutton .podp.f5 {margin-top: 0.3em}

.glownybutton .podp + .podp {margin-top: 0.1em}
.glownybutton .podp.eptyt + .podp {margin-top: 0.4em}


.glownybutton .podp.zcena { }

.vod-box:not(.fotosa) .play {top: 46% }

.glownybutton .podp.wpakie  {display: flex; align-items: center; justify-content: center; margin-top: 0.5em }
.glownybutton .podp.wpakie .dostwp {font-size: 0.65em; margin-left: 0.6em}
.glownybutton .podp.wpakie .pakietico { font-size: 90%}

.glownybutton .podp.dostepny-od  {font-size: 0.65em; margin-top: 0.5em}

.shaka-play-button {padding: 5.5%}



.shaka-controls-button-panel .ustawienia-button { background-color: #fff;  color: #000;    padding: 0.4em 0.8em; margin-bottom: 0.6em;   margin-right: 1em; border-radius: 4px;  }
.wersja { content: "";}
.wersjamob {display: none}

#vodplayer:not([manifest-typ="main"]) .shaka-controls-container .glosujb {display: none !important;}


.shaka-controls-container .glosujb {font-size: 85%;  transition: opacity cubic-bezier(.4,0,.6,1) .6s; opacity: 0; position: absolute; top: 6%; left: 2%; z-index:5 ; background-color: transparent; cursor: pointer;}
.shaka-controls-container .glosujb * {font-family: 'PFHandbookProMedium', Arial, sans-serif !important;  } 
.shaka-controls-container .glosujb:hover {filter: none !important;}

.shaka-controls-container[shown=true] .glosujb, .shaka-controls-container[credits=true] .glosujb { opacity: 1}

#vodplayer .errord {
 padding: 2em; color: #fff; text-align: center; font-size: 1.7em;
}
#vodplayer .errord.sm { font-size :1.2em}

#vodplayer .errord a {
 color: #bbb;
}

#vodplayer .errord a:hover {
 color: #fff;
}

#vodplayer .upnext {
  position: absolute;
  bottom: 15%;
  right: 0px;
  padding-right: 0px;
  padding-left: 5%;
  transform: translateX(100%);
  transition: transform 0.5s;
}

#vodplayer .upnext .kf {display: flex; margin: 0.6em 0;}
#vodplayer .upnext .uil {display: block; overflow: hidden;    width: 9em;   }
#vodplayer .upnext .uil img {transition: transform .3s ease-in-out; display: block; object-fit: cover; width: 100%; height: 100%; opacity: 0.85} 
#vodplayer .upnext .udesc {font-size: 0.85em; display: block; background-color: #fff; box-sizing: border-box; 
padding: 0.8em 2em 1em 2em; width: calc(100% - 9em); color: #373737; max-width: 22em; min-width: 12em;
background-color: rgba(64,64,64,0.65);}
#vodplayer .upnext  .ulab, #vodplayer .upnext  .czas  {display: block;color: #fff }
#vodplayer .upnext .utyt {display: block;padding: 0.7em 0px;  }

#vodplayer .upnext .kf:hover .uil img {transform:scale(1.05)}
#vodplayer .upnext .us  {font-family: 'Roboto', Arial, sans-serif !important; color: #fff; font-size: 0.74em; letter-spacing: 0.08em;  }
#vodplayer .upnext .f5  {font-family: 'PFHandbookProMedium', Arial, sans-serif !important; color: #fff; }

#vodplayer .upnext.show { transform: translateX(0px); }
.shaka-controls-container {overflow: hidden; }

.text-tag {display: inline-flex; border: 1pt solid #fff; padding: 0px 0.7em 0px 0.7em; height: 1.9em;  line-height: normal;  font-size: 0.6em; letter-spacing: 0.08em;  align-items: center; align-content: center;     cursor: default }

.news-box.big-box .text-tags { position: absolute; left: calc(8% - 0.2em); top: calc(9% - 0.4em); display: inline-flex; gap: 0.8em; flex-wrap: nowrap; justify-content: flex-start;align-items: center;  }
.news-box.big-box .text-tag {color: #fff; border-width: 1px;  height: 2.4em; padding: 0px 0.7em 0px 0.7em; font-size: 0.6em;  }
.news-box.big-box .text-tag + .text-tag { margin-left: 0.2em }


.news-box.big-box .pak {display: inline-block; top: calc(9% - 0.2em); right: calc(8% - 0px); position: absolute; z-index: 12;}
.news-box.big-box .pak span {font-size: 1.2em}

.gwiazdkai {
  transition: transform 0.2s;
  width: 1em; height: 1em;  background-size: contain; background-position: center center;
  display: inline-block;
  background-color: transparent; cursor: pointer;
}
.gwiazdkai[data-ust='nie'] { background-image: url(../nn/vod/../img/vod/gwiazdkav.svg);}
.gwiazdkai[data-ust='tak'] {background-image: url(../nn/vod/../img/vod/gwiazdka_pel.svg); }
.gwiazdkai:hover {transform: rotate(72deg);}
.news-box.big-box .pak + .pak {  right: calc(8%  + 2em);}
.news-box.big-box .pak + .pak + .pak {  right: calc(8%  + 4em);}

.gwiazdkai.black[data-ust='nie'] { background-image: url(../nn/vod/../img/vod/gwiazdkab.svg);}
.gwiazdkai.black[data-ust='tak'] {background-image: url(../nn/vod/../img/vod/gwiazdkab_pel.svg); }


@media screen and (max-width: 1100px){
  #vodplayer .upnext .kf {font-size: 0.9}
}
@media screen and (max-width: 600px){
  #vodplayer .upnext .uil {width: 6em}
  #vodplayer .upnext .udesc { width: calc(100% - 6em)}
  #vodplayer .upnext  .czas {display: none}
  #vodplayer .upnext .utyt {padding-bottom: 0.2em; 
     display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;}
}
@media screen and (max-width: 500px) {
  #vodplayer .upnext .kf {font-size: 0.8} 
}

.vod-film .related {padding-top: 2em; padding-bottom: 2em;}

.opis .related .tresc { padding-bottom: 0px;}

.opis .related h4 {margin-top: 0px; padding-top: 0px; padding-bottom: 0.8em} 
 


/** -------------------------------------------------------------------- */
/** vod oglądaj od, do */
.avail-tag {background-color: var(--availability-tlo1); display: inline-flex; border-radius: 1.3em;  color: var(--availability-tekst); 
  font-size: 0.9em; padding: 0.8em 1.5em; line-height: normal; font-weight: bold; align-items: baseline; }
.avail-tag.dost, .avail-tag.dost-do {background-color: var(--availability-tlo2); }
  
  
.infos .avail-tag, .bginfo .avail-tag {  color: var(--availability-tekst);  }
.tagi .avail-tag {height: auto;  padding: 0.3em 1.3em; font-size: 0.85em } 

.avail-tag.sm { padding: 0.3em 1em; font-size: 0.8em }  


@media screen and (max-width: 700px){
  .infos .avail-tag, .bginfo .avail-tag {  padding: 0.3em 1em; font-size: 0.8em  }
  .avail-tag .desk {display: none} 
}
@media screen and (min-width: 700.00001px){
  .avail-tag .mob {display: none}
}


/** -------------------------------------------------------------------- */



@media screen and (max-width: 1400px){
  .glownybutton .ico {width: 5em; height:5em;}
}

@media screen and (max-width: 1180px){
  

  .glownybutton.kup .ico { background-size: 35% auto}

}

@media (max-width: 550px) {
 
  .biletpopupkontent {padding-left: 0px; padding-right: 0px}
  
  .vod-film .related {padding-top:1em; padding-bottom: 1em;}
  .kafel-zplay .linkil:after { opacity: 1;  background-size: 2em 2em; } 
}


/** ---------------------------------------------------- */
/** ------------------ INDEKS -------------------------- */



/** vod indeks */
.marg-indeks {padding-left: 10%; padding-top: 5%}
@media (max-width: 800px) {
 .marg-indeks {padding-left: 0px}
}
.vod-indeks .nice-select, .vod-indeks .szukajinput {border: 2px solid #000; background-color: transparent;}
.vod-indeks .szukajinput + button {background-color: #eee;}

.vod-indeks .szc {margin-right: 1em}
.vod-indeks .szukaj .lupa {background-size: 1.45em auto;  width: 1.45em; height: 1.45em;}
.vod-indeks .szukaj  .szukajinput {padding-right: 2.7em}
.vod-indeks .szukaj .nice-select.szc, .vod-indeks .szukaj .nice-select.szc .list,  .vod-indeks .szukajinput,.vod-indeks .szukaj-cont  {width: 17em; min-width: 17em}

.vod-indeks input:-webkit-autofill, .vod-indeks input:-webkit-autofill:hover, .vod-indeks input:-webkit-autofill:focus, .vod-indeks input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0px 1000px #eee inset;}


.vod-indeks .marginesy {padding-top: 2.5em}
.vod-indeks .nice-select {height: auto}
.vod-indeks .szukaj {display: flex; align-items: stretch;}
.vod-indeks .szukaj-cont {position: relative;}
.vod-indeks .szukaj-cont .szukajinput {height: 100%}
.vod-indeks .rec-count {padding: 2em 0px 2em 0px;}
.vod-indeks .szukaj .list li[data-value="k"] { xborder-top: 1px solid #000 }
.vod-indeks .szukaj .list li[data-value="g"] { margin-bottom: 1em; position: relative; }
.vod-indeks .szukaj .list li[data-value="g"]:after {
  content: " "; display: block; position: absolute; bottom: -0.4em; left: 0px; width: 100%;  border-bottom: 1px solid #000;
}
.vod-indeks .szukaj .gwiazd { display: inline-block; background-image: url(../nn/vod/../img/vod/gwiazdkab.svg); width: 1em; height: 1em; background-size: contain; margin-left: 0.4em; margin-bottom: -0.2em}

.film-indeks-boks {display: flex; margin-top: 2%; margin-bottom: calc(1em + 5%)}
.film-indeks-boks .il {margin-right: min(10%, 4em); overflow: hidden; }
.film-indeks-boks .il-img {transition: transform 0.2s;  display: inline-block; background-position: center; background-size: cover;}
.film-indeks-boks .il, .film-indeks-boks .il-img {width: 8.7em; height: 5.85em; min-width: 8.7em  } 
.film-indeks-boks:hover .il-img {transform:  translateZ(0)  scale(1.04)}
.film-indeks-boks .czolow { margin-top: 1.5em}
.film-indeks-boks .czolow .r {display: block; padding: 0.1em 0px; color: #000}

.film-indeks-boks .czolow .dodt {display: flex; padding: 1.3em 0px 0.1em 0px; color: #000; align-items: center; }
.film-indeks-boks .czolow .dodt + .dodt {padding-top:0.4em}
.film-indeks-boks .czolow .dodt .ico {width: 2em; background-position: left center; background-size: 1.2em auto; height: 1.5em }
.film-indeks-boks .czolow .dodt.anuluj { cursor:pointer;  }
.film-indeks-boks .czolow .dodt.anuluj:hover .ico.cancel { transform: rotate(45deg); xtransform-origin: 0.5em 50%;  }


.film-indeks-boks .czolow .avail-tag  { margin-top:0.7em}


.film-indeks-boks .text-tag {border-color: #121212; padding: 0px 0.9em 0px 0.9em; height: 2.15em; border-width: 1pt; color: #121212; font-size: 0.5em ;margin-left: 0.7rem; }
.film-indeks-boks .pakietico {margin-left: 0.7rem; font-size: 1.33em; }
.film-indeks-boks .pakietico.empt {margin-left: 0px; width: 0.5px; background: none;}
.film-indeks-boks .gwiazdkai {margin-left: 0.7rem; font-size: 1.3em;  }
.film-indeks-boks .ty {margin-right: 0.3em}
.film-indeks-boks .ty-ikony {display: inline-flex;  align-items: center; transform: translateY(0.23em)}
.film-indeks-boks .op {max-width: 27em}
.nhvod:not(.kdvod) .film-indeks-boks .grupawiek.text-tag, .nhvod:not(.kdvod) .film-indeks-boks .limit.text-tag  {display: none}

@media (max-width: 600px) {
  .vod-indeks .marginesy {padding-top: 1.5em}
 .film-indeks-boks .il {font-size: 80%}
 .film-indeks-boks .il {margin-right: 2.5em }
 .film-indeks-boks .czolow {margin-top: 0.5em }
 .vod-indeks .szukaj {flex-direction: column; align-items: flex-start;}
 .vod-indeks .szc {margin-right: 0px;}
 .vod-indeks .szukaj-cont {height: 3.42em;margin-top: 0.8em }
 .vod-indeks .szukaj-cont, .vod-indeks .nice-select {height :3.7em}
 .vod-indeks .nice-select {line-height: 3.7em}
 .vod-indeks .szukaj  .szukajinput {padding-right: 3em}
 .film-indeks-boks .czolow .r {padding: 0.07em 0px; line-height: 1.4 }
 .vod-indeks .szukaj .nice-select.szc, .vod-indeks .szukaj .nice-select.szc .list,  .vod-indeks .szukajinput , .vod-indeks .szukaj-cont  {width: 100%; max-width: 25em}
 .film-indeks-boks .czolow .dodt {padding-top: 0.6em}
 .film-indeks-boks .czolow .dodt + .dodt {padding-top:0.2em}
}
@media (max-width: 420px) {
 .film-indeks-boks .il {font-size: 60%}
}

/** ten plik jest załączany we wszystkich branchach
za wyjątkiem festiwalowego, bo styles.css
 */
html {
   --przyciski-koszyka: #121212;
   --przyciski-koszyka-hover: #444;
  --field-radius: 0.3em;
  --round-button-radius: var(--field-radius);
  --round-button-radius-with-arrow: var(--field-radius);
  --round-button-on-bar: var(--field-radius);
}
.submobile > a, nav.mobile > a {
  margin: 0.1em 0px;
  padding: 0.6em 0px;
  xfont-size: 1.3em
}

nav.mobile .soc a.nhvod {margin-top: 1em}
nav.mobile .soc a.kdvod {width: auto; order: 5; margin-top: 1.5em }


.ilustracja.full.zopisem, .ilustracja.zopisem {background-color: #000}

header .zalogowany .punkty.onsite {display: none}
header .zalogowany .punkty.vod {padding-left: 0.7em}
.profiluz .wi.maszkarnet.onsite {display: none}

.logosponsora, nav.mobile .mloga.logosponsora {display: none}

nav.desk {margin-left:0px}
.marginesy_jakheader {padding-left: 5%; padding-right: 5% }
.marginesy_fotosfilmu {padding-left: 5%; padding-right: 5%; margin-left: auto; box-sizing: content-box;  margin-right: auto;  max-width: 1500px }
@media screen and (min-width:1970px){
  .xmarginesy_fotosfilmu { max-width: 1500px }  
}

@media screen and (min-width:1670px){
  body:not(.kasjer) .marginesy_jakheader {padding-left: calc(50% - 750px); padding-right: calc(50% - 750px) }
  
}
@media screen and (min-width:2070px){
  body.kasjer .marginesy_jakheader {padding-left: calc(50% - 750px); padding-right: calc(50% - 750px) }
}




.czol { padding-top: 1em; padding-bottom: 0.2em}
.czol .nag {font-size: 0.85em; line-height: 1.4em;}

.vod-film .ilustracja .caption h1 {max-width: 37%; max-width: calc(50% - 10rem);}
.vod-film .ilustracja .caption .tekst {  max-width: calc(50% - 8rem);}

.czol_i_info {display: flex; flex-wrap: nowrap;justify-content: space-between; }
.czol_i_info .infoprawa {align-self: flex-end; white-space: nowrap;}

.cykle-kafle {margin-top: 2em; display: flex; align-items: stretch; align-content: stretch;}
.cykle-kafle A {padding: 0.1em 1em 0px 1em;  display: inline-flex;  text-align: center;  align-items: center;  line-height: 1em;  height: 2em; }
.tagi {margin-bottom: 8em; margin-bottom: min(8em,11vh); margin-top: 4em; margin-top: max(2.5em, min(4em,4vw)); display: flex; align-content: flex-start;}
.cykle-kafle .text-tag {height: auto; margin-left: 1em; padding-left: 0.7em; padding-right: 0.7em; font-size: 0.86em;} 


.czol_i_info .infoprawa .cl {display: inline-block;}
.czol_i_info .infoprawa .cl.ps1 {margin-right: 5em;} 

.vod-film .ilustracja.zopisem .caption {padding-bottom: max(2.8em, min(5em,6vw));}
.cykle-kafle A {color: #000}

.cykle-list { margin-top: 1.3em; display: flex; align-items: stretch; align-content: stretch; column-gap: 0.6em; row-gap: 0.4em; flex-wrap: wrap; }
.cykle-list .ck {border: 1px solid #fff; border-radius: 1.3em;  color: #fff;
  font-size: 0.85em; padding: 0.6em 1.3em; line-height: normal; display: inline-flex; flex-wrap: nowrap; white-space: nowrap ;}
  


/** -------------------------------------------------------------------- */

/** vod branch */

.infos { position: relative;  padding-top: min(15em, 22vh);   padding-bottom: min(5em,10vh); display: flex; justify-content: space-between; align-items: flex-end;}
.infos * {color: #fff; }
.infos .branchinfo {max-width: 25em }
.infos .branchinfo .tekst p {line-height: 1.4}
.infos .branchinfo .tekst {padding-bottom: 1em}
.infos .bginfo {max-width: 16em}

.infos .bginfo .pd { display : block; font-size: 0.8em; margin-bottom: 1em }
.infos .bginfo .morelink { display: block}
.infos .bginfo:hover .morelink { background-position: 0 center;  padding-left: 4.1em; }

.vod-branch.kaflesekcje .big-box .caption {height: 82%;}
.vod-branch .big-box .caption .h {padding: 0px 0.2em; color:var(--prawieczarny);    display: inline;}



.vod-branch .big-box .caption .h.over {color:var(--prawieczarny);  box-shadow: 0 0 0 0.2em transparent;  background-color: transparent; position: static; top: auto; left: auto;}

.vod-branch .big-box .caption.ukr-kol .h.over { color:var(--kolor-ukr-tekst) }
.vod-branch .big-box .caption.ukr-kol .h.back { background-color: var( --kolor-ukr-tlo );  box-shadow: 0 0 0 0.2em var(--kolor-ukr-tlo);  color: var( --kolor-ukr-tlo); }
    
.vod-branch.kaflesekcje { text-align:left; padding-top: 2em; padding-bottom: 4em }
.vod-branch.kaflesekcje h4 {padding-top: 2em; padding-bottom: 0.6em; margin-left: 1%}
.vod-branch.wyroznione.kaflesekcje h4, .vod-branch.wyroznione.kaflesekcje h4 a {color: #fff}
.vod-branch.kaflesekcje h4 a {display: inline;  position: relative; text-decoration: none }

.vod-branch.kaflesekcje h4 a:before {
  content: ""; position: absolute; width: 100%; height: 1pt; bottom: 1pt; left: 0; background-color: var(--header-color); 
  transition: transform 0.2s;  }
.vod-branch.kaflesekcje h4 a:hover:before {transform: translateY(0.1em); }
.vod-branch.wyroznione.kaflesekcje h4 a:before { background-color: #fff} 


.vod-branch.kaflesekcje h4:first-child {padding-top: 1em }

@media screen and (max-width: 1000px){
.infos {padding-top: 2.5em; flex-direction: column-reverse; align-items: flex-start; }
.infos .branchinfo {padding-top: 10em}
.infos .branchinfo .tekst {padding-bottom: 0px}
  
}
@media screen and (max-width: 700px){
  .infos .branchinfo {padding-top: 6em}

  }

@media screen and (max-width: 700px){
  .infos { padding-bottom: 2.5em; }
}
@media screen and (max-width: 450px) {
  .vod-branch.kaflesekcje {text-align: center}
  .vod-branch.kaflesekcje h4 {text-align: left;}
}
/** -------------------------------------------------------------------- */

.opis.vod-film {display: flex; flex-direction: column;}


.vod-film > div {order: 5 }
.vod-film .ilustracja {order: 0 }
.vod-film .seansecont {order: 1 }
.vod-film .related {order: 2 }
.vod-film.ha .seansecont {order:3 }
/** nie wiem po co to ?  .vod-film.nha .related {padding-bottom: 0}  */



.kafel-zplay .linkil, .kafel-zplay .uil {position: relative}
.kafel-zplay .linkil:after,  .kafel-zplay .uil:after {
  display: block; opacity: 0; content: "";
  position: absolute; top: 0px; left:0px; 
  width: 100%;
  height: 100%;
  background-image: url(../nn/vod/../img/vod/play.svg);
  background-size: 3em 3em; background-position: center center;
  transition: opacity 0.2s;
}
.kafel-zplay:hover .linkil:after, .kafel-zplay:hover .uil:after { opacity: 1; } 

@media screen and (max-width: 1200px){
  .czol_i_info .infoprawa .cl.ps1 {margin-right: 2.5em}
  
}

@media screen and (max-width: 1180px){
  
  .czol_i_info .infoprawa .sprzedaz {display: none}
  
  .czol_i_info .infoprawa {min-height: 2.2em; display: flex; align-items: center}
  
  .tagi {margin-bottom: 4em; }
    
  .vod-film .ilustracja .caption h1, .vod-film .ilustracja .caption .tekst    {max-width: 600px}
  .vod-film .ilustracja.zopisem .caption {padding-top:1em; xpadding-bottom: 3em}
  
  .czol .nag {font-size: 1em}
  .glownybutton {position: relative; transform: none; left: 0; right: 0;  top: 0; width: auto; margin: 0; text-align: left; height: auto; padding-left: 5% }
  .glownybutton {position: absolute; margin-top: 4%; width: 12em}
  .symbole-left-visible .glownybutton { margin-top: calc(4% + 3em); }
   
  .glownybutton .ico { width: 3.4em; height:3.4em; border-width: 0.15em; }
  .glownybutton .podp {text-align: left;}
  .glownybutton .podp.wpakie { justify-content: flex-start;}
  
  /** uwaga, symbole z lewego górnego rogu też muszą zejść niżej */
  
  
}
@media (max-width: 550px) {
 
  
  
  .czol_i_info {flex-direction: column;}
  .czol_i_info .infoprawa  {display: none}
  .czol_i_info .wersjamob {display: inline}
  .czol_i_info .infoprawa { align-self: flex-start; margin-top: 2em; margin-bottom: 0px}
  .tagi {margin-bottom: 3em; margin-top: 2.5em}

  .czol_i_info .infoprawa {white-space: normal;}
  .czol_i_info .infoprawa .ps2 { margin-top: 1.5em}
  
   
}

@media (max-width: 450px) {
  
.ilustracja  .glownametka span.dodm {visibility: hidden}
} 



/** ------------------------------------------------------ */
/** przeniesione z brancha nh */


.vod-film .tagi {display: flex; justify-content: space-between; align-items: flex-start; box-sizing: border-box; width: 100%; margin-bottom: 0px; margin-top: 4%; /** margin-top: max(2.5em, min(4em,4vw)); */}

.vod-film .tagi .symbole {}
.vod-film .tagi .symbole {display: flex; align-items: center; column-gap: 1.5em;  }
.vod-film .tagi .symbole.right { }
.vod-film .tagi .symbole span {height: 1.6em;}
.vod-film .tagi .symbole span.avail-tag {height: auto;}

.vod-film .tagi .symbole .gwiazdkai { width: 1.6em}


.vod-film.opis .ilustracja .grupa-wiekowa-legal {position: static; display: inline-block; }
.vod-film.opis .ilustracja .text-tag {color: #fff; height: 2.3em; margin-left: 0.3em;  padding-left: 1em; padding-right: 1em }
.vod-film.opis .ilustracja .text-tag + .text-tag { margin-left: 0.2em;}
.vod-film.opis .ilustracja .symbole span.pakietico { width: 1.6em }
.vod-film.opis .ilustracja .symbole span.freeico { width: 1.6em }

.vod-film .info-dodatkowe.desk {position: static; align-self: flex-end;}
.vod-film .info-dodatkowe.desk .infod + .infod { margin-left: 2em}
.vod-film .info-dodatkowe.mobile {padding-top:0px; padding-bottom: 0px; }
.vod-film .info-dodatkowe.mobile .dod-wiersz {border-bottom: 1px solid #000; padding-top: 1.5em; padding-bottom: 1.5em}

.infod.objerzyjzwiast {background-size: auto 1.3em; padding-left: 2.5em}

.vod-film .ilustracja.zopisem { height: 39vw; min-height: 36em}
.vod-film .ilustracja.zopisem.wyzsze { height: 40vw; min-height: 40em}
@media (min-width: 1900px) {
   .vod-film .ilustracja.zopisem.wyzsze {min-height: 39em}
}
@media (max-width: 600px) {
  .vod-film .ilustracja.zopisem.wyzsze {min-height: 37em}
}


@media (max-width: 1980px) {
 .vod-film .ilustracja.wyzsze .swiper-button-prev, .vod-film .ilustracja.wyzsze .swiper-button-next {top: 45%}
 .vod-film.opis .fotosy .swiper-button-next, .vod-film.opis .fotosy .swiper-button-prev  {font-size: 80%}
}

.vod-film .ilustracja .overlay {position: absolute; top: 0px; left: 0px; height: 100%}

.vod-film .ilustracja .overlay {display: flex; flex-direction: column; justify-content: space-between; }
.vod-film .ilustracja.zopisem .caption {padding-top: 0px; padding-bottom: 0px; width: 100%;box-sizing: border-box; padding-bottom: 4.5%; }

.vod-film.opis .fotos {width: 100%; max-width: none}
.vod-film .ilustracja .overlay {z-index: 2; background-color:  rgba(0, 0, 0, 0.33)}
.vod-film.opis .fotos:after {display: none}
.vod-film.opis .swiper-container.fotosy .swiper-wrapper {opacity: 1; height: 100%}


@media (min-width: 1670px) {
  .vod-film .ilustracja.zopisem .caption { box-sizing: content-box;}
  .vod-film .tagi { box-sizing: content-box;}
  
}
@media (max-width: 750px) {
  .czol_i_info .wersjamob {display: inline; }
  .symbole-left-visible .glownybutton { margin-top: 5em}
  .glownybutton {margin-top: 2em}
  .vod-film .ilustracja.zopisem .caption {padding-bottom: 2em}
}


@media (max-width: 750px) {
 .vod-film .tagi {margin-top: 2em;}
}
html {
   --ciemne-tlo: #121212;
  --header-color: #121212;
  --dluga-strzalka: url(../nn/vod/nhv/../../img/arrow_white_rightlong.svg);
  --dluga-strzalka-ciemna: url(../nn/vod/nhv/../../img/arrow_black_rightlong.svg);
  --dluga-strzalka-blue: url(../nn/vod/nhv/../../img/arrow_blue_rightlong.svg);
  --dluga-strzalka-yellow: url(../nn/vod/nhv/../../img/arrow_yellow_rightlong.svg);
  --dluga-strzalka-green: url(../nn/vod/nhv/../../img/arrow_green_rightlong.svg);
  --filled-arrow: url(../nn/vod/nhv/../../img/vod/kd/arr_rt.svg);
  --magenta:  #121212;
  --magentac: #121212;
  --magenta-light: #333;
  --magentah: #1c1c1c;
  --kolor-kd : #FF8554;
  --kolor-kd-darker : #A55636;
  --kolor-kd-lab : #33BD4D;
  --kolor-mh-fest: #33BD4D;
  
  --kolor-ukr-tlo: #FFEC00;
  --kolor-ukr-tekst: #003BFF;
  
  --kolor-nhef: #F3CF47;
  --kolor-nhef-dark: #6461A8;
  
  --availability-tlo1: var(--kolor-nhef-dark);
  --availability-tlo2: var(--kolor-nhef);
  --availability-tekst: #000;
 }
 
body.nhvod:not(.kdvod)  .soc a.nhvod { display: none;}

 
 .big-box .image {opacity: 0.75}

.strzalkaduza { background-image: url(../nn/vod/nhv/../../img/strzalkaduzac.svg); }

.seanspopup .stats {display : none}
.kasjer .ticketlist {padding-bottom: 0px}
.seanspopup .innes {display: none !important}
.seanspopup .innesll  {display: none !important}

.opis .seansecont {display: none}

html[lang=pl] body.nhvod header .nagl  { background-image: url(../nn/vod/nhv/../../img/vod/nhvodz.svg) }

.profiluz .kupione, .profiluz .oznaczone {display: block} 


.fixhedlogo .img {
    background-image: url(../nn/vod/nhv/../../img/vod/nhvodz.svg);
    background-size: auto 1.85em;
    max-height: 2em;
    height: 2em;
    background-position: left center;
    background-position-y: 0.15em;
    width: 10em;
}
.fixhedlogo.is-active .img {opacity: 1}
.fixhedlogo {padding-top: 0.50em;  padding-bottom: 0.50em;} 

/** tego nie jestem pewien - dlaczego usuwamy? */
header.fixed .pasgor {xborder-bottom: none}

.xsoc a {background-position: right 3px}
.xsoc a:hover {background-position: right 0px}
nav.mobile .prz {display: none;}

nav.desk a {padding: 0.8em 1.2em 0.8em 0px; transition: transform 0.2s;  display: inline-block;}
nav a:hover { color: #000   }
nav.desk a { transform: translateY(-0.12em);  }
nav a[href^="ukrain"] { display:none;  background-image: url(../nn/vod/nhv/../../img/vod/ukflag.svg); background-size: 1.2em auto; background-position: right center; padding-right: 1.6em ; padding-left: 0.8em; }

/** --------------------------------------------------------------- */
/** przycisk do młodych horyzotów */

body.nhvod:not(.kdvod) a.kd-menuprz {display: flex; width: auto;  }
body.nhvod:not(.kdvod) .desc.soc { align-items: center; }

a.kd-menuprz { justify-content: center; align-items: stretch; }
 
a.kd-menuprz {background-image: none; background-color: var(--kolor-kd); padding-left: 1em; padding-right: 1.2em; background-position: center; align-items: center;  height: 2.3em  }
a.kd-menuprz {transition: none; line-height: 1em;  }
xa.kd-menuprz img {height: 0.72em; width: auto; transition: transform 0.2s; display: block; margin-top: 1.5px;}

a.kd-menuprz span.nap img {height: 0.74em}
a.kd-menuprz:hover img { transform: none; }
a.kd-menuprz {transform: translateY(-0.4em); }
.desk.soc a.kd-menuprz {margin-left: 1em;margin-right: 0.4em }

.pasgor a.kd-menuprz {float: right; transform: none; margin-right: 0.5em; height: 3em ; }
.pasgor a.kd-menuprz img {margin-top: 0px; margin-bottom: 1px;}

a.kd-menuprz span.napi {margin-left: 0.59em; background-image: url(../nn/vod/nhv/../../img/vod/kd/mh_napis.svg); background-size: auto 0.74em; height: 2em; background-position: right center; width: 6em; }
a.kd-menuprz span.luk {width: 2em; height: 2.3em; position: relative; }
a.kd-menuprz span.luk:before { display: block; position: absolute; content: ""; width: 2em; height: 1em;  background-image: url('../nn/vod/nhv/../../img/vod/kd/mh_luk.svg');background-position: center bottom;   background-size: auto 0.75em;  bottom: 0.78em;  } 
a.kd-menuprz span.luk:after { display: block; position: absolute; content: ""; width: 2em; height: 0.78em; background-color: var(--kolor-kd); bottom: 0; right: 0; }

.pasgor .kd-menuprz + .zalogowany {margin-right: 0px;}

nav.mobile .soc a.kdvod {display: none }


@media screen and (max-width: 840px) {
  body.nhvod:not(.kdvod) .pasgor a.kd-menuprz {  display: none; } 
   body.nhvod:not(.kdvod) nav.mobile .soc a.kdvod {display: flex}
  
}
.rotate-center {     animation: rotate-center 2s ease-in-out infinite both; }
a.kd-menuprz:hover span.luk:before, a.kd-menuprz span.luk:before, .rotate-bottom {
     animation: rotate-bottom 2s ease-in-out infinite both;
}
a.kd-menuprz:hover span.luk:before {  xanimation-iteration-count: 1 ; animation-delay: 50000}

a.kd-menuprz, a.kd-menuprz span.luk:after {transition: background-color 0.2s;}

a.kd-menuprz:hover, a.kd-menuprz:hover span.luk:after {background-color: #ffa682;}

/* ----------------------------------------------
 * Generated by Animista on 2023-6-6 14:6:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-bottom
 * ----------------------------------------
 */
@keyframes rotate-bottom {
  0% {
            transform: rotate(0);
            transform-origin: bottom;
  }
  100% {
            transform: rotate(360deg);
            transform-origin: bottom;
  }
}
@keyframes no-rotate {
  0% {
            transform: rotate(0);
            transform-origin: bottom;
  }
  100% {
            transform: rotate(0);
            transform-origin: bottom;
  }
}


/** koniec przycisku do młodych horyzotów */

.dol .kont {max-width: none;}
nav.desk {padding-bottom: 0px;}

nav.mobile > a {text-align: center; }


nav.mobile a.mg { float: none;}
nav.mobile a.hover_und_anim:after {display: none}

header .zalogowany, header .niezalogowany { padding-top: 1.4em; padding-bottom: 1.4em; height: 3.7em}

@media (min-width: 1000px) {
  header .limit {overflow: visible;}
  xnav.desk {transform: translateX(-1em)  }
}
@media screen and (max-width:840px) {
 
  header .nagl {margin-top: 2.5em}
}

nav.mobile {padding-left: 1em; padding-right: 1em}
nav.mobile a.kd-menuprz {width: 4.5em; margin-left: auto; margin-right: auto;}
nav.mobile .skroty {margin-left: auto; margin-right: auto; width: calc(100% - 2em); display: block}
nav.mobile .soc {float: none; display: flex; justify-content: center;}
nav.mobile .soc a {background-position: center}
@media screen and (max-width: 500px) {
 nav.mobile  {
  padding-left: 1em; padding-right: 1em;
   
 }
}
  
 

/** napisy na głownej ilustracji */ 
.tytinfo {position: relative;  padding-top: 5%;  padding-bottom: 3.5em; display: flex; justify-content: space-between; 
align-items: stretch; 
height: 40vw; max-height: 26em}
  
.tytinfo * {color: #fff}
.tytinfo h1 {font-size: 4em}
.tytinfo h1.mn {font-size: 3.2em}
.tytinfo .credd, .tytinfo .dostwp { font-size: 0.84em }
.tytinfo .credin {display: flex; flex-direction: column; justify-content: space-between; }

.tytinfo .cred .text-tag  {display: inline-flex; margin-left: 0.5em; font-size: 75%}
 
.tytinfo .credd > div { padding-top: 0.5em}
.tytinfo .pak { display: flex; align-items: center; }
.tytinfo .pakietico {font-size:2.1em}
.tytinfo .pak .dostwp {margin-left: 1.3em}
.ogladaj-butn {margin-bottom: 5%; align-self: flex-end;   transition: background-position .2s ease; border: 2px solid #fff; display : flex; flex-wrap: nowrap; padding: 1em 2.1em 1em 2.1em; }
.ogladaj-butn .ostrz {background-image: var(--dluga-strzalka); background-position: -1em center; 
  padding-left: 0px; display: inline-block; overflow: hidden; background-size: auto 0.7em;
  transition: background-position .2s ease; width: 4em; margin-left: 1em;
}
.ogladaj-butn:hover .ostrz {background-position: 0em center; }

.ilustracja .klasafilmu {padding: 0.33em 0.6em 0.23em 0.6em; background-color: #fff; color: #000; display: inline-flex;  margin-bottom: 0px;  align-items: center;  line-height: normal;  }

.tytinfo .klasafilmu + h1 {padding-top: 0.3em}
 

.caption .imp-note  {
    border: 1pt solid #fff;
    padding: 0.5em 0.9em; 
    color: #fff;
    display: inline-flex;
    margin-top: 0.7em;
    align-items: center;
    line-height: normal;    
}

.rozbiegowka .rozbiegowka .ilustracja.full.zopisem, .rozbiegowka .ilustracja.zopisem .overlay { }

@media (min-width: 2000px) {
  .tytinfo {max-height: 30em}
}
@media (min-width: 1200.001px) {
 .tytinfo .cred .wer-wiek {display: flex;flex-direction: column; align-items: flex-start;}
 .tytinfo .cred .text-tag {margin-left: 0px; margin-top: 1em}
}

@media (max-width: 1200px) {
   .tytinfo { flex-direction: column; align-items: flex-start; min-height: 27em; height: auto; }
   .ogladaj-butn { align-self: flex-start; margin-top: 2.5em}
   .tytinfo .pak  {margin-top: 1.5em}
   .tytinfo .pakietico {font-size: 1.5em}
   
   .tytinfo .pak .dostwp {margin-left: 1em; display: none}
   .ogladaj-butn {margin-bottom: 3em}
}


@media (max-width: 1000px) {
 .tytinfo { height: 500px; max-height: none; }  
}
@media (max-width: 700px) {
  .ogladaj-butn {margin-bottom: 0.5em}
}
@media (max-width: 600px) {
  .tytinfo { height: 560px; }
  .tytinfo { xmax-height: 55hw; padding-bottom: 3em; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .tytinfo h1 {font-size: 40px}
  .ogladaj-butn {align-self: flex-start; border-width: 1px; padding: 0.9em 1.6em; margin-top: 3em; }
  .ogladaj-butn:not(.pod) .f4 {font-size: 1.2em}
  .tytinfo .pak {position: absolute; top: 1%; right: 5%; z-index: 12 }
  .tytinfo .pak .dostwp { display: none}
}

.xtooltipster-sidetip.tooltipster-borderless .tooltipster-box, .xtooltipster-sidetip.tooltipster-borderless.tooltipster-top .tooltipster-arrow-border {background-color: #eee; color: #000}
.tooltipster-sidetip.tooltipster-light .tooltipster-content {color: #000}


.news-box .text-tag {display: none}

.wyroznione {background-color: var(--ciemne-tlo)}
.kafle-swiper-wr { position: relative; overflow: visible; }
.kafle-swiper-wr .swiper-button-next {right: -2.5em;}
.kafle-swiper-wr .swiper-button-prev {left: -2.5em}
.kafle-swiper-wr .swiper-button-prev.swiper-button-disabled, .kafle-swiper-wr .swiper-button-next.swiper-button-disabled {opacity: 0}
/** .kafle-swiper-wr .swiper-button-prev.swiper-button-disabled {opacity: 0 }*/

.kafle-swiper-wr .swiper-button-prev, .kafle-swiper-wr .swiper-button-next {xmargin-top: -0.9em; transition: opacity 0.2s;}
 

.wyroznione .h {display: flex; justify-content: space-between;}
.wyroznione .h a {align-self: center;}

.vod-branch .big-box .caption .h.back {background-color: #fff; box-shadow: 0 0 0 0.2em #fff; color: #fff}

@media (max-width: 550px) { 
  .wyroznione .h h4 {margin-left: 0px;}
  .kafle-swiper-wr .swiper-button-next ,  .kafle-swiper-wr .swiper-button-prev {display: none}
  .kaflesekcje .kafle-swiper-wr .news-box.big-box {margin-left: 0px; margin-right: 0px}
  
 .wyroznione .h {flex-direction: column; }
 .wyroznione .h a {align-self: flex-start; margin-bottom: 2em}
 
  .marginesy_jakheader.kaflesekcje:not(.no-swipe) { padding-left: 0px; padding-right:0px}
   .marginesy_jakheader.kaflesekcje:not(.no-swipe) h4 {padding-left: 5%; padding-right: 5%}
  
}

.vod-branch.kaflesekcje {padding-top: 0px; padding-bottom: 1em}
.vod-branch.kaflesekcje.wyroznione {padding-top: 2em; padding-bottom: 4em; xmargin-bottom: 2em} /** nie robię tego margina, bo na mh vod robi się biały pasek */
.vod-branch.kaflesekcje h4, .vod-branch.kaflesekcje h4:first-child {padding-top: 3% } 

.vod-branch .paski-cykli {margin-top: 0px; padding-top: 1em; padding-bottom: 4em} /** nie robię tego margina, bo na mh vod robi się biały pasek */



.vod-film.strona .nawig .milustr:after {padding-top: 100%}
.vod-film.strona .nawig .arrow {background-image: url("../nn/vod/nhv/../../img/arrow_black_rightlong.svg");}

/**
.vod-film.opis .fotos {width: 100%; max-width: none}
.vod-film .ilustracja .overlay {z-index: 2; background-color:  rgba(0, 0, 0, 0.33)}
.vod-film.opis .fotos:after {display: none}
.vod-film.opis .swiper-container.fotosy .swiper-wrapper {opacity: 1; height: 100%}
@media (max-width: 550px) {
 .xnhvod .opis .fotosy .swiper-button-next {right: 5%}
 .xnhvod .opis .fotosy .swiper-button-prev {left: 5%}
}
*/
@media (max-width: 650px) {
 .strona.vod-film .lead.f4 , .strona.vod-film span {line-height: 1.25}
 .nhvod .vod-film.opis h4, .nhvod .vod-film.opis .f4 {font-size: 1.42em }
 
}

/** ==================================== baner  ====================== */

.baner {background-color: var(--ciemne-tlo); color: #fff; margin-top: 2em; margin-bottom: 2em}
.baner-cont { padding-top: 3em; padding-bottom: 3em; display: flex; justify-content: space-between; position: relative; } 
.baner * {color: #fff; }
.baner .op {flex-basis: 30%; }
.baner .op .labl {padding-top: 1em; padding-right: 5%; box-sizing:border-box; }
.baner .baner-il {    
    height: 25em;
    width: 100%;
    flex-basis: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    xpadding-right: 5%;
    box-sizing: border-box;
}
.baner .baner-il .im {
    display: block;
    background-image: url(../nn/vod/nhv/../../img/vod/baner-pakiet-tlo3.jpg);
    position: relative;
    border-radius: 50%;
    background-size: cover;
    background-position: center center;
    width: 23.3em;
    height: 23.3em;
    background-repeat: no-repeat;
    background-color: transparent; /** rgba(0,0,0,.1); */
    background-blend-mode: darken;
}
.baner.aff .baner-il .im {
    background-image: url(../nn/vod/nhv/../../img/vod/baner-aff-tlo.jpg);	
}
.baner .baner-il .im .ka {
   background-position: left bottom;
    display: block;
    background-size: contain;
    background-image: url(../nn/vod/nhv/../../img/vod/pakiet.svg);
    width: 11.7em;
    height: 100%;
    bottom: -.5em;
    left: -3em;
    position: absolute;
    opacity: 1;
}
.baner.aff .baner-il .im .ka {
    background-image: url(../nn/vod/nhv/../../img/vod/aff.svg);
}
.baner .baner-il .im .kreski {
    background-position: right top;
    display: block;
    background-size: contain;
    background-image: url(../nn/vod/nhv/../../img/vod/baner-kreski.svg);
    width: 17.1em;
    height: 100%;
    top: 24%;
    right: -4.5em;
    position: absolute;
    opacity: 1;

 }

.baner .det { flex-basis: 30%; align-self: flex-end; white-space: nowrap;
  padding-bottom: 4%; text-align: center;
}

.baner .det-and-logo {
    flex-basis: 35%; align-self: stretch;   white-space: nowrap;
    text-align: center;  display: flex; flex-direction: column; justify-content: space-between;
    align-items: flex-end;
}

.baner .det-and-logo .labl {white-space: normal; text-align: left; max-width: 28rem;}

.baner:hover .ostrz {background-position: 0em center;}


.baner.mlodefest {background-color: var(--kolor-mh-fest);  }
.baner.mlodefest * {color : var(--header-color)}
.baner.mlodefest .op .labl {padding-top: 5.5em}
.baner.mlodefest .op img {width: auto; height: 6em;  margin-top: 2em}
.baner.mlodefest .baner-il .im { background-image: url(../nn/vod/nhv/../../img/vod/kd/fox500.jpg);  xborder-radius: 0px; }
.baner.mlodefest .ostrz {background-image: var(--dluga-strzalka-ciemna); }
.baner.mlodefest .baner-il .im .kreski{
   background-image: url(../nn/vod/nhv/../../img/vod/kd/mhfestover2.svg);
   background-size: 100% 100%; background-position: center bottom; width: 115%; height: 115%; left: -7%; top: 0px; bottom: -1px;
}

.baner.mlodefest.poznaj .baner-il .im { background-image: url(../nn/vod/nhv/../../img/vod/kd/fest25.jpg);  xborder-radius: 0px; }
.baner.mlodefest.poznaj .baner-il .im .kreski { background-image: url(../nn/vod/nhv/../../img/vod/kd/mhfestover3.svg); }
.baner.mlodefest.poznaj .op img {max-width: 7em; height: auto; margin-top: 0px}
.baner.mlodefest.poznaj .det-and-logo {justify-content: flex-end; gap: 2em; align-items: flex-start; padding-bottom: 1em; padding-left: 1em}
.baner.mlodefest.poznaj .det-link {width: 100%; box-sizing: border-box; max-width: 18em; align-self: flex-start }
.baner.mlodefest.poznaj .op {display: flex; flex-direction: column; gap: 1em; justify-content: space-between; padding-bottom: 1em}

@media (max-width: 1250px) and (min-width: 700.0001px) {
  .baner.mlodefest.poznaj .det-and-logo {
    position: absolute;  left: 5%;  padding-left: 0px;  bottom: 2em;
  }
  .baner.mlodefest.poznaj h1.dl {font-size: 2.5em}
  .baner.mlodefest.poznaj .op img {margin-bottom: 5em; margin-top: 0px}
  .baner.mlodefest.poznaj .det-and-logo .labl {display: none;}
}
@media (max-width: 700px) {
  .baner.mlodefest.poznaj .op {
    flex-direction: column-reverse;
    padding-bottom: 0px
  }
  .baner.mlodefest.poznaj .det-link {max-width: 25em}
  .baner.mlodefest.poznaj .det-and-logo {padding-left: 0px}
}

.baner.kinod {background-color: var(--kolor-kd);  }
.baner.kinod * {color : var(--header-color)}
.baner.kinod .op .labl {padding-top: 3em}
.baner.kinod .op img {width: 8.59em; height: auto; margin-top: 0.8em}
.baner.kinod .baner-il .im { background-image: url(../nn/vod/nhv/../../img/vod/kd/basia2600.jpg);  xborder-radius: 0px; }
.baner.kinod .ostrz {background-image: var(--dluga-strzalka-ciemna); }
.baner.kinod .baner-il .im .kreski{
   background-image: url(../nn/vod/nhv/../../img/vod/kd/baner_cover_or.svg);
   background-size: 50% 50%; background-position: right top; width: 100%; height: 100%; left: auto; right: -1px; top: -1px;  
}


.baner.voucher {background-color: #EFD5EB; overflow: hidden; }
.baner.voucher h1 {font-size: 3.5em}
.baner.voucher .op .labl {padding-top: 4em}
.baner.voucher * {color: #121212; }
.baner.voucher .ostrz {background-image: var(--dluga-strzalka-black); }
.baner.voucher .baner-il .im { background-image: url(../nn/vod/nhv/../../img/vod/voucher_il.jpg);  xorder-radius: 0px; }
.baner.voucher .baner-il .im .kreski {background-image: url(../nn/vod/nhv/../../img/vod/voucher_kreski_univ.svg); background-position: right top; display: block; background-size: contain;
      width: 50em;  height: 100%;   top: 0px;
    left: -10em;    position: absolute;    opacity: 1; right: auto; }
.baner.voucher.swieta .baner-il .im .kreski {background-image: url(../nn/vod/nhv/../../img/vod/voucher_kreski.svg);} 
.baner.voucher.swieta { background-color: #FCC22E;}
.baner.ukrainab {background-color: var(--kolor-ukr-tlo); }
.baner.ukrainab * {color : var(--kolor-ukr-tekst)}
.baner.ukrainab .op .labl {padding-top: 3em}
.baner.ukrainab .op img {width: 8.59em; height: auto; margin-top: 0.8em}
.baner.ukrainab .baner-il .im { background-image: url(../nn/vod/nhv/../../img/vod/baner_ukraina.png); background-size: contain;  border-radius: 0px; background-color: transparent; }
.baner.ukrainab .ostrz {background-image: var(--dluga-strzalka-blue); }

.baner.ukrainab .free { background-image: url(../nn/vod/nhv/../../img/free_blue.svg); background-size: cover; width: 2.8em; height: 2.8em; background-position: left bottom;
position: absolute; bottom: 0px; left:0px; }
.baner.ukrainab .free.mob {display: none}
.baner.ukrainab .op {position: relative; flex-basis: 32%}
.baner.ukrainab .det {white-space: normal; text-align: left; padding-bottom: 2%; flex-basis: 38%}
.baner.ukrainab .baner-il {flex-basis: 42%}
.baner.ukrainab .det .labl { padding-left: 5em; padding-bottom: 5%}
.baner.ukrainab .det .det-link {padding-top: 1em}
.baner.ukrainab .det .det-link span { white-space: nowrap; }
.baner.ukrainab .det .det-link .opl { padding-left: 2em ;white-space: nowrap; }
.baner.ukrainab h1 { font-size: 4em; line-height: 1.05; padding-bottom: 0.15em; padding-top: 0.15em}


@media (max-width: 1400px) {
   .baner .op {flex-basis: 35%}
}

@media (max-width: 1250px) and (min-width : 1150.00001px) {
  .baner.ukrainab .baner-il {padding-left: 3%; padding-right: 4%; }
  .baner.ukrainab .det .det-link .opl {padding-left:0px; display: block;}
}
 
 
@media (max-width: 1250px) {

  .baner .baner-il .im .kreski {right: -2.5em}
  .baner .baner-il {font-size: 0.9em}
  .baner .det {flex-basis:22%}
  
  .baner.mlodefest .op img {width: 100%; height: auto; xmargin-top: 1em}
  
  .baner.mlodefest .op .labl {padding-top: 15%}
  
  .baner.ukrainab .det .labl {padding-left: 0px;}
  .baner.ukrainab h1 {font-size: 3.7em}  
}

@media (max-width: 1150px) {
  .baner.ukrainab  .det {position: absolute; left: 5%; padding-left: 0px; bottom:2em; }
  .baner.ukrainab .det .labl {display: none }
  .baner.ukrainab .free {display: none }
}

@media (max-width: 1000px) {
  
  .baner  .det {position: absolute; left: 5%; padding-left: 0px; bottom: 1em; }
  .baner.voucher  .op .labl {padding-top: 1em}
  .baner .op .labl.robot-text {line-height: 1.4}

}
@media (max-width: 800px) {
  .baner .baner-il .im .kreski {right: -0.4em}
  .baner .baner-il .im .ka  {font-size: 0.8em; bottom: 1em}
  .baner .baner-il .im .kreski {font-size: 0.95em;}
}
@media (max-width: 700px) {

 .baner.mlodefest .op img {max-width: 23em;  margin-top: 0.4em }
 .baner.mlodefest .op .labl {padding-top: 3em}
 
 .baner .baner-cont {flex-direction: column;}
 .baner .det {position: static; align-self: flex-start;}
 .baner .baner-il {width: auto; height: auto; padding-right: 0px; align-self: center; margin-top: 4.5em; margin-bottom: 5.5em}
 
  .baner.ukrainab .det .det-link .opl {padding-left:1em; xdisplay: block;}
  .baner.ukrainab  .det {position: static; align-self: flex-start;}
  .baner.ukrainab .det .labl {display: block; position: static; max-width: 30em }
  .baner.ukrainab .free.mob {display: block; position: absolute; right: 5%; bottom: 5% ; left: auto;}
  
  .baner.voucher h1 { display: block; box-sizing: border-box;  padding-right: 2.5em;
    background-image: url(../nn/vod/nhv/../../img/vod/voucher_ico.svg); background-size: auto 1.8em; background-position: right center;
  }
  
  
  
  .baner.voucher .baner-il .im .kreski {background-image: url(../nn/vod/nhv/../../img/vod/voucher_kreski_univ_mob.svg); height: 135%; top: -3.5em; left: -23em; width: 56em; background-position: center center }
  .baner.voucher.swieta .baner-il .im .kreski {background-image: url(../nn/vod/nhv/../../img/vod/voucher_kreski_mob.svg); }
  
  .baner-cont.marginesy_jakheader {padding-left: 7%; padding-right: 7%;}
}

@media (max-width: 420px) { .baner .baner-il .im .ka {left: 0px;} }

@media (max-width: 400px) {
  /** .baner .baner-il {align-self: flex-start;} */
 .baner .baner-il .im {width: 80vw; height: 80vw}
 .baner .baner-il .im .ka  {font-size: 0.7em; bottom: 1em; left: 0px;}
  .baner .baner-il .im .kreski {font-size: 0.80em;}
    .baner.voucher h1 {font-size: 3em}
}



/** kreski domyślnie */
.tresc ul {list-style-type: none; margin-left: 0px; padding-left: 0px}
.tresc ul li {background-image: url(../nn/vod/nhv/../../img/likreski2.svg); background-size: 1em auto;padding-left: 2.2em;  background-position: 0em 0.8em; background-repeat: no-repeat;}
.tresc ul li A {text-decoration: none}
.tresc ul li A em, .tresc ul li A i {text-decoration: underline; text-decoration-thickness: from-font;}
.tresc ul li A:hover {color: var(--magentah); }
.tresc ul li {transition: transform 0.2s;}
.tresc ul li:hover { transform: translateX(0.2em) }

/** ----------------------------------------------------------- */
/** super cykl */

.opis-cykl {background-color: #fff;  padding-bottom: 2em}
.opis-cykl > div { display: block; max-width: 26em; padding: 2em 5% 0.4em 5%; margin-left: auto; margin-right:auto ; line-height: 1.25em;}

.supers .ilustracja.full.zopisem.supers , .super-section .ilustracja.zopisem.supers  {background-color: #000;}


.ilustracja.supers .over-elems {
    position: relative;
    margin-top: 5%;
    padding-bottom: 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;   
    height: 31vw;
    min-height: 26em;
    max-height: 35em;
    flex-direction: column;
    max-width: 1800px;
    gap: 0px
} 
.baner .ilustracja.supers .over-elems {
   height: 24vw;
   min-height: 24em;
   max-height: 27em;
}



.ilustracja .over-elems .tit {color: #fff;  position: absolute; left: 7%; top: 0px}
.ilustracja .over-elems .tit span, .ilustracja .over-elems .daty-fest span {color: #fff;  display:block;}
.ilustracja .over-elems .tit {font-size: 115%}


.ilustracja .over-elems .dopisek, .ilustracja .over-elems .nazwa-cyklu { padding: 0.9em 3.7em 0.7em 1.8em; }
.ilustracja .over-elems .nazwa-cyklu {padding-top: 1.1em; padding-bottom: 0.9em; }

.ilustracja .over-elems .dopisek:not(.no-play) {
  background-image: url(../nn/vod/nhv/../../img/vod/malyplay.svg); background-position: right 2.3em center;
  background-size: 0.7em auto;
}
 

.ilustracja .over-elems .nazwa-dopisek {display: flex; flex-direction: column; align-items: flex-start;}
.ilustracja .over-elems .nazwa-cyklu h1 {text-transform: uppercase; display: block; line-height: 0.9em; font-size: 2.75em; margin: 0px; padding: 0px; xmax-width: 10em; color:#000}
.ilustracja .over-elems .dopisek h5 {text-transform: uppercase; display: block; line-height: normal;padding: 0px; margin:0px; ; color:#000}
.ilustracja .over-elems .dopisek.black h5 { color: #fff}


.inverted-border-radius {position: relative; background-color: #F45A4B; border-radius: 1em 0 0  0; }
.inverted-border-radius::before { content: "";  position: absolute;  
  background-color: transparent;
  bottom: -2em;
  height: 2em;
  width: 1em;
  left: 0px;
  border-top-left-radius: 1em;
  box-shadow: 0 -1em 0 0 #F45A4B;
}
.inverted-border-radius.green {background-color: #19D69A;  }
.inverted-border-radius.green::before {box-shadow: 0 -1em 0 0 #19D69A; }


.inverted-border-radius.white { background-color: #fff; }
.inverted-border-radius.white::before {  box-shadow: 0 -1em 0 0 #fff;}

.inverted-border-radius.black {background-color: #000;  }
.inverted-border-radius.black::before {box-shadow: 0 -1em 0 0 #000; }


/** mbank */
/** .ilustracja.full.mbank {background-color: #000; background-image: url(../nn/vod/nhv/../../img/vod/mbank_strachd.jpg); background-position: bottom right;}
@media (min-width: 1921px) { */
 .ilustracja.full.mbank { background-image: url(../nn/vod/nhv/../../img/vod/mbank_zdum3.jpg); background-position: left center;
     background-position-x: 30% 
  }
/** } */

.baner.mbank {margin-bottom: 0px;}


.ilustracja.mbank .pasek {
  display: block; content: ""; /** position: absolute; top: 0px; left: 0px; */
  width: 100%; height: 0.63em;
  background-position: left center; background-image: url(../nn/vod/nhv/../../img/vod/mbank_pasek.svg);
  background-size: auto 100%; background-repeat:repeat-x;
}
.ilustracja.mbank .pasek.tp {margin-top: -0.5px}
.baner .mbank .logo { background-image: url(../nn/vod/nhv/../../img/vod/mbank_logo.svg); width: 10em; height: 3em; margin-bottom: 1.8em;  background-position: left bottom; background-size: auto 100%; }
.baner.mbank .ilustracja.supers .over-elems {
   height: 30vw;
   min-height: 33em;
   max-height: 37em;
}

@media (max-width: 800px) { 
 .ilustracja.full.mbank { 
     background-position-x: 50% 
  }
  .ilustracja.mbank .over-elems .dopisek.no-play { max-width: 15em}
} 

@media (max-width: 600px) {
 .ilustracja.full.mbank {
    background-image: url(../nn/vod/nhv/../../img/vod/mbank_zdumm.jpg); 
    background-position-x: 80% 
   
 }
 
 .ilustracja .over-elems .nazwa-dopisek {margin-top: 34%}
 
 .baner .mbank .logo { height: 2.3em}
}



/** kolekcja */

.supers  .ogladaj-butn {text-transform: uppercase;   border-color: #19D69A; background-color: #19D69A; padding: 1em 1.5em 1em 1.5em; margin-bottom: 3%; }
.supers  .ogladaj-butn .f4 {color: #000; }

.supers.zszukaj  .ogladaj-butn {margin-bottom: calc(3% + 2em) } 
.vod-branch.super-section   .paski-cykli { background-color: #19D69A }

.supers  .ogladaj-butn .ostrz { background-image:var(--dluga-strzalka-black);     background-position: -2.2em center;
    background-size: auto 1em; width: 3em;  margin-left: 2.5em; }
.supers  .ogladaj-butn:hover .ostrz {background-position: -1.8em center; }    
  
 
.supers .ogladaj-butn.black {border-color: #000; background-color: #000;  }
.supers  .ogladaj-butn.black .ostrz {  background-image:var(--dluga-strzalka); }
.supers .ogladaj-butn.black .f4 { color: #fff}

.mobile-but {display: none;}

@media (max-width: 700px) {
  
  .ilustracja .over-elems .nazwa-cyklu h1 {font-size: 1.9em}
  
  .vod-branch .mobile-but.supers {background-color:var(--ciemne-tlo);}
  
  .vod-branch.super-section .mobile-but.supers {background-color: #fff;} 
  .ilustracja.supers .ogladaj-butn.hide-on-desktop {display: none}
  .mobile-but.supers { display: flex; padding: 2em 5% 0px 5%; justify-content: center;  }
  .mobile-but.supers .ogladaj-butn {xborder-color: #000;  }
  .mobile-but.supers .ogladaj-butn .ostrz { background-image: var(--dluga-strzalka-black); }
  .mobile-but.supers .ogladaj-butn { margin:0px; width: 15em; padding: 1.3em 1.5em 1.3em 1.5em; justify-content: space-between;}
  .ilustracja.supers .over-elems .nazwa-fest {position: static ; order: 5;}
  
   .ilustracja.supers .over-elems {justify-content: space-between; padding: 4em 1.3em; margin-top: 0px}
  
   .ilustracja.full.supers {background-size: cover;}
  
  .ilustracja .over-elems .dopisek, .ilustracja .over-elems .nazwa-cyklu  { padding-left: 1.2em}
  .ilustracja .over-elems .dopisek.no-play , .ilustracja .over-elems .nazwa-cyklu{ padding-right: 1.4em;}


}
@media (max-width: 600px) {
  .supers .tytinfo {justify-content: center; }
}

@media (max-width:  450px) {
  .baner .supers .ogladaj-butn { width: 80%; max-width: 20em; justify-content: space-between }
}
 



html {

  --filled-arrow-white: url(../nn/vod/nhv/../../img/vod/kd/arr_rt_white.svg);
  --more-figury: url(../nn/vod/nhv/../../img/vod/kd/more.svg);
  --prawieczarny: #000000;
  --prawieczarny-hover: #121212;
  --black: #000000;
  --fonth: 'ValueSansMedium';
  
  --dluga-strzalka-black: url("../nn/vod/nhv/../../img/vod/kd/arrow_black_rightlong.svg");
  --menu-strz: url(../nn/vod/nhv/../../img/vod/kd/menustrzblack.svg);
  --logo-naglowek: url(../nn/vod/nhv/../../img/vod/kd/mlodehoryzonty.svg);
  --morelinkfont : var(--fonth)
}

@font-face {
    font-family: 'ValueSansMedium';
    src: url('../nn/vod/nhv/../../css/value-sans/value-sans-medium-pro.woff2') format('woff2'),
    url('../nn/vod/nhv/../../css/value-sans/value-sans-medium-pro.woff') format('woff');
    size-adjust: 84%; 
    font-style: normal;
    font-weight: normal;
    font-display: block;
    
}
@font-face {
    font-family: 'ValueSansMedium';
    src: url('../nn/vod/nhv/../../css/value-sans/value-sans-bold-pro.woff2') format('woff2'),
    url('../nn/vod/nhv/../../css/value-sans/value-sans-bold-pro.woff') format('woff');
    font-style: normal;
    size-adjust: 84%; 
    font-weight: bold;
    font-display: block;   
}

@font-face {
    font-family: 'ValueSansMediumSafari';
    src: url('../nn/vod/nhv/../../css/value-sans/value-sans-medium-pro-webfont.woff2') format('woff2'),
            url('../nn/vod/nhv/../../css/value-sans/value-sans-medium-pro-webfont.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    font-display: block;
}


@font-face {
    font-family: 'ValueSansProportional';
        src: url('../nn/vod/nhv/../../css/value-sans/value-sans-variable-proportional-pro.woff2') format('woff2'),
            url('../nn/vod/nhv/../../css/value-sans/value-sans-variable-proportional-pro.woff') format('woff');
     font-style: normal; font-weight: 400; font-display: block;
    
   /**  font-display: swap; */
}
@font-face {
    font-family: 'ValueSansProportional';
    src: url('../nn/vod/nhv/../../css/value-sans/value-sans-bold-pro.woff2') format('woff2'),
    url('../nn/vod/nhv/../../css/value-sans/value-sans-bold-pro.woff') format('woff');
    font-style: normal;
    font-weight: bold;
    font-display: block;   
}
@font-face {
    font-family: 'ValueSansMediumSafari';
    src: url('../nn/vod/nhv/../../css/value-sans/value-sans-bold-pro.woff2') format('woff2'),
    url('../nn/vod/nhv/../../css/value-sans/value-sans-bold-pro.woff') format('woff');
    font-style: normal;
    font-weight: bold;
    font-display: block;   
}
body {
    font-family: ValueSansProportional, sans-serif;
}
.roboto, .roboto-napis, .roboto-light {font-family: 'Roboto' }
INPUT, SELECT, textarea, input[type="text"] {font-family: 'Roboto' }
    
.tresc li A, P A {
  text-decoration-thickness: 1pt
}

h1, h2, h3, h4, h5, h6, .f1, .f2, .f3, .f4, .f5, .f55, .f6, .hb , .f7, header {
  font-family: var(--fonth), Arial, sans-serif;
  line-height: 1em;
}
.roboto-text { xfont-family: var(--fonth); }

.przyciski-bar .przyciski A span.l, .przyciski-bar .przyciski A span.cont { font-family: ValueSansMedium;   }
.vod-branch.kaflesekcje h4 a {font-size: 1.1em}
/** .strzalkaduza { background-image: url(../nn/vod/nhv/../../img/strzalkaduzac.svg); } */

.dol {background-color: var( --kolor-kd ); }
.dol .pr img {
  -webkit-filter: invert(1.0); /* safari 6.0 - 9.0 */
          filter: invert(1.0);
}

.dol .le {font-size: 1.1em; xwidth: 19em}
.dol .le, .dol .le A { color: var(--black);  font-family: var(--fonth); line-height: 1.2}
.dol .le A:hover {color: var(--black);}
 


.swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: var(--filled-arrow-white); }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: var(--filled-arrow-white); transform: rotate(180deg); }
.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: var(--filled-arrow); }
.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black  { background-image: var(--filled-arrow); transform: rotate(180deg); }

html {

}

.fixhedlogo .img {xheight: 1.7em; xmax-height: 1.7em; background-size: auto 1.7em; background-position: left center;
 background-position-y: 0.05em;
}
.xfixhedlogo {padding-top: 0.55em;  padding-bottom: 0.55em;} 


span.festico {
  display: inline-block; background-image: url(../nn/vod/nhv/../../img/vod/kd/festico.svg);
  width: 1em; height: 1em; background-size: contain; background-position: center center;
}

.vod-film .tagi .symbole span.festico {
  width: 1.6em
}


@media screen and (max-width: 550px) {
  header:not(.rez) .pasgor.zalo, header.rez .pasgor.zalo {
    background: none;
    background-color: var( --kolor-kd );
  }
}

header .zalogowany { 
  background-color: var( --kolor-kd );
  padding-right: 0px;
}
header, header .pasgor {
  background-color: var( --kolor-kd );

}
header.fixed .pasgor {
   border-bottom-color: var( --kolor-kd );
}

.dol .figury {display: block; padding-top: 0.5em; padding-bottom: 5em}
@media screen and (max-width:800px){
  .dol .figury img {margin-left: auto; margin-right: auto; display: block; }
}

.dol .figury img { width: 10em; height: auto}


.dol .kont {max-width: none;}

.hover_und_anim:after { border-bottom-width: 1pt; }

.soc a.nhvod {background-image: url(../nn/vod/nhv/../../img/vod/kd/nhvod_kd.svg) }

.ogladaj-butn { border-color: var( --kolor-kd); background-color: var( --kolor-kd); padding: 1em 1.5em 1em 1.5em;  } 
.ogladaj-butn .ostrz { background-image: var(--filled-arrow); background-position: 3em center; background-size: auto 1.3em; }
.ogladaj-butn:hover .ostrz {background-position: 3.2em center; }
.tytinfo .ogladaj-butn span {color:var(--black);   }
.tytinfo .ogladaj-butn span.f4 { font-size: 1.4em}

nav.mobile {  background-color: var( --kolor-kd ); }

html[lang=pl] body.nhvod header .nagl  { background-image: var(--logo-naglowek); }
.fixhedlogo .img {
   background-image: var(--logo-naglowek); 
}

.vod-branch .paski-cykli {
  background-image: none; /** url(../nn/vod/nhv/../../img/vod/kdtlo.png); background-repeat: repeat; xbackground-size: 20em auto;*/
   background-color: var( --kolor-kd );
}


.vod-branch .big-box .caption .h.back {
    background-color: var( --kolor-kd-lab );
    box-shadow: 0 0 0 0.2em var( --kolor-kd-lab );
    color: var( --kolor-kd-lab );
}

.news-box .text-tag {display: inline-flex}

.baner .baner-il .im {
  background-image: url(https://www.nowehoryzonty.pl/pliki/wgrane/image/10003nh/katalog/2021/O_CZYM_SZUMI_LAS/glw_O_czym_szumi_las_1.jpg_kafel.jpg);
  background-color: rgba(0,0,0,0.1);
}
.baner.voucher .baner-il .im {background-image: url(../nn/vod/nhv/../../img/vod/kd/basia600.jpg) }

.vod-branch.kaflesekcje h4 a::before { display: none}


/** ===================================================== */
/** banery */
.baner .ostrz, .baner.voucher .ostrz { background-image: var(--more-figury)  }
.baner .ostrz { background-position: 0px center }
.baner:hover .ostrz {background-position: 0.3em center }
.baner .det-link .ostrz {background-size: auto 1.8em; height: 1.8em; margin-top: 0.9em}
.baner .det-link .roboto-text { text-transform: lowercase; font-family: var(--fonth); font-size: 1em }
@media (min-width: 1000.01px) {
  .baner .det {padding-bottom: 2%}
}

@media (max-width: 700px) {
  .baner.voucher h1, .baner.pakiet h1 {
    background-image: url(../nn/vod/nhv/../../img/vod/kd/kdvoucher_ico.svg); background-size: auto 1.05em;
    background-position: right top; background-position-y: 0.5em
  }
  
  .baner.pakiet h1 { display: block; box-sizing: border-box;  padding-right: 2.5em;
    background-image: url(../nn/vod/nhv/../../img/vod/kd/kdpakiet_ico.svg);
    background-size: auto 0.9em;
  }
}

.baner h1 { font-size: 3em;  }

@media (min-width: 1000.01px)   {
  .baner h1 { font-size: 4em;  }
  .baner h1.dl {font-size: 3.2em; line-height: 0.90}
  .baner .il-under-labl {
    display: block; box-sizing: border-box;  margin-top: 2.5em;
    background-image: url(../nn/vod/nhv/../../img/vod/kd/kdvoucher_ico.svg); background-size: auto 4em;
    background-position: left top; 
    width: 5em; height: 4em;
  }
  .baner.pakiet .il-under-labl {
      background-image: url(../nn/vod/nhv/../../img/vod/kd/kdpakiet_ico.svg);
      background-size: auto 3em;
  }
}

.baner.voucher .op .labl {padding-top: 1em}

.baner.voucher, .baner.pakiet * {color: var(--black)}
.baner .baner-il .im .kreski, .baner.voucher .baner-il .im .kreski {
   background-image: url(../nn/vod/nhv/../../img/vod/kd/baner_cover_v.svg);
   background-size: 50% 50%; background-position: right bottom; width: 100%; height: 100%; left: auto; right: -1px; top: 0px;  
}
.baner.voucher { background-color: #7866e3;}
.baner.pakiet { background-color: #58CCF0;}
.baner.pakiet .baner-il .im .kreski { background-image: url(../nn/vod/nhv/../../img/vod/kd/baner_cover_nb.svg);}
.baner.pakiet .baner-il .im .ka { display: none}
@media (max-width: 700px) {
 
 .baner .baner-il  {margin-top: 2.5em; margin-bottom: 2.5em}
 }

/** ===================================================== */
/** scrollbar */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--kolor-kd-darker) var(--kolor-kd);
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  width: 16px;
  width: 16px;
}
*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: var(--kolor-kd);
}

*::-webkit-scrollbar-track:hover {
  background-color: var(--kolor-kd);
}

*::-webkit-scrollbar-track:active {
  background-color: var(--kolor-kd);
}

*::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: var(--kolor-kd-darker);
  border: 3px solid var(--kolor-kd);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--kolor-kd-darker);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--kolor-kd-darker);
}


/** ===================================================== */



/** ilustracja na głównej stronie - mh fest i mh vod */
.ilustracja.full.zopisem.mhfest, .ilustracja.zopisem.mhfest {background-color: #000;}
.ilustracja.full.mhfest {background-color: #000; background-image: url(../nn/vod/nhv/../../img/vod/kd/anzu1920.jpg); background-size: cover; background-position: center center}

.ilustracja.mhfest .over-elems {
    position: relative;
    margin-left: auto; margin-right: auto; padding-left: 7%; padding-right: 7%;
    margin-top: 5%;
    padding-bottom: 5%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;   
    height: 32vw;
    min-height: 22em;
    max-height: 35em;
    flex-direction: column;
    max-width: 1800px;
    gap: 2.4em;
} 





.ilustracja .over-elems .nazwa-fest {color: #fff;  position: absolute; right: 7%; top: 0px}
.ilustracja .over-elems .daty-fest {color: #fff; margin-top: 7%}
.ilustracja .over-elems .nazwa-fest span, .ilustracja .over-elems .daty-fest span {color: #fff;  display:block;}
.ilustracja .over-elems .daty-fest span {line-height: normal;}

.ilustracja .over-elems .daty-fest {font-size: 115%}
.ilustracja .over-elems .nazwa-fest {font-size: 115%}
  
.ilustracja .over-elems  .log {width: 20%; height: auto }

.mobile-mhfest {display: none;}


@media (min-width:2100px) {
  .ilustracja.full.mhfest { background-image: url(../nn/vod/nhv/../../img/vod/kd/anzu2048.jpg);} /** powinna być większa jakość */
  .ilustracja .over-elems .daty-fest {margin-bottom: 3%}
  }
@media (min-width:1920px) {
  .ilustracja .over-elems .daty-fest {font-size: 120%}
  .ilustracja .over-elems .nazwa-fest {font-size: 120%}
  
}
@media (min-width:1700px) {
  .ilustracja.mhfest .over-elems { padding-left: 10%; padding-right: 10%;  }
  .ilustracja .over-elems .nazwa-fest {right: 10%}
}


.ilustracja .fig-lewa {position: absolute; left: 0px; bottom: 0px; background-image: url(../nn/vod/nhv/../../img/vod/kd/mhfest_figl.svg); background-size: contain; background-position: left bottom; display: block; width: 15vw; height: 15vw; }
.ilustracja .fig-lewa {display :none}
.ilustracja .fig-prawa {position: absolute; right: 0px; bottom: 5%; background-image: url(../nn/vod/nhv/../../img/vod/kd/mhfest_figp2.svg);  background-size: contain; width: 16vw; height: 16vw;   background-position: right bottom; }
.ilustracja .fig-srod {position: absolute; 
  top: 60%; left: 55%; transform: translate(-50%, -50%);
  background-image: url(../nn/vod/nhv/../../img/vod/kd/mhfest_srod.svg);  background-size: contain; width: 12vw; height: 12vw;   
  background-position: center bottom; }


.ilustracja.mhfest.full:hover .ostrz {    background-position: 1.7em center; }
.ilustracja.mhfest.full .ostrz {background-position: 1.5em center }

.ilustracja.mhfest .ogladaj-butn .ostrz {width: 2.5em}

.ilustracja.mhfest .ogladaj-butn {align-self: flex-start;  border-color: var( --kolor-mh-fest);  background-color: var( --kolor-mh-fest);
  padding-right: 0.8em; border-radius: 2em;
}

.ilustracja.mhfest .ogladaj-butn span.f4 {font-size: 1.4em}

@media (max-width:1400px) {
  .ilustracja .over-elems .daty-fest {margin-top: 1em;}
  .ilustracja .over-elems .log {width: 14em}
  .ilustracja.mhfest .over-elems { padding-left: 5%; padding-right: 5%; }
}
@media (max-width:1200px) {
 .ilustracja.mhfest .ogladaj-butn {margin-top: 1.5em;}

 
}

@media (max-width:1000px) {
  .ilustracja.mhfest .over-elems {margin-top: 4em; padding-bottom: 3em; gap: 1.5em;}
 .ilustracja.mhfest .ogladaj-butn {margin-top: 1.5em;}
 
   .ilustracja.mhfest .over-elems { padding-left: 5%; padding-right: 5%; }
   
}

@media (min-width: 700.00001px) {
  .ilustracja .fig-srod {min-width: 9em; min-height: 9em;}
  }

@media (max-width: 700px) {
  
  .ilustracja.mhfest .ogladaj-butn {display: none}
  .mobile-mhfest { display: flex; background-color: var(--ciemne-tlo); padding: 2em 5% 0px 5%; justify-content: center;  }
  .mobile-mhfest .ogladaj-butn {margin:0px; width: 15em; padding: 1.3em 1.5em 1.3em 1.5em; justify-content: space-between; border-radius: 2em;}
  

  .ilustracja .over-elems .log {width: 10em}
  .ilustracja .over-elems .daty-fest {position: static ; order: 2; align-self: flex-end; margin-top: 0px; flex-basis: 80%; font-size: 98%;}
  .ilustracja .over-elems .nazwa-fest {position: static ; order: 5;  }
  
  .ilustracja.mhfest .over-elems {justify-content: flex-start; align-items: stretch; padding: 4em 2em; margin-top: 0px}
  
  .ilustracja.full.mhfest {background-size: cover;}
  
  .ilustracja .fig-lewa {display: none;}
  .ilustracja .fig-prawa {    }
  
  .ilustracja .fig-prawa { background-image: url(../nn/vod/nhv/../../img/vod/kd/mhfest_srod.svg); width: 28vw; height: 28vw; max-width: 10em; max-height: 10em; }
  .ilustracja .fig-srod {background-image: url(../nn/vod/nhv/../../img/vod/kd/mhfest_figp2.svg); left: 47%; top: 57%; width: 9.2em; height: 9.2em }
  .ilustracja .fig-srod {display: none} /** chowam gwiazdkę na mobile */
  
}
@media (max-width: 600px) {
  .ilustracja.full.mhfest { background-image: url(../nn/vod/nhv/../../img/vod/kd/anzu600.jpg); background-position: 30% center}
}


/** ===================================================== */