@charset "utf-8";
/* CSS Document */

#shadow #all {
    max-width: 100%;
    background: url("/components/com_altacliente/images/imagen-fondo-alta-cliente.jpg") center center no-repeat;
    background-size: cover;
}

#contentarea #main {
    z-index: 0;
    min-height: 58%;
    margin: 2rem auto;
    padding-bottom: unset;
}

/*GENERALES*********************************************************************************************************GENERALES*/
#contentarea {
    display: flex;
    align-items: center;
}
#succesfully_send {
    position: relative;
    left: 2em;
    top: 34px;
}

#succesfully_send h2 {
    margin-top: 0px;
    margin-bottom: 5px;
    font-size: 32px;
}


#wraper_contact_central {
    display: flex;
    max-width: 1200px;
    margin: auto;
}

#formulario_contacto {
    position: relative;
}

.contenedores {
    display: inline-block;
    padding: 20px 20px;
    width: auto;
}

address {
    font-style: normal;
}

#contenedor_right td {
    line-height: normal;
}
#contenedor_right #formulario_contacto > h3 {
    color: var(--NEUTRAL-GREY-6, #4D4D4D);
    /* MOBILE - HOME PAGE/H2- BOLD */
    font-family: "Museosans_700";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 130% */
    margin-left: 8px;
}


#contenedor_left {
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FFFFFF;
}
#contenedor_left > h2{

    font-family: "Museosans_700";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px; /* 128.571% */
    color: #FFFFFF;
    margin-bottom: 24px;
}
#contenedor_left .benefits__container{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#contenedor_left .benefits__container div{
    display: flex;
    gap: 8px;
    align-items: center;
}
#contenedor_left .benefits__container div > span{
    color: var(--NEUTRAL-WHITE, #FFF);
    /* HOME PAGE/H4/SEMIBOLD */
    font-family: "OpenSans Regular";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

#contenedor_right {
    float: right;
    max-width: 60%;
    background: white;
    padding: 40px;
    border-radius: 19px;
}


tr,
td,
table {
    width: 100%;
    table-layout: fixed;
}

.form_table tbody {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.form_table tbody tr {
    width: 50%;
}

.form_table tbody tr:nth-child(n+8) {
    width: 100%;
}

.form_table tbody tr .button__selector {
    display: block;
    margin-bottom: unset;
}
.form_table tbody tr .button__selector #submit_btn {
    display: flex;
    padding: 1rem 5.875rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.375rem;
    background-color: var(--primary-principal);

    color: var(--White, #FFF);
    text-align: center;
    /* GENERAL/H4/BOLD */
    font-family: "OpenSans Regular";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: unset;
}

.form_table tbody tr .button__selector #submit_btn:hover {
   background-color: var(--primary-variant1);
   color: white !important;
}
#formulario_contacto > h3 {
    margin-top: unset;
}

.card_footer {
    display: flex;
    background-color: #F3F3F3;
    border-radius:  8px;
}

.card_footer>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    gap: 0.5rem;
    border-radius: 8px;
    padding: 1rem;
}

.card_footer>div>span {
    color: var(--NEUTRAL-GREY-5, #707070);
        text-align: center;
        /* HOME PAGE/BODY/BOLD */
        font-family: "OpenSans Regular";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
}

/*COLUMNA IZQUIERDA*********************************************************************************************************GENERALES*/
#formulario_contacto .label__selector {
    margin: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.fade {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#formulario_contacto .label__selector>label {
    position: absolute;
    top: 20px;
    left: 19px;
    display: block;
    width: 100%;
    margin-bottom: 0;
    line-height: 1.5;
    color: #b1b5b2;
    pointer-events: none;
    cursor: text;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .1s ease-in-out;
    max-width: 93%;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}

#formulario_contacto .labelCondition>label {
    font-size: 12px;
    top: 10px;
    transition: all 0.3s ease-in-out;
    z-index: 2;
}

#formulario_contacto .paddingLabels {
    padding: 13px 10px 0 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#titulo_h3_contato {
    color: #a80834;
    font-size: 28px;
    font-weight: bold;
    text-align: left;
}

#formulario_contacto .label__selector .red {
    color: red;
    font-size: 11px;
}

#contenedor_right #formulario_contacto .label__selector .borderRed {
    border: 1px solid red;
}

#contenedor_right #formulario_contacto .label__selector .errorText {
    color: red;
    font-size: 11px;
    display: block;
    padding: 0 0 0 10px;
    box-decoration-break: clone;
}

#contenedor_right #formulario_contacto #politicas .errorText {
    color: red;
    display: block;
    font-size: 11px;
    padding: 5px 0 0 10px;
}

#contenedor_right #formulario_contacto .contentError {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: red;
    font-size: 11px;
    margin-left: 10px;
}

#formulario_contacto .unsetMargin {
    margin: unset;
}

#formulario_contacto .unsetPadding {
    padding: unset;
}

#contenedor_right .select2-container--disabled .select2-selection .select2-selection__rendered,
#contenedor_right #formulario_contacto .label__selector .textInfo {
    color: #BEBEBE;
}

#contenedor_right #formulario_contacto .label__selector .textInfo {
    font-size: 11px;
    padding: 0 0 0 10px;
    box-decoration-break: clone;
}

#contenedor_right .select2-container--disabled .select2-selection .select2-selection__arrow b {
    border-color: #BEBEBE transparent transparent transparent;
}

#contenedor_right .select2-container--disabled .selection .select2-selection {
    border: 1px solid #ECEAEB;
}

#datos_epmpresa_contacto {
    text-align: left;
    color: #9B9B9B;
    font-size: 14px;
    padding: 0;
}

#datos_epmpresa_contacto li {}

#datos_epmpresa_contacto p {
    display: inline-block;
    margin-left: 20px;
}

#datos_epmpresa_contacto a {
    display: inline-block;
    margin: 5px 0px 12px 20px;
}

#datos_epmpresa_contacto address {
    display: inline-block;
}


.iconos_datos_empresa {
    display: inline-block;
    width: 25px;
    height: 22px;
    background-image: url("images/iconos_contacto.png");
    display: inline-block;
}

#ico_casa {
    background-position: 0px, 0;
    background-repeat: no-repeat;
    padding-bottom: 48px;
}

#ico_phone {
    background-position: -25px, 0;
    vertical-align: middle;
}

#ico_fax {
    background-position: -50px, 0;
    vertical-align: middle;
}

#ico_mail {
    background-position: -75px, 0;
    vertical-align: middle;
}

#ico_web {
    background-position: 25px, 0;
    vertical-align: middle;
}


#img_contacto {
    display: table;
    margin: 40px auto 0;
}

#promociones label,
#politicas label {
    max-width: 100%;
}


ul.company_list {
    list-style: none;
}

ul.company_list li {
    margin-bottom: 10px;
}

ul.company_list li::before {
    content: "›";
    /* Insert content that looks like bullets */
    padding-right: 8px;
    color: var(--primary-principal);
    /* Or a color you prefer */
    font-size: 1.5em;
}


/*ICONOS DESCRIPCIONES*/

#contenedor_left h3 {
    display: inline-block;
    font-size: 1.5em;
}

.icon_new_client {
    background-image: url('/templates/visiotech/css/images/new_client_sprite.png');
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 5px;
}

.icon_new_file {
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 5px;
}

.info-icon {
    width: 23px;
    height: 23px;
    background-position: -117px -136px;
}

.cart-icon {
    min-width: 22px;
    height: 23px;
    background-position: -160px -136px;
}

.thumb-up-icon {
    width: 22px;
    height: 22px;
    background-position: -10px -200px;
}

.ribbor-icon {
    width: 21px;
    height: 31px;
    background-position: -212px -10px;
}

.shake-icon {
    width: 36px;
    height: 31px;
    background-position: -151px -74px;
}

.calc-icon {
    width: 31px;
    height: 30px;
    background-position: -75px -73px;
}

.world-icon {
    width: 30px;
    height: 30px;
    background-position: -67px -136px;
}

.disco-icon {
    width: 37px;
    height: 44px;
    background-position: -10px -136px;
}

.alarma-icon {
    width: 45px;
    height: 43px;
    background-position: -10px -73px;
}

.smart-icon {
    width: 49px;
    height: 43px;
    background-position: -82px -10px;
}

.fire-icon {
    background: url("/templates/visiotech/css/images/incendio.svg");
    background-repeat: no-repeat;
    width: 46px;
    height: 46px;
}

.networking-icon {
    background: url("/templates/visiotech/css/images/networking.svg");
    width: 46px;
    height: 46px;
}

.video-intercoms-icon {
    background: url("/templates/visiotech/css/images/videoporteros.svg");
    width: 46px;
    height: 46px;
}

.audiovisuals-icon {
    background: url("/templates/visiotech/css/images/audiovisuales.svg");
    width: 46px;
    height: 46px;
}

.outdoor-icon {
    background: url("/templates/visiotech/css/images/outdoor.svg");
    width: 46px;
    height: 46px;
}

.puerta-icon {
    width: 41px;
    height: 44px;
    background-position: -151px -10px;
}

.camara-icon {
    width: 52px;
    height: 43px;
    background-position: -10px -10px;
}



/* Derecha */

.container_properties {
    border: 1px solid var(--primary-principal);
    border-radius: 10px;
    padding: 5px;
    font-family: "OpenSans Regular";
}

.item-top>div {
    display: inline-block;
}

.number_item {
    color: var(--primary-principal);
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1.2em;
    text-align: center;
}

.text_item {
    color: var(--primary-principal);
    font-weight: bold;
    font-size: 0.9em;
    line-height: 0.7em;
    text-align: center;
}

.description-item {
    color: #808080;
    font-weight: bold;
    font-size: 0.8em;
    line-height: 1.1em;
    margin-top: 9px;
    text-align: center;
    font-family: Arial;
}

#formulario_contacto .select2-container--default .select2-selection--single {
    background-color: #FFF;
    display: flex;
    border: 1px solid #CECECE;
    height: 50px;
    align-items: center;
    padding-left: 2px;
}

#formulario_contacto .labelCondition .select2-container--default .select2-selection--single {
    padding-top: 11px;
}

#formulario_contacto .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px;
}

.description-products {
    background-color: var(--primary-principal);
    border-radius: 5px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-family: Museosans_700;
    font-size: 0.7em;
    line-height: 1.3em;
    margin-top: 15px;
    padding: 5px;
    min-width: 90px;
}


.gama-productos,
.quienes-somos-icons {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-around;

}

.form_table tbody tr #politicas .form__group--checkbox,
.form_table tbody tr #promociones .form__group--checkbox {
    display: flex;

}

.gama-productos>div {
    width: calc(25%);
    margin: 7px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.productsGap {
    gap: 15px;
}

.quienes-somos-icons>div {
    width: calc(25% - 14px);
    margin: 7px;
}

.titleWrapper {
    display: flex;
    align-items: center;
    margin: 1.5em 0;
}

.titleWrapper h3 {
    margin: 0 0 0 10px;

}

.titleWrapper i {
    display: flex;
    align-items: center;
}




/*COLUMNA DERECHA*********************************************************************************************************GENERALES*/

#h3_fomulario_contacto {
    display: none;
}

.celda_formulario {
    width: 100%;
    background-color: #FFF;
    border-radius: 0.21875rem;
    border: 1 px solid #ECEAEA;
    padding: 10px 10px;
    margin-bottom: 2px;
    min-height: 50px;
    color: #555;

}


.celda_formulario:focus {
    color: #0b0b0b;
    background-color: #FFF;
    outline: none;
}

.celda_formulario:blur {
    color: #9B9B9B;
    background-color: #FFF;
    ;
    border: 1px solid #dbdbdb;
}


.celda_formulario_error {
    width: 400px;
    background-color: #FFF;
    border: 1px solid #cecece;
    padding: 10px 10px;
    ;
    margin-bottom: 2px;
}

.celda_formulario_error:focus {
    color: #1A1A1A;
    background-color: #FFF;
    border: 1px solid #C57489;
    outline: none;
}

.celda_formulario_error:blur {
    color: #9B9B9B;
    background-color: #FFF;
    ;
    border: 1px solid #dbdbdb;
}






#observaciones_textarea {
    resize: vertical;
}

#submit_btn {
    background-color: #C5748A;
    color: #FFF !important;
    padding: 17px 0px;
    border: 1px solid #C5748A;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    font: 21px museosans_500, arial;
    border-radius: 3px;
}

#incorrecto {
    color: #E51616;
    margin-left: 5px;
    display: none;
}

#submit_btn:hover {
    color: #A80834 !important;
    background-color: var(--primary-variant1);
    border-color: #A80834;
}

#submit_btn:active {
    color: #A80834;
    background-color: var(--primary-variant1);
    border-color: #A80834;
}


#captcha {}

#captcha_field {
    font-size: 18px;
    height: 30px;
    margin-bottom: 10px;
    padding-left: 10px;
    width: 180px;
    border: 1px solid #cecece;
    color: #a5a5a5;
}

#captcha_field:focus {
    color: #a5a5a5;
}

#captcha_a {}


#select {
    width: 100%;
}


address a:hover {
    color: #C57489;
}

address a:active {
    color: #A80834;
}


/*MENSAJE ENVIADO *********************************************************************************************************GENERALES*/

.mensaje_enviado {}

#enviado {}

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




    #wraper_contact_central {     display: inline-block;
                                  margin: 0 auto;}

    .contenedores {  display: inline-block; padding: 10px 20px; width:auto; max-width:260px;}
    .celda_formulario { width:300px;}


    #datos_epmpresa_contacto {

        font-size: 15px;


    }

    address { font-size: 15px; }

    #ico_casa { padding-bottom:45px;}


    #captcha_field { 
        margin-left: 5px;
        width: 115px;}



    #datos_epmpresa_contacto p { margin-left: 10px; font-size: 15px; }

    #datos_epmpresa_contacto a {margin-left: 10px; font-size: 15px;}

}*/

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

    .contenedores {  display: inline-block; padding: 10px 20px; width:auto; max-width:200px;}



    address { display: inline-block;
              margin-left: 0px;

              width:72%;}


    #contenedor_right { max-width:200px; padding: 0 10px;   }

    .celda_formulario { width: 90%; }
    #select { width:131%;}


    #img_contacto {

        height: 80%;

        width: 80%;
    }


    #captcha_field { 

        width: 90px;}


    #ico_casa {
        padding-bottom: 70px;
    }

}
*/

@media screen and (max-width:1200px) {
    #wraper_contact_central {
        flex-direction: column-reverse;
        align-items: center;
    }
    #contenedor_right {
        max-width: 70%;
    }
    #contenedor_left {
        max-width: 50%;
    }
    #contentarea #main {
        margin: 3rem auto;
    }
    #wraper_contact_central {
        row-gap: 1rem;
    }
}

@media screen and (max-width:768px) {
    .main-card {
        padding: 0px;
    }

    address {
        display: inline-block;
        margin-left: 0px;

    }

    #formulario_contacto .labelCondition>label {
        text-align: left;
        left: 11px;
    }

    #formulario_contacto .labelCondition .select2-container--default .select2-selection--single {
        padding-left: 3px;
    }

    #formulario_contacto .paddingLabels {
        padding: 13px 10px 0 11px;
    }


    #ico_casa {
        padding-bottom: 48px;
    }

    .contenedores {
        display: block;
        padding: 5px 0px;
        width: 100%;
        max-width: 100%;
    }

    .card_footer {
        flex-wrap: wrap;
    }

    #select {
        width: 100%;
    }

    .gama-productos>div {
        width: calc(42%);
    }
    .form_table tbody {
        flex-direction: column;
    }
    .form_table tbody tr {
        width: 100%;
    }
    .celda_formulario {
        width: 100%;
    }

    #img_contacto {
        display: none;
    }
    #contenedor_left {
        max-width: 70%;
    }

    #h3_fomulario_contacto {
        display: block;
        color: #C57489;
        font-size: 30px;
        font-weight: bold;
        padding: 15px 0;
        text-align: left;
    }


    .card_footer>div {
        flex: 1 0 50%;
    }
    #captcha_field {
        margin-right: -25px;
        width: 170px;
    }

    h1 {}

    .gama-productos,
    .quienes-somos-icons {
        justify-content: space-around;
    }

    #submit_btn {
        width: 100%;
    }

    .quienes-somos-icons>div {
        width: 100%;
    }

    .thumb-up-icon {
        min-width: 22px;
        height: 22px;
        display: none;
    }

    #rc-imageselect,
    .g-recaptcha {
        transform: scale(0.85);
        -webkit-transform: scale(0.85);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }

    #formulario_contacto td {
        padding: 8px 0;
    }

    #politicas,
    #promociones {
        text-align: left;
    }
}
@media screen and (max-width:500px) {
    #contenedor_right {
        max-width: 90%;
    }
    #contenedor_left {
        max-width: 85%;
    }
}

@media screen and (max-width:450px) {
    .card_footer>div {
        flex: 1 0 100%;
    }
    #contenedor_left > h2 {
        text-align: center;
    }
    #contenedor_left .benefits__container div {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    #contenedor_left .benefits__container div > span {
        color: var(--NEUTRAL-WHITE, #FFF);
        font-family: "OpenSans Regular";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        flex: 0 0 80%;
    } 
    .form_table tbody tr .button__selector #submit_btn {
        display: flex;
        padding: 1rem 0;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        align-self: stretch;
        border-radius: 0.375rem;
        background-color: var(--primary-principal);
        color: var(--White, #FFF);
        text-align: center;
        font-style: normal;
        line-height: normal;
        text-transform: unset;
    }
}