/*=============================================
TOP
=============================================*/

#top ul{
	padding-top:8px;
}

#top ul li{
	display:inline;
	line-height:30px;
	margin:0px 5px;
	color:white;
}

.social ul li a i{
	font-size:18px;
	margin:0 1px;
}

.registro ul{
	text-align: right;
	font-size:12px;
}

/*=============================================
HEADER
=============================================*/

header #btnCategorias{
	margin:20px 0;
}

header #btnCategorias p{
	line-height:40px;
	margin-bottom:0px;
}

header #btnCategorias p span{
	cursor: pointer;
}

header #buscador{
	margin:20px 0;
}

header #buscador input{
	padding:19px;
	border-radius:0;
}

header #buscador button{
	padding:9px;
	border:1px solid silver;
	border-radius:0;
}

header #carrito{
	margin:20px 0;
}

header #carrito button{
	padding:9px 15px;
	border:1px solid silver;
	border-radius:0;
}

header #carrito p{
	padding:2px;
	padding-left:60px;
	border:1px solid #aaa;
	font-size:12px;
}

header #categorias{
	display:none;
	margin-top:-10px;
	position: relative;
	padding-bottom:20px;
}

header #categorias h4{
	margin-top:20px;
	margin-bottom:-10px;
}

header #categorias hr{
	border:1px solid rgba(255,255,255,.3);
}

/*=============================================
VENTANAS MODALES
=============================================*/

.modalTitulo{
    padding:5px 0px;
}

.modalTitulo h3{
	text-align: center;
	margin-top: -5px;
	padding: 15px 0px;
	border-radius: 5px 5px 0px 0px;
}

.modalFormulario .close{
	position:absolute;
	right: 27px;
	top: 15px;
	color:red;
}

.modalFormulario .facebook, .modalFormulario .google{
	cursor:pointer;
}

.modalFormulario .facebook p{
   background: #46639f;
}

.modalFormulario .google p{
   background: #d6513e;
}

.modalFormulario .facebook p, .modalFormulario .google p{
	color:white;
	text-align:center;
	line-height: 40px;
	padding:8px;
	font-size:18px;
	margin-top:10px;
	margin-bottom:20px;
}

.modalFormulario p i{
	margin-left:-25px;
	margin-right:25px;
	font-size:25px;
}

.modalFormulario form{
	padding:20px;
}

.modalFormulario form hr{
	border:1px solid #eee;
}



.modalFormulario form input[type="submit"]{
	padding:15px;
}



/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width:1200px){

	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:20px 60px;
		padding-left:0px;
	}

	header #carrito{
		padding-left:100px;
	}

	.modalFormulario .facebook p{
		margin-right: -15px;
	}

}

/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/

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

	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:25px 60px;
		padding-left:0px;
	}

	header #carrito{
		padding-left:70px;
	}

		.modalFormulario .facebook p{
		margin-right: -15px;
	}

}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

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

	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:30px 0px;
	}

	header #carrito{
		padding-left:55px;
	}

	header #carrito p{
		display:none;
	}

		.modalFormulario .facebook p{
		margin-right: -15px;
	}

}

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

@media (max-width:767px){

	/*=============================================
	TOP
	=============================================*/

	#top ul{
		text-align: center;
	}

	#top #registro{
		border-top:1px solid #222;
	}
	
	/*=============================================
	HEADER
	=============================================*/

	header #logotipo img{
		padding:30px;
		padding-bottom:10px;
	}

	header #categorias{
		margin-bottom:10px;
	}

	header #buscador{
		margin-bottom:10px;
	}

	header #carrito{
		margin:0px;
	}

		.modalFormulario .google p{
		margin-top: -15px;
	}
	
}




/*=============================================
PERFIL
=============================================*/
#perfil figure#imgPerfil img{

	width:80%;
	margin:10px 0;

}

#perfil #subirImagen{
	display:none;
	margin:20px 0px;
	border:2px dotted #ccc;
	overflow: hidden;
	padding:40px;
	cursor:pointer;
}

#perfil #subirImagen img{
	width:100%;
	padding:10px;
}

#perfil #subirImagen #datosImagen{
	height:65px;
}


/*=============================================
GLOBAL
=============================================*/


ul, ol{
	padding:0px;
}

a:visited, a:link, a:focus, a:hover, a:active{
	list-style: none;
	text-decoration: none;
}

.quitarPunto{
	list-style:none
}

.barraSuperior{
	background:black;
}

.barraSuperior a{
	color:white;
}

.backColor, .backColor a{
	background:#47bac1;
	color:white;
}

.fondoBreadcrumb{
    margin-bottom: 0px;
    background:rgba(0,0,0,0);

}


/*=============================================
REDES SOCIALES
=============================================*/

.redSocial{
	width:30px;
	height:30px;
	text-align: center;
	line-height:30px;
}

/*FACEBOOK*/

.facebookBlanco{
	color:white;
}

.facebookNegro{
	color:black;
}

.facebookColor{
	color:white;
	background:#46639f;
}

/*YOUTUBE*/

.youtubeColor{
	color:white;
	background:#d6513e;
}

.youtubeBlanco{
	color:white;
}

.youtubeNegro{
	color:black;
}

/*TWITTER*/

.twitterColor{
	color:white;
	background:#0ab2e6;
}

.twitterBlanco{
	color:white;
}

.twitterNegro{
	color:black;
}

/*GOOGLE PLUS*/

.googleColor{
	color:white;
	background:#d71617;
}

.googleBlanco{
	color:white;
}

.googleNegro{
	color:black;
}

/*INSTAGRAM*/

.instagramColor{
	color:white;
	background:linear-gradient(45deg, #fca925, #ee1d5f,  #6350a2);

}

.instagramBlanco{
	color:white;
}

.instagramNegro{
	color:black;
}

/*=============================================
ERROR 404; verificar
=============================================*/

.error404, .verificar{
	color:#333;
}

/*=============================================
SCROLL UP
=============================================*/

#scrollUp{
	bottom: 60px;
	right: 40%;
	width: 50px;
	height: 50px;
	background: url(../img/plantilla/flecha.jpg);
}


/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width:1200px){

	.col-lg-0{
		display: none;
	}

	.error404 h1{
		font-size:300px;
		text-shadow:8px 8px 1px #dadada;
	}

	.verificar h3{
		margin-top:30px;
		font-size:300px;
		text-shadow:4px 4px 1px #dadada;
	}

}

/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/

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

	.col-md-0{
		display: none;
	}

	.error404 h1{
		font-size:200px;
		text-shadow:6px 6px 1px #dadada;
	}

	.verificar h3{
		margin-top:30px;
		font-size:100px;
		text-shadow:4px 4px 1px #dadada;
	}	

}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

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

	.col-sm-0{
		display: none;
	}

	.error404 h1{
		font-size:150px;
		text-shadow:4px 4px 1px #dadada;
	}

	.verificar h3{
		margin-top:30px;
		font-size:100px;
		text-shadow:4px 4px 1px #dadada;
    }		


}

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

@media (max-width:767px){

	.col-xs-0{
		display: none;
	}

	.error404 h1{
		font-size:75px;
		text-shadow:2px 2px 1px #dadada;
	}

	.verificar h3{
		margin-top:30px;
		font-size:50px;
		text-shadow:2px 2px 1px #dadada;
   }		


}



/*-- =================================
	  BARRA PRODUCTOS GRATIS          =
================================= */

    .banner{
    	position: relative;
    	overflow: hidden;

    }

    .banner .textoBanner{
    	position:absolute;
    	font-family:'Ubuntu Condensed', sans-serif;

    }

    .banner .textoDer{
    	top:50px;
    	right: 50px;
    	text-align: right;
    }

    .banner .textoIzq{
    	top:50px;
    	left: 50px;
    	text-align: left;
    }

  .banner .textoCentro{
    	top:50px;
    	right: 50px;
    	width:800px;
    	margin-left:-300;
    	text-align: center;
    }

.textoBanner h1{
	font-size:35px;
	line-height: 25px;
}

.textoBanner h2{
	font-size:35px;
	line-height: 25px;
}

.textoBanner h3{
	font-size:35px;
	line-height: 25px;
}


/*-- =================================
	  BARRA PRODUCTOS GRATIS          =
================================= */

.barraProductos .organizarProductos span{
	margin-left: 5px;

}

/*-- =================================
	  VITRINA DE PRODUCTOS en cuadricula        =
================================= */

.tituloDestacado h1{
	margin-top: -5px;
}

.tituloDestacado button span{
	margin-left:5px;
}

.productos ul li figure{
	overflow:hidden;
}

.productos ul li a img:hover{
	transition: .3s all ease;
	opacity: .8;
	transform: scale(1.1,1.1);
}

.productos ul li h4 small a{
	color:#777;
}


.productos ul li div.precio{
	padding:0px;
	margin-top:-30px;
	padding-bottom:20px;
}

.productos ul li div.enlaces{
	padding:0;
	padding-bottom:20px;
}

.productos ul li div.enlaces button{
	margin:2px;
}

.productos ul li div.enlaces button i{
	color:#999;
	font-size:12px;
}

/*-- =================================
      VITRINA PRODUCTOS LISTA        =
================================= */

.productos ul li h1{
    margin-top: -10px;
}

.productos ul li h1 small{
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 700;

}

.productos ul li h1 small a{
   color:#777;
}

.oferta{
    text-decoration:line-through;
    color:#ccc;
    font-size:15px;
}

.fontSize{
    font-size: 11px;
}



/*-- =================================
      ESCRITORIO GRANDE (LG REVISAMOS EN 1366PX EN ADELANTE)       =
================================= */

/*@media(max-width:1326px){ */
@media(min-width:1200px){ 
  
   .banner{
    height:260px;
   }


}

/*-- =================================
      ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD REVISAMOS EN 1024)    
================================= */

@media(max-width:1199px) and (min-width:992px){
    
    .banner{
        height: 260px;
    }

}


/*-- =================================
      ESCRITORIO PEQUEÑO O TABLET VARTICAL (SM REVISAMOS EN 768PX)     =
================================= */

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

    .banner{
        height:180px;
    }

    .textoBanner h1{
        font-size:30px;
        line-height:1 5px;
    }
 
   .textoBanner h2{
        font-size:25px;
        line-height:15px;
   }

   .textoBanner h3{
        font-size:25px;
        line-height:15px;
   }

   .banner .textoDer, .banner .textoIzq, .banner .textoCentro{
        top:35px;
   }


}

/*-- =================================
      MOVIL (XS REVISAMOS EN 320PX)        =
================================= */

@media(max-width:767px){

    .banner{
        height: 100px;
    }

    .banner .textoDer, .banner .textoCentro, .banner .textoIzq{
        top:7px;
        left:50%;
        width:800px;
        margin-left: -400px;
        text-align:center;
        text-shadow: 2px 2px 20px black;
    }

    .textoBanner h1{
        font-size:20px;
        line-height:5px;
    }
 
   .textoBanner h2{
        font-size:20px;
        line-height:5px;
   }

   .textoBanner h3{
        font-size:15px;
        line-height:5px;
   }

   .tituloDestacado h1{
         font-size: 20px;
         text-align: center;
   }

   .tituloDestacado button{
         position:absolute;
         left:50%;
         width:40%;
         margin-left:-20%;

   }

   .productos ul li h1 small{
        font-transform: uppercase;
        font-size:14px;
        font-weight: 700;
   }

}



/*--=====================================
    infoproducto
    ====================================== */

.infoproducto figure.visor img{
	display:none;
    cursor:crosshair;

}

.infoproducto figure.visor img:first-child{
	display:block;
}

.flexslider{
	cursor:pointer;
}

.lupa{
	display:none;
	position: absolute;
	top:0;
	left:0;
	overflow:hidden;
}

.lupa img{
	position:relative;
	margin-top: -100%;
	margin-left: -50%;
	width: 160%;
}

.compartirRedes{
	border:0px;
	box-shadow:none;
	margin:0px;
}

.compartirRedes li p{
	color:white;
	text-align:center;
	line-height: 30px;
	padding:8px;
	font-size: 18px;
	margin-top: 10px;
	margin-bottom: 20px;
	cursor: pointer;
}

.btnFacebook{
	background:#46639f;
}

.btnGoogle{
	background:#d6513e;
}


.alturaComentarios{
	height:300px;

}

/*================================
ESCRITORIO GRANDE( LG REVISAMOS EN 1366 EN ADELANTE)
==================================== */

@media (min-width: 1200px){

 .videoPresentacion{

 	height:415px;
 }


}

/*================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD REVISAMOS EN 1024)
==================================== */

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

	.videoPresentacion{

	 	height:350px;
	 }
	
}

/*================================
ESCRITORIO PEQUEÑO O TABLET VARTICAL (MD REVISAMOS EN 768)
==================================== */

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

	.videoPresentacion{

	 	height:300px;
	 }
	
}


/*================================
MOVIL (XS REVISAMOS EN 320)
==================================== */

@media (max-width: 767px){

	.videoPresentacion{

	 	height:200px;
	 }

	 .fondoBreadcrumb{
         font-size:12px;
	 }

	 .botonesCompra button{
         margin:5px 0;

	 }
	
}



/*=============================================
CARRITO DE COMPRAS
=============================================*/

.cabeceraCarrito{
	height:40px;
}

.cabeceraCarrito h3{
	margin-top:-5px;
}

.cabeceraCheckout{
	height:66px;
}

/*=============================================
Checkout
=============================================*/

.contenidoCheckout, .contenidoCheckout .row{
	padding:0px 20px;
}

.formEnvio{
	display:none;
}








/*=============================================
	= SLIDE      del frontend  =
	=============================================*/

#slide{
	position:relative;
	margin:auto;
	width: 100%;
	overflow:hidden;
	padding:0;
}

#slide ul{
	position:relative;
	left: 0%;
	margin:auto;
	height: auto;
	width:400%;
	clear:both;
	display:table;
}

#slide ul li{
	position:relative;
	float:left;
	width:25%;
}

#slide ul li img{
	width: 100%;
}

#slide .slideOpcion1 img{
	position:absolute;
	opacity:1;
	/*top:15%;
	right:10%;
	width:45%; */
}

#slide .slideOpcion1 .textosSlide{
	position:absolute;
	/*width:40%;
	top:20%;
	left:10%;*/
}


#slide .slideOpcion2 img{
	position:absolute;
	opacity:1;
	/*top:5%;
	left:15%;
	width:25%; */
}

#slide .slideOpcion2 .textosSlide{
	position:absolute;
	text-align: right;
	/*width:40%;
	top:15%;
	right:10%;*/
}

#slide .slideOpciones h1{
	text-transform:uppercase;
	font-size:50px;
	font-family:'Ubuntu Condensed', sans-serif;
	opacity:1;
	top:-10%;
	/*color:#333;*/
}

#slide .slideOpciones h2{
	text-transform:uppercase;
	font-family:'Ubuntu Condensed', sans-serif;
	opacity:1;
	top:-10%;
	/*color:#777;*/
}

#slide .slideOpciones h3{
	text-transform:uppercase;
	font-family:'Ubuntu Condensed', sans-serif;
	opacity:1;
	top:-10%;
	/*color:#888;*/
}

#slide .slideOpciones button{
	border:0px;
	margin-top:10px;
	opacity:1;
	top:-10%;
}

#slide .slideOpcion1 button:hover{
     background:black;
     color:white;
     border:0px;
}

#slide .slideOpciones button span{
	margin-left:10px;
}

/*=============================================
	flechas       =
	=============================================*/

#slide .flechas{
	position: absolute;
	font-size:2em;
	color:white;
	cursor:pointer;
	z-index:2;
}

#slide #retroceder{
	background:#666;
	left:0px;
	opacity:0;
	top:37%;
	padding: 40px 15px 40px 10px;
	font-size:22px;
}
 
#slide #avanzar{
	background:#666;
	right:0px;	
	opacity:0;
	top:37%;
    padding: 40px 10px 40px 15px;
	font-size:22px;
}


#slide #retroceder:hover, #slide #avanzar:hover{
	background:#777;
}

#slide #retroceder:active, #slide #avanzar:active{
	background:#444;
}

/*=============================================
	paginacion       =
	=============================================*/

#slide #paginacion{
	position:absolute;
	width:100%;
	margin:auto;
	text-align: center;
	line-height: 40px;
	font-size:12px;
	bottom:0px;
	left:0px;
	z-index:1;
	background:rgba(0,0,0,.05);
}	

#slide #paginacion li{
	display:inline-block;
	margin:0px 5px;
	cursor:pointer;
	opacity:.5;
	color:white;
	text-shadow:0px 0px 5px #333;
}

#slide #paginacion li:first-child{
	opacity:2;
}

#btnSlide{
	width:150px;
	border:0px;
	font-size:25px;
	padding:2px;
}

/*=============================================
	Esctitorio grande
	=============================================*/
@media(max-width:1200px) {

	#slide #retroceder{
		top:37%;
		padding: 40px 15px 40px 10px;
		font-size:22px;
	}

	#slide #avanzar{
		top:37%;
		padding: 40px 10px 40px 15px;
		font-size:22px;
	}

	#slide .slideOpciones h1{
	   font-size:50px;
	   margin-top:5px;
    }

    #slide .slideOpciones h2{
	   font-size:35px;
    }

    #slide .slideOpciones h3{
	    font-size: 30px;
     }

     #slide .slideOpciones button{
     	padding:10px;
     }


}





/*=============================================
	Esctitorio mediano o tablet horizontal md revisamos en 1024 px
	=============================================*/

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

	#slide #retroceder{
		top:35%;
		padding: 40px 15px 40px 10px;
		font-size:18px;
	}

	#slide #avanzar{
		top:35%;
		padding: 40px 10px 40px 15px;
		font-size:18px;
	}

	#slide .slideOpciones h1{
	   font-size:35px;
	   margin-top:5px;
    }

    #slide .slideOpciones h2{
	   font-size:30px;
    }

    #slide .slideOpciones h3{
	    font-size: 20px;
     }

     #slide .slideOpciones button{
     	padding:10px;
     }



}

/*=============================================
	Esctitorio pequeño o tablet vertical sm revisamos en 768 px
	=============================================*/

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

	#slide #retroceder{
		top:35%;
		padding: 30px 8px 30px 5px;
		font-size:14px;
	}

	#slide #avanzar{
		top:35%;
		padding: 30px 5px 30px 8px;
		font-size:14px;
	}

	#slide .slideOpciones h1{
	   font-size:25px;
	   margin-top:5px;
    }

    #slide .slideOpciones h2{
	   font-size:20px;
    }

    #slide .slideOpciones h3{
	    font-size: 15px;
     }

     #slide .slideOpciones button{
     	padding:5px;
     }

	
}


/*=============================================
	movil xs en 320 px
	=============================================*/

@media(max-width:767px){

	#slide #retroceder, #slide #avanzar{
		display:none;
	}

   #slide .slideOpciones h1{
	   font-size:15px;
	   margin-top:5px;
	   margin-bottom: -20px;
    }

    #slide .slideOpciones h2{
	   display:none;
    }

    #slide .slideOpciones h3{
	    font-size: 9px;
	    margin-bottom: -10px;
     }

     #slide .slideOpciones button{
     	padding:5px;
	    font-size: 9px;
     }
	
}