a:link {font-family: Trebuchet MS; color: #FFFFFF;text-decoration: none;}
a:visited {font-family: Trebuchet MS; text-decoration: none;color: #FFFFFF;}
a:hover {font-family: Trebuchet MS; text-decoration: none;color: #FFFFFF;}
a:active {font-family: Trebuchet MS; text-decoration: none;color: #00FF00;}
a {font-family: Trebuchet MS;font-size: 12px;}
body{
		background:#000;
		font-family: Verdana, sans-serif, Vegur; color:#fff;
		text-align: center;
		font-size: 12px;
		
	}
	
.grid-layout{
				
				display: grid;
				grid-template-areas:"cabecera"
									"menu "
									"texto"
									"pie"
									"bajo-pie";
				grid-template-rows: repeat(5, 30%, 10%, 40%, 10%, 10%);
				gap: 10px;
				width: 100%;
				height: 100%;
				background-color: #000;
				justify-content: stretch;
			}
.item{
	margin:0em;
	padding:0em;
	background-color: #000000;
		}
.caja{
		background: #000;
		text-align: center;
		height: 100%;
	 }


.logo{
		grid-area: cabecera;
		height: 10%;
		
		}
	
.logo2{
		display:none;
		}


.menu{
		grid-area: menu;
		
	}

.cuerpo{
	grid-area: texto;
	height: auto; /* Altura variable */
	display: flex;
	justify-content: center;
	align-items: flex-end;
	}
	
.container{
		
		margin-left: 11%;
		margin-right: 10%;
	}
	

.pie{
	grid-area: pie;
	background:#333333;
	text-align: center;
	vertical-align: middle;
	text-decoration: center;
	color: #ffffff;
	padding: 9px;
	
	
	
	}
.c4{
	grid-area: bajo-pie;
	color: #ffffff;
	
	}

		


		header nav {
					background:#333333;
					width:100%;
					height: 30px;
					text-align: center;
					
					}

		header nav ul {
						list-style:none;
						}

		header nav ul li {
							display:inline-block;
							position: relative;
						}
		/* color fondo al pasar el mouse */
		header nav ul li:hover {
								background:#242424;
								}

		header nav ul li a {
							color:#ffffff;
							display:block;
							text-decoration:none;
							 padding: 6px 20px;
							}

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

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

		header nav ul li .children {
			display: none;
			background:#333333; /* color de la celda hijo */
			position: absolute;
			width: 150%;
			z-index:1000;
		}

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

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

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

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

@media only screen and (max-width: 768px) 
{
	body {
			padding-top:0px;
			background:#fff;
		}
		
	.text{
		padding-top: 0px;
		padding-left: 10px;
		padding-right: 10px;
		
	}
	.logo{
		display:none;
	}
	.logo2{
		grid-area: cabecera;
		display:block;
		width:100%;
		top:0px;
		background:#000;
		overflow:scroll none;
	} 

	.menu_bar {
		display: block;
		width:100%;
		height:30px;
		background:#333;
		
		
	}

	.bt-menu {
		display: block;
		color: #333;
		font-weight: lighter;
		text-decoration: none;
		height:30px;
	}

	.menu_bar span {
		float: right;
	}
	.icon-menu{
				color:white;
				padding:5px;
				position: absolute;
				right: 20px;
			}
				

	header nav {
		width: 8em;
		height: 100vh;
		position: fixed;
		top: 170px;
		right:100%;		
		margin: 0;
		text-align: left;
		
		
	}

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

	header nav ul li a {
		display: block;
	}
	 
	header nav ul li:hover {
								background:#242424;
								}

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

	header nav ul li .children {
		width: 100%;
		position: relative;
	}

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

	header nav ul li .caret {
		float: right;
	}
}

*{margin:auto;padding:0px;}

				
			#header {
					margin:auto;
					width:auto;				
					font-family:Verdana, Arial, Helvetica, sans-serif;
					
				}
				
				ul, ol {list-style:none;}
				
				.nav > li {float:left;}
				
				.nav li a {
					
					text-decoration:none;
					padding:5px 12px;
					display:block;
					
				}
				
				
				
				.nav li ul {
					display:none;
					position:absolute;
					min-width:140px;
				}
				
				.nav li:hover > ul {
					display:block;
				}
				
				.nav li ul li {
					position:relative;
				}
				
				.nav li ul li ul {right:-140px; top:0px;}
}

.whatsapp-button {
 
  width: 60px;
  height: 60px;
  padding-bottom: 15px;
  
}

.whatsapp-icon {
  width: 30px;
  height: 30px;
}

.instagram-button {
  
  width: 60px;
  height: 60px;
  padding-bottom: 15px;

}


.instagram-icon {
	width: 30px;
	height: 30px;
}

.facebook-button {
  
  width: 60px;
  height: 60px;
  padding-bottom: 15px;

}


.facebook-icon {
	width: 30px;
	height: 30px;
}