* {
  margin: 0;
  padding: 0;
}

.pic-wrapper {
  position: absolute;
  max-width: 2000px;
  min-width: 375px;
  width: 100%;
  max-height: 414px;
  height: 100%;
  overflow: hidden;
  border-top: 12px solid #000;
  border-bottom: 6px solid #000;
  background-color: #000;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;

  /*animation*/
  
  animation: slideShow 32s linear infinite 0s;
  -o-animation: slideShow 32s linear infinite 0s;
  -moz-animation: slideShow 32s linear infinite 0s;
  -webkit-animation: slideShow 32s linear infinite 0s;
}

figurecaption {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
}

.pic-1 {
  opacity: 1;
  animation-delay: 0s;
  -o-animation-delay: 0s;
  -moz--animation-delay: 0s;
  -webkit-animation-delay: 0s;
  background: url(../images/carousel/sunrise.jpg) no-repeat center bottom -150px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-2 {
  animation-delay: 7ms;
  -o-animation-delay: 7ms;
  -moz--animation-delay: 7s;
  -webkit-animation-delay: 7s;
  background: url(../images/carousel/daytime.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-3 {
  animation-delay: 14s;
  -o-animation-delay: 14s;
  -moz--animation-delay: 14s;
  -webkit-animation-delay: 14s;
  background: url(../images/carousel/sunset.jpg) no-repeat center bottom;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-4 {
  animation-delay: 22s;
  -o-animation-delay: 22s;
  -moz--animation-delay: 22s;
  -webkit-animation-delay: 22s;
  background: url(../images/carousel/sunrise.jpg) no-repeat center bottom -140px; /* repeat of first image */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* keyframes*/

@keyframes 
slideShow {  0% {
 opacity: 0;
 transform:scale(1);
 -ms-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 transform:scale(1.1);
 -ms-transform:scale(1.1);
}
 100% {
 opacity: 0;
 transform:scale(1);
 -ms-transformm:scale(1);
}
}
 @-o-keyframes 
slideShow {  0% {
 opacity: 0;
 -o-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -o-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -o-transformm:scale(1);
}
}
 @-moz-keyframes 
slideShow {  0% {
 opacity: 0;
 -moz-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -moz-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -moz-transformm:scale(1);
}
}
 @-webkit-keyframes 
slideShow {  0% {
 opacity: 0;
 -webkit-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -webkit-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -webkit-transformm:scale(1);
}
}

/* mobile */

@media screen and (max-width: 1200px) {
    .pic-1 {
      opacity: 1;
      animation-delay: 0s;
      -o-animation-delay: 0s;
      -moz--animation-delay: 0s;
      -webkit-animation-delay: 0s;
      background: url(../images/carousel/sunrise.jpg) no-repeat center bottom;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    .pic-4 {
      animation-delay: 22s;
      -o-animation-delay: 22s;
      -moz--animation-delay: 22s;
      -webkit-animation-delay: 22s;
      background: url(../images/carousel/sunrise.jpg) no-repeat center bottom; /* repeat of first image */
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
}