#frontslider {
  background-color: #1b1b1b;
}
#frontslider .main-title {
  position: absolute;  
  top: 17vh;
  left: 50%;
  transform: translatex(-50%);
}
#frontslider .main-title h1 {
  color: #fff;
  font-size: 40px;
  padding-right: 48%;
  padding-left: 7%;
}
@media (min-width:1900px) {
  #frontslider .main-title h1 {
    max-width: 100%;
    padding-right: 50%;
  }
}
#frontslider span.sub {
  display: block;
  position: absolute;
  bottom: 12vh;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  font-weight: 300;
  color: #fff;
  z-index: 1;
  left: 0;
  right: 0;
  text-align: center;
}
#frontslider .particles-slider {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}
#frontslider .slick-slide {  
  height: 100vh;
  position: relative;
  margin: 0;  
  /* background-blend-mode: soft-light; */
}
#frontslider .slick-slide:after {
  content: "";
  position: absolute;
  top: 30%;
  right: 0;
  bottom: 0;
  left: 0;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 1) 100%);

  background-blend-mode: multiply;
}
#frontslider .slick-dots {
  position: absolute;
  bottom: 3vh;
}
#frontslider .magic {
  position: absolute;
  width: 12vw;
  height: 12vw;
  z-index: 5;
  top: calc(50% - 10rem);
  left: calc(50% - 10rem);
  border-radius: 50%;
  -webkit-mask-image: url(../assets/images/mask-01.png);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url(../assets/images/mask-01.png);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;

  /* filter: blur(3px); */

}
@media (max-width:768px){
  #frontslider .magic {
    width: 24vw;
  }
}
#frontslider .slick-slide,
#frontslider .magic {
  background-size: cover;
  background-color: #1b1b1b;  
  background-attachment: fixed;
}
#slick-slide00,
#slick-slide00 .magic {
  background-image: url(../assets/images/frontslider-vita.jpg);
  background-position: center 33%;
}
#slick-slide01,
#slick-slide01 .magic {
  background-image: url(../assets/images/frontslider-health.jpg);
  background-position: center 62%;
}
#slick-slide02,
#slick-slide02 .magic {
  background-image: url(../assets/images/frontslider-media.jpg);
  background-position: center bottom;
}