#recipes-book, #recipes-book:before, #recipes-book:after {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#recipes-book * {
transform-style: preserve-3d;
}
#recipes-book {
color: #222;
perspective: 70em;
height: 730px;
width: 100%;
transition: padding 0.8s ease;
}
#recipes-book h2, #recipes-book p, #recipes-book li, #recipes-book .content-recette {
margin: 0;
font-family: Cronos;
}
@keyframes hide {
0% {
opacity: 0;
}
85% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes flip {
to {
transform: rotateY(-180deg);
}
}
@keyframes unflip {
from {
transform: rotateY(-180deg);
}
to {
transform: rotateY(0deg);
}
}
@keyframes rotate {
from {
background-position: 0px 0px;
}
to {
background-position: 610px 0px;
}
}
#book-inner-decoration {
height: 100%;
width: 100%;
border: 8px solid #2b4357;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}
.p-wrapper p {
line-height: 1.5em;
}
#recipes-book .img-book-wrapper {
padding: 10px 10px 10px;
background-color: white;
margin: 13% 0 0 13%;
width: 211px;
transform: rotate(-3deg);
box-shadow: 3px 3px 6px #0000005c;
transition: 0.8s ease margin;
}
#recipes-book .img-book-wrapper:after {
content: attr(title);
font-family: Cronos;
text-align: center;
display: block;
padding-top: 5px;
}
#recipes-book .img-book-wrapper img {
border-radius: 0;
}
#recipes-book .content-recette .img-book-wrapper {
padding: 10px;
background-color: white;
margin: auto;
width: 70%;
transform: rotate(-3deg);
box-shadow: 3px 3px 6px #0000005c;
transition: 0.8s ease width;
}
#recipes-book .content-recette .img-book-wrapper:after {
content: attr(title);
font-family: Cronos;
text-align: center;
display: block;
padding-top: 5px;
}
#recipes-book .content-recette .img-book-wrapper img {
border-radius: 0;
}
.content-recette {
height: 100%;
display: flex;
flex-direction: column;
} .hide-mobile {
display: none;
}
.hide-desktop {
display: block;
}
@media only screen and (min-width: 800px) {
.hide-mobile {
display: block;
}
.hide-desktop {
display: none;
}
.flipped {
transform: rotateY(-180deg);
pointer-events: none; }
.no-anim, .no-anim:after {
animation: none; }
.the-book {
height: 90%;
max-height: 650px;
min-height: 300px;
max-width: 950px;
background: #68abdd;
margin: auto;
border: 10px solid #1b2a36;
border-radius: 5px;
box-shadow: 0 0 150px hsla(100, 0%, 0%, .4);
box-sizing: content-box;
}
.book-page {
height: 100%;
width: 50%;
border-right: 10px solid transparent;
position: absolute;
top: 0;
right: 0;
transform-origin: 0 50%;
transition: .6s; }
[class*='viewside'] {
height: 100%;
width: 100%;
position: absolute;
background-image: url(//machouyou.com/wp-content/themes//theme-machouyou/images/paper.jpg);
background-size: cover;
backface-visibility: hidden;
overflow: auto;
padding: 5% 8%;
}
.viewside-1 {
z-index: 2;
box-shadow: inset 20px 0 40px rgba(0, 0, 0, 0.377);
transition: .5s;
}
.viewside-2 {
background-color: #f3ecdd;
transform: rotateY(180deg);
box-shadow: inset -20px 0 40px rgba(0, 0, 0, 0.377);
}
.flipped>.viewside-1 {
box-shadow: inset 300px 0 40px rgba(0, 0, 0, .8);
transition: .6s;
}
.flipped>[class*='viewside'] {
pointer-events: auto;
}
.book-page:after {
width: 51px;
height: 26px;
font-weight: bold;
background-color: #f9b645;
position: absolute;
top: 25%;
right: -65px;
margin: auto;
color: white;
padding: 7px;
text-shadow: 0 -1px 0 #222;
line-height: 38px;
text-align: center;
content: url(//machouyou.com/wp-content/themes/theme-machouyou/images/recettes/maindroite.png);
cursor: pointer;
border-radius: 0 8px 15px 0; }
.book-page.flipped:after {
border-radius: 8px 0 0 15px;
transform: rotateY(180deg);
pointer-events: auto;
cursor: pointer;
content: url(//machouyou.com/wp-content/themes/theme-machouyou/images/recettes/maingauche.png);
}
}
@media only screen and (max-width: 1100px) {
#recipes-book {
padding: 0 5%;
}
.the-book {
max-width: 950px;
}
}
@media only screen and (max-width: 1064px) {
.the-book {
max-width: 865px;
}
}
@media only screen and (max-width: 950px) {
#recipes-book .content-recette .img-book-wrapper {
width: 80%;
}
#recipes-book .img-book-wrapper {
margin: 15% 0 0 10%;
}
}
@media only screen and (max-width: 800px) {
#recipes-book .content-recette .img-book-wrapper {
width: 48%;
margin: 25px auto 40px auto;
}
#recipes-book .title_recette {
margin-top: 20px;
}
#recipes-book .img-book-wrapper {
margin: 18% 0 0 6%;
min-width: 320px;
}
#recipes-book {
height: auto;
margin-bottom: 50px;
padding: 0;
}
#recipes-book #book-inner-decoration {
padding: 0;
box-shadow: none;
border: none;
}
#recipes-book .content-recette .chef-pic {
min-width: auto;
width: 251px;
}
#recipes-book div[data-recette] {
max-height: 0;
overflow: hidden;
transition: all 0.4s;
}
#recipes-book div[data-recette].open {
max-height: 999px;
}
#recipes-book h2[data-recette]:after {
content: "+";
margin-left: 12px;
}
#recipes-book h2[data-recette].open:after {
content: "–";
}
}
@media only screen and (max-width: 420px) {
#recipes-book .content-recette .img-book-wrapper {
width: 90%;
min-width: auto;
}
#recipes-book .content-recette .chef-pic {
max-width: 251px;
}
}