/*=========================================================
  14 -> Banner
*===========================================================*/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

.banner{
  width: 85em;
  height: 35em;
  border: 1px solid #b30000;
  margin: auto;
  animation: banner 15s infinite linear alternate;
  
  background-size: 100% 100%;

}

/*.banner{
  background: #fff;
  margin: auto;
  border: 5px solid #ccc;  
 -webkit-border-radius: 4px;
  border-radius: 4px;
 -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  overflow: hidden;
  position: relative;
  opacity: 1;
  height: 35em;
  width: 85%;
  animation: banner 15s infinite linear alternate;
  background-size: 100% 100%;
}
*/
@keyframes banner{
  0%, 10%{
    background-image: url("img/banner/1.jpg");
    opacity: 1;
  }
  11%, 20% {
    opacity: 1;
  }
  21%, 30% {
    background-image: url("img/banner/2.jpg");
    opacity: 1;
  }
  31%, 40% {
    opacity: 1;
  }
  41%, 50% {
    background-image: url("img/banner/3.jpg");
    opacity: 1;
  }
  51%, 60% {
    opacity: 1;
  }  
  61%, 70% {
     background-image: url("img/banner/4.jpg");
    opacity: 1;
  }
  71%, 80% {
    opacity: 1;
  }  
  81%, 100% {
     background-image: url("img/banner/5.jpg");
    opacity: 1;
  }
}

@media only screen and (min-width: 10px) and (max-width: 700px)
{
  .banner{
    width: 50%;
    height: 25%;
  }
}