/* Section styles */
.video-tutorials {
  padding: 50px 0;
}

/* Grid Adjustments */
.video-tutorials > .row.wide {
  max-width: 1200px;
}

/* Slick Slider Adjustments */
.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-list {
  padding: 60px 0!important;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-arrow:not(.slick-disabled):before {
  color: #780235;
  opacity: 1;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-prev,
.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-next {
  top: 45%;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-dots li button:before {
    color: #585858;
}

/* Video container styles and animation */
.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-slide {
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-slide.slick-current {
  z-index: 1;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container {
  height: 215px;
  background: #000;
  transition: transform .5s ease-in-out, box-shadow .5s ease-in-out;
  transform-origin: center center;
  position: relative;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  overflow: hidden;
  margin: 20px 0;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container {
    height: 170px;
  }
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container .play-button {
  display: none;
  opacity: 0;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container .player {
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide.slick-current .video-container .player {
  pointer-events: all;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container .cover {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  cursor: pointer;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container .cover img {
  display: block;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container .overlay {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(150,150,150,.6);
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-current .tutorials-single-slide .video-container .overlay {
  display: none;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-current .tutorials-single-slide .video-container .play-button {
  display: block;
  opacity: 1;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container .play-button {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: opacity .5s ease-in-out;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container .play-button .outer {
  fill: transparent;
  stroke: #fec542;
  stroke-width: 2;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  stroke-dashoffset: 0;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container .play-button .arrow {
  fill: #fec542;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container .play-button:hover .outer {
  animation: fillcircle 1.5s;
}

/* Slide title styles and animation */
.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .slide-title {
  font-size: 1.5em; /* 24/16 */
  font-weight: 600;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .text-limiter .slide-title {
  color: #9b9b9b;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-current .tutorials-single-slide .video-container + .text-limiter .slide-title {
  color: #000;
}

.video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide .video-container + .text-limiter {
  transition: transform .5s ease-in-out;
}

@media only screen and (min-width: 48em){
  .video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-current .tutorials-single-slide .video-container + .text-limiter {
    transform: translate3d(0, 40px, 0);
  }
}

/* ----------- MEDIA QUERIES ---------- */

/* Section styles */
@media screen and (min-width: 40em) {
  .video-tutorials {
    padding: 50px 0 140px;
  }

  .video-tutorials .video-tutorials-title {
    font-size: 2.5rem; /* 40/16 */
    margin-bottom: 45px;
  }
}

/* Slick Slider Adjustments */
@media only screen and (min-width: 40em){
  .video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-list {
    padding: 50px 0!important;
    margin: 0 66px;
  }
}

@media only screen and (min-width: 40.063em) {
  .video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-prev {
    left: -15px;
  }

  .video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .slick-next {
    right: -15px;
  }
}

/* Video container styles and animation */
@media only screen and (min-width: 48em) {
  .video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide.slick-current .video-container {
    transform: translate3d(0, 0, 200px);
    box-shadow: 0 5px 30px 0 rgba(0,0,0,.25);
  }

  .is-firefox .video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide.slick-current .video-container,
  .is-edge .video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide.slick-current .video-container,
  .is-ie .video-tutorials .slick-custom-slider-container[data-slick-id="videoTutorials"] .tutorials-single-slide.slick-current .video-container {
    transform: scale(1.25);
  }
}

/* ------------- KEYFRAMES ------------ */
@keyframes fillcircle {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes fillcircle {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes fillcircle {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 0;
  }
}