@charset "utf-8";
/* CSS Document */

.main-book3D{
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 50px 15px;
    height: 250px;  
}
.main-book3D section{
    display: flex;
    justify-content: center;
    align-content: center;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.main-book3D section .book{
    position: relative;
    width: 169px;  /*383  */
    height: 250px; /*  567*/
    box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
    transform-style: preserve-3d;
    transition: 0.5s;    
}
.main-book3D section .book:hover{
    transform: rotateY(35deg);
    box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
}
.main-book3D section .book:active{
    transform: rotateY(180deg);
}
.main-book3D section .book:before{
    content: '';
    position: absolute;
    width: 30px;
    height: 100%;
    transform-origin: left;
    background: url("../images/carteles/side-ful34.jpg");
    /*background: url(images/carteles/side.jpg);*/
    background-position: center;
    /*transform:  rotateY(90deg);*/
    transform: rotateY(90deg) translateZ(1px);
}
.main-book3D section .book:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    background: url("../images/carteles/back-ful34.jpg");
    background-position: center;
    /*transform:  rotateY(180deg) translateZ(30px);*/
    transform: rotateY(180deg) translateZ(30px);
}
.main-book3D section .book img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-book3D .btn-cartel{
    position: absolute;
    top: 320px;
}

/*   */

.main-book3DM{
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 50px 15px;
    height: 250px;  
}
.main-book3DM section{
    display: flex;
    justify-content: center;
    align-content: center;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.main-book3DM section .book{
    position: relative;
    width: 169px;  /*383  */
    height: 250px; /*  567*/
    box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
    transform-style: preserve-3d;
    transition: 0.5s;
  
    
}
.main-book3DM section .book:hover{
    transform: rotateY(35deg);
    box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
}
.main-book3DM section .book:active{
    transform: rotateY(180deg);
}
.main-book3DM section .book:before{
    content: '';
    position: absolute;
    width: 30px;
    height: 100%;
    transform-origin: left;
    background: url("../images/carteles/side-ful34.jpg");
    /*background: url(images/carteles/side.jpg);*/
    background-position: center;
    /*transform:  rotateY(90deg);*/
    transform: rotateY(90deg) translateZ(-82px);
}
.main-book3DM section .book:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    background: url("../images/carteles/back-ful34.jpg");
    background-position: center;
    /*transform:  rotateY(180deg) translateZ(30px);*/
    transform: rotateY(180deg) translateZ(30px) translateX(82px);
}
.main-book3DM section .book img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-book3DM .btn-cartel{
    position: absolute;
    top: 320px;
}

/*LIBRO CON FONDO ROJO*/

.main-book3DR{
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 50px 15px;
    height: 250px;  
}
.main-book3DR section{
    display: flex;
    justify-content: center;
    align-content: center;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.main-book3DR section .book{
    position: relative;
    width: 169px;  /*383  */
    height: 250px; /*  567*/
    box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
    transform-style: preserve-3d;
    transition: 0.5s;
  
    
}
.main-book3DR section .book:hover{
    transform: rotateY(35deg);
    box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
}
.main-book3DR section .book:active{
    transform: rotateY(180deg);
}
.main-book3DR section .book:before{
    content: '';
    position: absolute;
    width: 30px;
    height: 100%;
    transform-origin: left;
    background: url("../images/carteles/side-ful34-rojo.jpg");
    /*background: url(images/carteles/side.jpg);*/
    background-position: center;
    /*transform:  rotateY(90deg);*/
    transform: rotateY(90deg) translateZ(-82px);
}
.main-book3DR section .book:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    background: url("../images/carteles/back-ful34-rojo.jpg");
    background-position: center;
    /*transform:  rotateY(180deg) translateZ(30px);*/
    transform: rotateY(180deg) translateZ(30px) translateX(82px);
}
.main-book3DR section .book img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-book3DR .btn-cartel{
    position: absolute;
    top: 320px;
}

/*LIBRO CON FONDO AZUL*/

.main-book3DA{
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 50px 15px;
    height: 250px;  
}
.main-book3DA section{
    display: flex;
    justify-content: center;
    align-content: center;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.main-book3DA section .book{
    position: relative;
    width: 169px;  /*383  */
    height: 250px; /*  567*/
    box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
    transform-style: preserve-3d;
    transition: 0.5s;
  
    
}
.main-book3DA section .book:hover{
    transform: rotateY(35deg);
    box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
}
.main-book3DA section .book:active{
    transform: rotateY(180deg);
}
.main-book3DA section .book:before{
    content: '';
    position: absolute;
    width: 30px;
    height: 100%;
    transform-origin: left;
    background: url("../images/carteles/side-ful34-azul.jpg");
    /*background: url(images/carteles/side.jpg);*/
    background-position: center;
    /*transform:  rotateY(90deg);*/
    transform: rotateY(90deg) translateZ(-82px);
}
.main-book3DA section .book:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    background: url("../images/carteles/back-ful34-azul.jpg");
    background-position: center;
    /*transform:  rotateY(180deg) translateZ(30px);*/
    transform: rotateY(180deg) translateZ(30px) translateX(82px);
}
.main-book3DA section .book img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-book3DA .btn-cartel{
    position: absolute;
    top: 320px;
}