/* =========================================================
   NP KOZARA KIOSK
   style.css
   - fullscreen kiosk layout
   - bg.jpg kao globalna pozadina
   - logo velik na language screenu
   - manji header logo unutar aplikacije
   - uredne home/explore kartice
   - split content layout
   - galerija + lightbox
   - rich single pages (rules / nature)
   ========================================================= */

:root{
  --bg-dark: rgba(7, 16, 24, 0.62);
  --bg-darker: rgba(5, 12, 18, 0.78);
  --panel: rgba(11, 20, 28, 0.62);
  --panel-strong: rgba(11, 20, 28, 0.82);
  --panel-soft: rgba(255,255,255,0.10);
  --border: rgba(255,255,255,0.16);
  --border-strong: rgba(255,255,255,0.24);

  --text: #f5f8fb;
  --muted: rgba(245,248,251,0.76);
  --soft: rgba(245,248,251,0.56);

  --accent: #dbe97a;
  --accent-2: #a8d5b1;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;

  --shadow-lg: 0 24px 60px rgba(0,0,0,0.32);
  --shadow-md: 0 14px 30px rgba(0,0,0,0.24);
  --shadow-sm: 0 8px 20px rgba(0,0,0,0.18);

  --topbar-h: 92px;
  --content-max: 1760px;

  --blur-bg: 12px;
  --blur-panel: 14px;
}

/* =========================
   Reset
   ========================= */
*{ box-sizing:border-box; }

html,
body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

body{
  position:relative;
  overflow:hidden;
  color:var(--text);
  background:#081018;
  font-family:"Segoe UI","Noto Sans",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* =========================
   Global background
   ========================= */
.bg{
  position:fixed;
  inset:-40px;
  background:url("./assets/bg.jpg") center center / cover no-repeat;
  filter:blur(var(--blur-bg));
  transform:scale(1.08);
  z-index:-3;
}

.bgShade{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg, rgba(4,10,16,0.50) 0%, rgba(4,10,16,0.68) 100%),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08) 0%, transparent 38%),
    radial-gradient(circle at 80% 30%, rgba(150,180,120,0.10) 0%, transparent 32%),
    linear-gradient(135deg, rgba(6,12,18,0.32) 0%, rgba(6,12,18,0.72) 100%);
}

/* =========================
   Topbar
   ========================= */
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 28px;
  z-index:20;
  pointer-events:none;
}

.topbar::before{
  content:"";
  position:absolute;
  inset:12px 18px 0 18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(10,18,24,0.58), rgba(10,18,24,0.42));
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  pointer-events:none;
}

.topbar > *{
  position:relative;
  z-index:1;
  pointer-events:auto;
}

.spacer{
  flex:1;
}

.topbarLogo{
  height:52px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.28));
}

.iconBtn{
  min-width:120px;
  height:54px;
  padding:0 18px;
  border:none;
  border-radius:18px;
  background:rgba(255,255,255,0.10);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:18px;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}

.iconBtn:hover{
  background:rgba(255,255,255,0.15);
  border-color:rgba(255,255,255,0.22);
  transform:translateY(-1px);
}

.iconBtn:active{
  transform:translateY(1px);
}

.iconBtn .ico{
  font-size:20px;
  line-height:1;
}

.iconBtn .txt{
  line-height:1;
}

/* =========================
   Main view
   ========================= */
.view{
  position:relative;
  width:100%;
  height:100%;
  padding-top:var(--topbar-h);
}

.container{
  width:100%;
  height:100%;
  padding:18px 28px 28px;
}

.section{
  width:100%;
  max-width:var(--content-max);
  height:100%;
  margin:0 auto;
}

/* =========================
   Basic typography
   ========================= */
.h1{
  margin:0;
  font-size:54px;
  line-height:1.06;
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
  text-shadow:0 10px 30px rgba(0,0,0,0.20);
}

.p{
  margin:0;
  font-size:22px;
  line-height:1.5;
  color:var(--muted);
}

.muted{
  color:var(--muted);
}

/* =========================
   Language screen
   ========================= */
.lang-screen{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lang-card{
  width:min(760px, 92vw);
  min-height:680px;
  border-radius:36px;
  padding:46px 50px 42px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  text-align:center;
  background:linear-gradient(180deg, rgba(10,18,24,0.54), rgba(10,18,24,0.68));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(var(--blur-panel));
  -webkit-backdrop-filter:blur(var(--blur-panel));
}

.lang-card img{
  display:block;
  width:min(340px, 66%);
  max-height:280px;
  object-fit:contain;
  margin:0 auto 10px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,0.28));
}

.lang-card .h1{
  font-size:52px;
}

.lang-card .p{
  font-size:24px;
  color:rgba(255,255,255,0.82);
}

.lang-actions{
  width:100%;
  max-width:500px;
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.lang-actions .btn{
  width:100%;
  min-height:92px;
  font-size:28px;
  border-radius:22px;
}

/* =========================
   Generic buttons
   ========================= */
.btn{
  appearance:none;
  border:none;
  outline:none;
  cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:18px;
  padding:16px 22px;
  font-size:18px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.25px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.24);
}

.btn:active{
  transform:translateY(1px);
}

.btnPrimary{
  background:rgba(218, 233, 122, 0.24);
  border:1px solid rgba(218, 233, 122, 0.34);
  color:#fff;
}

.btnPrimary:hover{
  background:rgba(218, 233, 122, 0.32);
  border-color:rgba(218, 233, 122, 0.46);
}

.btnGhost{
  background:rgba(255,255,255,0.08);
}

/* =========================
   Home / Explore page layouts
   ========================= */
.home-layout,
.explore-layout{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:28px;
}

.home-hero,
.explore-hero{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 6px 0;
}

.home-cards,
.explore-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  min-height:0;
}

/* =========================
   Cards
   ========================= */
.card{
  position:relative;
  overflow:hidden;
  min-height:340px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:var(--shadow-lg);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
  isolation:isolate;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,0.26);
}

.cardThumb{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  filter:saturate(1.03) contrast(1.04);
}

.cardOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.24) 36%, rgba(0,0,0,0.68) 100%);
  z-index:0;
}

.cardContent{
  position:absolute;
  inset:auto 0 0 0;
  padding:26px 26px 30px;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cardTitle{
  font-size:34px;
  line-height:1.08;
  font-weight:800;
  color:#fff;
  text-shadow:0 8px 24px rgba(0,0,0,0.26);
}

.cardMeta{
  font-size:18px;
  line-height:1.45;
  color:rgba(255,255,255,0.82);
}

.cardArrow{
  position:absolute;
  top:22px;
  right:22px;
  z-index:1;
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:700;
  color:#fff;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:var(--shadow-sm);
}

.card:not(:has(.cardThumb)){
  background:linear-gradient(180deg, rgba(15,28,38,0.72), rgba(10,20,28,0.82));
}

/* =========================
   Split content page
   ========================= */
.split{
  width:100%;
  max-width:var(--content-max);
  height:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:24px;
}

.panel{
  min-height:0;
  border-radius:30px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, rgba(10,18,24,0.66), rgba(10,18,24,0.78));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.panelHead{
  flex:0 0 auto;
  min-height:92px;
  padding:22px 24px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.panelTitle{
  font-size:30px;
  line-height:1.15;
  font-weight:800;
  color:#fff;
}

.panelHint{
  margin-top:6px;
  font-size:16px;
  color:var(--soft);
}

.panelBody{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:26px 28px 30px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.22) transparent;
}

.panelBody::-webkit-scrollbar{
  width:10px;
}

.panelBody::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.22);
  border-radius:999px;
}

.panelBody::-webkit-scrollbar-track{
  background:transparent;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.galleryWrap{
  flex:1 1 auto;
  min-height:0;
  padding:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* =========================
   Content HTML styling
   ========================= */
.panelBody h1,
.panelBody h2,
.panelBody h3,
.panelBody h4{
  margin:0 0 14px;
  color:#fff;
  line-height:1.15;
  font-weight:800;
}

.panelBody h1{ font-size:38px; }
.panelBody h2{ font-size:28px; margin-top:24px; }
.panelBody h3{ font-size:22px; margin-top:18px; }

.panelBody p,
.panelBody li{
  font-size:20px;
  line-height:1.62;
  color:rgba(255,255,255,0.90);
}

.panelBody p{
  margin:0 0 16px;
}

.panelBody ul,
.panelBody ol{
  margin:0 0 16px 22px;
  padding:0;
}

.panelBody strong{
  color:#fff;
}

.panelBody img{
  max-width:100%;
  height:auto;
  border-radius:16px;
}

/* =========================
   Gallery
   ========================= */
.gallery{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.galleryMainWrap{
  position:relative;
  flex:0 0 75%;
  width:100%;
  min-height:0;
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:var(--shadow-md);
}

.galleryMainImage{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  cursor:pointer;
  transition:transform .18s ease, opacity .18s ease;
}

.galleryMainImage:hover{
  transform:scale(1.01);
}

.galleryFullscreenBtn{
  position:absolute;
  right:14px;
  bottom:14px;
  min-height:48px;
  padding:0 16px;
  font-size:16px;
  border-radius:14px;
  background:rgba(10,18,24,0.62);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:var(--shadow-sm);
}

.galleryThumbs{
  flex:0 0 25%;
  min-height:0;
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  align-items:flex-start;
  padding:2px 2px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.22) transparent;
}

.galleryThumbs::-webkit-scrollbar{
  height:8px;
}

.galleryThumbs::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.22);
  border-radius:999px;
}

.galleryThumbs::-webkit-scrollbar-track{
  background:transparent;
}

.galleryThumbBtn{
  appearance:none;
  border:none;
  outline:none;
  padding:0;
  background:none;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  box-shadow:var(--shadow-sm);
  border:2px solid transparent;
  transition:transform .16s ease, border-color .16s ease, opacity .16s ease;
  flex:0 0 170px;
}

.galleryThumbBtn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.20);
}

.galleryThumbBtn.is-active{
  border-color:rgba(219, 233, 122, 0.85);
}

.galleryThumbBtn.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);
  pointer-events:none;
}

.galleryThumbImage{
  width:100%;
  height:108px;
  display:block;
  object-fit:cover;
  background:rgba(255,255,255,0.06);
}

.gempty{
  font-size:19px;
  color:var(--muted);
  padding:18px 6px;
}

/* =========================
   Modal
   ========================= */
.hidden{
  display:none !important;
}

.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0.46);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.modalCard{
  position:relative;
  width:min(640px, 92vw);
  border-radius:28px;
  padding:34px 28px 28px;
  background:linear-gradient(180deg, rgba(10,18,24,0.86), rgba(10,18,24,0.92));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow-lg);
}

.modalTitle{
  font-size:30px;
  font-weight:800;
  line-height:1.18;
  color:#fff;
  text-align:center;
  margin-bottom:24px;
}

.modalBtns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.modalBtns .btn{
  min-height:72px;
  font-size:22px;
  border-radius:18px;
}

.modalClose{
  position:absolute;
  top:14px;
  right:14px;
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  font-size:22px;
  color:#fff;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
}

/* =========================
   Lightbox
   ========================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:70;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.84);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:36px;
}

.lightbox.open{
  display:flex;
}

.lbInner{
  position:relative;
  width:min(1600px, 100%);
  height:min(900px, 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.lbImg{
  max-width:100%;
  max-height:100%;
  border-radius:22px;
  object-fit:contain;
  box-shadow:0 28px 70px rgba(0,0,0,0.42);
  background:#0d141b;
}

.lbClose,
.lbNav{
  position:absolute;
  border:none;
  cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
}

.lbClose{
  top:-10px;
  right:-10px;
  width:58px;
  height:58px;
  border-radius:50%;
  font-size:28px;
  font-weight:700;
}

.lbNav{
  top:50%;
  transform:translateY(-50%);
  width:64px;
  height:84px;
  border-radius:20px;
  font-size:42px;
  font-weight:400;
}

.lbPrev{ left:-10px; }
.lbNext{ right:-10px; }

.lbCap{
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  min-width:220px;
  max-width:80%;
  padding:12px 18px;
  border-radius:16px;
  text-align:center;
  font-size:17px;
  color:#fff;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* =========================
   Rich content pages
   Nature / Rules
   ========================= */
.content-image{
  width:100%;
  display:block;
  margin:24px 0 28px;
  border-radius:22px;
  object-fit:cover;
  max-height:420px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 40px rgba(0,0,0,0.26);
  background:rgba(255,255,255,0.04);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.content-image:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 24px 50px rgba(0,0,0,0.32);
}

.quote-box{
  margin:28px 0;
  padding:24px 26px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:var(--shadow-sm);
}

.quote-box .p{
  font-size:24px;
  line-height:1.55;
}

.quote-box .caption{
  margin-top:12px;
  opacity:.88;
}

.rules-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}

.rules-grid-large{
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.rule{
  background:rgba(255,255,255,0.05);
  padding:20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  text-align:center;
}

.rule img{
  width:60px;
  margin-bottom:10px;
}

.rule-large{
  padding:26px 24px;
  border-radius:22px;
  text-align:left;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:var(--shadow-sm);
}

.rule-large img{
  width:96px;
  height:96px;
  object-fit:contain;
  display:block;
  margin-bottom:14px;
}

.rule-large h3{
  margin:0 0 12px;
  font-size:26px;
  line-height:1.2;
  color:#fff;
}

.nature-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
  margin-bottom:10px;
}

.nature-box{
  background:rgba(255,255,255,0.04);
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:var(--shadow-sm);
}

.nature-box img{
  width:100%;
  display:block;
  border-radius:16px;
  cursor:pointer;
  max-height:320px;
  object-fit:cover;
}

.caption{
  text-align:center;
  margin-top:10px;
  font-weight:600;
  color:rgba(255,255,255,0.88);
}

.squirrel-box{
  display:flex;
  align-items:center;
  gap:20px;
  background:rgba(255,255,255,0.05);
  padding:20px;
  border-radius:16px;
  margin-top:30px;
}

.squirrel-box img{
  width:120px;
}

.squirrel-hero{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:24px;
  align-items:center;
  margin-top:28px;
  margin-bottom:8px;
  padding:22px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:var(--shadow-md);
}

.squirrel-hero img{
  width:100%;
  max-height:340px;
  object-fit:contain;
  cursor:pointer;
  display:block;
}

.squirrel-hero-text h2{
  margin:0 0 10px;
  font-size:34px;
  color:#fff;
  line-height:1.15;
}

.rules-image-popup{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
}

.rules-image-popup-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.rules-image-popup-inner{
  position:relative;
  z-index:1;
  width:min(92vw, 1400px);
  height:min(88vh, 900px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.rules-image-popup-inner img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  background:rgba(10,18,24,0.75);
}

.rules-image-popup-close{
  position:absolute;
  top:-10px;
  right:-10px;
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  color:#fff;
  font-size:24px;
  cursor:pointer;
  z-index:2;
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:var(--shadow-sm);
}

/* Lists inside rich pages */
.panelBody ul.p,
.panelBody ol.p{
  margin:8px 0 18px 24px;
  padding:0;
}

.panelBody ul.p li,
.panelBody ol.p li{
  margin-bottom:10px;
  padding-left:2px;
}

/* =========================
   Utility
   ========================= */
.toolbar,
.breadcrumb{
  display:none !important;
}

/* =========================
   1920x1080 fine tune
   ========================= */
@media (max-width:1600px){
  .h1{ font-size:46px; }
  .p{ font-size:20px; }

  .card{ min-height:300px; }
  .cardTitle{ font-size:28px; }
  .cardMeta{ font-size:17px; }

  .panelTitle{ font-size:26px; }
  .panelBody h1{ font-size:34px; }
  .panelBody h2{ font-size:26px; }
  .panelBody p,
  .panelBody li{ font-size:18px; }

  .galleryThumbBtn{
    flex:0 0 150px;
  }

  .galleryThumbImage{
    height:96px;
  }

  .galleryFullscreenBtn{
    font-size:15px;
  }

  .content-image{
    max-height:360px;
  }

  .rule-large img{
    width:84px;
    height:84px;
  }

  .rule-large h3{
    font-size:23px;
  }

  .squirrel-hero{
    grid-template-columns:360px 1fr;
  }

  .squirrel-hero-text h2{
    font-size:30px;
  }

  .quote-box .p{
    font-size:21px;
  }
}

@media (max-width:1280px){
  .home-cards,
  .explore-cards{
    grid-template-columns:1fr;
  }

  .split{
    grid-template-columns:1fr;
  }

  .lang-card{
    min-height:auto;
  }

  .galleryMainWrap{
    flex:0 0 68%;
  }

  .galleryThumbs{
    flex:0 0 32%;
  }

  .rules-grid,
  .rules-grid-large,
  .nature-compare,
  .squirrel-hero{
    grid-template-columns:1fr;
  }

  .squirrel-hero img{
    max-height:280px;
  }

  .content-image{
    max-height:300px;
  }
}