span{
  background: rgb(216, 216, 230);
}
.carousel-inner{
    height: 475px !important;
}
.carousel-inner > div > img{
    height: 475px !important;
    width: 100% !important;
}
.nav-item > a{
    font-weight: bold !important;
}
.barra{
  background: grey;
  opacity: .9;
}

.cinta{
   text-align: center;
}
.contenido{
  text-align: center;
}
.titulo{
  text-align: center;
  height: 250px;
  background-size: 100% 149%;
background-position: center;
}

.pie{
  color:white;
  text-align:center;
}

.pie > div > a{
    text-decoration:none;
}

.pie > div > a:hover{
    color:blue;
}

.slider{
  height: 300px;
}

a{
    color:#358c8c;
    text-decoration:none;
} 
.a{
    color:white;
}
.a:hover{
    color:blue;
}
.contenido > a{
    text-decoration:none;
}


.mnto-ico{
    width:20%;   
}

.titulo > h1 {
  animation-duration: 3s;
  animation-name: slidein;
  margin:5%;
  font-weight:bold;
  text-shadow: 0px 0px 15px #000;
  color: white;
}
div#imagen {
  width: 300px;
  height: 200px;
  background-size: 100% 100%; 
  margin: 30px auto;
}

div#info {
  position:absolute;
  overflow:hidden;
  width: 300px;
  height: 200px;
  background-color: rgba(132, 213, 222, 0.9);
  opacity:0;
  transition: opacity 0.3s;
}

div#imagen:hover div#info {
  opacity:1;
}

p#headline {
  position: absolute;
  font-size: 1.5rem;
  margin-left: -75px;
  margin-top: 15px;
  transition: margin-left 0.3s;
}

div#imagen:hover p#headline {
  margin-left: 115px;
}

p#descripcion {
  font-size: 1rem;
  text-align: center;
  margin-top: 200px;
  transition: margin-top 0.4s;
  text-shadow: 0.05em 0em #000;
}

div#imagen:hover p#descripcion {
  margin-top: 75px;
}

@keyframes slidein {
  from {
    margin-top: 40%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}