* { box-sizing: border-box; } .card { perspective: 1500px; position: absolute; left: calc(50% - 175px); /* top: calc(50% - 250px); */ /* top: calc(50% - 190px); */ top: calc(35% - 150px); transition-property: transform; transition-duration: 1s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-delay: initial; transform: rotate(-10deg) translate(0, 0); -webkit-animation: cardIn 1s alternate cubic-bezier(0.87, -0.41, 0.19, 1.44); animation: cardIn 1s alternate cubic-bezier(0.87, -0.41, 0.19, 1.44); } @media (max-width: 767px) { .card { left: calc(50% - 115px); top: calc(50% - 164.5px); } } @media (max-width: 479px) { .card { left: calc(50% - 75px); top: calc(50% - 185px); } } @media (max-width: 320px) { .card { left: calc(50% - 75px); top: calc(50% - 135px); } } .card:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-shadow: 0 0 50px #000; transition: all 0.5s ease-in-out; opacity: .5; } .card.is-opened { transform: rotate(0deg) translate(175px, 0); } @media (max-width: 767px) { .card.is-opened { transform: rotate(0deg) translate(115px, 0); } } @media (max-width: 479px) { .card.is-opened { transform: rotate(0deg) translate(75px, 0); } } .card.is-opened .cart-page-front { transform: rotateY(-180deg); } @-webkit-keyframes cardIn { 0% { opacity: 0; transform: rotate(-10deg) translate(0, -100%); } 25% { opacity: 1; } 100% { opacity: 1; transform: rotate(-10deg) translate(0, 0); } } @keyframes cardIn { 0% { opacity: 0; transform: rotate(-10deg) translate(0, -100%); } 25% { opacity: 1; } 100% { opacity: 1; transform: rotate(-10deg) translate(0, 0); } } .card, .card-page { /* width: 441px; height: 500px; */ width: 387px; height: 520px; } @media (max-width: 767px) { .card, .card-page { width: 230px; height: 329px; } } @media (max-width: 479px) { .card, .card-page { /* width: 180px; height: 242px; */ width: 170px; height: 230px; } } @media (max-width: 320px) { .card, .card-page { /* border: 1px solid red; */ width: 149px; height: 200px; } } .card-page { transition: transform 1s ease-in-out; cursor: pointer; position: absolute; outline: 1px solid transparent; } .card-page p { font-size: 1.7rem; font-family: 'hynings'; font-weight: 700; color: #000; display: inline-flex; align-items: center; text-align: center; /* min-height: 115px; */ } .card-page .tooltip-texto p { font-size: 1.7rem; font-family: 'hynings'; font-weight: 700; color: #000; display: inline-flex; align-items: center; text-align: center; min-height: 115px; -ms-word-break: break-all; word-break: break-all; word-break: break-word; /* Sólo WebKit -NO DOCUMENTADO */ -ms-hyphens: auto; /* Guiones para separar en sílabas */ -moz-hyphens: auto; /* depende de lang en */ -webkit-hyphens: auto; hyphens: auto; } .cart-page-front { transform-origin: 0 50% 0; transform-style: preserve-3d; transform: rotateY(-20deg); z-index: 2; } .cart-page-outside, .cart-page-inside { position: absolute; -webkit-backface-visibility: hidden; } .cart-page-outside { border: 10px solid #fbfbfb; background: url("../images/portada-nueva.jpg") no-repeat center; background-size: cover; width: 100%; height: 100%; background-color: #fff; } @media (max-width: 767px) { .cart-page-outside { border: 5px solid #fbfbfb !important; } } .cart-page-inside { background-image: url("../images/interior-personajes-2.jpg"); background-size: cover; transform: rotateY(-180deg); border-right: none !important; background-position: top left; } .cart-page-bottom { background-image: url("../images/interior-personajes-2.jpg"); background-size: cover; background-position: top right; z-index: 1; border-left: none !important; } .cart-page-inside, .cart-page-bottom { background-color: #d4d1d0; /* background-image: url("https://www.dropbox.com/s/8hw7guch8d151kg/pattern.png?raw=1"); */ border: 5px solid #d4d1d0; display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: flex; box-pack: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; box-align: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; text-align: center; } @media (max-width: 767px) { .cart-page-inside, .cart-page-bottom { border: 3px solid #d4d1d0; } } @media (max-width: 767px) { .cart-page-inside { background-position: top left; } } @media (max-width: 479px) { .cart-page-inside { background-position: top left; } } @media (max-width: 767px) { .cart-page-bottom { background-position: top right; } } @media (max-width: 479px) { .cart-page-bottom { background-position: top right; } } .merry-christmas svg { width: 350px; height: auto; } @media (max-width: 767px) { .merry-christmas svg { width: 200px; } .merry-christmas { border: 2px solid rgba(255,255,255,.5); } } @media (max-width: 479px) { .merry-christmas svg { width: 150px; } .merry-christmas { border: 2px solid rgba(255,255,255,.5); margin-top: 55px !important; } } @media (max-width: 320px) { .merry-christmas { border: 2px solid rgba(255,255,255,.5); margin-top: 55px !important; } } .click-icon { position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 50px; -webkit-animation: iconAnimation 1s infinite alternate ease-in-out; animation: iconAnimation 1s infinite alternate ease-in-out; transition: opacity 0.5s ease-in-out; opacity: 1; display: grid; grid-template-columns: 20% 80%; align-items: center; } .click-icon .manito-texto { font-family: 'hynings'; text-align: left; font-size: 1.3rem; font-weight: 400; color: #fff; } .click-icon svg { width: 50px; height: 50px; } @media (max-width: 767px) { .click-icon svg { width: 72px; height: 72px; } } @media (max-width: 479px) { .click-icon svg { width: 48px; height: 48px; } .click-icon { bottom: 25%; display: none; } } @media (max-width: 320px) { .click-icon svg { display: none; } .click-icon { display: none; bottom: 25%; } } .click-icon.is-hidden { opacity: 0; } @-webkit-keyframes iconAnimation { 0% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, 10px); } } @keyframes iconAnimation { 0% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, 10px); } } /* p { font-family: "Mirza", Verdana, Arial, serif; font-size: 36px; line-height: 1.2em; padding-left: 10px; } */ @media (max-width: 767px) { p { font-size: 24px; } } @media (max-width: 479px) { p { font-size: 20px; } }