@import './node_modules/bootstrap/scss/bootstrap.scss';

//MIXINS
@mixin BorderRadius($radius) {
    -webkit-border-radius: $radius !important;
    -moz-border-radius: $radius !important;
    -ms-border-radius: $radius !important;
    -o-border-radius: $radius !important;
    border-radius: $radius !important;
}

@mixin TextShadow($shadow) {
    -webkit-text-shadow: $shadow !important;
    -moz-text-shadow: $shadow !important;
    -ms-text-shadow: $shadow !important;
    -o-text-shadow: $shadow !important;
    text-shadow: $shadow !important;
}

@mixin BoxShadow($shadow) {
    -webkit-box-shadow: $shadow !important;
    -moz-box-shadow: $shadow !important;
    -ms-box-shadow: $shadow !important;
    -o-box-shadow: $shadow !important;
    box-shadow: $shadow !important;
}

@mixin Transition($transition) {
    -webkit-transition: $transition !important;
    -moz-transition: $transition !important;
    -ms-transition: $transition !important;
    -o-transition: $transition !important;
    transition: $transition !important;
}

@mixin Transform($transform){
    -webkit-transform: $transform;
    -moz-transform: $transform;
    -ms-transform: $transform;
    -o-transform: $transform;
    transform: $transform;
}

@mixin FontProligita() {
    -webkit-font-smoothing: antialiased !important;
    -moz-font-smoothing: antialiased !important;
    -o-font-smoothing: antialiased !important;
    font-smoothing: antialiased !important;
}


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

$regularfont: 'Poppins', sans-serif;


$gray:    #212123;
$orange:   #f5af02;


body {
    font-family: $regularfont;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.2rem; 
    color: #787878;
    
    @include FontProligita();

    p{
        line-height: 1.4rem;
    }
}


a{
    text-decoration: none !important;
    color: $orange;
}



.mainNavbar{
    // background: #eff2fa;

    .mainLogoEnte{
        max-height: 75px;
        @include Transition(0.5s ease all);
    }
}

.MainMenu{

    a{
        color: #fff;
        padding: 10px;
        font-weight: 500;
        text-transform: uppercase;
    }

    a.active,
    a:hover{
        color: $orange;
    }

    // li:last-child{
    //     margin-left: 12px;
        
    //     a{
    //         border: 1px solid #fff;
    //         color: #fff;
    //         text-transform: uppercase;
    //         font-size: 0.9rem;
    //         padding: 5px 20px;
    //         @include BorderRadius(40px);
    //     }

    // }

    // li:last-child:hover{
        
    //     a{
    //         border: 1px solid $orange;
    //         color: $orange;
    //     }

    // }

    .loginMN{
        background: $orange;
        height: 30px;
        padding-top: 5px;
        margin-top: -6px;
        font-size: 1rem;
        padding-left: 15px;
        @include BorderRadius(30px 0 0 30px);

        a{
            padding: 10px 20px;
            color: #fff;
        }
    }


    .signupMN{
        background: $pink;
        height: 30px;
        padding-top: 5px;
        margin-top: -6px;
        font-size: 1rem;
        @include BorderRadius(0 30px 30px 0);

        a{
            padding: 10px 20px;
            color: #fff;
        }
    }

}


.mainNavbarMin{
    background-color: $gray;
    border-top: 3px solid $orange;

    .mainLogoEnte{
        max-height: 60px;
    }
}




.innerFSection{
    background: url(../images/bg-1.jpeg) no-repeat;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    .innerInner{
        padding: 200px 0;
        background-color: rgba(0, 106, 255, 0.4);
    }    

    .form-control{
        font-size: 0.8rem;
        height: 45px;
        outline: none !important;
        background-color: #fff;
        border: none;
        border-right: 2px solid #fafafa;

        @include BorderRadius(0);
    }

    select.form-control{
        border-left: 1px solid #eee;
    }


    .btnSearchVacant{
        border: none;
        background: $orange;
        color: #fff;
        width: 100%;
        padding: 13px 20px;
        text-transform: uppercase;
        font-size: 0.8rem;

        @include BorderRadius(0);
    }


   .wrapFilter{
        background-color: rgba(33, 33, 34, 0.2);
        color: #fff;
        padding: 35px 40px 40px 40px;

        h3{
            text-transform: uppercase;
            font-size: 1.3rem;
        }

        span.select2{
            background-color: #fff;
        }
   }

}

.addDiscoverCallCenters{

    .container-fluid{
        padding-left: 0;
        padding-right: 0;
    }

    h3{
        color: #fff;
        font-size: 1.8rem;
        margin-bottom: 20px;
    }

    .orange{
        background-color: $orange;

        .inner{
            padding: 60px;
            text-align: right;

            .cta{
                background-color: $gray;
            }
        }
    }

    .gray{
        background-color: $gray;

        .inner{
            padding: 60px;
            text-align: left;

            .cta{
                background-color: $orange;
            }
        }
    }

    .cta{
        color: #fff;
        text-transform: uppercase;
        font-size: 0.9rem;
        font-weight: 600;
        padding: 10px 40px;
        @include BorderRadius(0);
    }
}


.wrapListOfCallCenters{
    padding: 90px 0;
    background-color: #eee;

    .overview{
        max-width: 900px;
        margin: 0 auto;
        text-align: center;

        h3{
            color: #000;
            font-size: 1.9rem;
            font-weight: 600;
        }
    }


    .listCallCenters{

        .content{
            padding: 25px;
            background-color: #fff;
            font-size: 0.8rem;

            h2{
                font-size: 1.1rem;
                text-transform: uppercase;
                color: #000;
            }

            p{
                line-height: 1rem;
            }
        }
    }

    .btnReadMore{
        background-color: $gray;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        width: 100%;
        padding: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        border-bottom: 3px solid $gray;

        @include BorderRadius(0);

        span{
            display: inline-block;
            margin-left: 10px;
        }
    }

    .btnReadMore:hover{
        border-bottom: 2px solid $orange;
        color: $orange;
    }
}


.wrapIMG{
    overflow: hidden;

    img{
        @include Transition(0.5s ease all);
    }

    img:hover{
        @include Transform(scale(1.1));
    }
}


.wrapPromoteCallCenter{
    background-color: $orange;
    border-top: 30px solid $gray;
    padding: 50px 0;
    color: #fff;
    text-align: center;

    h3{
        color: #000;
        font-size: 1.9rem;
        font-weight: 600;
    }

    .btnReadMore{
        background-color: $gray;
        text-transform: uppercase;
        font-size: 0.9rem;
        padding: 10px 30px;
        color: #fff;
        @include BorderRadius(0);
    }
}


.wrapListActualidad{
    padding: 60px 0;

    h3{
        color: #000;
        font-size: 1.9rem;
        font-weight: 600;
    }



}//wrapListActualidad

.listArticlesActualidad{

    .item{

        .content{
            padding: 20px;
            background-color: #fafafa;
            min-height: 190px;

            h2{
                font-size: 1.1rem;
                line-height: 1.5rem;
            }

            small{
                color: $orange;
                font-size: 0.8rem;
                text-transform: uppercase;
            }
        }

        .btnReadMore{
            background-color: $gray;
            text-transform: uppercase;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 10px 30px;
            color: #fff;
            width: 100%;
            @include BorderRadius(0);
        }
    }
}

.readMoreLink{
    color: #000;
    background-color: $orange;
    padding: 10px 40px;
    font-size: 0.8rem;
    text-transform: uppercase;
    @include BorderRadius(40px);
}

// .slick-dots{
//     bottom: -40px !important;

//     li{
//         margin: 2px !important;
//         padding: 0;
//         height: 10px !important;
//         width: 10px !important;
//         background-color: #BFC8CB;

//         @include BorderRadius(50%);
//         @include Transition(0.5s ease all);

//         button{
//             display: none !important;
//         }
//     }

//     li:hover{
//         background-color: #443C3C;
//     }

//     .slick-active{
//         background-color: #443C3C;
//         width: 25px !important;
//         @include BorderRadius(5px);
//     }

// }


.select2-hidden-accessible{
    margin-top: -1px !important;
}

.wsFloating{
    position: fixed;
    right: 40px;
    bottom: 40px;
    background-color: #25d366;
    padding: 10px;
    height: 55px;
    width: 55px;
    text-align: center;
    @include BorderRadius(50%);

    .fa{
        font-size: 2.5rem;
        color: #fff;
        position: relative;
        top: -3px;
    }
}


.footer{
    background-color: #212122;
    color: #fff;
    padding-top: 40px;
    margin-top: 120px;


    .wrapSuscribete{
        padding: 40px;
        background-color: #333;
        margin-top: -100px;
        margin-bottom: 40px;
        color: #afafaf;

        p{
            font-style: italic;
        }

        h3{
            font-size: 1.8rem;
            font-weight: 600;
            color: $orange;
        }

        .wpcf7-text{
            background-color: transparent !important;
            height: 50px !important;
            border: 1px solid #787878;
            color: #fff;

            @include BorderRadius(0);
        }

        .wpcf7-form-control-wrap{
            width: 85%;
        }

        .wpcf7-submit{
            background-color: $orange;
            border: none;
            padding: 8px 20px;
            width: 14%;
            text-transform: uppercase;
        }

        .networks{

            a{
                color: #afafaf;
                margin-left: 5px;
                border: 1px solid #afafaf;
                width: 33px;
                display: inline-block;
                text-align: center;
                height: 33px;
                padding-top: 3px;

                .fa{
                    font-size: 1.2rem;
                    position: relative;
                    bottom: -3px;
                }
            }
        }
    }
    
    ul{
        padding-left: 0;

        li{
            list-style: none;
        }

        a{
            color: #fff;
            padding: 5px 0;
            display: block;
            font-size: 0.9rem;
        }

        a:hover{
            color: $orange;
        }
    }


    .mainFooter{
        float: none;
        margin-bottom: 0;

        li{
            margin-left: 10px;
            display: block;

            a{
                font-size: 0.9rem;
            }
        }
    }


    .underfooter{
        border-top: 1px solid lighten($color: #393535, $amount: 10%);
        padding: 10px;
        overflow: hidden;

        p{
            font-size: 0.8rem;
            margin-bottom: 0;
            float: left;
        }

        .mainFooter{
            float: right;
            margin-bottom: 0;

            li{
                float: left;
                margin-left: 10px;

                a{
                    font-size: 0.8rem;
                }
            }
        }
    }
}


.wrapDirectorio{
    padding: 80px 0;
    background-color: #fafafa;


    .listDirectorio{

        .row{
            background-color: #fff;
        }
        
        .content{
            padding: 11px;
            min-height: 130px;
            position: relative;

            h3{
                font-size: 1rem;
                font-weight: 600;
            }

            p{
                font-size: 0.9rem;
                color: #ccc;
                position: absolute;
                bottom: 0;
            }
        }

        .btnReadMore{
            width: 100%;
            text-transform: uppercase;
            background: $pink;
            color: #fff;
            @include BorderRadius(0);
        }

        .item a{
            display: block;
            @include Transition(0.5s ease all);
        }

        .item a:hover{
            
            @include BoxShadow(2px 2px 20px #ccc);
        }
    }

    iframe{
        height: 450px;
        width: 100%;
    }

    .container{
        background-color: #fff;

        h1{
            margin-top: 40px;
            font-size: 1.8rem;
            text-transform: uppercase;
            color: $gray;
        }

        .content{
            padding: 40px 0;
        }

        ul{
            padding-left: 0;

            li:first-child{
                padding-left: 0;
            }
    
            li{
                list-style: none;
                padding: 0px 15px;
                float: left;
            }
        }

        .verVacantes{
            background-color: $orange;
            color: #fff;
            padding: 10px 30px;
            font-size: 0.9rem;
            font-weight: bold;
            text-transform: uppercase;
            @include BorderRadius(40px);
            @include Transition(0.5s ease all);
        }

        .verVacantes:hover{
            background-color: #333;
        }

        .metaCallcenters{
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            padding-top: 15px;
            padding-bottom: 15px;

            .fa{
                display: inline-block;
                width: 15px;
            }
        }
    }
}

// .asideCallcenter{
//     padding: 30px 30px;
//     background: #fff;

//     ul{
//         padding-left: 0;

//         li{
//             list-style: none;
//             padding: 5px 0;
//         }
//     }

//     h3{
//         font-size: 1.3rem;
//     }

//     p{
//         margin-bottom: 0;
//     }

//     .wpcf7-form-control{
//         height: 50px;

//         @include BorderRadius(0);
//     }

//     .wpcf7-textarea{
//         height: 130px;
//     }

//     .wpcf7-submit{
//         border: none;
//         background: $pink;
//         color: #fff;
//         padding: 8px 30px;
//         font-size: 0.9rem;
//         text-transform: uppercase;
//         width: 100%;
//     }

// }

.wpcf7 form.sent .wpcf7-response-output{
    margin: 0;
    font-size: 0.8rem;
    text-align: center;
    padding: 10px;
    margin-top: -15px;
}


.listVacancies{

    .content{
        background-color: #fff;
        padding: 30px;
        min-height: 270px;

        ul{
            padding-left: 0;

            li{
                list-style: none;
                font-size: 0.9rem;
            }
        }

        .tags{
            font-size: 0.8rem;
        }
    }

    h3{
        font-size: 1.3rem !important;
    }

    a{
        color: #333;
    }

    .footer-inner{
        background-color: #fafafa;
        padding: 15px 5px;

        .postulants{
            font-size: 0.8rem;
            margin-left: 4px;
        }

        .ctaConoceMas{
            padding: 10px 20px;
            font-size: 0.8rem;
            background-color: $gray;
            color: #fff;

            @include Transition(0.5s ease all);
        }

        .ctaConoceMas:hover{
            opacity: 0.7;
        }

        .ctaAplicar{
            padding: 10px 20px;
            font-size: 0.8rem;
            background-color: $pink;
            color: #fff;

            @include Transition(0.5s ease all);
        }

        .ctaAplicar:hover{
            opacity: 0.7;
        }

    }
}

.wrapSingle{
    padding: 30px 0;


    .nota-pic{
        width: 100%;
        height: auto;
    }

    .content{
        background-color: #fff;
        padding: 30px;
    }

    

    .shareSocial{
        padding-left: 0;
        position:absolute;
        left:0;
        z-index:99999;
        background: $orange;
        @include BorderRadius(0 10px 10px 0);
    
        li{
            list-style: none;
            text-align: center;
    
            a{
                color: #fff;
                display: inline-block;
                padding: 10px;
                margin-bottom: 2px;
                font-size: 1rem;
            }
    
            a:hover{
                opacity: 0.6;
            }
        }
    }

}

.blockWidget{
    background-color: #fff;
    margin-bottom: 20px;
    @include BoxShadow(2px 2px 20px #eee);

    h2{
        font-size: 1.2rem;
        padding: 15px;
        border-bottom: 1px solid #eee;
        margin-bottom: 0;
        color: #333;
    }
    
    .content{
        padding: 20px;

        a{
            color: #333;
        }

        a:hover{
            color: $orange;
        }
    }

    .post-item{
        margin-bottom: 15px;

        .nota-pic{
            @include Transition(0.5s ease all);
        }
    
        .nota-pic:hover{
            opacity: 0.6;
        }
    }

    .categoryList{
        padding-left: 0;

        li{
            list-style: none;

            a{
                padding: 5px 0;
                display: block;

                span{
                    float: right;
                }
            }
        }
    }
}

.headerInterior{
    padding: 120px 0;
    background-color: $gray;

    h1{
        color: #fff;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
        font-size: 1.8rem;
    }
}


.wrapNosotrosPage,
.wrapPageDefault{


    .wrapForm{
        max-width: 700px;
        margin: 0 auto;

        .wpcf7-form-control{
            height: 50px;

            @include BorderRadius(0);
        }

        .wpcf7-submit{
            border: none;
            background: $pink;
            color: #fff;
            padding: 8px 30px;
            font-size: 0.9rem;
            text-transform: uppercase;
            width: 100%;
        }
    }
}

.navbar-toggler:hover,
.navbar-toggler{
    background: url(../images/menu_icon.png) no-repeat;
    background-size: 25px;
    background-position: center center !important;
    @include BoxShadow(none);
}


.wrapNosotrosPage{
    padding: 70px 0;
    padding-bottom: 0;

    .overview{
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
        margin-bottom: 50px;

        h3{
            color: #333;
        }
    }

    .wrapForm{
        padding: 40px 0;

        textarea{
            height: 160px !important;
        }

        p{
            margin-bottom: 0;
        }
    }

    .listFeat{

        .inner{
            padding: 30px;
            border: 1px solid #ddd;
            min-height: 240px;
            @include BoxShadow(2px 2px 20px #ddd);

            h4{
                font-size: 1.3rem;
                color: #787878;
            }

            p{
                font-size: 0.9rem;
            }
        }
    }

    .wrapBenef{
        margin-top: 70px;
        padding: 60px 0;
        background-color: #fafafa;

        h3{
            margin: 40px 0;
            font-weight: 600;
        }

        ul{

            li{
                padding: 5px 0;
            }
        }
    }
}




// ***************************************
// MEDIA QUERIES
// ***************************************


@media (max-width: 768px) {
	//some scss code


    .navbar{
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .mainNavbar{
        background-color: #000;

        .mainLogoEnte{
            max-height: 45px;
        }

        .MainMenu{
            margin-top: 2px;
            padding-bottom: 30px;
            border-top: 1px solid #333;
            padding-top: 17px;

            li{

                a{
                    padding: 11px;
                    display: block;
                    text-align: center;
                }
            }
        }

        .loginMN,
        .signupMN{
            margin-top: 0;
            height: auto;
            background-color: $pink;
            @include BorderRadius(0);
            padding: 0;
            
            a{
                padding: 11px;
                @include BorderRadius(0);
            }
        }

        .loginMN{
            margin-bottom: 5px;
            background-color: $orange;

            a{
                background-color: $orange;
            }
        }
    }

    .listVacancies{

        .ctaConoceMas,
        .ctaAplicar{
            width: 100%;
            display: block;
            text-align: center;
            margin: 0 !important;
            margin-top: 2px !important;
        }
    }

    


    .innerFSection .innerInner {
        padding: 120px 0;
        padding-bottom: 60px;
    }

    .addDiscoverCallCenters .orange .inner{
        padding: 40px 10px;
        text-align: center;

        h3{
            font-size: 1rem;
        }

        .cta{
            font-size: 0.7rem;
            font-weight: 400;
            padding: 10px 25px;
        }
    }


    .wrapListOfCallCenters{
        padding: 70px 0;

        .overview{
            font-size: 0.9rem;

            h3{
                font-size: 1.3rem;
            }
        }

        .listCallCenters{


            .content{
                padding: 15px;

                h2{
                  font-size: 0.9rem;
                }
            }

            .btnReadMore{
                font-size: 0.7rem !important;
            }
        }

    }//wrapListOfCallCenters


    .wrapPromoteCallCenter{
        border-top: 20px solid $gray;
        padding: 30px;

        .container{
            max-width: 95%;
        }

        h3{
            font-size: 1.5rem;
        }

    }//wrapPromoteCallCenter

    .listArticlesActualidad{

        h3{
            font-size: 1.5rem;
        }


        .item{

            .content{
                min-height: 0;
                padding: 10px;

                h2{
                    font-size: 1rem;
                    color: #000;
                    line-height: 1rem;
                }
            }

            .btnReadMore{
                font-size: 0.7rem;
            }
        }

    }//listArticlesActualidad

    .wrapListActualidad{

        h3{
            font-size: 1.5rem;
        }
    }


    .wrapSuscribete{

        .overview{
            
            h3{
                font-size: 1.4rem;
            }
        }

        .wrapForm{

            .wpcf7-form-control-wrap{
                width: 100%;
            }

            .wpcf7-submit{
                width: 100%;
            }

            .wpcf7-text{
                height: 45px;
            }
        }

    }//wrapSuscribete


    .footer .underfooter{
        text-align: center;
    }


    .headerInterior{
        padding: 100px 0;
        padding-bottom: 50px;

        h1{
            font-size: 1.5rem;
        }
    }

}