@import url("https://fonts.googleapis.com/css?family=Mirza&subset=latin-ext");*{box-sizing:border-box}body{background-color:#928a97;background-image:url(../img/roberto-nickson-5PQn41LFsQk-unsplash.jpg);background-repeat:no-repeat;background-size:cover;background-position-y:center;height:100vh;margin:0;padding:0;overflow:hidden}.card{perspective:1500px;position:absolute;left:calc(50% - 175px);top:calc(50% - 250px);transition-property:transform;transition-duration:1s;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-delay:0s;transform:rotate(-10deg) translate(0);animation:a 1s alternate cubic-bezier(.87,-.41,.19,1.44)}@media (max-width:767px){.card{left:calc(50% - 115px);top:calc(50% - 147.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;transition:all .5s ease-in-out}.card.is-opened{transform:rotate(0deg) translate(175px)}@media (max-width:767px){.card.is-opened{transform:rotate(0deg) translate(115px)}}@media (max-width:479px){.card.is-opened{transform:rotate(0deg) translate(75px)}}.card.is-opened .cart-page-front{transform:rotateY(-180deg)}@keyframes a{0%{opacity:0;transform:rotate(-10deg) translateY(-100%)}25%{opacity:1}to{opacity:1;transform:rotate(-10deg) translate(0)}}.card,.card-page{width:350px;height:500px}@media (max-width:767px){.card,.card-page{width:230px;height:295px}}@media (max-width:479px){.card,.card-page{width:150px;height:214px}}.card-page{transition:transform 1s ease-in-out;cursor:pointer;position:absolute;outline:1px solid transparent}.cart-page-front{transform-origin:0 50% 0;transform-style:preserve-3d;transform:rotateY(-20deg);z-index:2}.cart-page-inside,.cart-page-outside{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden}.cart-page-outside{border:10px solid #fbfbfb;background:#ed6c14 url(../img/todeko_card_502.png) no-repeat 50%;background-size:cover;width:100%;height:100%}@media (max-width:767px){.cart-page-outside{border:5px solid #fbfbfb}}.cart-page-bottom,.cart-page-inside{background-color:#d4d1d0;background-image:url(../img/sterne-orange.svg);border:20px solid #d4d1d0;display:-ms-flexbox;display:flex;box-pack:center;-ms-flex-pack:center;justify-content:center;box-align:center;-ms-flex-align:center;align-items:center;text-align:center}@media (max-width:767px){.cart-page-bottom,.cart-page-inside{border:10px solid #d4d1d0}}.cart-page-inside{transform:rotateY(-180deg);border-right:none!important;background-position:0 80px}@media (max-width:767px){.cart-page-inside{background-position:0 30px}}@media (max-width:479px){.cart-page-inside{background-position:0 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:0 30px}}.merry-lyric svg{width:350px;height:auto}@media (max-width:767px){.merry-lyric svg svg{width:200px}}@media (max-width:479px){.merry-lyric svg svg{width:150px}}.click-icon{position:absolute;left:50%;transform:translate(-50%);bottom:20px;animation:b 1s infinite alternate ease-in-out;transition:opacity .5s ease-in-out;opacity:1}.click-icon svg{width:96px;height:96px}@media (max-width:767px){.click-icon svg{width:72px;height:72px}}@media (max-width:479px){.click-icon svg{width:48px;height:48px}}.click-icon.is-hidden{opacity:0}@keyframes b{0%{transform:translate(-50%)}to{transform:translate(-50%,10px)}}p{font-family:Mirza,Verdana,Arial,serif;font-size:22px;line-height:1.2em;padding-left:10px}@media (max-width:767px){p{font-size:17px}}@media (max-width:479px){p{font-size:13px}}p .todeko-msg{color:#ed6c14;font-size:26px;transform:rotate(20deg);margin-top:-30px;transform:rotate(22deg);margin-top:-107px;display:block;margin-left:-48px}@media (max-width:767px){p .todeko-msg{font-size:24px;margin-left:-20px;margin-top:-75px}}@media (max-width:479px){p .todeko-msg{margin-left:-5px;font-size:17px;margin-top:-40px}}.merry-christmas svg{transform:rotate(8deg);margin-top:-200px;width:350px}@media (max-width:767px){.merry-christmas svg{font-size:24px;width:230px;margin-top:-190px}}@media (max-width:479px){.merry-christmas svg{font-size:13px;margin-top:-110px;width:150px}}.copyright{position:fixed;bottom:5px;right:5px;text-align:center;padding-right:10px;color:#928a97}.copyright a{text-decoration:none}.copyright a,.copyright a:active,.copyright a:focus,.copyright a:hover{color:#928a97}