body{
    font-family: "arial", serif;
    margin: 0 auto !important;
    padding: 0;
    width: 100%;
    height: 100vh;
    max-width: 1000px;
}
.modal_open{
    overflow: hidden;
}

.header{
    padding: 10px;
    background-color: #8bc63e;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;

}
header ul{
    width: 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /*aliniamos iten de este contenedor de forma orizontalme dejando un espacio igual entre todos los elementos*/
    align-content: center;

}
header ul li{
    text-decoration: none;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /*aliniamos iten de este contenedor de forma orizontalme dejando un espacio igual entre todos los elementos*/
    align-content: center;
}

header img{
    object-fit: contain;
    max-width: 32px;
    max-height: 32px;
    display: inline;
}

/*///////////////////////////////////////////////////////////////////////////////////*/
.nav-var   { 
    width: 100%;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content:  space-between; /*aliniamos iten de este contenedor de forma orizontalme dejando un espacio igual entre todos los elementos*/
    align-content: center;
}
.nav-var img {

    max-width: 100px;
    max-height: 50px;
}
.nav-var li {
    padding:0 10%;
    list-style: none;
    border-bottom: 1px solid white;

}


.nav-var a {
    font-size: 21px;
    margin: 0;
    color: #fff;
    text-decoration: none;


}

.menu {
    z-index: 100;
    margin: 0;
    padding: 10px 0px;
    background-color:rgba(51,51,51,0.9);
    position: absolute;
    left: 0;
    top: 120px;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: space-around; 
    align-content: center;
    flex-direction:column-reverse;
    transition-property: transform; 
    transition-duration: 0.5s;
    transform: translateX(-100%);


}
#men:checked~ .menu{
    transform: translateX(0%);
}
.nav-var input {
    display: none;

}
.nav-var label {
    cursor: pointer;
    font-size: 30px;


}

/*///////////////////////////////////////////////////////////////////////////////////*/



.principal{

    display: grid;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(4, auto);
    grid-gap: 29px;
    grid-template-areas:
        "sepa "  
        "tex"
        "selec"
        "panta";

}
.principal-separador {
    color: #fff;
    width: 100%;
    padding: 2px;
    background-color: #8bc63e;
    text-align: center;
    box-shadow: 3px 3px 2px rgba(68, 79, 71,0.3);
    grid-area:sepa; 
}
.principal-separador2{
    color: #fff;
    width: 100%;
    padding: 2px 5%;

    background-color: #8bc63e;
    text-align: left;
    box-shadow: 3px 3px 2px rgba(68, 79, 71,0.3);

}

.principal-selector, .principal-pantalla{
    width: 90%;
    text-align: center;

}

.principal-selector p{
    font-size: 20px;

}
.principal-bien{

    width: 100%;
    grid-area:tex; 
    text-align: center;
    padding: 0 5%;
    font-size: min(5.5vw,35px);
    font-weight: 700;

}
.principal-selector {


    grid-area:selec; 
    min-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; 
    align-content: center;
    padding: 0 10%;
}



.selec-topi-bnt{
    display: none;
}
.cont-icon{

    margin: 5px;
    height: auto;
    width: auto;
    padding: 0;
    display: grid;


    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
        "icon-p"
        "baner-i";
}
.baner-selec{

    border-radius:7px; 
    padding: 3px 10px;
    margin-top: 10px;
    width: auto;
    background-color: #8bc63e;
    color: #fff;
    height: auto;
    grid-area:baner-i;
    display: flex;
    align-content: center;
    justify-content: space-around;

}
.baner-selec p{
    font-size: 20px;
    margin: 0;
}
.icon-selec{
    padding: 0;
    margin: 0;
    grid-area:icon-p;
    display: flex;
    align-content: center;
    justify-content: space-around;
}
.icon-lumi{
    margin: 0;
    font-size: 20px;
    background-size: 100%;
    background-origin: content-box;
    background-repeat: no-repeat;
    display: block;
    width: 90px;
    height: 90px;
    transition-property: transform; 
    transition-duration: 0.5s;
    transform: scale(1); 
}
.icon-lumi-agre{
    margin: 0;
    font-size: 20px;
    background-size: 100%;
    background-origin: content-box;
    background-repeat: no-repeat;
    display: block;
    width: 60px;
    height: 60px;

}
.icon-lumi:hover {

    transform: scale(1.2);
}
.incandecente{
    background-image: url("../fuentes/bom-ima.png");
}
.flourecente{
    background-image: url("../fuentes/de_plafon-fluo.png");
}

.reflector{
    background-image: url("../fuentes/reflec-ima.png");
}
.incandecente-plafon{
    background-image: url("../fuentes/bom-ima.png");
}
.incandecente-aplique{
    background-image: url("../fuentes/de_aplique.png");
}
.incandecente-buey{
    background-image: url("../fuentes/ojo_de_buey.png");
}
.fluo-plafon{
    background-image: url("../fuentes/de_plafon-fluo.png");
}
.fluo-aplique{
    background-image: url("../fuentes/de_aplique.png");
}
.fluo-bala{
    background-image: url("../fuentes/de_bala.png");
}
.fluo-porta{
    background-image: url("../fuentes/portatubos.png");
}
.reflector-1{
    background-image: url("../fuentes/reflec-ima.png");
}
.reflector-2{
    background-image: url("../fuentes/reflec-ima.png");
}
.reflector-3{
    background-image: url("../fuentes/reflec-ima.png");
}
/*///////equivalencias//////////////////////////////////////////*/
.Bombillo_led{
    background-image: url("../fuentes/bombillo_led.png");
}
.docroico{
    background-image: url("../fuentes/dicroico.png");
}
.panel_incustar_4w{
    background-image: url("../fuentes/panel_incrustar_4w.png");
}
.panel_incustar_12w{
    background-image: url("../fuentes/panel_incrustar_12-18.png");
}
.panel_sobreponer{
    background-image: url("../fuentes/panel_sobreponer_12-18.png");
}
.paneles{
    background-image: url("../fuentes/paneles_36w.png");
}
.reflector-led{
    background-image: url("../fuentes/reflector_led.png");
}
.tubo-led{
    background-image: url("../fuentes/tubo_led.png");
}



.principal-pantalla{

    width: 65%;

    height: auto;
    margin: 0 auto;
    border: 1px black solid;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    grid-area:panta; 
}
.pantalla-agregar{
    width: 100%;
    padding-top: 20px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.marco_agrecado{
      margin: 1.5%;
    min-width: 200px;
    height: auto;
   width: auto;
    padding: 0;
    display: grid;
    border: 1px black solid;

   

    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(7, auto);
    grid-gap: 0px 10px;
    grid-template-areas:
        "baner-agre baner-agre baner-agre baner-agre baner-agre baner-agre "  
        "tipo tipo . . . icon-edid "
        "icon-agregado . . . . icon-borrar "
        "icon-agregado . . . . . "
        "icon-agregado icon-cantidad icon-cantidad icon-cantidad icon-cantidad icon-cantidad"
        "icon-agregado icon-vateaje icon-vateaje icon-vateaje icon-vateaje icon-vateaje";

}
.cont-tipo{
    text-align: left;
    margin-top: 10px;
    margin-left: 10px;
    width: 150%;
    padding: 0;
    grid-area:tipo ;  
}
.cont-tipo p{
    margin: 0;

}
.icon-trash-empty{
    font-size: 15px;
    grid-area:icon-edid ;
    margin: 5px;
    transition-property: transform; 
    transition-duration: 0.5s;
}
.icon-trash-empty:hover{
    transform: scale(1.2);
}
.icon-spin3{
    margin: 5px;
    grid-area:icon-borrar; 
    font-size: 15px;
    transition-property: transform; 
    transition-duration: 0.5s;
}
.icon-spin3:hover{
    transform: scale(1.2);
}
.icon-cancel-circle{
    font-size:30px;
    cursor:pointer;
    z-index: 1000;
}
.baner-icon{
    display: flex;
    align-content: center;
    text-align: left;
    background-color: #f7931d;
    color: #fff;
    width: 100%;
    height: 30px;
    padding: 0;
    margin:0;
    grid-area:baner-agre;

}
.baner-icon-incan{
    background-color: #f7931d;

}
.baner-icon-fluo{
    background-color: #f7931d;

}
.baner-icon p{
    display: flex;
    margin:auto 5px;
}
.icon-agregador{
    padding: 0;
    margin-left: 5px;
    margin-bottom: 5px;
    grid-area:icon-agregado;
    display: flex;
    align-content: center;
    justify-content: space-around;
}
.cantidad{ 

    width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 0;
    margin:0;
    grid-area:icon-cantidad;


}
.cantidad p{
    font-size: 15px;
    text-align: left;
    margin: 0;
    margin-bottom: 5px;

}
.vatios{
    margin: 0;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 0;
    margin:0;
    grid-area:icon-vateaje;

}
.vatios p{ 
    font-size: 13px;
    text-align: left;
    margin: 0;
    margin-bottom: 5px;

}
/*/////////////////////////////////////////////menus primero////////////////////////////////////////////////////////////*/
.contenedor-menu{
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    height: 100vh;
    width: 100vw;   
    position: absolute;
    top: 0%;
    left: 0%; 
    display: flex;
    margin: auto;
    border: 2px black solid;
    z-index: 50;
    transition-property: transform; 
    transition-duration: 0.4s;
    transform: scale(0);
    background-color:rgba(47, 71, 49, 0.8);

}
.pop_bienvenida{
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    width: 100vw;
    height: 100vh;   
    position: fixed;
    top: 0;
    left: 0; 
    display: flex;
    border: 2px black solid;

    background-color:rgba(47, 71, 49, 0.8);  
}
.presentado-bien{
    z-index: 50;
    transition-property: transform; 
    transition-duration: 0.4s;
    transform: scale(1);
}
.no-presentado-bien{

    transition-property: transform; 
    transition-duration: 0.4s;
    transform: scale(0);
}
.cont_msj_bienvenida{
    border: 1px black solid;
    width: 70%;
    max-width: 700px;
    min-width: 320px;
    height: auto;
    flex-wrap: wrap;
    display:flex;
    margin: auto;
    justify-content: space-around; 
    align-content: center;
    text-align: center;
    background-color: 	rgb(230, 231, 233);
    padding: 3%;
}
.cont_msj_bienvenida p{
    font-size:  min(5vw,25px);
    margin: 15px 0;
    padding: 0;
}
.cont_msj_bienvenida h2{
    font-size:  min(5vw,30px);
    margin: 15px 0;
    padding: 0;
}
.cont_msj_bienvenida h3{
    font-size: 25px;
    margin: 15px 0;
    padding: 0;
}
#incandecente-bnt:checked~ .m-incan{
    transform: scale(1);
}
#fluo-bnt:checked~ .m-fluo{
    transform: scale(1);
}
#reflex-bnt:checked~ .m-reflex{
    transform: scale(1);
}
#incandecente-bnt-1:checked~ .m-selec-plafon{
    transform: scale(1);
}
#bnt-calcular:checked~ .pantalla-resultado{
    transform: scale(1);
}
.mini-baner{
    color: #fff;
    padding: 10px;
    text-align: center;
    box-shadow: 3px 3px 2px rgba(68, 79, 71,0.3);
    font-size: 20px;
    height:  auto;
    width: 100%;
    background-color: #8bc63e;

    margin: 0;
    margin-bottom: 5%;
}

.menu-contenido{
    border: 1px black solid;
    width: 100%;
    max-width: 450px;
    min-width: 350px;
    height: auto;
    flex-wrap: wrap;
    display:flex;
    margin: auto;
    justify-content: space-around; 
    align-content: center;

    background-color:rgba(255,255,255, 1);
}


.no-selecionado{
    border: none;
    transform: scale(1);
}
.selecionado{
    border: 5px #a3be31 solid;
    transform: scale(1.2);
}

.pantalla-resultado{
    padding: auto;
    width: 100vw;
    overflow-y: scroll;
    height: 100vh; 
     
    position: absolute;
    top: 0%;
    left: 0%; 
    margin: auto;
    border: 2px black solid;
    z-index: 50;
    transition-property: transform; 
    transition-duration: 0.4s;
    transform: scale(0);
    background-color:rgba(47, 71, 49, 0.8);

}
.pantalla-cotizacion{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    width: 100vw;
    overflow-y: scroll;
    height: auto;
    min-height: 100vh;   
    position: absolute;
    top: 0%;
    left: 0%; 
    margin: auto;
    border: 2px black solid;
    z-index: 50;
    transition-property: transform; 
    transition-duration: 0.4s;

    background-color:rgba(47, 71, 49, 0.8);
}
.presentado{
    transform: scale(1);

}
.no-presentado{
    transform: scale(0);
}
.presen-resultado{
    position: absolute;
    top: 0;
    max-width: 600px;
    min-width: 320px;
    height: auto;
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(9, auto);
    grid-template-areas:
        "baner-consu baner-consu"  
        "text_consumo text_recomendacion"
        "consumo_hijos recomendaciones"
        "text-consu text-consu-reco"
        "consumo_total total_recomendaciones" 
        "text-ahorro text-ahorro"
        "ahorro_total ahorro_total"
        "cotizacion cotizacion"
        "nota nota";


}
.text_consumo{
    grid-area:text_consumo;
    width:100%;
    border-right: 1px #4a4848 solid;
    text-align: left;
    font-size: min(5vw,30px);
    font-weight: 400;
    padding-left: 15px;
}
.text_recomendacion{
    grid-area:text_recomendacion;
    width:100%;
    border-left: 1px #4a4848 solid;
    text-align: left;
    font-size: min(5vw,30px);
    font-weight: 400;
    padding-left: 15px;
}
.cont_nota{
    width: 100%;
    text-align: center;
    padding: 0 15px;
    margin-bottom: 80px;
    font-weight: 900;
    grid-area:nota;
}
.conten-tex-consumo .conten-tex-consumo-reco{
    margin: 0 5px;
    width: 100%;
    color: #837366;
}
.conten-tex-consumo{
    grid-area:text-consu;
    border-right: 1px #4a4848 solid;
}
.conten-tex-consumo-reco{
    grid-area:text-consu-reco;
    border-left: 1px #4a4848 solid;
}
.conten-tex-consumo p{
    margin: 0;
    margin-top: 40px;

    font-size: min(5vw,30px);
    font-weight: 400;
}
.conten-tex-consumo-reco p{
    margin: 0;
    margin-top: 40px;
    font-size: min(5vw,30px);
    font-weight: 400;
}
.conten-tex-ahorro{
    grid-area:text-ahorro;

}

.conten-tex-ahorro p{
    margin: 15px;
    font-size: min(5vw,30px);
    font-weight: 400;
}


.botonera, .pantalla-resultado{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
}
.campos{

    background-color: #fff;

    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    width: 100%;
    height:auto;
    margin: auto;
    padding:20px 30%;


}
.campos_editar{
    width: 30%;
    height: auto;

}
.campos_editar label{
    margin-top: 30px;

}
.campos input{

    margin-bottom: 5px;
    margin-top: 5px;
}
.btn-call{
    border: 1px #8bc63e solid;
    padding:15px;
    background-color: #8bc63e;
    color: #fff;
    display: inline-block;
    border-radius: 10px;
    margin: 20px;
    transition-property: transform; 
    transition-duration: 0.4s;
}
.btn-cotizar{
    border: 1px #8bc63e solid;
    padding:10px;
    background-color: #8bc63e;
    color: #fff;
    display: inline-block;
    border-radius: 10px;
    margin: 20px;
    transition-property: transform; 
    transition-duration: 0.4s;
    font-size: 35px;
    font-weight:500;
}
.btn-call:hover {
    border: 1px black solid;
    transform: scale(1.2);
}
.btn-cotizar:hover {
    border: 1px black solid;
    transform: scale(1.2);
}
.carrar_resul{
    position: absolute;
    top: 2%;
    right: 2%;     
}

.baner_consumo, .baner_recomen{
    display: flex;
    font-size: 25px;
    font-weight: 700;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    background-color: #8bc63e;
    color: #fff;
    width: 100%;
    height: 80px;
    grid-area:baner-consu;

}

.cont_hijos,.cont_hijos_reco{
    width: 100%;
    height: auto;
    padding-top: 10%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;

}.cont_hijos_reco{

    grid-area: recomendaciones;
    border-left: 1px #4a4848 solid;

}
.cont_hijos{
    border-right: 1px #4a4848 solid;
    grid-area:consumo_hijos;

}
.totalo, .totalo_reco{
    margin: 0;
    width: 100%;
    max-width: 300px;
    height: 70px;
    color: #000;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    margin-top:1px #4a4848 solid; 
    margin-bottom: 1px #4a4848 solid;
    font-size: 28px;
    font-weight: 400;
}
.totalo{
    background-color: #f7931d;
    grid-area:consumo_total;
    border-top: 1px #4a4848 solid;
    border-right: 1px #4a4848 solid;
}
.totalo_reco{
    border-top: 1px #4a4848 solid;
    border-left: 1px #4a4848 solid;
    background-color: #8bc63e;
    grid-area: total_recomendaciones;
}
.ban_hijo p{
    margin: 3px;
}
.totalo_ahorro{
    margin: auto;
    width: 100%;
    max-width: 300px;
    height: 70px;
    color: #000;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    margin:1px #4a4848 solid; 
    grid-area:ahorro_total;
    font-weight: 400;
    background-color: #00aeef;
    font-size: 28px;
}
.marco_presentacion{
    margin: 1%;
    width: 66.66667%;
    min-width: 170px;
    height: auto;

    padding: 0;
    display: grid;
    border: 1px black solid;

    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(7, auto);
    grid-gap: 0px 10px;
    grid-template-areas:
        "baner-consu baner-consu baner-consu baner-consu baner-consu baner-consu"  
        "tipo_consumo tipo_consumo tipo_consumo tipo_consumo tipo_consumo tipo_consumo"
        "icon-consumo . . . . ."
        "icon-consumo . . . . ."
        "icon-consumo consumo-cantidad consumo-cantidad consumo-cantidad consumo-cantidad consumo-cantidad"
        "icon-consumo consumo-vateaje consumo-vateaje consumo-vateaje consumo-vateaje consumo-vateaje"
        "cont-sup-total cont-sup-total cont-sup-total cont-sup-total cont-sup-total cont-sup-total" ;
}
.ban_hijo{
    display: flex;
    align-content: center;
    text-align: left;
    background-color: #f7931d;
    color: #fff;
    width: 100%;
    height: 30px;
    padding: 0;
    margin:0;
    grid-area:baner-consu;
}
.ban_hijo p{
    display: flex;
    margin:auto 5px;
    font-size: min(4vw,15px);
}
.ban_hijo_reco{
    display: flex;
    align-content: center;
    text-align: left;
    background-color: #1074bc;
    color: #fff;
    width: 100%;
    height: 30px;
    padding: 0;
    margin:0;
    grid-area:baner-consu;
}
.ban_hijo_reco p{
    display: flex;
    margin:auto 5px;
    font-size: min(4vw,15px);
}
.contenedor_clase {
    
    text-align: left;
    margin-top: 10px;
    margin-left: 10px;
    width: 100%;
    padding: 0;
    grid-area:tipo_consumo; 
    font-size: min(4vw,20px);
}
.contenedor_clase select{
    width: 94%;
    font-weight: 700;
    font-size: min(4vw,15px);
}
.contenedor_clase option{
    width: 94%;
    font-weight: 300;
    font-size: min(4vw,15px);
}
.contenedor_clase p{
    margin: 0;
}
.icon_consumo{
    padding: 0;
    margin-left: 5px;
    margin-bottom: 5px;
    grid-area:icon-consumo;
    display: flex;
    align-content: center;
    justify-content: space-around;
}
.conte_canti_costo{ 

    width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 0;
    margin:0;
    grid-area:consumo-cantidad;

}
.conte_canti_costo p{ 
    margin: 0;
    margin-bottom: 5px;
    font-size: min(4vw,15px);
}
.conte_vatio_costo{
    margin: 0;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 0;
    margin:0;
    grid-area:consumo-vateaje;
}
.conte_vatio_costo p{ 
    margin: 0;
    margin-bottom: 5px;
    font-size: min(4vw,15px);
}
.conte_costo_parcial{
    display: flex;
    align-content: center;
    text-align: left;
    background-color: #f7931d;
    color: #fff;
    width: 100%;
    height: 30px;
    padding: 0;
    margin:0;
    grid-area:cont-sup-total;
}
.conte_costo_parcial p{
    display: flex;
    margin:auto 5px;
    font-size: min(4vw,15px);
}
.conte_costo_parcial_reco{
    display: flex;
    align-content: center;
    text-align: left;
    background-color: #8bc63e;
    color: #fff;
    width: 100%;
    height: 30px;
    padding: 0;
    margin:0;
    grid-area:cont-sup-total;
}
.conte_costo_parcial_reco p{
    display: flex;
    margin:auto 5px;
    font-size: min(4vw,15px);
}
.cont_btm{
    grid-area: cotizacion;
    margin-bottom: 10px;

}

.form_contact{
    margin: auto;
    max-width: 500px;
    min-width: 350px;
    height: auto;
    min-height: 550px;
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(5, auto);
    grid-gap: 10px;
    grid-template-areas:
        "titulo"
        "intuccion_datos"
        "nombres"  
        "telefono"
        "correo" 
        "producto"
        "boton"
        "aviso";


}
.inp {
    border: 1px #d1d2d4 solid;
    width: 100%;
    height: 50px;
    margin-left: 0;
    background-color: #d1d2d4;
}
.form_contact label{
    margin-bottom: 5px ;
    margin-left: 0;

}
.instruccion-datos{
    grid-area:intuccion_datos;
    width: 100%;
    font-size: 23px;
    font-weight: 700;
    padding: 2%;
    text-align: center;

}
.aviso_informacion{
    grid-area:aviso;
    width: 100%;
    font-size: 16px;
    font-weight: 200;
    line-height: 0.8;
    padding: 2%;
    margin-bottom: 40px;
}
.titulo-form{
    grid-area: titulo;
    font-size: 25px;
    font-weight: 700;
    width: 100%;
    margin: 0;
}

.nombres{
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:0 10%;
    grid-area: nombres;
    margin-bottom: 20px;
}



.telefono{
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:0 10%;
    grid-area: telefono;
    margin-bottom: 20px;
}

.correo{
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding:0 10%;
    grid-area:correo;
    margin-bottom: 20px;
}

.productos_cotizacion{
    display: none;
    grid-area:producto;
}
.div-btn-cotizacion{
    grid-area:boton;
}
textarea{
    width: 80%;
    max-width: 80%;
    height: auto;
    max-height: 500px;
    min-height: 150px;
}
.err{
    padding: 5px;
    width: 90%;
    margin: 10px auto;
    background-color:rgba(247, 21, 0, 0.3);
    text-align: center;
    height: 40px;
    display: flex;
}
.err p {
    margin: auto;
    padding: 0;
}
.no-error{
    display:none !important;
}
.error-visible{
    display:block;

}
@media screen and (min-width: 992px){
    .menu {
        width: auto;
        height: auto;
        z-index: 0;
        position:static;
        margin: 0;
        padding: 10px 0px;
        color: black;
        background-color: #fff;
        display: inline ;
        transform: translateX(0);



    }
    .nav-var a {
        display: inline ;
        font-size: 13px;
        font-weight: 300;
        margin: 0;
        color: black;
        text-decoration: none;


    }
    .nav-var li {
        display: inline ;
        padding: 0 ;
        margin: 10px;
        border-bottom: 1px solid white;

    }
    .icon-align-justify{
        display: none;
    }
} 

.inhabilitado{
    visibility:hidden;
}
.habilitado{
    visibility:visible;
}