@charset "utf-8";

* {	padding: 0;
	margin: 0;}



@media screen and (max-width:2000px) and (min-width:450px){
	

* {	padding: 0;
	margin: 0;}

body{background-color: #E3E3E3;}



header{	width:100%;
		height:6vw;
		background-color: white;
		margin: auto;
		position: fixed;
		z-index: 10;
		box-shadow:5px 1px 13px 2px rgba(0,0,0,0.9);}




.logo {	width:13%; max-width:13%;
		height:4.6; 
		float: left;
	    left: 2.3vw;
	    top:0.7vw;
	 	position: relative;	}




.logo img{	width:13vw; 
			height:4.6vw;}



	
.menu {	width:84%;
		height:6vw;
		float: right;
		position: relative;}


	

.menu li {	position: relative;
			width: 14vw;
			margin-left: -0.2vw;/* izquierda para q el boton no se le vea el borde al pasar encima*/
			margin-right: 1.8vw;/* derecha para q el boton no se le vea el borde al pasar encima*/
			height: auto;
			display: block;
			float: left;
			font-size: 2.3vw;
			text-align: center;
			line-height: 6vw;
			list-style: none;}




.menu a {font-family:Source Sans Pro Semibold; 
		  text-decoration: none;
		  color: silver;}




.menu  li a { padding:2vw 4vw 1.7vw 4vw; /* tamaño del howover del mouse sobre el boton*/ 
			  text-decoration:none;
			  font-weight:bold;
			  color:black;}
								

	
								
.menu li a:hover{background-color:#7C7B7B;}
								
								

	

.menu li a:active{	color:#820406; 
					background-color:#1D1D1D;}

	
	
	
#menu-bar{ display:none;}

	
	
													
#check{ display:none;}
								
								
.icon-menu{display:none;}
								
								
#menu-bar:checked ~ .menu{height:412px;}/* para alargar el menu*/
	

}

						






@media screen and (max-width:449px) and (min-width:250px){
	
header label{float:right;
			 font-size:28px;
			 margin:6px 0;/* parte baja del menu gris*/
			 cursor:pointer;}


/*------------------------------------------------------------------------------------------------------------*/
header {	width:100%;
			height:20.1vw;
			background-color: white;
			margin: auto;
			position: fixed;
			z-index: 10;
			box-shadow:5px 1px 13px 2px rgba(0,0,0,0.9);}


.contenedor{width:100%;
			margin:auto;}
	
				
			
header .contenedor{	display: table;
					margin-top: 1px;}
/*------------------------------------------------------------------------------------------------------------*/
	
.logo {	width:50%; max-width:100%;
		height:16vw;
		position: relative;
		left: 6%;
	    top: 2vw;
		float: left;}
	
	

.logo img{width:100%; 
		  height:100%; 
		  position: relative;}


/*------------------------------------------------------------------------------------------------------------*/
.menu {	width: 75%;
		height:0px;
		float: right;
		position: relative;
		margin-top:1.5%;}



.menu li {	position: relative;
			width: 14vw;
			height: auto;
			display: block;
			float: left;
			font-size: 2vw;
			text-align: center;
			line-height: 1.8vw;
			list-style: none;}


.menu a {font-family:Source Sans Pro Semibold; 
		 text-decoration: none;/* para el color de las letras y la tipografia*/
		 color: silver;}




.menu  li a { padding:25px 20px 17px 20px; /* tamaño del howover del mouse sobre el boton*/ 
			text-decoration:none;
			font-size:32px;/* aqui cambias el tam;o par acuando sea celular.*/
			font-weight:bold;
			color:white;;}
								
											
.menu li a:hover{background-color:#6A89A3;}
				

								
.menu li a:active{	color:rgba(132,4,6,1.00); 
				background-color: rgba(43,93,120,1.00)}
																						
/*------------------------------------------------------------------------------------------------------------*/

#menu-bar{ display:none;}

													
#check{ display:none;}
								
								
.icon-menu{display:none;}
								
								
#menu-bar:checked ~ .menu{height:140vw;}/* para alargar el menu*/

/*------------------------------------------------------------------------------------------------------------*/


	
	.icon-menu{
	display: block;
	color: white;
	float: right;
	padding: 3vw;/* tama;o del boton responsive*/
	border: 1px solid #7a7a7a;
	border-radius: 5px;
	font-size: 20px;
	margin-top: 3.5vw;
	margin-right: 8vw;
	background-image: -webkit-linear-gradient(59deg,rgba(191,158,42,1.00) 0%,rgba(169,72,85,1.00) 32.12%,rgba(155,18,112,1.00) 48.19%,rgba(128,32,119,1.00) 67.36%,rgba(9,91,151,1.00) 100%);
	background-image: -moz-linear-gradient(59deg,rgba(191,158,42,1.00) 0%,rgba(169,72,85,1.00) 32.12%,rgba(155,18,112,1.00) 48.19%,rgba(128,32,119,1.00) 67.36%,rgba(9,91,151,1.00) 100%);
	background-image: -o-linear-gradient(59deg,rgba(191,158,42,1.00) 0%,rgba(169,72,85,1.00) 32.12%,rgba(155,18,112,1.00) 48.19%,rgba(128,32,119,1.00) 67.36%,rgba(9,91,151,1.00) 100%);
	background-image: linear-gradient(31deg,rgba(191,158,42,1.00) 0%,rgba(169,72,85,1.00) 32.12%,rgba(155,18,112,1.00) 48.19%,rgba(128,32,119,1.00) 67.36%,rgba(9,91,151,1.00) 100%);
				}
				
	
				
.icon-menu:hover{ background-color:rgba(#3f3f3f);
				  cursor:pointer;}
	
	
				
.menu{float:left;
	  margin-top:0px;
	  width:100%;
	  overflow: hidden;
	  opacity: 0.99;
	  background-color: rgba(29,29,29,1.00);
	  transition:all 300ms;}
						
	
	
	
.menu li:hover{	background-color:#6A89A3;}
				
	
	
								
.menu li:active{color:rgba(132,4,6,1.00); 
				background-color: rgba(43,93,120,1.00)}
				
				
	
	
.menu ul{flex-direction: column;}
	
	
.menu li{width:100%;}
	
	
.menu li a{ display: block;
			width: fit-content;
			margin-top: 4%;
			margin-right: auto;
			margin-left: auto;
			margin-bottom: 9%;/* cambia el largo de las letras cuando se esta resposnive*/}

}