/* productos mas vendidos*/

	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

/*GENERAL*/	
	a {text-decoration: none;}

    .wrapperAll {
        width: 100%;
        overflow: hidden;
        font-size: .850em; 
        padding: 4em 0; 
        font-family: Verdana;
        height: 400px;
        margin-left: -10%;
    }
	.wrapper {
        width: 90%; 
        max-width: 960px; 
        margin: 2em 20%;
        
        
    }

    .wrapper:after {
        content: ' '; 
        display: block; 
        clear: both;} 


	/*TITLE*/
    .wrapperAll	h1 {
        float: left; 
        padding-bottom: 1em; 
        font-size: 140%; 
        font-family: Arial; 
        color: #4527a0;
    }
        .buttonLine {
            float: right; 
            color: #9d9e9e; 
            padding: .5em 1.2em; 
            border: solid 1px #9d9e9e;
            border-radius: 20px;
            }
        .buttonLine:hover {
            background: #9d9e9e; 
            color: #f7f7f7; 
            transition: all ease-in-out .3s;
        }

	/*SLIDER - COMPLETE*/
		.sliderComplete {
            position: relative;
        }

		/*Slider*/
			.slider {
                width: 300%; 
                transition:all .5s;
            }
			.slider li {
                display: inline-block; 
                width: 200px; 
                margin: 0 1%; 
                padding-bottom: 2em;
            }
			.slider li:first-child {
                margin-left: 0;
            }

			/*Content*/
				.slider li > * {
                    max-width: 100%;
                }

				/*Cover*/
                    .slider li .cover {
                        position: relative; 
                        display: inline-block; 
                        border-radius: 6px; 
                        box-sizing:border-box; 
                        overflow: hidden; 
                        margin-bottom: 1em;
                    }
					.slider li .cover img {
                        display: block; 
                        width: 100%;
                    }
					.slider li .cover:before {
                        display: block; 
                        content: ' '; 
                        background: rgba(247,247,247,0); 
                        position: absolute; 
                        top: 0; 
                        left: 10%; 
                        width: 100%; 
                        height: 100%;
                    }
					.slider li .cover:hover:before {
                        background: rgba(247,247,247,.5);
                        transition: all .2s;
                    }

				/*Informations*/
					.slider li p {
                        line-height: 1.3; 
                        color: #f5c644;
                    }
					.slider li p a {
                        color: #000;
                    }

			/*Buttons*/
				/*
				The transition, added in CSS, will do the 'fadeIn' and the 'fadeOut' we can do in jQuery.
				*/
				.sliderComplete button {
                    position: absolute; 
                    top: 0; 
                    bottom: 0; 
                    padding: 1em 2em; 
                    border: none; 
                    background: #f0f0f0; 
                    transition: all ease-in-out .5s;
                }
				.sliderComplete button[title="before"] {left: 9%;}
				.sliderComplete button[title="after"] {right: 0;}
				.sliderComplete button.close {opacity: 0;}
				.sliderComplete button.open {opacity: .8;}

			/*Onclick*/
				/*The transition will allow the smooth animation of the slider.*/
				.turn {margin-left: -75%; transition: all .5s;}

@media screen and (max-width:800px) {
	/*
	This prevents a potential overflow on the height and overflow allows the width for responsive. The scroll bar is not visible in any way on mobile.
	*/
	.sliderComplete .wrapper {overflow-x: scroll; overflow-y: hidden;}
	.slider {width: 200%;}
	.slider li {width: 14%;}
	.slider li .cover {width: 100%;}
}

@media screen and (orientation:portrait) {
	.sliderComplete .wrapper {overflow-x: scroll; overflow-y: hidden;}
	.slider {width: 200%;}
	.slider li {width: 14%;}
	.slider li .cover {width: 100%;}

	.sliderComplete button, .sliderComplete button.close, .sliderComplete button.open {display: none; opacity: 0;}
}