@font-face {
	font-family: "oz";
	src: url("../fonts/Oswald-Medium.ttf")
	 
}


#contenedor{
	width:80%;
	max-width:1500px;
	overflow:hidden;
	margin:0 auto;
	
	
}

.balon{
		display:block;
		margin-left: auto;
		margin-right:0px;
		width:15%;
		order:1;
		height:100px;
		width:150px;
		-webkit-animation: shake 3s linear 1s infinite normal ;
		animation: shake 3s linear 1s infinite normal ;
}

/*animacion para el balon*/
@-webkit-keyframes shake {
  0%{
	transform: rotate(-15deg);
	-webkit-transform: rotate(-15deg);
  }
  2%{
	transform: rotate(15deg);
	-webkit-transform: rotate(15deg);
  }
  4%{
	transform: rotate(-18deg);
	-webkit-transform: rotate(-18deg);
  }
  6%{
	transform: rotate(18deg);
	-webkit-transform: rotate(18deg);
  }
  8%{
	transform: rotate(-22deg);
	-webkit-transform: rotate(-22deg);
  }
  10%{
	transform: rotate(22deg);
	-webkit-transform: rotate(22deg);
  }
  12%{
	transform: rotate(-18deg);
	-webkit-transform: rotate(-18deg);
  }
  14%{
	transform: rotate(18deg);
	-webkit-transform: rotate(18deg);
  }
  16%{
	transform: rotate(-12deg);
	-webkit-transform: rotate(-12deg);
  }
  18%{
	transform: rotate(-12deg);
	-webkit-transform: rotate(-12deg);
  }
  20%{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
  }
}

@keyframes shake {
0% {
transform : rotate(-15deg);
	}
2% {
transform : rotate(15deg);
	}
4% {
transform : rotate(-18deg);
	}
6% {
transform : rotate(18deg);
	}
8% {
transform : rotate(-22deg);
	}
10% {
transform : rotate(22deg);
	}
12% {
transform : rotate(-18deg);
	}
14% {
transform : rotate(18deg);
	}
16% {
transform : rotate(-12deg);
	}
18% {
transform : rotate(-12deg);
	}
20% {
transform : rotate(0deg);
	}
}

/*fin aminacion*/
body{
	background-image:linear-gradient(to bottom, #ffffff, #f2f2f2, #d9d9d9, #bfbfbf,  
	#8c8c8c, #666666);
	background-attachment:fixed;
}

header{
	border-radius:4px;
	
	background-color:#b32d00;
	display:flex;
	box-shadow:4px 5px 10px #000000 ;	
	
	
}
/*boton menu responsive*/
#btn-menu{
	display: none;
}

header label{
	display:none;
	width: 30px;
	height: 30px;
	padding:10px;
	border-right: 1px solid #0000;
}

/*barra para el menu*/
.bar {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

header label:hover{
	cursor: pointer;
	background:rgba(0,0,0,0.3);
}

header ul li {
	list-style:none;
	margin:0px;
	padding:0px;
	display:flex;
	flex-direction:row;
	flex-shrink:1;
	flex-grow:1;
	order:2;
	font-weight:bold;
}



header ul li  a{
	
	color:white;
	text-decoration:none;
	font-weight:bold;
	font-size:25px;
	padding:10px;
	text-transform:uppercase;
	letter-spacing:0.5px;
	transition:all;
}

header ul li a:hover{
	background-color:white;
	color:black;
	transition:all 1s ease;
}

header ul li {
	background-color:#b32d00;
	position:relative;
	float:left;
	margin:0;
	padding:0;
	transition:all;
	
}

header ul li:hover{
	background-color:white;
	color:black;
	border-radius:4px;
	
	transition:all 1s ease
}

header ul ul {
	display:none;
	position:absolute;
	top:100%;
	left:0;
	
	padding:0;
}

header ul ul li {
	float:none;
	width:160px;
	border-radius:4px;
	font-size:15px;
	background-color:#b32d00;
	display:flex;
}

header ul ul a {
	line-height:130%;
	padding:10px 15px;
}

header ul li:hover >ul {
	display:block;
	;
	
}
.active{
	background-color:#b32d00;
}

.menu_bar {
	display:none;
}

/*zona para el responsive*/

@media screen and (max-width: 900px){
		
	
		
	#contenedor{
		width:100%;
		
		display:flex;
		flex-direction:column;
	
	}
	
	header{
		order:1;
		background-color:#b32d00;
		width:100%;
		
	}
	
	.menu {
		flex-direction:column;
		margin-left: -750%;
		font-size:15px;
		float:left;
		padding-top:30px;
		transition:all 1s;
		
		
	}
	
	header label{
		display:block;
	}
	
#btn-menu:checked ~ .menu {
	margin-left: 0;
	
	
}


header ul li:hover >ul {
	display:none;
	
}
.balon{
	display:none;
}

.main{
width:100%;
order:2;
	
}

aside{
display:flex;
flex-direction:column;
order:3;
width:100%;
}

footer{
	width:100%;
	order:4;
}

.logos{
	width:100%;
	
	margin:auto;
	height:45px;
	padding:25px;
	border:5px solid silver;
	background:white;
	transition:all
}

.lbj{
	display:none;
}

}
/*fin zona responsive*/

.main{
	margin-top:20px;
	float:left;
	width:70%;
	padding:20px;
	box-sizing:border-box;
	box-shadow:4px 5px 10px #000000 ;
	color:#fff;
	border-radius:4px;
	
	background-color:#404040;
}

aside{
	margin-top:20px;
	width:28%;
	padding:20px;
	box-sizing:border-box;
	float:right;
	box-shadow:4px 5px 10px #000000 ;
	color:white;
	border-radius:4px;
	background-color:#b32d00;

	
	
}
/*logotipos para el aside con animacion*/
.logos{
	width:50%;
	display:flex;
	margin:auto;
	height:100px;
	padding:15px;
	border:5px solid silver;
	background:orange;
	transition: all ;
	webkit-transition:width 3s delay 1s;
	 -webkit-animation-name: logos;
	animation-name: logos;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: bo;
	border-radius:30px;
	box-sizing:border-box;
	box-shadow:4px 5px 10px #000000 ;
}

.logos:hover{
	transition:all 0.5s ease;
	width:80%;
}

 
  @-webkit-keyframes logos {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  50% {
  opacity: 1;
  }
  }
  @keyframes logos {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  50% {
  opacity: 1;
  }
  } 
/*fin logos animacion*/

footer{
	clear:both;
	float:left;
	margin-top:20px;
	box-sizing:border-box;
	width:100%;
	padding:20px;
	color:#fff;
	box-shadow: inset 0px 0px 10px #fff;
	border-radius:4px;
	display:flex;
	background-color:#0d0d0d;
	justify-content:center;
}
 
 
/*apartado para el slider de galeria*/
.slider {
	width: 95%;
	margin: auto;
	overflow: hidden;
	border:solid silver	5px;
	background-color:orange;
	box-shadow:4px 5px 10px #000000 ;
	border-radius:10px;
	
}

.slider ul {
	display: flex;
	padding: 0;
	width: 400%;
	
	animation: cambio 20s infinite alternate linear;
}

.slider li {
	width: 100%;
	list-style: none;
}

.slider img {
	width: 100%;
}

@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}
/*fin de galeria*/

.texto1{
	text-transform:uppercase;
	font-family:"oz";
	letter-spacing:2px;
	margin:2%;
	justify-content:center;
	font-size:20px;
}

span{
	color:yellow;
	text-decoration:underline;
	font-style:italic;
	font-weight:bold;
	transition:all;
}

span:hover{
	transition: all 1s ease;
	font-size:25px;
	color:#80ff00;
}

.lbj{
	height:420px;
	display:flex;
	margin:auto;
	transition:ease;
	
}

.lbj:hover{
	transition:all 1s ease;
	height:500px;
}