@charset "utf-8";
body{
	margin:0;
	padding:0;
	font-family: Helvetica,sans-serif;
	color: #666;
	background: #f2f2f2; 
	font-size: 1em;
	line-height: 1.5em;
	background-color:blue;
	background-image:url("../media/fondo.jpeg");
	background-repeat:no-repeat;
	background-attachment:fixed;	
	background-size:cover;
}
header{
	background:black;
	color: yellow;
	height: 100px;
	position:fixed;
	width:100%;
}		
	header a{
		color:yellow;
	}
		#logo-header{
			float: left;
			padding: 25px;
			text-decoration: none;
		}
			#logo-header:hover {
				color: red;
				transition: all 2s linear;
				transform:scale(1.1);
				box-shadow:10px 5px 6px #0fad7b
			}
			#logo-header .nombrepag {
				display:block;
				font-weight: 1000;
				font-size: 3ex;
			}
			#logo-header .otros {
				display: block;
				font-weight: 600;
				font-size: 2ex;
				color: #999;
				padding:5px 0px 0px 0px
			}
#main{
	min-height:650px;
	margin:0px;
	padding:0px;
	display:flex;
	flex-direction:row
}
#main>iframe{
	margin-top:100px;
	margin-right:20px;
	width:70%;
	min-width:440px;
	height:600px;
	order:1;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
	order:2;
	border-radius:6px;
}
nav{
	float:right;
	font-size:1.2em;
	flex-grow:1;
	flex-shrink:6;
	flex-basis:15%;
	order:1;
}
	nav ul{
		margin: 0;
		padding: 0;
		list-style: none;
		padding-right: 10px;
		}
	nav ul li {
		display:inline-block;
		line-height: 100px;
		}
	nav ul li a {
		display: block;
		padding: 0 10px;
		text-decoration: none;
		}	
	nav ul li a:hover{
		background: gray;
		transition:all 1s linear;
		transform:translate3D(0px,-10px,0px) 
		}			
#main > aside{
	margin-top:100px;
	padding:5px;
	border:1px solid #000000;
	border-radius:6px;
	flex-grow:1;
	flex-shrink:4;
	flex-basis:20%;
	order:3;
}
aside li{
	list-style:none;
}
/*aside li img{
	width:50%;
	margin-top:25px;
	padding-left:85px;
	height:150px;
}*/
.depar{
	width:200px;
	margin-top:25px;
	padding-left:85px;
	height:150px;
}
.depar:hover{
	transition:all 3s linear;
	filter: saturate(0%);
	transform:scale(1.2);
	
}
.armas{
	width:200px;
	margin-top:25px;
	padding-left:85px;
	height:150px;
}
.armas:hover{
	transition:all 2s linear;
	transform:scale(1.2);
	filter: hue-rotate(100deg);
}
/*aside li img:hover{
	transform:scale(1.5);
}*/
.slider{
	width:100%;
	margin:auto;
	overflow:hidden;
	
}
	.slider ul{
		display:flex;
		padding:4;
		width:300%;
		animation:cambio 8s infinite;
	}
	.slider li{
		list-style:none;
	}	
	.slider img{  
		width:100%;
		height:150px;
	}
@keyframes cambio{
	0% {margin-left:0;}

	100% {margin-left: -190%;}

}
footer{
	background:black;
	color: yellow;
	height: 160px;
	width:100%;
	padding-bottom:10px;
	margin:0;
	text-align:center;
}
strong:hover{
	color:red;
	transition: all 1s linear;
}
@media all and (max-width: 640px){
	#main{
		flex-flow:column;
	}
	body >aside,header,footer{
		min-height:100px;
		max-height:150px
	}
}