@keyframes wpc-spinner{
to{
transform:rotate(360deg)}
}
@-webkit-keyframes wpc-spinner{
to{
-webkit-transform:rotate(360deg)}
}
@keyframes woosq-spinner{
to{
transform:rotate(360deg)}
}
@-webkit-keyframes woosq-spinner{
to{
-webkit-transform:rotate(360deg)}
}
.woosq-btn-has-icon{
display:inline-flex;
align-items:center}
.woosq-btn-has-icon .woosq-btn-icon{
margin:0}
.woosq-btn-icon-text .woosq-btn-text{
margin-left:5px}
.woosq-btn-text-icon .woosq-btn-text{
margin-right:5px}
.woosq-popup{
position:relative;
width:90%;
max-width:920px;
margin:0 auto;
padding:0;
background-color:#fff;
max-height:460px;
box-sizing:border-box;
overflow:hidden}
.woosq-popup *, .woosq-sidebar *{
box-sizing:border-box}
.woosq-open .select2-container{
z-index:99999969}
.woosq-product{
position:relative;
overflow:hidden}
.woosq-product > .product{
display:flex !important;
float:none !important}
.woosq-product > .product > div{
/*width:50% !important;*/
float:none !important;
margin:0 !important;
height:460px;
overflow:auto}
.woosq-product .thumbnails{
outline:none;
width:460px;
max-height:460px;
text-align:center;
position:relative;
background-color:#f9f9f9}
.woosq-product .thumbnails .images{
width:100% !important;
height:100% !important;
float:none !important;
margin:0 !important;
padding:0 !important}
.woosq-product .thumbnails .thumbnail{
display:flex;
height:100%;
justify-content:center}
.woosq-product .thumbnails img{
display:block;
object-fit:contain;
object-position:center;
vertical-align:middle;
max-height:460px;
max-width:100%;
margin:auto;
border-radius:0}
.woosq-product .thumbnails img[data-fancybox="gallery"]{
cursor:pointer}
.woosq-open .fancybox-container{
z-index:99999970}
.woosq-product .thumbnails{
position:relative;
margin:0 0 0 0}
.woosq-product .thumbnails .slick-slide{
outline:none;
max-height:100%}
.woosq-product .thumbnails .slick-list{
display:flex;
width:100%;
height:100%;
max-height:100%;
position:relative}
.woosq-product .thumbnails .slick-track{
display:flex;
align-items:center;
max-height:460px}
.woosq-product .thumbnails .slick-dots{
margin:0;
padding:0;
display:block;
width:100%;
text-align:center;
position:absolute;
left:0;
bottom:10px;
z-index:8}
.woosq-product .thumbnails .slick-dots li{
position:relative;
display:inline-block;
width:16px;
height:16px;
margin:0;
padding:0;
cursor:pointer}
.woosq-product .thumbnails .slick-dots li button{
font-size:0;
line-height:0;
display:block;
width:16px;
height:16px;
padding:5px;
margin:0;
text-align:center;
cursor:pointer;
color:transparent;
border:none;
outline:none;
background:transparent;
opacity:.5}
.woosq-product .thumbnails .slick-dots li.slick-active button{
opacity:1}
.woosq-product .thumbnails .slick-dots li button:before{
content:'';
display:block;
width:8px;
height:8px;
border-radius:50%;
background-color:#000000}
.woosq-product .thumbnails .slick-dots li button:focus{
outline:none}
.woosq-product .thumbnails .slick-arrow{
width:44px;
height:44px;
line-height:44px;
text-align:center;
padding:0 0 0 0;
margin:0 0 0 0;
overflow:hidden;
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:0;
color:#222;
background-color:transparent;
border-radius:0;
border:none !important;
z-index:8}
.woosq-product .thumbnails .slick-arrow:hover{
color:#fff;
background-color:rgba(0, 0, 0, .5)}
.woosq-product .thumbnails .slick-arrow:before{
font-family:"feather";
font-size:24px;
line-height:44px;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
speak:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale}
.woosq-product .thumbnails .slick-arrow:focus{
outline:none}
.woosq-product .thumbnails .slick-arrow.slick-prev{
left:0}
.woosq-product .thumbnails .slick-arrow.slick-prev:before{
content:'\e929'}
.woosq-product .thumbnails .slick-arrow.slick-next{
right:0}
.woosq-product .thumbnails .slick-arrow.slick-next:before{
content:'\e92a'}
.woosq-product > .product .summary{
margin:0;
padding:0;
background-color:#fff}
.woosq-related{
padding-top:20px;
padding-bottom:0;
margin-top:10px;
margin-bottom:0;
border-width:1px 0 0 0;
border-style:dashed;
border-color:#dddddd}
.woosq-related .woosq-related-heading{
margin-bottom:10px}
.woosq-related .woosq-related-product{
outline:none;
display:flex;
align-items:center}
.woosq-related .woosq-related-product .woosq-related-product-image{
width:80px;
flex:0 0 80px;
margin:0}
.woosq-related .woosq-related-product .woosq-related-product-image img{
width:100%;
height:auto}
.woosq-related .woosq-related-product .woosq-related-product-info{
flex-grow:1;
padding:0 10px;
text-align:start}
.woosq-related .woosq-related-product .woosq-related-product-name{
font-weight:700}
.woosq-related .woosq-related-product .woosq-related-product-atc p, .woosq-related .woosq-related-product .woosq-related-product-atc .add_to_cart_inline{
margin:0;
padding:0;
border:none;
display:inline-block;
width:100%}
.woosq-related .woosq-related-product .woosq-related-product-atc p .button{
display:block;
margin:0;
outline:none}
.woosq-related .slick-dots{
list-style:none;
text-align:center;
margin:0;
padding:0}
.woosq-related .slick-dots li{
display:inline-block;
margin:0 5px;
font-size:0}
.woosq-related .slick-dots li button{
width:8px;
height:8px;
border-radius:50%;
padding:0;
font-size:0;
line-height:0;
background-color:rgba(0, 0, 0, .2);
border:none;
outline:none;
overflow:hidden}
.woosq-related .slick-dots li.slick-active button{
background-color:rgba(0, 0, 0, .5)}
.view-details-btn{
width:50%;
height:44px;
line-height:44px;
overflow:hidden;
position:absolute;
left:auto;
right:0;
bottom:0;
background-color:#222;
box-shadow:10px -20px 20px #fff;
color:#fff;
text-align:center;
outline:none;
-webkit-transition:all 0.15s ease-out;
-moz-transition:all 0.15s ease-out;
transition:all 0.15s ease-out}
.view-details-btn:after{
content:'\e90f';
font-family:"feather";
margin-left:10px}
.view-details-btn:hover{
background-color:#5fbd74}
.woosq-product > .product .summary .summary-content{
height:100%;
overflow-x:hidden;
overflow-y:auto;
position:relative;
padding:20px}
.woosq-popup.view-details .woosq-product > .product .summary .summary-content{
padding-bottom:64px}
/* RTL */
body.rtl .mfp-woosq .mfp-close{
right:auto !important;
left:0 !important}
/* Responsive */
@media screen and (max-width:1023px){
.woosq-popup{
max-width:460px;
max-height:90vh;
overflow:hidden;
display:flex;
flex-direction:column}
.woosq-product{
height:100%;
flex-grow:1;
position:relative;
overflow-y:auto}
.woosq-product > .product{
display:flex;
flex-direction:column}
.woosq-product > .product > div{
width:100% !important;
float:none !important;
margin:0 !important;
height:auto}
.woosq-product > .product .thumbnails{
max-height:338px}
.woosq-product .thumbnails img{
max-height:338px;
margin:0}
.woosq-product .thumbnails .slick-track{
max-height:338px}
.view-details-btn{
width:100%}
}
@media screen and (max-width:767px){
.mfp-woosq .mfp-arrow{
display:none}
}
/* Popup */
.mfp-woosq{
z-index:99999969;
overflow:auto}
.mfp-woosq .mfp-content{
text-align:-webkit-auto}
.mfp-woosq .mfp-container{
padding:0}
.mfp-woosq .mfp-close{
width:30px;
height:30px;
line-height:30px;
text-align:center;
font-size:0}
.mfp-woosq .mfp-close:hover{
background-color:transparent}
.mfp-woosq .mfp-close:active{
top:0}
.mfp-woosq .mfp-close:focus{
outline:none}
.mfp-woosq .mfp-close:before{
width:30px;
height:30px;
line-height:30px;
text-align:center;
content:'\e9ea';
font-family:"feather";
display:inline-block;
font-size:24px;
color:#222;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
speak:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale}
.mfp-woosq .mfp-preloader{
position:absolute;
top:50%;
left:50%;
width:30px;
height:30px;
font-size:0;
margin:0 auto;
margin-top:-15px;
margin-left:-15px;
right:auto;
bottom:auto}
.mfp-woosq .mfp-preloader:before{
content:'\e9a7';
font-family:"feather";
display:inline-block;
font-size:24px;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
speak:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:#fff;
width:30px;
height:30px;
line-height:30px;
text-align:center;
-webkit-animation:woosq-spinner 1s linear infinite;
-moz-animation:woosq-spinner 1s linear infinite;
-ms-animation:woosq-spinner 1s linear infinite;
-o-animation:woosq-spinner 1s linear infinite;
animation:woosq-spinner 1s linear infinite}
.mfp-woosq .mfp-arrow{
width:60px;
height:60px;
line-height:60px;
border:none;
padding:0;
outline:none;
text-align:center;
margin-top:-30px;
border-radius:0;
opacity:1}
.mfp-woosq .mfp-arrow:active{
margin-top:-30px}
.mfp-woosq .mfp-arrow:hover{
background-color:rgba(0, 0, 0, .5)}
.mfp-woosq .mfp-arrow:focus{
outline:none}
.mfp-woosq .mfp-arrow:before{
width:60px;
height:60px;
line-height:60px;
padding:0;
border-width:0;
margin:0;
display:inline-block;
font-family:"feather";
font-size:24px;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
speak:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:#fff}
.mfp-woosq .mfp-arrow:after{
display:none}
.mfp-woosq .mfp-arrow.mfp-arrow-left:before{
content:'\e90e'}
.mfp-woosq .mfp-arrow.mfp-arrow-right:before{
content:'\e90f'}
/*
====== Fade effect ======
*/
.mfp-fade{
/* start state */
/* animate in */
/* animate out */
}
.mfp-fade.mfp-bg{
opacity:0;
-webkit-transition:all 0.15s ease-out;
-moz-transition:all 0.15s ease-out;
transition:all 0.15s ease-out}
.mfp-fade.mfp-bg.mfp-ready{
opacity:0.8}
.mfp-fade.mfp-bg.mfp-removing{
opacity:0}
.mfp-fade.mfp-wrap .mfp-content{
opacity:0;
-webkit-transition:all 0.15s ease-out;
-moz-transition:all 0.15s ease-out;
transition:all 0.15s ease-out}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{
opacity:1}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content{
opacity:0}
/*
====== Zoom effect ======
*/
.mfp-zoom-in{
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim{
opacity:0;
transition:all 0.2s ease-in-out;
transform:scale(0.8)}
.mfp-zoom-in.mfp-bg{
opacity:0;
transition:all 0.3s ease-out}
.mfp-zoom-in.mfp-ready .mfp-with-anim{
opacity:1;
transform:scale(1)}
.mfp-zoom-in.mfp-ready.mfp-bg{
opacity:0.8}
.mfp-zoom-in.mfp-removing .mfp-with-anim{
transform:scale(0.8);
opacity:0}
.mfp-zoom-in.mfp-removing.mfp-bg{
opacity:0}
/*
====== Newspaper effect ======
*/
.mfp-newspaper{
/* start state */
/* animate in */
/* animate out */
}
.mfp-newspaper .mfp-with-anim{
opacity:0;
-webkit-transition:all 0.2s ease-in-out;
transition:all 0.5s;
transform:scale(0) rotate(500deg)}
.mfp-newspaper.mfp-bg{
opacity:0;
transition:all 0.5s}
.mfp-newspaper.mfp-ready .mfp-with-anim{
opacity:1;
transform:scale(1) rotate(0deg)}
.mfp-newspaper.mfp-ready.mfp-bg{
opacity:0.8}
.mfp-newspaper.mfp-removing .mfp-with-anim{
transform:scale(0) rotate(500deg);
opacity:0}
.mfp-newspaper.mfp-removing.mfp-bg{
opacity:0}
/*
====== Move-horizontal effect ======
*/
.mfp-move-horizontal{
/* start state */
/* animate in */
/* animate out */
}
.mfp-move-horizontal .mfp-with-anim{
opacity:0;
transition:all 0.3s;
transform:translateX(-50px)}
.mfp-move-horizontal.mfp-bg{
opacity:0;
transition:all 0.3s}
.mfp-move-horizontal.mfp-ready .mfp-with-anim{
opacity:1;
transform:translateX(0)}
.mfp-move-horizontal.mfp-ready.mfp-bg{
opacity:0.8}
.mfp-move-horizontal.mfp-removing .mfp-with-anim{
transform:translateX(50px);
opacity:0}
.mfp-move-horizontal.mfp-removing.mfp-bg{
opacity:0}
/*
====== Move-from-top effect ======
*/
.mfp-move-from-top{
/* start state */
/* animate in */
/* animate out */
}
.mfp-move-from-top .mfp-content{
}
.mfp-move-from-top .mfp-with-anim{
opacity:0;
transition:all 0.2s;
transform:translateY(-100px)}
.mfp-move-from-top.mfp-bg{
opacity:0;
transition:all 0.2s}
.mfp-move-from-top.mfp-ready .mfp-with-anim{
opacity:1;
transform:translateY(0)}
.mfp-move-from-top.mfp-ready.mfp-bg{
opacity:0.8}
.mfp-move-from-top.mfp-removing .mfp-with-anim{
transform:translateY(-50px);
opacity:0}
.mfp-move-from-top.mfp-removing.mfp-bg{
opacity:0}
/*
====== 3d unfold ======
*/
.mfp-3d-unfold{
/* start state */
/* animate in */
/* animate out */
}
.mfp-3d-unfold .mfp-content{
perspective:2000px}
.mfp-3d-unfold .mfp-with-anim{
opacity:0;
transition:all 0.3s ease-in-out;
transform-style:preserve-3d;
transform:rotateY(-60deg)}
.mfp-3d-unfold.mfp-bg{
opacity:0;
transition:all 0.5s}
.mfp-3d-unfold.mfp-ready .mfp-with-anim{
opacity:1;
transform:rotateY(0deg)}
.mfp-3d-unfold.mfp-ready.mfp-bg{
opacity:0.8}
.mfp-3d-unfold.mfp-removing .mfp-with-anim{
transform:rotateY(60deg);
opacity:0}
.mfp-3d-unfold.mfp-removing.mfp-bg{
opacity:0}
/*
====== Zoom-out effect ======
*/
.mfp-zoom-out{
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-out .mfp-with-anim{
opacity:0;
transition:all 0.3s ease-in-out;
transform:scale(1.3)}
.mfp-zoom-out.mfp-bg{
opacity:0;
transition:all 0.3s ease-out}
.mfp-zoom-out.mfp-ready .mfp-with-anim{
opacity:1;
transform:scale(1)}
.mfp-zoom-out.mfp-ready.mfp-bg{
opacity:0.8}
.mfp-zoom-out.mfp-removing .mfp-with-anim{
transform:scale(1.3);
opacity:0}
.mfp-zoom-out.mfp-removing.mfp-bg{
opacity:0}
/*
====== Slide bottom effect ======
*/
.mfp-slide-bottom{
/* start state */
/* animate in */
/* animate out */
}
.mfp-slide-bottom .mfp-with-anim{
opacity:0;
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
-webkit-transform:translateY(-20px) perspective(600px) rotateX(10deg);
-moz-transform:translateY(-20px) perspective(600px) rotateX(10deg);
-ms-transform:translateY(-20px) perspective(600px) rotateX(10deg);
-o-transform:translateY(-20px) perspective(600px) rotateX(10deg);
transform:translateY(-20px) perspective(600px) rotateX(10deg)}
/* animate in */
.mfp-slide-bottom.mfp-ready .mfp-with-anim{
opacity:1;
-webkit-transform:translateY(0) perspective(600px) rotateX(0);
-moz-transform:translateY(0) perspective(600px) rotateX(0);
-ms-transform:translateY(0) perspective(600px) rotateX(0);
-o-transform:translateY(0) perspective(600px) rotateX(0);
transform:translateY(0) perspective(600px) rotateX(0)}
/* animate out */
.mfp-slide-bottom.mfp-removing .mfp-with-anim{
opacity:0;
-webkit-transform:translateY(-10px) perspective(600px) rotateX(10deg);
-moz-transform:translateY(-10px) perspective(600px) rotateX(10deg);
-ms-transform:translateY(-10px) perspective(600px) rotateX(10deg);
-o-transform:translateY(-10px) perspective(600px) rotateX(10deg);
transform:translateY(-10px) perspective(600px) rotateX(10deg)}
/* Dark overlay, start state */
.mfp-slide-bottom.mfp-bg{
opacity:0;
-webkit-transition:opacity 0.3s ease-out;
-moz-transition:opacity 0.3s ease-out;
-o-transition:opacity 0.3s ease-out;
transition:opacity 0.3s ease-out}
/* animate in */
.mfp-slide-bottom.mfp-ready.mfp-bg{
opacity:0.8}
/* animate out */
.mfp-slide-bottom.mfp-removing.mfp-bg{
opacity:0}
/* Sidebar */
.woosq-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.7);
-webkit-transition:opacity 0.3s;
transition:opacity 0.3s;
z-index:99999968;
opacity:0;
visibility:hidden}
.woosq-sidebar{
font-family:"Open Sans", Helvetica, Arial, sans-serif;
font-size:14px;
padding:0;
height:100%;
max-height:100%;
background-color:#ffffff;
z-index:99999969;
position:fixed;
display:flex;
flex-direction:column;
opacity:0;
visibility:hidden}
.woosq-sidebar .woosq-close{
width:40px;
height:40px;
line-height:40px;
font-size:0;
background-image:url(../images/close.svg);
background-repeat:no-repeat;
background-position:center;
background-size:20px 20px;
text-align:center;
position:absolute;
top:0;
left:-40px;
z-index:9;
cursor:pointer}
body.woosq-open .woosq-overlay, body.woosq-open .woosq-sidebar{
opacity:1;
visibility:visible}
.woosq-sidebar .woosq-product{
flex-grow:1;
overflow-x:hidden;
overflow-y:auto}
.woosq-sidebar .woosq-product > .product{
display:flex;
flex-direction:column}
.woosq-sidebar .woosq-product > .product > div{
width:100% !important;
float:none !important;
margin:0 !important;
height:auto}
.woosq-sidebar .view-details-btn{
width:100%;
position:relative;
box-shadow:none;
padding:14px 20px;
line-height:1;
height:auto}
.woosq-sidebar.woosq-loading:before{
content:'';
display:block;
width:100%;
height:100%;
background-color:rgba(255, 255, 255, .5);
position:absolute;
top:0;
left:0;
z-index:8}
.woosq-sidebar.woosq-loading:after{
width:32px;
height:32px;
display:block;
position:absolute;
top:50%;
left:50%;
margin-top:-16px;
margin-left:-16px;
content:'';
background-image:url("../images/curve.svg");
background-repeat:no-repeat;
background-position:center;
-webkit-animation:woosq-spinner 1s linear infinite;
-moz-animation:woosq-spinner 1s linear infinite;
-ms-animation:woosq-spinner 1s linear infinite;
-o-animation:woosq-spinner 1s linear infinite;
animation:woosq-spinner 1s linear infinite;
z-index:9}
/* Position 01 */
.woosq-sidebar.woosq-position-01{
position:fixed;
top:0;
left:100%;
width:100%;
max-width:460px;
box-sizing:border-box;
text-align:start;
-webkit-transform:translate3d(20px, 0, 0);
transform:translate3d(20px, 0, 0);
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s}
.woosq-open .woosq-sidebar.woosq-position-01{
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)}
/* Position 02 */
.woosq-sidebar.woosq-position-02{
position:fixed;
top:0;
left:0;
width:100%;
max-width:460px;
box-sizing:border-box;
text-align:start;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0);
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s}
.woosq-sidebar.woosq-position-02 .woosq-close{
left:unset;
right:-40px}
.woosq-open .woosq-sidebar.woosq-position-02{
-webkit-transform:translate3d(0px, 0, 0);
transform:translate3d(0px, 0, 0)}
.woosq-sidebar.woosq-heading-yes{
display:flex;
flex-direction:column}
.woosq-sidebar.woosq-heading-yes .woosq-sidebar-heading{
flex:0 0 auto;
height:48px;
line-height:48px;
padding:0 60px 0 20px;
margin:0;
position:relative;
color:#222222;
font-weight:700;
text-transform:uppercase;
text-overflow:ellipsis;
white-space:nowrap;
width:100%;
overflow:hidden;
background-color:rgba(0, 0, 0, .1)}
.woosq-sidebar.woosq-heading-yes .woosq-sidebar-heading .woosq-close{
display:inline-block;
width:48px;
height:48px;
line-height:48px;
position:absolute;
left:unset;
top:0;
right:0;
cursor:pointer;
font-size:0;
background-image:url("../images/close-dark.svg");
background-repeat:no-repeat;
background-position:center;
background-size:14px}
.woosq-sidebar.woosq-heading-yes .woosq-product .thumbnails{
padding:20px 20px 0 20px;
background-color:transparent}
@media screen and (max-width:1023px){
.woosq-sidebar .woosq-close{
left:unset !important;
right:0 !important;
background-color:rgba(255, 255, 255, .5);
background-image:url(../images/close-dark.svg)}
}