@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Suez+One&display=swap");
body.page-id-1078, body.page-id-489 {  justify-content: center;
font-family: 'Roboto', sans-serif;
align-items: center;
}
input {
display: none;
}
img {
width: 100%;
height: 100%;
}
.book {
display: flex;
box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px, rgb(0 0 0 / 6%) 0px 0px 0px 0px;
border: 25px solid #FFF;
width: 80%;
height: 640px;
margin: auto;
}
.book p, .book h2, .book span {
font-family: "Libre Baskerville", Sans-serif;
}
.front h2 {
text-align: center;
margin-top: 40px;
}
.book p {
font-family: "Libre Baskerville", Sans-serif;
font-size: 22px;
line-height: 1.2;
text-align: center;
}
.front h3 {
font-family: "Suez One", Sans-serif;
font-size: 30px;
text-transform: uppercase;
margin-top: 60px;
text-align: center;
margin-bottom: 40px;
}
.book span { display: block;
text-align: center;
}
.book .front_without p {
margin-top: 10px !important;
}
#cover { width: 430px;
height: 560px;
}
.flip-book { width: 430px;
height: 560px;
position: relative;
perspective: 1500px;
}
.flip {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: left;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: .5s;
color: #000;
}
.flip-book .flip img {
object-fit: cover;
height: 100%;
}
p {
font-size: 14px;
line-height: 24px;
}
.logo_pagina {
text-align: center;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, -25px);
}
.logo_pagina img {
max-width: 51%;
text-align: center;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fafafa;
box-sizing: border-box;
padding: 0 25px; }
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #000;
}
.next-btn {
position: absolute;
right: 13px;
cursor: pointer;
color: #000;
height: 100%;
top: 8px;
font-size: 10px;
width: 90%;
text-align: right;
}
.back-btn {
position: absolute;
top: 8px;
right: 5%;
cursor: pointer;
color: #000;
font-size: 10px;
width: 90%;
text-align: right;
height: 100%;
}
#p1 {
z-index: 9;
}
#p2 {
z-index: 8;
}
#p3 {
z-index: 7;
}
#p4 {
z-index: 6;
}
#p5 {
z-index: 5;
}
#p6 {
z-index: 4;
}
#p7 {
z-index: 3;
}
#p8 {
z-index: 2;
}
#p9 {
z-index: 1;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}
#c6:checked ~ .flip-book #p6 {
transform: rotateY(-180deg);
z-index: 6;
}
#c7:checked ~ .flip-book #p7 {
transform: rotateY(-180deg);
z-index: 7;
}
#c8:checked ~ .flip-book #p8 {
transform: rotateY(-180deg);
z-index: 8;
}
#c9:checked ~ .flip-book #p9 {
transform: rotateY(-180deg);
z-index: 9;
}
div#p1 .back::after {
content: '1';
}
div#p1 .front::after {
content: '0';
color: #fff;
}
div#p2 .front::after {
content: '2';
}
div#p2 .back::after {
content: '3';
}
div#p2 .back::after {
content: '3';
}
div#p3 .front::after {
content: '4';
}
div#p3 .back::after {
content: '5';
}
div#p4 .front::after {
content: '6';
}
div#p4 .back::after {
content: '6';
}
div#p5 .front::after {
content: '7';
}
div#p5 .back::after {
content: '8';
}
div#p6 .back::after {
content: '10';
}
div#p6 .front::after {
content: '9';
}
div#p7 .back::after {
content: '12';
}
div#p7 .front::after {
content: '11';
}
div#p8 .back::after {
content: '14';
}
div#p8 .front::after {
content: '13';
}
div#p9 .front::after {
content: '15';
}
div.flip .back::after, div.flip .front::after {
display: block;
position: absolute;
bottom: -40px;
left: 50%;
transform: translate(-50%, 0);
font-family: "Libre Baskerville", sans-serif;
background: #fff;
width: 100%;
text-align: center;
font-size: 12px;
height: 40px;
padding-top: 20px;
}
@media screen and (min-width: 1025px) {
.book {
width: 80%; 
}
}
@media screen and (max-width: 1024px) {
body.page-id-1078, body.page-id-489{display: block;}
.resp_cont {
width: 100%;
overflow: hidden;
height: 590px;
}
input {
display: none;
}
img {
width: 100%;
height: 100%;
}
.flip-book {height: 560px;}
.book {
display: flex;
box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px, rgb(0 0 0 / 6%) 0px 0px 0px 0px;
border: 0px solid #FFF;
width: 85%;
height: 619px;
}
.book p, .book h2, .book span {
font-family: "Libre Baskerville", Sans-serif;
}
.front h2 {
text-align: center;
margin-top: 30px;
}
.book p {
font-family: "Libre Baskerville", Sans-serif;
font-size: 18px;
line-height: 1.2;
}
.front h3 {
font-family: "Suez One", Sans-serif;
font-size: 30px;
text-transform: uppercase;
margin-top: 25px;
}
.book span {
font-size: 27px;
}
p {
font-size: 14px;
line-height: 24px;
}
.next-btn, .back-btn {font-size: 10px}
#cover {height: 630px;}
}
@media screen and (max-width: 767px) {
.resp_cont{
box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px, rgb(0 0 0 / 6%) 0px 0px 0px 0px;
width: 100%;
height: 520px;
margin-left: -10px;
}
.book{box-shadow: none;     margin-top: 10px;   width: 100%;}
.front h3 {
text-align: center;
margin-bottom: 5px;
margin-top: 0px;
font-size: 28px;
}
.book .front_without p {
margin-top: 30px !important;
text-align: center;
}
.front p { text-align: center;
}
.book .page-content {
top: 50%;
transform: translate(-0%, -50%);
position: relative;
}
.book .front_without p {
margin-top: 0px !important;
}
#cover_resp {
width: 620px;
height: 530px;
}
.flip-book {
width: 3540px;
height: 485px;
position: relative;
perspective: 1500px;
}
.flip {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: left;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: .5s;
color: #000;
}
.flip-book .flip img {
object-fit: cover;
height: 100%;
object-position: bottom;
}
.book span {
display: block;
font-size: 14px;
text-align: center;
margin-top: 15px;
}
.logo_pagina {
text-align: center;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, -40px);
width: 30%;
}
.logo_pagina img {
max-width: 51%;
text-align: center;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fafafa;
box-sizing: border-box;
padding: 0 10px; }
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background: rgb(231, 224, 208);
background: linear-gradient(90deg, rgba(231, 224, 208, 1) 0%, rgba(179, 165, 135, 1) 76%, rgba(190, 173, 139, 1) 90%, rgba(231, 224, 208, 1) 100%);
}
.next-btn {
position: absolute;
right: 13px;
cursor: pointer;
color: #000;
height: 100%;
top: 8px;
font-size: 14px;
width: 90%;
text-align: right
}
.back-btn {
position: absolute;
top: 8px;
right: 5%;
cursor: pointer;
color: #000;
font-size: 10px;
height: 100%;
width: 90%;
text-align: right;
}
#p1_resp {
z-index: 16;
}
#p2_resp {
z-index: 15;
}
#p3_resp {
z-index: 14;
}
#p4_resp {
z-index: 13;
}
#p5_resp {
z-index: 12;
}
#p6_resp {
z-index: 11;
}
#p7_resp {
z-index: 10;
}
#p8_resp {
z-index: 9;
}
#p9_resp {
z-index: 8;
}
#p10_resp {
z-index: 7;
}
#p11_resp {
z-index: 6;
}
#p12_resp {
z-index: 5;
}
#p13_resp {
z-index: 4;
}
#p14_resp {
z-index: 3;
}
#p15_resp {
z-index: 2;
}
#p16_resp {
z-index: 1;
}
#c1_resp:checked ~ .flip-book #p1_resp {
transform: rotateY(-180deg);
z-index: 1;
}
#c2_resp:checked ~ .flip-book #p2_resp {
transform: rotateY(-180deg);
z-index: 2;
}
#c3_resp:checked ~ .flip-book #p3_resp {
transform: rotateY(-180deg);
z-index: 3;
}
#c4_resp:checked ~ .flip-book #p4_resp {
transform: rotateY(-180deg);
z-index: 4;
}
#c5_resp:checked ~ .flip-book #p5_resp {
transform: rotateY(-180deg);
z-index: 5;
}
#c6_resp:checked ~ .flip-book #p6_resp {
transform: rotateY(-180deg);
z-index: 6;
}
#c7_resp:checked ~ .flip-book #p7_resp {
transform: rotateY(-180deg);
z-index: 7;
}
#c8_resp:checked ~ .flip-book #p8_resp {
transform: rotateY(-180deg);
z-index: 8;
}
#c9_resp:checked ~ .flip-book #p9_resp {
transform: rotateY(-180deg);
z-index: 9;
}
#c10_resp:checked ~ .flip-book #p10_resp {
transform: rotateY(-180deg);
z-index: 10;
}
#c11_resp:checked ~ .flip-book #p11_resp {
transform: rotateY(-180deg);
z-index: 11;
}
#c12_resp:checked ~ .flip-book #p12_resp {
transform: rotateY(-180deg);
z-index: 12;
}
#c13_resp:checked ~ .flip-book #p13_resp {
transform: rotateY(-180deg);
z-index: 13;
}
#c14_resp:checked ~ .flip-book #p14_resp {
transform: rotateY(-180deg);
z-index: 14;
}
#c15_resp:checked ~ .flip-book #p15_resp {
transform: rotateY(-180deg);
z-index: 15;
}
#c16_resp:checked ~ .flip-book #p16_resp {
transform: rotateY(-180deg);
z-index: 16;
}
div#p1_resp .back::after {
content: '1';
}
div#p1_resp .front::after {
content: '0';
color: #fff;
}
div#p2_resp .front::after {
content: '2';
}
div#p2_resp .back::after {
content: '3';
}
div#p2_resp .back::after {
content: '3';
}
div#p3_resp .front::after {
content: '3';
}
div#p3_resp .back::after {
content: '3';
}
div#p4_resp .front::after {
content: '4';
}
div#p4_resp .back::after {
content: '4';
}
div#p5_resp .front::after {
content: '5';
}
div#p5_resp .back::after {
content: '5';
}
div#p6_resp .back::after {
content: '6';
}
div#p6_resp .front::after {
content: '6';
}
div#p7_resp .back::after {
content: '7';
}
div#p7_resp .front::after {
content: '7';
}
div#p8_resp .back::after {
content: '8';
}
div#p8_resp .front::after {
content: '8';
}
div#p9_resp .front::after {
content: '9';
}
div#p9_resp .back::after {
content: '9';
}
div#p10_resp .front::after {
content: '10';
}
div#p10_resp .back::after {
content: '10';
}
div#p11_resp .front::after {
content: '11';
}
div#p11_resp .back::after {
content: '11';
}
div#p12_resp .front::after {
content: '12';
}
div#p12_resp .back::after {
content: '12';
}
div#p13_resp .front::after {
content: '13';
}
div#p13_resp .back::after {
content: '13';
}
div#p14_resp .front::after {
content: '14';
}
div#p14_resp .back::after {
content: '14';
}
div#p15_resp .front::after {
content: '15';
}
div#p15_resp .back::after {
content: '15';
}
div#p16_resp .front::after {
content: '16';
}
div#p16_resp .back::after {
content: '16';
}
div#p17_resp .front::after {
content: '17';
}
div#p17_resp .back::after {
content: '17';
}
div.flip .back::after, div.flip .front::after {
display: block;
position: absolute;
bottom: -20px;
left: 50%;
transform: translate(-50%, 0);
font-family: "Libre Baskerville", sans-serif;
background: #fff;
width: 100%;
text-align: center;
font-size: 12px;
}
}