/* 
	Resets defualt browser settings
	reset.css
*/

#products_example {
	width:100%;
	height:auto;
	position:relative;
}

/*
	Slideshow
*/

#products {
	margin:0 5%;
}
#products a img { width:auto; height:100%; }

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

#products .slides_container {
	width:77.8%;
	overflow:hidden;
	float:left;
	position:relative;
	border:1px solid #dfdfdf;
	display:none;
	padding: 5px;
	background:#F7F7F7;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container a {
	width:100%;
	height:290px;
	display:block;
}

/*
	Next/prev buttons
*/

#products .next,#products .prev {
	position:absolute;
	top:127px;
	left:0;
	width:21px;
	height:0;
	padding-top:21px;
	overflow:hidden;
	display:block;
	z-index:101;
}

#products .prev {
	background:url(../images/arrow-prev.png);
}

#products .next {
	left:580px;
	background:url(../images/arrow-next.png);
}

/*
	Pagination
*/

#products .pagination {
	width:12%;
	float:right;
	margin-left:0;
}

#products .pagination li {
	float:left;
	margin:2px 0;
	list-style:none;
}

#products .pagination li a {
	display:block;
	width:60px;
	height:60px;
	margin:0 1px;
	float:left;
	background:#f9f9f9;
	border: 1px solid #DFDFDF;
	padding: 2px;
	background:#F7F7F7;
}

#products .pagination li a img { width:100%; height:100%; }
	
#products .pagination li.current a {
	border:1px solid #7f7f7f;
	margin:0;
	margin-left: 1px;
	background:#fff;
}
#products .pagination li.current {
	background:#fff;
}

@media screen and (max-width:1024px){
#products .next { left: 490px; }
#products .slides_container { width: 78%; max-height: 246px; }
#products a img { height: auto; width: 146%; }

}

@media screen and (max-width:768px){
#products .slides_container { width: 73%; }
.slides_control { width: 100%; height: 140px !important; }
.lightbox_trigger > img { height: 60%; width: 100%; }
#products .next, #products .prev { top: 64px; left: -5px; }
#products .next { left: 280px; }
#products .pagination { width: 15%; }
#products a img { height: auto; width: 82%; }
	
}

@media only screen and (min-width:600px) and (max-width:767px) {
	#products .next { left: 525px; }
	#products .slides_container { width: 97%; }
	.slides_control { width: 100%; height: 270px; }
	.slides_container a { height: auto; }
	#products a img { height: auto; width: auto; }
	#products .next, #products .prev { top: 130px; }
	
	
}

@media only screen and (max-width:568px){
	#products .slides_container { width: 100%; }
	#products_example { width: 98%; }
	#products .next { left: 325px; }
	.slides_control { height: 253px; width: 100%; }
	
}
	

@media only screen and (max-width:480px){
	#products .next { right: 212px; }
	#products .slides_container { width: 97%; }
	.slides_control { width: 100%; height: 149px !important; }
	.slides_container a { height: auto; width:100%; }
	#products a img { height: auto; width: 89%; }
	#products .next, #products .prev { top: 100px; }
	
	#products .slides_container { width: 100%; }
	#products .slides_container { top: 0; width: 67%; left: 10px; }
	#products .next, #products .prev { top: 70px; }
	.slides_container a{width:100%;}	
	
}

@media only screen and (max-width:384px){
	.slides_control { height: 168px; width: 100%; }
	#products .next, #products .prev { top: 80px; }
	#products .next { left: 322px; }
	.slides_control { height: 166px !important; width: 100%; }
	#products .next, #products .prev { top: 80px; }
	#products_example { width: 100%; }
	
	#products .slides_container { width: 100%; }
	#products .slides_container { top: 0 ; width: 89%; left: 10px; }
	#products .next, #products .prev { left: 0 ; top: 66px; }
	
}

@media only screen and (min-width:240px) and (max-width:479px) {
	#products .next { left: 275px; }
	#products .slides_container { width: 97%; }
	.slides_control { width: 100%; height: 133px !important; }
	.slides_container a { height: auto; width:95%; }
	#products a img { height: auto; width: 88%; }
	
	#products .slides_container { width: 100%; }
	#products .slides_container { top: 0; width: 89%; left: 10px; }
	#products .next, #products .prev { top: 66px; }
}