:root{
    /* FONT SIZES */
    --messageBanner1: 100px;
    --messageBanner2: 16px;
    /* COLORS */
    --bloqueExperiencia: rgba(57,60,67,1);
    --textoExperiencia: rgba(40, 42, 47, 0.8);
    
    --numeros1: 24px;
    --numeros2: 85px;

    --colorp: #ffcc00;
}

/* DEFAULTS (Color Text, Size Text and more) */

/* CONTENT HOME */
#banner-home{
    background-image: url('../img/home/contact_center_main_banner.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    min-height: 100vh;
    width: 100%;
    position: relative;
}
#container-header-elements{
    position: absolute;
    top: 30%;
    right: 3%;
}
#banner-message-1{font-size: var(--messageBanner1);}
#banner-message-2{font-size: var(--messageBanner2);}
.color-p{color:var(--colorp);}
#bloque-experiencia{background-color: var(--bloqueExperiencia);}
#texto-exp{background-color: var(--textoExperiencia);}

#bloque-numeros{
    margin-top: -10px;
    background-image: url('../img/reclutamiento/reclutamiento_back_metricas.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    width: 100%;
    min-height: 100vh;
    position: relative;
}
#container-nums-elements{
    position: absolute;
    top: 30%;
}
.num-title{font-size: var(--numeros2);font-weight: bold;}
#container-nums-elements .row .list-group .list-group-item{font-size: var(--numeros1);font-weight: 400 !important}

/* MEDIA QUERIES */
/*  Device = Tablets, Ipads (portrait) Screen = B/w 768px to 1024px | iPad Pro Portrait */
@media (min-width: 768px) and (max-width: 1024px) {
    #container-nums-elements{top: 20%;}
    #container-nums-elements .row .list-group .list-group-item{font-size: 20px;}
}

/*  Device = Tablets, Ipads (landscape) Screen = B/w 768px to 1024px | iPad, Pixel LG 2 y iPhone X Landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #banner-home{height: 600px !important;}
    #banner-message-1{font-size: 90px;}
    #container-header-elements{right: 2.5%;top:20%;}
    
    .num-title{font-size: 30px;}
    #container-nums-elements .row .list-group .list-group-item{font-size: 15px;}
}

/* Device = Low Resolution Tablets, Mobiles (Landscape) Screen = B/w 481px to 767px | iPad Portrait, Celulares Landscape */
@media (min-width: 575px) and (max-width: 768px) {
    #banner-home{height: 560px !important;}
    #container-header-elements{right: 0%;top: 25%;}
    #banner-message-1{font-size: 60px;}
    
    #container-title-exp{width: 100% !important;}
    #title-exp{font-size: 25px;}
    
    .num-title{font-size: 30px;}
    #container-nums-elements .row .list-group .list-group-item{font-size: 15px;}
}

/* Device = Most of the Smartphones Mobiles (Portrait) Screen = B/w 320px to 479px | Celulares Portrait */
@media (min-width: 320px) and (max-width: 575px) {
    #banner-home{height: 640px !important;}
    #container-header-elements{right: 0%;top: 18%;}
    #banner-message-1{font-size: 60px;}
    
    #container-title-exp{width: 100% !important;}
    #title-exp{font-size: 20px;}
    
    #bloque-numeros{height: 600px !important;}
    #container-nums-elements{top: 10%;}
    .num-title{font-size: 30px;}
    #container-nums-elements .row .list-group .list-group-item{font-size: 15px;}
}