.slider {
   width: 100vw;
   height: 400px;
   overflow: hidden;
   position: relative;
   max-width: 100%;
}

.slider div {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
   z-index: 10;
   opacity: 0;
   animation-name: slide-fade;
   animation-duration: 15s;
   animation-iteration-count: infinite;
}

@keyframes slide-fade {
   0%{
      opacity: 0;
   }
   20%{
      opacity: 1;
   }
   80%{
      opacity: 0;
   }
   100%{
      opacity: 0;
      z-index: 0;
   }
}
.slider div:first-of-type{
   background-image: url(../images/slide01.jpg);
}
.slider div:nth-of-type(2){
   background-image: url(../images/slide02.jpg);
   animation-delay: 5s;
}
.slider div:last-of-type{
   background-image: url(../images/slide03.jpg);
   animation-delay: 10s;
}


.msg{
   font-size: 40px;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
}
.msg-01, .msg-02{
    text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
}
.img-03.cover::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .7);
}

@media only screen and (max-width: 700px){

.msg{
   font-size: 27px;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , 50%);
}


}