#animate{display:flex;justify-content:center}#animate *,#animate *:after,#animate *:before{margin:0;padding:0;box-sizing:border-box}#animate body{min-height:100vh;padding:40px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;background:#1c1e22;font-family:sans-serif}#animate .flip-card-container{--hue: 150;--primary: hsl(var(--hue), 50%, 50%);--white-1: hsl(0, 0%, 90%);--white-2: hsl(0, 0%, 80%);--dark: hsl(var(--hue), 25%, 10%);--grey: hsl(0, 0%, 50%);width:310px;height:500px;margin:40px;perspective:1000px}#animate .flip-card{width:inherit;height:inherit;position:relative;transform-style:preserve-3d;transition:.6s .1s}#animate .flip-card-container:hover .flip-card,#animate .flip-card-container:focus-within .flip-card .active{transform:rotateY(180deg)}#animate .card-front,#animate .card-back{width:100%;height:100%;border-radius:24px;background:var(--dark);position:absolute;top:0;left:0;overflow:hidden;backface-visibility:hidden;display:flex;justify-content:center;align-items:center}#animate .card-front{transform:rotateY(0);z-index:2}#animate .card-back{transform:rotateY(180deg);z-index:1;opacity:.6}#animate .card-back .desc-text{font-size:1.1vw;color:#fff;text-align:left;padding-left:1vw}#animate figure{z-index:-1}#animate figure,#animate .img-bg{position:absolute;top:0;left:0;width:100%;height:100%}#animate img{height:100%;border-radius:24px}#animate figcaption{display:block;width:100%;margin-top:6%;padding:8px 22px;font-weight:700;line-height:1.6;letter-spacing:2px;word-spacing:6px;text-align:center;position:absolute;top:0;right:auto;left:auto;color:var(--white-1);background:hsla(var(--hue),25%,10%,.5)}#animate .img-bg{background:hsla(var(--hue),25%,10%,.5)}#animate .card-front .img-bg{clip-path:polygon(0 20%,100% 40%,100% 100%,0 100%)}#animate .card-front .img-bg:before{content:"";position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) rotate(18deg);width:100%;height:6px;border:1px solid var(--primary);border-left-color:transparent;border-right-color:transparent;transition:.1s}#animate .card-back .img-bg{clip-path:polygon(0 0,100% 0,100% 80%,0 60%)}#animate .flip-card-container:hover .card-front .img-bg:before{width:6px;border-left-color:var(--primary);border-right-color:var(--primary)}#animate ul{padding-top:50%;margin:0 auto;width:70%;height:100%;list-style:none;color:var(--white-1);display:flex;justify-content:center;align-items:center;flex-direction:column}#animate li{width:100%;margin-top:12px;padding-bottom:12px;font-size:14px;text-align:center;position:relative}#animate li:nth-child(2n){color:var(--white-2)}#animate li:not(:last-child):after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:currentColor;opacity:.2}#animate button{font-family:inherit;font-weight:700;color:var(--white-1);letter-spacing:2px;padding:9px 20px;border:1px solid var(--grey);border-radius:1000px;background:transparent;transition:.3s;cursor:pointer}#animate button:hover,#animate button:focus{color:var(--primary);background:hsla(var(--hue),25%,10%,.2);border-color:currentColor}#animate button:active{transform:translate(2px)}#animate .design-container{--tr: 90;--op: .5;width:100%;height:100%;background:transparent;position:absolute;top:0;left:0;pointer-events:none}#animate .design{display:block;background:var(--grey);position:absolute;opacity:var(--op);transition:.3s}#animate .design--1,#animate .design--2,#animate .design--3,#animate .design--4{width:1px;height:100%}#animate .design--1,#animate .design--2{top:0;transform:translateY(calc((var(--tr) - (var(--tr) * 2)) * 1%))}#animate .design--1{left:20%}#animate .design--2{left:80%}#animate .design--3,#animate .design--4{bottom:0;transform:translateY(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%))}#animate .design--3{left:24%}#animate .design--4{left:76%}#animate .design--5,#animate .design--6,#animate .design--7,#animate .design--8{width:100%;height:1px}#animate .design--5,#animate .design--6{left:0;transform:translate(calc((var(--tr) - (var(--tr) * 2)) * 1%))}#animate .design--5{top:41%}#animate .design--6{top:59%}#animate .design--7,#animate .design--8{right:0;transform:translate(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%))}#animate .design--7{top:44%}#animate .design--8{top:56%}#animate button:hover+.design-container,#animate button:active+.design-container,#animate button:focus+.design-container{--tr: 20;--op: .7}#animate .abs-site-link{position:fixed;bottom:20px;left:20px;color:#fff9;font-size:16px;font-family:sans-serif}@media screen and (max-width: 767px){#animate{flex-direction:column;align-items:center}#animate .card-back .desc-text{font-size:14px}}
/*# sourceMappingURL=/cdn/shop/t/1/assets/custom-styles.css.map */