/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 13/11/2021, 23:30:32
    Author     : Gustavo
*/


@font-face {
  font-family: "Tex";
  src: url("../fuentes/texgyreschola-regular.otf");
}

@font-face {
  font-family: "Nunito";
  src: url("../fuentes/Nunito.ttf");
}

@font-face {
  font-family: "Raleway";
  src: url("../fuentes/Raleway-Bold.ttf");
}



@media screen and (max-width: 800px) {
    .parrafo {
        max-width: initial !important;
        font-size: 1.1rem !important;
    }
    
    .center-right, .top-right, .center-center {
        transform: none !important;
        position: initial !important;
    }
    
    
    
    .img-encabezado {
        height: auto !important;
        padding: 2rem !important;        
    }
    
    #div-encabezado-valores {
        position: initial !important;
    }
    
    .table-tabla {
        margin-left: 0px !important;
        margin-right: 0px !important;
        width: 100%;
    }
	
    .table-tabla td {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }	
	
    .td-img-objetivo, .td-img-servicio {
            display: none !important;
    }

    .grilla {
            display: initial !important;
    }
    
    .tabla-mitades td {
        padding: 0px;
    }
    
    #td-mitades-derecha {
        display: none;
    }
    
    #tr-integrante-directora-foto-superior {
        display: initial !important;
    }
    
    #td-integrante-directora-foto-derecha {
        display: none !important;
    }
    
    #span-texto-idioma {
        display: none;
    }
    
    #div-menu {
        height: 2rem !important;
        width: 2rem !important;
    }
    
    #img-bandera {
        height: 1.5rem !important;
    }
    
    .mundo img {
        max-width: 90vw !important;
    }
    
}

.menu-desplegable {
    /*    display: inline-table !important;*/
    position: fixed;
    background: white;
    box-shadow: 0px 0px 20px black;
    padding: 1rem;
    right: 4rem;
    top: 0px;
    width: 300px;
    max-width: calc(100% - 7rem);
    background: #2364AA;
}


.menu-desplegable-idioma {
    right: initial !important;
    width: initial !important;
}

.ancho-menu-idioma {
    width: 10rem !important;
}

#tabla-idiomas input {
    background: inherit;
    color: inherit;
    border: none;
    font-size: inherit;
    font-family: inherit;    
}

#span-idioma {
    padding: 10px;
    border: white solid 1px;
    border-radius: 5px;
}

/*
@media screen and (max-width: 1000px) {
    

    
    #titulo-td-menu {
        display: revert !important;
    }
}
*/

body {
    font-family: 'Nunito';
    margin: 0px;
    padding: 0px;
    padding-top: 4rem;
    background: lightgray; /*wheat;*/
}

.div-fondo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
}

#div-fondo_1 {
    /* background: linear-gradient(90deg, rgba(8,134,128,1) 0%, rgba(224,249,255,0) 15%, rgba(199,244,254,0) 85%, rgba(8,134,128,0.6166841736694677) 100%); */
    z-index: -1002;
    opacity: 0.3;
}

#div-fondo_2 {
    background-image: url("../imagenes/fondo-cuadritos.png");
    z-index: -1001;
    opacity: 0; /*0.05;*/
}


#div-fondo_3 {
    background-image: url("../imagenes/fondo-cuadritos-brillo.png");
    z-index: -1000;
    opacity: 0.4;
    
    -webkit-mask-image: url(../imagenes/fondo-mascara.png);
    -webkit-mask-size: 100%;    
    transition: -webkit-mask-position 2s;
    -webkit-mask-repeat: no-repeat;
}



#div-titulo {
    width: 100%;
    border-bottom: 1px #787468 solid;
    text-align: center;
    position: fixed;
    height: 4rem;
    top: 0px;
    z-index: 10;
    /* background: #b2cede;
    color: #f3b27c; */
    background: #2364AA;
    color: white;
}

#titulo-td-logo {
    width: 14rem;
}




#titulo-td-botones {
    text-align: end;
    max-height: 2rem;
}

#titulo-td-idiomas {
    text-align: center;
}

#img-bandera {
    height: 2rem;
    padding-bottom: 4px;
    vertical-align: middle;
    
}

    
#span-idioma {
    cursor: default;
}

#span-texto-idioma {
    padding-left: 5px;
    
}

#img-dropdown {
    padding-left: 15px;
    height: 16px;
    vertical-align: middle;
    padding-bottom: 4px;
}

#titulo-td-menu {
    display: none;
    padding-right: 1rem;
}


#div-logo {
    background-image: url("../imagenes/logo-encabezado-naranja.png");
    background-repeat: no-repeat;
    height: 3.2rem;
    width: 14rem;
    background-size: contain;
    z-index: -1;
}

#div-menu {
    background-image: url("../imagenes/tres-lineas.png");
    background-repeat: no-repeat;
    height: 2.5rem;
    background-size: contain;
    background-position-x: right;
    width: 2.5rem;
    float: right;
}

.center {
  margin: 0;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: initial !important;
}


.center-left {
    position: absolute;
    top: 50%;
    left: 1rem;
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

.center-right, .center-center, .top-right {
    position: relative;
    top: 50%;
    -ms-transform: translate(0%, -50%);
    left: 50%;
    margin-left: initial !important;
    margin-right: initial !important;
}


.center-right {
    transform: translate(calc(-50% - 5rem), -50%);
}


.center-center {
    transform: translate(-50%, -50%);
}



.top-right {
    transform: translate(calc(-50% - 5rem), -100%);
}


#div-botones {
/*    display: contents; */
}


.div-botones-tipomenu {
    display: none;
    position: fixed;
    background: darkslategray;
    box-shadow: 0px 0px 20px black;
    padding: 1rem;
    left: calc(100% - 300px);
    top: 0px;
    width: 300px;
}
    

.div-separador {
    display: block;
    height: 5rem;    
}

#div-botones-XXX{
    margin-top: 0.5rem;
    display: table;
    text-align: center;
    width: 100%;
    border-spacing: 2px;
}

#div-cuerpo {
    transition: opacity 0.5s;
}


.boton-encabezado {
    display: inline-block;
    padding: 0.5rem;
    
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 5px;
    margin-right: 5px;
    cursor: context-menu;
    user-select: none;
    border-top: 2px transparent;
    border-bottom: 2px transparent;    
}


.boton-encabezado:hover:not(.boton-activo) {
    border-top: 2px solid #f4f4f4;
    border-bottom: 2px solid #f4f4f4;
}


.boton-activo {
    border-top: 5px solid #F37021;
    border-bottom: 5px solid #F37021;
    transition: border-top 0.5s linear, border-bottom 0.5s linear, color 0.5s;
}

.seccion {
    overflow: hidden;
    max-height: 100000px;
    opacity: 1;
    
}

.seccion-inactiva {
    max-height: 0px;
    opacity: 0;
}

h1 {
    font-family: 'Raleway';
    font-size: 2rem;
    color: #bb4430;
    margin: 0px;
    margin-bottom: 2rem;
    text-align: center;
    line-height: initial;
    text-shadow: 0 0 5px rgba(0,0,0,0.25);
}

h2 {
    font-size: 1.5rem;
    font-style: italic;
    color: #bb4430;
    text-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.parrafo {
    margin-top: 4rem;
    text-indent: 2rem;
    padding: 2rem;
    font-family: 'arial';
    font-size: 1.25rem;
    line-height: 2;
    margin-bottom: 2.5rem;
    text-align: justify;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    box-shadow: 5px 5px 20px rgb(0 0 0 / 15%);
    background: #f3b27c;
}


.div-encabezado {
    margin-bottom: 0px;
    margin-top: 0px;
    border: none;
    box-shadow: none;
    opacity: 0.9;
    max-width: 40rem;
}


#div-quees {
    
}

#div-encabezado-valores {
/*    transform: translate(calc(-50% - 3rem), -100%);    */
    top: 10vh;
    right: -17vw;
    position: relative;
}


.table-tabla {
    background: darkslategrey;
    border: 1px solid black;
    /* color: white; */
    height: 15rem;
    border-collapse: collapse;
    margin-bottom: 5rem;
    overflow: hidden;
    margin-left: 3rem;
    margin-right: 3rem;
    background: #b2cede;
}

.table-tabla h1 {
    font-size: 1.5rem;
}

.table-tabla td {
    padding: 3rem;
}


.td-img-objetivo {
    background-size: cover;
    background-repeat: no-repeat;
    width: 25%;
    transition: transform 1s;
}

.td-img-objetivo:hover, .td-img-servicio:hover {
    transform: scale(1.2);
}

#td-img-objetivo_1 {
    background-image: url("../imagenes/fabrica8.jpg");
}

#td-img-objetivo_2 {
    background-image: url("../imagenes/fabrica7.jpg");
}

#td-img-objetivo_3 {
    background-image: url("../imagenes/fabrica6.jpg");
}

.punteo {
    line-height: 2rem;
}

/*
.td-img-servicio {
    background: right;
    background-size: contain;
    background-repeat: no-repeat;
    width: 50%;
    transition: transform 1s;
}
*/

.td-img-servicio {
	display: flex;
    background: right;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    transition: transform 1s;
	padding: 0px !important;
	margin: 0px !important;
}

.td-img-servicio div, .td-img-servicio img {
	display: flex;
    width: 100%;
}

#img-servicio_4 {
    content: url("../imagenes/archivo.jpg");
}

#img-servicio_5 {
    content: url("../imagenes/firma.jpg");
}

#img-servicio_6 {
    content: url("../imagenes/planta-residuos.jpg");
}

#img-servicio_7 {
    content: url("../imagenes/programa.jpg");
}

#img-servicio_1 {
    content: url("../imagenes/laboratorio.jpg");
}

#img-servicio_2 {
    content: url("../imagenes/industry-1827884__340.jpg");
}

#img-servicio_3 {
    content: url("../imagenes/tuberias-cerveceria.webp");
}





td.td-txt-tabla {
    padding: 2rem;
    text-align: justify;
    line-height: 2;
    font-size: 1.1rem;
    box-shadow: inset 5px 5px 15px 5px rgb(0 0 0 / 25%);
}


.table-integrante-directora {
    width: calc(100% - 10rem);
    height: 20rem;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 800px; 
    min-width: 319px;
    text-align: center;
    text-indent: 0px;
}


.td-directora-nombre h2 {
    color: #2364aa;
}


#tr-integrante-directora-foto-superior {
    display: none;
}

table.table-integrante {
    width: 20rem;
    height: 20rem;
    border-collapse: collapse;
    margin: 2rem;
    margin-left: auto !important;
    margin-right: auto !important;
}

table.table-integrante td {
    padding: 0px;
}

.grilla-integrantes {
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)) !important;
    place-items: center;
}

.tr-integrante-nombre {
    height: 3rem;
}

.td-integrante-nombre {
    text-align: center;
    text-indent: 0px !important;
    padding: 1rem !important;
    line-height: 1.5;
    color: #bb4430;
}

.span-equipo-titulo {
    font-size: 0.9em;
    font-style: italic;
    color: black;
}

.td-integrante-foto {
    padding: 2rem !important;
    text-align: center;
    text-indent: 0px;
    padding-bottom: 0.5rem !important;
}

.img-foto {
    border-radius: 1rem;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 75%);    
    height: 200px;
}


.table-clientes h2, .table-servicios h2 {
    background: #2364aaff !important;
    padding: 2rem !important;
    text-align: justify;
    font-size: 1.2rem !important;
    color: white;
    line-height: 2;
    border-radius: 1rem;
    text-shadow: none;
    margin-bottom: 3rem;
}

.table-clientes-marcas {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.2rem;
}

#div-marcas {
    background: white;
}

#td-img-marcas {
    text-align: center;
    padding-top: 0px;
}

#td-img-marcas .grilla {
    display: initial;
}

.aliados table {
    width: calc(100% - 6rem);
}


.aliados img {
    width: 300px;
    padding-top: 2rem;
    mix-blend-mode: multiply;
}

.aliados td {
    text-align: center;
}

.aliados h1, .mundo h1 {
    padding-top: 3rem;
}

.aliados h3 {
    text-align: left;
}




.grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
}

.img-encabezado {
    height: 75vh;
    background-size: cover;
    background-position: bottom;
}

#div-img-bosque {
    background-image: url(../imagenes/bosque-1.jpg);
    transition: background-position 25s ease-in-out;
    background-position: top;
    background-size: auto;  
    min-height: 90vh;
}

.div-img-bosque-bajar {
    background-position: bottom !important;
}

.div-img-bosque-subir {
    background-position: top !important;
}

#div-objetivos {
    min-height: 9rem;
}


.progreso-contenedor {
    display: grid;
}


.progreso-celda {
    grid-area: none;
    opacity: 1;
    
}


.p-objetivo-trans-in {
    transition: opacity 0.5s, transform ease-out 1s;

}

.p-objetivo-trans-out {
    transition: opacity 0.5s, transform ease-in 1s;
}



#div-img-proceso {
    background-color: #787468;
    background-image: url(../imagenes/fabrica-1.jpg);
}

#img-proceso {
    background: rgba(0,0,0,0.5);
    padding: 1rem;
    border-radius: 5px;
}


#div-img-valores {
    background-image: url(../imagenes/meeting-room.jpg);
    background-size: cover;   
    background-position: center;   
}


#div-valores td {
    width: 50%;
}

#td-img-valores {
    height: 100%;
    background-image: url(../imagenes/cielo-vertical.jfif);
}

.tabla-mitades {
    border-collapse: collapse;
}

#td-mitades-derecha {
    padding-right: 3rem;
    padding-bottom: 5rem;
    height: inherit;
}


#div-img-equipo {
    background-image: url(../imagenes/equipo-manos.jpg);
    background-size: cover;   
    background-position: center;   
}


#div-img-contacto {
    background-image: url(../imagenes/mapa-mundo-azul.png);
    background-size: cover;   
    background-position: center;   
    height: 100vh;
}

#div-contacto {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

#div-contacto {
    line-height: 1.5 !important;
    
}



.curriculum {
    font-family: serif;
    background-color: white;
    padding: 2rem;
    border: 1px solid rgb(0 0 0 / 50%);
    box-shadow: 5px 5px 10px rgb(0 0 0 / 25%);    
    margin-bottom: 5rem;
}


.mundo .table-tabla {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.mundo img {
    max-width: 700px;
    padding: 1rem;
}