/*
 * 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.
 * -------------------------------------------------------------------------------
 */
.content {
  background: #fff;
  padding: 2em 0em;
  /*z-index: -1;*/ /*! background: #ED1417; */
  width: 100%;
}
/* Etalage container (large thumb + small thumbs): */
#etalage{
	display: none;
	margin-bottom: 10px;
}

/* Large thumbnail: */
#etalage .etalage_thumb{
	background:url(../images/loading.gif) center no-repeat;
	border: 1px solid #eee;
}
/* Large thumbnail - image (in case you want to add a border around the image within the frame) */
#etalage .etalage_thumb_image{ }

/* Small thumbnails: */
#etalage .etalage_small_thumbs li{
	border: 1px solid #ddd;
	margin: 10px;
	padding: 3px;
}
/* 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;
	border: 1px solid #EEE;
	padding: 6px;
}

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

/* Icon that will apear at the left bottom of the large thumbnail (optional): */
#etalage .etalage_icon{
	background: url(../images/zoom.png) no-repeat rgba(184, 183, 181, 0.32);
	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 }
.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_right{ float:right }
.etalage li{ position:absolute }
.etalage img{ vertical-align:bottom; max-width:none }
.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 }
@media only screen and (max-width: 920px) {
.etalage_zoom_area div{
	width:400px !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;
 }
}
 @media only screen and (max-width: 320px){
 #etalage .etalage_thumb{
 	width:90% !important;
 }
}




/*--single--*/
.single-para h4{
	font-size:1.5em;
	color:#747272;
	line-height:1.5em;
	font-weight: 600;
}
.para-grid {
  padding: 1.5em 0;
}
span.add-to{
	float:left;
	font-size: 1.7em;
  color: #4cb1ca;
  font-weight: 600;
}
a.cart-to{
	float:right;
	color: #4c6e34;
  font-size: 1.2em;
  text-decoration: none;
  padding-top: 0.5em;
}
a.cart-to:hover{
	text-decoration:underline;
}
a.cart-an{
  color: #fff;
  background: #f02b63;
  text-decoration: none;
  padding: 0.5em 1.2em;
  font-size: 1.1em;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
}
a.cart-an:hover{
	background: #4cb1ca;
}
.single-para h5{
	color:#000;
	font-size:1.4em;
	border-bottom:1px solid #000;
	border-top:1px solid #000;
	padding:0.5em 0; 
}
.available h6{
	color:#f02b63;
	font-size:1.4em;
	padding: 0 0 1em;
}
.available ul li{
	display:inline-block;
	padding:0 0.5em 0 0;
	color:#4c4c4c;
	font-size:0.9em;
}
.available ul li select {
  outline: none;
  padding: 3px;
}
.available {
  padding: 2em 0;  
}

/* start share-des */
.share-desc{
	padding: 20px 0;
}
.share h4{
	font-size: 1.1em;
	color: #f02b63;
	margin-bottom: 10px;
	text-transform: uppercase;
	text-shadow: 0 1px 0 #ffffff;
	font-weight:700;
}

.share_nav li {
	display: inline-block;
	margin: 5px 6px;
}
.share_nav li a {
	background: #4cb1ca ;
	width:40px;
	height:40px;
	display: block;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
	line-height: 35px;
  text-align: center;
}
.share_nav li a:hover{
	background: #f02b63;
}
.share li img {
	vertical-align:middle; 
}
.share {
  padding: 2em 0 0;
}
/*----*/