﻿/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
a.Ft-Link,
a.Ft-Link:link,
a.Ft-Link:visited,
a.Ft-Link:active {
    font-size: 80%;
    color: white;
    text-decoration: none;
}

    a.Ft-Link:hover {
        color: white;
        text-decoration: underline;
    }


/*--------------------------------------------------------------
# Inicio
--------------------------------------------------------------*/
.Hero-Image {
    width: 100%;
    background: url('/Assets/Img/imgHeroFE.jpg') top center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    padding: 0;
}

.Hero-Height {
    height: 500px;
}

@media only screen and (max-width: 767px)
{
    .Hero-Text-LH {
        line-height: 40px;
        font-size: 30px;
    }
}

@media only screen and (max-width: 375px) {
    .Hero-Image {
        width: 100%;
        height: 528px;
        background: url('/Assets/Img/imgHeroFEmovil.jpg') top center;
        background-size: cover;
        background-attachment: scroll;
        position: relative;
        padding: 0;
    }

    .Hero-Text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .Hero-Text-LH {
        line-height: 40px;
    }
}


.Hero-Text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Hero-Text-LH {
    line-height: 40px;
}

.Logo-Image {
    width: 100%;
    height: 450px;
    background: url('/Assets/Img/imgBackground.jpg') top center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    padding: 0;
}

.Line-Height20 {
    line-height: 20px;
}

.Boost-Image {
    width: 100%;
    height: 100%;
    background: url('/Assets/Img/imgBackground2.png') top center;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    padding: 0;
}


/*--------------------------------------------------------------
# Acerca de
--------------------------------------------------------------*/
.Hero-Carousel {
    width: 100%;
}

.Hero-carousel-image {
    height: 50vh;
}

.Hero-Carousel-Text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0%, -50%);
    font-size: 34px;
    line-height: 36px;
}

.Team-Background {
    background-image: url('/Assets/Img/bgEquipo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.Img-Banner1 {
    width: 100%;
    height: 96px;
    background: url('/Assets/Img/imgValue1.jpg') top center;
    background-size: cover;
    position: relative;
}

.Img-Banner2 {
    width: 100%;
    height: 96px;
    background: url('/Assets/Img/imgValue2.jpg') top center;
    background-size: cover;
    position: relative;
}

.Img-Banner3 {
    width: 100%;
    height: 96px;
    background: url('/Assets/Img/imgValue3.jpg') top center;
    background-size: cover;
    position: relative;
}

.Img-Banner4 {
    width: 100%;
    height: 96px;
    background: url('/Assets/Img/imgValue4.jpg') top center;
    background-size: cover;
    position: relative;
}

.filo {
    margin-bottom: 45px;
}


/*--------------------------------------------------------------
# Milenium LA
--------------------------------------------------------------*/
.Hero-MileniumLA {
    width: 100%;
    height: calc(100vh - 76px);
    background: url("/Assets/Img/imgHero2.jpg") bottom center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    padding: 0;
    line-height: initial;
}

.Hero-MileniumLA-Text {
    position: absolute;
    color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(0%, -50%);
    font-size: 40px;
}

.Div-Relative {
    position: relative;
    height: 600px;
}

.Img-MarginTop {
    margin-top: 50px;
}

.Div-Relative2 {
    position: relative;
    height: 48vh;
}

.Div-Relative2-Text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
}

.diagrama {
    background-image: url('/Assets/Img/milFondo.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom
}

.Text-Undeline {
    text-decoration: underline;
}

.milButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(15%, -50%);
}

.banner-button {
    background-color: #FBB900;
    font-size: 14px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 15px;
    padding-bottom: 15px;
    color: white;
    font-family: 'Poppins';
    font-weight: 400;
}

    .banner-button:hover {
        color: orange;
        padding-left: 50px;
        padding-right: 50px;
        background-color: white;
    }


/*--------------------------------------------------------------
# Clientes
--------------------------------------------------------------*/
#ClientesImagen-Hero {
    width: 100%;
    height: 30vh;
    background: url("/Assets/Img/bannerClientes-m.png") top left;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    padding: 0;
}

.Client-Intro {
    padding: 0px;
}

.Div-Relative2-C {
    height: 400px;
}

.clientes-img-m {
    display: none;
}

.Clients-Row {
    height: 250px;
    overflow: hidden;
}

.Div-Relative3-Text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Text-Alineado {
    text-align: center;
}

.Text-Uno {
    line-height: 0px;
    text-align: center;
}

.Text-Dos {
    font-size: 90px;
    line-height: 100px;
    text-align: center;
}

.Clients-Subtitle-m {
    display: none;
}

.Text-Testimonial {
    line-height: 18px;
}

.Div-Testimonial {
    height: 150px;
    bottom: 50px;
    position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
}

.Testimonial-ElRodeo {
    transition: height 1.5s;
}

    .Testimonial-ElRodeo:hover {
        height: 375px;
    }

.Testimonial-Merch {
    transition: height 1.5s;
}

    .Testimonial-Merch:hover {
        height: 400px;
    }

.Testimonial-LaCampana {
    transition: height 1.5s;
}

    .Testimonial-LaCampana:hover {
        height: 310px;
    }

.Testimonial-LaVida {
    transition: height 1.5s;
}

    .Testimonial-LaVida:hover {
        height: 250px;
    }

.Testimonial-SenoraSantaAna {
    transition: height 1.5s;
}

    .Testimonial-SenoraSantaAna:hover {
        height: 300px;
    }

.Testimonial-Josue {
    transition: height 1.5s;
}

    .Testimonial-Josue:hover {
        height: 250px;
    }

.Testimonial-HiperDiego {
    transition: height 1.5s;
}

    .Testimonial-HiperDiego:hover {
        height: 360px;
    }

.Testimonial-Gloria {
    transition: height 1.5s;
}

    .Testimonial-Gloria:hover {
        height: 480px;
    }

.Testimonial-Chevez {
    transition: height 1.5s;
}

    .Testimonial-Chevez:hover {
        height: 340px;
    }

#CarouselCustomer-m {
    height: 125vh;
    background-color: #1E425A;
}

.Logo-Empresa {
    max-width: 250px;
}


/*--------------------------------------------------------------
# Bolsa de tabajo
--------------------------------------------------------------*/
.Trabajo-Hero {
    min-height: 750px;
    width: unset;
    height: 100%
}

.Div-Relative4 {
    position: relative;
}

.Trabajo-Title1 {
    margin-bottom: 0px;
    color: #F29B31
}

.Trabajo-Title2 {
    font-size: 100px
}

.Trabajo-MainConainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Trabajo-Box {
    background-color: rgba(255,255,255,0.25);
}

.Trabajo-Input {
    display: block;
    margin: auto;
    max-width: 350px;
}


/*--------------------------------------------------------------
# Pallete Colors
--------------------------------------------------------------*/
.Color1 {
    color: #25313F;
}

.Color2 {
    color: #03598C;
}

.Color3 {
    color: #A1CBDE;
}

.Color4 {
    color: #0377A6;
}

.Color5 {
    color: #FBB900;
}

.Color1-2 {
    color: #273156;
}

.ColorGray {
    color: #707070;
}

.BGColor1 {
    background-color: #25313F;
}

.BGColor2 {
    background-color: #03598C;
}

.BGColor3 {
    background-color: #A1CBDE;
}

.BGColor4 {
    background-color: #0377A6;
}

.BGColor5 {
    background-color: #FBB900;
}

.BGColorGray {
    background-color: #EDEFF2;
}


/*--------------------------------------------------------------
# Fonts Types
--------------------------------------------------------------*/
.FontPoppinsBold900 {
    font-family: 'Poppins';
    font-weight: 900;
}

.FontPoppinsBold800 {
    font-family: 'Poppins';
    font-weight: 800;
}

.FontPoppinsBold700 {
    font-family: 'Poppins';
    font-weight: 700;
}

.FontPoppinsBold500 {
    font-family: 'Poppins';
    font-weight: 500;
}

.FontPoppins {
    font-family: 'Poppins';
    font-weight: 400;
}

.FontPoppinsMedium {
    font-family: 'Poppins';
    font-weight: 500;
}

.FontPoppinsLight {
    font-family: 'Poppins';
    font-weight: 300;
}

.FontMontserratThin {
    font-family: 'Montserrat';
    font-weight: 100;
    font-style: normal;
}

.FontMontserratExtra-light {
    font-family: 'Montserrat';
    font-weight: 200;
    font-style: normal;
}

.FontMontserratLight {
    font-family: 'Montserrat';
    font-weight: 300;
    font-style: normal;
}

.FontMontserrat {
    font-family: 'Montserrat';
    font-weight: 400;
    font-style: normal;
}

.FontMontserratMedium {
    font-family: 'Montserrat';
    font-weight: 500;
    font-style: normal;
}

.FontMontserratSemi-bold {
    font-family: 'Montserrat';
    font-weight: 600;
    font-style: normal;
}

.FontMontserratSemi-bold-italic {
    font-family: 'Montserrat';
    font-weight: 600;
    font-style: italic;
}

.FontMontserratBold {
    font-family: 'Montserrat';
    font-weight: 700;
    font-style: normal;
}

.FontMontserratBlack {
    font-family: 'Montserrat';
    font-weight: 900;
    font-style: normal;
}

.FontMontserratBlack-italic {
    font-family: 'Montserrat';
    font-weight: 900;
    font-style: italic;
}

.FontSegoe {
    font-family: 'Segoe UI';
    font-weight: 400;
}

.FontSegoeSemi-bold {
    font-family: 'Segoe UI';
    font-weight: 600;
}

.FontSegoeBold {
    font-family: 'Segoe UI';
    font-weight: 700;
}

.FontSegoeBold800 {
    font-family: 'Segoe UI';
    font-weight: 800;
}

.FontSegoeBold900 {
    font-family: 'Segoe UI';
    font-weight: 900;
}

.FontBebasNeue {
    font-family: 'Bebas Neue';
    font-weight: 400;
}


/*--------------------------------------------------------------
# Resize screen
--------------------------------------------------------------*/
/* Mobile devices only in landscape view */
@media screen and (orientation:landscape) {
    .Hero-carousel-image {
        height: 100vh;
    }
}

/* Custom devices (phones, 320px and down) */
@media only screen and (max-width: 350px) {
    .Clientes-m {
        border-radius: 25px;
        height: 122vh;
        width: 90%
    }

    #CarouselCustomer-m {
        height: 140vh;
        background-color: #0377A6;
    }

    .online-title {
        margin-top: 10px;
        margin-bottom: 5px !important;
        font-size: 16px;
    }

    .online-text {
        font-size: 9px;
    }

    .Hero-MileniumLA-Text {
        font-size: 25px;
        width: 75%;
        transform: translate(-40%, -100%);
    }
}

/* Custom devices (phones, 360px and up) */
@media only screen and (min-width: 360px) {
    .Clientes-m {
        border-radius: 25px;
        height: 625px;
        width: 90%
    }

    #CarouselCustomer-m {
        height: 735px;
        background-color: #0377A6;
    }

    .Hero-MileniumLA-Text {
        font-size: 35px;
        width: 75%;
        transform: translate(-40%, -50%);
        top:40%;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .img-fluid {
        height: 70%;
    }

    .Hero-Carousel-Text {
        font-size: 16px;
        line-height: 28px;
        top: 50%;
        left: 4%;
        transform: translate(-0%, -50%);
        text-shadow: black 0px 0px 10px;
    }

    .filo {
        margin-bottom: 45px;
    }

    .Hero-MileniumLA {
        
        background: url("/Assets/Img/imgHeroFE2-m.jpg");
        width:100%;
        background-repeat: no-repeat;
        
    }

    .diagrama {
        background-image: url('/Assets/Img/milFondo-m2.jpg');
    }

    .Img-MarginTop {
        width: 60%;
    }

    .Div-Relative2 {
        height: 68vh;
    }

    .clientes-img-m {
        display: block;
    }

    .clientes-img {
        display: none;
    }

    .Div-Relative2-C {
        height: 145vh;
    }

    .clientes-img {
        height: 17vh;
    }

    .Clients-Row {
        height: 600px;
    }

    .Clients-Subtitle-m {
        position: relative;
        left: 75%;
        top: 16%;
        transform: translate(-50%, -50%);
        display: block;
    }

    .Div-Relative2-Text {
        font-size: 12px;
        height: 50%;
    }

    .online-img {
        width: 100%;
        background-size: cover;
    }

    .milButton {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-36%, -50%);
    }

    .banner-button {
        position: relative;
        top: 70px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .online-title {
        font-size: 20px;
        position: relative;
        top: -35%;
        left: 65%;
        transform: translate(-50%,-50%);
    }

    .online-text {
        font-size: 12px;
        position: relative;
        top: -15%;
        left: 52%;
        width: 75%;
        transform: translate(-50%,-50%);
    }

    .Text-Uno {
        font-size: 30px;
    }

    .Text-Dos {
        font-weight: bold;
        font-size: 36px
    }

    .Div-Relative3 {
        height: 100vh;
    }

    .Trabajo-MainConainer {
        top: 48%;
        transform: translate(-50%, -50%);
    }

    .Trabajo-Title1 {
        text-align: center;
    }

    .Trabajo-Title2 {
        text-align: center;
        font-size: 30px
    }

    .Div-Relative4 {
        height: 132vh;
    }

    .Text-trabajo {
        font-size: 13.5px;
    }

    .Clients-Subtitle {
        display: none;
    }

    .Client-Title {
        position: relative;
        top: -1%;
    }

    .Client-Intro {
        height: 11vh;
        position: relative;
        top: 12px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    #ClientesImagen-Hero {
        height: 50vh;
    }

    .Hero-MileniumLA-Text {
        font-size: 30px;
        width: 35%;
        transform: translate(0%, -50%);
    }

    .Hero-Carousel-Text {
        font-size: 20px;
        line-height: 24px;
    }

    .online-title {
        font-size: 20px;
    }

    .online-text {
        font-size: 11px;
        width: 50%;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .online-img {
        width: 100%;
    }

    .Acerca-m {
        display: none !important;
    }

    .Acerca {
        display: block !important;
    }

    .Clientes-m {
        border-radius: 5%;
        height: 70vh;
        width: 50%;
    }

    .Trabajo-Title2 {
        font-size: 40px;
    }
}

/* Medium devices (tablets, 912px and down) */
@media only screen and (max-width: 912px) {
    .diagrama {
        background-size: inherit
    }
}

@media only screen and (min-width: 320px)
{

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .Hero-Carousel-Text {
        font-size: 20px;
        line-height: 26px;
    }

    .Val-Text {
        font-size: 14px
    }

    .venta-area {
        padding-right: 0px;
        padding-left: 0px;
    }

    .Hero-MileniumLA {
        background: url(/Assets/Img/imgHeroFE2.jpg) bottom center;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }

    .Hero-MileniumLA-Text {
        font-size: 25px;
        width: 75%;
        transform: translate(0%, -50%);
    }

    .Img-MarginTop {
        width: 48%;
    }

    .online-img {
        width: 100%;
    }

    .online-title {
        margin-top: 10px;
        margin-bottom: 5px !important;
        font-size: 18px;
    }

    .online-text {
        font-size: 14px;
        width: 50%;
        margin-top: 25px !important;
        margin-bottom: 10px !important;
    }

    .Trabajo-Title2 {
        font-size: 70px
    }

    .Trabajo-Input {
        width: 85%;
    }

    .Client-Intro {
        height: 19vh;
    }

    .Text-Alineado {
        text-align: left;
    }

    .Text-Uno {
        text-align: center;
    }

    .Text-Dos {
        text-align: center;
    }

    .Testimonial {
        width: 50%;
    }

    .Clientes-m {
        border-radius: 25px;
        height: 390px;
        width: 70%
    }

    #CarouselCustomer-m {
        height: 515px;
    }

    .diagrama {
        background-image: url('/Assets/Img/milFondo-m.jpg');
    }
}

/* Large devices (laptops/desktops, 992px and less) */
@media only screen and (max-width: 991px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .Client-Intro {
        height: 47vh;
    }

    .Hero-Carousel-Text {
        right: 20%;
        font-size: 20px;
        line-height: 26px;
    }

    .Testimonial-ElRodeo:hover {
        height: 335px;
    }

    .Testimonial-Merch:hover {
        height: 415px;
    }

    .Testimonial-LaCampana:hover {
        height: 350px;
    }

    .Testimonial-LaVida:hover {
        height: 300px;
    }

    .Testimonial-SenoraSantaAna:hover {
        height: 350px;
    }

    .Testimonial-Josue:hover {
        height: 270px;
    }

    .Testimonial-Gloria:hover {
        height: 420px;
    }

    .Testimonial-Chevez:hover {
        height: 280px;
    }

    .Hero-MileniumLA {
        width: 100%;
        height: calc(100vh - 76px);
        background: url("/Assets/Img/imgHeroFE2.jpg") bottom center;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
        padding: 0;
        line-height: initial;
    }

    .Hero-MileniumLA-Text {
        position: absolute;
        color: #ffffff;
        top: 50%;
        left: 50%;
        transform: translate(0%, -50%);
        font-size: 35px;
    }

    .Text-Uno {
        text-align: left;
    }

    .Text-Dos {
        text-align: left;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    #ClientesImagen-Hero {
        height: 65vh;
        background: url("/Assets/Img/imgHero3.jpg") top center;
        background-size: cover;
        background-attachment: scroll;
    }

    .Hero-carousel-image {
        height: calc(100vh - 58.5px);
        width: 100%;
    }

    .Trabajo-Hero {
        width: 100%;
    }

    .filo {
        margin-bottom: 0px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and less) */
@media only screen and (max-width: 1200px){
    .Logo-Empresa {
        max-width: 350px;
    }
}

/* Extra large devices (large laptops and desktops, 1281px and up) */
@media only screen and (min-width: 1281px) {
}

/* On screens that are 1920px wide and up */
@media only screen and (min-width: 1921px) {
}

/*On screens that are 2560px wide or more */
@media only screen and (min-width: 2560px) {
    .Div-Relative2 {
        position: relative;
        height: 23vh;
    }
}

/*On screens that are 3840px wide and up */
@media only screen and (min-width: 3840px) {
}

/*On screens that are 4096px wide or more */
@media only screen and (min-width: 4096px) {
}
