/* Mixins
--------------------------------------------------------------- */
/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);
*/
.whiteout-slider-section {
  position: relative; }
  @media (max-width: 767px) {
    .whiteout-slider-section {
      padding: 60px 0; } }
  @media (min-width: 768px) {
    .whiteout-slider-section.small_slider .slider-text {
      top: 4vw; } }
  .whiteout-slider-section .slider-text {
    position: relative;
    top: 0;
    width: 100%;
    margin: 5vw 0;
    padding: 0 15px;
    pointer-events: none;
    z-index: 2;
    color: #121314; }
    @media (min-width: 768px) {
      .whiteout-slider-section .slider-text {
        position: absolute;
        top: 5vw;
        width: 66.66%;
        padding: 0 10vw; } }
    .whiteout-slider-section .slider-text h2 {
      font-size: 32px;
      font-size: calc(32px + (60 - 32) * ((100vw - 300px) / (1920 - 300)));
      line-height: calc(40px + (100 - 40) * ((100vw - 300px) / (1920 - 300)));
      font-weight: 300;
      margin-bottom: 5px; }
    .whiteout-slider-section .slider-text p {
      font-size: 24px;
      font-size: calc( 20px + (24 - 20) * ((100vw - 300px) / (1920 - 300))); }
  .whiteout-slider-section .bg_imgs {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    pointer-events: none; }
    .whiteout-slider-section .bg_imgs img {
      height: 100%;
      width: 100%;
      object-fit: cover; }
    .whiteout-slider-section .bg_imgs:before {
      content: "";
      z-index: 2;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      display: block; }
  .whiteout-slider-section .swiper-container {
    height: 100vh;
    height: calc(100vh - 96px); }
    .whiteout-slider-section .swiper-container.small_slider {
      max-height: 500px; }
      .whiteout-slider-section .swiper-container.small_slider .swiper-wrapper .swiper-slide .content_wrap .slide-post-title {
        font-size: calc(28px + (36 - 28) * ((100vw - 300px) / (1920 - 300)));
        line-height: 40px;
        margin-bottom: 1rem; }
    @media (max-width: 767px) {
      .whiteout-slider-section .swiper-container {
        height: 413px; } }
    @media (min-width: 768px) {
      .whiteout-slider-section .swiper-container:after {
        content: "";
        position: absolute;
        width: 66.66%;
        display: block;
        z-index: 1;
        height: 100%;
        top: 0;
        left: 0;
        background: white;
        background: -moz-linear-gradient(90deg, white 30%, rgba(255, 255, 255, 0.8) 100%);
        background: -webkit-linear-gradient(90deg, white 30%, rgba(255, 255, 255, 0.8) 100%);
        background: linear-gradient(90deg, white 30%, rgba(255, 255, 255, 0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1); } }
    @media (min-width: 768px) {
      .whiteout-slider-section .swiper-container:hover .swiper-button-next:after,
      .whiteout-slider-section .swiper-container:hover .swiper-button-prev:after {
        opacity: 1; } }
    .whiteout-slider-section .swiper-container .swiper-wrapper {
      align-items: center; }
      .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide {
        transition: all 1s !important; }
        .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active, .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-next {
          pointer-events: none; }
        @media (max-width: 767px) {
          .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide {
            height: 75%;
            opacity: 0.5; }
            .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active, .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-duplicate-active {
              height: 100%;
              opacity: 1; } }
        .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide .content_wrap {
          color: #fff;
          position: absolute;
          bottom: 0;
          left: 0;
          margin: 40px; }
          .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide .content_wrap .slide-post-category {
            font-size: 14px;
            text-transform: uppercase;
            font-weight: bold; }
            @media (min-width: 768px) {
              .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide .content_wrap .slide-post-category {
                font-size: calc( 18px + (20 - 18) * ((100vw - 300px) / (1920 - 300))); } }
          .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide .content_wrap .slide-post-title {
            font-size: calc( 24px + (48 - 24) * ((100vw - 300px) / (1920 - 300)));
            line-height: clamp(30px, 4vw, 60px); }
            @media (min-width: 1920px) {
              .whiteout-slider-section .swiper-container .swiper-wrapper .swiper-slide .content_wrap .slide-post-title {
                font-size: 48px;
                line-height: 60px; } }
    .whiteout-slider-section .swiper-container .swiper-button-next:after,
    .whiteout-slider-section .swiper-container .swiper-button-prev:after {
      color: #71706f;
      transition: opacity 0.3s; }
      @media (min-width: 768px) {
        .whiteout-slider-section .swiper-container .swiper-button-next:after,
        .whiteout-slider-section .swiper-container .swiper-button-prev:after {
          opacity: 0; } }