body{
  background-color: lightgrey;
  font-family: sans-serif;
}

.container{
  margin: auto;
  background-color: white;
  width: 500px;
  padding: 30px;
}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.slider{
  position: relative;
  width: 500px;
  height: 300px;
}

ul.slider li {
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    width: inherit;
    height: inherit;
    transition: opacity .5s;
    background:#fff;
}

ul.slider li img{
  width: 500px;
  height: 100%;
  object-fit: cover;
}

ul.slider li:first-child {
    opacity: 1; /*Mostramos el primer <li>*/
}

ul.slider li:target {
    opacity: 1; /*Mostramos el <li> del enlace que pulsemos*/
}

.menu{
  text-align: center;
  margin: 50px 10px 10px;
}

.menu li{
  display: inline-block;
  text-align: center;
}

.menu li a{
  display: inline-block;
  color: white;
  text-decoration: none;
  background-color: grey;
  padding: 10px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  border-radius: 100%;
}
/** Media **/
@media (min-height: 300px) and (max-width: 600px) {
    ul.slider {
        width: 300px;
        height: 300px;
    }
    ul.slider li img {
        width: 300px;
    }
    .container {
        width: 300px;
        padding: 30px;
    }
    .fecha {
        padding-left: 10px;
        max-width: 350px !important;
    }    
  }
/** extra **/
.barra{
    width: 100%;
    background-color: #4eaf49;
    /*margin: 20px 0;    */
    padding: 5px 0 ;
    color: white;

    max-width: 900px;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    min-width: 300px;
}
.fecha{
    min-width: 300px;
    max-width: 550px;
    margin: 0 auto;
}
.logo{
    text-align: center;
    margin-bottom: 10px;    
}
.logo img{
    width: 300px ;
}
.pie-foto{
    margin: 10px 0;
    background-color: white;
}