/* 
-- nom: suitT.css  --
-- autor: A.Moseguí / TT22 --
-- versió: 2504 --
*/
:root {
    --s-wdh: var(--widthVW-total);
    --s-hgt: var(--heightVW-total);
    --s-max-wdh: var(--max-wdh);
    --s-min-wdh: var(--min-wdh);
    --s-min-hgt: var(--min-hgt);
    --sh-hgt: 4rem;
    --sb-hgt: 2.6rem;
    --sf-hgt: 2rem;
    --s1m-hgt: 100vh;
    --s2m-hgt: calc(100vh - var(--sh-hgt));
    --s3m-hgt: calc(100vh - (var(--sh-hgt) + var(--sf-hgt)));
    --s4m-hgt: calc(100vh - (var(--sh-hgt) + var(--sb-hgt) + var(--sf-hgt)));
    --s4m-sf-none-hgt-720: calc(100vh - (var(--sh-hgt) + var(--sb-hgt)));
}
:root {
    --s-bgc-top: rgba(var(--SignalBlack-color), 0);
    --s-bgc-btm: rgba(var(--SignalBlack-color), 0.65);
    --s-opacity: var(--OpacityHigh-color);
}
/*  SUIT= s -- */
.s {
    width: var(--s-wdh);
    height: var(--s-hgt);
    max-width: var(--s-max-wdh);
    min-width: var(--s-min-wdh);
    min-height: var(--s-min-hgt);
    margin: 0 auto;
    display: flex;
    flex-flow: column nowrap;
}

.s {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--s-bgc-top)), color-stop(100%, var(--s-bgc-btm)));
}

.sh,
.sb,
.s1m,
.s2m,
.s3m,
.s4m,
.sf {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sh {
    height: var(--sh-hgt);
}

.sb {
    height: var(--sb-hgt);
}

.s1m {
    height: var(--s1m-hgt);
}

.s2m {
    height: var(--s2m-hgt);
}

.s3m {
    height: var(--s3m-hgt);
}

.s4m {
    height: var(--s4m-hgt);
}

.sf {
    height: var(--sf-hgt);
}

/* -- BOX = box -- */
.box {
    display: flex;
    margin: 0 auto;
}

.box--sdw-bt {
    box-shadow: var(0 1em .6em -.6em rgba(0, 0, 0, 0.5), 0 .1em .25em rgba(0, 0, 0, 0.3));
}

.box--sdw-in {
    box-shadow: 0 1em .6em -.6em rgba(0, 0, 0, 0.5), 0 .1em .25em rgba(0, 0, 0, 0.3), 0 0 2.5em rgba(0, 0, 0, 0.1) inset;
}

/* -- TEXT = txt -- */
.txt--white {
    color: rgb(var(--White-color));
}

.txt--SilkWhite {
    color: rgb(var(--SilkWhite-color));
}

.txt--ClClrHg {
    color: var(--cl-clr-hg);
}

.txt--black {
    color: rgb(var(--Black-color));
}

.txt--pissarra {
    color: rgb(var(--SlateGray-color));
}

.txt--coral {
    color: rgb(var(--Coral-color));
}

.txt--maroon {
    color: rgb(var(--Maroon-color));
}

.txt--highlight {
    color: rgb(var(--Coral-color));
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
}

.txt__wt-400 {
    font-weight: 400;
}

.txt__wt-700 {
    font-weight: 700;
}

.txt__sz--1 {
    font-size: 1rem;
    font-weight: 400;
}

.txt__sz--1_2 {
    font-size: 1.2rem;
    font-weight: 400;
}

.txt__sz--1_5 {
    font-size: 1.5rem;
    font-weight: 400;
}

.txt__sz--2 {
    font-size: 2rem;
    font-weight: 700;
}

.txt__sz--3 {
    font-size: 3rem;
    font-weight: 700;
}

.txt--resz-2 {
    font-size: calc(2rem + 3vw);
}

.txt--resz-1_5 {
    font-size: calc(1.5rem + 2vw);
}

.txt--resz-1 {
    font-size: calc(1rem + 2vw);
}

.txt--resz-0_5 {
    font-size: calc(.5rem + 2vw);
}

.txt--resz-0_2 {
    font-size: calc(.2rem + 2vw);
}

.txt--resz-0 {
    font-size: calc(2vw);
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

@media (max-width:720px) {
    .sf--none {
        display: none;
    }

    .s4m--sf--none {
        height: var(--s4m-sf-none-hgt-720);
    }
}