*{
	margin: 0;
	padding: 0;
}
html, body
{
	box-sizing: border-box;
	width: 100%;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 	
	font-weight: 400;
	text-align: center;
	text-rendering: optimizeLegibility;
	background-color: #fff;
	color: #fff; 	
}

body
{
	overflow-x: hidden;
	overflow-y: auto;
	
	background:url(../../../app/images/body/fondoform_contacto.png) repeat-x;
	 background-attachment: fixed;
	 margin-top: 2px;
}

/* navigation bar */
.container
{				border: 0px solid red;	
	
	color: #fff;
	margin-top: 0px;			
	width: 100%;
		
}

#topnav {  border: 2px solid purple; 
	background:url(../../../app/images/body/encabezado.jpg) repeat-x;	/*encabezado.jpg*/
	
}
#topnav
{
	position: fixed; border: 0px solid pink;
	left: 0;
	top: 0;
	z-index: 2;
	color: #fff;
	
}


.logo 
{					border: 0px solid orange;
	margin: auto;	
	height: auto;
	width: 40%;
	text-indent: -9999px;
	background-image: url(../../../app/images/romero-silva.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	
		
}

.logo > a
{				
	display: block;   border: 0px solid red;
	width: inherit;
	height: inherit; height: 100px; 
	
}

  #navbtn {  border: 0px solid CornflowerBlue;
  background: url('../../../app/images/body/menu.png') center no-repeat; 
  /*display: none; */
  float: left; 
  margin-right: 5px;
  margin-top: 15px;  
  /*overflow: hidden; */
  text-indent: -99px; 
}


.menues li
{				border: 0px solid yellow;
	  	
	 padding: .5rem 0;	
	 color: red; /*#333C87*/	
}



.menues a:hover, .footer a:hover { 
	color: #fff; 	
}
 .nav-main  
{					border: 0px solid pink;
	display: block;
	margin: auto;
	height: 3rem; 
}

.nav-main li
{			
	display: inline;
	font-size: 1em; 
	padding: 0 .125rem;
	line-height: 3rem;
	color: #fff;
}







/**
 * Responsive
 ----------------------------------------*/


/* @media screen and (min-width: 320px){ */
@media screen and (min-width: 15em){ 
.logo 
	{ 				border: 0px solid magenta;
		flex: 30%; 
		margin: 0 ;
		background-position: right;	
		margin-top: 10px;		
	}
	.nav-main li{ border: 0px solid Magenta;	
	padding: 0 .5rem;
	
	}
	
	#navbtn{
	display: block; 
	float: right;	
	}

}

/* @media screen and (min-width: 480px){ */
@media screen and (min-width: 30em){
	.logo 
	{ 				border: 0px solid green;
		flex: 30%; 
		margin: 0 10;
		background-position: left;
		margin-top: 10px;
	}

	.nav-main
	{			border: 0px solid yellow;	
		flex: 70%;
		text-align: right; 
		font-size: 1.1em; 
		color: #fff;
	}
	#navbtn{	
	overflow: hidden;	
	}
}

/* @media screen and (min-width: 600px){ */
@media screen and (min-width: 37.5em){	
	.nav-main li {  	border: 0px solid Magenta;		
	padding: 0 1rem;
	/*display: block;	*/		
	}	
	#topnav  { 
	overflow:hidden;
	}
}
/* @media screen and (min-width: 1024px){ */
@media screen and (min-width: 64em){
	.container > * { 	
	max-width: 1024px; 
	margin: auto; 
	height:auto;
	
	}
	#topnav  { 
	overflow:hidden;
	
	}
	
	
}
/* @media screen and (min-width: 1200px){ */
@media screen and (min-width: 75em){
	
	.container > * { 	
	font-size: 1em; 
	max-width: 1200px; 
	margin: auto; 
	height:auto;	
	}
	
	#topnav  { 
	/*height: 4.5em; */
	height: 120px;
	overflow:hidden;
	}

	#topnav  > div
	{
		display: flex;    
		flex-flow: row no-wrap;
		justify-content: space-between;
		align-content: center; 
			
	}

	#navbtn{
	display: none; 
	float: left;
	overflow: hidden;	
	}
	
}
@media screen and (max-width: 1024px){
	#topnav nav {	
	display: none;	
	
	}
	
	#navbtn{	
	overflow: hidden;
	
	}
}