:root {
    /*adjustment*/
    /*size*/
    --small-height: calc(2vh * var(--adj-height-generic, 1));
    --med-height: calc(4vh * var(--adj-height-generic, 1));
    /*generic*/
    --big-height: calc(12vh * var(--adj-height-generic, 1));
    --huge-height: calc(48vh * var(--adj-height-generic, 1));
    --small-width: calc(2vw * var(--adj-width-generic, 1));
    --med-width: calc(6vw * var(--adj-width-generic, 1));
    --big-width: calc(18vw * var(--adj-width-generic, 1));
    --huge-width: calc(54vw * var(--adj-width-generic, 1));
}

/*PORTRAIT/LANDSCAPE media queries*/
@media screen and (orientation: PORTRAIT) {
    :root {
        --flex-flow-mq-pl: var(--flex-flow-column-wrap);
        --adj-border-width: 1;
        --max-width-largest-mq: unset;
    }

    .phn-brk {
        display: block;
        margin-bottom: 1em;
    }

    .phn-brk-no-marg {
        display: block;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .phn-brk-dbl {
        display: block;
        margin-bottom: 2em;
    }

    :root {
        --prt-auto-lnd-0: auto;
        --prt-auto-lnd-pgmarg: auto;
        --prt-auto-lnd-widthm: auto;
        --prt-auto-lnd-btnoffset: auto;
    }

}

@media screen and (orientation: LANDSCAPE) {
    :root {
        --flex-flow-mq-pl: var(--flex-flow-column-wrap);
        --adj-border-width: 0.5;
        /*--flex-flow-justify-content-mq: space-between;*/
        --max-width-largest-mq: var(--width-largest);
    }

    .phn-brk {
        display: inline;
    }

    .phn-brk-no-marg {
        display: inline;
    }

    .phn-brk-dbl {
        display: inline;
    }

    .flex-cont-portland {
        display: flex;
        flex-direction: row;
    }

    .list-resp.horizontal {
        list-style: var(--list-style-outside-none);
        display: inline;
    }

    :root {
        --prt-auto-lnd-0: 0px;
        --prt-auto-lnd-pg: var(--width-margin-page-left);
        --prt-auto-lnd-widthm: auto;
        --prt-auto-lnd-btnoffset: calc(var(--width-small) * 0.15);
    }
   
}    

/* Minimum resolution */
@media (min-resolution: 72dpi) {
    #iden-resolution::after {
        content: "min-resolution: 72dpi";
    }
}

/* Maximum resolution */
@media (max-resolution: 300dpi) {
    #iden-resolution::after {
        content: "max-resolution: 300dpi";
    }
}

@media only screen and (min-width:0px) and (max-width: 374px) {
    @media screen and (orientation: PORTRAIT) {
        .media-query-width::after {
            content: "MQ1 PORTRAIT (min-width:0px) and (max-width:374px)"
        }

        :root {
            --mqw1: P;
            --adj-width-generic: 1.20;
            --adj-size-pg-title: 1;
            --adj-size-hx-text: 1;
            --adj-size-display-text: 2;
            /*new variable for exo*/
            --adj-display-font-exo: 1.3;
            --adj-size-body-text: 2;
            --adj-font-body-fancy: 2;
            --adj-font: 1;
            --adj-height-input: 1.3;
            --adj-width-button: 1.9;
        }
    }
}

@media screen and (orientation: LANDSCAPE) {
    .media-query-width::after {
        content: "MQ1 LANDSCAPE (min-width:0px) and (max-width:374px)"
    }

    :root {
        --mqw1: L;
        --adj-width-generic: 1.20;
        --adj-size-pg-title: 1;
        --adj-size-hx-text: 1;
        --adj-size-display-text: 2;
        /*new variable for exo*/
        --adj-display-font-exo: 1.25;
        --adj-size-body-text: 2;
        --adj-font: 1;
        --adj-height-input: 1.3;
        --adj-width-button: 1.9;
    }
}

@media only screen and (min-width:375px) and (max-width: 699px) {
    /*Local IPhone Port or Local Android L/S*/
    @media screen and (orientation: PORTRAIT) {
        .media-query-width::after {
            content: "MQ2 PORTRAIT (min-width:375px) and (max-width:699px)"
        }

        :root {
            --mqw2: P;
            --adj-width-generic: 1.25;
            --adj-size-pg-title: 1.5;
            --adj-size-hx-text: 1.1;
            --adj-size-display-text: 1.4;
            --adj-size-body-text: 1.85;
            --adj-font: 1.9;
            --adj-font-body-fancy: 1.7;
            /*new variable for exo*/
            --adj-display-font-exo: 1.25;
            --adj-height-input: 1.3;
            --adj-width-ctl: 0.5;
        }

        #ident-headline-wrapper {
            min-height: 20vh;
            background-color: var(--color-corp-strong);
        }

        .phn-brk {
            display: block;
            margin-top: 1em;
        }

        .phn-brk-dbl {
            display: block;
            margin-top: 2em;
        }

        header-box {
            padding-right: calc(var(--margin-page-margin-width) * 2);
        }
    }
}

@media screen and (orientation: LANDSCAPE) {
        .media-query-width::after {
            content: "MQ2 LANDSCAPE (min-width:375px) and (max-width:699px)"
        }

    :root {
        --mqw2: L;
        --adj-width-generic: 0.50;
        --adj-size-pg-title: 0.50;
        --adj-size-hx-text: 0.5;
        --adj-size-display-text: 1;
        --adj-size-body-text: 1;
        --adj-font-body-fancy: 1.1;
        --adj-height-input: 1.3;
        --adj-font: 0.5;
        --adj-display-font-exo: 1.05;
    }

    #ident-headline-wrapper {
        min-height: 20vh;
        background-color: var(--color-corp-strong);
    }

}

@media only screen and (min-width:700px) and (max-width: 899px) {
    /*Local IPad Port*/
    @media screen and (orientation: PORTRAIT) {
        .media-query-width::after {
            content: "MQ3 PORTRAIT (min-width:700px) and (max-width:899px)"
        }

        :root {
            --mqw3: P;
            --adj-width-generic: 1.07;
            --adj-size-pg-title: 1;
            --adj-size-hx-text: 0.7;
            --adj-size-display-text: 1;
            /*new variable for exo*/
            --adj-display-font-exo: 1.25;
            --adj-size-body-text: 1;
            --adj-font-body-fancy: 1.1;
            --adj-font: 1;
            --adj-height-input: 1.3;
            --adj-height-input: 1.3;
        }

        #ident-headline-wrapper {
            min-height: 25vh;
            background-color: var(--color-corp-strong);
        }

    }

    @media screen and (orientation: LANDSCAPE) {
        .media-query-width::after {
            content: "MQ3 LANDSCAPE (min-width:700px) and (max-width:899px)"
        }

        :root {
            --mqw3: L;
            --adj-width-generic: 1.07;
            --adj-size-pg-title: 1;
            --adj-size-hx-text: 0.7;
            --adj-size-display-text: 1;
            --adj-size-body-text: 1;
            --adj-font-body-fancy: 1;
            --adj-font: 1;
            --adj-height-input: 2;
        }

        #ident-headline-wrapper {
            min-height: 32vh;
            background-color: var(--color-corp-strong);
        }

    }
}

@media only screen and (min-width:900px) and (max-width: 1049px) {
    /*Local Android Tablet L/S*/
    @media screen and (orientation: PORTRAIT) {
        .media-query-width::after {
            content: "MQ4 PORTRAIT (min-width:900px) and (max-width:1049px)"
        }

        :root {
            --mqw4: P;
            --adj-width-generic: 0.55;
            --adj-size-pg-title: 1;
            --adj-size-hx-text: 0.75;
            --adj-size-display-text: 1;
            --adj-size-body-text: 0.95;
            --adj-font-body-fancy: 0.95;
            --adj-font: 1;
            --adj-height-input: 1.3;
        }

        #ident-headline-wrapper {
            min-height: 14vh;
            background-color: var(--color-corp-strong);
        }
               
    }

    @media screen and (orientation: LANDSCAPE) {
        .media-query-width::after {
            content: "MQ4 LANDSCAPE (min-width:900px) and (max-width:1049px)"
        }

        :root {
            --mqw4: L;
            --adj-width-generic: 0.55;
            --adj-size-pg-title: 1;
            --adj-size-hx-text: 0.6;
            --adj-size-display-text: 1;
            --adj-size-body-text: 0.8;
            --adj-font-body-fancy: 0.85;
            --adj-font: 1;
            --adj-height-input: 1.5;
        }

        #ident-headline-wrapper {
            min-height: 34vh;
            background-color: var(--color-corp-strong);
        }

    }
}

@media only screen and (min-width:1050px) and (max-width: 1299px) {
    /*Local IPad L/S*/
    @media screen and (orientation: PORTRAIT) {
        .media-query-width::after {
            content: "MQ5 PORTRAIT (min-width:1050px) and (max-width:1299px)"
        }

        :root {
            --mqw5: P;
            --adj-width-generic: 0.71;
            --adj-size-pg-title: 0.7;
            --adj-size-hx-text: 0.7;
            --adj-size-display-text: 0.9;
            --adj-size-body-text: 0.8;
            --adj-font-body-fancy: 0.9;
            --adj-font: 0.7;
            --adj-height-input: 1.3;
        }

        #ident-headline-wrapper {
            min-height: 10vh;
            background-color: var(--color-corp-strong);
        }

    }

    @media screen and (orientation: LANDSCAPE) {
        .media-query-width::after {
            content: "MQ5 LANDSCAPE (min-width:1050px) and (max-width:1299px)"
        }

        :root {
            --mqw5: L;
            --adj-width-generic: 0.71;
            --adj-size-pg-title: 0.7;
            --adj-size-hx-text: 0.7;
            --adj-size-display-text: 0.9;
            --adj-size-body-text: 0.9;
            --adj-font: 0.7;
            --adj-height-input: 1.3;
        }

    }
}

/*PL laptop*/
@media only screen and (min-width:1300px) and (max-width: 1439px) {
    /*PL IMac*/
    @media screen and (orientation: PORTRAIT) {
        .media-query-width::after {
            content: "MQ6 PORTRAIT (min-width:1300px) and (max-width:1439px)"
        }

        :root {
            --mqw6: P;
            --adj-width-generic: 0.58;
            --adj-size-pg-title: 0.5;
            --adj-size-hx-text: 0.5;
            --adj-size-display-text: 0.65;
            --adj-size-body-text: 0.65;
            --adj-font: 0.5;
            --adj-height-input: 1.3;
        }      

    }

    @media screen and (orientation: LANDSCAPE) {
        .media-query-width::after {
            content: "MQ6 LANDSCAPE (min-width:1300px) and (max-width:1439px)"
        }

        :root {
            --mqw6: L;
            --adj-width-generic: 0.58;
            --adj-size-pg-title: 0.5;
            --adj-size-hx-text: 0.5;
            --adj-size-display-text: 0.65;
            --adj-size-body-text: 0.75;
            --adj-font: 0.5;
            --adj-height-input: 1.3;
        }

        #ident-headline-wrapper {
            min-height: 20vh;
            background-color: var(--color-corp-strong);
        }

    }
}
    
/*Local machine*/
@media only screen and (min-width:1440px) and (max-width: 14400px) {
    @media screen and (orientation: PORTRAIT) {
        .media-query-width::after {
            content: "MQ7 PORTRAIT (min-width:1440px) and (max-width:14400px)"
        }

        :root {
            --mqw7: P;
            --adj-width-generic: 0.54;
            --adj-size-pg-title: 0.45;
            --adj-size-hx-text: 0.45;
            --adj-size-body-text: 0.6;
            --adj-size-display-text: 0.65;
            --adj-font: 0.45;
            --adj-height-input: 1.3;
            --adj-width-ctl: 0.5;
        }
    }

    @media screen and (orientation: LANDSCAPE) {
        .media-query-width::after {
            content: "MQ7 LANDSCAPE (min-width:1440px) and (max-width:14400px)"
        }

        :root {
            --mqw7: L;
            --adj-width-generic: 0.54;
            --adj-size-pg-title: 0.45;
            --adj-size-hx-text: 0.45;
            --adj-size-display-text: 0.65;
            --adj-size-body-text: 0.6;
            /*new variable for exo*/
            --adj-display-font-exo: 1.3;
            --adj-font-body-fancy: 0.60;
            --adj-font: 0.45;
            --adj-display-font-exo: 0.6;
            --adj-height-input: 1.3;
            --adj-width-ctl: 0.5;
        }
    }

}

@media only screen and (min-height:0px) and (max-height: 374px) {
    /*Local Android L/S*/
    @media screen and (orientation: PORTRAIT) {
        .mediaQueryHeight::after {
            content: "MQ8 PORTRAIT (min-height:0px) and (max-height:374px)"
        }

        :root {
            --mqh8: P;
            --adj-height-generic: 1.00;
        }
        
    }

    @media screen and (orientation: LANDSCAPE) {
        .mediaQueryHeight::after {
            content: "MQ8 LANDSCAPE (min-height:0px) and (max-height:374px)"
        }

        :root {
            --mqh8: L;
            --adj-height-generic: 1.00;
        }
    }
}

@media only screen and (min-height:375px) and (max-height: 699px) {
    /*Android Tablet L/S*/
    @media screen and (orientation: PORTRAIT) {
        .mediaQueryHeight::after {
            content: "MQ9 PORTRAIT (min-height:375px) and (max-height:699px)"
        }

        :root {
            --mqh9: P;
            --adj-height-generic: 1;
            --adj-height-panel: 0.6;
        }

    }

    @media screen and (orientation: LANDSCAPE) {
        .mediaQueryHeight::after {
            content: "MQ9 LANDSCAPE (min-height:375px) and (max-height:699px)"
        }

        :root {
            --mqh9: L;
            --adj-height-generic: 1;
            --adj-height-panel: 0.6;
        }
    }
}

@media only screen and (min-height:700px) and (max-height: 899px) {
    /*Local IPhone Port Local IPad L/S PL IMac*/
    @media screen and (orientation: PORTRAIT) {
        .mediaQueryHeight::after {
            content: "MQ10 PORTRAIT (min-height:700px) and (max-height:899px)"
        }
    
        :root {
            --mqh10: P;
            --adj-height-generic: 1.2;
        }
    }

    @media screen and (orientation: LANDSCAPE) {
        .mediaQueryHeight::after {
            content: "MQ10 LANDSCAPE (min-height:700px) and (max-height:899px)"
        }

        :root {
            --mqh10: L;
            --adj-height-generic: 1.07;
        }
    }
}

@media only screen and (min-height:900px) and (max-height: 1049px) {
    /*Local IPad Port*/
    @media screen and (orientation: PORTRAIT) {
        .mediaQueryHeight::after {
            content: "MQ11 PORTRAIT (min-height:900px) and (max-height:1049px)"
        }

        :root {
            --mqh11: P;
            --adj-height-generic: 0.55;
        }

    }

    @media screen and (orientation: LANDSCAPE) {
        .mediaQueryHeight::after {
            content: "MQ11 LANDSCAPE (min-height:900px) and (max-height:1049px)"
        }

        :root {
            --mqh11: L;
            --adj-height-generic: 0.55;
        }
    }
}

@media only screen and (min-height:1050px) and (max-height: 1299px) {
    @media screen and (orientation: PORTRAIT) {
        .mediaQueryHeight::after {
            content: "MQ12 PORTRAIT (min-height:1050px) and (max-height:1299px)"
        }

        :root {
            --mqh12: P;
            --adj-height-generic: 0.71;
        }
    }

    @media screen and (orientation: LANDSCAPE) {
        .mediaQueryHeight::after {
            content: "MQ12 LANDSCAPE (min-height:1050px) and (max-height:1299px)"
        }

        :root {
            --mqh12: L;
            --adj-height-generic: 0.71;
        }
    }
}

@media only screen and (min-height:1300px) and (max-height: 1439px) {
    @media screen and (orientation: PORTRAIT) {
        .mediaQueryHeight::after {
            content: "MQ13 PORTRAIT (min-height:1300px) and (max-height:1439px)"
        }

        :root {
            --mqh13: P;
            --adj-height-generic: 0.58;
        }
    }

    @media screen and (orientation: LANDSCAPE) {
        .mediaQueryHeight::after {
            content: "MQ13 LANDSCAPE (min-height:1300px) and (max-height:1439px)"
        }

        :root {
            --mqh13: L;
            --adj-height-generic: 0.58;
        }
    }
}

@media only screen and (min-height:1440px) and (max-height: 14400px) {
    @media screen and (orientation: PORTRAIT) {
        .mediaQueryHeight::after {
            content: "MQ14 PORTRAIT (min-height:1440px) and (max-height:14400px)"
        }

        :root {
            --mqh14: P;
            --adj-height-generic: 0.54;
        }
    }

    @media screen and (orientation: LANDSCAPE) {
        .mediaQueryHeight::after {
            content: "MQ14 LANDSCAPE(min-height:1440px) and (max-height:14400px)"
        }

        :root {
            --mqh14: L;
            --adj-height-generic: 0.54;
        }
    }
}