body {
    width: 100%;
    margin: 0 auto;
}
header {
    margin-bottom: 20px;
	margin:0 auto;
	width:100%;
}

header nav {
	max-width:100%;
	float:left;
	margin-top:1%;
	margin-bottom:1%;

}



/* MENU */

@font-face {
    font-family: 'TeXGyreAdventorRegular';
    src: url('texgyreadventor-regular-webfont.eot');
    src: url('texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('texgyreadventor-regular-webfont.woff') format('woff'),
         url('texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

#menu {
 float:left;
 left:55%;
 list-style-type:none;
 margin:0 auto;
 padding:0;
 position:relative;

}

#menu li {
 float:left;
 position:relative; 
 margin-top: 6%;
}

#menu li a {

    color: gray;
  
    text-decoration: none;
    font-weight: bold;
	float:left;
    text-transform: uppercase;
	font: 0.9em 'TeXGyreAdventorRegular', Arial, sans-serif; letter-spacing: 1px; font-weight: bold;
    color: #024f85;

	
}


#menu li a:hover  {

    color: #ad010d;
 
}

#menu li a.resaltarmenu {

color:#000;
font-weight:bold;
background-color:#FFFFFF;
 
border-bottom: 1px dotted


}
.menu_select {
    width:20%;
    float:left;
    display:none;
    position:relative;

}

.menu_select a{

	font: 15px/23px 'TeXGyreAdventorRegular', Arial, sans-serif;letter-spacing: 0; 

}

#selectme {
    min-width:200px;
    background-color:#024f85;
    color:#ffffff;
    padding:10px;
    font-weight: bold;
    text-align:left;
    cursor:pointer;
    float:left;
	font: 13px/22px 'OpenSansRegular', Arial, Verdana;
}


ul#options {
    width:100%;
    float:left;
    margin:0px;
    padding:0px;
    display:none;
}

ul#options li {
    width:97%;
    float:left;
    
}

ul#options li a {
    color: #fff;
    padding:1%;
    font-weight: bold;
    text-align:left;
	text-decoration:none;
    cursor:pointer;
    margin-bottom:1px;
    width:100%;
    float:left;
	font: 13px/22px 'OpenSansRegular', Arial, Verdana;
}

ul#options li a:hover {
    color:#000000;
    background-color:#EEEEEE;
    text-decoration: none;
	font: 13px/22px 'OpenSansRegular', Arial, Verdana;
}


#arrow {
    position: absolute;
    right: 10px;
    top: 12px;
    cursor: pointer;
}

.down {
    background-image:url("../img/mas.png");
    background-repeat:no-repeat;
    height:20px;
    width:20px;
}

.up {
    background-image:url("../img/menos.png");
    background-repeat:no-repeat;
    height:20px; 
    width:20px;
}

/* END MENU */

/* MENU PRODUCTO*/

#menuprod {
 float:left;
 left:30%;
 list-style-type:none;
 margin:0 auto;
 padding:0;
 position:relative;

}

#menuprod li {
 float:left;
 position:relative;
 right:30%;

}

#menuprod li a {

    color: #000000;
    padding: 2px 21px;
    text-decoration: none;
	float:left;
	font: 12px/20px 'OpenSansRegular', Arial, Verdana;
	
}


#menuprod li a:hover  {

    color: #3d5e2f;

}


.menu_selectprod {
    width:97%;
    float:left;
    display:none;
    position:relative;
	font: 13px/22px 'OpenSansRegular', Arial, Verdana;
}

#selectmeprod {
    min-width:200px;
    background-color:#a9aaa9;
    color:#ffffff;
    padding:10px;
    font-weight: bold;
    text-align:left;
    cursor:pointer;
    float:left;
	font: 13px/22px 'OpenSansRegular', Arial, Verdana;
}

ul#optionsprod {
    width:100%;
    float:left;
    margin:0px;
    padding:0px;
    display:none;
}

ul#optionsprod li {
    width:97%;
    float:left;
    
}

ul#optionsprod li a {
    color: #ffffff;
    padding:1%;
    font-weight: bold;
    text-align:left;
	text-decoration:none;
    cursor:pointer;
    margin-bottom:1px;
    width:100%;
    float:left;
	font: 13px/22px 'OpenSansRegular', Arial, Verdana;
}

ul#optionsprod li a:hover {
    color:#000000;
    background-color:#EEEEEE;
    text-decoration: none;
	font: 13px/22px 'OpenSansRegular', Arial, Verdana;
}

#arrowprod {
    position: absolute;
    right: 10px;
    top: 12px;
    cursor: pointer;
}



#arrow {
    position: absolute;
    right: 10px;
    top: 12px;
    cursor: pointer;
}




#sidebar {
    width: 200px;
    float: left;
}

#sidebar .widget {
    background-color:#fff;
    float: left;
    min-height: 150px;
    padding: 10px;
	margin-bottom:20px;
    width: 94%;
}

#sidebar .widget h2 {
	margin-top:0px;
}


/*CSS*/


/*Mobile portrait (320x480)*/
@media only screen and (max-width:480px) {
	body {
		width:100%;
	}
	
	header {
		margin-bottom: 10px;
	}
	
	header h1 {
		font-size:25px;
	}
	
	#sidebar {
		width:100%;
	}
	
	#sidebar .widget {
		margin-bottom: 10px;
		padding: 8px;
		width: 95%;
	}
	
	.content {
		width:100%;
	}
	
	footer {
		margin-bottom: 10px;
	}
}

@media only screen and (min-width:480px) and (max-width:767px) {
	body {
		width:100%;
	}
	
	#sidebar {
		width:100%;
	}
	
	#sidebar .widget {
		margin-bottom: 10px;
		padding: 9px;
		width: 96%;
	}
	
	.content {
		width:100%;
	}
}

/*Small tablet landscape (800x600)*/
@media only screen and (min-width:768px) and (max-width:880px) {
	body {
		width:100%;
	}
	
	#sidebar {
		width:25%;
	}
	
	#sidebar .widget {
		margin-bottom: 10px;
		padding: 9px;
		width: 97%;
	}
	
	.content {
		width:72%;
	}
}

@media only screen and (max-width: 980px) {
nav ul { display: none; }
nav ul li { padding-bottom: 3px; padding-left: 10%; }
nav select { display: inline-block; width:100%; background-color: #024f85; color:#FFF; font-size: 16px; font-weight: bold; }
nav .menu_select { display: inline-block; width:100%; background-color: #024f85; color:#FFF; font-size: 16px; font-weight: bold;   }
}

.seleccionado{

background-color:#024f85;
color:white;
font-weight:bold;

}

.seleccionado:hover{

background-color:#ccc;
color:white;
font-weight:bold;

}

.seleccionadoprod{

background-color:#024f85;
color:white;
font-weight:bold;

}

.seleccionadoprod:hover{

background-color:#72b368;
color:black;
font-weight:bold;

}