#compare::before{content:'';position:fixed;z-index:1;height:100vh;width:100vw;top:0;left:0;background:rgba(0,0,0,0.15);opacity:0;visibility:hidden;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s}
#compare.compare-open::before{opacity:1;visibility:visible}
#compare{position:fixed;width:100%;z-index:9999;bottom:40px}
.compare-wrap{position:relative}
.empty .compare-trigger,.empty .compare-meta{-webkit-transform:translateY(170px);-ms-transform:translateY(170px);transform:translateY(170px)}
.compare-trigger{z-index:3;white-space:nowrap;background:#fff;width:72px;height:72px;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:1.2em;color:#000;border-radius:var(--radius);cursor:pointer}
.compare-trigger,.compare-meta{position:fixed;bottom:4%;right:20%;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;will-change:transform;backface-visibility:hidden}
.compare-trigger::after,.compare-trigger::before{content:'';position:absolute;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);height:100%;width:100%;-webkit-transition:opacity .2s,-webkit-transform .2s;transition:opacity .2s,-webkit-transform .2s;transition:opacity .2s,transform .2s;transition:opacity .2s,transform .2s,-webkit-transform .2s}
.compare-trigger::after{opacity:0;-webkit-transform:translateX(-50%) translateY(-50%) rotate(90deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(90deg);transform:translateX(-50%) translateY(-50%) rotate(90deg)}
.compare-open .compare-trigger::before{opacity:0}
.compare-open .compare-trigger::after{opacity:1;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
.compare-trigger .count{position:absolute;top:-10px;right:-10px;height:28px;width:28px;border-radius:50%;text-indent:0;-webkit-transition:-webkit-transform .2s .5s;transition:-webkit-transform .2s .5s;transition:transform .2s .5s;transition:transform .2s .5s,-webkit-transform .2s .5s;background:var(--primaryColor);color:#fff;font-size:.85em;}
.compare-meta .body ul{overflow:hidden;padding:0 15px;position:relative;padding-bottom:90px}
.compare-trigger .count li{position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
.compare-trigger .count.update-count li:last-of-type{-webkit-animation:cd-qty-enter .15s;animation:cd-qty-enter .15s;-webkit-animation-direction:forwards;animation-direction:forwards}
.compare-trigger .count.update-count li:first-of-type{-webkit-animation:cd-qty-leave .15s;animation:cd-qty-leave .15s;-webkit-animation-direction:forwards;animation-direction:forwards}
.compare-open .compare-trigger .count{-webkit-transition:-webkit-transform .2s 0;transition:-webkit-transform .2s 0;transition:transform .2s 0;transition:transform .2s 0s,-webkit-transform .2s 0;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}
.empty .compare-trigger .count{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.compare-meta,.compare-inner{z-index:2;width:90%;max-width:440px;height:400px;max-height:90%;pointer-events:none}
.compare-meta .compare-inner{position:absolute;bottom:0;right:0;z-index:2;overflow:hidden;height:72px;width:72px;border-radius:3px;-webkit-transition:height .4s .1s,width .4s .1s,box-shadow .3s;transition:height .4s .1s,width .4s .1s,box-shadow .3s;-webkit-transition-timing-function:cubic-bezier(0.67,0.17,0.32,0.95);transition-timing-function:cubic-bezier(0.67,0.17,0.32,0.95);background:#fff;box-shadow:0 4px 30px rgba(0,0,0,0.17);pointer-events:auto}
#compare .btn-remove{font-size:.6em;float:right;text-decoration:underline;padding:5px 0;font-family:var(--body);color:var(--red)}
#compare .btn-remove a{color:red!important;font-weight:400}
#compare .remove a{color:#999}
.compare-open .compare-meta .compare-inner{height:100%;width:100%;-webkit-transition-delay:0;transition-delay:0}
.compare-open .compare-meta header,.compare-open .compare-meta .body{opacity:1}
.compare-open .compare-meta header{-webkit-transition:opacity .2s .2s;transition:opacity .2s .2s}
.compare-open .compare-meta .body{-webkit-transition:opacity 0;transition:opacity 0}
.compare-open .compare-meta .body li{-webkit-transition:opacity .3s .2s,-webkit-transform .3s .2s;transition:opacity .3s .2s,-webkit-transform .3s .2s;transition:transform .3s .2s,opacity .3s .2s;transition:transform .3s .2s,opacity .3s .2s,-webkit-transform .3s .2s;opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
.compare-open .compare-meta .body li:nth-of-type(2){-webkit-transition-duration:.4s;transition-duration:.4s}
.compare-open .compare-meta .body li:nth-of-type(3){-webkit-transition-duration:.5s;transition-duration:.5s}
.compare-open .compare-meta .body li:nth-of-type(4),.compare-open .compare-meta .body li:nth-of-type(5){-webkit-transition-duration:.55s;transition-duration:.55s}
.compare-open .compare-meta .checkout{color:#fff;-webkit-transition:color .2s .3s;transition:color .2s .3s}
.compare-open .compare-meta .checkout em{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:padding .2s 0s,-webkit-transform .2s .3s;transition:padding .2s 0s,-webkit-transform .2s .3s;transition:transform .2s .3s,padding .2s 0;transition:transform .2s .3s,padding .2s 0s,-webkit-transform .2s .3s}
.compare-open .compare-meta .checkout:hover em{padding-right:30px}
.compare-open .compare-meta .checkout:hover em::after{opacity:1}
.compare-meta header,.compare-meta footer{position:absolute;z-index:2;left:0;width:100%}
.compare-meta header{-webkit-transition:opacity .2s 0;transition:opacity .2s 0;padding:15px;text-align:left;font-size:1.2em;vertical-align:middle;background:#fff;color:#000;border-bottom:1px solid #eee;font-weight:600}
.compare-meta header::after{clear:both;content:"";display:block}
.compare-meta footer{bottom:0;box-shadow:0 -2px 20px rgba(0,0,0,0.15);background:#fff}
.compare-meta .compare-btn{display:block;height:72px;line-height:72px;margin-right:72px;text-align:center;font-weight:600;-webkit-transition:all .2s 0;transition:all .2s 0;font-size:1.4em;background:var(--btn1);color:var(--btn1Text)}
.compare-meta .compare-btn:hover{opacity:.8}
.compare-meta .compare-btn em{position:relative;display:inline-block;-webkit-transform:translateX(40px);-ms-transform:translateX(40px);transform:translateX(40px);-webkit-transition:-webkit-transform 0 .2s;transition:-webkit-transform 0 .2s;transition:transform 0 .2s;transition:transform 0 .2s,-webkit-transform 0 .2s}
.compare-meta .compare-btn em::after{position:absolute;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:0;content:'';height:24px;width:24px;background:url(../img/cd-icon-arrow-next.svg) no-repeat center center;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}
.compare-meta .body{position:relative;z-index:1;height:calc(100% - 40px);padding:20px 0 10px;margin:40px 0 10px;overflow:auto;-webkit-overflow-scrolling:touch;-webkit-transition:opacity .2s;transition:opacity .2s}
.compare-meta .body ul{overflow:hidden;padding:0 15px;position:relative;padding-bottom:90px}
.compare-meta .item .item-image-container img{padding:10%}
.compare-meta .item .item-image-container{flex:0 0 80px}
.compare-meta .body li{position:relative;opacity:0;-webkit-transform:translateX(80px);-ms-transform:translateX(80px);transform:translateX(80px);-webkit-transition:opacity 0 .2s,-webkit-transform 0 .2s;transition:opacity 0 .2s,-webkit-transform 0 .2s;transition:opacity 0 .2s,transform 0 .2s;transition:opacity 0 .2s,transform 0 .2s,-webkit-transform 0 .2s}
.compare-meta .body li:not(:last-of-type){margin-bottom:20px}
.compare-inner .item.item-list.small-list{align-items:center}
@-webkit-keyframes cd-qty-enter {
0%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0)}
100%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
}
@keyframes cd-qty-enter {
0%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0)}
100%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
}
@-webkit-keyframes cd-qty-leave {
0%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
100%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}
}
@keyframes cd-qty-leave {
0%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
100%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}
}

@media (max-width:767px){
  .compare-trigger, .compare-meta {
	bottom: 5%;
	right: 5%;
}
}