/*** ZOOM & POPUP ***/
#main-image {position:relative; width: 100%;max-width:500px; max-height: 500px; clear: both; padding: 5px ; margin-left: auto; margin-right: auto; border: 1px solid #ddd;}
/* border-radius: 10px; max-height: 500px; */

#zoom {position:relative; display:block; width: 100%;}
#zoom:hover {cursor: move;}

/* magnifying glass icon */
#popup{position: absolute; right: 5px; bottom: 5px; padding: 0 1em; line-height: 2.6666em; z-index: 100;}


#main-image img{display: block; width:100%; }

/**** CAROUSEL CONTAINERS ***/

#thumbs-container {
	display:block;
	float:left;
	width: 100%;
	height: 84px;
	overflow: hidden;
	margin: 20px 0;

}
#thumbs-container .carousel {
	width:100%;
	margin-left: auto;
	margin-right: auto;
	height:84px;
    /* border: 1px solid blue; */
}


#thumbs-container #thumbnails{
	float : left;
	width : calc(100% - 60px);
	height : 82px;
}

/***** THUMBNAILS *****/

#thumbnails img {width: 78px;height: 78px;}

#thumbnails a {
    float: left;
    margin-left: 10px;
    min-width: 78px;
    min-height: 78px;
	padding: 2px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 2px;
    -webkit-transition: border 0.2s ease-in-out;
    -o-transition: border 0.2s ease-in-out;
    transition: border 0.2s ease-in-out;
}
#thumbnails a:hover {border: 1px solid #ddd;}


/**** CONTROLS ****/
#thumbs-container .controls {float: left; width: 30px; height: 81px;}

#next-img {background-position: -60px -10px;}
#prev-img {background-position: -10px -10px;}

#next-img:hover {background-position: -60px -60px;}
#prev-img:hover {background-position: -10px -60px;}
#next-img:hover,#prev-img:hover{background-color:#333;cursor: pointer;}

.controls .disabled { opacity:0.4; filter:alpha(opacity=40); }
#next-img.disabled:hover {background-position:-60px -10px; }
#prev-img.disabled:hover {background-position:-10px -10px;}
#next-img.disabled:hover,#prev-img.disabled:hover {cursor:default;background-color:#ddd;}

#prev-img, #next-img {
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: 30px;
    background-image: url(../img/slider-arrows.png);
    background-repeat: no-repeat;
    background-color:#ddd;
    text-decoration: none;
    text-indent: -999px;
    overflow: hidden;
    transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out;
    -moz-transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out;
    -o-transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out;
}