/*
	Coin Slider jQuery plugin CSS styles
	http://workshop.rs/projects/coin-slider
*/


.coin-slider { zoom: 1; position: relative;  z-index: 0;}
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons {     
	float: left;
    font-size: 0;
    left: 275px !important;
    padding: 10px;
    top: -45px;
}
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; text-indent: -1000px; background: url('../img/circle-white.png')}
.cs-active { background: url('../img/circle-red.png') !important; }

.cs-title { position: relative!important; } 

.cs-prev, 
.cs-next { 
	position : absolute;
	background-color: #000000; 
	color: #FFFFFF; 
	padding: 0px 10px; 
	text-indent	: -9999px;
  	height		: 62px;
  	width		: 35px;
  	padding		: 0;
}

.cs-prev{
	left : -294px!important;
	top : 161px!important;	
}

.cs-next{
	right: -65px!important;
	top: 160px!important;
}

.cs-prev{
	background 	: url("../img/arrows/arrow-left-white.png") repeat scroll 0 0 transparent;
}

.cs-prev:hover{
  	background 	: url("../img/arrows/arrow-left-red.png") no-repeat scroll 0 0 transparent;
}

.cs-next{
	background 	: url("../img/arrows/arrow-right-white.png") no-repeat scroll 0 0 transparent;
}

.cs-next:hover{
	background 	: url("../img/arrows/arrow-right-red.png") no-repeat scroll 0 0 transparent;
}

#cs-images-back-left,
#cs-images-back-right {
	z-index: -9999;
	position: absolute;
	height: 400px;
}

.response_slider {
	width: 640px;
	overflow: hidden;
	height: 332px;
	position: relative;
}

.response_slider #responsive_slider .current-slide/*:hover*/{
	position: relative;
}

.response_slider #responsive_slider .prev,
.response_slider #responsive_slider .next{
	-webkit-transition: all 10s linear;
    transition: all 2s linear;	
    display: block;
    z-index: 15;
    height: 100%;
    width: 100%;    
}

.response_slider #responsive_slider .prev{
	right: 100%;
}

.response_slider #responsive_slider .next{
	left: 100%;
}

.response_slider #responsive_slider>a{
    display: none;
    position: absolute;
    overflow: hidden;;
    top: 0;
    height: 100%;
    width: 100%;
    color: white!important;
    text-decoration: none!important;
}

.response_slider #responsive_slider .current-slide{
	display: block; 
	left: 0;
}

.response_slider #responsive_slider a img{
    width: 100%;
    height: 100%;
}

.response_slider .caption{
    background-image: url('../img/shadow.png'); 
    position: absolute;
    top: 0;
    width: 100%;
}

.response_slider .caption{
    color: white!important;
    text-decoration: none!important;
}

.response_slider .caption p{
    margin: 0;
    color: white!important;
    text-decoration: none!important;
    border: 0!important;
}

.response_slider #responsive_slider .name-product{
    font-family: pf_din_text_cond_promedium;
    font-size: 32px;
    letter-spacing: -1px;
    padding: 13px 0 20px 40px;
    text-transform: uppercase;
    width: 60%;
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.response_slider #responsive_slider .about-product{
    float: right;
    font-family: "pf_dindisplay_promedium";
    font-size: 16px;
    letter-spacing: 0;
    padding: 15px 36px 10px 0;
    width: 40%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}

.response_slider #responsive_slider .cs-buttons {
	font-size: 0;
	left: 5%!important;
	padding: 10px;
	top: 85%;
	position: absolute;
	z-index: 20;
}

.response_slider #responsive_slider .cs-buttons a { height: 10px; width: 10px; text-indent: -1000px; background: url('../img/circle-white.png')}
.response_slider #responsive_slider .cs-active { background: url('../img/circle-red.png') !important; }

.response_slider #responsive_slider .cs-prev, 
.response_slider #responsive_slider .cs-next { 
	position : absolute;
	top: 50%!important;
	margin-top: -32px;
	background-color: #000000; 
	color: #FFFFFF; 
	padding: 0px 10px; 
	text-indent	: -9999px;
  	height		: 62px;
  	width		: 35px;
  	padding		: 0;
  	z-index: 20;
}

.response_slider #responsive_slider .cs-prev{
	left : 5%!important;
}

.response_slider #responsive_slider .cs-next{
	right: 5%!important;
}

.response_slider #responsive_slider .cs-prev{
	background 	: url("../img/arrows/arrow-left-white.png") repeat scroll 0 0 transparent;
}

.response_slider #responsive_slider .cs-prev:hover{
  	background 	: url("../img/arrows/arrow-left-red.png") no-repeat scroll 0 0 transparent;
}

.response_slider #responsive_slider .cs-next{
	background 	: url("../img/arrows/arrow-right-white.png") no-repeat scroll 0 0 transparent;
}

.response_slider #responsive_slider .cs-next:hover{
	background 	: url("../img/arrows/arrow-right-red.png") no-repeat scroll 0 0 transparent;
}

.response_slider{
	display: none;
}

 #slider{
	    display: none;
	}	

@media screen and (min-width: 640px) {
	.response_slider{
		display: none;
	}

	#slider{
		    display: block;
	}	
}	

@media screen and (min-width: 980px) and (max-width: 1150px) {
	.response_slider{
		display: none;
	}

	#slider{
		    display: block;
	}	

	#slider .cs-prev {
		left: -75px!important;
	}

	#slider .cs-next {
		right: -75px!important;
	}

	#cs-images-back-right{
		right: -60px;
	}
}	

@media screen and (min-width: 640px) and (max-width: 980px) {
	.response_slider{
		display: none;
	}

	#slider{
		    display: block;
	}	
}	
	

@media screen and (max-width: 640px) {
	.response_slider{
		display: block;
	}	

	footer{
		padding: 0;
	}
}	

@media screen and (min-width: 640px) and (max-width: 980px) {
	.coin-slider{
	    margin: 0 auto;
	    position: relative;
	    width: 770px;
	}

	.cs-buttons{ left: 50px !important; }
	.cs-prev{ left: -65px!important; }
	.attention{ left: 630px; }

	#slider .menu, #cs-images-back-left, #cs-images-back-right{
	    display: none;
	}	 
}


@media screen and (min-width: 568px) and (max-width: 640px) {
	.response_slider {
		width: auto;
	/*	height: auto; */
	}


	#cs-images-back-left, #cs-images-back-right, #slider{
	    display: none;
	}
}

@media screen and (min-width: 480px) and (max-width: 568px) {
	.response_slider {
		width: auto;
		height: 295px; 
	}

	.response_slider #responsive_slider .name-product {
		font-size: 30px;
	}

	#cs-images-back-left, #cs-images-back-right, #slider{
	    display: none;
	}
}

@media screen and (min-width: 320px) and (max-width: 480px) {
	.response_slider {
		width: auto;
		height: 250px; 
	}

	.response_slider #responsive_slider .name-product {
		font-size: 25px;
		padding: 10px 0 10px 25px;
	}	

	.response_slider #responsive_slider .about-product {
		font-size: 14px;
		padding: 10px 15px 10px 0;
	}

	.response_slider #responsive_slider .cs-prev, .response_slider #responsive_slider .cs-next {
		top: 65%!important;
	}		

	#cs-images-back-left, #cs-images-back-right, #slider{
	    display: none;
	}	
}

@media screen and (max-width: 320px) {
	header .social {
	display: none;
	}

	header .cart {
	position: static!important;
	margin: 0!important;
	float: left;
	}	

	div.search {
	padding: 6px 0 0 10px!important;
	position: static!important;
	float: left!important;
	width: 60px!important;
	}	

	section.post{
		padding: 0!important;
	}	


	.response_slider {
		width: 100%;
		height: 170px;
	}

	.response_slider #responsive_slider .name-product {
		font-size: 18px;
		padding: 10px 0 10px 25px;
		width: 55%;
	}	

	.response_slider #responsive_slider .about-product {
		font-size: 12px;
		padding: 10px 15px 10px 0;
		width: 45%;
	}	

	.response_slider #responsive_slider .cs-buttons {
		top: 80%;
	}	

	.response_slider #responsive_slider .cs-prev, 
	.response_slider #responsive_slider .cs-next {
		display: none;
	}		

	#cs-images-back-left, #cs-images-back-right, #slider{
	    display: none;
	}
	
}