body{
    background: gainsboro;
    font-family: "calibri", "PT Sans",sans-serif;
    margin:0;
    padding:0;
}

a{
    color: #7c9a34;
    font-weight: bold;
}

{*ENCABEZADO*}

.encabezado{
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom,rgba(0,0,0,.6), rgba(0,0,0,0));
    z-index: 100;
    width: 100%;
    height: 18vmin;
}

.encabezado_logo{
    position: fixed;
    background: url("../imagenes/logo.png");
    top: 0;
    left: 0;
    width: 8%;
    display: block;
    z-index: 101;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.encabezado_logo:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.encabezado_textos{
    position: absolute;
    width: 40%;
    right: 0;
    height: 18vh;
}

.encabezado_textos_links{
  color: white;
  display: inline-block;
  font-weight: bold;
  font-size: 2vw;
  padding-top: 4%;
  text-align: center;
  cursor: pointer;
  margin-left: 5%;
}

.encabezado_textos_links:hover{
    --text-shadow: 5px 5px 15px rgb(26, 85, 151);
    padding: 3px;
    background: #7c9a34;
    border-left: 5px solid #1a5597;
    --background: #1a5597;
    --border-left: 5px solid #7c9a34;
}

{*COBERTOR es para todas las pantallas igual*}
.cobertor{
    position: absolute;
    background: rgba(0,0,0,0.4);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 2;
}

{*PANTALLA 1 bienvenida*}

.bienvenida{
    position: relative;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    background: url("../imagenes/grandes/bienvenida.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bienvenida_texto{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}

.bienvenida_texto_1{
    font-weight: bold;
    color: white;
    font-size: 18vw;
    margin-top: 9%;
    width: 100%;
    text-align: center;
}

.bienvenida_texto_2{
    font-weight: bold;
    color: white;
    font-size: 10vmin;
    width: 100%;
    text-align: center;
}

{PANTALLA 2 empresa}

.empresa{
  position: relative;
  height:100%;
  width: 100%;
  background: url("../imagenes/grandes/empresa.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.empresa_texto{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.empresa_texto_1{
    font-weight: bold;
    color: white;
    font-size: 2.5vw;
    margin-top: 9%;
    padding: 40px;
    text-align: justify;
}

{*PANTALLA 3 servicios*}

{*esta query dice que si la pantalla mide entre 320px y 600px el flex de servicios debe presentarse en columnas*}
@media (min-width: 320px) and (max-width: 600px) {
    .servicios{
        --flex-direction: column;
        --height: 100% !important;
    }

    .empresa_texto_1{
        font-size: 3vh !important;
    }

    .detalleServicio{
        height: 20% !important;
    }

    .info_pie{
        font-size: 2vw !important;
    }
}

.servicios{
  position: relative;
  height:100%;
  width: 100%;
  background: white;
  display: flex;
}

.servicio{
  flex-grow: 1;
  box-sizing: border-box;
  min-width: 25%;
}

.s1{
  background: url("../imagenes/grandes/trabajador.jpg");
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

.s2{
  background: url("../imagenes/grandes/medio_ambiente.jpg");
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

.s3{
  background: url("../imagenes/grandes/legal.jpg");
  background-repeat: no-repeat;
  background-size: 200% 80%;
}

.s4{
  background: url("../imagenes/grandes/mediciones.jpg");
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

.texto_servicio{
  color: white;
  font-size: 6vmin;
  height: 100%;
  width: 100%;
  text-align: center;
  padding-top: 90%;
  box-sizing: border-box;
  z-index: 3;
  cursor: pointer;
  transition: 0.5s;
}

.cobertor_chico{
    position: relative;
    background: rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
    display: block;
    z-index: 2;
}

.texto_servicio:hover{
    font-size: 7vmin;
    font-weight: bolder;
    text-shadow: 0px 0px 15px black;
}

.cobertor_chico:hover{
    background: transparent;
}

.detalleServicio{
    position: absolute;
    width: 75%;
    height: 100%;
    display: none;
    color: white;
    z-index: 4;
    right: 0;
}

.detalle_texto{
    flex-grow: 4;
    background: #ffffff;
    border: 10px solid #7c9a34;
    color: #1a5597;
    box-sizing: border-box;
    padding: 10px;
    padding-top: 10%;
    font-size: 2.7vmin;
    height: 100%;
    overflow: auto;
}

.boton_volver{
    position: absolute;
    bottom: 0;
    right: 100%;
    background: rgba(255,255,255,0.5);
    width: 35%;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 100%;
    color: black;
    margin-left: 25%;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 3vmin;
}

.boton_volver:hover{
    background: rgba(255,255,255,1);
}

{*PANTALLA 4 contacto*}

.contacto{
    position: relative;
    height:100%;
    width: 100%;
    background: white;
}

.contacto_titulo{
    padding-top: 10%;
    margin-left: 5%;
    font-size: 5vmin;
    color: #1a5597;
}

.formulario_mail{
    margin-left: 10%;
    width: 90%;
}

.input_mail{
    margin-top: 1%;
    height: 7%;
    width: 60%;
    font-size: 3vmin;
}

.input_mail:focus{
    background: rgba(124,154,52,0.3);
    border: 1px solid #1a5597;
}

.area_mail{
    margin-top: 1%;
    width: 80%;
    font-size: 4vmin;
    font-family: "calibri", "PT Sans",sans-serif;
}

.area_mail:focus{
    background: rgba(124,154,52,0.3);
    border: 1px solid #1a5597;
}

.boton_mail{
    margin-top: 1%;
    padding: 10px;
    width: 80%;
    border: 1px solid #1a5597;
    text-align: center;
    background: rgba(26, 85, 151, 0.8);
    color: white;
    font-size: 3vmin;
    box-sizing: border-box;
    transition: 0.5s;
}

.boton_mail:hover{
    cursor: pointer;
    border: 1px solid #7c9a34;
    background: rgba(124,154,52,0.9);
}

.fin_mail{
  position: fixed;
  top: 20%;
  left: 20%;
  background: #7c9a34;
  z-index: 51;
  width: 50%;
  padding: 50px;
  text-align: center;
  border-radius: 3px;
  font-size: 3vmin;
  color: white;
  display: none;
}

{*PANTALLA 5 pie*}

.pie{
    position: relative;
    height: 20%;
    width: 100%;
    display: flex;
    background: #1a5597;
    color: white;
}

.info_pie{
    font-size: 2vw;
    height: 10%;
    margin-left: 1%;
}

.contacto_pie{
    position: absolute;
    font-size: 2vmin;
    right: 0px;
    width: 50%;
}

.contenedor_contacto_pie{
    float: right;
    width: 100%;
    display: inline-flex;
}

.titulo_contacto_pie{
  width: 20%;
  display: inline-block;
}

.valor_contacto_pie{
  width: 60%;
  display: inline-block;
}