/* VARIABLES *

/* definimos los colores que vamos a usar mediante :root */
:root {
  --blanco: #ffffff; /*color blanco*/
  --negro: #1f1f21; /*color negro*/
  --grisFondoSeccionOpiniones: #151515;
  --gris: #454545; /*color gris*/
  --Amarillo: #d5a326;
  --Azul: #496d8c;
}

/*fonts*/
@font-face {
  font-family: icomoon;
  src: url(../icons/Fonts/icomoon.woff);
}

/* RESET */

/*para toda la pagina aplicamos la siguiente propiedad */
* {

  margin: 0; /* quitar margen */
  padding: 0; /* quitar padding */
  box-sizing: border-box; /* tamaño de caja "box-sizing" indicamos al tamaño de caja, "border" mantener el tamaño de los elementos y "box" indica el tipo caja para no se rompa el diseño */
}

/* para el body aplicamos la siguiente propiedad */
body, html {
  font-family: "icomoon", sans-serif; /* el estilo de fuente */
  font-size: 15px; /* Tamaño de fuente por defecto */
    color: var(--blanco);
    background-color: var(--negro);
}

/* para las listas aplicamos la siguiente propiedad */
ul, li {
  list-style: none; /* elimina las viñetas de las listas */
}

/* para todos los titulos aplicamos la siguiente propiedad */
h1, h2, h3, h4, h5, h6 {
  line-height: 100%; /* altura de la fuente */
}

/* para los enlaces aplicamos la siguiente propiedad */
a {
  text-decoration: none; /* elimina el subrayado de los enlaces */
}

/* para las imagenes aplicamos la siguiente propiedad */
img {
  max-width: 100%; /* Evita que crezca mas y la imagen se pixele */
}

/* HEADER */
.header_img {
  margin: 0;
  padding: 0;
  background-image: url(../img/header_1.png);
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* para el header aplicamos la siguiente propiedad */
.header {
  width: 100%; /* ancho total */
  margin-left: auto; /* para que se centre */
  margin-right: auto;
  display: flex; /* para que se muestre en una sola fila */
  justify-content: space-evenly; /* para que se distribuyan los elementos */
  align-items: center; /* para que se alineen los elementos */
  margin-top: 30px;
  margin-bottom: 30px;
}

/* para los enlaces del header aplicamos la siguiente propiedad */
.menu a {
  color: var(--blanco);
  font-size: 20px;
  text-decoration: none; /* para que no tenga subrayado */
  margin-left: 10px;
  margin-right: 10px;
}

/* para el icono del menu aplicamos la siguiente propiedad */
.icon {
  margin-left: 8px;
  margin-right: 8px;
}
.rrss {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* para el boton aplicamos la siguiente propiedad */
.boton {
  width: 157px;
  height: 39px;
  margin: 12px 19px;
  border-radius: 20px;
  background-color: var(--Azul);
  box-shadow: none;
  border: none;
  transition: background-color 0.7s linear;
}

/*ALINEAR BOTON???

.button{
  margin-left: 8px;
  margin-right: 8px;
  align-items: center;
}

*/

/* para el hover del boton aplicamos la siguiente propiedad */
.boton:hover {
  background-color: var(--Amarillo);
}

/* para el texto del boton aplicamos la siguiente propiedad */
.boton a {
  color: var(--blanco);
  margin-right: 8px;
}

/* para la imagen de flecha del boton aplicamos la siguiente propiedad */
.btnImg {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* para la imagen de flecha del boton aplicamos la siguiente propiedad */
.btnImg img {
  width: 20px;
}


.menuNone {
  display: none;
}

.btnmenu{
  margin-bottom: 0;
      width: 157px;
    height: 39px;
    margin: 12px 19px;
    border-radius: 20px;
    background-color: var(--Azul);
    box-shadow: none;
    border: none;
    transition: background-color 0.7s linear;
}
.btnmenu:hover {
  background-color: var(--Amarillo);
}

.boton btnImg {
  margin-bottom: 30px;

}
.menuLogin{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items:center;
}
.menuLogin a{
  color: white;
  text-decoration: none;
  margin-top: 20px;
}

.gmail{
 width:  40px;
}

@media only screen and (max-width: 1250px) {
  .rrss{
    display: none;
  }
}

@media only screen and (max-width: 1092px) {
  /**/
  .header_img {
    background-position: left top;
  }
  .header {
    margin-top: 0;
    flex-direction: column-reverse;
  }
  .rrss {
    display: none;
  }
  .logo {
    display: none;
  }

  .menuMovil {
    width: 50px;
  }
  .menu {
    background-color: #ffffffcc;
    border-radius: 6px;
    margin-top: 40px;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    flex-direction: column;
  }
  .menu a {
    margin-left: 0;
    margin-right: 0;
    color: black;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
  }
.menuNone{
  display: none;
}

}