:root{
    /* FONT SIZES */
    --messageBanner1: 100px;
    --messageBanner2: 16px;
    
    --posicionart: 24px;
    --textosPosicionart: 13px;
    
    --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;
}
.color-p{color:var(--colorp);}
/* DEFAULTS (Color Text, Size Text and more) */

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

.carousel-indicators {
    text-align: right;
    float: right;
    right: 2% !important;
    left: inherit;
}
.my-caption-carousel{
    top: 10%;
}
.carousel-indicators li {
    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
}

.carousel-indicators li.active {
    background-color: rgba(249,187,0,1) !important;
}

#bloque-valores{background-color: var(--bloquePosicionart);}
.title-valores{font-size: var(--posicionart);}
#texto-valores{background-color: var(--textoPosicionart);font-size: var(--textosPosicionart);height: 90%;}

#bloque-numeros{
    background-image: url('../img/fasst/grupo_fasst_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%;
}
.transparent-background
{
    background-color: rgba(0,0,0,0.6);
}
.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;}
    
    #banner-message-2{width: 100% !important;}
    
    .text-caption{font-size: 18px;}
    #texto-valores{font-size: 11px;height: 85%;}
}

/*  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: 860px !important;}
    #banner-message-1{font-size: 90px;}
    #banner-message-2{width: 100% !important;}
    #container-header-elements{top:20%;}
    
    .text-caption{font-size: 18px;}
    #texto-valores{font-size: 11px;height: 85%;}
    
    .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: 860px !important;}
    #container-header-elements{right: 0%;top: 15%;}
    #banner-message-1{font-size: 60px;}
    #banner-message-2{width: 100% !important;}
    
    .text-caption{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: 1100px !important;}
    #container-header-elements{right: 0%;top: 10%;}
    #banner-message-1{font-size: 40px;}
    #banner-message-2{width: 100% !important;}
    
    .text-caption{font-size: 12px;}
    
    #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;}
}