/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
@keyframes wider {
  to {
    opacity: 1;
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

/*cabecera de cuenta catalogo*/
.content-cuenta{
  background-color: white;
  height: 5em;
  border-bottom: 1px solid #f2f2f2;
}
/*cabecera de cuenta catalogo*/

/*=====================CSS Modal Catalogos=====================*/
.fondo-modal-catalogo-1{
width:100%;
height:100%; 
}
.fondo-modal-catalogo-1{
top: 0%;
display:none;
position: absolute;
background-color:rgba(0,0,0,0.6);
position: absolute;
z-index: 1;
width: 100%;
}

.cont-modal-catalogo-1 iframe{
border:0px;
position: absolute;
margin-top:450px;
border-radius: 4px 4px 4px 4px;
background-color: white;
width: 1000px;
height: 800px;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);  
cursor: pointer;
}

.cont-modal-catalogo-2{
width:100%;
}
.fondo-modal-catalogo-2{
width:100%;
height:100%; 
}
.fondo-modal-catalogo-2{
top: 0%;
display:none;
position: absolute;
background-color:rgba(0,0,0,0.6);
position: absolute;
z-index: 1;
width: 100%;
}
  
.cont-modal-catalogo-2 iframe{
border:0px;
position: absolute;
margin-top:450px;
border-radius: 4px 4px 4px 4px;
background-color: white;
width: 1000px;
height: 800px;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);  
cursor: pointer;
}
  
.cont-modal-catalogo-2{
width:100%;
}


.fondo-modal-catalogo-3{
width:100%;
height:100%; 
}
.fondo-modal-catalogo-3{
top: 0%;
display:none;
position: absolute;
background-color:rgba(0,0,0,0.6);
position: absolute;
z-index: 1;
width: 100%;
}
  
.cont-modal-catalogo-3 iframe{
border:0px;
position: absolute;
margin-top:450px;
border-radius: 4px 4px 4px 4px;
background-color: white;
width: 1000px;
height: 800px;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);  
cursor: pointer;
}
  
.cont-modal-catalogo-3{
width:100%;
}

.fondo-modal-catalogo-4{
width:100%;
height:100%; 
}
.fondo-modal-catalogo-4{
top: 0%;
display:none;
position: absolute;
background-color:rgba(0,0,0,0.6);
position: absolute;
z-index: 1;
width: 100%;
}
  
.cont-modal-catalogo-4 iframe{
border:0px;
position: absolute;
margin-top:450px;
border-radius: 4px 4px 4px 4px;
background-color: white;
width: 1000px;
height: 800px;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);  
cursor: pointer;
}
  
.cont-modal-catalogo-4{
width:100%;
}

.fondo-modal-catalogo-5{
width:100%;
height:100%; 
}
.fondo-modal-catalogo-5{
top: 0%;
display:none;  
position: absolute;
background-color:rgba(0,0,0,0.6);
position: absolute;
z-index: 1;
width: 100%;
}
  
.cont-modal-catalogo-5 iframe{
border:0px;
position: absolute;
margin-top:450px;
border-radius: 4px 4px 4px 4px;
background-color: white;
width: 1000px;
height: 800px;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);  
cursor: pointer;
}
  
.cont-modal-catalogo-5{
width:100%;
}
.fondo-modal-catalogo-6{
width:100%;
height:100%; 
}
.fondo-modal-catalogo-6{
top: 0%;
display:none;
position: absolute;
background-color:rgba(0,0,0,0.6);
position: absolute;
z-index: 1;
width: 100%;
}
  
.cont-modal-catalogo-6 iframe{
border:0px;
position: absolute;
margin-top:450px;
border-radius: 4px 4px 4px 4px;
background-color: white;
width: 1000px;
height: 800px;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);  
cursor: pointer;
}
  
.cont-modal-catalogo-6{
width:100%;
}
.fondo-modal-catalogo-7{
width:100%;
height:100%; 
}
.fondo-modal-catalogo-7{
top: 0%;
display:none;
position: absolute;
background-color:rgba(0,0,0,0.6);
position: absolute;
z-index: 1;
width: 100%;
}
  
.cont-modal-catalogo-7 iframe{
border:0px;
position: absolute;
margin-top:450px;
border-radius: 4px 4px 4px 4px;
background-color: white;
width: 1000px;
height: 800px;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);  
cursor: pointer;
}
  
.cont-modal-catalogo-7{
width:100%;
}
.fondo-modal-catalogo-8{
width:100%;
height:100%; 
}
.fondo-modal-catalogo-8{
top: 0%;
display:none;
position: absolute;
background-color:rgba(0,0,0,0.6);
position: absolute;
z-index: 1;
width: 100%;
}
  
.cont-modal-catalogo-8 iframe{
border:0px;
position: absolute;
margin-top:450px;
border-radius: 4px 4px 4px 4px;
background-color: white;
width: 1000px;
height: 800px;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);  
cursor: pointer;
}
  
.cont-modal-catalogo-8{
width:100%;
}


.cerrar-catalogo{
position: absolute;
left: 55%;
top:0%;
}

.cerrar-catalogo h3{
padding:0px 0px 10px 10px;
font-weight: bold;
margin-top: 50px;
margin-left:450px;
position: absolute;
color:black;
z-index:1;
opacity:0.5;
border: 3px solid white;
background-color:white;
border-radius: 80%;
cursor: pointer;
width:40px;
height:40px;
}
 
.cerrar-catalogo:hover{
color: gray;
transition: all 0.5s;
}

/*=====================CSS Modal Catalogos=====================*/
#cont-catalogos {
  width: 1000px;
  margin: 0 auto;
}

.quote {
  text-align: center;
  font-family: "Josefin Sans", sans-serif;
  padding: 60px;
}
.quote q {
  font-size: 3em;
  color: #222;
}
.quote cite {
  display: block;
  color: #444;
}

.book { 
  margin-bottom: 100px;
  margin-left: 22px;
  width: 250px;
  cursor: pointer;
  width: 250px;
  float: left;
  perspective: 800px;
}

.book-item {
  position: relative;
  display: block;
  transform: rotateY(-30deg);
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform .65s;
  font-family: "Josefin Sans", sans-serif;
}
.book-item:after {
  content: '';
  display: block;
  position: absolute;
  right: -5px;
  top: 2px;
  width: 20px;
  height: 97.8%;
  background: #9E9E9E;
  transform: rotateY(60deg);
  transform-origin: center;
}
.book-item.hover {
  transform: rotateY(-10deg);
}
.book-item.hover .book-data {
  width: 240px;
  animation: wider .4s .3s forwards;
}
.book-item.hover .book-data * {
  transition: opacity .95s;
  opacity: 1;
}

.book-data {
  position: absolute;
  top: 0;
  display: block;
  width: 0px;
  height: 100%;
  opacity: 0;
}
.book-data * {
  opacity: 0;
}

.book-data__title {
  width: 100%;
  padding: 10px 10px 0;
  color: #a22b07;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0px -1px 1px #fff;
}

.book-info {
  padding: 10px;
}
.book-info li {
  font-size: .9em;
  line-height: 1.1em;
  width: 100%;
}
.book-info span {
  font-weight: bold;
  font-size: .8em;
}

.book-nav__item {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #000;
  font-size: .8em;
  text-transform: uppercase;
}
.book-nav__item > small {
  display: inline-block;
  padding-right: 8px;
}
.book-nav__item:hover {
  background: #ccc;
}