body {  
background-color: var(--color-primary);
}

.news-item-detail img {
	border-radius: 1.5rem;
}

.news-item-detail .vizitka .text-img img {
    border-radius: 50%;
}

.site-msg {
  background-color: var(--color-secondary-hover);
}


.content-wrapper {
background-color: var(--color-tertiary);
  }


.breadcrumbs {
background-color: var(--color-tertiary);

}

.sidebar-inner {
border-width: 0px;
}

.banner-wrapper {
color: var(--color-primary);
}


.image-wrapper {
  position: relative;
  width: 100%;
  overflow-x: hidden;          
  display: flex;
  justify-content: center;   
}

.image-wrapper img {
  max-width: 100%;         
  width: 95%;
  transition: transform 1s ease-out;
}


.image-wrapper.right img {
  transform: translateX(2%); 
}

@media (min-width: 1024px) {
  .image-wrapper.right {
    width: 100%;
    overflow: visible;
  }

  .image-wrapper.right img {
    transform: translateX(250px); 
  }
}


.image-wrapper.left img {
  transform: translateX(-2%);  
}


@media (min-width: 1024px) {
  .image-wrapper.left {
    width: 100%;
    overflow: visible;
  }

  .image-wrapper.left img {
    transform: translateX(-250px);
  }
}

.logo-slider {
  overflow: hidden;
  background: #f9fdfe;
  padding: 40px 0;
  position: relative;
}

.logo-slider::before,
.logo-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logo-slider::before {
  left: 0;
  background: linear-gradient(to right, #f9fdfe 0%, rgba(249,253,254,0) 100%);
}

.logo-slider::after {
  right: 0;
  background: linear-gradient(to left, #f9fdfe 0%, rgba(249,253,254,0) 100%);
}

.logo-track {
  display: flex;
  will-change: transform;
}

.logo {
  flex: 0 0 auto;
  margin-right: 3rem;
  transition: transform 0.3s ease;
}

.logo:last-child {
  margin-right: 0;
}

.logo img {
  height: 45px;
  width: auto;
  display: block;
  backface-visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 0;
  filter: invert(1);
}

@media (hover: hover) and (pointer: fine) {
  .logo img:hover {
    transform: scale(1.05);
    opacity: 0.9;
  }
}


/* =========================
   BORDER RADIUS
========================= */

.border-radius {
    border-radius: 3rem;
}

@media (max-width: 767px) {

    .border-radius {
        border-radius: 1.5rem;
    }

}

/* =====================================================
   IMAGE – VNITŘNÍ RÁMEČEK
===================================================== */

.inner-border {
    position: relative;
    overflow: hidden;
    border-radius: 3rem;
}


/* OBRÁZEK */

.inner-border img {
    display: block;
    width: 100%;
    border-radius: 3rem;
}


/* VNITŘNÍ RÁMEČEK */

.inner-border::after {
    content: "";
    position: absolute;

    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;

    border: 2px solid #09171a;
    border-radius: 2.3rem;

    pointer-events: none;
}


/* =========================
   MOBIL
========================= */

@media (max-width: 767px) {

    .inner-border {
        border-radius: 1.5rem;
    }

    .inner-border img {
        border-radius: 1.5rem;
    }

    .inner-border::after {
        border-radius: 1rem;
    }
}

/* =====================================================
   VIDEO SLIDER

   DESKTOP:
   CCA 4,3 VIDEA

   TABLET:
   CCA 2,5 VIDEA

   MOBILE:
   CCA 1,3 VIDEA

   HORIZONTÁLNÍ SWIPE
===================================================== */


/* =========================
   1) SLIDER
========================= */

.video-slider {
    display: flex !important;
    align-items: flex-start !important;

    gap: 3rem !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 1rem 0 2rem !important;

    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;

    scrollbar-width: none !important;

    box-sizing: border-box !important;
}


/* =========================
   2) SCHOVÁNÍ SCROLLBARU
========================= */

.video-slider::-webkit-scrollbar {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
}


/* =========================
   3) VIDEO – DESKTOP

   CCA 4,3 VIDEA
========================= */

.video-slider > .shorts-video {
    position: relative !important;

    flex: 0 0 22% !important;

    width: 22% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    scroll-snap-align: start;

    box-sizing: border-box !important;
}


/* =========================
   4) IFRAME

   FORMÁT 9 : 16
========================= */

.video-slider > .shorts-video iframe {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 9 / 16 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    box-sizing: border-box !important;
}


/* =====================================================
   5) TABLET

   CCA 2,5 VIDEA
===================================================== */

@media (max-width: 1023px) {

    .video-slider {
        gap: 2rem !important;
    }


    .video-slider > .shorts-video {
        flex: 0 0 38% !important;

        width: 38% !important;
    }

}


/* =====================================================
   6) MOBILE

   CCA 1,3 VIDEA
===================================================== */

@media (max-width: 767px) {

    .video-slider {
        gap: 1.5rem !important;

        padding-top: 1rem !important;
        padding-bottom: 1.5rem !important;
    }


    .video-slider > .shorts-video {
        flex: 0 0 76% !important;

        width: 76% !important;
    }

}