/* CSS */
.button-4 {
  appearance: none;
  background-color: #4caf5000;
  border: 1px solid rgba(255,255,255);
  border-radius: 6px;
  /* box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset; */
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  list-style: none;
  padding: 6px 16px;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}
.button-4:hover {
  background-color: #F3F4F6;
  text-decoration: none;
  transition-duration: 0.1s;
}
.button-4:disabled {
  background-color: #FAFBFC;
  border-color: rgba(27, 31, 35, 0.15);
  color: #959DA5;
  cursor: default;
}
.button-4:active {
  background-color: #EDEFF2;
  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
  transition: none 0s;
}
.button-4:focus {
  outline: 1px transparent;
}
.button-4:before {
  display: none;
}
.button-4:-webkit-details-marker {
  display: none;
}
.button-4 a{
  color: #fff !important;
}
@media only screen and (max-width: 600px) {
    .oempir-slider-container{
        height: 23vh;
    }
    .oempit-slider-content { 
        padding: 0px 8px; 
        top: 15%;
        margin-left: 20%;
        width: 25%;
    }
    .oempit-slider-content h2{
      font-size: 16px;
      font-weight: bold;
    }
    .button-4 {
        font-size: 11px;
        line-height: 14px;
        padding: 6px 6px;
    }
  }

  /** start */
.swiper-wrapper{
  background-color: #fff;
}



  %transition_all_03s {
    transition:all .3s ease;
  }
  %backface_visibility_hidden{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  
  *, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .swiper-container {
    width: 80%;
    height: 100vh;
    display:inline-block;
    vertical-align:top;
    float:left;
    transition:opacity .6s ease, transform .3s ease;
    &.nav-slider{
      width:20%;
      padding-left:5px;
      .swiper-slide{
        cursor:pointer;
        opacity:.4;
        transition:opacity .3s ease;
        &.swiper-slide-active{
          opacity:1;
        }
        .content{
          width:100%;
          .title{
            font-size:20px;
          }
        }
      }
    }
    &:hover{
      .swiper-button-prev,
      .swiper-button-next{
        transform:translateX(0);
        opacity:1;
        visibility:visible;
      }
    }
    &.loading{
      opacity:0;
      visibility:hidden;
    }
  }
  .swiper-wrapper{
  
  }
  .swiper-slide{
    overflow: hidden;
    @extend %backface_visibility_hidden;
    .slide-bgimg{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-position:center;
      background-size:cover;
    }
    .entity-img{
      display:none;
    }
    .content{
      position:absolute;
      top:40%;
      left:0;
      width:50%;
      padding-left:5%;
      color:#fff;
      .title{
        font-size:2.6em;
        font-weight:bold;
        margin-bottom:30px;
      }
      .caption{
        display:block;
        font-size:20px;
        line-height:1.4;
        /* transform:translateX(50px); */
        opacity:0.9;
        transition:opacity .3s ease, transform .7s ease;
        &.show{
          transform:translateX(0);
          opacity:1;
        }
      }
    }
  }
  [class^="swiper-button-"]{
    width:44px;
    opacity:0;
    visibility:hidden;
    @extend %transition_all_03s;
  }
  .swiper-button-prev{
    transform:translateX(50px);
  }
  .swiper-button-next{
    transform:translateX(-50px);
  }