@keyframes fadeInDown{
  0%{opacity:0;-webkit-transform:translateY(-200px);transform:translateY(-200px)}
  100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}

@keyframes appearScale{
  0%{opacity:0;transform: scale(0);}
  100%{opacity:1;transform: scale(1);}
}


/*html, body{
  padding: 0;
  margin: 0;
  height: 100%;
  font-size: 14px;
}*/

.swiper, .swiper-wrapper, .swiper-slide{
  /*height: 100%;*/
  height: 600px;
}

.swiper-slide{
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}

.swiper-slide-1{
  background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/slide-1.jpeg');
}

.swiper-slide-2{
  background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/slide-2.jpeg');
}

.swiper-slide-3{
  background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/slide-3.jpg');
}

.swiper-slide-4{
  background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/slide-4.jpeg');
}

.swiper-slide-5{
  background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/slide-5.jpeg');
}

.swiper-slide .slide-blue-title{
  position: absolute;
  font-size: 1.57rem;
  color: white;
  background-color: #00aeef;
  font-size: 22px;
  font-family: 'Averta-Semibold';
  left: 40px;
  top: 40px;
  padding: 30px;
  max-width: 40%;
  opacity: 0;
  transform: translateY(-200px);
  animation-duration: 1000ms;
  animation-delay: 1500ms;
  animation-fill-mode: both;
}

/*.swiper-slide-visible .fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}*/
.swiper-slide-visible .fadeInDown{-webkit-animation-name:appearScale;animation-name:appearScale;}

.swiper-slide .slide-cloud{
  /*font-size: 1.57rem;*/
  font-size: 26px !important;
  bottom: 10%;
  background-size: 330px auto;
  /*width: 230px;*/
  width: 600px;
  padding: 70px 40px 80px 70px;
  position: absolute;
  right: 0px;
  color: white;
  font-family: 'Averta-Semibold';
  background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/cloud.png');
  background-repeat: no-repeat;
  z-index: 2;
  opacity: 0;
  transform: scale(1);
  animation-duration: 1000ms;
  animation-delay: 2000ms;
  animation-fill-mode: both;  
}

.swiper-slide-visible .appearScale{
  -webkit-animation-name:appearScale;animation-name:appearScale
}

.swiper-slide .slide-url{
  display: none;
}

.swiper-slide .slide-bottom-white{
  display: none;
}

@media (orientation: portrait) {
  .swiper-slide-1{
    background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/slide-1-portrait.jpg');
  }

  .swiper-slide-2{
    background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/slide-2-portrait.jpg');
  }

  .swiper-slide-3{
    background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/slide-3-portrait.jpg');
  }

  .swiper-slide-4{
    background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/slide-4-portrait.jpg');
  }

  .swiper-slide-5{
    background-image: url('/Kanikkritischzijn.nl/media/Media/site/img/slider/slide-5-portrait.jpg');
  }
}

@media (min-width: 575px) and (min-height: 550px) {
  .swiper-slide .slide-cloud{
    font-size: 2.28rem;
    bottom: 20%;
    background-size: 400px auto;
    /*width: 250px;*/
	width: 480px;
    padding: 70px 80px 80px 100px;
  }

  .swiper-slide-1 .slide-cloud{
    left: 50%;
  }

  .swiper-slide-2 .slide-cloud{
    left: 40%;
  }

  .swiper-slide-4 .slide-cloud{
    left: 30%;
  }

  .swiper-slide .slide-blue-title{
    font-size: 2.28rem;
  }
  .swiper-slide .slide-bottom-white{
    display: block;
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    background-color: white;
    color: rgb(34, 30, 31);
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Averta-Regular';
    font-size: 1.42rem;
  }

  .swiper-slide .slide-bottom-text{
    padding-right: 20px;
    max-width: 70%;
  }

  .swiper-slide .slide-bottom-images{
    display: flex;
    align-items: center;
  }

  .swiper-slide .slide-bottom-images img{
    margin-left: 20px;
  }

  .swiper-slide .slide-url{
    display: block;
    position: absolute;
    background-color: white;
    color: rgb(26, 152, 158);
    font-size: 14px;
    right: 0;
    bottom: 20%;
    padding: 10px 30px 10px 10px;
    font-family: 'Averta-Bold';
    font-size: 1.42rem;
    z-index: 3;
  }
}