@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400&display=swap');

:root {
    /*--background-gradient: linear-gradient(135deg, #667eea7e 0%, #764ba298 100%);*/
    --color-primario: ;
    --color-secundario: ;
    --color-verde-trans: rgba(59,148,43,.3);
    --color-azul-trans:  rgb(5, 80, 131, .3);
    --color-verde: rgba(59,148,43);
    --color-azul:  rgb(5, 80, 131);
}

body {
    font-family: 'Montserrat', sans-serif;
}

.separador{
    width: 100%;
    height: 50px;    
}

.header{
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/assets/edificio-1.jpg');
    background-size: cover;
    overflow: hidden;
    background-position: center center;
}

.filtro-header{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(5, 80, 131) 0%, rgba(59,148,43) 100%);
    opacity: .3;
}

.header-pag-2{
    background-image: url('/assets/nosotros.jpg');
}

.header-pag-2 .filtro-header{
    opacity: .5;
}

.header-pag-3{
    background-image: url('/assets/equipo-vidriero-header.jpg'); 
}

.header-pag-3 .filtro-header{
    opacity: .5;
}

.header-pag-4{
    background-image: url('/assets/modern-office-building-facade.jpg');
}

.header-pag-4 .filtro-header{
    opacity: .5;
}



/*
//logos*/

.container-logos{
    position: absolute;
    top: 0px;
    margin-top: 0px;
    overflow: hidden;
    height: 80px;
    text-align: left;
    margin-left: 10%;
    z-index: 100;
    padding: 5px 0px;
    display: flex;
    align-items: center;
}

.container-logos img{
    height: 100%;
}

.logo-LHDR{
    margin-bottom: 0px;
    max-height: 60px;
}

.logo-LHDR img{
    height: 100%;
}

/*
//text header*/

.container-text-header{
    color: rgb(255, 255, 255);
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-weight: 500;
    text-shadow: 1px 1px 5px black;
}

.t-1{
    font-size: 2.6em;
    line-height: 50px;
    letter-spacing: 7px;
}

.t-2{
    font-size: 4.2em;
    letter-spacing: 3px;
}

.t-3{
    margin-top: 5px;
    font-size: 2.4em;
    letter-spacing: 3px;
}

/*
//menu superior*/


.menu-superior{
    background: linear-gradient(90deg, rgb(5, 80, 131, .3) 0%, rgba(59,148,43,.3) 100%);
    position: absolute;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    color: #fff;
}

.menu-superior a{
    text-decoration:none;
    color:inherit;
}

.menu-superior li{
    list-style: none;
    display:inline-block;
    padding: 35px 10px;
    text-align:center;
    height: 80px;
    transition: all .1s;
    margin-left: -4px;
}

.menu-superior .activo{
    border-bottom: 2px solid var(--color-azul);
    background-color:var(--color-azul-trans);
}

.menu-superior li:hover{
    background-color:var(--color-azul-trans);
}

/*
//iconos redes*/

.container-iconos-redes{
    position: absolute;
    padding: 0px;
    height: auto;
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
    bottom: 5%;
    right: 5%;
    z-index: 10;
}

.container-iconos-redes a{
    color: #fff;
    text-decoration: none;
}

.container-linea-vertical{
    width: 140px;
    height: 1px;
    background-color: #fff;
    margin: 0px 10px;
}

.item-iconos-redes{
    display: flex;
    justify-content: center;
    margin: 0px 10px;
    font-size: 1.3em;
    transition: all .2s;
    border-radius: 50%;
    cursor: pointer;
    transition: all .2s;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
}

.item-iconos-redes i{
    margin: 0;
    padding: 0;
}

.item-iconos-redes:hover{
    box-shadow:inset 0px 0px 0px 1px #fff;
}

main{
    width: 100%;
    height: auto;
    position: relative;
}

/*
//banderas*/

.container-banderas{
    position: absolute;
    right: 0;
    height: 80px;
    overflow: hidden;
    margin-right: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.idioma{
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.idioma-es{
    background-image: url('/assets/banderas/colombia-sin.png');
    background-size: cover;
}

.idioma-en{
    background-image: url('/assets/banderas/estados-unidos-de-america-sin.png');
    background-size: cover;
}

/*
//tarjetas*/

.container-tarjetas{
    height: 100vh;
    width: 100%;
    text-align: center;
    background-image: url('/assets/edificio-2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.filtro-container-tarjetas{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(14, 49, 248);
    opacity: .3;
}

.container-titulo-tarjetas{
    position: absolute;
    top: 0;
    margin-top: 50px;
    width: 100%;
    z-index: 1;
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.icono-tarjetas{
    margin-top: 40px;
    color: rgb(3, 230, 199);
    font-size: 1.7em;
}

.container-titulo-tarjetas h2 {
    color: #fff;
    text-shadow: 1px 1px 10px black;
    letter-spacing: 10px;
    font-weight: 500;
    margin-top: 30px;
    font-size: 2em;
}

.container-titulo-tarjetas h3 {
    color: rgb(241, 240, 240);
    text-shadow: 1px 1px 5px black;
    letter-spacing: 5px;
    font-weight: 300;
    margin-top: 15px;
    font-size: 2em;
}

.grid-tarjetas{
    position: absolute;
    bottom: 10%;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    margin: 0px 100px 0px 100px;   
    overflow: hidden;
    height: 60%;
}

.tarjeta{
    overflow: hidden;
    max-height: 100%;
    position: relative;
}

.tarjeta img{
    height: 100%;
}

.container-text-tarjeta{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.text-tarjeta{
    color: #fff;
    letter-spacing: 5px;
}

.div-btn-ver-todo{
    margin-top: 15px;
    background-color: transparent;
    border: 2px solid rgb(0, 255, 221);
    padding: 10px 20px;
    color: rgb(0, 255, 221);
    cursor: pointer;
}

.div-btn-ver-todo {
    background-image: linear-gradient(to right,  rgb(7, 87, 87) 0%, #E5E5BE  51%,  rgb(7, 87, 87)  100%);
    margin-top: 15px;
    background-color: transparent;
    border: 2px solid rgb(0, 255, 221);
    padding: 10px 20px;
    color: rgb(0, 255, 221);
    cursor: pointer;
    transition: 0.5s;
    background-size: 1300% auto;
}

.div-btn-ver-todo:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}  

.container-text-tarjeta a{
    text-decoration: none;
}

.filtro-container-text-tarjeta{
    position: absolute;
    bottom: 0;
    background-color: rgb(7, 87, 87);
    width: 100%;
    height: 32%;
    margin-bottom: -10px;
}

/*
//cinta peligro*/

.container-cinta-peligro{
    background-image: url('/assets/cinta.png');
    background-position: center;
    background-position-x: left;
    background-repeat: repeat;
    background-size: cover;
    width: 100%;
    height: 100px;
    overflow: visible;
    /*margin-top: -124px;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-cinta-peligro p{
    color: #000;
    font-size: 2em;
    letter-spacing: 2px;
    /*text-shadow: 1px 1px 5px black;*/
    font-weight: 700;
}

/*
//productos*/

.container-productos-distribucion{
    width: 100%;
    height: auto;
    text-align: center;
    padding-top: 80px;
}

.container-productos-distribucion p{
    color: #075554;
    font-size: 2em;
    letter-spacing: 3px;
}

.titulo-container-productos-distribucion{
    font-weight: 700;
    margin-bottom: 0px;
    margin-bottom: 0px;
}

.grid-productos-distribucion{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
    height: 60%;
    width: 80%;
    margin-left: 10%;
    margin-top: 120px;
}

.item-grid-productos-distribucion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 150px;
    position: relative;
    box-shadow: 3px 3px 7px #000;
}

.item-grid-productos-distribucion p{
    font-size: 1.7em;
    position: absolute;
    bottom: 10%;
}

.circulo{
    min-height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px #000;
    background-color: #f0f0f0;
    box-shadow: 5px 5px 10px rgb(84, 85, 84);
    transition: all .2s;
    top: -30%;
    position: absolute;
}

.circulo:hover{
    height: 155px;
    width: 155px;
}

.circulo img{
    max-width: 70px;
}

.circulo i{
    color: #000;
    font-size: 5em;
}

.button-productos{
    margin-top: 100px;
    border-radius: 50px;
    padding: 10px 20px;
    width: 500px;
    color: #fff;
    cursor: pointer;
    font-size: 1.6em;
    box-shadow: 3px 3px 7px #000;
    background: linear-gradient(90deg, rgb(5, 80, 131) 0%, rgba(59,148,43) 100%);
    border: none;
}

/*
//ficha de google*/

.container-maps{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    background-color: rgb(214, 214, 214);
    margin-top: 80px;
}

.info-container-maps{
    width: 40%;
    text-align: center;
    line-height: 1.2em;
    font-size: 1.3em;
    color: rgb(4, 56, 9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.titulo-info-container-maps{
    margin-top: 80px;
    font-weight: 700;
    font-size: 1.2em;
}

.logos-nuevos{
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 200px;
}

.logos-nuevos img{
    max-height: 100%;
    max-width: 50%;
}

.logo-lhdr{
    margin: 10px;
    width: 40%;
    height: 80px;
    overflow: hidden;
    margin-bottom: 20px;
}

.logo-lhdr img{
    max-width: 100%;
    max-height: 100%;
}

.container-mapa{    
    width: 50%;
    margin-left: 40px;
    margin-right: 0px;
    height: 100%;
    display: flex;
    align-items: center;
}

.container-mapa iframe{
    width: 100%;
    border: 3px solid rgb(4, 56, 9);
    overflow: hidden;
}

/*
//footer*/

.footer{
    background-color: rgb(26, 26, 26);
    width: 100%;
    text-align: center;
    position: relative;
    padding: 20px;
}

.container-derechos{
    color: #fff;
}

.links{
    display: flex;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    margin-top: 20PX;
}

.links a{
    text-decoration: none;
    color: #fff;
}

.links p{
    margin-right: 30px;
    text-decoration: underline;
}

.derechos{
    margin-top: 20px;
}

/*
//pagina dos 2*/

.fila-nosotros{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    font-size: 1.2em;
    line-height: 1.3em;
}

.fila-nosotros p{
    width: 70%;
}

.fila-nosotros li{
    width: 70%;
    margin: 10px 0px;
}

.fila-nosotros-fondo{
    background: linear-gradient(90deg, rgb(8, 93, 150) 0%, rgb(45, 124, 31) 150%);
}

.subtitulo-nosotros{
    font-size: 2em;
    font-weight: 500;
    margin-top: 30px;
    line-height: normal;
    color: #075554;
}

.texto-nosotros{
    margin: 20px 0px;
}

.fila-nosotros-fondo p{
    color: #fff;
}

/*
//pagina tres 3*/

.menu{
    text-align: center;
    position: absolute;
    bottom: 0;
    margin-bottom: 5%;
    width: 100%;
}

.menu li{
    display:inline-block;
    padding: 35px 10px;
    text-align:center;
    height: inherit;
    transition: all .1s;
}

.menu li a{
    text-decoration: none;
    color: #fff;
    font-size: 1.6em;
    font-weight: 500;
}

.subtitulo{
    padding: 30px;
    width: 100%;
    text-align: center;
}

.subtitulo p{
    font-size: 2.3em;
    font-weight: 700;
    letter-spacing: 5px;
}

.fila{
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 72vh;
    overflow: hidden;
}

.fila-angosta{
    height: auto;
}

.item{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
}

/*
//titulo item*/

.container-titulo-descripcion-item{
    min-height: 50px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.container-titulo-descripcion-item p {
    color: #fff;
    font-size: 1.2em;
    position: relative;
    width: 90%;
    text-align: start;
    margin: 0px 30px;
}

.fondo-titulo-descripcion-item{
    background: linear-gradient(90deg, rgb(5, 80, 131) 0%, rgba(59,148,43) 200%);
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 0%;
    width: 103%;
    height: 100%;
}

.container-titulo-descripcion-item-der .fondo-titulo-descripcion-item{
    background: linear-gradient(90deg, rgb(5, 80, 131) -100%, rgba(59,148,43) 100%);
}

.container-titulo-descripcion-item-der{
    justify-content: end;
}

.container-titulo-descripcion-item-der p{
    text-align: end;
}



/*
//informacion item*/

.container-informacion-item{
    margin-top: 10px;
    background: rgb(216, 235, 248);
    display: flex;
    align-items: center;

    flex-direction: row;
    height: 85%;
    width: 100%;
    text-align: justify;
    margin-left: 3%;
    box-shadow: 5px 0 8px -2px #888;
    z-index: 1;
    padding-bottom: 10px;
}

.container-informacion-item-der{
    border-left: 1px solid #075554;
    background: rgb(236, 236, 236);
}

.container-informacion-item.container-informacion-item-der{
    margin-left: 0%;
    margin-right: 0%;
    z-index: 0;
    box-shadow: none;
    overflow: hidden;
    width: 97%;
    left: 0;
}

.mostrador-img{
    background-color: #fff;
    border: 1px solid #075554;
    box-shadow: 0px 0px 10px #075554;
    position: absolute;
    margin: 0% 0%;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mostrador-img img{
    max-width: 100%;
    max-height: 100%;
}

.cerrar-mostrador-img{
    position: absolute;
    top: 3%;
    right: 3%;
    color: #075554;
    font-size: 1.3em;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
}

.ref{
    text-align: center;
    font-weight: 700;
    margin-bottom: 15px;
}

.item-con-logo{
    width: 100%;
    height: 100%;
    background-image: url('/assets/logos/logo-lhdr.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .5;
}

.container-descripcion-item{
    padding-top: 20px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-descripcion-item ul{
    padding: 0;
    padding-right: 10px;
    padding-left: 10px;
}

.container-informacion-item-der .container-descripcion-item ul{
    padding-left: 30px;
}

.container-descripcion-item li{
    margin-top: 5px;
    line-height: 20px;
    padding-left: 25px;
	list-style: none;
	background-image: url("/assets/viñeta.png");
	background-repeat: no-repeat;
	background-position: left 5px;
	background-size: 15px;
}

/*
//imagenes item*/

.container-img-item{
    min-width: 30%;
    max-width: 30%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 10px;
    justify-content: center;
}

.container-img-item div{
    height: 33%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container-img-item div img{
    height: 100%;
    width: 100%;
    object-fit: contain;
    filter: drop-shadow(0px 0px 5px black);
}

.container-img-item.una-sola{
    padding: 0;
}

.solo-dos div{
    height: 50%;
}

.una-sola div{
    width: 100%;
    height: 100%;
    margin: 0;
}

.una-sola div img{
    height: auto;
    min-width: 100%;
    max-height: 100%;
}

.una-sola div .img-item-uno{
    margin: 0;
}

.img-item-uno{
    margin-bottom: 15px;
}

/*
//productos distribucion*/

.fila-prod-distri{
    height: 60vh;
    width: 80%;
    margin-left: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item-prod-distri{
    width: 25%;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    margin: 0px 5px;
    box-shadow: 3px 3px 7px #000;
    transition: all .2s;
    height: 100%;
    text-align: center;
}

.item-prod-distri:hover{
    height: 99%;
}

.container-info-item-prod-distri{
    padding: 10px;
    color: #E5E5BE;
    font-size: 1.2em;
    background-color: #075554;
    height: 30%;
    display: flex;
    flex-direction: column;

}

.ref2{
    position: absolute;
    text-align: center;
    font-size: .8em;
    bottom: 0;
    margin-bottom: 10px;
    width: 100%;
}

.container-img-prod-distri{
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-img-prod-distri img{
    max-width: 100%;
    max-height: 100%;
    height: fit-content;
}

/*
//pagina cuatro 4
//clientes*/

.container-grid-logos-clientes{
    background-color: #c5c5c5;
}

.grid-logos-clientes{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 15px;
    width: 80%;
    margin-left: 10%;
    overflow: hidden;
}

.item-container-logos-clientes{
    width: 100%;
    display: flex;
    align-items: center;
}

.item-container-logos-clientes img{
    width: 100%;
}

.texto-clientes{
    width: 100%;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 60px;
}

.texto-clientes p{
    margin: 0px 0px;
    color: #075554;
    font-size: 2.3em;
    font-weight: 700;
}
/*
//estilos para javascrip*/

.menu-estatico-mostrar{
    position: fixed;
    background: linear-gradient(90deg, rgb(5, 80, 131, .8) 0%, rgba(59,148,43,.8) 100%);
    animation-name: fadeDowm;
    animation-duration: .5s;
    max-height: 50px;
}

.menu-superior li{
    list-style: none;
    display:inline-block;
    padding: 35px 10px;
    text-align:center;
    height: 80px;
    transition: all .1s;
    margin-left: -4px;
}

.menu-superior.menu-estatico-mostrar li{
    padding: 15px 10px;
    height: 50px;
}

@keyframes fadeDowm {
    0% {
        opacity: 0;
        transform: translateY(-80px);
     }
     100% {
        opacity: 1;
        transform: translateY(0);
     }
}

/*
//boton arriba*/

.btn-up{
    position: fixed;
    bottom: 0;
    left: 0;
    margin-left: 3%;
    margin-bottom: 3%;
    font-size: 2em;
    cursor: pointer;
    z-index: 101;
    color: #333;
    display: none;
    visibility: hidden;
}

.btn-up-mostrar{
    display: block;
    visibility: visible;
}

/*
//boton whatsapp*/

.icono-whatsapp{
    position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 3%;
    margin-bottom: 2.5%;
    cursor: pointer;
    z-index: 101;
    height: 10%;
    display: none;
    visibility: hidden;
}

.icono-whatsapp-mostrar{
    display: block;
    visibility: visible;
}

.icono-whatsapp img{
    height: 100%;
}

/*
//modal contacto*/

.contacto-modal{
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: #f3f4f3;
    transition: all .5s;
    z-index: 100;
}

.btn-cerrar-modal{
    height: 30px;
    width: 30px;
    position: absolute;
    top: 5%;
    right: 6%;
    border: solid 2px #075554;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #075554;
    font-weight: 500;
    font-size: 1.5em;
    cursor: pointer;
}

.fondo-modal{
    height: 100%;
}

.container-info-modal-contacto{
    position: absolute;
    height: 100%;
    width: 40%;
    background-color: #075554;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: -100%;
    transition: all .5s;
}

.texto-info-modal-contacto{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #E5E5BE;
    font-size: 1.2em;
    line-height: 2em;
}

.texto-info-modal-contacto h2{
    margin-top: 20px;
}

.iconos-contactanos{
    display: flex;
    margin-bottom: 30px;
}

.iconos-contactanos a{
    margin-top: 10px;
    color: #fff;
    text-decoration: none;
}

.container-form{
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
}

.container-form form{
    width: 80%;
}

.container-form p{
    font-size: 2em;
    color: #075554;
    margin-bottom: 10px;
}

.container-form input, textarea{
    outline: 0;
    border-width: 1px 1px;
    border-color: #075554;
    width: 100%;
    height: 50px;
    padding: 0px 10px;
    margin-top: 20px;
}

.container-form textarea{
    border-color: #075554;
    width: 100%;
    height: 150px;
    padding: 10px 10px;
    margin-top: 20px;
}

.container-form input:focus {
    border-color: green
}

.botones-modal-contacto{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 20px    ;
}

.botones-modal-contacto input{
    margin: 0;
    width: 50%;
}

.botones-modal-contacto a{
    width: 50%;
}

.botones-modal-contacto p{
    padding: 0px 20px;
    margin-top: 15px;
    font-size: 1.3em;
}

#hablanos-whatsapp{
    text-align: center;
    background-image: url("/assets/logos/whatsapp-peq.png");
    background-position: 2%;
    background-repeat: no-repeat;
    background-size: 10%;
    background-color: #00bb2d;
    color: #E5E5BE;
    cursor: pointer;
    min-width: 100%;
}

.version-mobile{
    
}

.menu-mobile{
    display: none;
}

.cerrar-menu-mobile{
    display: none;
}