/*menu*/
.header {
  color: #ffffff !important;
  background-size: cover;
  width: 100%;
  text-align: center;
  font-size: 150%;
  top: 0;
  background-color: rgb(0, 52, 104);
  background-position: center;
  z-index: 2;

}

#logo {
  width: 10%;
  min-width: 100px;
  max-width: 230px;
  margin-top: -2%;
  margin-bottom: -2.5%;

}

.navigation ul a {
  text-decoration: none;
}
.navigation li{

  text-decoration: none;
  list-style-type: none;
  text-align: center;
  display:inline;
  margin: 0% 5% 0% 5%;
}

/*menu desplegable*/
.acordeon {
  overflow: hidden;
  
}
.acordeonMenu input {
  display: none;
  
}

.acordeon__tituloMenu {
  position: absolute;
  overflow: hidden;
  padding: 0% 2% 0% 2%;
  color: #ffffff;
  font-size: 110%;
  cursor: pointer;
  border-radius: 5px;
  font-family: "Roboto", "Times New Roman", Times, serif, "Times New Roman", Times, serif, "Gill Sans", "Gill Sans MT";
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  margin-top: 30px;
  transition: all 1s;
}

.acordeon__tituloMenu:hover {
  background-color: rgba(18, 129, 240, 0.329);
}

.acordeon__contenidoMenu {
  height: 0;
  overflow: hidden;
  margin: 0;
  color: #fffdfd;
  font-size: 50%;
  position: absolute;
}

.acordeon__contenidoMenu li {
  font-size: 200%;
  text-align: start;
  color: rgb(250, 249, 249);
  padding-left: 25%;
}
.acordeon__contenidoMenu li a{
  text-decoration: none;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding: 2%;
  
}
.acordeonMenu input:checked~.acordeon__contenidoMenu {
  height:100vh;
  left: 0;
  width: 100vw;
  background-color: rgb(0, 52, 104);
}
.acordeonMenu input:checked~.acordeon__tituloMenu {
  background-color: rgba(18, 129, 240, 0.329);
}
.acordeon__contenidoMenu li a:hover{
  background-color: rgba(18, 129, 240, 0.329);
}


/*tamaño compu*/
@media screen and (min-width: 1350px) {
  .nav-container {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
  }
  .acordeonMenu{
    display: none;
  }
  .header{
    min-height: 100px;
    max-height: 170px;
  }


}

/*tamaño tablet*/
@media screen and (min-width: 820px) and (max-width: 1350px) {
  .header{
    min-height: 100px;
    max-height: 170px;
  }

  .nav-container {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
  }
  .navigation li{
    margin: 0% 2% 0% 2%;
    
  }
  .acordeonMenu{
    display: none;
  }

}

/*para tamaño telefono*/
@media screen and (max-width: 820px) {
  .header {
    position:fixed;
    min-height: 100px;
    max-height: 170px;
  }
  .nav-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    
  }
  .navigation li{
    display: none;
  }
  .acordeonMenu input:checked~.acordeon__contenidoMenu {
    margin:12% 0% 1% 0%;
    padding-top: 10%;
    font-size: 100%;
  }
  .acordeon__contenidoMenu li {
    padding-top:15% ;
  }
}

/*para tamaño telefono chico*/
@media screen and (max-width: 460px) {

  .header {
    position:fixed;
    font-size: 120%;
  }
  .nav-container {
    display: grid;
    grid-template-columns: repeat(30%, 70%);
    padding-top: 2%;
  }
  .navigation li{
    text-align: justify;
    display:grid;
    margin: 0% 5% 2% 10%;
    
  }
  .navigation li{
    display: none;
  }
  .acordeonMenu input:checked~.acordeon__contenidoMenu {
    margin:21% 0% 1% 0%;
    padding-top: 5%;
    font-size: 100%;
  }
  .acordeon__contenidoMenu li {
    padding-top:20% ;
  }
}

@media screen and (max-width: 290px) {


  .header {
    position:fixed;
  }
  .acordeon__tituloMenu {
    padding: 0% 2% 0% 2%;
    font-size: 100%;
    margin-top: 30px;
    margin-left: -15%;
  }
  .nav-container {
    display: grid;
    grid-template-columns: repeat(30%, 70%);
    padding-top: 0%;
    margin-bottom: 0%;
  }
  .navigation li{
    text-align: justify;
    display:grid;
    margin: 0% 5% 2% 5%;
    
  }
  .navigation li{
    display: none;
  }
  .acordeon__tituloMenu {
    margin-top: 40px;
  }
  .acordeonMenu input:checked~.acordeon__contenidoMenu {
    margin:34% 0% 0% 0%;
    padding-top: 35%;
    font-size: 100%;
  }

}