/*principales*/

body{
font-family: 'Roboto', sans-serif;

font-size: 1rem;
line-height: 150%;
overflow-x: hidden;
padding-top: 75px; /* Relleno superior igual a la altura de la cabecera*/
margin: 0;
padding: 0;
}

.header{
  width: 100%;
  margin: 0 auto;
  padding: 0 auto;
  align-items: center;
  background:#ffffff;
}

.home{
  width: 100%;

    position: relative;
    overflow: hidden;
    background-image: url(img/home.png);
    background-repeat: no-repeat;
    background-size: content;
    background-position: right top;
    margin: 0 auto;
    padding: 15px auto;

}

.nosotros{
  width: 85%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}



li {
  margin: 0 0 0 0;
  padding: 0;

}


ul {
  margin: 0 0 0 0;
  padding: 0;
}

.servicios{
  width: 100%;
  margin: 0;
  padding-top: 3rem;
  padding-bottom: 3rem;
  align-items: center;
  background: #e8e8e8;

}

.contenedor-servicios{
width: 85%;
margin: 2rem auto;
padding: 0 auto;


}

.seh{
  width: 85%;
  margin: 2rem auto;
  padding: 0 auto;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

}

.medioambiente{
background: #e8e8e8;
margin: 0;
padding-top: 3rem;
padding-bottom: 3rem;

}

.contacto{
background: #091b27;
margin: 0;
padding-top: 2rem;
padding-bottom: 2rem;

}

footer{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;

}

/*cierra principales*/


/* comienza header*/
.cabecera {
  background-color:#ffffff;
  	height: 75px;
  	width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    left: 0; /* Posicionamos la cabecera al lado izquierdo */
  	top: 0; /* Posicionamos la cabecera pegada arriba */
  	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
    z-index: 100;
}

.logo{
  display: inline-flex;

  margin-left: 96px;
  width: 30%;

}

.textologo{
    border-left: solid 1px #001b5e;
    padding-left: 14px;
    padding-top: 2px;

}

.sti {
  font-family: 'Roboto', sans-serif;
  font-weight:700;
  color: #001b5e;
  font-size: 1.75rem;

}

.slogan {
  font-family: 'Roboto', sans-serif;
  font-weight:500;
 line-height: 1;
  color: #7f7f7f;
  padding-top: 5px;


}

#btn-menu{
  display: none;
}

.menu{
  display: inline-flex;
  align-items: center;
  width: 60%;
  height: 50px;
  margin: 0 auto;
  padding: 0 auto;

}

.navigation {
  font-size: 0.75rem;
  font-weight: 500;
  width: 100%;
  color: #001b5e;
}

.navigation ul{
  margin: 0;
  padding: 0;
  list-style: none;
    background: #ffffff;
    text-decoration: none;
}





  .navigation ul li {
    display: inline-block;
  }
    .navigation ul li a {
      display: block;
      padding: 0.5rem 0.75rem;
      transition: all 0.2s linear;
      border-radius: 5px;
      color: #001b5e;
      text-decoration: none;
    }

      .navigation ul li a:hover{
        color:#ff5e13;

      }

      .cabecera .fas{
      size: 20px;
      padding: 5px auto;
      display: none;
      }


/*cierra header*/

/*comienza home*/

.contenedor-home{
  width: 40%;
  margin-left: 96px;


}

h1 {
color: #001b5e;
font-weight: 700;
font-size: 3rem;
line-height: 95%;
}

parrafo-home{
font-weight:400;
margin: 0 auto;


}

/*cierra home*/

/*comienza nosotros*/
.contenedor-nos{
  width: 50%;
  margin: 0 auto;
  padding: 0 auto;

}

.img-esquema{
width: 40%;
margin: 0 0;

}

.texto-nos{

  margin: 0 auto;
  padding-left: 0px;
  display: inline-flex;
  display: flex;
  justify-content: space-between;

  flex-wrap: wrap;


}

h2{
  color: #001b5e;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 120%;
  margin-top: 1.75rem;


}
.objetivo{
  display: inline-flex;


}

h3{
  color: #001b5e;
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0;


}

.texto-objetivo{
  padding-left: 30px;

}

.parrafo-nos {

}


/*cierra nosotros*/


/*comienza servicios*/

.tabla1{

  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 2rem 0 0 0;

}

.panel-servicios{
  width: 30%;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.servicios ul {
  margin: 1rem 0 0 1rem;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 125%

}

.servicios ul li{
margin: 0 0;
padding: 0 0;

}





h4 {
  font-weight: 700;
  color: #001b5e;
  margin: 2rem auto;
  text-align: center;

}

h5 {
  font-weight: 700;
  color: #001b5e;
  margin: 0 0 0 1rem;
  font-size: 1rem;
}
/*cierra servicios*/

/*comienza seh*/
.seh ul {
  margin: 1rem 0 0 1rem;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 125%

}

.seh ul li{
margin: 0 0;
padding: 0 0;
}

.seh ul li ul{
font-weight: 400;
  margin: 0 0 0 2rem;
}


.texto-seh{
  width: 50%;
  margin: 0;
  padding: 0;

}
.img-seh{
  width: 50%;
  margin: 2rem auto;
  padding: 0;

}

/*cierra seh*/

/*comienza medioambiente*/
.medioambiente-2{
    width: 85%;
    margin: 2rem auto;
    padding: 0 auto;
    align-items: center;

}
.contenedor-ma{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.listado1{
  display: flex;
  flex-wrap: wrap;

}

.medioambiente ul{
  text-decoration: none;
  list-style: none;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 135%;
}

h6{
  color: #001b5e;
  margin: 0 0 1rem 0;
}

.tabla2{
  margin: 0 0 2rem 0;
}

.columna1{
  margin: 0;
}

.columna1 ul{
 margin-left: 15px;

}

.contenedor-tabla2{
  margin-left: 1.5rem;
}



/*cierra medioambiente*/

/*comienza contacto*/

.copyright{

  color: #ffffff;
  margin: 1.5em auto;
  width: 75%;
  font-weight: 400;
  font-size: 0.75em;
  text-align: center;
}

.logo-pie{
  width: 85%;
}

.contenido-pie{
  width: 85%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  text-align: left;
  margin: 2rem auto;
}

.columna1-pie{
  margin: 0 0;
  width: 40%;
}

.columna2-pie{
  margin: 0 0;
  width: 40%;
}

.logo2{
  display: inline-flex;

  margin-left: 96px;
  width: 85%;

}

.textologo2{
    border-left: solid 1px #ffffff;
    padding-left: 14px;
    padding-top: 2px;

}

.sti2 {
  font-family: 'Roboto', sans-serif;
  font-weight:700;
  color: #ffffff;
  font-size: 1.75rem;

}

.slogan2 {
  font-family: 'Roboto', sans-serif;
  font-weight:500;
  color: #7f7f7f;

}

.columna2-pie ul li a{
  text-decoration: none;
  color: #ffffff;

}

.columna2-pie ul li a:hover{
  color: #7f7f7f;

}



/*cierra contacto*/




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

  header label{
    display: block;

  }

.menu{
 display: block;
  right: 15px;
  align-items: center;
  margin-right:2%;
  width: 40%;
}

.navigation{
  display: block;
  width: 100%;
  transform: translateX(-300%);
  transition: all 0.3s;
}

  .navigation ul {
  display: block;
  background: #ffffff;
  position: absolute;
  }



    .navigation ul li {
      display: block;

    }
      .navigation ul li a {

      }



  .logo{
    padding: 0.8rem 0 0.8rem 0;
    transition: 0.2s;
  }

  #btn-menu:checked ~ .navigation {
    transform: translate(50%);
    transform: translateY(-30%);

  }

  .logo{
    display: inline-flex;
    margin-left: 30px;
    width: 50%;
  }
  .cabecera .fas{
  size: 20px;
  padding: 5px auto;
  display: inline-flex;
  float: right;
  }

  .fondo-inicio{
  visibility: hidden;

  }

  .home{
    margin: 0.5rem auto;
  background-image: url(img/home-responsive.png);
  height: 500px;

  }

  .contenedor-home{
  width: 85%;
  margin: 0.5rem auto;

  }


  .contenedor-nos{
    width: 55%;
    margin: 0.5rem 0 0.5rem 0;
  }

  .texto-nos{
    width: 100%;
    margin: 0;
  }
  .nosotros{
  width: 90%;

  }

}

@media only screen and (max-width: 603px) {
  .logo img{
  margin: auto 14px auto 0;
  }

  .panel-servicios{
width: 80%;
margin: 1rem auto 0 auto;

  }

  .tabla1{
margin: 0 auto 0 auto;

  }

h1{
margin-bottom: 0.8rem;

}

.logo{
  width: 50%;
}

.slogan{
width: 100%;

}

.contenedor-tabla2{
  margin-top: 1rem;

}

.img-seh{
  width: 40%;
  margin: 0 auto auto auto;
}

.texto-seh{
  width: 60%;
}

.contenido-pie{
  width: 90%;
}

.logo-pie{
  width: 90%;
  margin: 0 auto;
}

.logo2{
  width: 90%;
  margin: 0 auto 0 auto;

}

.columna1-pie{
  width: 90%;
}

.columna2-pie{
  width: 90%;
}

}

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

  .logo img{
  margin-left: 10px;
  }

  .cabecera{
    height: 100px;
  }

.img-esquema{
    width: 90%;
    margin: 0 0.5rem 0 0;

}

.nosotros{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

.contenedor-nos{
  width: 90%;
}

.contenido-pie{
  width: 90%;
}

.logo-pie{
  width: 90%;
  margin: 0 auto;
}

.logo2{
  width: 90%;
  margin: 0 auto 0 auto;

}

.columna1-pie{
  width: 90%;
}

.columna2-pie{
  width: 90%;
}


}

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

h1{
  font-size: 2rem;
}

.logo{
  width: 40%;
}

.home{

    height: 520px;
}

}


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

.home{
    background-color: #e8e8e8;
    background-image: none;
    height: 600px;
}

.parrafo-home{
font-size: 0.5em;
}

}

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

.home{
    height: 620px;
}

}