/* Mango - AttributeSwatches  */

/* swatches on products list */

ul.attribute-swatches li {
    display: inline-block;
    margin: 3px 7px 3px 0px;
    position: relative;
    z-index: 0;
    float:none !important;
    width:auto !important;
    height:auto !important;
    min-height: auto !important;
    margin: 0px !important;
    padding: 0px !important;
}
ul.attribute-swatches li.color-swatch-last {
    margin-right: 0px;
}
ul.attribute-swatches li a {
    background-position: center;
    border: solid 1px #ddd;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
ul.attribute-swatches li a:hover,
ul.attribute-swatches li a.active-list-swatch {
    border-color: #444;
    text-decoration: none;
}
ul.attribute-swatches li a img {
    border: none;
    display: inline;
    left: 0px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0px;
    z-index: 0;
}
ul.attribute-swatches li a img.color-swatch-mask {
    border: none;
    display: inline;
    margin: 0px;
    padding: 0px;
    position: absolute;
    z-index: 20;
}
ul.attribute-swatches li span {
    display: none;
    z-index: 10000;
}
ul.attribute-swatches li span.tooltip-container.on {
    display: block;
    height: 30px;
    left: 50%;
    position: absolute;
    top: -30px;
    z-index: 20000;
}
ul.attribute-swatches li span.tooltip.on {
    background: transparent;
    display: block;
    float: left;
    height: 30px;
    margin-left: -50%;
    white-space: nowrap !important;
}
ul.attribute-swatches li span span span {
    background: #333;
    border: solid 1px #efefef;
    color: #fff;
    display: block;
    float: left;
    font-weight: bold;
    line-height: 28px;
    padding: 0px 10px;
}
.attribute-swatches.product-view {
    border: none;
    clear: both;
    height: 20px;
    margin: 5px 0px;
}
.attribute-swatches.product-list {
    clear: both;
    display: inline-block;
    padding: 0px;
    text-align: center;/* center on grid mode */
    width: 100%;
    float:none !important;
}

.attribute-swatches.product-list li.swatch-disabled{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

/* eof swatches on products list */

/* swatches on product details page */

.product-swatches-container {
    clear: both;
    float: left;
    margin-bottom: 5px;
    width: 100%;
}
.product-swatches-container ul {
    margin-bottom: 10px;
    width: 100%;
}
.product-swatches-container ul li {
    display: block;
    float: left;
    /*height: 35px;*/
}
.product-swatches-container li a {
    background: #ddd;
    color: #bbb;
    cursor: default;
    display: block;
    filter: alpha(opacity=20);
    float: left;
    margin: 3px;
    opacity: 0.2;
    padding: 0px 5px 0px;
    text-decoration: none;
}

.product-swatches-container .attributeswatches-button li a{
    moz-border-radius: 5px;
    border-radius: 5px;
    border: solid 1px #ccc;
}

.product-swatches-container .attributeswatches-flat li a{
    moz-border-radius: 0px;
    border-radius: 0px;
    border: solid 2px #ddd !important;
    box-shadow: 0px 0px 0px 1px #ffffff inset !important;
}

.product-swatches-container a.active {
    background: #fff;
    color: #333;
    cursor: pointer;
    display: block;
    filter: alpha(opacity=100);
    float: left;
    opacity: 1;
}

.product-swatches-container .attributeswatches-flat a.active{

}

.product-swatches-container .attributeswatches-button  a.active{
    box-shadow: 3px 3px 5px #aaa;
}


.product-swatches-container li a.active.out-of-stock{
    filter: alpha(opacity=60);
    opacity: 0.6;
    background:#dfdfdf;
    
}

.product-swatches-container a.active.selected {
    background: #fff;
    color: #333;
    cursor: pointer;
    padding: 0px 6px 0px !important;
}

.product-swatches-container .attributeswatches-button a.active.selected{
    box-shadow: 1px 1px 5px #444 inset;
    border: solid 1px #ffffff;
}

.product-swatches-container .attributeswatches-flat a.active.selected{
    border: solid 2px #444444 !important;
}

.product-swatches-container .has-swatches a {
    overflow: hidden;
    padding: 0px;
    position: relative;
    text-align: center;
}
.product-swatches-container .has-swatches a.active.selected {
    padding: 0px !important;
}
.product-swatches-container .has-swatches.swatch-type-label a.swatch-label,
.product-swatches-container .has-swatches.swatch-type-label a.swatch-label.active.selected {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: auto !important;
}
.product-swatches-container .has-swatches li {
    position: relative;
    height: auto !important;
    padding-bottom:5px;
    width: auto !important;
}
.product-swatches-container .has-swatches li a span {
    display: none;
}
.product-swatches-container .has-swatches span.tooltip-container {
    display: none;
}
.product-swatches-container .has-swatches span.tooltip-container.on {
    display: block;
    height: 16px;
    left: 0px;
    margin-left:50%;
    position: absolute;
    top: -25px !important;
    z-index: 20000;
}
.product-swatches-container .has-swatches span.tooltip-container.on span.tooltip {
    background: #666;
    color: #fff;
    display: block;
    float: left;
    font-size: 1em;
    height: 25px;
    border-radius: 3px;
    line-height: 25px;
    margin-left: -50%;
    padding: 0px 10px;
    white-space: nowrap;
    opacity: 1 !important;
    position:relative !important;
    max-width:none !important;
    width: auto !important;
}


#product-options-wrapper .field .control .configurable-option-select{
    margin-bottom:15px;
}

#product-options-wrapper .field .control .configurable-option-select.hideselect {
    left: -1000px;
    position: absolute;
    visibility: hidden;
    margin-bottom: 0px;
}


.attributeswatches-clearer{
    float:left;
    clear:both;
    width:100%;
    height:1px;
}

/* eof swatches on product details page */

/* fix zoom - porto theme*/

img.zoomImg {
    display: block !important;
    visibility:visible !important;
}

/*fancybox link*/
#main-media-container{
    position: relative;
}

#fancybox-button{
    background: #fff;
    border: solid 1px #ccc;
    bottom: 0px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0px 10px;
    position: absolute;
    right: 0px;
    text-decoration: none;
    z-index: 300;
}

#fancybox-button span.zoom-in-icon{
    background: transparent url('img/zoom-in.png') center no-repeat;
    display:inline-block;
    width:25px;
    height:25px;
    line-height: 25px;
    padding:0px;
    margin:0px;
}



/* fix slick with few items */

.slick-no-slide .slick-track {
    width: 100% !important ;
    text-align: center !important;
    transform: inherit !important;
}
.slick-no-slide .slick-slide {
    float: none !important;
    display: inline-block !important;
}







/* smaller, dark, rounded square */
.flickity-button {
  background: #333;
}
.flickity-button:hover {
  background: #666;
}

.flickity-prev-next-button {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
/* icon color */
.flickity-button-icon {
  fill: white;
}

.carousel-cell > img{
    box-shadow: 0px 2px 6px 0px rgba(204,209,217,.5);
    border: 1px solid #E6E9ED;
}

.carousel-cell.current-slide > img{
    box-shadow: 0px 2px 6px 0px rgba(104,109,117,.5);
    border: 1px solid #CCCCCC;
}

/* position outside */
/*.flickity-prev-next-button.previous {
  left: -40px;
}
.flickity-prev-next-button.next {
  right: -40px;
}*/


/*.carousel-cell.is-selected {
  background: #aaaaaa;
}*/






.fancybox-navigation .fancybox-button{
    border:none !important;
    box-shadow:none;
}

.fancybox-navigation .fancybox-button:hover{
    /*background-color: transparent;*/
}


/*bxslider fix*/
#product-gallery-container .bx-wrapper{
margin: 0px auto;
}



/* previous - next buttons on main image container */

#product-image-gallery-prev,
#product-image-gallery-next{
    position: absolute;
    top: 50%;
    margin-top: -30px;
    outline: 0;
    width: 40px;
    height: 60px;
    text-indent: -9999px;
    z-index: 999;
    display:block;
    background-repeat: no-repeat;
    background-position:center;
    cursor: pointer;
}

#product-image-gallery-prev{
    background-image: url(img/chevron-left.png);
    left:0px;
}

#product-image-gallery-next{
    background-image: url(img/chevron-right.png);
    right:0px;
}

#product-image-gallery-prev:hover,
#product-image-gallery-next:hover{
    background-color: #dfdfdf;
}

#product-gallery-container.more-views-container ul li.hidden-gallery-item{
    display:none !important;
}




/* css class is added via js */
a.product-list-image-container img {
    z-index: 1;
}

a.product-list-image-container img.catalog-hover-image {
    display: block;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    transition: opacity 0.5s ease-out;
    webkit-transition: opacity 0.5s ease-out;
    z-index: 10;
}
a.product-list-image-container:hover img.catalog-hover-image {
    opacity: 1;
}


ul#product-gallery-carousel,
.product-swatches-container > ul{ 
    padding:0px;
}


/* carousel controls position for vertical carousel... */
.vertical-carousel-container#product-gallery-container .bx-wrapper{
    margin-bottom:0px;
}

.vertical-carousel-container#product-gallery-container .bx-wrapper .product-image-thumbs > a,
.vertical-carousel-container#product-gallery-container .bx-wrapper .product-image-thumbs > a > img{
    max-width: 100%;
    display:block;
}

.vertical-carousel-container#product-gallery-container .bx-wrapper .bx-controls.bx-has-controls-direction a{
    left:50%;
    margin-left: -16px;
    margin-top:0px;
}
.vertical-carousel-container#product-gallery-container .bx-wrapper .bx-controls.bx-has-controls-direction .bx-prev{
    background: url(plugins/bxslider/images/controls-vertical.png) no-repeat 0 -32px;
    top:-10px;
}

.vertical-carousel-container#product-gallery-container .bx-wrapper .bx-controls.bx-has-controls-direction .bx-next{
    background: url(plugins/bxslider/images/controls-vertical.png) no-repeat -43px -32px;
    top:auto;
    bottom:-10px;
}

.vertical-carousel-container#product-gallery-container .bx-wrapper .bx-controls.bx-has-controls-direction .bx-next:hover,
.vertical-carousel-container#product-gallery-container .bx-wrapper .bx-controls.bx-has-controls-direction .bx-next:focus {
    background-position: -43px 0;
}

.vertical-carousel-container#product-gallery-container .bx-wrapper .bx-controls.bx-has-controls-direction .bx-prev:hover,
.vertical-carousel-container#product-gallery-container .bx-wrapper .bx-controls.bx-has-controls-direction .bx-prev:focus {
    background-position: 0 0;
}