@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz@6..12&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/*** CONTROLS *****/

    :root{

        --font-title: 'Exo', sans-serif;
        --color-title: #a90329;

        --font-second: 'Exo', sans-serif;

        --font-content: 'Exo', sans-serif;

        --font-three: 'Exo', sans-serif;
    /** header -color ***/
        --font-content: 'Exo', sans-serif;
        --header-color: #fff;
        --enable-color: #111;

    }

/*  BODY */
    @font-face {
        font-family: 'Exo';
        src:  url('Exo-Regular.otf') format('truetype');
    }

    h1, h3, h4, h5, h6 {
        font-family: var(Exo);
    }

    p{
        font-size: 1.3em!important;
        font-family: var(Exo);
    }

    html{
        scroll-behavior: smooth;
    }

    body{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .body-back{
        background-image: url(../images/img/backgroun-texture-01.png);
        background-size: contain;
    }

    body.swal2-height-auto {
      padding-right: 0%!important;
    }

        .modal-open{
            padding-right: 0!important;
        }
        .moc-animation{
            -webkit-animation-duration: 4s;
        }

        .desktop{
            display: block;
            visibility: visible;
        }
        .mobil{
            display: none;
            visibility: hidden;
        }

/* VIDEO BACKGROUND SLIDER */

    .video-background{
        width: 100% ;
    }


/* */

 .principal > span{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #04161bba;
 }

/* SECCION 1  */

    #landing > #sec01 {
        width: 100%;
        padding: 1% 5%;
        font-family: 'Exo';
    }

    #landing > #sec01 > ol {
        width: 100%;
        margin: 0;
        padding: 0%;
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        flex-wrap: wrap;
    }

    #landing > #sec01 > ol > li{
        width: 50%;
    }

    #landing > #sec01 > ol > li > h2{
        width: 100%;
        letter-spacing: 1.5px;
        font-size: 34px;
        margin-bottom: 10px;
    }

    #landing > #sec01 > ol > li > p{
        width: 100%;
        letter-spacing: 1px;
        font-size: 18px!important;
    }

    #landing > #sec01 > ol > li > button{
        width: fit-content;
        border: none;
        background: #073a50;
        color: #fff;
        padding: 2% 2.5%;
        letter-spacing: 1.5px;
        font-size: 16px;
    }

    #landing > #sec01 > ol > li > img{
        width: 100%;
    }

    /* secc 2  */
    #landing > #sec02 {
        width: 100%;
        padding: 2% 5%;
        font-family: 'Exo';
    }

    #landing > #sec02 > h2{
        width: 100%;
        letter-spacing: 1.5px;
        font-size: 34px;
        margin-bottom: 10px;
        font-family: 'Exo';
        text-align: center;
        margin: 5% 0%;
    }

    #landing > #sec02 > ul {
        width: 100%;
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #landing > #sec02 > ul > li{
        width: 30%;
    }

    #landing > #sec02 > ul > li > img{
        width: 100%;
        border-radius: 5px;
    }

    /* secc 3  */
    #landing > #sec03 {
        width: 100%;
        position: relative;
        padding: 3% 5%;
        background: url(../images/img/mujer-seleccionando-fotografias-personas.jpg);
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
        text-align: center;
        margin: 5% 0;
        font-family: 'Exo';
    }

    #landing > #sec03 > h2{
        width: 100%;
        letter-spacing: 2.5px;
        font-size: 38px;
        margin-bottom: 10px;
        font-family: 'Exo';
        text-align: center;
        margin: 2% 0%;
        color: #fff;
        font-weight: bold;
    }

    #landing > #sec03 > p{
        width: 100%;
        letter-spacing: 1.5px;
        font-size: 20px!important;
        color: #fff;
        text-align: center;
        margin: 2% 0%;
        font-family: 'Exo';
    }

    #landing > #sec03 > button{
        width: fit-content;
        border: none;
        background: #073a50;
        color: #fff;
        padding: 1% 2.5%;
        letter-spacing: 1.5px;
        font-size: 20px;
    }

    /* secc 4  */
    #landing > #sec04 {
        width: 100%;
        padding: 2% 5%;
        font-family: 'Exo';
    }

    #landing > #sec04 > ul{
        width: 100%;
        margin: 0%;
        padding: 0%;
        list-style: none;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    #landing > #sec04 > ul > li {
        width: 20%;
        text-align: center;
    }

    #landing > #sec04 > ul > li > img{
        width: 50%;
        margin-bottom: 15px;
    }

    /* secc 5  */
    #landing > #sec05 {
        width: 100%;
        padding: 3% 5%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-family: 'Exo';
    }

    #landing > #sec05 > div{
        width: 50%;
        padding: 0;
        margin: 0;
    }

    #landing > #sec05 > div > h2 {
        width: 100%;
        letter-spacing: 1.5px;
        font-size: 34px;
        margin-bottom: 10px;
        font-family: 'Exo';
    }

    #landing > #sec05 > div > p {
        width: 100%;
        letter-spacing: 1px;
        font-size: 18px!important;
    }

    #landing > #sec05 > div > button{
        width: fit-content;
        border: none;
        background: #073a50;
        color: #fff;
        padding: 2% 2.5%;
        letter-spacing: 1.5px;
        font-size: 16px;
    }

    #landing > #sec05 > div > img{
        width: 100%;
    }

    /* secc 6  */
    #landing > #sec06 {
        width: 100%;
        padding: 3% 5%;
        font-family: 'Exo';
        background: #073a50;
    }

    #landing > #sec06 > h2 {
        width: 100%;
        letter-spacing: 1.5px;
        font-size: 34px;
        margin-bottom: 10px;
        font-family: 'Exo';
        text-align: center;
        color: #fff;
    }

    #landing > #sec06 > form > ol {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        color: #fff;
    }

    #landing > #sec06 > form > ol > li {
        padding: 1%;
        width: 40%;
        border-radius: 3px;
    }

    #landing > #sec06 > form > ol > li > label {
        width: 100%;
        color: #fff;
        font-size: 16px;
    }

    #landing > #sec06 > form > ol > li > input{
        width: 100%;
        font-size: 18px;
        padding: 5px;
        border: none;
        outline: none;
        border-radius: 2px;
        background: #fff;
    }

    #landing > #sec06 > form > ol > li > textarea {
        width: 100%;
        font-size: 18px;
        padding: 5px;
        border: none;
        outline: none;
        border-radius: 2px;
        background: #fff;
        color: #111;
    }

    #landing > #sec06 > form > ol > li > select {
        width: 100%;
        font-size: 18px;
        padding: 5px;
        border: none;
        outline: none;
        border-radius: 2px;
        background: #fff;
        color: #111;
    }

    #landing > #sec06 > form > ol > li > button {
        width: 100%;
        font-size: 18px;
        background: #FFC107;
        padding: 3%;
        letter-spacing: 1px;
        font-weight: bold;
        border-radius: 3px;
        border: none;
        margin-bottom: 20px;
    }

    #landing > #sec06 > form > ol > li > a{
        padding: 5px;
        color: #fff;
        letter-spacing: 1px;
    }

/* login*/
    
    #login {
        background-image: url(../images/img/mujer-seleccionando-fotografias-personas.jpg);
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        position: absolute;
        align-items: center;
        top: 0;
        font-family: 'Exo';
    }

    #login > form {
        background: #fff;
        width: 25%;
        margin: 0;
        padding: 2% 1%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }

    #login > form > img{
        width: 80%;
        margin-bottom: 3%;
    }

    #login > form > label{
        width: 80%;
        margin: 0;
        padding: 2% 2%;
        text-align: center;
        font-size: 16px;
        letter-spacing: 1px;
    }

    #login > form > input{
        background: #fff;
        width: 80%;
        margin: 2%;
        padding: 2% 1%;
    }

    #login > form > div > button{
        width: 80%;
        margin: 2%;
        padding: 2% 1%;
        background: #FFC107;
        letter-spacing: 1px;
        font-size: 16px;
        color: #000000b5;
        font-weight: bold;
        text-align: center;
    }

/* DASHBOARD PLATAFORMA */

    #dashboard{
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        font-family: 'Roboto Mono', monospace;
    }

    #dashboard > article {
        width: 20%;
        height: 100%;
        margin: 0;
        padding: 10px;
        position: fixed;
        left: 0;
        top: 0;
        background: #033b54;
    }

    #dashboard > article > div{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 1px solid #ffffff82;
        padding: 5px 0 10px 0;
    }

    #dashboard > article > div > img{
        vertical-align: middle;
        border-style: none;
        background: #fff;
        border-radius: 50%;
        width: 20%;
        cursor: pointer;
    }

    #dashboard > article > div > h1{
        width: 80%;
        color: #fff;
        font-size: 16px;
        padding: 10px;
        margin: 0;
        font-family: 'Exo';
        letter-spacing: 1.5px;
    }

    #dashboard > article > div > h1 > span{
        font-size: 12px;
    }

    #dashboard > article > div > i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        padding: 0 3%;
    }

    #dashboard > article > ol {
        list-style: none;
        width: 100%;
        margin: 0;
        padding: 0;
        font-family: 'Roboto Mono', monospace;
        letter-spacing: 1px;
        color: #ffffffb5;
    }

    #dashboard > article > ol > li {
        width: 90%;
        padding: 5%;
        margin: 5%;
        font-size: 20px;
        cursor: pointer;
        transition: 0.3s;
        background: #fff;
        border: 2px solid #fff;
        color: #111;
    }

    #dashboard > article > ol > li:hover {
        background: #168dba;
        color: #fff;
        transition: 0.3s;
    }

    #dashboard > article > ol > li > i {
        padding: 0 5px 0 0;
    }

    #dashboard > article > ol > li > ul {
        list-style: none;
        width: 100%;
        padding: 0 0 0 0px;
        display: none;
        position: relative;
    }

    #dashboard > article > ol > li > ul > li{
        width: 100%;
        padding: 5px 5px 5px 20px;
        font-size: 16px;
        letter-spacing: 1px;
        cursor: pointer;
        position: relative;
    }

    #dashboard > article > ol > li > ul > li:hover{
        background: #ffffffde;
    }

    .drop-menu-1::before {
        content: ".";
        position: absolute;
        width: 1px;
        height: 95%;
        left: 10px;
        top: 2%;
        background: #033b54;
        color: #0000;
    }

    /**/

    #dashboard > div {
        width: 80%;
        margin-left: 20%;
        padding: 0;
    }

    #dashboard > div > ol {
        width: 100%;
        margin: 0;
        padding: 10px;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #444;
        color: #fff;
    }

    #dashboard > div > ol > li {
        width: 100%;
    }

    #dashboard > div > ol > li > form {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: stretch;
    }

    #dashboard > div > ol > li > form > input {
        width: 90%;
        margin: 0;
        padding: 1% 2%;
        border: none;
        outline: none;
        letter-spacing: 1px;
        font-size: 18px;
    }

    #dashboard > div > ol > li > form > button {
        width: 10%;
        margin: 0;
        padding: 0;
        border: none;
        justify-content: center
    }

    #dashboard > div > ol > li > ul{
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    #dashboard > div > ol > li > ul > li{
        margin: 0px 15px;
        font-size: 20px;
        cursor: pointer;
    }

    #dashboard > div > div {
        width: 100%;
        margin: 0;
        padding: 10px;
    }

    #dashboard > div > div > ol {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        list-style: none;
        flex-wrap: wrap;
    }

    /* datos de ussuarios */

    #dashboard > div > div > ul {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }

    #dashboard > div > div > ul > li {
        width: 48%;
        margin: 1%;
        padding: 1%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border: 2px solid #033b544f;
        background: #033b5430;
        transition: 0.3s;
        cursor: pointer;
    }

    #dashboard > div > div > ul > li > p {
        font-size: 18px;
        margin: 0 0 0 10px;
        padding: 0;
    }
    
    #dashboard > div > div > ul > li:hover{
        border: 2px solid #033b54;
        background: #033b54;
        transition: 0.3s;
        color:#fff;
    }

    /* */

    #dashboard-data > li {
        background: #f7f7f7!important;
        width: 48%!important;
    }

    #dashboard > div > div > ol > li{
        width: 31.3%;
        margin: 1%;
        padding: 1%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border: 2px solid #033b544f;
        background: #033b5430;
        transition: 0.3s;
        cursor: pointer;
    }

    #dashboard > div > div > ol > li > p {
        font-size: 18px;
        margin: 0 0 0 10px;
        padding: 0;
    }

    #dashboard > div > div > ol > li:hover {
        border: 2px solid #033b54;
        background: #033b54;
        transition: 0.3s;
    }

    #dashboard > div > div > ol > li:hover > p{
        color:#fff;
    }


    #closeSubContent {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #333333a6;
        z-index: -9;
        display: none;
    }

    #subContent {
        position: absolute;
        width: 0%;
        height: 100%;
        background: #f2f2f2;
        top: 0;
        right: -5%;
        padding: 2%;
        border-left: 2px solid #ffc107;
        box-shadow: -5px 0px 11px -5px #333333a3;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        opacity: 0;
        z-index: -0;
        transition: 0.2s;
    }

    #subContent > ol {
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;   
    }

    #subContent > ol > li {
        width: 92%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 2%;
        padding: 2%;
        border: 2px solid #ffc10766;
        background: #fff;
        transition: 0.3s;
        cursor: pointer;
    }

    #subContent > ol > li> p {
        margin: 0 0 0 20px;
        padding: 0;
    }

    #subContent > ol > li:hover {
        background: #ffc107;
    }

    /* contenidos dashboard */

        .active-latral-menu{
            background: #168dba!important;
            color: #fff!important;
        }

        .active-opc-sub-menu{
            border: 2px solid #033b54!important;
            background: #033b54!important;
            color: #fff!important;
        }

        .closeContent{
            display: none!important;
        }
    
    /* */

    .test-content{
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        font-family: 'Exo';
        background-image: linear-gradient(#033b5430, #fff);
    }

    .test-content > #test-navbar {
        width: 100%;
        display: flex;
        background: #444;
        list-style: none;
        margin: 0;
        padding: 0.5% 5%;
        justify-content: space-between;
    }

    .test-content > #test-navbar > li > h1 {
        color: #fff;
        font-family: 'Exo';
        margin: 0;
        padding: 0;
        font-size: 28px;
    }

    .test-content > #test-navbar > li > i {
        color: #F44336;
        font-size: 30px;
        cursor: pointer;
    }

    .test-content > #test-body {
        width: 80%;
        margin: 2.5% 10%;
        background: #ffffff;
        border-radius: 3px;
        padding: 2%;
    }

    .test-content > #test-body > div > h2{
        width: 100%;
        font-family: 'Exo';
        padding: 0 0 0 0;
        margin: 0 0 0 0;
    }

    .test-content > #test-body > div > p{
        width: 100%;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        font-size: 16px!important;
        letter-spacing: 0.5px;
    }

    .test-content > #test-body > div{
        width: 100%; 
    }

    .test-content > #test-body > ol{
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .test-content > #test-body > ol > li > div{
        width: 100px;
        padding: 5px 10px;
        background: #FFC107;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        color: #000;
        letter-spacing: 0.5px;
        cursor: pointer;
    }

    .test-content > #test-body > ol > li > ul {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .test-content > #test-body > ol > li > ul > li > i {
        margin: 0 5px;
        color: #607D8B;
        font-size: 15px;
    }

    /**/

    .test-content > #test-body > ul {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        list-style: none;
        flex-wrap: wrap;
    }

    .test-content > #test-body > ul > li{
        width: 31.3%;
        margin: 1%;
        padding: 1%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border: 2px solid #033b544f;
        background: #033b5430;
        transition: 0.3s;
        cursor: pointer;
    }

    .test-content > #test-body > ul > li > p {
        font-size: 18px;
        margin: 0 0 0 10px;
        padding: 0;
    }

    .test-content > #test-body > ul > li:hover {
        border: 2px solid #033b54;
        background: #033b54;
        transition: 0.3s;
    }

    .test-content > #test-body > ul > li:hover > p{
        color:#fff;
    }

    /**/

    .test-content > #pie-pag {
        width: 100%; 
        margin: 0;
        padding: 0 0;
        text-align: center;
    }

    .test-content > #pie-pag > p {
        margin: 0;
        padding: 1% 0;
        font-size: 16px!important;
        font-weight: 500;
        color: #0009;
    }

    .test-content > #pie-pag > p > a {
        cursor: pointer;
        color: #0009;
        text-decoration: none;
    }

    .test-content > #pie-pag > p > a:hover {
        color:#2196f3;
    }

    /* TABLES CONTENNT */

    #test-tables{
        width: 80%;
        margin: 2.5% 10%;
        background: #ffffff;
        border-radius: 3px;
        padding: 2%;
        box-shadow: 1px 1px 1px 1px #333;
    }

    /* TABLES */
    #test-tables > table{
        width: 100%;
    }

    #test-tables > table > thead > tr{
        border-bottom: 2px solid #607D8B;
    }

    #test-tables > table > thead > tr > td{
        font-weight: bold;
        font-size: 20px;
    }

    #test-tables > table .td-head-icons {
        font-size: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        border: none;
    }

    #test-tables > table .td-head-icons > .fa-eye {
        color: #4caf50;
    }

    #test-tables > table .td-head-icons > .fa-pencil-alt {
        color: #2196f3;
    }

    #test-tables > table .td-head-icons > .fa-trash-alt {
        color: #f44336;
    }

    #test-tables > table > tbody > tr > td{
        font-size: 18px;
        margin: 15px 0;
        text-align: left;
        border-bottom: 1px solid #607d8b66;
    }

    /* FORMULARIO DATA  */

    #test-tables > form > ol {
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    #test-tables > form > ol > li {
        width: 50%;
    }


/* OUR TEAM */
.our-team-cards{
    padding-top: 1%!important;
}

.our-team-cards li{
    width: 30%!important;
    position: relative!important;
    border-radius: 5px;
    transition: 0.3s;
    transform: translateY(0px);
    margin-top: 15px;
    
}

.our-team-cards li:hover{
    transition: 0.3s;
    transform: translateY(-10px);

}

.our-team-cards li:hover{
   transition: 0.3s;
}

.our-team-cards li>span{
    display: flex!important;
    flex-wrap: nowrap;
    align-items: flex-start;
    position: absolute!important;
    width: 100%;
    height: 10%;
    padding: 10px;
    background: #132c54;
    left: 0;
    letter-spacing: 0.5px;
    bottom: 0;
    border-radius: 5px;
    /* font-weight: bold; */
    line-height: 25px;
    font-size: 1.4em;
    color: #fffffff7;
    font-family: var(--font-content);
    transition: 0.3s;
}

.our-team-cards li:hover span{
    transition: 0.3s;
    height: 15%;
    cursor: pointer;
}


.our-team-cards li>img{
    filter: grayscale(0)!important;
    transform: scale(1)!important;
    transition: 0.2s;
    width: 100%!important;
    border-radius: 10px!important;
}

/**/
    .price-cards{
        padding-top: 1%!important;
        list-style: none;
    }

    .price-cards>li{
        width: 30%!important;
        position: relative!important;
        border-radius: 5px;
        transition: 0.3s;
        transform: translateY(0px);
        margin-top: 15px;
        margin: 0%!important;
        padding-bottom: 10px;
        box-shadow: 0px 4px 7px -2px #33333382;
        
    }

    .price-cards>li>h3{
        font-size: 1.5em;
        text-align: center;
        padding: 2% 2%;
        font-family: var(--font-second);
        line-height: 1.5;
        letter-spacing: 0px;
        margin: 0% 0% 6% 0%;
        color: #ffffff;
        background: #132c54;
        border-radius: 5px 5px 0px 0px;
    }

    .price-cards>li>h4{
        font-size: 1.3em;
        text-align: center;
        padding: 2% 2%;
        font-family: var(--font-second);
        line-height: 1.5;
        letter-spacing: 0px;
        margin: 0% 0% 3% 0%;
        color: #212529;
    }

    .price-cards >li:hover{
        transition: 0.3s;
        transform: translateY(-10px);
        box-shadow: 0px 4px 7px -2px #333;

    }

    .price-cards >li:hover{
       transition: 0.3s;
    }

    .price-cards ol{
        list-style: none;
        margin-bottom: 15px;
    }

    .price-cards ol>li{
        font-family: var(--font-content);
        font-size: 1em;
        margin: 5px 0px;
        padding: 0% 0%;
        letter-spacing: 0.5px;
        font-weight: bold;
        text-align: left;
        padding-left: 25px;
        position: relative;
        cursor: pointer;

    }
    
    .fa-check{
        color:#28a745;
    }
    
    .fa-times{
        color:#dc3545;
    }

    .price-cards ol>li>i{
        position: absolute;
        left: 0px;
        top: 5px;
        font-size: 0.9em;
    }

    .price-off {
        color: #212529a8;
        text-decoration: line-through;
    }

    


/**** MODAL ******/

.modal-content {
    background-color: #ffffff!important;
    padding: 2.5%!important;
    border: none!important;
}

.close{
    position: absolute;
    right: -5px;
    top: -5px;
    font-size: 30px!important;
    color: #ff0000!important;
    background: #fff!important;
    opacity: 1!important;
    z-index: 3;
    outline: none!important;
    border-radius: 37px;
}

.modal-dialog img{
    width: 115%;
}

.logo-modal{
    width: 50%!important;
    margin: 2% auto;
}

.modal-dialog h2 {
    font-size: 1.5em;
    text-align: left;
    padding: 10% 0% 5% 9%;
    font-family: var(--font-second);
    letter-spacing: 0px;
    margin-bottom: 0;
    color: #212529;
    line-height: 34px
}

.modal-dialog h3 {
    font-size: 1.4em;
    text-align: center;
    padding: 5% 0%;
    font-family: var(--font-second);
    letter-spacing: 0px;
    margin-bottom: 0;
    color: #212529;
}


.modal-dialog form {
    /*background-image: url('../images/img/happy-woman-with-phone.jpg');
    background-position: center;
    background-size:100% auto;
    background-repeat: no-repeat;*/
    background: #fff;
    width: 95%;
    margin: 0% 3% 3% 3%;
    padding: 10px;
    border-radius: 5px;
    box-shadow: -4px 3px 5px -2px #11111152;
}

.modal-dialog form label{
    width: 100%;
    font-family: var(--font-content);
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 1px;
    color: #1d1d1d;
    padding: 2px 3px;
    margin: 0px 0px 0px 0px;
    border-radius: 3px;
    border:none;
}

.modal-dialog form input{
    width: 100%;
    font-family: var(--font-content);
    font-size: 1.3em;
    letter-spacing: 1px;
    color: #1d1d1d;
    padding: 3px 10px;
    margin: 0px 0px 5px 0px;
    border-radius: 3px;
    border:none;
    background: #ececec;
    outline: none;
}

.modal-dialog form select{ 
    width: 100%;
    font-family: var(--font-content);
    font-size: 1.3em;
    letter-spacing: 1px;
    color: #1d1d1d;
    padding: 3px 10px;
    margin: 0px 0px 5px 0px;
    border-radius: 3px;
    border:none;
    background: #ececec;
    outline: none;
}

.modal-dialog form textarea{
    width: 100%;
    font-family: var(--font-content);
    font-size: 1.3em;
    letter-spacing: 1px;
    color: #1d1d1d;
    padding: 2px 3px;
    margin: 0px 0px 5px 0px;
    border-radius: 3px;
    border:none;
    background: #ececec;
    outline: none;
}

.modal-dialog form button{
    width: 50%;
    font-family: var(--font-content);
    font-size: 1.4em;
    letter-spacing: 1px;
    color: #ffffff;
    padding: 4px 4px;
    margin-left: 25%;
    margin-top: 5px; 
    border-radius: 5px;
    border: none;
    background: #28a745;
    outline: none;
    transition: 0.2s;
    transform: scale(1);
}

.modal-dialog form button:hover{
    transition: 0.2s;
    transform: scale(1.03);
    color: #ffdf00;
    box-shadow: -4px 3px 5px -2px #11111152;
}


.login-content ul{
    list-style: none;
    margin: 0%;
    padding: 0%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.login-content ul>li{
    cursor: pointer;
    width: 49.5%;
    font-family: var(--font-content);
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 1px;
    color: #1d1d1d;
    padding: 2px 3px;
    margin: 0px 0px 0px 0px;
    border-radius: 3px 3px 0px 0px;
    border: 1px solid #0000002e;
    background: #0000001f;
    text-align: center;
}

.login-btn-active{
    background: rgb(0 123 255 / 25%)!important;
}

.login-content ol{
    width: 100%;
    position: relative;
    margin: 0%;
    padding: 0%;
    list-style: none;
}

.login-content ol>li{
    width: 100%;
    display: none;
    position: absolute;
    left: 0;
    top: 5px;
    border: 1px solid #0000002e;
    margin-bottom: 5px;
    border-radius: 5px;
}
/**user content*/

.user-content>h2 {
    font-size: 1.5em;
    text-align: left;
    padding: 2% 0% 2% 0%;
    font-family: var(--font-second);
    letter-spacing: 0px;
    margin-bottom: 2%;
    color: #212529;
    line-height: 34px;
    border-bottom: 2px solid rgb(0 125 252 / 37%);
}

.user-content>ul{
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    list-style: none;
    justify-content: space-between;
}

.user-content>ul>li>img{
    width: 100%;
}

.user-content>ul>li>p{
    width: 100%;
    padding: 2px 30px;
    margin: 0;
}

.user-content>div>button{
    font-family: var(--font-second);
    border: none;
    border-radius: 3px;
    background: #ff0000;
    color: #fff;
    padding: 5px 15px;
    margin: 5px 0px 0px 0px;
    letter-spacing: 1px;
}

/**/
.active-form{
    display: block!important;
    position: relative!important;
}

.login-content ol>li>form>h3{
    font-size: 1.4em;
    text-align: center;
    padding: 4% 0%;
}

.login-content ol>li>form>button{
    width: 33.3%;
    font-family: var(--font-content);
    font-size: 1.3em;
    letter-spacing: 0.5px;
    color: #ffffff;
    padding: 5px 10px;
    margin-left: 33.3%;
    margin-top: 15px; 
    border-radius: 5px;
    border: none;
    background: #28a745;
    outline: none;
    transition: 0.2s;
    transform: scale(1);
}

.user-content{

}

.team-info h2 {
    font-size: 1.8em;
    text-align: left;
    padding: 5% 0% 5% 10%;
    font-family: var(--font-second);
    letter-spacing: 0px;
    margin-bottom: 0;
    color: #212529;
}

.team-info p {
    font-family: var(--font-content);
    width: 90%;
    padding: 0% 5% 0% 5%;
    margin: 0%;
    font-size: 1.1em;
    letter-spacing: 0.5px;
}

.team-info div{
    width: 90%;
    margin: 2.5% 5% 2.5% 5%;
    height: 250px;
    background-position: center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
}

.team-info ul {
    font-family: var(--font-content);
    width: 100%;
    padding: 0% 5% 0% 15%;
    margin: 0%;
    font-size: 1.1em;
    letter-spacing: 0.5px;
    list-style: none;
}

.team-info ul>li {
    position: relative;
    margin-bottom: 10px;
}

.team-info ul>li>i{
    position: absolute;
    left: -15px;
    top: 3px;
    font-size: 1em;
    color: rgb(0 123 255 / 50%);
}

.content-blog{
    margin-bottom: 20px;
}


.content-blog h2 {
    font-size: 2em!important;
}

.content-blog p {
    font-size: 1.2em!important;
    letter-spacing: 0.5px!important;
}

.content-blog p>span{
    font-size: 0.8em!important;
    font-weight: bold;
    padding: 1px 7px!important;
    margin-top: 20px;
    letter-spacing: 0.3px;
    border: 1px solid rgb(0 123 255 / 50%);
    cursor: pointer;
    transition: 0.3s;
}

.content-blog p>span:hover{
    background: rgb(0 123 255 / 50%);
    transition: 0.3s;
}

.list-01{
    font-family: var(--font-content);
    width: 100%;
    padding: 0% 0% 0% 0%;
    margin: 2% 0% 0% 0%;
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    
}

.list-01 li {
    width: 50%;
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    font-size: 1.5em;
    color: #eee;
}

.list-01 li>i{
    position: absolute;
    left: 5px;
    top: 6px;
    font-size: 1em;
    color: #eee;
}

.list-01 li > p {
    width: 100%;
    padding-left: 0px;
    position: relative;
    margin: 3px 0px;
    letter-spacing: 1.5px;
    font-size: 0.8em;
    color: #eee;
    font-weight: normal;
}


/****HEADER ******/

    /* HEAD UP */
        .head-0{
            padding: 0.5% 2%;
            margin: 0;
            position: relative;
            width: 100%;
            background: #093a48;
        }

        .head-0 ul {
            display: flex;
            width: 100%;
            padding: 0;
            margin: 0;
            justify-content: flex-end;
            align-items: center;
        }

        .head-0 ul > li{
            position: relative;
            list-style: none;
            margin: auto 20px;
            font-family: var(--font-content);
            font-size: 1em;
            cursor: pointer;
            color: #fffffff7;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

    /* HEAD */
        .head{
            padding: 0% 2%;
            margin: 0;
            position: fixed;
            width: 100%;
            z-index: 2;
            background: #fff;
            transition: 0.5s;   
            z-index: 999;
        }

    /* CONTAINER HEDER */

        .head .container-header{
            display: flex;
            align-items: center;
        }

        .head .container-header > img{
            margin: 0;
            width: 65px;
            cursor: pointer;
        }
        
        .head .container-header > a{
            color: #1593c4;
            text-decoration: none;
            font-size: 25px;
            width: 30%;
            font-weight: bold;
            letter-spacing: 1px;
            font-family: 'Exo';
        }  

        .head .container-header ul{
            display: flex;
            width: 70%;
            padding: 0;
            margin: 0;
            justify-content: space-evenly;
            align-items: center;
            background: #fff;
        }

        .head .container-header ul > li{
            position: relative;
            list-style: none;
            margin: 0;
            font-family: var(--font-content);
            font-size: 16px;
            cursor: pointer;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #111;
            padding: 0%;
            height: 64px;
            display: flex;
            width: 20%;
            align-items: center;
            justify-content: center;
        }

        .head .container-header ul > li:hover{
            color: #f6f6f6;
            transition: 0.3s;
            background: #093a48;
            border-top: 1px solid#fff;
        }
        

        /* ENABLE HEAD */
            .enable-head{
                transition: 0.2s;
                background: #fff;
                opacity: 1;
                top: 0;
                box-shadow: 0 5px 30px rgb(0 0 0 / 10%);
            }

            .enable-head li{
                transition: 0.3s;
            }
            .enable-head li:hover{
                color: #fff;
                transition: 0.3s;
            }

        /* DROPDOWN */
            .head .container-header ul>li:hover ol{
                top: 64px;
                transition: 0.2s;
                opacity: 1;
                z-index: 0;
            }

            .head .container-header ul > li > ol{
                position: absolute;
                left: 0;
                top: 0px;
                background: #093a48;
                margin: 0;
                padding: 0;
                list-style: none;
                width: 200%;
                box-shadow: 0px 5px 6px -2px #33333391;
                transition: 0.2s;
                opacity: 0;
                z-index: 0;
            }

            .head .container-header ul > li > ol >li{
                padding: 5% 8%;
                border-left: 2px solid #013855;
                border-top: 1px solid #33333326;
                transition: 0.3s;
                color: #fff;
            }

            .head .container-header ul > li > ol >li:hover{
                padding: 5% 8%;
                border-left: 2px solid #F44336;
                background: #fff;
                transition: 0.2s;
                color: #093a48;
            }

        /**/
        
            .head .container-header ul > .btn-whatsapp-head {
                background: #28a745!important;
                color: #fff;
                font-size: 30px;
                border: none!important;
            }

            .head .container-header ul > .btn-whatsapp-head:hover {
                color: #ffc107;
            }

/**/
.header-pc{
    width: 100%;
    margin: 0%;
    padding: 0%;
    position: fixed;
    background-color: #fff;
    top: 0%;
    font-family: 'Roboto Condensed', sans-serif;
    z-index: 5;
    box-shadow: 0px -5px 14px 1px #000;
}

.content-head-1{
    width: 100%;
    padding: 0.5% 5%;
    margin: 0%;
    background-color: #111;
    display: flex;
}

.content-head-1 p{
    margin: 0% 1%;
    padding: 0%;
    color: #ffffffb8;
    letter-spacing: 0.5px;
    font-size: 18px;
    width: fit-content;
}

.content-head-2{
    width: 100%;
    padding: 0% 10%;
    margin: 0%;
    background-color: #fff;
    justify-content: space-between;
    text-align: center;
    display: flex;
}

.content-head-2 img{
    width: 13%;
    padding: 1%;
   margin: auto 0%;
    transition: 0.5s;
}

.logo-action-active{
    transition: 0.5s;
    width: 10%!important;
}

.menu-pc{
    display: flex;
    list-style: none;
    width: 100%;
    justify-content:flex-end;
    margin: auto 0%;
}

.menu-pc li{
    margin: 0.5% 1.5%;
    cursor: pointer;
    font-size: 18px;
    letter-spacing: 0px;
}

.menu-pc li:hover {
    color: #713230;
}
#add-lead{
    font-size: 1.1em;
    display: flex;
    background: #fff;
    border-radius: 20px;
    padding: 0.5% 2%;
    position: absolute;
    right: 3%;
    top: 15%;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 12%), 0 1px 6px 0 rgb(0 29 124 / 5%);
    border: 1px solid #eee;
    align-items: center;
    outline: none;
    text-decoration: none;
}

.menu-opc-active{
    color: #713230;
    font-weight: bold;
    letter-spacing: 0;
}

.btn-menu-mobile{
    display: none;
    margin: 0%;
    border: none;
    outline: none!important;
    border-radius: 5px;
    background-color: #0000;
    font-size: 22px;
    width: 100%;
    text-align: right;
    padding-right: 5%;
}

.content-colappse{
    width: 90%;
    margin: auto;
    padding: 2% 0% 0% 0%; 
    background-color: #fff;
}

.menu-mobil{
    margin: 0%;
    padding: 0%;
    list-style: none;
    text-align: left;
}

.menu-mobil li{
    margin-bottom: 1%;
    font-size: 20px;
}


/* CONTENT ADMIN  */

.content-jobboard table{
    font-family: 'Roboto Condensed', sans-serif;
    width: 100%;
    margin: 0%;
    font-size: 1.3em;
    text-align: center;
    background: #fff;
    border-radius: 5px;
}

.content-jobboard td{
    padding: 1% 1%;
}

.content-jobboard td>strong{
    font-size: 0.8em;
    color: #333;
}

.content-jobboard i{
    margin: 5px 10px;
    cursor: pointer;
}

.content-jobboard span:hover{
    color: #f44336;
}

.content-vacant-disabled{
    display: none!important;
}

.content-jobboard-2 {
    margin: 10% 0% 0% 0%;
    padding: 0% 5%;
    width: 100%;
}
/*** dropdown-w-one ***/

#dropdown-w-one{
    position: relative;
}

#dropdown-w-one div{
    position: absolute;
    width: 270px;
    padding: 0% 0% 0% 0%;
    margin: 0% 0% 0% 0%;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0s;
    transform: translateY(15px);
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    top: 170%;
    left: 0%;
}

#dropdown-w-one:hover div{
    opacity: 1;
    visibility: visible;
    padding: 0% 0% 0% 0%;
    transition: all 0.3s ease 0s;
    transform: translateY(0px);
}

#dropdown-w-one ul{
    display: block;
    margin: 0% 0% 0% 0%;
    padding: 0% 0%;
    width: 100%;
}

#dropdown-w-one li{
    font-family: var(--font-content);
    width: 100%;
    padding: 2% 5% 2% 5%;
    margin: 2% 0% 2% 0%;
    color: #333!important;
    text-align: left;
    background-color: #fff;
    border-radius: 0px;
    font-size: 1em;
    position: relative;
    font-weight: 500;
}


/*****anime keyframes ***/
.pulsingButton {
      text-align: center;
      white-space: nowrap;
      display: block;
      box-shadow: 0 0 0 0 #28a745a1;
      border-radius: 10px;
      background-color: #28a745;
      -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      font-weight: normal;
      font-family: sans-serif;
      text-decoration: none !important;
      color: #ffffff;
      transition: all 300ms ease-in-out;
}

/* Hover animated */
a.pulsingButton:hover {
      -webkit-animation: none;
      -moz-animation: none;
      -ms-animation: none;
      animation: none;
      color: #ffffff;
}

    /* Animation */
@-webkit-keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

@-moz-keyframes pulsing {
    to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

@-ms-keyframes pulsing {
    to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

@keyframes pulsing {
    to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}
.titles{
    position: absolute;
    top: 25%;
    color: #fff;
    z-index: 9;
    left: 0;
    right: 0;
}
.titles h1{
    font-family: var(--font-three);
    font-size: 3.3em;
    text-align: left;
    padding: 0% 5% 0% 5%;
    font-weight: bold;
    letter-spacing: 1px;
}


.titles p{
    font-family: var(--font-content);
    font-size: 1.8em;
    text-align: left;
    padding: 0% 0% 0% 5%;
    color: #fffffff7;
    letter-spacing: 0.5px;
}

.titles p > button{
    font-family: var(--font-content);
    font-size: 25px;
    margin: 20px 0px 0px 0px;
    padding: 10px 20px;
    color: #111;
    letter-spacing: 2px;
    border: none;
    border-radius: 5px;
    background: #ffc107;
    transition: 0.2s;
    outline: none;
    font-weight: bold;
    width: fit-content;
}

.titles p > button:hover{
    background: #093a48;
    transition: 0.2s;
    color: #fff;
}

.ml11 {
  font-weight: 800;
}
.ml11 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml11 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 100%;
  width: 3px;
  background-color: #e9110c;
  transform-origin: 0 50%;
}

.ml11 .line1 { 
  top: 0; 
  left: 0;
}

.ml11 .letter {
  display: inline-block;
  line-height: 1em;
      color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #eee;
}
.slider-principal{
    position: relative;
}
.slider-principal h1{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30%;
    margin: 0% auto;
    color: #fff;
    text-align: center;
    background-color: #0000;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 40%);
    letter-spacing: 0px;
    z-index: 1;
    text-align: center;
    width: 100%;
    padding: 0% 20%;
}



.slider-principal button{
    display: none;
}
.slider-principal .fondo{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0000;
    opacity: 0.42;
    z-index: 0;
}
/******ANIMATED SLIDER VERTICAL *****/

.title-1{
    font-size: 2.5em;
    padding: 2% 4%;
    font-family: var(--font-second);
    line-height: 1.5;
    letter-spacing: 0px;
    margin-bottom: 0;
    color: #0d449c;
    text-align: center;
}

.w-img-s1{
    width: 80%;
    margin: 5% 5%;
    border-radius: 5px;
    box-shadow: 3px 3px 10px 0px #0000007a;
    transition: 0.3s;
    transform: scale(1);
}

.w-img-s1:hover{
    width: 80%;
    margin: 5% 5%;
    border-radius: 5px;
    box-shadow: 3px 3px 10px 0px #0000007a;
    transition: 0.3s;
    transform: scale(1.02);
}


.container{
    position: relative;
    margin: 2.5% 0% 0% 0%;
}

.container img{
    padding: 0% 0%;
    position: relative;
}

.container svg{
    position: absolute;
    right: 10%;
    top: 0;
}

.fill-primary {
    fill: #ea110c;
}
.blink-animation {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
    animation: blink-animation 1s steps(5, start) infinite;
    visibility: visible;
}
.lg\:block {
    display: block;
}
.scroll-bg {
    -webkit-animation-name: scrollSmall;
    animation-name: scrollSmall;
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
#colors{
    color: #eee;
    letter-spacing: 0;
    text-align: left;
    padding: 0;
    padding-right: 0%;
}

.container-us{

}
.container-us h2{
    font-size: 2.5em;
    text-align: left;
    padding: 2% 0%;
    font-family: var(--font-second);
    line-height: 1.5;
    letter-spacing: 0px;
    margin-bottom: 0;
    color: #212529;
}

.container-us h3{
    font-size: 1.5em;
    text-align: left;
    padding: 2% 0%;
    font-family: var(--font-second);
    line-height: 1.5;
    letter-spacing: 0px;
    margin-bottom: 0;
    color: #212529;
}
.container-us p{
     font-size: 1.5em;
    margin: 0% 0%;
    padding: 0% 2%;
    /* font-weight: bolder; */
    letter-spacing: 1px;
}

.cta-02 {
    font-family: var(--font-content);
    font-size: 1em;
    margin: 3% 0% 2% 0%;
    padding: 0.5% 5% 0.5% 5%;
    color: #212529;
    font-weight: bolder;
    letter-spacing: 0.7px;
    border: 2px solid #0000;
    border-radius: 50px;
    background: #ffc107;
    transition: 0.2s;
    outline: none!important;
}

.cta-02:hover {
    transition: 0.2s;
    background: #ffffff;
    border: 2px solid #ffc107;
}

.cta-03 {
    font-family: var(--font-content);
    font-size: 1.5em;
    margin: 2% 0% 2% 0%;
    padding: 0.5% 5% 0.5% 5%;
    color: #212529;
    font-weight: bolder;
    letter-spacing: 0.7px;
    border: 2px solid #0000;
    border-radius: 50px;
    background: #ffc107;
    transition: 0.2s;
    outline: none!important;
}

.cta-03:hover {
    transition: 0.2s;
    background: #ffffff;
    
    border: 2px solid #ffc107;
}

.cta-04 {
    font-family: var(--font-content);
    width: 75%;
    font-size: 1.3em;
    margin: 2% 0% 2% 0%;
    padding: 0.5% 5% 0.5% 5%;
    color: #212529;
    font-weight: bolder;
    letter-spacing: 0.7px;
    border: 2px solid #0000;
    border-radius: 5px;
    background: #ffc107;
    transition: 0.2s;
    outline: none!important;
}

.cta-04:hover {
    transition: 0.2s;
    background: #ffffff;
    color: #ffc107;
    border: 2px solid #ffc107;
}



#content{
    color: #eeeeeecf!important;
    padding: 0% 3%!important;
}

.container-us ul{
    width: 100%;
    padding: 0% 8%;
    margin: 5% 0% 0% 0%;
    display: flex;
    justify-content: space-between;
}
.container-us ul>li{
    margin: 0% 0%;
    list-style: none;
    font-size: 1.1em;
    width: 30%;
    text-align: center;
    color: #000000bf;
    font-weight: 400;

}
.container-us ul>li>i{
    color: #713230;
    font-size: 3.3em;
    margin-bottom: 20px;
}


/** */
.box-notes{
    background: #409fc838;
    border-radius: 5px;
    padding: 2% 2%!important;
}



.container-black{
    background-image: url(../images/img/work.jpg);
    width: 100%;
    position: relative;
    padding: 0% 5%;
    margin: 7% 0% 0% 0%;
    background-size: cover;
}

.container-black img {
    width: 70%;
    margin: -15% 15% 0% 15%;
}

.container-black h2{
    font-size: 2.5em;
    text-align: left;
    padding: 2% 0%;
    font-family: var(--font-second);
    line-height: 1.5;
    letter-spacing: 0px;
    margin-bottom: 0;
    color: #fffffff7;
}

.container-black p{
    font-size: 1.5em;
    margin: 0% 0%;
    padding: 0% 0%;
    color: #fffffff7;
    /* font-weight: bolder; */
    letter-spacing: 1px;
}

.container-black span{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000f1fcc;
}

.container-opc{
    color: #eee;
    background: #713230;
    position: absolute;
    width: 90%;
    text-align: center;
    /* left: 0; */
    right: 0;
    /* margin: 0 auto; */
    /* top: 0; */
    border-radius: 10px;
    padding: 8% 5%;
    box-shadow: 0px -1px 20px 0px rgb(0 0 0 / 48%);
    z-index: 0;
    bottom: -53%;
}
.container-opc ul>li>i{
    color: #fff;
    padding-right: 10px;
}
.container-opc h3{
    font-family: var(--font-content);
    text-align: left;
    margin: 4% 0%;
}
.container-opc ol{
    padding: 0;
    text-align: left;
}

.container-opc ol>li{
    list-style: none;
    margin: 3% 0%;
    font-size: 1.4em;
}


.fondo-image{
    margin-top: 5%;
    background-image: url(../images/img/work.jpg);
    background-size: cover;
}
.fondo-0{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.9;
    z-index: 0;
    left: 0;
}
.container-services{
    padding: 0%;
    margin: 5% 0%;
}
.container-services h2{
    font-size: 2.5em;
    text-align: left;
    padding: 0% 4%;
    font-family: var(--font-second);
    line-height: 1.5;
    letter-spacing: 0px;
    margin-bottom: 2%;
    color: #212529;
}

.container-services p{
    font-size: 1.5em;
    margin: 0% 0%;
    padding: 0% 10%;
    /* font-weight: bolder; */
    letter-spacing: 1px;
}

.container-services ul{
    margin: 0;
    margin-bottom: 5%;
    display: flex;
    padding: 0% 0%;
    flex-wrap: wrap;
}
.container-services ul>li{
    width: 25%;
    list-style: none;
    text-align: center;
    border-radius: 5px;
    position: relative;
    margin: 0 auto;
    transition: 0.3s;
    cursor: pointer;
}

.container-services ul>li>img{
    width: 45%;
    padding: 2.5%;
    margin-bottom: 2.5%;
    position: relative;

}

.container-services ul>li:hover span{
    transition: 0.3s;
    opacity: 1;
    transform: translateY(-45px);
}

.container-services ul>li:hover{
    transition: 0.3s;
    transform: scale(1.1);
}

.container-services ul>li>span{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 40%;
    left: 25%;
    border-radius: 50%;
    background: #adb5db;
    z-index: 0;
    transition: 0.3s;
    opacity: 0.1;
}

.container-services ul>li>h3{

}
.container-services ul>li>p{
    font-weight: bold;
    line-height: 25px;
    font-size: 1.1em!important;
    color: #212529;
}


.clientes{
    widows: 100%;
    display: flex;
    flex-wrap: wrap;
}

.clientes li{
    width: 11%!important;
}

.clientes li>img{
    width: 100%!important;
    filter: grayscale(75%);

}

.container-work{
    padding: 0%;
    margin: 2% 0% 5%;
}
.container-work h2{
    font-size: 2.5em;
    text-align: center;
    padding: 0% 4%;
    font-family: var(--font-second);
    line-height: 1.5;
    letter-spacing: 0px;
    margin:5% 0%;
    color: #212529;
}

.container-work ul{
    margin: 0;
    display: flex;
    padding: 0% 2.5%;
}
.container-work ul>li{
    width: 32%;
    list-style: none;
    text-align: center;
    background: #fff;
    border-radius: 5px;
    position: relative;
    margin: 0 auto;
}
.container-work ul>li>img{
    width: 100%;
    filter: grayscale(1);
    transform: scale(1);
    transition: 0.2s;
    border-radius: 4px;
}
.container-work ul>li>img:hover{
    filter: grayscale(0);
    transition: 0.2s;
    cursor: pointer;
}


.container-socios{
    padding: 0%;
    margin: 0% 0% 0%;
}
.container-socios h2{
    text-align: center;
    font-size: 2.5em;
    padding: 5% 0% 3%;
}

.container-socios ul{
    margin: 0;
    display: flex;
    padding: 1% 5%;
}
.container-socios ul>li{
    width: 20%;
    list-style: none;
    text-align: center;
    position: relative;
    margin: 0 auto;
}
.container-socios ul>li>img{
    width: 40%;
    filter: grayscale(1);
    transition: 0.3s;
}
.container-socios ul>li>img:hover{
    transition: 0.3s;
    filter: grayscale(0);
}

.container-contact{

}

.container-contact h3{
    font-size: 1.8em;
    text-align: left;
    padding: 3% 0% 2.5% 10%;
    font-family: var(--font-second);
    line-height: 1.5;
    letter-spacing: 1px;
    margin-bottom: 2%;
    color: #eee;
}

.container-contact form{
    width: 100%;
    padding: 0% 10%;
    background: #111;
    font-family: var(--font-content);
}

.container-contact input, select, textarea {
    font-family: var(--font-content);
    width: 100%;
    margin: 3% 0% 3% 0%;
    border: 0.5px solid #ddd;
    padding: 1%;
    font-size: 1.3em;
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    color: #fff;
}
.container-contact select, option {
    background: #111;
    color: #eee;
    margin: 3% 3% 3% 0%;
}
.container-contact label{
    color: #fff;
    margin-bottom: 0;
    font-size: 1.3em;
}
.container-contact button{
    font-family: var(--font-content);
    font-size: 1.5em;
    margin: 5% 0% 5% 0%;
    padding: 1.5% 10% 1.5% 10%;
    color: #ffffff;
    letter-spacing: 0.7px;
    border: 2px solid #0000;
    border-radius: 50px;
    background: #28a745e0;
    transition: 0.2s;
    outline: none;
}

.container-contact button:hover {
    transition: 0.2s;
    background: #ffffff;
    color: #28a745e0;
    border: 2px solid #28a745e0;
}

.container-end{
    color: #eee;
    background: #132c54;
    position: absolute;
    width: 70%;
    text-align: center;
    left: 0;
    right: 0;
    top: 0;
    border-radius: 0px 0px 15px 0px;
    padding: 2% 5%;
    box-shadow: 0 5px 30px rgb(0 0 0 / 10%);
    z-index: 0;
}
.container-end ul{
    padding: 0;
}
.container-end li{
    list-style: none;
    text-align: left;
    font-size: 1.3em;
    margin: 2.5% 0%;
    cursor: pointer;
    transition: 0.3s;
}

.container-end li:hover{
    color: #ffc107;
    transition: 0.3s;
}

#rotate{
    transform: rotate(0deg);
}

.modal-work {
    position: relative;
}
.modal-work span{
    position: absolute;
    right: 2%;
    top: 2%;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 100%;
    -webkit-box-shadow: 8px 8px 18px 0px rgb(42 67 113 / 30%);
    text-align: center;
    align-content: center;
    align-items: center;
    align-self: center;
    cursor: pointer;
    z-index: 1;
}
.modal-work span>i{
    align-content: center;
    align-self: center;
    align-items: center;
    margin: 30%;
    color: #333;
    font-size: 1em;
}
.modal-work h1{

}
.modal-work button{
    font-family: var(--font-content);
    cursor: pointer;
    border: 1px solid var(--color-title);
    color: var(--color-title);
    border-radius: 10px;
    background: #0000;
    width: 35%;
    padding: 1% 0%;
    outline: none;
    text-decoration: none;
    margin: 4% 0%;
    font-size: 1.22rem;
    transition: 0.3s;
}
.modal-work button:hover{
    transition: 0.3s;
    background: var(--color-title);
    color: #fff;
}

.modal-work form{
    margin: 10% 0%;
    padding: 0% 0%;
}

.modal-work form>label{
    color: #111;
}

.modal-work form>input{
    width: 80%;
    border: 1px solid #c5c5c5;
    border-radius: 5px;
}

.vacant-description{
    padding: 7% 5%;
    overflow-y: scroll;
    width: 100%;
    height: 60vh;
    position: relative;
}
.vacant-description p{
    font-size: 1em;

}
.vacant-description b{
    position: absolute;
    bottom: -25%;
    right: 5%;
    color: #a0a0a0;
    font-weight: 400;
}

    /*** MODAL VACANTE ***/

    .content-modal-vacant{
        width: 100%;
        margin: 0%;
        padding: 2% 4%;
    }

    .close-modal{
        right: 20px;
        top: 10px;
        position: absolute;
        font-size: 22px;
    }

    .close-modal i{
        cursor: pointer;
    }
    .content-modal-vacant span{
    font-family: var(--font-content);
        width: 100%;
        margin: 0% 0% 1% 0%;
        padding: 0%;
        font-size: 16px;
        letter-spacing: 0px;
        font-weight: bold;
    }

    .content-modal-vacant h1{
    font-family: var(--font-content);
        width: 100%;
        margin: 0% 0% 2% 0%;
        padding: 0%;
        font-weight: bold;
        font-size: 1.5em;
        letter-spacing: .5px;
    }

    .content-modal-vacant h2{
    font-family: var(--font-content);
        width: 100%;
        margin: 0% 0% 2% 0%;
        padding: 0%;
        font-size: 22px;
        letter-spacing: .5px;
    }

    .content-modal-vacant h3{
    font-family: var(--font-content);
        width: 100%;
        margin: 0% 0% 1% 0%;
        padding: 0%;
        font-size: 22px;
        font-weight: bold;
        letter-spacing: .5px;
    }

    .content-modal-vacant h4{
    font-family: var(--font-content);
        width: 100%;
        margin: 0% 0% 2% 0%;
        padding: 0% 0% 2% 0%;
        font-size: 20px;
        letter-spacing: .5px;
        border-bottom: 1.5px solid #ff980061;
    }


    .content-modal-vacant input, textarea{
        outline: none;
        margin: 0% 0% 2% 0%;
        padding: 1% 2%;
        border: 1.5px solid #8989898a;
        border-radius: 5px;
        width: 100%;
        font-size: 20px;
    }

    .content-modal-vacant textarea{
        height: 125px;
    }
    .content-modal-vacant select{
        outline: none;
        margin: 0% 0% 2% 0%;
        padding: 1% 2%;
        border: 1.5px solid #8989898a;
        border-radius: 5px;
        width: 100%;
        font-size: 20px;
    }

    .content-modal-vacant button{
        font-size: 1.3em;
        border: none;
        outline: none;
        border-radius: 5px;
        padding: .5% 4%;
        margin: 0%;
        letter-spacing: 0.1px;
        background-color: #713230;
        outline: none!important;
        text-decoration: none!important;
        color: #fff;
        border: 1px solid #713230;
        width: 50%;
    }


.footer-W{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin: 0% 0% 0% 0%;
    padding: 0.5% 0% 0.5% 0%;
    background-color: #111111f0;
    text-align: center;
    justify-content: center;
}

.copyrigt{
    font-family: var(--font-content);
    color: #ffffff85;
    font-size: 0.9em!important;
    margin: 0.5% auto;
}

.menu-header{
    position: relative;
    text-align: center!important;
    padding: 5% 0% 5% 0%!important;
    margin: 2.5% 0%;
    font-size: 1.6em!important;
    border: 2px solid #33333361;
    border-style: dotted;
    border-radius: 5px;
    transition: 0.3s;
}

.menu-header:hover{
    transition: 0.3s;
    background: #ffc107;
}

.menu-header ol{
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.7em;
    text-align: left;
}

.menu-header ol>li{
    width: 80%;
    padding: 2% 5%;
    background: #fff;
    margin: 1% 10%;
    border-radius: 5px;
}


.menu-header:hover ol{
    display: block;
    transition: 0.3s;
}

#type-perfil{
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: center;
}
#type-perfil li{
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0% 0%;
    padding: 2%;
    border-radius: 4px;
    box-shadow: 0px 0px 10px -4px #333;
    transition: 0.3s;
    transform: translateY(0px);
    background: #fff;
    border-left: 4px solid #013855;
}

#type-perfil li>img{
    width: 30%;
}

#type-perfil li>p{
    width: 70%;
    padding-left: 1em;
    font-weight: bold;
    font-size: 1.5em!important;
}


#type-perfil li:hover{
    transition: 0.3s;
    transform: translateY(-10px);
    box-shadow: 0px 0px 10px -2px #333;

}


#pruebas-psico{
    width: 23%!important;
}


.desktop-wm {
    display: block;
}
.mobile-wm {
    display: none;
}
/******RESPONSIVE *******/

@media(max-width: 2560px){
    body{
        font-size: 20px!important;
    }
    .container {
        max-width: 1560px!important;
    }
    .modal-work span {
        width: 50px;
        height: 50px;
    }
}
@media(max-width:1440px){
    body{
        font-size: 15px!important;
    }
    .container {
        max-width: 1140px!important;
    }
    .modal-work span {
        width: 40px;
        height: 40px;
    }
}
@media( max-width: 1024px ){
}
@media(max-width: 990px ){

    .desktop{ display: none;  visibility: hidden;}
    .mobil{ display: block;  visibility: visible;}

    .title-1{
        font-size: 2em;
        padding: 2% 4%;
        font-family: var(--font-second);
        line-height: 1.5;
        letter-spacing: 0px;
        margin-bottom: 0;
        color: #4777f4;
        text-align: left;
    }

    .enable-head{
        background: none!important;
    }
    .head{
        padding: 0;
    }   
    .head .container-header{
        grid-template-columns: 100%;
    }

    .head .container-header ul{
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
    }
    
    .head .container-header ul>li{
        margin: 0;
        font-size: 1.4em;
    }
    .head .container-header ul>li>button {
        border-radius: 0;
    }

    .head .container-header ul > li:hover {
        background: #093a4800;
        border-top: 1px solid#0000;
    }

    .container svg {
        position: absolute;
        right: 0%;
        top: 0;
        width: 30%;
    }
    .container-us h2 {
        line-height: 1.2;
        font-size: 2em;
    }

    .container-opc{
        position: relative;
        bottom: -10%;
        width: 100%;
    }
    .container-end{
        width: 100%;
        top: auto;
        bottom: 0;
        position: relative;
    }

    .container img {
        width: 90%;
        margin: auto;
        padding: 0% 0%;
        position: relative;
        z-index: 2;
        bottom: 0;
    }

    .clientes li {
    width: 33%!important;
}

    .container-contact iframe{
        height: 380px;
    }
    .container-contact form {
        width: 100%;
        padding: 10% 5%;
    }
    .titles{
        top: 30%;
    }
    .titles h1{
        font-size: 2.5em;
        text-align: left;
        padding: 0% 5%;
    }

    .titles p > button {
        font-size: 20px;
    }

    .head-0{
        padding: 0.95rem 2rem;
        margin: 0;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 2;
        background: #111;
        display: flex;
    }
    .container-services ul>li {
        width: 100%;
    }
    .container-services ul>li>img {
        width: 50%;
    }
    .container-services h2 {
        padding: 10% 0%;
        font-size: 2em;
    }
    .container-work h2 {
        padding: 10% 0%;
        font-size: 2em;
    }
    .container-work ul>li {
        width: 100%;
        margin: 10% 0%;
    }
    .container-contact h3 {
        padding: 10% 0% 0%;
    }
    .modal-dialog{
        max-width: 90%!important;
        top: 5%!important;
    }
    .modal-work h1 {
        font-size: 1.7em;
        padding: 5%;
    }
    .modal-work p{
        padding: 0% 5%;
        margin-bottom: 0;
    }
    .modal-work button {
        width: 80%;
        margin: 10%;
    }
    .modal-work span {
        z-index: 1;
    }
    #colors{
        padding: 10% 0% 5%;
    }
    .container-opc ul>li {
        list-style: none;
        margin: 1.5% 0%;
        font-size: 1.2em;
        padding-left: 10%;
    }
    .container-opc ul>li>i {
        position: absolute;
        left: 5%;
        padding-top: 2%;
    }
    .container-contact input, select, textarea{
        margin: 5% 0% 5% 0%;
    }

    /**/
    #landing > #sec01 {
        padding: 5% 5%;
    }

    #landing > #sec02 {
        padding: 5% 5%;
    }

    #landing > #sec02 > h2 {
        font-size: 30px;
    }

    #landing > #sec03 {
        padding: 5% 5%;
    }

    #landing > #sec03 > h2 {
        font-size: 30px;
    }
    
    #landing > #sec04 > ul > li {
        width: 35%;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 0.5px;
        margin: 20px 0;
    }

    #landing > #sec05 {
        padding: 5% 5%;
    }

    #landing > #sec05 > div > h2 {
        letter-spacing: 1px;
        font-size: 25px;
    }

    #landing > #sec06 {
        padding: 5% 5%;
    }

    #landing > #sec06 > h2 {
        font-size: 30px;
        margin-bottom: 25px;
    }



}
@media( max-width: 768px ){
}
@media (max-width: 425px){

    .desktop-wm {
        display: none;
    }
    .mobile-wm {
        display: block;
    }

    #landing > #sec01 > ol > li {
        width: 100%;
    }

    #landing > #sec01 > ol > li > img {
        margin-top: 50px;
    }

    #landing > #sec02 > ul > li {
        width: 100%;
    }

    #landing > #sec02 > ul > li > img {
        width: 70%;
        margin: 5% 15%;
    }

    #landing > #sec05 > div {
        width: 100%;
    }

    #landing > #sec06 > form > ol > li {
        padding: 1%;
        width: 98%;
        border-radius: 3px;
        margin-bottom: 20px;
    }

    #landing > #sec05 > div > img {
        margin-top: 50px;
    }

    .titles p {
        font-size: 1.5em;
        color: #fffffff7;
        letter-spacing: 1px;
    }

    .titles p > button {
        font-size: 1em;
        margin: 5% 0% 0% 0%;
    }

    .slider-principal .fondo {
        opacity: 0.65;
    }
    .container svg {
        top: -10%;
    }
    .container-us h2 {
        line-height: 1.5;
        font-size: 1.9em;
        margin: 10px 0px 10px 0px;
        letter-spacing: -1px;    
    }

    .container-us p {
        font-size: 1.5em;
        margin: 0% 0%;
        padding: 0% 5% 5% 5%;
        /* font-weight: bolder; */
        letter-spacing: 1px;
    }

    .container-services h2 {
        padding: 5% 0% 0% 0%;
        font-size: 1.8em;
    }

    .container-services ul>li {
        width: 50%;
        margin: 3% 0%;
    }

    .container-black h2 {
        font-size: 2.0em;
        padding: 5% 0% 2% 0%;
    }

    .container-black img {
        width: 70%;
        margin: 5% 15% 0% 15%;
    }

    .price-cards>li {
        width: 100%!important;
        margin-bottom: 5%!important;
    }

    .container-work h2 {
        padding: 5% 0%;
    }

    .container-work ul {
        flex-wrap: wrap;
    }

    .container-contact h3 {
        padding: 10% 5% 0% 5%;
    }

    .titles {
        top: 31%;
    }

    .modal-dialog img {
        width: 100%;
    }

    #type-perfil {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #type-perfil li {
        width: 75%;
        margin: 2% 5%;
    } 

    #pruebas-psico{
        width: 75%!important;
    }  
}