/* ------------------------------------------------------------------------------------------------------- */

.book-container {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

input[type=checkbox] {
display: none;
}

#page1 ~ .pages div.page1 {
background-color: #FFFFFF;
background-image: url("");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-transform: rotateY(-34deg);
-moz-transform: rotateY(-34deg);
-ms-transform: rotateY(-34deg);
-o-transform: rotateY(-34deg);
transform: rotateY(-34deg);
}

#page1:checked ~ .pages div.page1 {
-webkit-transform: rotateY(-140deg);
-moz-transform: rotateY(-140deg);
-ms-transform: rotateY(-140deg);
-o-transform: rotateY(-140deg);
transform: rotateY(-140deg);
}

#page2 ~ .pages div.page2 {
background-color: #FFFFFF;
background-image: url("");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-transform: rotateY(-32deg);
-moz-transform: rotateY(-32deg);
-ms-transform: rotateY(-32deg);
-o-transform: rotateY(-32deg);
transform: rotateY(-32deg);
}

#page2:checked ~ .pages div.page2 {
-webkit-transform: rotateY(-140deg);
-moz-transform: rotateY(-140deg);
-ms-transform: rotateY(-140deg);
-o-transform: rotateY(-140deg);
transform: rotateY(-140deg);
}

#page3 ~ .pages div.page3 {
background-color: #FFFFFF;
background-image: url("");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-transform: rotateY(-30deg);
-moz-transform: rotateY(-30deg);
-ms-transform: rotateY(-30deg);
-o-transform: rotateY(-30deg);
transform: rotateY(-30deg);
}

#page3:checked ~ .pages div.page3 {
-webkit-transform: rotateY(-140deg);
-moz-transform: rotateY(-140deg);
-ms-transform: rotateY(-140deg);
-o-transform: rotateY(-140deg);
transform: rotateY(-140deg);
}

#page4 ~ .pages div.page4 {
background-color: #FFFFFF;
background-image: url("");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-transform: rotateY(-28deg);
-moz-transform: rotateY(-28deg);
-ms-transform: rotateY(-28deg);
-o-transform: rotateY(-28deg);
transform: rotateY(-28deg);
}

#page4:checked ~ .pages div.page4 {
-webkit-transform: rotateY(-140deg);
-moz-transform: rotateY(-140deg);
-ms-transform: rotateY(-140deg);
-o-transform: rotateY(-140deg);
transform: rotateY(-140deg);
}

.book {
position: relative;
width: 480px; /* 320px */
height: 678px; /* 540px - 360px */
margin-left: 450px; /* 300px */
-webkit-perspective: 3000px; /* 2000px */
-moz-perspective: 3000px; /* 2000px */
-ms-perspective: 3000px; /* 2000px */
-o-perspective: 3000px; /* 2000px */
perspective: 3000px; /* 2000px */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.book .pages,
.book .pages > div {
position: absolute;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.book .pages {
width: 100%;
height: 98%;
top: 1%;
left: 3%;
z-index: 10;
}

.book .pages > div {
width: 100%;
height: 100%;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
-webkit-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
-o-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-ms-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
-webkit-transition-duration: 0.75s;
-moz-transition-duration: 0.75s;
-ms-transition-duration: 0.75s;
-o-transition-duration: 0.75s;
transition-duration: 0.75s;
}

.book .pages > div:hover {
box-shadow: inset 1px 0px 2px rgba(50, 50, 50, 0.1), inset -3px 1px 1px rgba(150, 150, 150, 0.2), ;
}

.book .pages > div label {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
cursor: pointer;
text-align: center;
vertical-align: middle;
}

#page1:checked ~ .pages div.book-full-page-1 {
display: inline;
opacity: 0;
-webkit-animation: bookfadeinone 0.375s forwards;
-moz-animation: bookfadeinone 0.375s forwards;
-ms-animation: bookfadeinone 0.375s forwards;
-o-animation: bookfadeinone 0.375s forwards;
animation: bookfadeinone 0.375s forwards;
}
@-webkit-keyframes bookfadeinone {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes bookfadeinone {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}

100% {
opacity: 1;
}
}
@-ms-keyframes bookfadeinone {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-o-keyframes bookfadeinone {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes bookfadeinfour {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}

#page2:checked ~ .pages div.book-full-page-2 {
display: inline;
opacity: 0;
-webkit-animation: bookfadeintwo 0.375s forwards;
-moz-animation: bookfadeintwo 0.375s forwards;
-ms-animation: bookfadeintwo 0.375s forwards;
-o-animation: bookfadeintwo 0.375s forwards;
animation: bookfadeintwo 0.375s forwards;
}
@-webkit-keyframes bookfadeintwo {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes bookfadeintwo {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}

100% {
opacity: 1;
}
}
@-ms-keyframes bookfadeintwo {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-o-keyframes bookfadeintwo {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes bookfadeintwo {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}

#page3:checked ~ .pages div.book-full-page-3 {
display: inline;
opacity: 0;
-webkit-animation: bookfadeinthree 0.375s forwards;
-moz-animation: bookfadeinthree 0.375s forwards;
-ms-animation: bookfadeinthree 0.375s forwards;
-o-animation: bookfadeinthree 0.375s forwards;
animation: bookfadeinthree 0.375s forwards;
}
@-webkit-keyframes bookfadeinthree {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes bookfadeinthree {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}

100% {
opacity: 1;
}
}
@-ms-keyframes bookfadeinthree {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-o-keyframes bookfadeinthree {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes bookfadeinthree {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}

#page4:checked ~ .pages div.book-full-page-4 {
display: inline;
opacity: 0;
-webkit-animation: bookfadeinfour 0.375s forwards;
-moz-animation: bookfadeinfour 0.375s forwards;
-ms-animation: bookfadeinfour 0.375s forwards;
-o-animation: bookfadeinfour 0.375s forwards;
animation: bookfadeinfour 0.375s forwards;
}
@-webkit-keyframes bookfadeinfour {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes bookfadeinfour {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}

100% {
opacity: 1;
}
}
@-ms-keyframes bookfadeinfour {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-o-keyframes bookfadeinfour {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes bookfadeinfour {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}

.book-full-page-1 {
position: absolute;
width: 100%;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #FFFFFF;
background-image: url("");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: none;
}

.book-full-page-2 {
position: absolute;
width: 100%;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #FFFFFF;
background-image: url("");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: none;
}

.book-full-page-3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #FFFFFF;
background-image: url("");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: none;
}

.book-full-page-4 {
position: absolute;
width: 100%;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #FFFFFF;
background-image: url("");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: none;
}

.book-shadow-left {
position: absolute;
width: 100%;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: rgba(255,255,255,0);
background: linear-gradient(90deg, rgba(0,0,0,0.125) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0) 100%);
border: 1px solid #808080;
}

.book-shadow-right {
position: absolute;
width: 100%;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: rgba(255,255,255,0);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 85%, rgba(0,0,0,0.125) 100%);
border: 1px solid #808080;
}

.page-shadow {
-webkit-box-shadow: 0px 10px 10px 7.5px rgba(0,0,0,0.075);
-moz-box-shadow: 0px 10px 10px 7.5px rgba(0,0,0,0.075);
-m2-box-shadow: 0px 10px 10px 7.5px rgba(0,0,0,0.075);
-o-box-shadow: 0px 10px 10px 7.5px rgba(0,0,0,0.075);
box-shadow: 0px 10px 10px 7.5px rgba(0,0,0,0.075);
}

.page-spacer-top {
width: 100%;
height: 35px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.page-spacer-bottom {
width: 100%;
height: 35px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.page-hand-pulse {
box-sizing: border-box;
align-items: center;
justify-content: center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-animation: handpulse 2s infinite;
-moz-animation: handpulse 2s infinite;
-ms-animation: handpulse 2s infinite;
-o-animation: handpulse 2s infinite;
animation: handpulse 2s infinite;
}

@-webkit-keyframes handpulse {
0% {
-webkit-transform: scale(0.75);
}

70% {
-webkit-transform: scale(1);
}

100% {
-webkit-transform: scale(0.75);
}
}

@-moz-keyframes handpulse {
0% {
-moz-transform: scale(0.75);
}

70% {
-moz-transform: scale(1);
}

100% {
-moz-transform: scale(0.75);
}
}

@-ms-keyframes handpulse {
0% {
-ms-transform: scale(0.75);
}

70% {
-ms-transform: scale(1);
}

100% {
-ms-transform: scale(0.75);
}
}

@-o-keyframes handpulse {
0% {
-o-transform: scale(0.75);
}

70% {
-o-transform: scale(1);
}

100% {
-o-transform: scale(0.75);
}
}

@keyframes handpulse {
0% {
transform: scale(0.75);
}

70% {
transform: scale(1);
}

100% {
transform: scale(0.75);
}
}

.book-hand-container {
position: absolute;
right: 2.5%;
bottom: 2.5%;
width: 80px;
height: 80px;
margin: 0 0 0 0;
padding: 0 0 0 0;
opacity: 0.5;
}

.book-hand-container img {
display: block;
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
opacity: 1;
border: 0;
border: none;
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
-ms-border-radius: 0 0 0 0;
-o-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}

.book-hand-container-inside-animation {
width: 100%
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.book-hand-container-inside-animation img {
display: block;
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
opacity: 1;
border: 0;
border: none;
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
-ms-border-radius: 0 0 0 0;
-o-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}

.book-text-container {
position: absolute;
width: 100%;
height: 300px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.book-text-container-left {
float: left;
width: 50%;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.book-text-container-left-inside {
float: right;
width: 440px;
margin: 0 0 0 0;
padding: 0 37.5px 0 37.5px;
}

.book-text-container-right {
float: left;
width: 50%;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.book-text-container-right-inside {
float: left;
width: 440px;
margin: 0 0 0 0;
padding: 0 37.5px 0 37.5px;
}

.rise-shake-animation {
-webkit-animation: jumpshaking 2s infinite;
-moz-animation: jumpshaking 2s infinite;
-ms-animation: jumpshaking 2s infinite;
-o-animation: jumpshaking 2s infinite;
animation: jumpshaking 2s infinite;
}

@-webkit-keyframes jumpshaking {
0% { -webkit-transform: translateX(0) }
25% { -webkit-transform: translateY(-9px) }
35% { -webkit-transform: translateY(-9px) rotate(17deg) }
55% { -webkit-transform: translateY(-9px) rotate(-17deg) }
65% { -webkit-transform: translateY(-9px) rotate(17deg) }
75% { -webkit-transform: translateY(-9px) rotate(-17deg) }
100% { -webkit-transform: translateY(0) rotate(0) }
}

@-moz-keyframes jumpshaking {
0% { -moz-transform: translateX(0) }
25% { -moz-transform: translateY(-9px) }
35% { -moz-transform: translateY(-9px) rotate(17deg) }
55% { -moz-transform: translateY(-9px) rotate(-17deg) }
65% { -moz-transform: translateY(-9px) rotate(17deg) }
75% { -moz-transform: translateY(-9px) rotate(-17deg) }
100% { -moz-transform: translateY(0) rotate(0) }
}

@-ms-keyframes jumpshaking {
0% { -ms-transform: translateX(0) }
25% { -ms-transform: translateY(-9px) }
35% { -ms-transform: translateY(-9px) rotate(17deg) }
55% { -ms-transform: translateY(-9px) rotate(-17deg) }
65% { -ms-transform: translateY(-9px) rotate(17deg) }
75% { -ms-transform: translateY(-9px) rotate(-17deg) }
100% { -ms-transform: translateY(0) rotate(0) }
}

@-o-keyframes jumpshaking {
0% { -o-transform: translateX(0) }
25% { -o-transform: translateY(-9px) }
35% { -o-transform: translateY(-9px) rotate(17deg) }
55% { -o-transform: translateY(-9px) rotate(-17deg) }
65% { -o-transform: translateY(-9px) rotate(17deg) }
75% { -o-transform: translateY(-9px) rotate(-17deg) }
100% { -o-transform: translateY(0) rotate(0) }
}

@keyframes jumpshaking {
0% { transform: translateX(0) }
25% { transform: translateY(-9px) }
35% { transform: translateY(-9px) rotate(17deg) }
55% { transform: translateY(-9px) rotate(-17deg) }
65% { transform: translateY(-9px) rotate(17deg) }
75% { transform: translateY(-9px) rotate(-17deg) }
100% { transform: translateY(0) rotate(0) }
}

.book-text-container-left-inside h2 {
width: 100%;
margin: 0 0 25px 0;
padding: 0 0 0 0;
font-family: 'Figtree', sans-serif, 'Manrope', 'Inter', sans-serif, Arial, Verdana, Helvetica;
font-optical-sizing: auto;
font-weight: 900;
font-size: 3em;
letter-spacing: -0.0175em;
line-height: 1.1125;
text-align: left;
opacity: 1;
}

.book-text-container-left-inside h3 {
width: 100%;
margin: 0 0 12.5px 0;
padding: 0 0 0 0;
font-family: 'Figtree', sans-serif, 'Manrope', 'Inter', sans-serif, Arial, Verdana, Helvetica;
font-optical-sizing: auto;
font-weight: 900;
font-size: 2em;
letter-spacing: -0.0175em;
line-height: 1.1125;
text-align: left;
opacity: 1;
}

.book-text-container-left-inside p {
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: 'Figtree', sans-serif, 'Manrope', 'Inter', sans-serif, Arial, Verdana, Helvetica;
font-optical-sizing: auto;
font-weight: 400;
font-size: 1.225em;
letter-spacing: -0.0025em;
line-height: 1.3;
text-align: left;
opacity: 1;
}

.book-text-container-left-inside .small-text {
font-size: 0.925em;
}

.book-text-container-left-inside .bold-text {
font-weight: 900;
}

.book-text-container-right-inside h2 {
width: 100%;
margin: 0 0 25px 0;
padding: 0 0 0 0;
font-family: 'Figtree', sans-serif, 'Manrope', 'Inter', sans-serif, Arial, Verdana, Helvetica;
font-optical-sizing: auto;
font-weight: 900;
font-size: 3em;
letter-spacing: -0.0175em;
line-height: 1.1125;
text-align: left;
opacity: 1;
}

.book-text-container-right-inside h3 {
width: 100%;
margin: 0 0 12.5px 0;
padding: 0 0 0 0;
font-family: 'Figtree', sans-serif, 'Manrope', 'Inter', sans-serif, Arial, Verdana, Helvetica;
font-optical-sizing: auto;
font-weight: 900;
font-size: 2em;
letter-spacing: -0.0175em;
line-height: 1.1125;
text-align: left;
opacity: 1;
}

.book-text-container-right-inside p {
width: 100%;
margin: 0 0 12.5px 0;
padding: 0 0 0 0;
font-family: 'Figtree', sans-serif, 'Manrope', 'Inter', sans-serif, Arial, Verdana, Helvetica;
font-optical-sizing: auto;
font-weight: 400;
font-size: 1.225em;
letter-spacing: -0.0025em;
line-height: 1.3;
text-align: left;
opacity: 1;
}

.book-text-container-right-inside .small-text {
font-size: 0.925em;
}

.book-text-container-right-inside .bold-text {
font-weight: 900;
}

/* ------------------------------------------------------------------------------------------------------- */