/*
Theme Name: Base
Theme URI: https://www.invbit.com
Author: Base
Author URI: https://www.invbit.com
Description: Base para Betheme
Template: betheme
Version: 1.6.2
*/


/****** GENERAL *******/

    html{ scroll-behavior: smooth; }

    .validate_email_against_bot { display: none; }

    #back_to_top { padding: 0; background: transparent; right: unset; left: 30px; border-radius: 50%; }

    #Side_slide .close-wrapper { height: auto; margin-bottom: 1rem; }
    #Side_slide .close-wrapper button.close { height: calc( (34 / 16) * 1rem ); width: calc( (34 / 16) * 1rem ); display: block; margin: 13px 13px 0 auto; background: transparent; padding: 0; }
    #Side_slide .close-wrapper button.close i { font-size: 22px; line-height: calc( (34 / 16) * 1rem ); }
    #Side_slide .search-wrapper button.submit { position: absolute; top: 0; right: 5px; font-size: calc( (20 / 16) * 1rem ); padding: 10px; background: transparent; }

    #Top_bar button.responsive-menu-toggle { display: none; position: absolute; right: 15px; top: 50%; margin-top: -17px; width: calc( (34 / 16) * 1rem ); height: calc( (34 / 16) * 1rem ); text-align: center; border-radius: 3px; z-index: 200; padding: 0; box-shadow: none; }
    #Top_bar button.responsive-menu-toggle span { font-size: 22px; line-height: calc( (34 / 16) * 1rem ); }
    #Top_bar .search_wrapper button[type="submit"] { display: none; }

    :root{
        --verde: #3D4A26;
        --amarillo: #FFC100;
        --gris: #f7f7f7;

        --pad-100: 100px 0px;
        --100: 100px;
        --40: 40px;

    }

    .pad-100{ padding: var(--pad-100); }
    .pad-100-top{ padding-top: var(--100); }
    .pad-100-bottom{ padding-bottom: var(--100); }
    .pad-40-bottom{ padding-bottom: var(--40); }

    body.button-custom .button{ text-transform: uppercase; font-weight: 500; letter-spacing: 0.03em; }

    #cmplz-document{ font-size: 16px; max-width: 100%; padding: var(--pad-100); }
    #cmplz-document p, #cmplz-document li, #cmplz-document td{ font-size: 16px; color: var(--negro); }
    #cmplz-document h2{ font-size: 48px; line-height: 53px; font-weight: 700; margin-top: var(--40); }

    #Subheader{ min-height: 20vh; width: calc( 100% - 10%); margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    #Subheader .title{ text-transform: uppercase; font-weight: 400; }



/****** MENU *******/
    body:not(.template-slider) #Header{ min-height: 0px !important; }
    #Top_bar .menu > li > a, #Top_bar .menu > li ul li a{ text-transform: uppercase; font-weight: 500; }
    .menuo-arrows:not(.keyboard-support) #Top_bar .menu > li.submenu > a:not(.menu-toggle):after{ border-top-color: var(--verde); }
    #Top_bar .top_bar_right .action_button{ text-transform: uppercase; font-weight: 500; letter-spacing: 0.03em; padding: 10px 30px !important; }
    #Top_bar .menu li ul li{ min-width: 230px; }
    #Top_bar .menu > li ul li a{ padding: 17px 15px; }


/****** FOOTER *******/
    #Footer #block-4{ margin: 0; }
    #Footer #block-4 img{ max-width: 320px; }
    #Footer #block-3{ margin: 0; }
    #Footer #block-3 p{ font-size: 18px; line-height: 20px; text-transform: uppercase; font-weight: 600; }
    #Footer #block-5{ margin: 0; }
    #Footer #block-5 .is-layout-flow{ display: flex; justify-content: flex-start; align-items: center; gap: 20px; }
    #Footer #block-5 .wp-block-columns.wp-container-2{ margin: 0; }

    #Footer .footer_copy .one{ margin-bottom: 30px; min-height: unset; }
    #Footer .footer_copy .one .mcb-column-inner{ margin: 0; display: flex; justify-content: center; align-items: center; gap: 10px; }
    .footer-copy-center #Footer .footer_copy .copyright{ margin: 0; }


/****** INICIO *******/
    .inicio-portada{ padding-left: 5%; padding-right: 5%; }
    .inicio-portada.full-width .section_wrapper{ align-content: flex-start; min-height: calc( 100vh - 106px ) !important; }
    .inicio-portada .shortcode .mfn-visualeditor-content > p{ display: none; }
    .inicio-portada .lightSlider{ height: calc( 100vh - 106px ) !important; width: 100%; }
    .inicio-portada .lightSlider .imagen-fondo{ position: relative; height: 100%; }
    .inicio-portada .lightSlider .imagen-fondo img{ width: 100%; height: 100%; object-fit: cover; }
    .inicio-portada .lightSlider .imagen-fondo:before{ content: ""; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); position: absolute; top: 0; left: 0; }
    .inicio-portada .lightSlider .text-wrap{ bottom: unset; right: unset; top: 50%; left: 50%; transform: translate(-50%,-50%); position: relative; max-width: 820px; animation-delay: 0s; }
    .inicio-portada .lightSlider .text-wrap h2{ color: #fff; font-size: 55px; line-height: 60px; font-weight: 500; text-align: center; text-transform: uppercase; }
    .inicio-portada .lightSlider .text-wrap p{ color: #fff; font-size: 18px; line-height: 20px; font-weight: 400; text-align: center; }
    .inicio-portada .lightSlider .text-wrap a{ margin-top: 30px; }

    .texto-intro .mfn-visualeditor-content h3{ text-transform: uppercase; }
    .texto-intro .mfn-visualeditor-content p{ font-size: 18px; line-height: 22px; padding-left: 50px; }

    .texto-lateral .mfn-visualeditor-content{ max-width: 520px; margin: auto; }
    .texto-lateral .mfn-visualeditor-content h4{ font-size: 25px; }


/****** SOCIOS *******/
    .socios h3{ width: fit-content; margin: auto; position: relative; }
    .socios h3:before{ content: ""; background-color: var(--amarillo); height: 2px; width: 100%; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
    .socios .wp-caption-text{ margin-top: 20px; font-size: 12px; font-weight: 500; text-transform: uppercase; background-color: transparent; color: var(--verde); }
    .socios.beneficiaros .cont-logos .mcb-wrap-inner, .socios.colaboradores .cont-logos .mcb-wrap-inner{ display: flex; justify-content: center; align-items: center; flex-wrap: unset; }
    .socios.beneficiaros .cont-logos .mcb-wrap-inner h4{ max-width: 200px; text-align: center; margin: auto; }


/****** OBJETIVOS *******/
    .objetivos-intro .mfn-icon-box-left .icon-wrapper{ margin: 0; }
    .objetivos-intro .mfn-icon-box-left .icon-wrapper img{ width: 100px; }

    .texto-lateral.objetivos .mfn-visualeditor-content{ max-width: 420px; margin: auto; }

    .lista-objetivos h2{ text-align: center; padding-bottom: var(--40); }
    .lista-objetivos ul{ list-style: none; margin: 0 auto; max-width: 80%; }
    .lista-objetivos ul li{ font-size: 18px; line-height: 22px; padding-left: 30px; position: relative; margin-bottom: 20px; }
    .lista-objetivos ul li:before{ content: ""; background-color: var(--amarillo); width: 15px; height: 15px; border-radius: 50%; position: absolute; top: 3px; left: 0; }

    .objetivos:not(.texto-lateral) .mcb-wrap-inner{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px; }
    .objetivos:not(.texto-lateral) .objetivo-item{ width: 100%; height: 100%; }
    .objetivos:not(.texto-lateral) .objetivo-item .mcb-column-inner{ margin: 0; height: 100%; }
    .objetivos:not(.texto-lateral) .objetivo-item .mfn-visualeditor-content{ background-color: var(--verde); color: #fff; padding: 40px; height: 100%; }
    .objetivos:not(.texto-lateral) .objetivo-item .mfn-visualeditor-content h3{ color: #fff; }


/****** BENEFICIOS *******/
    .banner-full{ background-color: var(--gris); }
    .banner-full h3{ text-align: center; }


/****** BENEFICIOS *******/
    .publicaciones ul{ list-style: none; margin: 0 auto; }
    .publicaciones ul li{ background-color: var(--gris); padding: 25px; font-size: 18px; line-height: 22px; position: relative; margin-bottom: 20px; border-radius: 5px; }
    .publicaciones ul li:before{ content: ""; background-color: var(--amarillo); width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 50%; left: -10px; transform: translateY(-50%); }
    .publicaciones ul li a{ text-decoration: unset; color: var(--verde); }
    .publicaciones ul li a:hover{ font-weight: 600; }


/****** CONTACTO *******/
    .contacto-info h3{ text-transform: uppercase; max-width: 350px;  margin-bottom: 30px; }
    .contacto-box .list_item > a{ display: flex; justify-content: flex-start; align-items: center; gap: 15px; margin-bottom: 20px; }
    .contacto-box .list_item .list_left{ width: 40px; height: 40px; font-size: 40px; }
    .contacto-box .list_item .list_right{ margin-left: 0; }

    span.wpcf7-form-control-wrap{ margin-top: 5px; margin-bottom: 15px; }

    .politicas{ transform: translateY(-15px); }
    .politicas p{ font-size: 12px; line-height: 14px; }

    span.wpcf7-form-control-wrap { display: inline-block; color: var(--verde); position: relative; }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance{ line-height: 20px; display: block; transform: translateY(-15px); }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance input[type=checkbox] { position: absolute; visibility: hidden; width: 20px; height: 20px; top: 0; left: 0; }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance input[type=checkbox] + span:before { display: block; position: absolute; content: ''; border-radius: 0; height: 20px; width: 20px;
        top: 0px; left: 0px; background: transparent; border: 1px solid var(--verde); }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance input[type=checkbox] + span:after { display: block; position: absolute; content: "\2713"; height: 20px; width: 20px; top: 0px; left: 0;
        visibility: hidden; font-size: 16px; text-align: center; line-height: 20px; color: var(--verde); }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance input[type=checkbox]:checked + span:before { background: transparent; }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance input[type=checkbox]:checked + span:after { visibility: visible; }
    .wpcf7-list-item-label { margin-left: 15px; display: inline-block; } 

    .wpcf7 .wpcf7-submit{ text-transform: uppercase; font-weight: 500; letter-spacing: 0.03em;  }




/****** RESPONSIVE *******/

    @media only screen and (max-width: 767px) {
        .mobile-header-mini #Top_bar button.responsive-menu-toggle { top: 30px!important; left: auto; right: 10px; margin-top: -17px; }
    }

    @media only screen and (max-width: 960px) {
        #Top_bar button.responsive-menu-toggle { display: block; }
    }

    @media(max-width: 1239px){

        /*GENERAL*/
        :root{
            --pad-100: 60px 0px;
            --100: 60px;
        }

        h3{ line-height: 35px; }

        #Subheader{     width: calc( 100% - 40px); }

        .texto-intro .mfn-visualeditor-content p{ padding-left: 30px; }

        /*MENU*/
        #Top_bar #logo{ padding: 10px 0; }
        #Top_bar .logo{ margin: 0 0 0 20px; }
        #Top_bar .menu > li > a { padding: 10px 0; font-size: 14px; } 
        #Top_bar .menu > li > a span:not(.description){ padding: 0 15px; }
        #Top_bar .top_bar_right{ padding: 0 10px; }
        #Top_bar .top_bar_right .action_button{ margin: 0; padding: 10px 20px !important; }   

        /*FOOTER*/
        #Footer #block-4 img { max-width: 220px; }
        #Footer #block-5 .is-layout-flow{ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }


        /*INICIO*/
        .inicio-portada { padding-left: 20px; padding-right: 20px; }
    }
    @media(max-width: 960px){

        /*MENU*/
        #Top_bar .top_bar_right{ padding-right: 40px; }
        #Top_bar a.responsive-menu-toggle{ right: -185px; }
        #Side_slide { right: -100% !important; transition: all 1s ease; display: flex; flex-direction: column; }
        body.side-slide-is-open #Side_slide {  right: 0 !important; }
        body.mobile-side-slide{ left: 0 !important; }
        #Side_slide #menu ul li a{ text-transform: uppercase; font-weight: 500; }


        /*FOOTER*/
        #Footer #block-4 img { max-width: 190px; }
        #Footer .widgets_wrapper { padding: 40px 0; }
        #Footer .footer_copy .one { margin-bottom: 20px; padding-top: 20px; }

        /*INICIO*/
        .inicio-portada .lightSlider .text-wrap{ max-width: 90%; }
        .texto-lateral .one-second.mcb-wrap{ width: 100%; }
        .texto-lateral.wrap-reverse .section_wrapper{ flex-wrap: wrap-reverse; }
        .texto-lateral .mfn-visualeditor-content, .texto-lateral.objetivos .mfn-visualeditor-content{ margin-top: var(--40); }

        /*OBJETIVOS*/
        .objetivos:not(.texto-lateral) .mcb-wrap-inner{ grid-template-columns: repeat(2, 1fr); }
    }
    @media(max-width: 767px){

        /*MENU*/
        .mobile-header-mini #Top_bar a.action_button{ display: block; }
        .mobile-header-mini #Top_bar .logo{ margin-left: 20px; }
        .mobile-header-mini #Top_bar a.responsive-menu-toggle{ right: 20px; }
        .mobile-header-mini #Top_bar .top_bar_right{ right: 60px; }
        #Top_bar .top_bar_right .action_button{ padding: 8px 20px !important; }

        
        /*FOOTER*/
        #Footer .footer_copy .one .mcb-column-inner{ flex-wrap: wrap; }
        #Footer #block-4 img{ width: 220px; margin-bottom: 20px; }


        /*INICIO*/
        .texto-intro .mfn-visualeditor-content p { padding-left: 0px; }


        /*OBJETIVOS*/
        .objetivos-intro .mobile-one.mcb-wrap:first-child{ margin-bottom: 40px; }

    }
    @media(max-width: 480px){

        /*GENERAL*/
        body.button-custom .button{ padding: 10px 50px; }

        :root{
            --pad-100: 40px 0px;
            --100: 40px;
        }

        h2, #cmplz-document h2 { font-size: 40px; line-height: 50px; }
        h3 { font-size: 25px; line-height: 30px; }

        #Subheader .title { font-size: 40px; line-height: 50px; }


        /*MENU*/
        .mobile-header-mini #Top_bar #logo { height: 60px!important; line-height: 60px!important; }
        .mobile-header-mini #Top_bar a.responsive-menu-toggle { top: 35px!important; }
        .mobile-header-mini #Top_bar .top_bar_right{ max-height: 70px; }
        #Top_bar .top_bar_right .action_button { padding: 6px 20px !important; font-size: 14px; line-height: 13px !important; }


        /*INICIO*/
        .inicio-portada .lightSlider .text-wrap h2{ font-size: 35px; line-height: 36px; }
        .inicio-portada .lightSlider .text-wrap a { margin-top: 20px; }


        /*SOCIOS*/
        .socios h3{ font-size: 20px; line-height: 25px; }
        .socios.beneficiaros .cont-logos .mcb-wrap-inner, .socios.colaboradores .cont-logos .mcb-wrap-inner{ flex-wrap: wrap; gap: 20px; }

        /*OBJETIVOS*/
        .lista-objetivos ul { max-width: 100%; }
        .objetivos:not(.texto-lateral) .mcb-wrap-inner { grid-template-columns: repeat(1, 1fr); }
    }
    @media(max-width: 375px){

        /*GENERAL*/
        #Subheader .title { font-size: 28px; line-height: 35px; }

        h2, #cmplz-document h2 { font-size: 35px; line-height: 36px; }

        .contacto-box .list_item .list_left{ font-size: 25px; }

        /*MENU*/
        .mobile-header-mini.mobile-sticky #Top_bar .top_bar_right{ display: none; }
        .mobile-icon-action-tb #Side_slide .action_button{ display: block !important; text-transform: uppercase; font-weight: 500; letter-spacing: 0.03em; padding: 10px 30px !important; }

    }
}