:root{
    /* FONT SIZES */
    --messageBanner1: 100px;
    --messageBanner2: 16px;
    
    --posicionart: 24px;
    --textosPosicionart: 16px;
    
    --numeros1: 24px;
    --numeros2: 48px;
    --numeros2: 85px;
    /* COLORS */
    --bloquePosicionart: rgba(57,60,67,1);
    --textoPosicionart: rgba(40, 42, 47, 0.8);
    
    --color1: rgba(5,226,208,1);
    --colorp: #ffcc00;
}

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

/* CONTENT HOME */
#banner-home{
    background-image: url('../img/marketing/mkt_digital_main_banner.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    width: 100%;
    min-height: 100vh;
    position: relative;
}
#container-header-elements{
    position: absolute;
    top: 30%;
}
#banner-message-1{font-size: var(--messageBanner1);}
#banner-message-2{font-size: var(--messageBanner2);}

#bloque-posicionart{background-color: var(--bloquePosicionart);}
.title-posicionart{font-size: var(--posicionart);}
#texto-posicionart{background-color: var(--textoPosicionart);font-size: var(--textosPosicionart);height: 85%;}
.color-1{color:var(--color1);}
.color-p{color:var(--colorp);}

#bloque-numeros{
    background-image: url('../img/marketing/mkt_digital_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);}

/* 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: 650px !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: 630px !important;}
    #container-header-elements{right: 0%;top: 25%;}
    #banner-message-1{font-size: 60px;}
    
    .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: 40px;}
    
    /* #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;}
}