:root{
    /* FONT SIZES */
    --messageBanner1: 100px;
    --messageBanner2: 16px;
    
    --crm: 24px;
    --textosCrm: 16px;
    
    --numeros1: 24px;
    --numeros2: 48px;
    --numeros2: 85px;
    /* COLORS */
    --bloqueCrm: rgba(57,60,67,1);
    --textoCrm: rgba(40, 42, 47, 0.8);
    
    --color1: rgba(247,0,105,1);
    --color2: rgba(119,212,77,1);
    --colorp: #ffcc00;
}

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

/* CONTENT HOME */
#banner-home{
    background-image: url('../img/software/software_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%;
    right: 3%;
}
#banner-message-1{font-size: var(--messageBanner1);}
#banner-message-2{font-size: var(--messageBanner2);}

.title-kapta,.title-prospekta{font-size: var(--crm);}
#bloque-crm{background-color: var(--bloqueCrm);}
#texto-kapta,#texto-prospketa{background-color: var(--textoCrm);font-size: var(--textosCrm);min-height: 450px;}
.color-1{color:var(--color1);}
.color-2{color:var(--color2);}
.color-p{color:var(--colorp);}

#bloque-numeros{
    background-image: url('../img/software/software_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;}
    
    .title-prospekta{margin-top: 3rem !important;}
    
    /* #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;}
}