#banner{


position: relative;
width: 100%;
height: calc(100vh - 50px);
background-color: white;
background size: cover;
background-position: center;
transition: all .1s ease-in-out;
background-image: url(..//img/foto2.jpg);
animation: banner  28s  infinite  linear;


}
@keyframes banner{
  0%  {
  	background-image: url(..//img/foto1.jpg);

  }
     25%{
  	background-image: url(..//img/foto1.jpg);

  }
   26%{
  	background-image: url(..//img/foto2.jpg);
 
  }
  50%{
  	background-image: url(..//img/foto2.jpg);
 
  }
  51%{
  	background-image: url(..//img/foto3.jpg);
 
  }
  74%{
  	background-image: url(..//img/foto3.jpg);
 
  }
  75%{
  	background-image: url(..//img/foto4.jpg);

  }
  100%{
  	background-image: url(..//img/foto4.jpg);
 
  }

}

#banner .contenedor {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%)   translateY(-50%);
color: #fff;


}
#banner h2{

	font-size: 28px;

}

#banner a {

display: block;
width: 100px;
color: #fff;
text-decoration: none;
padding: 10px;
margin-top: 10px
border:3px  solid  #fff;
}


#banner a:hover{

	background: rgba(51,51,51,0.3);
}