You are here

Home » API reference » Media Hero Slider 9.0.x

varbase-heroslider-media.component.css in Media Hero Slider 9.0.x

Same filename and directory in other branches
  1. 8.7 css/components/varbase-heroslider-media.component.css
/* Varbase Hero slider media style */
.varbase-heroslider-media {
  position: relative;
  overflow: hidden;
}

.varbase-heroslider-media .slick-slide .slide__caption {
  position: absolute;
  top: auto;
  bottom: 20%;
  left: 0;
  -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  -o-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -o-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, -o-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
  opacity: 0;
  filter: alpha(opacity=0);
}

.varbase-heroslider-media .slick-slide .img-responsive {
  -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: -o-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -o-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -webkit-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}

.varbase-heroslider-media .slick-slide .unpublished {
  height: auto;
  padding: 0;
}

.varbase-heroslider-media .slick-active .slide__caption {
  -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -o-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -o-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -o-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  filter: alpha(opacity=100);
}

.varbase-heroslider-media .slick-active .img-responsive {
  -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: -o-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -o-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.varbase-heroslider-media .slide__caption .slide__title a {
  color: #fff;
}

.varbase-heroslider-media .slide__caption .slick__text {
  color: #fff;
}

.varbase-heroslider-media .slick__arrow {
  top: 300px;
  -webkit-transform: translateY(-150px);
  -o-transform: translateY(-150px);
  transform: translateY(-150px);
}

.varbase-heroslider-media .slick__arrow .slick-arrow::before {
  color: #fff;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 768px) {
  .varbase-heroslider-media .slick__arrow {
    top: 600px;
    -webkit-transform: translateY(-300px);
    -o-transform: translateY(-300px);
    transform: translateY(-300px);
  }
}

.varbase-heroslider-media .slick-prev {
  right: auto;
  left: 0.63rem;
}

.varbase-heroslider-media .slick-next {
  right: 0.63rem;
  left: auto;
}

.varbase-heroslider-media .slide__link {
  margin: 0.63rem auto;
}

.varbase-heroslider-media .slide__link a {
  color: #fff;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
  justify-content: center;
  min-height: 300px;
  max-height: 300px;
}

@media screen and (min-width: 768px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media {
    min-height: 600px;
    max-height: 600px;
  }
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content-wrapper {
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {
  padding: 60px;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: calc(1.455rem + 2.46vw);
}

@media (min-width: 1200px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
    font-size: 3.3rem;
  }
}

@media screen and (min-width: 576px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
    font-size: calc(1.455rem + 2.46vw);
  }
}

@media screen and (min-width: 576px) and (min-width: 1200px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
    font-size: 3.3rem;
  }
}

@media screen and (min-width: 768px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
    font-size: calc(1.48125rem + 2.775vw);
  }
}

@media screen and (min-width: 768px) and (min-width: 1200px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
    font-size: 3.5625rem;
  }
}

@media screen and (min-width: 992px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
    font-size: calc(1.48125rem + 2.775vw);
  }
}

@media screen and (min-width: 992px) and (min-width: 1200px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
    font-size: 3.5625rem;
  }
}

@media screen and (min-width: 1200px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
    font-size: calc(1.48125rem + 2.775vw);
  }
}

@media screen and (min-width: 1200px) and (min-width: 1200px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
  .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
    font-size: 3.5625rem;
  }
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-brief {
  margin-top: 1rem;
  color: #fff;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link {
  margin-top: 1rem;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a {
  text-decoration: none;
  color: #fff;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:hover,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:focus,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:active {
  opacity: 0.7;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single {
  overflow: hidden;
  min-height: 300px;
  max-height: 300px;
  /* 1. No object-fit support: */
  /* 2. If supporting object-fit, overriding (1): */
}

@media screen and (min-width: 768px) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single {
    min-height: 600px;
    max-height: 600px;
  }
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .contextual-region {
  position: unset;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {
  position: relative;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 130vh;
  padding-bottom: 0;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .field--type-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {
  top: 0;
  left: 0;
  width: 100%;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {
  top: 0;
  left: 0;
  width: 100%;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media video {
  top: 0;
  left: 0;
  width: 100%;
}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media iframe {
  top: 0;
  left: 0;
  width: 100%;
}

@media (max-aspect-ratio: 16 / 9) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {
    position: relative;
    top: 50%;
    left: 50%;
    width: 240vw;
    height: 140vh;
    padding-bottom: 0 !important;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
  }
}

@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media iframe {
    position: absolute;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

@media screen and (min-width: 768px) {
  @supports ((-o-object-fit: cover) or (object-fit: cover)) {
    .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {
      position: unset;
    }
    .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {
      position: unset;
    }
  }
}

@media (max-aspect-ratio: 16 / 9) {
  [dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {
    right: 0;
    left: 0;
    -webkit-transform: translateY(-50%) translateX(0);
    -o-transform: translateY(-50%) translateX(0);
    transform: translateY(-50%) translateX(0);
  }
}

[dir="rtl"] .varbase-heroslider-media .slick-prev {
  right: 0.63rem;
  left: auto;
}

[dir="rtl"] .varbase-heroslider-media .slick-next {
  right: auto;
  left: 0.63rem;
}

File

css/components/varbase-heroslider-media.component.css
View source 
  1. /* Varbase Hero slider media style */

  2. .varbase-heroslider-media {

  3.   position: relative;

  4.   overflow: hidden;

  5. }

  6. 

  7. .varbase-heroslider-media .slick-slide .slide__caption {

  8.   position: absolute;

  9.   top: auto;

  10.   bottom: 20%;

  11.   left: 0;

  12.   -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  13.   -o-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -o-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  14.   transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  15.   transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  16.   transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, -o-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  17.   transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  18.   -webkit-transform: scale(0.95);

  19.   -o-transform: scale(0.95);

  20.   transform: scale(0.95);

  21.   opacity: 0;

  22.   filter: alpha(opacity=0);

  23. }

  24. 

  25. .varbase-heroslider-media .slick-slide .img-responsive {

  26.   -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  27.   -o-transition: -o-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  28.   transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  29.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  30.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -o-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  31.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  32.   -webkit-transform: scale(1.15);

  33.   -o-transform: scale(1.15);

  34.   transform: scale(1.15);

  35. }

  36. 

  37. .varbase-heroslider-media .slick-slide .unpublished {

  38.   height: auto;

  39.   padding: 0;

  40. }

  41. 

  42. .varbase-heroslider-media .slick-active .slide__caption {

  43.   -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  44.   -o-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -o-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  45.   transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  46.   transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  47.   transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -o-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  48.   transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  49.   -webkit-transform: scale(1);

  50.   -o-transform: scale(1);

  51.   transform: scale(1);

  52.   opacity: 1;

  53.   filter: alpha(opacity=100);

  54. }

  55. 

  56. .varbase-heroslider-media .slick-active .img-responsive {

  57.   -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  58.   -o-transition: -o-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  59.   transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  60.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  61.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -o-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  62.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  63.   -webkit-transform: scale(1);

  64.   -o-transform: scale(1);

  65.   transform: scale(1);

  66. }

  67. 

  68. .varbase-heroslider-media .slide__caption .slide__title a {

  69.   color: #fff;

  70. }

  71. 

  72. .varbase-heroslider-media .slide__caption .slick__text {

  73.   color: #fff;

  74. }

  75. 

  76. .varbase-heroslider-media .slick__arrow {

  77.   top: 300px;

  78.   -webkit-transform: translateY(-150px);

  79.   -o-transform: translateY(-150px);

  80.   transform: translateY(-150px);

  81. }

  82. 

  83. .varbase-heroslider-media .slick__arrow .slick-arrow::before {

  84.   color: #fff;

  85.   border-radius: 50%;

  86.   background-color: rgba(0, 0, 0, 0.3);

  87. }

  88. 

  89. @media screen and (min-width: 768px) {

  90.   .varbase-heroslider-media .slick__arrow {

  91.     top: 600px;

  92.     -webkit-transform: translateY(-300px);

  93.     -o-transform: translateY(-300px);

  94.     transform: translateY(-300px);

  95.   }

  96. }

  97. 

  98. .varbase-heroslider-media .slick-prev {

  99.   right: auto;

  100.   left: 0.63rem;

  101. }

  102. 

  103. .varbase-heroslider-media .slick-next {

  104.   right: 0.63rem;

  105.   left: auto;

  106. }

  107. 

  108. .varbase-heroslider-media .slide__link {

  109.   margin: 0.63rem auto;

  110. }

  111. 

  112. .varbase-heroslider-media .slide__link a {

  113.   color: #fff;

  114. }

  115. 

  116. .varbase-heroslider-media .node--type-varbase-heroslider-media {

  117.   display: -webkit-box;

  118.   display: -webkit-flex;

  119.   display: -ms-flexbox;

  120.   display: flex;

  121.   -webkit-flex-direction: row;

  122.   -ms-flex-direction: row;

  123.   flex-direction: row;

  124.   -webkit-box-direction: normal;

  125.   -webkit-box-orient: horizontal;

  126.   -webkit-flex-wrap: nowrap;

  127.   -ms-flex-wrap: nowrap;

  128.   flex-wrap: nowrap;

  129.   -ms-flex-pack: center;

  130.   -webkit-justify-content: center;

  131.   -webkit-box-pack: center;

  132.   justify-content: center;

  133.   min-height: 300px;

  134.   max-height: 300px;

  135. }

  136. 

  137. @media screen and (min-width: 768px) {

  138.   .varbase-heroslider-media .node--type-varbase-heroslider-media {

  139.     min-height: 600px;

  140.     max-height: 600px;

  141.   }

  142. }

  143. 

  144. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content-wrapper {

  145.   position: absolute;

  146.   z-index: 9;

  147.   top: 0;

  148.   right: 0;

  149.   bottom: 0;

  150.   left: 0;

  151.   display: -webkit-box;

  152.   display: -webkit-flex;

  153.   display: -ms-flexbox;

  154.   display: flex;

  155.   -webkit-flex-direction: column;

  156.   -ms-flex-direction: column;

  157.   flex-direction: column;

  158.   -webkit-box-direction: normal;

  159.   -webkit-box-orient: vertical;

  160.   -webkit-flex-wrap: wrap;

  161.   -ms-flex-wrap: wrap;

  162.   flex-wrap: wrap;

  163.   -ms-flex-pack: center;

  164.   -webkit-justify-content: center;

  165.   -webkit-box-pack: center;

  166.   justify-content: center;

  167. }

  168. 

  169. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {

  170.   padding: 60px;

  171. }

  172. 

  173. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  174. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  175.   margin: 0;

  176.   padding: 0;

  177.   color: #fff;

  178.   font-size: calc(1.455rem + 2.46vw);

  179. }

  180. 

  181. @media (min-width: 1200px) {

  182.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  183.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  184.     font-size: 3.3rem;

  185.   }

  186. }

  187. 

  188. @media screen and (min-width: 576px) {

  189.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  190.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  191.     font-size: calc(1.455rem + 2.46vw);

  192.   }

  193. }

  194. 

  195. @media screen and (min-width: 576px) and (min-width: 1200px) {

  196.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  197.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  198.     font-size: 3.3rem;

  199.   }

  200. }

  201. 

  202. @media screen and (min-width: 768px) {

  203.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  204.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  205.     font-size: calc(1.48125rem + 2.775vw);

  206.   }

  207. }

  208. 

  209. @media screen and (min-width: 768px) and (min-width: 1200px) {

  210.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  211.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  212.     font-size: 3.5625rem;

  213.   }

  214. }

  215. 

  216. @media screen and (min-width: 992px) {

  217.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  218.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  219.     font-size: calc(1.48125rem + 2.775vw);

  220.   }

  221. }

  222. 

  223. @media screen and (min-width: 992px) and (min-width: 1200px) {

  224.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  225.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  226.     font-size: 3.5625rem;

  227.   }

  228. }

  229. 

  230. @media screen and (min-width: 1200px) {

  231.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  232.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  233.     font-size: calc(1.48125rem + 2.775vw);

  234.   }

  235. }

  236. 

  237. @media screen and (min-width: 1200px) and (min-width: 1200px) {

  238.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  239.   .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  240.     font-size: 3.5625rem;

  241.   }

  242. }

  243. 

  244. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-brief {

  245.   margin-top: 1rem;

  246.   color: #fff;

  247. }

  248. 

  249. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link {

  250.   margin-top: 1rem;

  251. }

  252. 

  253. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a {

  254.   text-decoration: none;

  255.   color: #fff;

  256. }

  257. 

  258. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:hover,

  259. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:focus,

  260. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:active {

  261.   opacity: 0.7;

  262. }

  263. 

  264. .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single {

  265.   overflow: hidden;

  266.   min-height: 300px;

  267.   max-height: 300px;

  268.   /* 1. No object-fit support: */

  269.   /* 2. If supporting object-fit, overriding (1): */

  270. }

  271. 

  272. @media screen and (min-width: 768px) {

  273.   .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single {

  274.     min-height: 600px;

  275.     max-height: 600px;

  276.   }

  277. }

  278. 

  279. .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .contextual-region {

  280.   position: unset;

  281. }

  282. 

  283. .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {

  284.   position: relative;

  285.   top: 50%;

  286.   left: 50%;

  287.   width: 100vw;

  288.   height: 130vh;

  289.   padding-bottom: 0;

  290.   -webkit-transform: translateY(-50%) translateX(-50%);

  291.   -o-transform: translateY(-50%) translateX(-50%);

  292.   transform: translateY(-50%) translateX(-50%);

  293. }

  294. 

  295. .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .field--type-image {

  296.   position: absolute;

  297.   top: 0;

  298.   right: 0;

  299.   bottom: 0;

  300.   left: 0;

  301.   width: 100%;

  302.   height: 100%;

  303. }

  304. 

  305. .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {

  306.   top: 0;

  307.   left: 0;

  308.   width: 100%;

  309. }

  310. 

  311. .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media {

  312.   position: absolute;

  313.   top: 0;

  314.   left: 0;

  315.   width: 100%;

  316. }

  317. 

  318. .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {

  319.   top: 0;

  320.   left: 0;

  321.   width: 100%;

  322. }

  323. 

  324. .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media video {

  325.   top: 0;

  326.   left: 0;

  327.   width: 100%;

  328. }

  329. 

  330. .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media iframe {

  331.   top: 0;

  332.   left: 0;

  333.   width: 100%;

  334. }

  335. 

  336. @media (max-aspect-ratio: 16 / 9) {

  337.   .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {

  338.     position: relative;

  339.     top: 50%;

  340.     left: 50%;

  341.     width: 240vw;

  342.     height: 140vh;

  343.     padding-bottom: 0 !important;

  344.     -webkit-transform: translateY(-50%) translateX(-50%);

  345.     -o-transform: translateY(-50%) translateX(-50%);

  346.     transform: translateY(-50%) translateX(-50%);

  347.   }

  348. }

  349. 

  350. @supports ((-o-object-fit: cover) or (object-fit: cover)) {

  351.   .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {

  352.     top: 0;

  353.     left: 0;

  354.     width: 100%;

  355.     height: 100%;

  356.     -o-object-fit: cover;

  357.     object-fit: cover;

  358.   }

  359.   .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media {

  360.     top: 0;

  361.     left: 0;

  362.     width: 100%;

  363.     height: 100%;

  364.     -o-object-fit: cover;

  365.     object-fit: cover;

  366.   }

  367.   .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {

  368.     top: 0;

  369.     left: 0;

  370.     width: 100%;

  371.     height: 100%;

  372.     -o-object-fit: cover;

  373.     object-fit: cover;

  374.   }

  375.   .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media video {

  376.     top: 0;

  377.     left: 0;

  378.     width: 100%;

  379.     height: 100%;

  380.     -o-object-fit: cover;

  381.     object-fit: cover;

  382.   }

  383.   .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media iframe {

  384.     position: absolute;

  385.     left: 0;

  386.     -o-object-fit: cover;

  387.     object-fit: cover;

  388.   }

  389. }

  390. 

  391. @media screen and (min-width: 768px) {

  392.   @supports ((-o-object-fit: cover) or (object-fit: cover)) {

  393.     .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {

  394.       position: unset;

  395.     }

  396.     .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .media img {

  397.       position: unset;

  398.     }

  399.   }

  400. }

  401. 

  402. @media (max-aspect-ratio: 16 / 9) {

  403.   [dir="rtl"] .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {

  404.     right: 0;

  405.     left: 0;

  406.     -webkit-transform: translateY(-50%) translateX(0);

  407.     -o-transform: translateY(-50%) translateX(0);

  408.     transform: translateY(-50%) translateX(0);

  409.   }

  410. }

  411. 

  412. [dir="rtl"] .varbase-heroslider-media .slick-prev {

  413.   right: 0.63rem;

  414.   left: auto;

  415. }

  416. 

  417. [dir="rtl"] .varbase-heroslider-media .slick-next {

  418.   right: auto;

  419.   left: 0.63rem;

  420. }