/* PORTADA */

.portada_home{
    width: 100%;
    /* margin-top: 61px; */
}

.portada_home img{
    width: 100%;
}

.portada_desktop{ display: none; }

/* TITLE SECTION */

.titlle-section {
    display: flex;
}

.titlle-section h2{
    display: table;
    font-size: 27px;
    color: #FFFFFF;
    padding: 8px 15px;
    background: #000000;
}

/* TABS */

.tabs-desktop{ display: none; }

.content-tabs{
    padding: 35px 0;
}

.title-tabs{
    font-size: 23px;
    color: #000000;
    text-align: center;
    margin-bottom: 37px;
}

/* ACCORDION MOVIL */

.accordion {    
    cursor: pointer;
    width: 100%;
    border: none;
    outline: none;
    transition: 0.4s;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accordion h2{
    display: table;
    font-size: 21px;
    color: #FFFFFF;
    /* -webkit-box-decoration-break: clone;
    box-decoration-break: clone; */
    background: #000000;
    padding: 0.5rem 1rem;
}

.accordion div:focus {
    outline: 0;
}
  
/* .active, .accordion:hover {
    background-color: #ccc;
} */
  
.accordion:after {
    content: '∨';
    color: #FFFFFF;
    font-weight: bold;
    float: right;
    padding: 8px;
    background-color: #000000;
}

.panel {
    padding: 0;
    margin: 21px 0;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel ul{
    list-style: none;
}

.panel li{
    padding: 11px 0;
    font-weight: 700;
    border-bottom: 3px solid #000000;
}


/* ECOSISTEMA */

.bg-ecosistema{
    width: 100%;
    height: auto;    
    background-image: url(../images/bg-ecosistema.jpg);
    background-size: cover;
    background-position: center;
}

.bg-title-eco{
    width: 19px;
    height: 57px;
    background-image: url(../images/bg_title-ecosistema.jpg);
    background-position: center;
}

.title{
    padding: 55px 0 0;
}

.h2-title{
    display: flex;
}

.title h2{
    color: #FFFFFF;
    font-size: 27px;
    display: inline;
    padding: 12px;
    background-color: #000000;
}

.title p{
    color: #FFFFFF;
    font-size: 16px;
    margin: 25px 0 0;
    padding: 0 25px;
}

.content-ecosistema{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 35px 25px 55px;
}

.ecosistema-movil{
    position: relative;
    width: 100%;
}

.ecosistema-desktop{ display: none; }

.ecosistema-movil img{    
    display: block;
    width: 100%;
}

.ecosistema-movil a{
    display: block;    
}

.eco-analytics{
    width: 87%;
}

.eco-bd{
    position: relative;
    width: 90%;
    z-index: 99;
}

.eco-360{
    position: relative;
    width: 90%;
    z-index: 99;
}

.eco-learning{
    margin-top: -277px;
}

.eco-sistemas{
    position: relative;
    width: 90%;
    z-index: 99;
}

.eco-gestion{
    margin-top: -235px;
}

/* ANALYTICS */

.bg-title-ana{
    width: 19px;
    height: 102px;
    background-image: url(../images/bg_title-analytics.jpg);
    background-position: center;
}

.title-ana{
    padding: 55px 0 0;
}

/* .titlle-section {
    display: flex;
}

.titlle-section h2{
    display: table;
    font-size: 27px;
    color: #FFFFFF;
    padding: 8px 15px;
    background: #000000;
} */

.content-analytics{
    padding: 55px 25px;
}

.analytics-movil{
    width: 100%;
}

.analytics-movil img{
    width: 100%;
}

.list-plataforma ul{
    list-style: none;
    margin-bottom: 25px;
}

.list-plataforma li{
    font-size: 16px;
    color: #000000;
    margin: 11px 0;
}

.list-plataforma ul b{
    display: block;
    width: 115px;
    padding: 11px;
    color: #FFFFFF;
    text-align: center;
    background-color: #000000;
}

.analytics-desktop{ display: none; }


/* BASE DE DATOS */

.bg-title-bd{
    width: 19px;
    height: 102px;
    background-image: url(../images/bg-title-bd.jpg);
    background-position: center;
}

.title-bd{
    width: 100%;
    max-width: 1200px;
    padding: 55px 0 0;
    margin: 0 auto;
}

.h2-title-bd {
    display: flex;
}

.h2-title-bd h2{
    color: #FFFFFF;
}

.h2-title-bd h2 div{
    font-size: 27px;
    line-height: 1.9;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: #000000;
    padding: 0.5rem 1rem;
}

.bg-base-datos{
    width: 100%;
    height: auto;    
    background-image: url(../images/bg-base-datos.jpg);
    background-size: cover;
    background-position: left;
}

.content-base-datos{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px 55px;
}

.list-base-datos{
    margin-top: 41px;
}

.list-base-datos ul{
    margin-top: 45px;
    padding-left: 25px;
}

.list-base-datos li{
    font-size: 16px;
    color: #FFFFFF;
    margin: 11px 0;
}

.list-base-datos ul b{
    display: block;
    width: 225px;
    padding: 11px;
    margin-left: -25px;
    color: #FFFFFF;
    text-align: center;
    background-color: #000000;
}

/* DIGITAL 360 */

.bg-title-360{
    width: 19px;
    height: 102px;
    background-image: url(../images/bg-title-bd.jpg);
    background-position: center;
}

.title-360{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 0 0;
}

.h2-title-360 {
    display: flex;
}

.h2-title-360 h2{
    color: #FFFFFF;
}

.h2-title-360 h2 div{
    font-size: 27px;
    line-height: 1.89;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: #000000;
    padding: 0.5rem 1rem;
}

.content-360 {
    padding: 55px 25px;
}

.movil-360{
    width: 100%;
}

.movil-360 img{
    width: 100%;
    margin-bottom: 35px;
}

.desktop-360{ display: none; }


.list-Comunicación ul{
    list-style: none;
    padding-left: 0;
}

.list-Comunicación ul b {
    display: table;
    margin-left: 0;
    width: initial;
    margin-top: 11px;
    font-size: 18px;
}



/* CONTABILIDAD */

.bg-contabilidad {
    width: 100%;
    height: auto;
    background-image: url(../images/bg-contabilidad.jpg);
    background-size: cover;
    background-position: center;
}

.title-conta {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 0 0;
}

.h2-title-conta {
    display: flex;
}

.h2-title-conta h2{
    color: #FFFFFF;
}

.bg-title-conta {
    width: 19px;
    height: 102px;
    background-image: url(../images/bg_title-ecosistema.jpg);
    background-position: center;
}

.h2-title-conta h2 div{
    font-size: 27px;
    line-height: 1.89;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: #000000;
    padding: 0.5rem 1rem;
}

.content-contabilidad{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px 55px;
}

.list-contabilidad ul{
    list-style: none;
    padding-left: 0;
}

.list-contabilidad ul b {
    display: table;
    margin-left: 0;
    width: initial;
}

/* DESARROLLO */

.bg-title-desarrollo{
    width: 100%;
    height: 95px;
    background-image: url(../images/bg-title-desa.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h2-title-desa{
    display: table;
    padding: 11px;
    margin: 0 auto;
    background: #000000;
}

.h2-title-desa h2{
    color: #FFFFFF;
    font-size: 27px;
}

.content-desarrollo{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 25px;
}

.img-desarrollo-movil{
    margin-bottom: 25px !important;
}

.img-desarrollo-desktop{ display: none !important; }

.content-desarrollo h2{
    position: relative;
    font-size: 23px;
    color: #FF0853;
    margin-bottom: 25px;
    padding-left: 25px;
}

.circle-desarrollo{
    width: 15px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 0;
    border-radius: 50%;
    background-color: #FF0853;
}

.content-desarrollo img{
    display: block;
    width: 85%;
    margin: 0 auto;
}

/* CLIENTES */

.bg-clientes-contacto{
    width: 100%;
    height: auto;
    background-image: url(../images/bg-clientes-contacto_v2.jpg);
    background-size: cover;
    background-position: center;
    padding: 55px 0;
}

.content-clientes{
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: 0 0 15px;
    width: 89%;
    margin: 0 auto;
    border-radius: 21px;
    background-color: #FFFFFF;
}

.img-clientes-movil{
    width: 100%;
    margin-top: 25px;
}

.img-clientes-desktop{ display: none; }

/* CONTACTO */

.title-contact {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 0 0;
}

.h2-title-contact {
    display: flex;
}

.h2-title-contact h2{
    color: #FFFFFF;
}

.bg-title-contact {
    width: 19px;
    height: 102px;
    background-image: url(../images/bg_title-ecosistema.jpg);
    background-position: center;
}

.h2-title-contact h2 div{
    font-size: 27px;
    line-height: 1.89;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: #000000;
    padding: 0.5rem 1rem;
}

.content-contact{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px 55px;
}

.txt-contact{
    width: 100%;
    margin: 25px 0;
}

.txt-contact b{
    font-size: 21px;
    color: #FFFFFF;
}

.txt-contact p{
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 25px;
}

/* FORM */

.content_form{
    width: 100%;
}

.content_form input{
    width: 100%;
    font-size: 13px;
    padding: 13px 10px;
    border: 1px solid #e6e6e6;    
    color: #4b4b55;
    margin-top: 15px;
    background-color: white;
    border-radius: 15px;
}

.content_form textarea{
    width: 100%;
    height: 129px;
    font-size: 13px;
    padding: 10px 10px;
    border: 1px solid #e6e6e6;    
    color: #4b4b55;
    margin-top: 15px;
    border-radius: 15px;
    background-color: white;
}

.btn_submit {
    width: 100%;    
    border: initial !important;
    color: white !important;
    margin: 10px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    padding: 13px 20px;
    cursor: pointer;
    background-color: #FF0853 !important;
}


/* NUESTRAS OFICINAS */

.content-oficinas {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;    
}

.title-oficinas{
    padding-top: 15px;
}

.paises_oficinas{
    padding: 25px 25px 55px;
}

.paises_oficinas h2{
    color: #FFFFFF;
    font-size: 23px;
    margin-top: 25px;
}

.paises_oficinas p{
    position: relative;
    font-size: 16px;
    color: #FFFFFF;
    padding-left: 25px;
    margin-top: 15px;
}

.paises_oficinas p img{
    position: absolute;
    top: 2px;
    left: 0px;
    width: 17px;
}



@media screen and (min-width: 375px){
    /* ECOSISTEMA */

    .eco-learning {
        margin-top: -297px;
    }

    .eco-gestion {
        margin-top: -257px;
    }
}

@media screen and (min-width: 390px){
     /* ECOSISTEMA */

     .eco-learning {
        margin-top: -313px;
    }

    .eco-gestion {
        margin-top: -267px;
    }
}

@media screen and (min-width: 412px){
    /* ECOSISTEMA */

    .eco-learning {
        margin-top: -329px;
    }

    .eco-gestion {
        margin-top: -291px;
    }
}

@media screen and (min-width: 450px){
    /* ECOSISTEMA */

    .eco-learning {
        margin-top: -371px;
    }

    .eco-gestion {
        margin-top: -327px;
    }
}

@media screen and (min-width: 500px){
    /* ECOSISTEMA */

    .eco-learning {
        margin-top: -425px;
    }

    .eco-gestion {
        margin-top: -359px;
    }
}

@media screen and (min-width: 768px){

    /* TITLE SECTION */

    .titlle-section h2 {
        padding: 11px 15px;
    }

    /* PORTADA */

    .portada_movil{ display: none; }

    .portada_desktop{ display: block; }

    /* TABS */

    .title-tabs {
        font-size: 31px;
    }

    .tabs-movil{ display: none; }

    .tabs-desktop{ display: block; }

    .tab {
        overflow: hidden;
        display: flex;
        justify-content: space-between;
    }
    
    .tab button {
        width: 33%;
        background-color: inherit;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 0 11px;
        transition: 0.3s;
    }

    .btn-tab-desarrollo{
        padding: 0 !important;
    }

    /* .active:after {
        content: "\2212";
    } */

    .tab button img{
        width: 100%;
    }
    
    /* .tab button:hover {
        background-color: #ddd;
    } */
    
    /* .tab button.active {
        background-color: #ccc;
    } */
    
    .tabcontent {
        display: none;
        padding: 35px 12px 9px;
        /* border: 1px solid #ccc; */
        border-top: none;
        -webkit-animation: fadeEffect 1s;
        animation: fadeEffect 1s;
    }
    
    @-webkit-keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    
    @keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    .tabcontent div{
        color: #FFFFFF;
        font-size: 23px;
        line-height: 1.95;
        display: inline;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        background: #000000;
        padding: 0.5rem 1rem;
    }

    .tabcontent ul{
        list-style: none;
        margin-top: 35px;
        display: flex;
        justify-content: space-between;
    }
    
    .tabcontent li{
        padding: 11px 7px;
        font-weight: 700;
        font-size: 16px;
        text-align: center;
        border-right: 3px solid #000000;
    }

    .tabcontent-desarrollo{
        flex-wrap: wrap;
    }

    .tabcontent-marketing{
        flex-wrap: wrap;
        justify-content: space-evenly !important;
    }

    .tabcontent-marketing li{
        width: 25%;
        margin-bottom: 15px;
    }

    .tabcontent-desarrollo li{
        width: 25%;
        margin-bottom: 15px;
    }

    /* ECOSISTEMA */
    
    .ecosistema-movil{ display: none; }

    .ecosistema-desktop{ 
        display: block;
        display: flex;
        justify-content: space-between;
    }

    .title h2{
        font-size: 31px;
    }

    .bg-title-eco {
        height: 65px;
    }

    .title p {
        width: 100%;
        max-width: 569px;
        font-size: 18px;
    }
    
    .eco-analytics-desktop{
        width: 34%; 
    }
    
    .eco-bd-desktop{
        position: relative;
        width: 41%;
    }

    .img-bd-desktop{
        position: relative;
        z-index: 1;
    }

    .line-datos{
        position: absolute;
        width: 373px;
        height: 5px;
        right: -273px;
        bottom: 123px;
        background-color: #FFFFFF;
    }

    .eco-360-desktop{
        width: 39%;
    }

    .ecosistema-desktop img{
        width: 100%;
        display: block;
    }

    .eco-360-desktop{
        position: relative;
    }

    .learning-desktop{
        position: absolute;
        bottom: 0;
    }

    .eco-gestion-desktop{
        width: 38%;
        position: relative;
        z-index: 999;
    }

    /* ANALYTICS */

    .bg-title-ana{
        width: 19px;
        height: 114px;
        background-image: url(../images/bg_title-analytics.jpg);
        background-position: center;
    }    

    .content-analytics {
        padding: 0 25px 75px;
    }

    .analytics-movil{ display: none; }
    
    .analytics-desktop{ 
        display: block;
        margin-top: -53px;
    }

    .analytics-desktop img{ 
        width: 100%;
    }

    /* BASE DE DATOS */

    .bg-title-bd {
        height: 114px;
    }

    .h2-title-bd h2 div {
        font-size: 31px;
        line-height: 1.8;
    }

    .list-base-datos{
        display: flex;
        justify-content: space-between;
    }

    .list-base-datos ul{
        width: 33%;
        margin-top: 0;

    }

    .list-base-datos li{
        margin: 11px 0 15px;
    }

    .list-base-datos ul b{
        margin-bottom: 35px;
    }

    /* DIGITAL 360 */

    .bg-title-360 {
        height: 112px;
    }

    .h2-title-360 h2 div {
        font-size: 31px;
        line-height: 1.8;
    }

    .movil-360 { display: none; }

    .desktop-360 { 
        display: block; 
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .title-360 {
        padding: 95px 0 0;
    }

    .desktop-360 img { 
        width: 100%;
    }

    .content-360 {
        padding: 55px 25px 95px;
    }

    /* CONTABILIDAD */

    .h2-title-conta h2 div {
        font-size: 31px;
        line-height: 1.8;
    }

    .bg-title-conta {
        height: 111px;
    }

    .list-contabilidad {
        flex-wrap: wrap;
    }

    .list-contabilidad ul {
        width: 30%;
        margin-bottom: 25px;
    }
    
    /* DESARROLLO */

    .bg-title-desarrollo{
        height: 157px;
    }

    .h2-title-desa h2 {
        font-size: 31px;
    }
    
    .content-desarrollo h2 {
        font-size: 25px;
    }

    .img-desarrollo-movil{ display: none !important; }
    
    .img-desarrollo-desktop{ 
        width: 100% !important;
        display: block !important;
    }

    /* CLIENTES */

    .bg-clientes-contacto{
        padding: 95px 0;
    }

    .content-clientes {
        padding: 0 0 31px;
    }

    .img-clientes-movil{ display: none; }

    .img-clientes-desktop{ 
        width: 100%;
        display: block;
        margin-top: 45px;
    }

    /* CONTACTO */

    .h2-title-contact h2 div {
        font-size: 31px;
        line-height: 1.8;
    }

    .bg-title-contact {
        height: 111px;
    }

    .txt-contact p {
        font-size: 18px;
    }

    .form-col-2{
        display: flex;
        justify-content: space-between;
    }

    .form-col-2 input{
        width: 49%;
    }

    .btn_submit {
        margin-bottom: 0px !important;
    }

    /* NUESTRAS OFICINAS */

    .paises_oficinas{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .flex-oficinas{
        width: 49%;
    }


}

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

}

@media screen and (min-width: 1100px){

    /* TITLE SECTION */

    .titlle-section h2 {
        font-size: 55px;
        padding: 7px 15px;
    }

    /* TABS */

    .content-tabs {
        padding: 35px 0 105px;
    }

    .title-tabs {
        font-size: 37px;
        margin: 31px 0 75px;
    }
    
    .tabcontent div {    
        font-size: 35px;
        line-height: 1.75;
    }

    .tabcontent li {
        font-size: 18px;
    }

    .tabcontent-comunicacion li{
        padding: 11px 25px;
    }

    .tabcontent-marketing li{ 
        padding: 11px 27px;
    }

    /* ECOSISTEMA */

    .title{
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 101px 0 0;
    }

    .title h2{
        font-size: 55px;
    }

    .bg-title-eco {
        height: 95px;
    }

    .content-ecosistema {
        padding: 35px 25px 101px;
    }

    .line-datos {
        width: 373px;
        right: -333px;
        bottom: 195px;
    }

    /* ANALYTICS */

    .title-ana {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

     .bg-title-ana{
        height: 170px;
    }

    .analytics-desktop {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        margin-top: -89px;
    }

    /* BASE DE DATOS */

    .title-bd {
        padding: 175px 0 0;
    }

    .bg-title-bd {
        height: 170px;
    }

    .h2-title-bd h2 div {
        font-size: 55px;
        line-height: 1.56;
    }

    .list-base-datos ul{
        width: 24%;
    }

    .list-base-datos{
        margin-top: 80px;
    }

    .content-base-datos{
        padding: 0 25px 135px;
    }

    .list-base-datos ul b {
        width: 285px;
        font-size: 19px;
    }

    .list-base-datos li {
       font-size: 18px;
    }

    /* DIGITAL 360 */

    .h2-title-360 h2 div {
        font-size: 55px;
        line-height: 1.56;
    }

    .bg-title-360 {
        height: 170px;
    }

    /* CONTABILIDAD */

    .h2-title-conta h2 div {
        font-size: 55px;
        line-height: 1.56;
    }

    .bg-title-conta{
        height: 170px;
    }

    .title-conta {
        padding: 87px 0 0;
    }

    .content-contabilidad {
        padding: 0 25px 87px;
    }

    .list-contabilidad  ul {
        width: 27%;
    }

    .list-contabilidad ul b {
        width: initial;
    }

    /* DESARROLLO */
    
    .bg-title-desarrollo {
        height: 209px;
    }

    .content-desarrollo{
        padding: 108px 25px 85px;
    }

    .h2-title-desa h2 {
        font-size: 55px;
    }

    /* CONTACTO */

    .title-contact {
        padding: 125px 0 0;
    }

    .h2-title-contact h2 div {
        font-size: 55px;
        line-height: 1.56;
    }

    .bg-title-contact {
        height: 170px;
    }

    .txt-contact b {
        font-size: 25px;
    }

    .content_form textarea {
        height: 163px;
    }

    /* NUESTRAS OFICINAS */

    .title-oficinas {
        padding-top: 55px;
    }

    .paises_oficinas{
        max-width: 1050px;
        margin: 0 auto;
        padding: 25px 0 55px;
    }

    .flex-oficinas {
        width: 42%;
    } 

    .paises_oficinas h2 {
        font-size: 24px;
    }

}

@media screen and (min-width: 1200px){

    /* ECOSISTEMA */

    .content-ecosistema{
        padding: 35px 0 101px;
    }

    .line-datos {
        bottom: 209px;
    }

    /* BASE DE DATOS */

    .content-base-datos{
        padding: 0 0 135px;
    }

    /* CONTABILIDAD */

    .content-contabilidad{
        padding: 0 0 87px;
    }

    /* DESARROLLO */

    .content-desarrollo {
        padding: 108px 0 85px;
    }

    /* CONTACTO */

    .content-contact{
        padding: 0 0 55px;
    }

}

@media screen and (min-width: 1351px){

}

@media screen and (min-width: 1450px){

}

@media screen and (min-width: 1500px){
}

@media screen and (min-width: 1700px){

}