.zoo-cw-page .images {
transition: all 300ms;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-ms-transition: all 300ms; }
.zoo-cw-attribute-option {
display: flex;
float: left;
cursor: pointer;
margin: 0 5px 5px 0;
align-items: center; }
.zoo-cw-attribute-option:last-child {
margin-right: 0; }
.zoo-cw-attribute-option.disabled:not(.zoo-cw-active) .zoo-cw-attr-item, .zoo-cw-attribute-option.temp-unavailable .zoo-cw-attr-item, .zoo-cw-attribute-option.unavailable .zoo-cw-attr-item {
opacity: 0.5; }
.zoo-cw-attribute-option.disabled:not(.zoo-cw-active) .zoo-cw-attr-item::before, .zoo-cw-attribute-option.disabled:not(.zoo-cw-active) .zoo-cw-attr-item::after, .zoo-cw-attribute-option.temp-unavailable .zoo-cw-attr-item::before, .zoo-cw-attribute-option.temp-unavailable .zoo-cw-attr-item::after, .zoo-cw-attribute-option.unavailable .zoo-cw-attr-item::before, .zoo-cw-attribute-option.unavailable .zoo-cw-attr-item::after {
opacity: 1; }
@media (min-width: 768px) {
.zoo-cw-attribute-option.cw-active .zoo-cw-attr-item, .zoo-cw-attribute-option:not(.disabled):hover .zoo-cw-attr-item {
border-color: #252525; } }
.zoo-cw-attr-item {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #ccc;
padding: 2px;
transition: all 300ms;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-ms-transition: all 300ms;
height: 100%;
overflow: hidden;
position: relative; }
.zoo-cw-attr-item img {
max-height: 100%;
max-width: 100%;
margin: 0 !important;
height: auto !important;
width: auto !important; }
.zoo-cw-attr-item::before, .zoo-cw-attr-item::after {
content: '';
position: absolute;
height: 2px;
width: calc(100% + 4px);
top: 50%;
left: 0;
margin-top: -1px;
margin-left: -2px;
background: red;
opacity: 0;
transition: all 300ms;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-ms-transition: all 300ms; }
.zoo-cw-attr-item::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.zoo-cw-attr-item::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.zoo-cw-label-color {
display: block;
height: 100%;
width: 100%; }
.zoo-cw-label-text {
display: block;
text-align: center; }
.zoo-cw-attr-label {
padding: 0 5px; }
.zoo-cw-option-display-size-1 {
min-width: 20px;
height: 20px;
line-height: 12px; }
.zoo-cw-option-display-size-1 .zoo-cw-label-text {
font-size: 12px;
line-height: 1; }
.zoo-cw-option-display-size-2 {
min-width: 40px;
height: 40px;
line-height: 32px; }
.zoo-cw-option-display-size-2 .zoo-cw-label-text {
font-size: 18px; }
.zoo-cw-option-display-size-3 {
min-width: 60px;
height: 60px;
line-height: 52px; }
.zoo-cw-option-display-size-3 .zoo-cw-label-text {
font-size: 24px; }
.zoo-cw-option-display-shape-circle {
border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-webkit-border-radius: 50%;
-ms-border-radius: 50%; }
.zoo-cw-option-display-shape-circle .zoo-cw-label-color, .zoo-cw-option-display-shape-circle img {
border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-webkit-border-radius: 50%;
-ms-border-radius: 50%; }
.zoo-cw-active select {
display: none !important; }
.zoo-cw-active.zoo-cw-attribute-option .zoo-cw-attr-item {
border-color: #252525; }
.zoo-cw-tooltip.ui-tooltip {
border-radius: 0;
font-size: 12px;
text-transform: uppercase;
border: none;
font-family: inherit;
box-shadow: -1px 0 5px 3px #ebebeb;
height: auto;
padding: 5px 10px;
line-height: 1;
letter-spacing: 0.5px; }
.zoo-cw-wrap-shop, .zoo-cw-group-attribute {
width: 100%;
display: inline-block; }
.variations_form:not(.no-cw-data) .zoo-cw-group-attribute select:not(.zoo-cw-attribute-select) {
display: none !important; }
ul.zoo-cw-variations {
margin: 0 0 20px; }
ul.zoo-cw-variations li {
list-style: none; }
ul.zoo-cw-variations li .label label {
font-size: 1rem;
color: #252525; }
.zoo-cw-attr-row {
width: 100%;
list-style: none;
display: inline-block;
padding: 0; }
.zoo-cw-attr-row div.label {
width: 100%;
padding: 0;
display: flex;
align-items: center;
margin-bottom: 5px;
text-align: left;
color: inherit;
line-height: 1.6;
font-size: inherit;
font-weight: inherit; }
.zoo-cw-attr-row div.label label {
color: #252525;
text-transform: capitalize;
font-size: 1rem;
font-weight: bold;
margin: 0 5px 0 0;
float: left; }
.zoo-cw-attr-row div.label .zoo-cw-name {
color: inherit;
line-height: 1;
font-size: inherit; }
.zoo-cw-attr-row .wrap-reset {
width: 100%;
display: none; }
.zoo-cw-attr-row .wrap-reset a {
margin: 0;
display: inline-block; }
.zoo-cw-gallery-loading {
position: relative; }
.zoo-cw-gallery-loading:before, .zoo-cw-gallery-loading:after {
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #3EA4F8;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
content: '';
visibility: hidden;
transition: all 300ms;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-ms-transition: all 300ms; }
.zoo-cw-gallery-loading:after {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s; }
.zoo-cw-gallery-loading > * {
opacity: 0; }
.zoo-cw-gallery-loading:after, .zoo-cw-gallery-loading:before {
opacity: 0.6;
visibility: visible;
z-index: 11; }
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: scale(0); }
50% {
-webkit-transform: scale(1); } }
@keyframes bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0); }
50% {
transform: scale(1);
-webkit-transform: scale(1); } }