@import url('https://fonts.googleapis.com/css?family=Archivo+Black|Roboto+Slab|Righteous|Lato|Montserrat|Open+Sans|Oswald|Raleway|ZCOOL+QingKe+HuangYou');
/* Fuentes Personalizadas*/
@font-face{
	font-family: TravelingTypewriter;
	src: url('fuentes/TravelingTypewriter.ttf') format('truetype');
}
@font-face{
	font-family: Timeless;
	src: url('fuentes/Timeless.ttf') format('truetype');
}
@font-face{
	font-family: Timeless-Bold;
	src: url('fuentes/Timeless-Bold.ttf') format('truetype');
}
@font-face{
	font-family: Comfortaa-Bold;
	src: url('fuentes/Comfortaa-Bold.ttf') format('truetype');
}
@font-face{
	font-family: DOTMBold;
	src: url('fuentes/DOTMBold.ttf') format('truetype');
}
@font-face{
	font-family: Consolas-Bold;
	src: url('fuentes/Consolas-Bold.ttf') format('truetype');
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background: #f4f4f4;
	font-size: 17px;
	padding-top: 50px;
}

* {
	margin: 0; /*Elimino los margenes y paddings que agrega el navegador por defecto*/
	padding: 0;
}

p{
	font-family: 'Roboto Slab', serif;

}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Righteous', cursive;
}
	#menu {
			width: 100%;
			font-family: 'Archivo Black', sans-serif;
			text-align: center;
			left: 0;
			top: 0;
			z-index: 50;
			position: fixed;
	}

		.menu-item a {
			display: block;
			width: 100%;
			background-color: #ffcc00;
			padding: 15px;
			margin: auto;
			box-shadow: 5px 5px 15px rgba(0.2, 0.2, 0.2, 0.5);
			text-decoration: none;
			color: #bc5e16;
		}
		.menu-item{
			width: 100%;
		}
		.menu-item a:hover {
			background-color: #d6b11d;
			color: #7c4317;
			cursor: pointer;
		}

		.menu-principal ul,
		.menu-item ul {
			display: flex;
			list-style: none;
		}

		.menu-principal ul li ul,
		.menu-item ul li ul {
			display: none;
		}

		.menu-principal ul li a:hover+ul,
		.menu-principal ul li ul:hover,
		.menu-item ul li ul:hover+a {
			display: block;
		}

  #contenedor {
	  width: 1000px;
	  margin: auto;
  }

			#header {
				text-align: center;
				background-image: linear-gradient(#ffae00, #fff200, #ffae00);
				box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
				margin-top: 7px;
			}

			#header:hover {
				background-image: linear-gradient(#e2a726, #fff200, #e2a726);
			}
			.subtitle{
				font-family: Comfortaa-Bold;
				font-size: 20px;
				padding-left: 40px;
				border-left: 10px solid #ce491c;
				color: #f49242;
				font-weight: bold;
			}
			#content div#centro {
				background-color: #fff;
				box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
				margin-top: 25px;
				float: left;
				width: 630px;
			}
				#content div#derecha {
					width: 350px;
					height: 250px;
					float: left;
					background-image: url('../img/promo1-carnaval.png');
					background-size: 350px; 
					margin-top: 25px;
					margin-left: 14px;
					text-align: center;
					box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
					
				}
				
				#centro-abajo{
					background-color: #fff;
					width: 100%;
					box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
					margin-bottom: 15px;
					margin-top: 25px;
					float: left;
				}
				
				.required{
					color: red;
					font-weight: bold;
					font-family: 'Open Sans';
					font-size: 12px;
					letter-spacing: 3px;
				}
				
				.contacto{
					background-color: #fff;
					box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
					margin-bottom: 15px;
					margin-top: 25px;
					float: left;
					width: 536px;
					
				}
				#contacto{
					text-align: center;
					color: #ff8800;
					font-weight: bold;
					font-size: 20px;
				}
					.form-contacto{
						background-color: #eff151;
						border: 2px dashed #ffb600;
						text-align: center;
						font-family: TravelingTypewriter;
						font-size: 25px;
						color: #ad9a80;
						margin-top: 15px;
						margin-bottom: 15px;
					}
						.form-contacto:hover{
							background-color: #dadb7a;
						}
					.form-contacto-textarea{
						background-color: #eff151;
						border: 2px dashed #ffb600;
						width: 450px;
						height: 150px;
						font-size: 20px;
						font-family: TravelingTypewriter;
						margin-top: 15px;
						margin-bottom: 15px;
					}
						.form-contacto-textarea:hover{
							background-color: #dadb7a;
						}
					#nombre, #apellido{
						width: 300px;
						height: 60px;
					}
					#asunto, #email, #email2{
						width: 400px;
						height: 50px;
					}
					.form-contacto-boton{
						width: 150px;
						height: 55px;
						background-color: #efc12b;
						color: #ff2e05;
						font-family: TravelingTypewriter;
						font-size: 18px;
						border: 0;
						margin-bottom: 1em;
					}	
					.datos {
						width: 450px;
						float: left;
						background-color: #fff;
						margin-top: 25px;
						margin-bottom: 15px;
						margin-left: 14px;
						text-align: center;
						box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
						
					}
						.horarios, .direccion, .telefono, .inicio-ul{
							display: inline-block;
							padding-left: 40px;
						}
						.horarios-li, .direccion-li, .telefono-li, .inicio-li{ 
						list-style-image: url('../img/style-ul.png');
							
						}
				
			#content .centrado {
				background-color: #fff;
				box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
				margin-bottom: 15px;
				margin-top: 25px;
			}

					  .titleBienvenidos,
					  .titulos {
						  font-weight: bold;
						  text-transform: uppercase;
						  border-left: 7px solid #ce521c;
						  padding: 2px 7px;
						  padding-left: 1em;
						  font-size: 25px;
						  color: gold;
						  text-align: left;
						  margin-top: 15px;
					  }

					  #content p {
						  margin: 5px 2% 5px 2%;
						  padding-top: 10px;
						  padding-bottom: 10px;
					  }
			.inicio-presentacion{
				text-indent: 1cm;
			}
			.inicio-promo1{
				text-indent: 1cm;
				margin: 10px;
			}
				
			#formulario-impresion-pedido {
				text-align: center;
				font-size: 12px;
			}
					#copias, #hojas{
						width: 90px;
						text-align: center;
						background-color: #e5b75b;
						color: #effc00;
						height: 40px;
						font-size: 25px;
						font-weight: bold;
						font-family: Oswald;

					}
					#preciototal{
						font-family: Lato;
						font-size: 25px;
						color: gold;
						font-weight: bold;
					}
					#condicionesdescuento{
						font-family: DOTMBold;
						font-size: 20px;
						font-weight: bold;
					}
					.radiobtn{
					  display: none;
					}
					.buttons {
					  margin-left: -40px;
					}
					.buttons li {
					  display: block;
					}
					.buttons li label{
					  padding-left: 30px;
					  position: relative;
					  left: -25px;
					}
					.buttons li label:hover {
					  cursor: pointer;
					}
					.buttons li span {
					  display: inline-block;
					  position: relative;
					  top: 5px;
					  border: 2px solid #bfbbb3;
					  width: 18px;
					  height: 18px;
					  background: #fff;
					}
					.radiobtn:checked + span::before{
					  content: "";
					  border: 2px solid #fff;
					  position: absolute;
					  width: 14px;
					  height: 14px;
					  background-color: #e0aa3e;
					  right: 0.5px;
					}
					.select-pedido{
						background-color: #e5b75b;
						color: #effc00;
						width: 400px;
						height: 40px;
						font-size: 25px;
						font-weight: bold;
						font-family: Oswald;
					}
					.select-tarjeta{
						background-color: #e5b75b;
						color: #effc00;
						width: 100px;
						height: 40px;
						font-size: 25px;
						font-weight: bold;
						font-family: Oswald;
					}
					.select-pedido:hover, .select-tarjeta:hover{
						background-color: #af8f4d;
						
					}
					.pedido-label{
						font-size: 15px;
						font-weight: bold;
						font-family: Oswald;
					}
					#descuento, .tarjeta, #nombre-pedido, #surname-pedido, #email-pedido, #tel-pedido, #direccion-pedido, #codigopostal-pedido, #ciudad-pedido, #comentario-pedido, #direccion-ext-pedido, #codigopostal-ext-pedido, #ciudad-ext-pedido, #comentario-ext-pedido{
						background-color: #e5b75b;
						color: #effc00;
						width: 300px;
						height: 40px;
						font-size: 25px;
						font-weight: bold;
						font-family: Oswald;
						margin: 10px 0px;
						
					}
					.facturatitle{
						font-family: Consolas-Bold;
						font-size: 25px;
						font-weight: bold;
					}
					.facturatext{
						font-family: Consolas-Bold;
						font-size: 15px;
						font-weight: bold;
					}
					/* ESTILO DEL SELECCIONAR ARCHIVO */
					.upload {
					  display: none;
					}
					.uploader {
					  border: 2px solid #bfbbb3;
					  width: 450px;
					  position: relative;
					  height: 40px;
					  display: flex;
					  margin: 5px 5px;
					}
					.uploader .input-value{
					  width: 450px;
					  padding-top: 10px;
					  overflow: hidden;
					  line-height: 25px;
					  font-family: Oswald;
					  font-size: 16px;
					}
					.input-value{
						background-color: #e5b75b;
					}
					.uploader label {
					  cursor: pointer;
					  width: 40px;
					  height: 40px;
					  position: absolute;
					  right: 0;
					  background: #f4df42 url('../img/folder.png') center no-repeat;
					}
					#archivo-texto,
					#archivo-imagen, #archivo-documento {
						text-align: center;
						margin:auto;
					}
					#img, #contenido-archivo, #documento{
					  border: 2px solid #9e2b0e;
					  border-radius: 10px;
					}
					.siguiente, .anterior{
						background-color: #e2c60f;
						border-radius: 1em;
						color: black;
						cursor: pointer;
						text-align: center;
						text-decoration: none;
						padding: 15px;
						margin-top: 15px;
						font-family: Montserrat;
						font-size: 25px;
						font-weight: bold;
						border: 0;
						outline: 0;
					}
				.siguiente:hover, .anterior:hover, #navigate:hover{
					background-color: #b7a650;
				}
					
			
			#editar{
				text-align: center;
			}
				#editar input[type="file"]{
					background-color: #e0ba14;
					border: 5px inset #f9f10c;
					font-family: Timeless-Bold;
					font-size: 15px;
				}
					#editar input[type="file"]:hover{
						background-color: #c1ac51;
						border: 5px inset #f9f10c;
						font-family: Timeless-Bold;
						font-size: 15px;
					}
				#nombre-archivo, #tipo-archivo, #textarea-edit-crear{
					background-color: #e0ba14;
					border: 5px inset #f9f10c;
					font-family: Timeless-Bold;
					font-size: 30px;
				}
				#label-editor{
					color: #ff8800;
				}
				#textarea-edit-crear{
					width: 450px;
					height: 300px;
				}
				#nombre-archivo:hover, #tipo-archivo:hover, #textarea-edit-crear:hover{
					background-color: #c1ac51;
				}
				#descargar{
					background-color: #f4d142;
					width: 450px;
					height: 60px;
					border: 5px outset #f9f10c;
					font-family: Timeless-Bold;
					font-size: 25px;
				}
				#descargar:hover{
					background-color: #edd36a;
				}
	.servicios-separacion{
		margin: 15px 15px;
		border: 5px solid #f4d742;
	}
	.herramientas{
		font-size: 25px;
		text-align: justify;
		font-family: Montserrat;
		font-weight: bold;
		word-spacing: 10px;
		letter-spacing: 2px;
		
	}	

	#medios-de-pagos {
		padding: 30px;
		clear: both;
		margin: auto;
		text-align: center;
		background-color: #ffca6b;
		margin-top: 32%;
	}

		.img-seguro {
			vertical-align: bottom;
			width: 30px;
			height: 30px;
		}

		.seguro-txt {
			line-height: 35px;
			color: #fff496;
			font-weight: bold;
			font-size: 14px;
		}

#footer {
	padding: 25px;
	clear: both;
	margin: auto;
	text-align: center;
	background-image: linear-gradient(#ffaa0f, #fff200, #ffaa0f);
}

		#year {
			color: #ff6600;
			padding: 15px;
			margin: auto;
			cursor: pointer;
			font-weight: bold;
			font-size: 14px;
		}

		#year:hover {
			color: #d66113;
		}

			  #mensaje {
				  display: none;
				  position: fixed;
				  left: 0;
				  top: 0;
				  height: 100%;
				  width: 100%;
				  background-color: rgba(0, 0, 0, 0.5);
				  z-index: 100;
			  }

			  #mensaje-content {
				  margin: 10% auto;
				  width: 40%;
			  }

			  #mensaje-header {
				  background-image: linear-gradient(#ffaa0f, #fff200);
				  padding: 15px;
				  color: #ff6600;

			  }

			  #mensaje-body {
				padding: 10px 20px;
				background-color: #fff;
				font-family: 'ZCOOL QingKe HuangYou', cursive;
				font-size: 25px;
			  }

			  #mensaje-footer {
				  background-image: linear-gradient(#fff200, #ffaa0f);
				  padding: 10px;
				  color: #ff6600;
				  text-align: center;
			  }

			  #close-right {
				  color: #fff;
				  float: left;
				  font-size: 15px;
			  }

			  #close-left {
				  color: #fff;
				  float: right;
				  font-size: 15px;
			  }

			  #close-left:hover,
			  #close-right:hover {
				  color: #000;
				  text-decoration: none;
				  cursor: pointer;
			  }