html, body {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    color: var(--medium);
    background-color:#f5f5f5;
    /*Scroll html*/
    scroll-behavior: smooth;
    scroll-padding-top: 10rem;
    overflow-x: hidden;
}

* {
    box-sizing:border-box;
    margin:0
}

.no-scroll {
    overflow: hidden;
    pointer-events: none;
}

:root {
    --grey-929292: #929292;
    --white1-color: #FFFFFF;
    --blue-50: #E7EEFC;
    --blue-100: #B6CCF7;
    --blue-200: #92B3F3;
    --blue-300: #6190EE;
    --blue-400: #427AEA;
    --blue-500: #1359E5;
    --blue-600: #1151D0;
    --blue-700: #0D3FA3;
    --blue-800: #0A317E;
    --blue-900: #082560;
    --grey-50: #FAFAFA;
    --grey-100: #EFEFEF;
    --grey-200: #E8E8E8;
    --grey-300: #DDDDDD;
    --grey-400: #D6D6D6;
    --grey-500: #CCCCCC;
    --grey-600: #BABABA;
    --grey-700: #919191;
    --grey-800: #707070;
    --grey-900: #565656;
    --darkgray-50: #EFEFEF;
    --darkgray-100: #CCCCCC;
    --darkgray-200: #B4B4B4;
    --darkgray-300: #929292;
    --darkgray-400: #A9A9A9;
    --darkgray-500: #7D7D7D;
    --darkgray-600: #5C5C5C;
    --darkgray-700: #414141;
    --darkgray-800: #333333;
    --darkgray-900: #272727;
    --orange-500: #FF5630;
    --green-500: #00875A;
    --light: #929292;
    --medium: #545454;
    --high: #333333;
    --shadow-sensify1: 2px 2px 16px 2px rgba(92, 92, 92, 0.25);
    --footer-height: 200px;
    --max-width-navbar-footer: 1100px;
    --max-width-navbar-footer-1024:1000px;
    --background-compania-mision: linear-gradient(22deg, rgba(231, 238, 252, 0) -18%, rgba(231, 238, 252, 0) 65.24%, #0D3FA3 100.18%);
    --backgroud-blue-linear-gradient: linear-gradient(90.77deg, #4766A6 2.24%, #2A457D 96.85%);
}

main{
    width:100vw;
    max-width:100vw
}

a{
    color:var(--medium);
    text-decoration:none;
}

a:hover{
    text-decoration: none;
}

textarea:focus, input:focus {
    outline: none;
}

h1,h2,h3,h4,h5,h6{
    margin:0 0 0 0 !important;
}

p{
    margin-bottom:0px;
}

.mobile_display_yes{
    display:none !important;
}

.__qr-contact, .__qr-contact a, .__qr-contact img {
    width: 72px !important;
    /*height: 84px !important;*/
}

.no_padding{
    padding-left:0!important;
    padding-right:0!important;
}

@media only screen and (max-width: 768px) {
    .mobile_display_none {
        display: none !important;
    }
    .mobile_display_yes{
        display:flex !important;
    }

}

/*href*/
/*#n150::before,
#sm300::before {
    display: block;
    content: " ";
    margin-top: -200px;
    height: 200px;
    visibility: hidden;
    pointer-events: none;
}*/

/*Navbar*/

.navbar {
    width: 100%;
    /*background-color: var(--grey-100);*/
    background-color:#f5f5f5;
    display: flex;
    /*box-shadow: var(--shadow-sensify1);*/
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    /*border-bottom:1px solid var(--grey-300);*/
    padding: 0;
    /*height: 127px;*/
    width: -webkit-fill-available;
    max-width: 100vw;
}

    .navbar .nav {
        gap: 16px;
        display: flex;
        align-items: center;
        width: min-content;
        flex-wrap: nowrap;
        justify-content: space-around;
    }

    .navbar .navbar_inner {
        padding: 16px 0 16px 0;
        max-width: var(--max-width-navbar-footer);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        align-content: center;
        width: -webkit-fill-available;
    }


.navbar_elements .nav .dropdown-menu.show {
    box-shadow: var(--shadow-sensify1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 0px;
    gap: 4px;
    box-shadow: 2px 2px 16px 2px rgba(92, 92, 92, 0.25);
    background: var(--grey-50);
    border-radius: 4px;
    min-width: 200px
}

    .navbar_elements .nav .dropdown-menu.show .btn {
        width: 100%;
        font-size: 1.6rem;
        font-weight: 300;
        padding-left: 24px;
        padding-right:24px;
    }

        .navbar_elements .nav .dropdown-menu.show .btn:hover,
        .navbar_elements .nav .dropdown-menu.show .btn:active,
        .navbar_elements .nav .dropdown-menu.show .btn:focus,
        .navbar_elements .nav .dropdown-menu.show .btn_ghost:hover,
        .navbar_elements .nav .dropdown-menu.show .btn_ghost:active,
        .navbar_elements .nav .dropdown-menu.show .btn_ghost:focus {
            background-color: transparent !important;
            border: 1px solid transparent !important;
            outline: 0 !important
        }

.navbar_elements {
    justify-content: center;
}

.logo_container, .footer_logo_container {
    display: flex;
    flex-direction: row;
}

    .logo_container a, .footer_logo_container a {
        display: flex;
        height: 40px;
        width: 131px;
    }

    .logo_container a img, .footer_logo_container a img{
        display: flex;
        height: 40px;
        width: 131px;
    }


    .footer_logo_container img {
        height: 40px;
        width: 131px;
        filter: invert(34%) sepia(0%) saturate(895%) hue-rotate(151deg) brightness(101%) contrast(94%);
    }

@media (max-width:991px) {

    .navbar {
        /* height: 127px; */
        min-height:unset
    }
        .navbar .navbar_inner {
            padding: 32px 0 16px 0;
            padding-left: 20px;
            padding-right: 20px;
            max-width: 100vw;
            width: -webkit-fill-available;
            flex-direction: column;
        }
    .navbar_elements {
        width:100%;
    }



    .navbar .nav {
        align-items: flex-start;
    }
}

@media (max-width:991px) and (min-width:768px){
    .navbar_inner > button{
        display:none;
    }

    .logo_container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: -webkit-fill-available;
        width: 100%;
    }

    .logo_container .mobile_display_yes {
        display: block !important;
        width:40px;
    }

    .navbar_elements .nav .dropdown-menu.show {
        padding: 0;
        box-shadow: none;
        background-color: transparent;
        border: 0px solid transparent;
    }
}

.dropdown-menu .btn:hover {
    color: #0056b3 !important;
}

.lang_select {
    padding-right: 0.5rem !important
}

@media (max-width:768px) {

}


@media only screen and (max-width: 768px) {
        .mobile_display_none {
        display: none;
        }

    .navbar {
        position: fixed;
        width: -webkit-fill-available;
        width: -moz-available;
        top: 0;
        padding: 16px;
        max-height: unset;
        min-height: 70px;
        height: fit-content;
    }

        .navbar .navbar_inner {
            padding:unset;
            max-width: var(--max-width-navbar-footer);
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            align-content: center;
        }

        .navbar .nav {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            align-content: flex-start;
            justify-content: flex-start;
            padding: 16px 0;
        }

    #navbarNavDropdown.navbar_elements {
        width: 100%;
    }

    .logo_container, .footer_logo_container {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
    }


    .logo_container .mobile_display_yes{
        width:35px;
    }

    .navbar_elements .nav .dropdown-menu.show {
        padding: 16px;
        box-shadow: none;
        background-color:transparent;
        border:0px solid transparent;
    }

    .navbar .nav .acceso_cliente_btn {
        margin-left: unset;
    }


    /*.nav-item {
        padding-left: 4rem;
    }*/

    .nav-item > .btn{
        
    }

    .dropdown-menu .btn{
        margin-left:10px;
    }

        .navbar_inner .logo_container > .mobile_display_yes{
            height:35px;
            width:35px;
        }

        .navbar_elements .nav .dropdown .btn {
            padding-left: unset !important
        }

            .navbar_elements .nav .dropdown .btn.lang_select {
                padding-left: 24px !important
            }

    .dropdown .btn.regular.icon_right {
        padding: 12px 23px 12px 23px !important;
    }

    .footer_logo_container {
        justify-content: flex-start !important
    }

}


.content {
    /*padding-bottom:var(--footer-height);*/
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    grid-gap: 200px;
    padding-top: 127px;
    overflow-x: hidden;
}

@media (max-width:768px){
    .content {
        padding-top: 100px;

    }
}

.footer {
    background-color:transparent;
    display: flex;
    flex-direction: row;
    /*flex-wrap: nowrap;*/
    width: 100%;
    bottom: 0;
    width: 100%;
    /*height: var(--footer-height);*/
    align-items: center;
    justify-content: center;
}

    .footer .footer_inner {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
        justify-content: center;
        padding: 64px 0 16px 0;
        max-width: var(--max-width-navbar-footer);
    }

        .footer .footer_inner > div:last-of-type {
            text-align: center;
            display: flex;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

    .footer .c_sensify {
        text-align: center;
        justify-content: center;
        align-items: center;
        align-content: center;
        display: flex;
    }       

        .footer .footer_inner .footer_content {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-content: center;
            align-items: flex-start;
            gap: 10px;
            justify-content: space-between;
        }

    .footer .footer_inner .footer_contact {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
        align-items: flex-start;
    }

        .footer .footer_inner .footer_contact > div {
            /* gap: 20px; */
            max-width: 450px;
            height: min-content;
            flex:100%;
        }

            .footer .footer_inner .footer_contact > body_2 {
            }

        .footer .footer_inner .footer_contact .footer_network_content {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 10px;
        }

            .footer .footer_inner .footer_contact .footer_network_content img,
            .footer .footer_inner .footer_contact .footer_network_content a {
                height: 25px;
                width: 25px;
                display: flex;
            }
            .footer .footer_inner .footer_contact .footer_network_content a:hover {
                cursor:pointer;
            }     

    .footer .footer_navigation {
        display: flex;
        flex-direction: row !important;
        grid-gap: 64px;
        flex-wrap: nowrap;
        margin-left: auto;
    }

        .footer .footer_navigation div {
            gap: 2px !important;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: flex-start;
        }

        .footer .footer_navigation div ._bold:not(:first-child),
        .footer .footer_navigation div span:not(:first-child) {
            margin-top: 4px;
        }
        .footer .footer_navigation a:hover,
        .footer .footer_navigation span:hover {
            cursor:pointer;
        }

            .footer .footer_navigation a._bold, 
            .footer .footer_navigation span._bold {
                font-weight:400
            }

                .footer .footer_navigation a._bold.ingreso_cliente {
                    color: var(--blue-500);
                }


                @media (max-width:768px){
                    .footer .footer_inner .footer_content{
                        grid-gap:32px;
                    }

                    .footer .footer_inner {
                        text-align: center;
                        padding-top: 32px;
                    }

                    .footer_contact {
                        gap: 20px!important;
                    }

                    .footer_contact > p {
                        width: 100%;
                    }

                    .footer_network_content {
                        margin: auto;
                        gap: 16px !important;
                    }

                        .footer_network_content a,
                        .footer_network_content img {
                            height: 30px !important;
                            width: 30px !important;
                        }

                    .footer .footer_navigation div {
                        gap:4px !important;
                        align-items: center;
                    }

                    .footer .footer_navigation {

                        justify-content:center;
                    }



                    .__qr-contact {
                        margin:auto;
                    }

                    .footer .body_2 {
                        font-size: 1.6rem;
                        line-height: 24px;
                    }
                }

/*Content general*/

.m-w {
    max-width: var(--max-width-navbar-footer);
    margin: 0 auto;
    width: 100%;
    width: -webkit-fill-available;
}

@media (max-width:1200px) {
    .m-w {
        max-width: var(--max-width-navbar-footer-1024);
        width: -webkit-fill-available;
    }

    #casos_de_exito .col_content {
        align-items: center;
    }

    #casos_de_exito .card_contenedor {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-gap: 16px;
    }
}

.container{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
}

.row{
    height:100%;
}

.col_content{
    display:flex;
    flex-direction:column;
    gap:8px;
    height:100%;
    justify-content:center;
}

@media (max-width:768px){
    .col_content {
        text-align: center;
        padding: 0 32px;
        gap: 32px;
    }

    #home .col_content {
        padding: 0 16px;
    }

    #home .generic_soluciones .col_content {
        padding: 0 16px;
    }

    #home section:first-of-type .image_container{
        flex-wrap:wrap;
    }
}

.col_content.vertical_center{
    margin-top:auto;
    margin-bottom:auto;
}

    .col_content.top {
        justify-content: flex-start !important;
    }

    .col_content.m_top {
        margin-top:28px;
    }

.content_width_350 {
    max-width: 350px;
}

.content_width_400 {
    max-width: 400px;
}



.content_width_450{
    max-width:450px;
}

@media (max-width:768px) {
    .content_width_400 {
        max-width: unset;
    }

    .content_width_450 {
        max-width: unset;
    }

}

.content_width_550 {
    max-width: 550px;
}

.content_min_height_300 {
    min-height: 300px;
}

.content_height_300 {
    height: 300px;
    padding: 50px 0 50px 0;
}

.content_min_height_600{
    min-height:600px;
}

.content_height_600{
    height:600px;
    padding:50px 0 50px 0;
    
}
@media (max-width:768px){
    .content_height_600 {
         height: unset; 
         padding: unset; 
    }

    .content_min_height_300 {
        min-height: unset;
    }

    .content_height_300 {
        height: unset;
        padding: unset;
    }
}

.text_center{
    text-align:center
}
/*Componentes*/

.text_color_light{
    color:var(--light) !important;
}

.text_color_black {
    color: var(--high) !important;
}

.text_white{
    color:var(--grey-50) !important;
}

.text_bold{
    font-weight:700;
}

.text_light{
    font-weight:300;
}

.text_regular{
    font-weight:400;
}

.header_1{
    font-size:5.6rem;
    line-height:80px;
}

.header_2{
    font-size:4.8rem;
    line-height:64px;
}

.header_3 {
    font-size: 4rem;
    line-height: 56px;
}

.header_4{
    font-size:3.6rem;
    line-height:48px
}

.header_5{
    font-size:2.8rem;
    line-height:36px;
}

.body_1, .header_4_interfaz{
    font-size:2rem;
    line-height:28px;
}

.body_2{
    font-size:1.6rem;
    line-height:24px;
}

    .body_2 > * {
        font-size: inherit;
        line-height: inherit;
    }

.interfaz_body_3{
    font-size:1.2rem;
    line-height:16px;
}

@media (max-width:768px) {
    .header_1 {
        font-size: 4.2rem;
        line-height: 54px;
    }
    .header_2 {
        font-size: 3.6rem;
        line-height: 48px;
    }

    .header_3 {
        font-size: 3rem;
        line-height: 42px;
    }


    .header_4{
        font-size:2.4rem;
        line-height:36px;
    }

    .header_5{
        font-size:1.8rem;
        line-height:30px;
    }
    .body_1{
        font-size:1.6rem;
        line-height:24px;

    }
    .body_2{
        font-size:1.2rem;
        line-height:18px;
    }
}

#funcionalidades_section, .funcionalidades_section {
    display: flex;
    flex-direction: column;
    width: -webkit-fill-available;
    margin: 100px 0 ;
}

    #funcionalidades_section h4, .funcionalidades_section  h4{
        text-align: center;
    }

    #funcionalidades_section .row, .funcionalidades_section .row {
        width: 100%;
        width: -moz-available; /* WebKit-based browsers will ignore this. */
        width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
        width: fill-available;
    }

    #funcionalidades_section .chebron_divider{
        margin:24px 0 60px 0;
    }

    #funcionalidades_section .chebron_divider i {
        padding:8px;
        border-radius:8px;
        border:1px solid transparent;

    }

        #funcionalidades_section .chebron_divider i:hover {
            background-color:var(--grey-50);
        }

@media (max-width:768px) {
    #funcionalidades_section, .funcionalidades_section {
        margin: 0;
        margin-top: 20px;
        margin-bottom: 0 !important;
    }

        #funcionalidades_section .chebron_divider {
            margin: 24px 0;
        }

        #funcionalidades_section .row, .funcionalidades_section .row {
            gap: 40px;
        }

            #funcionalidades_section .row > div div:first-of-type,
            .funcionalidades_section .row > div div:first-of-type {
                width: 100%;
                margin-right: 0;
                margin-left: 0;
            }

                #funcionalidades_section .row > div div:first-of-type img,
                .funcionalidades_section .row > div:first-of-type img {
                    width: 100%;
                    height: auto;
                    /*aspect-ratio: 215/152*/
                }
}

/*Tabs with text*/

#nav-tab {
    justify-content: center;
    border-bottom:unset;
    gap:4px;
}

#nav-tab a{
    border-bottom:2px solid var(--grey-500);
    background-color:transparent;

}

    #nav-tab a:hover {
        color:var(--medium);
        background-color:var(--grey-50); 
        background-color:transparent;
        border-color: transparent;
        border-bottom: 2px solid var(--grey-500);
    }

    #nav-tab a.active{
        border:unset;
        border-bottom: 2px solid var(--blue-500);
        font-weight:700;
    }

#nav-tabContent {
    padding: 75px 0 40px 0px;
}

    #nav-tabContent .left_col {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        min-height: 600px;
        display: flex;
        padding-right: 0;
        padding-left:0;
    }

        #nav-tabContent .left_col > div {
            width: 100%;
            background-color: var(--grey-100);
            display: flex;
            align-content: flex-end;
            justify-content: flex-end;
            flex-wrap: nowrap;
            flex-direction: row;
            max-height: 661px;
            margin-right:62px;
        }

        #nav-tabContent .left_col img {
            height: 100%;
            /* width: 464px; */
            margin-left: auto;
            border-radius: 4px;
            border-top-right-radius: inherit;
            border-bottom-right-radius: inherit;
            /* aspect-ratio: 464/523; */
        }

@media (max-width:1200px) {


    #nav-tabContent .left_col img {
        width: 400px;
        aspect-ratio: 400/523;
    }
}

@media (max-width:768px){
    #nav-tabContent {
        padding: 20px 0;
    }

    #sm300-descripcion .btn, #n150-descripcion .btn {
        margin:0 auto;
        width:80%;
        justify-content:center;
            
    }

    #nav-tabContent .tabContent_btnContainer {
        margin-bottom: 0!important;
        margin-top:40px !important;
        
    }
        #nav-tabContent .tabContent_btnContainer .btn {
            width: 80%;
            margin: 0 auto;
            justify-content: center;
            margin-top: 24px;
        }
}

    #nav-tabContent .right_col {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        padding-right: 0;
    }

        #nav-tabContent .right_col > div  > div{
            display:flex;
            flex-direction:row;
            flex-wrap:nowrap;
        }

            #nav-tabContent .right_col > div > div .btn {
                margin-top:0;
            }

/*#sm300-descripcion .btn, #n150-descripcion .btn {
    margin-left: auto;
}*/

#nav-tabContent .right_col > div {
    padding-top:24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: 590px;
}


@media (max-width:768px){
    #nav-tabContent .right_col > div {

        max-width: unset;
    }
}
                #nav-tabContent .right_col > div  > div:nth-of-type(1){
                    display:flex;
                    flex-direction:column;
                }

#nav-tabContent .right_col > div > div:nth-of-type(1) ul {
padding-bottom:2rem;
}

                #nav-tabContent .right_col > div > div:nth-of-type(1) > span {

                }

#nav-tabContent .tabContent_btnContainer {
    margin-bottom: 50%;
    margin-top: auto;
}

#producto #nav-tabContent .productoDescripcion {
    gap: 40px
}

    #producto #nav-tabContent .productoDescripcion > div:nth-of-type(1) {
        gap: 24px;
    }

    /*#producto #nav-tabContent .productoDescripcion > div:nth-of-type(2) {
margin-top:auto    }*/

#producto #nav-tabContent .productoGeneral > div:nth-of-type(1) {
padding-top:3rem;
}

    #producto #nav-tabContent .productoGeneral > div:nth-of-type(1) > div {
        padding: 15px 10px 15px 0;
        border-bottom: 1px solid var(--light);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
    }
        
    #producto #nav-tabContent .productoGeneral > div:nth-of-type(1) > div span:first-of-type {
            flex: 55%;
            font-size:16px;
            font-weight:bold;
        }
        
    #producto #nav-tabContent .productoGeneral > div:nth-of-type(1) > div span:last-of-type {
            flex: 45%;
            /*font-size:2rem;*/
            color:var(--light);
        }
    @media(max-width:768px){

        #nav-tabContent .right_col {

             /*padding-right: 15px;*/ 
        }

        #producto #nav-tabContent .productoGeneral > div:nth-of-type(1) > div {
            padding: 15px 10px 15px 15px;
            gap: 8px;
        }

        #nav-tabContent .right_col > div {
            padding: 8px 22px;
        }
        #producto #nav-tabContent .productoGeneral > div:nth-of-type(1) > div span:first-of-type {
            flex: 40%;

        }
    }

#producto #nav-tabContent .productoCompatibilidad  {
    gap:40px
}

#producto #nav-tabContent .productoCompatibilidad > div:nth-of-type(1) {
}

    #producto #nav-tabContent .productoCompatibilidad > div:nth-of-type(1) > div {
        padding: 10px 0 10px 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: center;
        grid-gap: 24px;
    }

    #producto #nav-tabContent .productoCompatibilidad > div:nth-of-type(1) img {
        flex: 10%;
        width: 80px;
        height: 80px;
    }

    #producto #nav-tabContent .productoCompatibilidad > div:nth-of-type(1) > div span:last-of-type {
        flex: 90%;
    }

#producto #nav-tabContent .productoDocumentacion {
    gap:34px;

}

#producto #nav-tabContent .productoDocumentacion > div:nth-of-type(1) > div {
    padding: 10px 0 10px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    gap: 19px;
}

#producto #nav-tabContent .productoDocumentacion > div:nth-of-type(1) > div a {
margin-left:unset;
}

@media(max-width:768px){
    #nav-tab a {
        width:100%;
        text-align:center;
        margin-left:8px;
        margin-right:8px;
    }
}

/*Divider*/
.chebron_divider {
    width: 100%;
    padding: 4px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.chebron_divider i:hover{
    cursor:pointer;
}

    .chebron_divider > i {
        animation: chebron_jump 20s infinite ease-in-out;
    }

    .chebron_divider > i:hover {
        border:0px solid transparent;
    }

@keyframes chebron_jump{

    0%{
        transform:translateY(0px);
    }
    3% {
        transform: translateY(4px);
    }
    6% {
        transform: translateY(0px);
    }
    9%{

        transform: translateY(4px);
    }

    12% {
        transform: translateY(0px);
    }
    
    15%,100% {
        transform: translateY(0);
    }

}

.chebron_divider.white > i{
    color:var(--grey-50);
}

#casos_de_exito{
    height:400px;
    padding:32px 0;
}

    #casos_de_exito .card_contenedor {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-gap: 64px;
    }

#casos_de_exito .col_content {
    align-items: flex-start;
    gap: 32px;
}

@media (max-width:1024px) and (min-width:601px){

    #casos_de_exito .col_content {
        align-items: center;
    }

    #casos_de_exito .card_contenedor {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-gap: 16px;
    }

    #nav-tabContent .left_col img {
        width: 400px;
        aspect-ratio: 477/180;
    }

    #nav-tabContent .right_col {
        padding-right:5vw;
    }
}

@media (max-width: 768px)  {

    #casos_de_exito {
        height: unset;
        padding: unset;
    }
        #casos_de_exito .card_contenedor {
            flex-wrap: wrap;
            padding-bottom: 32px;
        }
}

/*Buttons*/
.btn {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    border-radius: 4px;
    font-weight: bold;
    align-items: center;
    font-size: 1.4rem;
    width: max-content;
}

    .btn i {
        display: flex;
        height: 20px;
        width: 20px;
        font-size: 20px;
        color: inherit;
        text-align: center;
        vertical-align: top;
        flex-direction: row;
        align-content: center;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

.btn.regular{
    padding:12px 24px;
}

    .btn.regular.icon_left {
        padding: 12px 32px 12px 24px;
    }

    .btn.regular.icon_right {
        padding: 12px 23px 12px 32px;
    }

.btn.small {
    padding: 8px 16px;
}

.btn_primary {
    background-color: var(--blue-400);
    border: 1px solid var(--blue-500);
    color:var(--grey-50);
}

    .btn_primary:hover {
        color: var(--grey-50);
        background-color: var(--blue-500);
        border: 1px solid var(--blue-600);
    }

    .btn_primary:active, .btn_primary:focus {
        background-color: var(--blue-700);
        border: 1px solid var(--blue-800);
    }

.btn_primary:disabled {
    background-color: var(--grey-700) !important;
    border: 1px solid var(--grey-800) !important;
    pointer-events:none;
}

.btn_ghost {
    background-color: transparent;
    border: 1px solid transparent;
}

    .btn_ghost:hover {
        background-color: var(--darkgray-50);
        border: 1px solid var(--grey-200);
    }

    .btn_ghost:focus, .btn_ghost:active {
        color: var(--blue-700) !important;
        background-color: var(--darkgray-50);
        border: 1px solid var(--grey-200);
    }


/*Input*/

.input_class {
    border: 1px solid var(--grey-50);
    border-color: var(--grey-700);
    border-radius: 4px;
    color: var(--medium);
    font-size: 1.6rem;
    padding: 16px 24px;
    max-height: 46px;
    height:auto !important;
}

select.input_class {
    padding: 12px 24px;
    height: auto !important;
    background-position-x:right 1em center;
    background-size:2rem
}

select.input_class::after {
    content:'o';
    position:absolute;
    right:10px;
    top:10px;

}

.input_class:hover{
    background-color:var(--grey-100);
    cursor:pointer;
}

.input_class:focus{
    border-color:var(--blue-700);
}

    .input_class:active {
        border-color: var(--blue-500);
    }

.input_class.alert {
    border-color: var(--orange-500);
    margin-bottom: 0;
}
.input_class::placeholder{
    color:var(--light);
}
/*Icons*/
i.small {
    font-size: 16px;
    font-weight: 300;
    height: 16px;
    width: 16px;
}

i.regular{
    font-size:20px;
    font-weight:400;
    height:20px;
    width:20px;
}

i.large{
    font-size:24px;
    font-weight:400;
    height:24px;
    width:24px;
}

i.xlarge{
    font-size:40px;
    font-weight:500;
    height:40px;
    width:40px;
}

i.xxlarge{
    font-size:48px;
    font-weight:500;
    height:48px;
    width:48px;
}

/*Cards*/
.card_container {
    padding: 8px;
    padding-bottom: 16px;
    border-radius: 4px;
    box-shadow: var(--shadow-sensify1);
    display: flex;
    gap: 16px;
    border: 1px solid var(--grey-300);
    background-color: var(--white1-color);
}

.card_content_vertical{
    flex-direction:column
}

.card_content_horizontal {
    flex-direction: row
}

.person_card {
    max-width: 320px;
    padding: 20px;
    /* height: 100% !important; */
    justify-content: space-between;
    gap: 28px;

}

    .person_card div:last-of-type {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 13px;
        align-items: center;
    }

    .person_card div:last-of-type div {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
    }

        .person_card div:last-of-type div > span {
            width:100%;
            color:var(--light);
            
        }

    .person_card div:last-of-type img{
        height:52px !important;
        width:52px !important;
        border-radius:8px !important;
        aspect-ratio:1/1;
    }

    @media (max-width:768px){
        .person_card div:last-of-type div {
            /*display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 4px;*/
            text-align:left
        }

        .person_card {
            max-width: unset;
            width:100%;
            text-align:left
        }

        /*.person_card .body_2 {
            font-size:1.6rem;
            line-height:24px;
        }*/

    }

.exito_card{
    flex:33%;
    padding:16px;
}

.exito_card img{
    height:58px;
    width:58px;
}

    .exito_card div {
        flex:65%;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        grid-gap:16px;
    }

    .exito_card div .btn {
        margin-left:auto;
    }


    @media (max-width:768px){
        .exito_card {
            flex: 100%;
            text-align: left;
        }
    }


.fabricante_card {
    flex: 49%;
}

    .fabricante_card img {
        width: 100%;
        height: 180px;
        border-radius: 4px;
        aspect-ratio: 556 / 356
    }
    .fabricante_card div {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .fabricante_card em {
        color:var(--blue-300);
        font-style:normal;
    }

    @media (max-width:600px){
        .fabricante_card img {
            width: 100%;
            height: auto;
             aspect-ratio: auto ; 
        }
    }
/*colors*/
.text_blue_700 {
    color: var(--blue-700);
}

.text_white{
    color:var(--white1-color);
}
/*Views*/
/*Home*/

#home .first_section {
    padding-top: 50px;
    min-height: 855px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-bottom: 160px;
}

#home .first_section .btn {
    margin-top:20px;
}

    #home .first_section .col_content {
        margin-right: 50px;
    }

.home_icon_container{
    padding-top:20px;
    padding-bottom:20px;
    display:flex;
    flex-direction:row;
    gap:20px;
    color:var(--blue-700);
}

.home_icon_container span{
height:auto;
display:flex;
flex-wrap:nowrap;
grid-gap:5px;
justify-content:center;
align-items:center
}

#producto .first_section {
    padding-top: 72px;
    min-height: 701px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    /* padding-bottom: 160px; */
    gap: 64px;
}

    #home .first_section .chebron_divider {
        margin-bottom: 160px;
    }

    #producto .first_section .chebron_divider{
        margin-bottom:70px
    }

@media  (max-width: 1440px) {

    #home .first_section {
        min-height: unset;
    }

    #producto .first_section {
        min-height: unset;
    }

        #producto .first_section .chebron_divider {
            margin-bottom: unset;
        }
}

#home .clients {
    padding: 100px 0 80px 0;
}

#home .clients .carousel{
    margin-top:40px
}

#home .home_atributes_container{
    padding-top:200px;
    padding-bottom:135px;
}

#home_soluciones, #home_fabricantes, .caso_de_exito {
    height: 70vh;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

}

#home .home_atributes_container .col_content {
    padding-top: 40px;
    max-width:520px
}

    #home_soluciones .chebron_divider {
        padding-top:50px;
    }

#home_soluciones {
    background-image: url('../../images/node_vc_img/banner_web.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#home_soluciones .col{
    padding-top:12rem ;
}

@media (max-width:768px){
    #home_soluciones{
        height:unset;
    }

    #home .first_section .col_content {
        margin-right: unset;
    }

    .home_icon_container {

        flex-direction: column;
    }

    #home .first_section .btn {
        width: 80%;
        justify-content: center;
        margin: auto;
        margin-top: 20px;
    }

        #home_soluciones .col {
            padding: 70px 0;
            text-align: center;
        }

        #home_soluciones .chebron_divider {
            padding-top: 25px;
        }

    #home .home_atributes_container .col_content {
         max-width: unset; 
    }
}

#home_fabricantes, .caso_de_exito {
    background-color: var(--grey-100);
    height: auto;
}

    #home_fabricantes .row, .caso_de_exito  .row{
        padding: 80px 0 130px 0;
    }

    #home_fabricantes .col, .caso_de_exito .col {
        display: flex;
        flex-direction: column;
        align-content: center;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    #home_fabricantes .card_contenedor, .caso_de_exito .card_contenedor {
        display: flex;
        flex-direction: row;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
        /* padding: 0 32px; */
        padding-top: 12px;
    }

    #home_fabricantes .btn, .caso_de_exito .btn {
        margin-top: 40px;
    }
@media (max-width:768px) {


    #home_fabricantes .btn, .caso_de_exito .btn {
        margin-top: 25px;
    }
}


        .home_atributes {
        }

.home_atributes .row{
    padding:25px 0;

}

    .home_atributes .row:first-of-type {
        padding-bottom:100px;
    }

            .home_atributes .col {
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: center;

            }


            .home_atributes .image_container img {
                height: auto;
                /*width: 90%;*/
                /*aspect-ratio: 535/374;*/
                margin: auto;
            }

@media only screen and (max-width: 768px) {
    #home .first_section, #producto .first_section {
        padding-top: 0;
    }

    #home_fabricantes .card_contenedor, .caso_de_exito .card_contenedor {

         padding: 0 ; 
    }

}

@media (max-width:768px){
    .home_atributes .image_container img {

        width: 100%;
        height: auto;
    }

    .generic_soluciones .btn_contianer {
        padding-top: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .generic_soluciones .btn_contianer .btn{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .generic_soluciones section:nth-of-type(2) {
        text-align: center;
        padding-top: 64px;
    }

    #home .home_atributes_container {
        padding-top: 25px;
        padding-bottom: 10px;
    }

    #home .home_atributes_container img{
        padding-top: 16px;
    }

    .home_atributes .row:first-of-type {
        padding-bottom: 0;
    }

    .home_atributes .row:last-of-type {
        padding-top:60px
    }

    #home_fabricantes .row, .caso_de_exito .row {
        padding: 50px 0px 130px 0px;
    }

    #home_fabricantes .col, .caso_de_exito .col {

        gap: 32px;
    }

    #home_fabricantes .card_contenedor, .caso_de_exito .card_contenedor {

        gap: 32px;

    }
}


    /*Soluciones*/
    #soluciones section, .generic_soluciones section {
        /*min-height: 45vh*/
    }

    .generic_soluciones .container .first_section {
        min-height: 60vh;
        padding-top:113px
    }

        .generic_soluciones .container .first_section .btn_container-fluid {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            grid-gap: 16px
        }


#producto section:first-of-type .image_container,
#home section:first-of-type .image_container,
#soluciones section:first-of-type .image_container,
.generic_soluciones section:first-of-type .image_container {
    height: 100%;
    width: 100%;
    overflow: visible;
    justify-items: center;
    display: flex;
    align-items: center;
}


        #producto section:first-of-type .image_container img,
        .generic_soluciones section:first-of-type .image_container img {
            height: 100%;
            width: 100%;
            object-fit:contain;
        }

    #home section:first-of-type .image_container img {
        height: 537px;
        width: auto;
        aspect-ration: 193/179;
    }
    #soluciones section:first-of-type .image_container img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        max-height: 356px;
    }
#compania section:first-of-type .image_container img {
    /* height: 450px; */
    border-radius: 4px;
    /* aspect-ratio: 2/2; */
    object-fit: contain;
    /* object-position: center right; */
    margin-left: auto;
}
    }

        #compania section:first-of-type .image_container{
            padding:0;
        }

        @media (max-width:1024px) and (min-width:601px){

            #compania section:first-of-type .image_container img {
                height: unset;
                width: 100%;
                width: -moz-available; /* WebKit-based browsers will ignore this. */
                width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
                width: fill-available;
                max-width: 100%;
                max-width: -moz-available; /* WebKit-based browsers will ignore this. */
                max-width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
                max-width: fill-available;
            }
        }

@media (max-width:768px){

    #home .first_section {

        padding-bottom: 100px;
    }

    #home section:first-of-type .row{
        gap:48px;
    }
    #home section:first-of-type .image_container img {
        width: 100%;
        height: auto;
    }

    .generic_soluciones > section:first-of-type  {
        padding-bottom: 48px;
    }

        .generic_soluciones > section:first-of-type img {
            width: 100%;
            border-radius: 4px;
            padding-top: 64px;
        }

}

.generic_soluciones section:first-of-type .btn {
    margin-top: 48px;
}

    .generic_soluciones section:first-of-type h1 {
        margin-top: 0;
        margin-bottom: 0;
    }

    .generic_soluciones section:first-of-type .image_container {
        padding: 0;
    }

.generic_soluciones .btn_contianer {
    padding-top: 3rem;
}

.generic_soluciones .vertical_center {
    width: 570px;
}

@media (max-width:768px){
    .generic_soluciones section:first-of-type .row {
        grid-gap:16px;
    }
    .generic_soluciones .vertical_center {
        width: unset;
    }
}

#soluciones .card_display {
    display: flex;
    flex-direction: row;
    gap: 32px 16px;
    flex-wrap: wrap;
}

#soluciones .soluciones_card {
    height: 185px;
    flex: 45%;
}

#soluciones .soluciones_card:hover {
    color:inherit;
}

    #soluciones .soluciones_card img {
        width: 169px;
        height: 169px;
        border-radius: 4px;
    }

    #soluciones .soluciones_card div:first-of-type {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-top: 16px;
        flex: 50%;
    }

        #soluciones .soluciones_card div:first-of-type .btn {
            margin-top: auto;
            margin-left: auto;
        }


    #soluciones .clients,
    .generic_soluciones .clients {
        height: auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }

        #soluciones .clients .col_content,
        .generic_soluciones .clients .col_content {
            align-items: center;
            height: auto;
        }

        #soluciones .clients .carousel,
        .generic_soluciones .clients .carousel {
            padding: 10px 0;
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
        }
            #soluciones .clients .carousel img, .generic_soluciones .clients .carousel img {
                height: 100px;
                width: auto;
                margin-left: 10px;
                margin-right: 10px;
                aspect-ratio: 3/2;
                object-fit: contain;
                mix-blend-mode: color-burn;
            }

@media (max-width:768px){
    #soluciones section:first-of-type .row{
        grid-gap:16px;
    }

    #soluciones .soluciones_card {
        height: unset;
        flex-direction: column;
        flex:100%
    }
        #soluciones .soluciones_card img {
            width: 100%;
            aspect-ratio: 3/1;
            object-fit: cover;
        }

    #soluciones .clients,
    .generic_soluciones .clients {
        height: auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .generic_soluciones .clients {
        height: auto;
        padding-top: 25px;
        padding-bottom: 25px;
    }

        #soluciones .clients .col_content,
        .generic_soluciones .clients .col_content {
            align-items: center;
            height: auto;
            text-align:center;
        }

        #soluciones .clients .carousel img, .generic_soluciones .clients .carousel img {
             margin-left: 0; 
             margin-right: 0; 
        }

    #soluciones .card_display {

        gap: 32px ;
    }

        #soluciones .card_display .body_1 {
            font-size: 1.8rem;
            line-height: 24px;
        }

    #soluciones .card_display .body_2 {
        font-size:1.6rem;
        line-height:24px;
    }

    #soluciones .soluciones_card div:first-of-type {

        gap: 8px;
        padding-left:16px;
        padding-right:16px;

    }

    .fabricante_card {
        text-align:left
    }



}

@media (max-width:1024px){
    .generic_soluciones .vertical_center {
         width: auto; 
    }
}

#form_contact_us_soluciones,.form_contact_us_soluciones {
    width: 100%;
}

#contact_us_solutions {
    background: var(--backgroud-blue-linear-gradient);
    padding: 49px 0 49px 0;
}

@media (max-width:768px) {
    #contact_us_solutions {
        padding: 16px 0 ;
        max-height: unset;
    }

    #contact_us_solutions .row{
        gap:16px;
    }

    #form_contact_us_soluciones .btn, .form_contact_us_soluciones .btn{
        width: 100%;
        display:flex;
        justify-content:center;
        margin-top:16px;
    }
    #contact_us_solutions #contact_us_form {
        padding-top:32px !important
    }

}

#join_our_team {
    background: var(--grey-100);
    padding: 71px 0 71px 0 !important
}

#join_our_team .col_content{
justify-content:flex-start}


        #contact_us_solutions .container-fluid, #contact_us_solutions .m-w {
            height: 100%;
        }

        #contact_us_solutions div[class^="col"] {
            display: flex;
            flex-direction: row;
            margin: auto;
            justify-content: center;
        }

            #contact_us_solutions div[class^="col"] > div {
                /*min-height: 220px;*/
            }

            #contact_us_solutions div[class^="col"]:first-of-type div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 489px;
            }

#contact_us_solutions #contact_us_form {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    padding-top:12px;
}

    #contact_us_solutions #contact_us_form .form-group {
        justify-content: flex-start;
    }

#contact_us_solutions #contact_us_form .btn{
    max-height:50px;
}

            #contact_us_solutions #contact_us_form input, #join_our_team input,
            #form_contact_us_soluciones input, .form_contact_us_soluciones input {
                width: 100%;
            }

                #contact_us_solutions #contact_us_form input.alert, #join_our_team input.alert,
                #form_contact_us_soluciones input.alert, .form_contact_us_soluciones input.alert {
                    border-color: var(--orange-500);
                    margin-bottom: 0;
                }

@media (max-width:768px) {

    #contact_us_solutions {
        justify-content:center;
        text-align:center;
        padding:20px 0;
    }
    #contact_us_solutions #contact_us_form {
        flex-direction: column;
        gap:0
    }

        #contact_us_solutions #contact_us_form .btn {
            width: 100%;
            justify-content: center;
            
        }

        #contact_us_solutions #contact_us_form .form-group {
            justify-content: flex-start;
            width:100%;
        }

        #contact_us_solutions div[class^="col"]:first-of-type div {
            width:unset;
            width:100%;
        }


}

#scroll_snap {
    /* height: 500px; */
    /* max-height: 550px; */
    overflow: scroll;
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* margin-top: 100px; */
    /* margin-bottom: 100px; */
}

#scroll_snap .container{
    gap:64px;
}

        #scroll_snap::-webkit-scrollbar {
            display: none;
        }

    #scroll_snap .row {
        /*height: 550px;*/
        scroll-snap-align: start;
        margin: 0;
        scroll-snap-stop: always;
        flex-wrap:nowrap
    }


            #scroll_snap .row:nth-of-type(odd) {
                flex-direction: row-reverse;
            }

        #scroll_snap .row:nth-of-type(odd) .col_content {
margin-left:80px ;
        }

                #scroll_snap .row:nth-of-type(even) .col_content {
                    margin-right:80px;
                }


            #scroll_snap .row div[class*="col-"] {
                padding: 0;
            }

                #scroll_snap .row div[class*="col-"] img {
                    /* height: 100%; */
                    /* width: 100%; */
                    /* background-color: #800080; */
                    /*border-radius: 4px;
                    object-fit: cover;
                    width: 544px;
                    height: 380px;*/
                    width: 100%;
                    height: auto;
                    border-radius: 4px;
                }

        #scroll_snap .col_content {
            padding: 16px;
            justify-content: flex-start;
        }

        /*@media (max-width:1024px) and (min-width:601px){

            #scroll_snap {
                max-height: 490px;
            }

            #scroll_snap .container{
                grid-gap:150px;
            }

            #scroll_snap .row div[class*="col-"] img {
                width: 100%;
                width: -moz-available;
                width: -webkit-fill-available;
                width: fill-available;
            }

                #scroll_snap .row {
                    height: max-content;
                }


        }*/

    @media (max-width:768px){

        #scroll_snap {
            height: unset;
            max-height: unset;
            margin-top: 50px;
            margin-bottom: 50px;
        }
        #scroll_snap .row {
            height: unset;
            flex-wrap:wrap
        }



            #scroll_snap .row div:not(:first-of-type){
                padding-top:16px;
            }

            #scroll_snap .row:not(:first-of-type) {
                padding-top:32px;
            }

            #scroll_snap .row div[class*="col-"] img {
                /* height: 100%; */
                /* width: 100%; */
                /* background-color: #800080; */
                border-radius: 4px;
                object-fit: cover;
                width: 100%;
                height: auto;
            }


            #scroll_snap .row:nth-of-type(odd) .col_content {
                margin-left: 0;
            }

            #scroll_snap .row:nth-of-type(even) .col_content {
                margin-right: 0;
            }
    }



    #producto {
    }

        #producto .product_title {
            word-spacing:20px;
            padding-bottom: 45px;
            text-align:center;
        }

#compania .container-fluid{
    padding:0
}



#compania > section, #compania > .container-fluid > section {
    padding-top: 100px;
    padding-bottom: 100px;
}

    /*#compania div > section:first-of-type .row .col_content span {
        color: var(--grey-929292);
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        gap: 6px;
    }*/

    #compania div > section:nth-of-type(2) .col_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
        gap: 32px;
        align-content: center;
        justify-content: center;
        margin: auto;
        max-width: 600px
    }

        #compania div > section:nth-of-type(2) .col_content p {
            text-align: center
        }

#compania #partners{
    background-color:#f5f5f5
}

.backgroud_corner_blue {
    background: var(--backgroud-blue-linear-gradient);
    color:var(--grey-50);
}

@media only screen and (max-width: 768px) {
    #compania > section, #compania > .container-fluid > section {
        padding-top: 0;
        padding-bottom: 0;
    }
    #producto .product_title {
        margin-left: 16px;
        margin-right: 16px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
    
    }

}

#compania > div > section:first-of-type .row {
    gap: 16px;
    flex-wrap: nowrap;
}

    #compania > div > section:first-of-type .row > div:last-of-type .image_container {
        display: flex;
        align-items: flex-end
    }

@media (max-width:768px){
    #compania div > section:nth-of-type(2) {
        margin-top: 16px;
        padding: 48px 0;
    }

    #compania div > section:nth-of-type(2) .col_content {
        gap: 16px;
        /*max-width:85%;*/
        padding:0 16px;
    }

    #compania section:first-of-type .image_container img {
        /* height: 450px; */
        border-radius: 4px;
        aspect-ratio: 1/1;
        object-fit: contain;
        /* object-position: center right; */
        /* margin-left: auto; */
        width: 100%;
    }
    #compania > div > section:first-of-type .row > div:last-of-type .image_container {
        display: block;
    }

    #compania > div > section:first-of-type .row {
        flex-wrap: wrap;
    }
}




#equipo, #partners {
    min-height: 350px;
    background-color: var(--grey-100);
    width: 100%;
}

    #equipo .row, #partners .row {
        padding-bottom: 20px;
    }

    #equipo .col{
        display: flex;
        flex-direction: column;
        gap: 36px;
        align-items: center;
        justify-content: center;
    }

    #equipo #carouselTeam {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-gap: 16px;
        width: 50%;
        width: 100%;
    }

        #equipo #carouselTeam img {
            /*height:300px;
        width:384px;
        aspect-ratio:384/300;*/
            border-radius: 4px;
            width: -webkit-fill-available;
            width: -moz-available;

            aspect-ratio: 64/51;
        }

    @media (max-width:1200px) and (min-width:601px){
        #equipo #carouselTeam {
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    #partners div[class*="col-"] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 50px;
    }

    #partners .partners_card_container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 140px
    }

        #partners .partners_card_container img {
            aspect-ratio: 2/2;
            height: auto;
            width: 100px;
            border-radius: 4px;
        }

    @media (max-width:768px){

        #partners div[class*="col-"] {
            gap: 48px;
        }
        #partners .partners_card_container {
            flex-wrap: wrap;
            gap: 32px;
            justify-content: center;
        }
            #partners .partners_card_container img {
                aspect-ratio: 2/2;
                height: auto;
                width: 120px;
                border-radius: 4px;
            }

        #equipo  {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
        }

        #equipo #carouselTeam {
            width: -webkit-fill-available;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            grid-gap: 16px;
            padding: 0 16px;
        }
    }

#expand .col_content {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    margin: unset;
    flex-wrap: nowrap;
    justify-content: flex-start;
    grid-gap:20px;
}


#expand img {
    height: 417px;
    width: 100%;
    border-radius: 4px;
}

@media (max-width:768px){
    #expand {
        padding-top: 16px!important;
        padding-bottom: 16px!important;
    }
    #expand .row{
        grid-gap:16px;
    }
        #expand img {
            height: auto;
            width: 100%;
            border-radius: 4px;
        }
    }


#contacto {
    padding-top: 90px;
    padding-bottom: 140px;
    background: linear-gradient(0deg, #EFEFEF 900px, transparent 0);
}

    #contacto .col_content {
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: 100%;
        justify-content: flex-end;
        max-width:466px;
    }

    #contacto img {
        height: auto;
        width: 461px;
    }

#contacto form, #join_our_team form{
    display:flex;
    flex-direction:column;
    gap:36px
}

    #join_our_team form {
        gap: 36px
    }

        #join_our_team .col_content {
            gap: 22px
        }

    #contacto form label, #join_our_team form label {
        font-size: 1.4rem;
        line-height: 20px;
        color: var(--high);
    }

    #contacto form button {
        margin-top:0px;
    }

#contacto .row > div:last-of-type {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    
}

#contacto textarea#cont_msj {
    max-height: unset;
    height: 148px !important;
}

    @media(max-width:768px){
        #join_our_team .row{
            gap:16px;
        }

        #compania_contact_form .btn{
            width:100%;
            display:flex;
            justify-content:center
        }

        #contacto {
            padding-top: unset;
            padding-bottom: unset;
            background: linear-gradient(0deg, #EFEFEF 760px, transparent 0);
        }

            #contacto .col_content {
                gap:24px;
                text-align:left;
                padding:0;
            }

        #contacto form button {
            width:100%;
            display:flex;
            justify-content:center
        }

            #contacto .row > div:last-of-type {
                align-items: center;
            }

            #contacto .row {
                grid-gap:32px;
            }

            #contacto img {
                width: 50%;
                height:auto
            }
    }
/*Animations*/
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(calc(-250px * 1.5))
            }


            50% {
                transform: translateX(calc(250px * 1.5))
            }

            100% {
                transform: translateX(0);
            }
        }

        .slider {
        height: 100px;
        margin: auto;
        overflow: hidden;
        position: relative;
        width: 800px;
    }

        .slider::before, .slider::after {
            background: linear-gradient(to right, rgba(245,245,245,1) 0%,rgba(245,245,245,0) 100%);
            content: "";
            height: 100px;
            position: absolute;
            width: 200px;
            z-index: 2;
        }

        .slider::after {
            right: 0;
            top: 0;
            transform: rotateZ(180deg);
        }

        .slider::before {
            left: 0;
            top: 0;
        }

        .slider .slide-track {
            animation: scroll 20s linear infinite;
            display: flex;
            justify-content: center;
            gap: 20px;
        }
            .slider .slide {
            height: 100px;
            width: 250px;
            }

@media (max-width:768px) {
    .slider::before, .slider::after {

        width: 50px;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        25% {
            transform: translateX(calc(-250px * 2.5));
        }


        50% {
            transform: translateX(calc(250px * 2.5));
        }

        100% {
            transform: translateX(0);
        }
    }
}

/* Forms */

form .form-group{
    height:65px;
}

    form .form-group:has(textarea) {
        height: 200px;
    }

form .help-block{
    display:none;
    margin-top:1em;
}

form .help-block i{
    font-size:1.6rem;
    line-height:16px;
    color:inherit;
}

form .has-error .help-block {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 9px;
    align-items: center;
    justify-content: flex-start;
    color:var(--orange-500);
}

#contact_us_form .has-error .help-block{
    color:var(--grey-50);
}

@media (max-width:768px){
    form .help-block {
        display: none;
        margin-top: .6em;
    }
}
/*Modal*/
.modal-content {
    padding: 40px 20px;
    border-radius: 4px;
    border: 1px solid var(--grey-300);
    box-shadow: var(--shadow-sensify1);
}
    .modal-header {
    border-bottom: unset;
}

        .modal-header .close {
            padding: 1rem;
            margin: -1rem -1rem -1rem auto;
            position: absolute;
            right: 0;
            top: -25px;
        }

    .modal-body{
        margin-top:2rem;
    }

.modal-body .container-fluid > div:not(:first-of-type) {
    margin-top: 16px
}
.modal-dialog {
    max-width: fit-content;
    margin: auto;
}

.modal_card {
    max-width: 462px;
    padding: 0;
    border: 1px solid transparent;
    box-shadow:unset;
}

.modal_card:hover {
    cursor:pointer;
     box-shadow: var(--shadow-sensify1); 
}

    .modal_card img {
        width: 100%;
        height: 170px;
        border-radius: 4px;
    }

    .modal_card .btn {
        margin:auto
    }

    .modal_card .btn:hover {
        background-color:transparent !important;
        border-color:transparent !important
         
    }

@media (max-width:1024px) {

    .modal-content {
        padding: 0;
        margin: 0 15px;
    }


}

@media (max-width:768px){
    .modal-header .close {
        top: 0px;
    }

    .modal_card img {
        width: 100%;
        height: auto;
    }

    .modal-header {
        padding-top:30px;
    }

    .modal-body .row{
        gap:32px;
    }

    .modal-body {
        padding-bottom:30px;
    }


}


/*Snackbar*/
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: var(--grey-50); /* Black background color */
    text-align: center; /* Centered text */
    border-radius: 4px; /* Rounded borders */
    padding: 12px 20px 16px 20px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
    box-shadow:var(--shadow-sensify1);
}

#snackbar .row{
    grid-gap:20px;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
}

    #snackbar div[class*="col-"] {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        padding-right: 0;
        padding-left: 0;
    }

    #snackbar.succes{
        border:1px solid var(--green-500);
        border-left:3px solid var(--green-500);
    }

    #snackbar.succes i{
        color:var(--green-500);
        font-size:4rem;
    }

    #snackbar.error {
        border: 1px solid var(--orange-500);
        border-left: 3px solid var(--orange-500);
    }

        #snackbar.error i {
            color: var(--orange-500);
            font-size: 4rem;
        }

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #snackbar.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
        animation: fadein 0.5s, fadeout 0.5s 4.5s;
    }

/* Animations to fade the snackbar in and out */
/*@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}*/

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

/*@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}*/

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}


.display_event{
    display:none;
}

.display_event_none{
    display:block;
}


.carousel-item:has(+ .carousel-item.active), .show-last-slide {
    display: flex;
    order: 1;
    transform: scale(.9)
}

.carousel-item.active {
    order: 2;
    transform: scale(1.1)
}

    .carousel-item.active + .carousel-item, .show-first-slide {
        display: flex;
        order: 3;
        transform: scale(.9)
    }


    .carousel-item:has(+ .carousel-item.active), .show-last-slide {
        display: none;
        order: 1;
        transform: scale(.9)
    }

    .carousel-item.active {
        order: 2;
        transform: scale(1)
    }

        .carousel-item.active + .carousel-item, .show-first-slide {
            display: none;
            order: 3;
            transform: scale(.9)
        }


@media (min-width:768px) {
    .carousel-item:has(+ .carousel-item.active), .show-last-slide {
        display: flex;
        order: 1;
        transform: scale(.9)
    }

    .carousel-item.active {
        order: 2;
        transform: scale(1.1)
    }

        .carousel-item.active + .carousel-item, .show-first-slide {
            display: flex;
            order: 3;
            transform: scale(.9)
        }
}


.spinner {
    /*border: 2px solid white;
    border-left-color: transparent;
    width: 16px !important;
    height: 16px !important;
    border-radius:50%;*/
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}