.card {
-webkit-perspective: 1500px;
perspective: 1500px;
position: absolute;
left: calc(50% - 155px);
top: calc(50% - 200px);
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition-delay: initial;
transition-delay: initial;
-webkit-transform: rotate(-10deg) translate(0, 0);
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% - 107px);
}
}
.card:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 50px #000;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.card.is-opened {
-webkit-transform: rotate(0deg) translate(175px, 0);
transform: rotate(0deg) translate(175px, 0);
}
@media (max-width: 767px) {
.card.is-opened {
-webkit-transform: rotate(0deg) translate(115px, 0);
transform: rotate(0deg) translate(115px, 0);
}
}
@media (max-width: 479px) {
.card.is-opened {
-webkit-transform: rotate(0deg) translate(75px, 0);
transform: rotate(0deg) translate(75px, 0);
}
}
.card.is-opened .cart-page-front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
@-webkit-keyframes cardIn {
0% {
opacity: 0;
-webkit-transform: rotate(-10deg) translate(0, -100%);
transform: rotate(-10deg) translate(0, -100%);
}
25% {
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: rotate(-10deg) translate(0, 0);
transform: rotate(-10deg) translate(0, 0);
}
}
@keyframes cardIn {
0% {
opacity: 0;
-webkit-transform: rotate(-10deg) translate(0, -100%);
transform: rotate(-10deg) translate(0, -100%);
}
25% {
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: rotate(-10deg) translate(0, 0);
transform: rotate(-10deg) translate(0, 0);
}
}
.card, .card-page {
width: 280px;
height: 400px;
}
@media (max-width: 767px) {
.card, .card-page {
width: 230px;
height: 329px;
}
}
@media (max-width: 479px) {
.card, .card-page {
width: 150px;
height: 214px;
}
}
.card-page {
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
cursor: pointer;
position: absolute;
outline: 1px solid transparent;
}
.cart-page-front {
-webkit-transform-origin: 0 50% 0;
transform-origin: 0 50% 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-20deg);
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: #c72320 url(/wp-content/themes/MeetGavernWP/card/img/front-bg.jpg) no-repeat center;
background-size: cover;
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.cart-page-outside {
border: 5px solid #fbfbfb;
}
}
.cart-page-inside,
.cart-page-bottom {
background-color: #d4d1d0;
background-image: url(/wp-content/themes/MeetGavernWP/card/img/pattern.png);
border: 20px solid #d4d1d0;
display: -webkit-box;
display: -moz-box;
display: box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
box-pack: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
-webkit-box-align: 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;
}
.cart-page-bottom{
flex-direction: column;
}
.card-page__title{
font-size: 20px;
color: #D50000;
}
@media (max-width: 767px) {
.cart-page-inside,
.cart-page-bottom {
border: 10px solid #d4d1d0;
}
}
.cart-page-inside {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
border-right: none !important;
background-position: 0px 80px;
}
@media (max-width: 767px) {
.cart-page-inside {
background-position: 0px 30px;
}
}
@media (max-width: 479px) {
.cart-page-inside {
background-position: 0px 30px;
}
}
.cart-page-bottom {
z-index: 1;
border-left: none !important;
background-position: -22px 80px;
}
@media (max-width: 767px) {
.cart-page-bottom {
background-position: 85px 30px;
}
}
@media (max-width: 479px) {
.cart-page-bottom {
background-position: 0px 30px;
}
}
.merry-christmas {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.merry-christmas img {
width: 320px;
height: auto;
}
@media (max-width: 767px) {
.merry-christmas img {
width: 200px;
}
}
@media (max-width: 479px) {
.merry-christmas img {
width: 140px;
}
}
.click-icon {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
bottom: 20px;
-webkit-animation: iconAnimation 1s infinite alternate ease-in-out;
animation: iconAnimation 1s infinite alternate ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity: 1;
}
.click-icon svg {
width: 126px;
height: 126px;
}
@media (max-width: 767px) {
.click-icon svg {
width: 85px;
height: 85px;
}
}
@media (max-width: 479px) {
}
.click-icon.is-hidden {
opacity: 0;
}
@-webkit-keyframes iconAnimation {
0% {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
100% {
-webkit-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
}
}
@keyframes iconAnimation {
0% {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
100% {
-webkit-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
}
}
.newYearCard{
position: relative;
height: 560px;
background-image: url(/wp-content/themes/MeetGavernWP/card/img/slider_slide.png);
background-size: cover;
background-repeat: no-repeat;
}
.card-page__text p{
font-size: 14px;
margin: 0 5px;
text-align: center;
}
@media (max-width: 767px) {
.card-page__title{
font-size: 16px;
}
p {
font-size: 14px;
}
}
@media (max-width: 479px) {
.card-page__text{
display: none;
}
}
@media (max-width: 600px) {
.newYearCard {
height: 380px;
}
.click-icon {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
bottom: 45px;
}
}