/*
 * Title: jQuery Etalage plugin CSS
 * Author: Berend de Jong, Frique
 * Author URI: http://www.frique.me/
 * Version: 1.3.1 (20120705.1)
 *
 * ------------------------------------ STYLE ------------------------------------
 * Edit this section to style your thumbnails, zoom area, magnifier etc.
 * If the id of your Etalage instance is different, do a find/replace on #etalage.
 * -------------------------------------------------------------------------------
 */

/* Etalage container (large thumb + small thumbs): */
#etalage{
	display: none;
}

/* Large thumbnail: */
#etalage .etalage_thumb{
	background: white url(../images/loading.gif) center no-repeat;
	border:1px solid #666;
	width:100%;
	height:75%;
	overflow:hidden;
}


body .etalage_small_thumbs ul li { height:100px !important;}

@media (min-width:1200px)  {
	body #etalage {
    width: 520px !important;
    height: 520px !important;
}
	#etalage .etalage_thumb {
    width: 100%!important;
    height: 100%!important;
}
	body .etalage_small_thumbs {/*top:520px !important;*/}
	.col-md-6.det button {bottom:50px;}
	#etalage .etalage_thumb_image{margin-top: 40px !important;}}
@media (min-width:992px) and (max-width:1199px) {
	body #etalage { width:445px !important; height:510px !important;}
	body #etalage .etalage_thumb_image {    width: 443px!important;height: 389px!important;}
	body .etalage_small_thumbs {top:400px !important;}
	.col-md-6.det button {bottom:25px;}}
@media (min-width:768px) and (max-width:991px) {
	body #etalage { width:445px !important;height:510px !important;}
	body #etalage .etalage_thumb_image {width:445px!important;height:412px!important;}
	body .etalage_small_thumbs {top:420px !important;}
	body .women_main .row.single .col-md-6.det,
	body .women_main .row.single .col-md-6.specification_00 { width:100%; clear:both;}
	body .women_main .row.single .col-md-6.det { margin-bottom:50px;}
	body .women_main .row.single .col-md-6.det:after { display:block; content:""; height:50px;}
	.col-md-6.det button {bottom:20px;}}
@media (max-width:767px) {
	body .women_main .row.single .col-md-6.det,
	body .women_main .row.single .col-md-6.specification_00 { width:100%; clear:both;}
	body .women_main .row.single .col-md-6.det { margin-bottom:100px;}
	body .women_main .row.single .col-md-6.det:after { display:block; content:""; height:50px;}
	body #etalage { width:100% !important; height:395px !important;}
	body #etalage .etalage_thumb_image { max-width:280px !important; max-height:280px !important;}
	body .etalage_small_thumbs {/*top:300px !important;*/}
	body .etalage_small_thumbs ul li { height:75px;}
	.col-md-6.det button {bottom:20px;}}
	
.col-md-6.det #etalage { position:relative;}
.col-md-6.det button {position:absolute;display:block; background: rgba(236, 236, 236, 0.6); border:none; outline:none;font-size:40px;color: #dadada; z-index:111;}
.col-md-6.det button:hover {color:#f00;}
.col-md-6.det button.previous {left:0;}
.col-md-6.det button.next {right:0;}
/* Large thumbnail - image (in case you want to add a border around the image within the frame) */
#etalage .etalage_thumb_image{ width:inherit !important; max-height:450px !important; max-width:450px !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto !important;
}
/* Small thumbnails: */
#etalage .etalage_small_thumbs li{border: 1px solid #ddd;margin: 10px;cursor:pointer; width:94px !important; position: relative; }
/* The one on the left that makes them slide */
#etalage ul li.etalage_smallthumb_first{ }
/* The one on the right that makes them slide */
#etalage ul li.etalage_smallthumb_last{ }
/* The currently active one */
#etalage ul li.etalage_smallthumb_active{
	
}

/* Zoomed image area: */
#etalage .etalage_zoom_area,
.etalage_zoom_area{
	background: white url(../images/loading.gif) center no-repeat;
	
}

/* Magnifier area (thumbnail hovering rectangle): */
#etalage .etalage_magnifier{
	background: white;
	border: 1px solid #bbb;
}

/* Icon that will apear at the left bottom of the large thumbnail (optional): */
#etalage .etalage_icon{
	background: url(../images/zoom.png) no-repeat;
	width: 104px;
	height: 104px;
}

/* Hint that will apear at the top right of the large thumbnail (optional): */
#etalage .etalage_hint{
	background: url(../images/hint.gif) no-repeat;
	width: 130px;
	height: 57px;
}

/* Description area (optional) */
#etalage .etalage_description{
	background: white;
	font-style: italic;
	margin: 10px;
	padding: 6px 10px;
}

/*
 * ------------------------------------ FUNCTIONALITY --------------------------------------
 * The following CSS serves to make Etalage function properly. Don't edit or edit carefully.
 * -----------------------------------------------------------------------------------------
 */

.etalage, .etalage_thumb, .etalage_thumb_image, .etalage_source_image, .etalage_zoom_preview, .etalage_icon, .etalage_hint{ display:none; /*width: 100% !important;
    	height: 100% !important;*/ }
 .etalage_source_image{
 	display:none !important;
 }
.etalage, .etalage ul, .etalage li, .etalage img, .etalage_hint, .etalage_icon, .etalage_description{ margin:0; padding:0; border:0; list-style:none }
.etalage, .etalage_magnifier div, .etalage_magnifier div img, .etalage_small_thumbs ul, ul .etalage_small_thumbs li, .etalage_zoom_area div, .etalage_zoom_img{ position:relative }
.etalage img, .etalage li{ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; -webkit-user-drag:none; -moz-user-drag:none; user-drag:none }
.etalage, .etalage_small_thumbs li{ float:left }
.etalage_small_thumbs li img{
	width: auto !important;
	height: auto !important;
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.etalage_small_thumbs{
	width:25% !important; left: 10%; right: 10%;
}
.etalage_right{ float:right }
.etalage li{ position:absolute }
.etalage img{ vertical-align:bottom; max-width:none; }
.etalage_thumb_image{
	display:block !important; margin:0 auto !important
}
.etalage_zoom_area div{
	width:530px !important;
}
.etalage_magnifier{ cursor:default }
.etalage_magnifier div, .etalage_small_thumbs{ overflow:hidden }
.etalage_magnifier div img{ display:none }
.etalage_icon, .etalage_hint{ cursor:default; width:0; height:0; overflow:hidden }
.etalage_small_thumbs li.vertical{ float:none }
.etalage_zoom_area{ z-index:996 }
.etalage_zoom_area div{ overflow:hidden; z-index:997 }
.etalage_zoom_preview{ position:absolute; z-index:998 }
.etalage_zoom_img, .etalage_hint{ z-index:999 }
.etalage{ direction:ltr; }
div.etalage_description{ position:absolute; bottom:0; left:0; z-index:999 }
div.etalage_description.rtl{ direction:rtl; text-align:right }

#hover-img-container #etalage li img.etalage_thumb_image.img-responsive { max-width:100% !important; max-height:100% !important;}


@media only screen and (max-width: 768px) {
 .etalage_zoom_area div{
	width:380px !important;
 }
}
@media only screen and (max-width: 480px) {
 .etalage_zoom_area div{
	display:none;
 }
 .etalage li{ position:relative !important; }
}
 @media only screen and (max-width: 320px) {
 #etalage .etalage_thumb{
 	width:90% !important;
 }
 .etalage li{ position:relative !important; }
}


.etalage_small_thumbs{
     left:0px;
     top: 0px !important;
  }
  .slick-track,.slick-list.draggable{
    height: 94px !important;
  }