/**
 * General styles
 */


* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}



/**
 * Carousel container
 */


.carousel-container {
  /*display: flex;*/     margin-left: 10px; /*anterior ninguno*/ margin-top: 25px; /*anterior ninguno*/
  justify-content: center;
  align-items: center;
  width: /*anterior100vw*/62vw;
  height: /*anterior100vh*/80vh;
}

.carousel {
  position: relative;
  overflow: hidden;
  width: 869px;
}

.roll {
  position: relative;
  white-space: nowrap;
  font-size: 0;
  left: 0px;
}

.slides {

  width: 280px;
  height: 499px; /*487*/
  background-color: #FFF;
  -webkit-box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.5);
  -moz-box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.5);
  box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.5);
  text-align: center;
  margin: 0 10px 15px 0;
  display: inline-block;
  font-size: 18px;
  border: 1px solid lightgrey;
  border-radius: 10px 10px 10px 10px;
  overflow: hidden;/*anterior ninguno*/
}

.slides:hover {background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 34%, rgba(247,247,247,1) 66%, rgba(246,246,246,1) 72%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(1%, rgba(255,255,255,1)), color-stop(34%, rgba(255,255,255,1)), color-stop(66%, rgba(247,247,247,1)), color-stop(72%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 34%, rgba(247,247,247,1) 66%, rgba(246,246,246,1) 72%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 34%, rgba(247,247,247,1) 66%, rgba(246,246,246,1) 72%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 34%, rgba(247,247,247,1) 66%, rgba(246,246,246,1) 72%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 34%, rgba(247,247,247,1) 66%, rgba(246,246,246,1) 72%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );}

.slides img {
  margin-top: /*anterior10px*/0px;
  width: 280px;
  height: 270px;
}

.slides p {
      margin: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    /* font-weight: 200; */
    text-align: left;
    white-space: normal;
    text-align: justify;
    font-size: 16px;
    overflow: hidden;

   


  height: 99px;/*90*/ /*anterior ninguno*/
  overflow: hidden; /*anterior ninguno*/
}

.sections {
  text-align: center;
  color: #b4fdc0;
  font-size: 12px;
}

.sections i {
  margin: 0 2px;
  cursor: pointer;
}

.navigation {
  position: absolute;
  border: none;
  padding: 0;
  background-color: rgba(35,35,35,0.8);
  height: /*anterior34px*/50px;
  width: /*anterior34px*/50px;
  color: #FFF;
  font-size: 20px;
  text-align: center;
  top: 176px;
  z-index: 10;


  border-radius: 50%;
}

.navigation:visited { text-decoration: none; }

.navigation-hover {
  height: 55px;
  width: 55px;
  /*top: 168px;*/
  background-color:red;
  cursor:pointer;
  opacity:0.8;
}

.navigation:active { text-decoration: none; }

.navigation:focus { outline: none; }

.navigation:first-of-type { left: 0px; }

.navigation:last-of-type { right: 10px; }
 @media screen and (max-width: 950px) {

.carousel {
  position: relative;
  overflow: hidden;
  width: 620px;
}
}
@media screen and (max-width: 655px) {

.carousel {
  position: relative;
  overflow: hidden;
  width: 310px;
}
}

.libro i {font-size: 30px;}

.navigation img {width:25px; height:30px;opacity:0.8;}