@charset "utf-8";

@font-face {
	
	font-family: "1";
	src: url("../fonts/ribeye_marrow.woff");
}

@font-face {
	
	font-family: "2";
	src: url("../fonts/Coiny-Regular.ttf");
}


@font-face {
	
	font-family: "3";
	src: url("../fonts/Lobster-Regular.ttf");
}



@font-face {
	
	font-family: "4";
	src: url("../fonts/UbuntuCondensed-Regular.ttf");
}


body {
	font: 24px Helvetica;
	background: url("../fondos/images.jpg");
	background-size:150px;
	font-family:sans-serif;
	font-size:1.25rem;
	text-align:center;
	
}



h1 {
	font-family:"1";
	text-align:center;
	color:black;
	font-size:50px;
}



h2 {
	
  font-family:"3";
  text-align:center;
  font-size:25px;
  color:white;
	
}


iframe{
	padding:30px;
}


#modelo {
	margin:4px;
	padding:5px;
}




#main {
	min-height:800px;
	margin:4px;
	padding:5px;	
	display:flex;
	flex-direction:row;
	margin:10px 150px;
	font-weight:bold;	
}


#main > article {
	
	margin:4px;
	padding:5px;
	background:#3c7f31;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
	order:2;
}

#main > nav {
    
	margin:4px;
	padding:5px;
	background:blue;
	flex-grow:1;
	flex-shrink:6;
	flex-basis:20%;
	order:1;	
}

#main > aside  {
  	
	margin:4px;
	padding:5px;
	background:black;
	flex-grow:1;
	flex-shrink:6;
	flex-basis:10%;
	order:3;	
	
	
}



#main > header {
	background-image:url("../img/IMG.jpg");
	display:block;
	margin:4px;
	padding:5px;
	border:black 2px solid;
    margin:10px 150px;
    font-weight:bold;	
   
}


#main > footer {
	
	display:block;
	margin:4px;
	padding:5px;
	background-image:linear-gradient(to right bottom, green, black);
	border:black 2px solid;
    margin:10px 150px;
    font-weight:bold;	
   
}




.navegacion {
	
	width:auto;
	margin-left:30px;
	background-image:linear-gradient(to right bottom, black, green);
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
	text-align:center;
	
}

.navegacion ul {
	list-style: none;
    flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
	
	
}


.menu > li{
	position: relative;
	display:inline-block;	
	
	
}

.menu > li > a{
	display:block;
	padding:15px 20px;
	color:white;
	font-family:'2';
	text-decoration:none;
}


.menu li a:hover{
	color:#CE7D35;
	transition:all .3s;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
}

.submenu{
	position:absolute;
	background:#333333;
	width:120%;
	visibility:hidden;
	opacity:0.4;
	transition:1.5s;
	text-align:center;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
}


.submenu li a {
	display:block;
	padding:15px;
	color:white;
	font-family:'2';
	text-decoration:none;
	text-align:center;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
}

.menu li:hover .submenu{
	visibility:visible;
	opacity:1;
	text-align:center;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
}



.primero{
	color:#e3e5e3;
	text-align:center;
	padding:15px;
	font-size:30px;
	font-family:'3';
}




.segundo{
	color:#2c2d2c;
	text-align:center;
	padding:15px;
	font-size:25px;
	font-family:'4';
}

.imagen {
width:200px;
height:200px;	
	
}

@media all and (max-width:640px){
	
	#main{
		 flex-flow:column;
		
	}
	
	#main > article, #main > nav, #main > aside{
		order:0;
	}
	
	#main > nav, #main > aside, header, footer{
		min-height:50px;
		max-height:50px;
	}
	
}