.flickity-enabled {
position: relative;
}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
} .flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
} .flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: white;
background: hsla(0, 0%, 100%, 0.75);
cursor: pointer; -webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.flickity-prev-next-button:hover { background: white; }
.flickity-prev-next-button:focus {
outline: none;
box-shadow: 0 0 0 5px #09F;
}
.flickity-prev-next-button:active {
opacity: 0.6;
}
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; } .flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button:disabled {
opacity: 0.3;
cursor: auto;
}
.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow {
fill: #333;
} .flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
opacity: 1;
}.wfocu-product-carousel.flickity-enabled, .wfocu-product-carousel-nav.flickity-enabled {
opacity: 1
}
.wfocu-product-gallery-col .flickity-prev-next-button {
background-color: transparent;
opacity: 0;
-moz-transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
-webkit-transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
-ms-transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
-o-transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
width: 36px;
height: 36px;
top: 45%;
padding: 1em
}
.wfocu-product-carousel .flickity-prev-next-button.next {
-ms-transform: translateX(-20%);
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
-o-transform: translateX(-20%);
right: 2%
}
.wfocu-product-carousel .flickity-prev-next-button.previous {
-ms-transform: translateX(20%);
-webkit-transform: translateX(20%);
-o-transform: translateX(20%);
-moz-transform: translateX(20%);
transform: translateX(20%);
left: 2%
}
.wfocu-product-carousel:hover .flickity-prev-next-button {
opacity: 1;
opacity: .7;
-ms-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-moz-transform: translateX(0) !important;
transform: translateX(0) !important
}
.wfocu-product-carousel-nav:hover .flickity-prev-next-button:disabled {
opacity: .3
}
.wfocu-product-carousel-nav:hover .flickity-prev-next-button {
opacity: 1
}
.flickity-prev-next-button:hover {
background-color: transparent;
opacity: 1
}
.wfocu-product-short-description ul {
margin-left: 25px;
padding: 0;
list-style-position: outside
}
.wfocu-product-carousel-container.flex-vertical-container {
display: flex
}
.flex-vertical-container .wfocu-product-gallery {
margin-bottom: 0;
flex-grow: 1
}
.wfocu-pro-vertical-gallery .wfocu-carousel-cell {
width: 100%;
margin-right: 10px;
border-radius: 5px
}
.wfocu-pro-vertical-gallery .wfocu-product-carousel-nav:not(.flickity-enabled) {
width: 120px;
margin-left: 10px;
max-height: 480px;
overflow-y: scroll
}
.flex-vertical-container .wfocu-product-carousel-nav .wfocu-thumb-col {
-ms-flex-preferred-size: 100%;
flex-basis: 100%
}
.wfocu-pro-vertical-gallery .wfocu-vertical-thumbnails .flickity-slider, .wfocu-pro-vertical-gallery .wfocu-vertical-thumbnails .flickity-viewport {
-ms-transform: none !important;
transform: none !important;
overflow: visible !important;
height: auto !important
}
.wfocu-product-main:not(.wfocu-pro-vertical-gallery) .wfocu-product-carousel-nav .flickity-slider {
margin-left: -9.8px;
margin-right: -9.8px
}
.wfocu-product-carousel-nav .wfocu-thumb-col {
padding: 0 8px
}
.wfocu-product-carousel-nav .wfocu-thumb-col {
max-width: 20%;
-ms-flex-preferred-size: 20%;
flex-basis: 20%
}
.wfocu-product-carousel.flickity-enabled, .wfocu-product-carousel-nav.flickity-enabled {
opacity: 1
}
.wfocu-pro-gallery-pos-full .wfocu-product-gallery {
text-align: center
}
.flickity-prev-next-button {
background-color: transparent;
opacity: 0;
-moz-transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
-webkit-transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
-ms-transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
-o-transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
transition: transform .3s, opacity .3s, background .3s, box-shadow .3s;
width: 36px;
height: 36px;
top: 45%;
padding: 1em
}
.wfocu-product-carousel .flickity-prev-next-button.next {
-ms-transform: translateX(-20%);
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
-o-transform: translateX(-20%);
right: 2%
}
.wfocu-product-carousel .flickity-prev-next-button.previous {
-ms-transform: translateX(20%);
-webkit-transform: translateX(20%);
-o-transform: translateX(20%);
-moz-transform: translateX(20%);
transform: translateX(20%);
left: 2%
}
.wfocu-product-carousel:hover .flickity-prev-next-button {
opacity: 1;
opacity: .7;
-ms-transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
-o-transform: translateX(0) !important;
-moz-transform: translateX(0) !important;
transform: translateX(0) !important
}
.wfocu-product-carousel-nav:hover .flickity-prev-next-button:disabled {
opacity: .3
}
.wfocu-product-carousel-nav:hover .flickity-prev-next-button {
opacity: 1
}
.flickity-prev-next-button:hover {
background-color: transparent;
opacity: 1
}
.wfocu-product-short-description ul {
margin-left: 25px;
padding: 0;
list-style-position: outside
}
.wfocu-product-carousel.wfocu-is-hidden, .wfocu-product-carousel-nav.wfocu-is-hidden {
display: none
}
.wfocu-product-carousel, .wfocu-product-carousel-nav {
opacity: 0;
-webkit-transition: opacity .4s;
-o-transition: opacity .4s;
-moz-transition: opacity .4s;
-ms-transition: opacity .4s;
transition: opacity .4s
}
.wfocu-product-carousel.wfocu-product-image-single {
opacity: 1;
}
.wfocu-pro-vertical-gallery .wfocu-product-carousel-nav {
opacity: 1
}
.wfocu-product-carousel.flickity-enabled, .wfocu-product-carousel-nav.flickity-enabled {
opacity: 1
}
.flex-vertical-container .wfocu-product-carousel-nav .wfocu-thumb-col {
cursor: pointer;
padding: 10px 0;
margin-bottom: 0;
max-width: 100%;
width: 100%;
height: auto
}
.wfocu-product-carousel-container.flex-vertical-container {
display: flex
}
.wfocu-product-thumbnails a:hover img, .wfocu-product-thumbnails .is-nav-selected a img, .wfocu-product-thumbnails a:hover img, .wfocu-product-thumbnails .is-selected a img {
border-color: rgba(0, 0, 0, 0.3);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
opacity: 1
}
.wfocu-product-thumbnails a {
overflow: hidden;
display: block;
border: 1px solid #e7e7e7;
background-color: #FFF;
-ms-transform: translateY(0);
transform: translateY(0)
}
.wfocu-product-thumbnails a:hover, .wfocu-product-thumbnails .is-nav-selected a, .wfocu-product-thumbnails a:hover, .wfocu-product-thumbnails .is-selected a {
border-color: rgba(0, 0, 0, 0.2)
}
.wfocu-product-thumbnails img, .wfocu-product-gallery-slider img {
max-width: 100%
}
.wfocu-product-main .wfocu-carousel-cell, .wfocu-product-main .wfocu-thumb-cell {
text-align: center
}
.wfocu-product-thumbnails a:hover img, .wfocu-product-thumbnails .is-nav-selected a img, .wfocu-product-thumbnails a:hover img, .wfocu-product-thumbnails .is-selected a img {
border-color: #e7e7e7;
-ms-transform: translateY(-5px);
transform: translateY(-5px);
opacity: 1
}
.wfocu-product-thumbnails a img {
border-color: #e7e7e7
}
.wfocu-product-thumbnails img {
margin-bottom: -5px;
opacity: .5;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform 0.6s, opacity .6s
}
.wfocu-product-carousel-nav .wfocu-thumb-col img {
display: block
}
.flickity-slider > div:not(.wfocu-thumb-col), .flickity-slider > a, .flickity-slider > p, .flickity-slider > a > img, .flickity-slider > img, .flickity-slider > figure {
width: 100% !important;
padding: 0;
margin: 0;
transition: transform .6s, opacity .6s, box-shadow .6s
}
.wfocu-product-gallery-slider:not(.flickity-enabled) > * {
display: inline-block !important;
white-space: normal !important;
vertical-align: top;
overflow-y: hidden;
overflow-x: scroll;
width: auto;
-ms-overflow-style: -ms-autohiding-scrollbar
}
.wfocu-product-gallery-slider > div:not(.wfocu-thumb-col), .wfocu-product-gallery-slider > a, .wfocu-product-gallery-slider > p, .wfocu-product-gallery-slider > a > img, .wfocu-product-gallery-slider > img {
width: 100%
}
.wfocu-product-thumbnails > div:not(.wfocu-thumb-col), .wfocu-product-thumbnails > a, .wfocu-product-thumbnails > p, .wfocu-product-thumbnails > a > img, .wfocu-product-thumbnails > img {
width: 100%
}
.wfocu-product-carousel-nav .wfocu-thumb-col {
padding: 0 9.8px 19.6px;
margin-bottom: 0;
max-width: 25%;
-ms-flex-preferred-size: 25%;
-webkit-flex-preferred-size: 25%;
flex-basis: 25%;
-webkit-flex-basis: 25%;
width: 100%;
height: auto
}
.wfocu-product-gallery {
position: relative
}
.wfocu-product-carousel-container img {
height: auto;
display: inline-block;
vertical-align: middle
}
.wfocu-product-gallery {
margin-bottom: 20px
}