:root{--g:#073f35;--c:#f4f1ea}.okolie-page{background:#fbfaf6;color:#173d35;font-family:var(--krp-font);}.okolie-page .container{width:min(1100px,calc(100% - 56px));margin:auto}
.okolie-intro{padding:28px 0 20px;background:linear-gradient(90deg,#fbfaf6 0%,rgba(251,250,246,.92) 45%,rgba(251,250,246,.15) 78%),url('/assets/images/okolie/tale.webp') center/cover}.intro-grid{display:flex;justify-content:space-between;align-items:center}.kicker{font-size:15px;font-weight:700;letter-spacing:4px}.okolie-intro h1{font:400 58px/1 var(--krp-font);margin:8px 0;color:#073a31;letter-spacing:-2px}.okolie-intro p{font-size:22px;margin:0;color:#525b57}.intro-note{font:italic 20px var(--krp-font);color:#fff;text-align:center;transform:rotate(-4deg);text-shadow:0 2px 7px #000}
.explorer{padding:14px 0 40px}.filters{display:grid;grid-template-columns:repeat(6,1fr) 1.7fr;gap:14px;align-items:center;margin-bottom:14px}.filters button{height:52px;border:0;border-radius:28px;background:#efede7;color:#173f37;font-size:14px;cursor:pointer}.filters button.active{background:var(--g);color:#fff}.filter-note{font:italic 17px var(--krp-font);color:#7d8782;padding-left:16px}
.explorer-grid{display:grid;grid-template-columns:2.05fr .95fr;gap:20px}.map-wrap{height:493px;position:relative;border-radius:0px;overflow:hidden}#activityMap{width:100%;height:100%}.marker-pin{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;border:3px solid #fff;box-shadow:0 2px 8px #0005;font-weight:700}.home{background:#173f37}.priroda,.turistika{background:#18735a}.zima{background:#2868a7}.zaujimavosti,.gastro{background:#8a6544}.distance-legend{position:absolute;z-index:500;right:14px;bottom:14px;background:#173f37e8;color:#fff;padding:10px 14px;border-radius:8px;font-size:12px;display:grid;gap:6px}.distance-legend span{display:flex;gap:8px;align-items:center}.distance-legend i{width:10px;height:10px;border-radius:50%;border:1px solid #fff}.d5{background:#18735a}.d10{background:#8a6544}.d20{background:#2868a7}
.place-card{background:#fff;border-radius:0px;overflow:hidden;box-shadow:0 5px 24px #1d362f12}.place-photo{height:235px;position:relative}.place-photo img{width:100%;height:100%;object-fit:cover}.fav{position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:#0a4539;color:#fff;font-size:27px}.place-body{padding:15px 18px}.place-title-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center}.round-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#0b6a55;color:#fff}.place-title-row h2{font:400 22px var(--krp-font);margin:0}.distance{background:#f1efe9;padding:9px 14px;border-radius:20px;font-size:13px}.place-body p{font-size:14px;line-height:1.5;color:#5c6662}.travel-times{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #e5e2db;padding:10px 0}.travel-times span{text-align:center;border-right:1px solid #ddd8cf;font-size:13px}.travel-times span:last-child{border:0}.travel-times b{font-weight:400}.place-actions{display:grid;grid-template-columns:1.15fr .95fr;gap:12px;margin-top:13px}.place-actions a{height:50px;border-radius:7px;display:flex;align-items:center;justify-content:center;text-decoration:none}.more{background:var(--g);color:#fff}.navigate{background:#f1efe9;color:#173f37}
.places-head{display:flex;justify-content:space-between;margin:28px 4px 12px;font-size:13px;letter-spacing:3px}.places-head span{letter-spacing:0}.places-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.mini-place{background:#efede7;border-radius:0px;overflow:hidden;cursor:pointer}.mini-img{height:122px;position:relative}.mini-img img{width:100%;height:100%;object-fit:cover}.mini-distance{position:absolute;right:8px;top:8px;background:#0b493d;color:#fff;border-radius:14px;padding:5px 9px;font-size:11px}.mini-body{padding:10px 12px}.mini-body b{display:block;font:400 16px var(--krp-font)}.mini-body small{color:#707874;font-size:11px}
@media(max-width:1050px){.filters{grid-template-columns:repeat(3,1fr)}.filter-note{display:none}.explorer-grid{grid-template-columns:1fr}.places-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.okolie-page .container{width:calc(100% - 28px)}.intro-note{display:none}.okolie-intro h1{font-size:39px}.okolie-intro p{font-size:16px}.filters{display:flex;overflow-x:auto;gap:8px}.filters button{flex:0 0 auto;height:43px;padding:0 17px}.map-wrap{height:390px}.place-photo{height:220px}.place-actions{grid-template-columns:1fr}.places-strip{display:flex;overflow-x:auto}.mini-place{flex:0 0 72%}.places-head span{display:none}}


/* V2 — HERO zjednotený s ostatnými podstránkami KrpaHaus */
.okolie-page .okolie-hero{
  width:100%!important;
  height:400px!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  color:#fff!important;
  background:url('/assets/subokolie.webp') center center/cover no-repeat!important;
}
.okolie-page .okolie-hero:before,
.okolie-page .okolie-hero:after{
  content:none!important;
  background:none!important;
}
.okolie-page .okolie-hero-content{
  position:relative!important;
  z-index:1!important;
  max-width:1100px!important;
  width:min(1100px,calc(100% - 56px))!important;
  margin:0 auto!important;
  padding-top:80px!important;
}
.okolie-page .okolie-hero h1{
  margin:0 0 12px!important;
  color:#fff!important;
  font-family:var(--krp-font);
  font-size:3.5rem!important;
  line-height:1.08!important;
  font-weight:700!important;
  letter-spacing:normal!important;
  text-shadow:none!important;
}
.okolie-page .okolie-hero p{
  margin:0!important;
  color:#fff!important;
  font-family:var(--krp-font);
  font-size:1.25rem!important;
  line-height:1.45!important;
  font-weight:400!important;
  text-shadow:none!important;
}

/* Starý samostatný intro/header dizajn sa už nepoužíva */
.okolie-page .okolie-intro,
.okolie-page .intro-grid,
.okolie-page .intro-note,
.okolie-page .kicker{
  display:none!important;
}

@media(max-width:1050px){
  .okolie-page .okolie-hero{
    height:360px!important;
  }
  .okolie-page .okolie-hero-content{
    width:min(1100px,calc(100% - 48px))!important;
  }
  .okolie-page .okolie-hero h1{
    font-size:2.7rem!important;
  }
}

@media(max-width:680px){
  .okolie-page .okolie-hero{
    height:320px!important;
  }
  .okolie-page .okolie-hero-content{
    width:calc(100% - 28px)!important;
    padding-top:70px!important;
  }
  .okolie-page .okolie-hero h1{
    margin-bottom:10px!important;
    font-size:2.2rem!important;
    line-height:1.08!important;
  }
  .okolie-page .okolie-hero p{
    font-size:1rem!important;
    line-height:1.4!important;
  }
}


/* =========================================================
   V3 — presné zjednotenie HERO s existujúcimi podstránkami
   ========================================================= */
.okolie-page .okolie-hero.subpage-hero-unified{
    box-sizing:border-box!important;
    width:100%!important;
    min-height:0!important;
    height:400px!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
    color:#fff!important;
    background-image:url('/assets/subokolie.webp')!important;
    background-position:center center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
.okolie-page .okolie-hero.subpage-hero-unified::before,
.okolie-page .okolie-hero.subpage-hero-unified::after{
    content:none!important;
    display:none!important;
    background:none!important;
}
.okolie-page .okolie-hero-content.subpage-hero-unified-inner{
    box-sizing:border-box!important;
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    max-width:1100px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:80px 0 0!important;
}
.okolie-page .okolie-hero-content h1{
    margin:0!important;
    padding:0!important;
    max-width:none!important;
    color:#fff!important;
    font-family:inherit!important;
    font-size:3.5rem!important;
    line-height:1.08!important;
    font-weight:inherit!important;
    font-style:normal!important;
    letter-spacing:normal!important;
    text-transform:none!important;
}
.okolie-page .okolie-hero-content p{
    margin:10px 0 0!important;
    padding:0!important;
    max-width:none!important;
    color:#fff!important;
    font-family:inherit!important;
    font-size:1.25rem!important;
    line-height:1.45!important;
    font-weight:400!important;
    font-style:normal!important;
    letter-spacing:normal!important;
    text-transform:none!important;
}

/* tablet — rovnaké rozmery ako ostatné subpage hero */
@media (max-width:1050px){
    .okolie-page .okolie-hero.subpage-hero-unified{
        height:360px!important;
    }
    .okolie-page .okolie-hero-content.subpage-hero-unified-inner{
        width:calc(100% - 48px)!important;
        max-width:1100px!important;
        padding-top:80px!important;
    }
    .okolie-page .okolie-hero-content h1{
        font-size:2.7rem!important;
    }
    .okolie-page .okolie-hero-content p{
        font-size:1.15rem!important;
    }
}

/* mobil */
@media (max-width:680px){
    .okolie-page .okolie-hero.subpage-hero-unified{
        height:320px!important;
    }
    .okolie-page .okolie-hero-content.subpage-hero-unified-inner{
        width:calc(100% - 28px)!important;
        padding-top:80px!important;
    }
    .okolie-page .okolie-hero-content h1{
        font-size:2.2rem!important;
        line-height:1.08!important;
    }
    .okolie-page .okolie-hero-content p{
        margin-top:9px!important;
        font-size:1rem!important;
        line-height:1.4!important;
    }
}


/* =========================================================
   V4 — HERO 1:1 podľa funkčnej stránky Galéria
   Hodnoty prevzaté z gallery.css
   ========================================================= */
.okolie-page .okolie-hero.subpage-hero-unified{
    height:400px!important;
    min-height:400px!important;
    position:relative!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    overflow:hidden!important;
    color:#fff!important;
    background-image:url('/assets/subokolie.webp')!important;
    background-position:center center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
}
.okolie-page .okolie-hero.subpage-hero-unified:before,
.okolie-page .okolie-hero.subpage-hero-unified:after{
    background:none!important;
}
.okolie-page .okolie-hero-content.subpage-hero-unified-inner{
    box-sizing:border-box!important;
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    max-width:1100px!important;
    height:100%!important;
    margin:0 auto!important;
    padding:60px 12px 0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
}
.okolie-page .okolie-hero h1{
    margin: 0 0 13px !important;
    font-family: var(--krp-font);
    font-size: 58px !important;
    line-height: .99 !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    
    
  /*  margin:0 0 12px!important;
    padding:0!important;
    color:#fff!important;
    font-family:inherit!important;
    font-size:3rem!important;
    line-height:normal!important;
    font-weight:700!important;
    font-style:normal!important;
    letter-spacing:normal!important;
    text-transform:none!important; */
}
.okolie-page .okolie-hero p{
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-family:inherit!important;
    font-size:1.1rem!important;
    line-height:normal!important;
    font-weight:400!important;
    font-style:normal!important;
    letter-spacing:normal!important;
    text-transform:none!important;
    font-size: 15px !important;
}

@media(max-width:767px){
    .okolie-page .okolie-hero.subpage-hero-unified{
        height:310px!important;
        min-height:310px!important;
    }
    .okolie-page .okolie-hero-content.subpage-hero-unified-inner{
        width:100%!important;
        max-width:1100px!important;
        height:100%!important;
        margin:0 auto!important;
        padding:75px 18px 0!important;
    }
    .okolie-page .okolie-hero h1{
        margin:0 0 12px!important;
        font-size:2.3rem!important;
    }
    .okolie-page .okolie-hero p{
        margin:0!important;
        font-size:1.1rem!important;
    }
}


/* V5 — korekcia výšky hero podľa požiadavky */
@media(min-width:768px){
    .okolie-page .okolie-hero.subpage-hero-unified{
        height:360px!important;
        min-height:360px!important;
    }
}


/* V6 — odstránené ľavé/pravé prepínače pri detaile miesta */
.place-card .prev,
.place-card .next,
.place-card .place-prev,
.place-card .place-next,
.place-card .arrow-left,
.place-card .arrow-right,
.place-card [class*="place-arrow"],
.place-card [class*="detail-arrow"],
.place-card [aria-label="Predchádzajúce"],
.place-card [aria-label="Nasledujúce"],
.place-card [aria-label="Previous"],
.place-card [aria-label="Next"]{
    display:none!important;
}


/* =========================================================
   V7 — šírka stránky podľa ostatných podstránok + bez
   prepínačov, ktoré sú súčasťou dočasnej demo fotografie
   ========================================================= */

/* Rovnaká obsahová šírka ako Galéria */
.okolie-page .explorer > .container{
    width:100%!important;
    max-width:1100px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:18px!important;
    padding-right:18px!important;
    box-sizing:border-box!important;
}

/* Hero si ponecháva vlastnú šírku 1100 px podľa Galérie */
.okolie-page .okolie-hero-content.subpage-hero-unified-inner{
    max-width:1100px!important;
}

/*
   Demo obrázok jazera bol vyrezaný zo starého grafického mockupu
   a šípky sú priamo "zapečené" v pixeloch obrázka.
   Jemným zväčšením fotografie orežeme oba bočné prepínače.
*/
.place-photo{
    overflow:hidden!important;
}
.place-photo img{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:112%!important;
    height:112%!important;
    max-width:none!important;
    transform:translate(-50%,-50%)!important;
    object-fit:cover!important;
    object-position:center!important;
}

/* Žiadne programové carousel prepínače */
.place-photo button:not(.fav),
.place-photo .prev,
.place-photo .next,
.place-photo [class*="prev"],
.place-photo [class*="next"],
.place-photo [class*="arrow"]{
    display:none!important;
}

@media(max-width:560px){
    .okolie-page .explorer > .container{
        padding-left:12px!important;
        padding-right:12px!important;
    }
}


/* V8 — popisy vzdialenostných kružníc */
.distance-ring-label-wrap{
    background:transparent!important;
    border:0!important;
}
.distance-ring-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:74px;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(20,45,35,.58);
    color:#fff;
    font-size:12px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}


/* V9 — kružnice a ich popisy výraznejšie na mape */
.distance-ring-label{
    min-width:82px!important;
    padding:6px 10px!important;
    background:rgba(13,42,31,.82)!important;
    border:1px solid rgba(255,255,255,.72)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:700!important;
    box-shadow:0 2px 8px rgba(0,0,0,.25)!important;
}


/* V12 — všetky zaujímavé miesta v spodnom páse */
.places-strip{
    display:flex!important;
    grid-template-columns:none!important;
    gap:12px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px!important;
}
.places-strip > *{
    flex:0 0 180px!important;
    min-width:180px!important;
    scroll-snap-align:start;
}
.places-strip::-webkit-scrollbar{
    height:6px;
}
.places-strip::-webkit-scrollbar-thumb{
    background:#c7cec8;
    border-radius:999px;
}
.places-strip::-webkit-scrollbar-track{
    background:transparent;
}
@media(max-width:680px){
    .places-strip > *{
        flex-basis:165px!important;
        min-width:165px!important;
    }
}


/* =========================================================
   V13 — všetky spodné karty bez horizontálneho posúvania
   ========================================================= */
.places-strip{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
    overflow:visible!important;
    padding-bottom:0!important;
}
.places-strip > *{
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    flex:none!important;
}
.place-mini-card{
    appearance:none;
    -webkit-appearance:none;
    display:block;
    padding:0;
    border:0;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
    text-align:left;
    cursor:pointer;
}
.place-mini-image{
    position:relative;
    display:block;
    height:118px;
    overflow:hidden;
}
.place-mini-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.place-mini-distance{
    position:absolute;
    top:9px;
    right:9px;
    padding:6px 9px;
    border-radius:999px;
    background:#075d46;
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:700;
}
.place-mini-body{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-height:68px;
    padding:11px 12px 12px;
}
.place-mini-body strong{
    color:#163b31;
    font-family:var(--krp-font);
    font-size:15px;
    line-height:1.2;
    font-weight:500;
}
.place-mini-body span{
    color:#6d7772;
    font-size:10px;
    line-height:1.25;
}

@media(max-width:1000px){
    .places-strip{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}
@media(max-width:650px){
    .places-strip{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:9px!important;
    }
    .place-mini-image{height:105px;}
}
@media(max-width:390px){
    .places-strip{
        grid-template-columns:1fr!important;
    }
}

/* V14 — definitívne: všetkých 10 miest v mriežke, bez slidera */
.places-strip{
 display:grid!important;
 grid-template-columns:repeat(5,minmax(0,1fr))!important;
 gap:12px!important;
 overflow:visible!important;
 width:100%!important;
 padding-bottom:0!important;
}
.places-strip .mini-place{
 width:100%!important;
 min-width:0!important;
 max-width:none!important;
 margin:0!important;
}
@media(max-width:1000px){.places-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media(max-width:650px){.places-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:390px){.places-strip{grid-template-columns:1fr!important;}}


/* =========================================================
   V15 — detail miesta: jednoriadkový nadpis + dizajnové ikony
   ========================================================= */
.place-title-row{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:10px!important;
}
.place-title-row h2,
#placeTitle{
    min-width:0!important;
    margin:0!important;
    font-size:1.18rem!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.place-title-row .distance{
    white-space:nowrap!important;
}

/* Dopravné časy v rovnakom vizuálnom jazyku ako zelené prvky stránky */
.travel-times{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    align-items:center!important;
}
.travel-times > span{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    min-width:0!important;
}
.travel-icon{
    width:27px!important;
    height:27px!important;
    flex:0 0 27px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:#edf4ef!important;
    color:#075d46!important;
}
.travel-icon svg{
    width:16px!important;
    height:16px!important;
    display:block!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.7!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}
.travel-times b{
    color:#173d33!important;
    font-size:12px!important;
    font-weight:600!important;
    white-space:nowrap!important;
}

@media(max-width:680px){
    .place-title-row h2,
    #placeTitle{
        font-size:1.05rem!important;
    }
    .travel-icon{
        width:25px!important;
        height:25px!important;
        flex-basis:25px!important;
    }
}


/* V16 — viac priestoru pod názvom + jemnejší popis */
.place-title-row{
    margin-bottom:16px!important;
}
.place-body > p,
#placeDescription{
    font-size:12.5px!important;
    line-height:1.55!important;
    color:#5f6964!important;
    margin-top:0!important;
}


/* V17 — čistá SVG ikona srdca v detaile miesta */
.favorite{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    border:2px solid rgba(255,255,255,.95)!important;
    border-radius:50%!important;
    background:rgba(4,75,57,.88)!important;
    color:#fff!important;
    font-size:0!important;
    line-height:1!important;
    box-shadow:0 2px 8px rgba(0,0,0,.16)!important;
    cursor:pointer!important;
}
.favorite svg{
    display:block!important;
    width:23px!important;
    height:23px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.7!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}
.favorite:hover{
    background:#075d46!important;
}


/* V18 — jemnejšie vzdialenostné kružnice */
.leaflet-pane.distanceRings-pane path{
    stroke-width:1.5px!important;
    stroke-opacity:.72!important;
}


/* V24 — ikona reštaurácie Bistro Krpko */
.marker-pin.gastro .poi-restaurant-icon{
    width:19px!important;
    height:19px!important;
    display:block!important;
    margin:auto!important;
    fill:none!important;
    stroke:#fff!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}

/* V25 — Bistro Krpko: správna ikona príboru */
.marker-pin.gastro{display:flex!important;align-items:center!important;justify-content:center!important}
.marker-pin.gastro .poi-restaurant-icon{
 width:20px!important;height:20px!important;display:block!important;margin:0!important;
 fill:none!important;stroke:#fff!important;stroke-width:1.8!important;
 stroke-linecap:round!important;stroke-linejoin:round!important
}


/* V26 — Bistro Krpko: ikona príboru aj v kruhu detailnej karty */
#placeIcon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
}
#placeIcon .detail-restaurant-icon{
    display:block!important;
    width:22px!important;
    height:22px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}

/* V27 — definitívna ikona Bistro Krpko v detailnej karte */
#placeIcon .bistro-detail-svg{
    width:22px!important;
    height:22px!important;
    display:block!important;
    fill:none!important;
    stroke:#fff!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}

/* V31 — iba HERO: rozloženie podľa stránky Kontakt/Doprava */
@media(min-width:768px){
  .okolie-page .okolie-hero-content.subpage-hero-unified-inner{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
}
.okolie-page .okolie-hero-main{
  min-width:0;
}
.okolie-page .okolie-hero-eyebrow{
  margin:0 0 17px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
}
.okolie-page .okolie-hero-note{
  width:310px;
  flex:0 0 310px;
  margin:0 70px 0 40px;
  color:#fff;
  text-align:center;
  font-family:var(--krp-font);
  font-size:27px;
  line-height:1.15;
  transform:rotate(-7deg);
  text-shadow:0 2px 8px #0005;
}
.okolie-page .okolie-hero-mountains{
  margin-top:8px;
  font-size:30px;
}
@media(max-width:991.98px) and (min-width:768px){
  .okolie-page .okolie-hero-note{margin-right:0;}
}
@media(max-width:767.98px){
  .okolie-page .okolie-hero-note{display:none!important;}
  .okolie-page .okolie-hero-eyebrow{margin-bottom:12px;}
}