/* Tiny Carousel */

/* 
	daca ai mai multe slidere,
	$('#our-best-sellers').tinycarousel();
	$('#popular-categories').tinycarousel();
	$('#months-specials').tinycarousel();
	$('#hot-items').tinycarousel();
	nu poti folosi display none pentru celelalte containere care apar dupa primul container
	pentru ca dupa ultima imagine ruleaza spatii libere in loc sa se opreasca si sa dispara butonul next
	solutia este sa faci un container mare -- .carousel-sliders -- care sa contina sliderele si pui overflow:hidden
	vezi si index.html
	
	!!!!!!!!!!
	NEAPARAT viewport.width si overview.width / li.width - sa dea numar fara virgula
	
	CAND VREI SA FIE VIZIBILE BUTOANELE NEXT SI PREV
	.prod-carousel { overflow:; }
	Fara hidden
	!!!!!!!!!!
	
*/


.prod-carousel { width:100%; padding: 0 0 35px 0; position:relative; }
.categ-carousel { padding: 0; }
.prod-carousel .viewport { width: 1223px; height: 325px; overflow: hidden; position: relative; margin:0 auto; }
.categ-carousel .viewport { height: 300px;}
.prod-carousel .buttons {
    display: block;
    top: 121px;
    width: 40px;
    height: 40px;
    position: absolute;
	z-index:99999;
}
.prod-carousel a.prev {left:-53px; background:url(home-slider-left-off.png); position: absolute; z-index:99999;}
.prod-carousel a.prev:hover {background:url(home-slider-left-on.png)}

.prod-carousel a.next {right:-53px; background:url(home-slider-right-off.png); position: absolute; z-index:99999;}
.prod-carousel a.next:hover {background:url(home-slider-right-on.png)}

.prod-carousel .buttons:hover{}
.prod-carousel .disable { visibility: hidden; }
.prod-carousel .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 1223px; left: 0 top: 0; }
.prod-carousel .overview li { float: left; margin: 0 6px; padding: 0; width: 235px; height: 325px; background:#fff;}
.categ-carousel .overview li { height: 300px;}
/*border: 3px solid #fff; -moz-border-radius:4px; -ms-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; border-radius:4px; -moz-box-shadow:2px 2px #cccccc; -ms-box-shadow:2px 2px #cccccc; -o-box-shadow:2px 2px #cccccc; -webkit-box-shadow:2px 2px #cccccc; box-shadow:2px 2px #cccccc;*/

	/*.prod-carousel .overview li:hover {border: 3px solid #71be43; box-shadow:0px 0px #fff}*/
	
	.prod-carousel .overview li .cell {}
		.prod-carousel .overview li .cell .image {margin:0 auto; text-align:center; padding:0}
		.prod-carousel .overview li .cell .name {height:60px;}
			.prod-carousel .overview li .cell .name a {text-align:left; padding:12px 0; font-family:'Lato', sans-serif; font-size:13px; line-height:18px; font-weight:400; color:#222; text-decoration:none; display:block}
			.categ-carousel .overview li .cell .name a {text-align:center; font-size:18px; font-weight:700;}
			.prod-carousel .overview li .cell .name a:hover {text-decoration:underline;}
		.prod-carousel .overview li .cell .price {text-align:left; padding:0 0 2px; font-family:'Lato', sans-serif; font-size:16px; line-height:18px; font-weight:700; color:#065697;}
			.prod-carousel .overview li .cell .price span {font-size:14px; font-weight:400; color:#222; padding-left:5px;}
			.prod-carousel .overview li .cell .price span.line-through{text-decoration:line-through;}
		.prod-carousel .overview li .cell .you-save {text-align:left; padding:0 0 6px; font-family:'Lato', sans-serif; font-size:14px; line-height:18px; font-weight:700; color:#66980f; text-transform:uppercase}













.brand-logos-slider { width:100%; padding: 0; margin: 0; position:relative; }
.brand-logos-slider .viewport { width: 1225px; height: 153px; overflow: hidden; position: relative; margin:0 auto; }
.brand-logos-slider .buttons {
    display: block;
    top: 56px;
    width: 40px;
    height: 40px;
    position: absolute;
	z-index:99999;
}
.brand-logos-slider a.prev {left:-53px; background:url(home-slider-left-off.png); position: absolute; z-index:99999;}
.brand-logos-slider a.prev:hover {background:url(home-slider-left-on.png)}

.brand-logos-slider a.next {right:-53px; background:url(home-slider-right-off.png); position: absolute; z-index:99999;}
.brand-logos-slider a.next:hover {background:url(home-slider-right-on.png)}

.brand-logos-slider .buttons:hover{}
.brand-logos-slider .disable { visibility: hidden; }
.brand-logos-slider .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 1225px; left: 0 top: 0; }
.brand-logos-slider .overview li { float: left; margin: 0; padding: 0; width: 175px; height: 153px; display:table}
/*border: 3px solid #fff; -moz-border-radius:4px; -ms-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; border-radius:4px; -moz-box-shadow:2px 2px #cccccc; -ms-box-shadow:2px 2px #cccccc; -o-box-shadow:2px 2px #cccccc; -webkit-box-shadow:2px 2px #cccccc; box-shadow:2px 2px #cccccc;*/

	/*.prod-carousel .overview li:hover {border: 3px solid #71be43; box-shadow:0px 0px #fff}*/
	
	.brand-logos-slider .overview li .image {margin:0 auto; text-align:center; padding:0; display:table-cell; vertical-align:middle}
		.brand-logos-slider .overview li .image img {width:100%; max-width:152px !important; height:auto; max-height:153px !important;}
		

.brand-logos-slider .viewport .view-btn {position:absolute; right:0; bottom:0; z-index:3000}
	.brand-logos-slider .viewport .view-btn a {font-family:'Lato', Arial; font-size:13px; font-weight:400; color:#444444; text-decoration:none; background:#edede7 url(view-btn-arrow.png) right no-repeat; width:152px; line-height:26px; display:block; padding:0 0 0 25px;}
	.brand-logos-slider .viewport .view-btn a:hover {background:#000 url(view-btn-arrow.png) right no-repeat; color:#fff;}








/* 
	prod-carousel --- li.width + margins = 247 
	brand-logos   --- li.width + margins = 175
*/

@media screen and (max-width: 1360px) {
	.prod-carousel { max-width:1094px; margin:0 auto;}
		.prod-carousel .viewport,
		.prod-carousel .overview { width: 988px;}
		
		.prod-carousel a.prev {left:0;}
		.prod-carousel a.next {right:0;}
	
	
	.brand-logos-slider { max-width:1130px; margin:0 auto;}
		.brand-logos-slider .viewport,
		.brand-logos-slider .overview { width: 1050px;}
		
		.brand-logos-slider a.prev {left:0;}
		.brand-logos-slider a.next {right:0;}
}


@media screen and (max-width: 1165px) {
	.brand-logos-slider { max-width:955px; margin:0 auto;}
		.brand-logos-slider .viewport,
		.brand-logos-slider .overview { width: 875px;}
}


@media screen and (max-width: 1130px) {
	.prod-carousel { max-width:847px; margin:0 auto;}
		.prod-carousel .viewport,
		.prod-carousel .overview { width: 741px;}
}


@media screen and (max-width: 1000px) {
	.brand-logos-slider { max-width:780px; margin:0 auto;}
		.brand-logos-slider .viewport,
		.brand-logos-slider .overview { width: 700px;}
}


@media screen and (max-width: 885px) {
	.prod-carousel { max-width:600px; margin:0 auto;}
		.prod-carousel .viewport,
		.prod-carousel .overview { width: 494px;}
}


@media screen and (max-width: 820px) {
	.brand-logos-slider { max-width:605px; margin:0 auto;}
		.brand-logos-slider .viewport,
		.brand-logos-slider .overview { width: 525px;}
}



@media screen and (max-width: 645px) {
	.brand-logos-slider { max-width:430px; margin:0 auto;}
		.brand-logos-slider .viewport,
		.brand-logos-slider .overview { width: 350px;}
}


@media screen and (max-width: 635px) {
	.prod-carousel { max-width:353px; margin:0 auto;}
		.prod-carousel .viewport,
		.prod-carousel .overview { width: 247px;}
}



@media screen and (max-width: 465px) {
	.brand-logos-slider { max-width:255px; margin:0 auto;}
		.brand-logos-slider .viewport,
		.brand-logos-slider .overview { width: 175px;}
}


@media screen and (max-width: 380px) {
	.prod-carousel { max-width:297px;}
	.prod-carousel .buttons { top: 138px; width: 20px; height: 20px;}
	.prod-carousel a.prev {background:url(home-slider-left-off-mobile.png); left:5px}
	.prod-carousel a.next {background:url(home-slider-right-off-mobile.png); right:5px}
	
	.prod-carousel a.prev:hover {background:url(home-slider-left-on-mobile.png)}
	.prod-carousel a.next:hover {background:url(home-slider-right-on-mobile.png)}
	
}