/*========================================
 INICIO CSS DOCUMENT
========================================*/ 

.borde {
	border: 3px solid #F00
}

.cabecera {
	background-color: #333;
	height: 180px;
}

nav {
	height: 80px;
	margin-top: -150;
	text-align: center;
}

.slider {
	margin-top: 20px;
}

.main{
	width: 95%;
	max-width: 1200px;
	min-height: 600px;
	margin:370px auto 20px auto;
}

.main .productosmain {
	width: 24.4%;
	float: left;
	margin-left: 5px;
	margin-top: 5px;
	-webkit-box-shadow: 3px 5px 7px 4px rgba(0,0,0,0.5);
    -moz-box-shadow: 3px 5px 7px 4px rgba(0,0,0,0.5);
    box-shadow: 3px 5px 7px 4px rgba(0,0,0,0.5);
}

.main .limpar {
	clear: both;
}

.main .productosmain .precio {
	background-color: #6CF;
	color: #666;
	font-weight: bold;
	padding: 10px;
	text-align: center;
}

footer {
	width: 100%;
	height: 110px;
	color: #ffffff;
	background-color: #333;
	margin-top: 380px;
	text-align: center;
	padding: 35px;
	box-sizing: border-box;
}

footer {
	color: #FFF;
}

.fuente {
	font-size: 25px;
	font-family: 'Ceviche One', cursive;
}

.mainmostrar {
	margin: -5px auto 0px auto;
	/*margin-right: 130px;*/
}

.maindetalles {
	margin-top: -5px;
	margin-right: 30px;
}

.footerdetalle{
	margin-bottom: 0px;
}

/*========================================
 FIN CSS DOCUMENT
========================================*/

/*========================================
 INICIO PAGINADOR
========================================*/
.centrar-pag{
	text-align:center;
	margin-top:140px;
	clear: both;
}

.color-pag{
	color: #C30;
}

/*========================================
 FIN PAGINADOR
========================================*/

/*========================================
 INICIO BUSCADOR
========================================*/

.form1{
	
	width:300px;
}

.fieldset1{ 

	background-color:#fff;
	padding:0px 0px 0px 40px;
	border-radius:5px;
	display:inline-block;
}

.input1,.button1{
	
	position:relative;
	float:left;
	width:200px;
	height:30px;
	padding:0px;
}

.input1{ 

	border:none; 
	color:#666; 
	z-index:2;
}

.button1{ 

	width:50px; 
	border:1px solid #666; 
	background-color: #333;
	transform:translate(-50px,0);
	transition-duration:.3s;
}

.fa{ 

	transform:translate(-200px,0px); 
	transition:all .1s ease-in-out; 
	color: #999;
}

.input1:focus{
	
	outline:none
}

.input1:focus + .button1{ 

	transform:translate(0,0); 
	transition-duration:.3s; 
	font-size:17px;
}

.input1:focus + .button1 .fa{
	transform:translate(0,0);
	transition-duration:.7s;
	color: #FFF
}

/*========================================
 FIN BUSCADOR
========================================*/

/*========================================
 INICIO CARRITO
========================================*/

.carrito{
	position: fixed;
	width: 400px;
	left: 100%;
	top: 200px;
	background-color: #FFF;
	border: 1px #666 solid;
    border-radius: 4px 0px 0px 4px;

    transition: margin-left 1s;
    -webkit-transition:margin-left 1s;
	-moz-transition:margin-left 1s;
	-ms-transition:margin-left 1s;
	-o-transition:margin-left 1s;
	z-index:99;
}

.carrito:hover{
	margin-left: -400px;
}

/*========================================
 FIN CARRITO
========================================*/

/*========================================
 INICIO BOTON DE WHATSAPP
========================================*/ 

.btn-wsp{
    position:fixed;
    width:60px;
    height:60px;
    line-height: 63px;
    bottom:25px;
    right:25px;
    background:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:35px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
    transition: all 300ms ease;
}
.btn-wsp:hover{
    background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
    .btn-wsp{
        width:63px;
        height:63px;
        line-height: 66px;
	}
}

/*========================================
 FIN BOTON DE WHATSAPP
========================================*/ 

/*=============================================
ESCRITORIO (XL revisamos en 1366px en adelante)
=============================================*/

@media (max-width:1365px) and (min-width:1200px){

nav {
	width: 1025px;
	height: 80px;
	margin: 0 auto;
}

.main {
	margin:225px auto 20px auto;
}

.main .productosmain img {
	width:250px;
	height:250px;
}

}

/*=============================================
TABLET HORIZONTAL (LG revisamos en 1024px)
=============================================*/

@media (max-width:1199px) and (min-width:992px){

.cabecera {
	height: 88px;
}

nav {
	width: 825px;
	height: 40px;
	margin: 0 auto;
}

.main {
	margin:25px auto 20px auto;
}

.main .productosmain {
	width: 24.4%;
}

.main .productosmain img {
	width:250px;
	height:250px;
}

}

.fuente {
	font-size: 25px;
	font-family: 'Ceviche One', cursive;
}

/*=============================================
TABLET VERTICAL (MD revisamos en 768px)
=============================================*/

@media (max-width:991px) and (min-width:768px){

nav {
	width: 725px;
	height: 80px;
	margin: 0 auto;
}

.main {
	margin-top: 350px;
}

.main .productosmain {
	width: 32.4%;
}

.main .productosmain img {
	width:150px;
	height:300px;
}
}

/*=============================================
MÓVIL HORIZONTAL (SM revisamos en 576px)
=============================================*/

@media (max-width:767px) and (min-width:576px){

nav {
	width: 550px;
	height: 40px;
	margin: 0 auto;
}

.slider {
	margin-top: 20px;
}

.main .productosmain {
	width: 48%;
}

.main .productosmain img {
	width:170px;
	height:300px;
}

}

/*=============================================
MOVIL VERTICAL (revisamos en 320px)
=============================================*/

@media (max-width:575px){

nav {
	width: 300px;
	height: 40px;
	margin: 0 auto;
}

.slider {
	margin-top: 20px;
}

.main .productosmain {
	width: 95%;
}

img {
	width:150px;
	height:300px;
	text-align: center;
}

.main .productosmain .precio {
	background-color: #6CF;
	color: #666;
	font-weight: bold;
	padding: 15px;
}
}