@charset "utf-8";
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
@font-face{
	font-family: 'redes';
	src: url("../fonts/social media.ttf");
}
@font-face{
	font-family: 'nombres';
	src: url("../fonts/Agnetha.ttf");
}

body {
	margin: 0;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-left:auto;
	margin-right:auto;
		
}
#botones li{
	width: 15%;
}
#botones li a {
	padding: 2em;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2em;
	color:black;
	text-decoration: none;	
}
.tablas {
    border: thin solid #373737;
	font-size: 16px;
	margin-left:auto;
	margin-right:auto;
}
#botones li a:hover{
	color:crimson;
	
}
#menu{
    width: 100%;
    border-bottom-width: thick;
    border-bottom-color: darkgray;
    border-bottom-style: solid;
    border-top: medium solid #5AB804;
    height: 1vh;
    border-top-color: darkgreen;
    border-top-style: solid;
    border-top-width: thick;
    background-color: white;
    z-index: 2;
}
#ses{
	width:20%;
	float:right;
	}
#botones {
	padding: 0;
}
#botones li {
	display: inline;
}
#menu div img{
	padding-left: 15%;
	float: left;
	width: 15%;
	height: auto;
	display: inline-block;

}
/*.fixed{position:fixed; top:0}*/
#cuerpo{
	margin-top: 10vh;
	margin-left: 20vw;
	/*margin-right: -20vw;*/
	width: 80%;
}
.mySlides{display: none;
}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:0}.w3-top{top:10vh}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:80%;height:80%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:20vw;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:20vw;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-container,.w3-panel{padding:0.01em 16px}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.w3-large{font-size:18px!important}
.w3-display-container{position:relative}
.w3-button{
	border: none;
	display: inline-block;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	margin-right: 19vw;
}
/* menu desplegable */

#menu ul ul {
 display:none;
 position:absolute;
 top:100%;
 left:0.5vw;
 background:#eee;
 padding:0;
}

/* items del menu desplegable */

#menu ul ul li {
float:none;
width:15vw;
margin-left: 2vw
	 
}

/* enlaces de los items del menu desplegable */

#menu ul ul a {
 line-height:120%;
 padding:10px 15px;
}

/* items del menu desplegable al pasar el ratón */

#menu ul li:hover > ul {
    display: block;
}
#mn{
	margin-left: 40%
}
#fr {
    width: 100%;
	height: 100%;
}
#cuerpo2{
	width: 100%;
position: absolute !important;
	top: 10% !important;	
	height: 80%;
}
#cuerpo1{
    height: 10%;	
}
/*form table{
    border-radius: 25px;
    border: thin solid #2B2A2A;
    
    
}*/
 form table td{
 
    font-size: 20px;
}
form label,form td  {
    color: #2E2D2D;	
}
form input, form textarea, form select{
    margin: 1%;
    width: 96%;
    font-size: 20px;
}
form textarea{
	height: 100px;
}

/*form table tr{
	border: medium;
	border-color: aliceblue;
	border-style: solid;
}*/
.che{
	width: auto !important;
}.tablas td {
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-bottom-color: #191818 !important;
}
#agregar, #agregar table, #ag1{
	border-width: 0px;
    border-style: none;
}

#ag1, #ag1 table{
	width:100%;}

#ped div table{
    border-width: 0px;
    border-style: none;
    
}
#botonsi, #botonsi table{
	width: 50% !important;
	border-width: 0px;
    border-style: none;
	}
#botonsi table td{
	width: 50%;
	border-width: 0px;
    border-style: none;
	}
#botonno, #botonsi input, #botonsi label, #pedidosino_1 {
	width:40%;
	display: inline !important;
	border-width: 0px;
    border-style: none;
}
#pedido{
    border: 0px none;
}
/*#ped td div {
	width: 30% !important;
	display: inline-block !important;
}*/
#ped, #linea {
	display: none;
    border-width: 0px;
    border-style: none;
}
.mensajes{
	text-align: center;
	color: dimgrey;
	font-size: 1.5em;
	padding: 2em;
}
.mensajes1{
	text-align: center;
	color: dimgrey;
	font-size: 1.5em;
	padding: 0.5em;
}

.fondo_boton_eliminar{
	background-image:url("../images/icons/icons8-eliminar-32.png");
	background-size: contain;
	background-position: center;
	
}
#agregar_linea_pedido{
	display:none;}
#detalle_ped{
	text-align:center;
	padding:1em;
	margin-left:auto;
	margin-right:auto;
	}
#factura{
	width: 100%;
	height: auto;
	padding: 8%;
}
#cliente table, #detalle_factura table{
	border:0;}
#encabezadofac{
    width: 100%;
    height: auto;
    
    border-bottom: 2px solid #1B1A1A;
}
#encabezadofac #imagen{
    width: 15%;
    height: auto;
	display: inline-block;
	vertical-align: top;
}
#encabezadofac #imagen img{
	width: 95%;
	height: auto;
}
#nrofac{
    width: 25%;
    height: auto;
    float: right;
    vertical-align:middle;
    border: 1px solid #232222;
	text-align: center;
}
#encabezado_texto{
	width: 55%;
	display: inline-block !important;
}
.saviasta_titulo{
    font-size: 1.5em;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
	
}
.saviasta_nombre{
    font-size: 1em;
    padding-right: 0.7em;
    
    padding-bottom: 0.2em;
}
#cliente{
	padding-top:1em;
	padding-bottom:1em;
 border-bottom: 2px solid #1B1A1A;
	}
#detalle_factura{
	clear: both;
	width: 100%;
}
#detalle_factura input, .cf, .pu{
	border:0;
width: 80%;
}
#detalle_factura table{
	width: 100%;
	
}
.prdf{width:100% !important;}
.bordelinea, #bordelinea td, #bordlinea th, #products td{
	border-top: 1px solid #666  !important;
	border-bottom: 1px solid #666  !important;
}
.resultados{
	width:60%;
	text-align:center;}
#fecha{
	border:0px none white;
	}
#products .imagenpro{
	width:100%;
	height:auto;}
.negritas{
	font-weight:bold;}
#det_prod img{
	width:90%;
	height:auto;
	}

.imagendetalle{
	width:10%;
	height:auto;}#contenedor #cabecera #contacto {
}

.redes{
	font-family: 'redes';
	font-size: 1.2em;
	color: blue;
}
.logo{
	width: 27%;
	float: left;
	padding-left: 2%;
	
}
.logo img{
	width: 100%;
	height: auto;

}
.contacto{
	width: 65%;
	float: right;
	line-height: 4em;
	vertical-align: text-top;
}
.contacto li{
	display: inline-block;
	width: 32%;
	font-size: 1em;
	
}
.menuprincipal{
	display: block !important;
	text-align: center;
	width: 100%;
	border-top: 1px solid #0F0F0F;
	clear: both;
	padding-top: 0.5em;
}
#cabecera{
	display: block !important;
	height: auto;
	padding-top: 0.3em;
	width: 80%;
	
}
/* menu desplegable */

#botones1 ul li ul {
 display:none;
 /*position:absolute;*/
 /*top:100%;
 left:0.5vw;*/
 background:#eee;
 padding:0;
 z-index: 1500;
}
#botones1 li{
	width: 15%;
	display: inline-block;
	
}
#botones1 a:hover{
	border-bottom: 3px solid #7E067D;
}
#botones1 li a{
	color: #191919;
	font-size: 1.5em;
	text-decoration: none;
}

/* items del menu desplegable */

#menuprincipal ul ul li {
/*float:none;*/
width:15%;
margin-left: 2vw
	 
}

/* enlaces de los items del menu desplegable */

#botones1 ul ul a {
 /*line-height:120%;*/
 padding:10px 15px;
}

/* items del menu desplegable al pasar el ratón */

#botones1 ul li:hover ul {
    display: block !important;
	clear: both;
}
#botones1 ul li ul li{
	display: block;
}
.menu_bar {
	display:none;
}



nav {
	clear:both;
	display:block;
	width:100%;
	background:#2460b3;
	z-index:1000;
	max-width: 1000px;
	width: 95%;
	margin:20px auto;
	text-align:center;
}

nav ul {
	list-style:none;
}

nav ul li {
	display:inline-block;
	font-size:1.3em;

	/*La razon por la que no usamos floar en vez de inline-block es
	porque no vamos a poder usar overflows en el header nav ul*/
	position: relative;
}

nav ul li:hover .children {
	display: block;
}

/*Submenu*/
nav ul li .children {
	background:#011826;
	position: absolute;
	display: none;
	width: 150%;
	z-index: 1000;
}
nav ul li .children li {
	display: block;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.5);
	/*Usamos overflow hidden porque aqui si vamos a necesitar usar float*/
}

nav ul li .children li a {
	display: block;
}

nav ul .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right: 0px;
	margin-left:10px;
}

nav ul li a {
	color:#fff;
	text-decoration: none;
	display: inline-block;
	padding:20px;
}

nav ul li:hover {
	background:white;
}

nav ul li span {
	margin-right:10px;
}

nav ul li .caret {
	position: relative;
	top: 3px;
	margin-left: 10px;
	margin-right: 0;
}

#pie{
	background-color: #2B2A2A;	
	display: block;
}

main{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
}
.carousel-caption {
	font-family: 'nombres' !important;

	
}
.carousel-caption h3 {
	font-family: 'nombres' !important;
	font-size: 5em;
	
}
.izquierda{
  right: 35% !important;
  bottom: 40%;
  left: 0% !important;
	
}
.derecha{
	right: 0% !important;
  bottom: 40%;
  left: 35% !important;
}
.carousel-caption p{
	font-family: 'nombres' !important;
	font-size: 2em;
	
}
#prod{
	width:30%;
display: inline-block;
	margin-left: 1%;
	vertical-align: text-top;
}
.celdaf{
	background-color: #991562;
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
	padding: 0.3em;	
	vertical-align:middle;
	
}
#prod img{
	width:100%;
	height:auto;}
.descripcion{
padding: 0.3em;
	line-height: 1.5em;
	text-align: justify;
	
}
.stock{
	font-weight: bold;
	text-align: center;
	
	
}
.flechas{
	margin-left:auto;
	margin-right:auto;}
.celda_imagen{
	padding:0.8em;
	}
.celda_detalle{
	width:40%;
	text-align:center;}
.imagen_detalle{
	width:100%;
	height:auto;}
.celda_textos_detalle{
	width:60%;
	vertical-align:text-top;
	text-align:left;
	padding-top:1em;
	padding-bottom:1em;
	font-size: 1.2em;
	line-height:1.5em;
	}
	
.formcontacto {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.caja {
    display: block;
    outline: 1px solid #dedede;
    padding-left: 55px;
    padding-top: 11px;
    padding-bottom: 11px;
    width: 90%;
    -webkit-box-shadow: 0px 1px 3px #CBCBCB;
    box-shadow: 0px 1px 3px #CBCBCB;
    -webkit-transition: all 0.15s linear 0s;
    -o-transition: all 0.15s linear 0s;
    transition: all 0.15s linear 0s;
    margin-top: 20px;
    margin-bottom: 20px;

}

#email {
    background-image: url("../images/icons/email.png");
    background-repeat: no-repeat;
    background-position: 2px 4px;
}

#nombre {
    /*background-image: url("../images/icons/user.png");
    background-repeat: no-repeat;
    background-position: 2px 4px;*/
}

#tel{
    background-image: url("../images/icons/phone.png");
    background-repeat: no-repeat;
    background-position: 2px 4px;
}
#mensaje{
    background-image: url("../images/icons/speech.png");
    background-repeat: no-repeat;
    background-position: 2px 4px;
    height: 6em;
}
.caja:focus {
   -webkit-box-shadow: 3px 4px 6px rgba(41,92,161,0.6);
    box-shadow: 3px 4px 6px rgba(41,92,161,0.6);
    outline: 0 none;
}	
.botonform {
    height: 3em;
    color: white;
    text-shadow: -1px -1px 0px #Fff;
    border-radius: 3px;
    background-color: #404249;
    -webkit-box-shadow: 2px 2px 3px 2px #979393;
    box-shadow: 2px 2px 3px 2px #979393;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	padding-left: 55px;
}
#pie1{
	background-color:#333;
	padding:1em;
	color:white;
	font-family: 'nombres';
	font-size:2em;
	text-align:center;
	}
#ad{
	background-color:#333;
	text-align:right;
	vertical-align:text-bottom;
	}
#tf{
	text-align:right;}

@media screen and (max-width:800px) {
	body {
		padding-top:80px;
	}
	.menu_bar {
		width: 100%;
		background:#2460b3;
		display: block;
		position: fixed;
		top:0;
	}

	.menu_bar .bt-menu {
		display: block;
		padding: 20px;
		color:#fff;
		overflow: hidden;
		font-size:25px;
		font-weight:bold;
		text-decoration: none;
	}

	.menu_bar span {
		float: right;
		font-size: 40px;
	}

	nav {
		width: 80%;
		height: calc(100% - 80px);
		right:100%; 
		/*Con esto ocultamos el menu hacia la derecha, lo agregamos hasta el final*/
		margin: 0;
		position:fixed;
		overflow:scroll;
	}

	nav ul li {
		display: block;
		border-bottom:1px solid rgba(255,255,255,.5);
	}

	nav ul li a {
		display: block;
	}

	nav ul li:hover .children{
		display: none;
	}

	nav ul li .children {
		width: 100%;
		position: relative;
		/*display: block;*/
	}

	nav ul li .children li a{
		margin-left:20px;
	}

	nav ul li .caret {
		float: right;
	}
	.contacto{
	width: 65%;
	float: right;
	line-height: 4em;
	vertical-align: text-top;
}
.contacto li{
	display: inline-block;
	width: 32%;
	font-size: 1em;
	
}
	
}