:root {
  --cz-timeline-thumb-height: clamp(6rem, 12vw, 8.125rem); }

.upk-cz-timeline-slider-wrap {
  position: relative;
  width: 100%;
  height:100%;
  text-align: center;
  position: relative;
  overflow: hidden; 
  object-fit: cover;}
  
  .upk-cz-timeline-slider-wrap .upk-image-wrap {
    width: 100%;
    height: 650px;
    margin-right: auto;
    margin-left: auto;
    padding: 20px 25px;
    
     }
   
    
    .upk-cz-timeline-slider-wrap .upk-image-wrap .upk-img {
      width: 100%;
      /*height: clamp(16.875rem, 40vw, 31.25rem);*/
      height: 100%;
      background-color: #fff;
      border:20px solid #000;
      object-fit: cover;
      /*border: 20px solid #000;*/
      vertical-align: middle;
      /*border-radius: 10px;*/ }

      .upk-cz-timeline-slider-wrap .upk-image-wrap .upk-img img {
        background-color: #fff;
      }

  .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs {
    position: absolute;
    text-align: center;
    top: 650px;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    margin-left: 25px;
    margin-right: 25px;
    background-color: #000 !important;
    right: 0;
    left: 0; }
   
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item {
      /*height: var(--cz-timeline-thumb-height);*/
      top:0;
      margin-left: -1px;
      width: 100px;
      height: 45px;
      overflow: auto;
      padding:0;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
      background: url(/assets/img/OJ_blackbutton2.png) no-repeat -6px center;
      background-size: cover;
      cursor: pointer;
       }

      .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item .upk-title {
        /*height: var(--cz-timeline-thumb-height);*/
        margin:0;
        margin-top: 3px;
        margin-left: -13px;
        width: 100%;
        position: relative; 
        font-family: "Avenir Next", sans-serif;
        font-size: 20px !important;
        color: #FFF !important;
        cursor: pointer;
        text-align: center;
      }

      .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item .upk-dot .upk-title {
        /*height: var(--cz-timeline-thumb-height);*/
        margin:0;
        position: relative; 
        font-family: "Avenir Next", sans-serif;
        font-size: 20px !important;
        color: #FFF !important;
      }

      .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item.swiper-slide-active {
          margin-left: -15px;
          z-index: 1 !important;
          background: url(/assets/img/OJ_redbutton3.png) no-repeat -6px center;
          background-size: cover;
      }

      .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item.swiper-slide-active .upk-title {
        
        margin-left: -5px;
        /*background-color: #D90429;*/
        
       
      }

      .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item.swiper-slide-active .upk-dot .upk-title {
        background: url(/assets/img/OJ_redbutton2.svg) no-repeat top center;
        background-size: cover;
        font-size: 20px !important;
        color: #FFF !important;
      }
      .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item.swiper-slide-active .upk-dot::after {
        /*background: #D90429;*/
        /*transform: translate(-50%, -50%) scale(3.0);*/
        transition-delay: 700ms; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-date,
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-post-time {
      font-size: clamp(0.75rem, 1.5vw, 1rem);
      text-transform: uppercase;
      font-weight: 700;
      color: #EF233C; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-post-time {
      margin-left: 5px; }
      .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-post-time i {
        margin-right: 2px; }

        .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-dot .upk-title {
          color: #fff;
        }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-dot {
      cursor: pointer; }
      .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-dot::after {
        content: '';
        position: absolute;
        width: clamp(0.938rem, 2vw, 1.25rem);
        height: clamp(0.938rem, 2vw, 1.25rem);
        /*border-radius: 100%;
        background: #ffffff;
        border-width: 2px;
        border-color: #EF233C;
        border-style: solid;*/
        /*background: none;*/
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        transition: transform .3s ease; }
      /*.upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-dot:hover::after {
        background: #D90429;
        transform: translate(-50%, -50%) scale(1.2); }*/

        .upk-cz-timeline-slider-wrap .upk-image-wrap .overlay {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0,0,0,0.5);
          z-index: 1;
          cursor: pointer;
        }
        

  .upk-cz-timeline-slider-wrap .upk-cz-timeline-main {
    /*margin-top: var(--cz-timeline-thumb-height)*/ 
   
    /*border: 1px solid #fff;*/
  }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-item.swiper-slide-active .upk-content {
      opacity: 1; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-content {
      position: relative;
      top: 50%;
      opacity: 0;
      /*margin: 10px 10px;*/
      margin-top: 10px;
      width: 100%; 
      z-index: 1;
    }
      
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-category-and-comment,
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-meta {
      display: inline-flex;
      align-items: center;
      /*margin-bottom: clamp(0.625rem, 1vw, 0.875rem);*/ }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-category a + a {
      margin-left: 5px; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-category a,
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-meta {
      font-size: clamp(0.75rem, 1vw, 0.875rem);
      color: #515258;
      text-transform: uppercase; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-category a,
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-title a,
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-author a {
      text-decoration: none;
      transition: all .3s ease-in-out; }
      .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-category a:hover,
      .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-title a:hover,
      .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-author a:hover {
        color: #D90429; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-title {
      margin: 0 0 clamp(0.625rem, 1vw, 0.875rem);
      font-size: clamp(1.25rem, 4vw, 2.25rem);
      font-weight: 700; }
      .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-title a {
        color: #282932; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-meta i {
      margin-right: 5px; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-meta .upk-author a {
      color: #515258; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-meta > div {
      position: relative;
      display: inline-flex;
      align-items: center; }
      .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-meta > div:before {
        content: attr(data-separator);
        margin: 0 5px; }
      .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-meta > div:nth-child(1)::before {
        display: none; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-post-time {
      margin-left: 15px; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-separator {
      margin: 0 15px; }
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-text {
      margin-top: 7%;
      /*font-size: clamp(0.875rem, 1.5vw, 1rem);*/
      color: #fff; }
      .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-text p {
        margin: 0; }
  .upk-cz-timeline-slider-wrap .upk-navigation-button {
    position: absolute;
    top: 40%;
    transform: translateY(-40%);
    width: 20px;
    height: 20px;
    color: #fff;
    /*padding: clamp(0.625rem, 1.5vw, 0.875rem);*/
    /*border-radius: 50%;*/
    transition: all .3s ease;
    /*background-color: #EF233C;*/
    z-index: 1;
    cursor: pointer;
    box-shadow: 0; }
    .upk-cz-timeline-slider-wrap .upk-navigation-button i {
      display: block; }
    .upk-cz-timeline-slider-wrap .upk-navigation-button:hover {
      /*background-color: #D90429;*/ }
    .upk-cz-timeline-slider-wrap .upk-navigation-button.upk-navigation-next {
      right: 16px; }
    .upk-cz-timeline-slider-wrap .upk-navigation-button.upk-navigation-prev {
      
      left: 16px; }

      .upk-cz-timeline-slider-wrap .upk-navigation-button .upk-arrow-background {
          transform: scale(2);
          position: absolute;
          z-index: 0;
          filter: brightness(0) invert(1); /*invert(0.5) sepia(1) saturate(5) hue-rotate(175deg) opacity(0.5)*/;
      }

      .change-color {
        filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
      }

      .upk-cz-timeline-slider-wrap .upk-navigation-button .upk-arrow-background img {
        

      }

      .upk-cz-timeline-slider-wrap .upk-navigation-button .upk-arrow-top {
        position: absolute;
        z-index: 1;
        top:0;
        right:-10px;
      }

      .upk-cz-timeline-slider-wrap .upk-navigation-button .upk-arrow-right-top {
        position: absolute;
        z-index: 1;
        top:0;
        left:-10px;
        
      }


      @media only screen and (max-width: 1336px)/*, only screen and (min-width: 1024px)*/{
      }


      @media only screen and (max-width: 1200px) {
      }

      @media only screen and (max-width: 1100px), only screen and (max-width: 1024px) {
      
      }

      
      


/* Mobile site */
@media only screen and (max-device-width: 480px), only screen and (max-width: 768px) {  
  
  
  .upk-cz-timeline-slider-wrap .upk-image-wrap {
    width: 100%;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
    padding: 10px 10px;
    
     }
   
    
    .upk-cz-timeline-slider-wrap .upk-image-wrap .upk-img {
      width: 100%;
      /*height: clamp(16.875rem, 40vw, 31.25rem);*/
      height: 100%;
      background-color: #fff;
      border:20px solid #000;
      object-fit: cover;
      /*border: 20px solid #000;*/
      text-align: center;
      vertical-align: middle;
      /*border-radius: 10px;*/ }

      .upk-cz-timeline-slider-wrap .upk-image-wrap .upk-img img {
        background-color: #fff;
      }
  
  
 


 
  .upk-cz-timeline-slider-wrap .upk-cz-timeline-main .upk-content {
    position: relative;
    margin-top:65px;
    
  }
 
  

  .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs {
    top: 300px;
    border:2px solid #fff;
    margin-left: 10px;
    margin-right: 10px;
   }
   
    .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item {
      /*height: var(--cz-timeline-thumb-height);*/
      height: 50px;
      margin-left: -2px;
      border: none;
      /*background: url(/assets/img/OJ_mobile_blackbutton.svg) no-repeat -2px -2px;*/
      background-size: cover;
      
       }


       .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item.swiper-slide-active {
          margin-left: -13px;
          
          z-index: 1 !important;
          /*background: url(/assets/img/OJ_mobile_redbutton.svg) no-repeat 0 0;*/
          background-size: cover;
      }

      .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item.swiper-slide-active  .upk-title {
        margin-top: 8px;
        font-size: 20px !important;
        margin-left: -10px;
      }

      .upk-cz-timeline-slider-wrap .upk-cz-timeline-thumbs .upk-item .upk-title {
          font-size: 18px;
          margin-top: 8px;
          margin-left: -20px;
      }

.upk-cz-timeline-slider-wrap .upk-navigation-button {
  top:30%;
}


  .upk-cz-timeline-slider-wrap .upk-navigation-button.upk-navigation-next {
    right: 8px; }
  .upk-cz-timeline-slider-wrap .upk-navigation-button.upk-navigation-prev {
    
    left: 8px; }

    .upk-cz-timeline-slider-wrap .upk-navigation-button .upk-arrow-background {
        transform: scale(1.2);
        position: absolute;
        z-index: 0;
        filter: brightness(0) invert(1); /*invert(0.5) sepia(1) saturate(5) hue-rotate(175deg) opacity(0.5)*/;
    }

    .change-color {
      filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
    }

    .upk-cz-timeline-slider-wrap .upk-navigation-button .upk-arrow-background img {
      

    }

    .upk-cz-timeline-slider-wrap .upk-navigation-button .upk-arrow-top {
      position: absolute;
      z-index: 1;
      top:0;
      right:-2px;
    }

    .upk-cz-timeline-slider-wrap .upk-navigation-button .upk-arrow-right-top {
      position: absolute;
      z-index: 1;
      top:0;
      left:-2px;
      
    }

}