/* =====================================================
   RESET / BASIC PAGE
   ===================================================== */
* {
    box-sizing:border-box;
}
body {
    margin:0;
    background:#F1F1F1;
    overflow-x:hidden;
}
/* =====================================================
   PAGE CONTAINER
   ===================================================== */
.page-container {
    width:829px;
    margin:0 auto;
}
/* =====================================================
   HEADER
   ===================================================== */
.site-header {
    display:grid;
    grid-template-columns:198px 516px 85px;
    width:829px;
    margin-top:15px;
    margin-left:-24px;
    padding:0;
    justify-content:start;
    justify-items:start;
    align-items:start;
}
.header-brand {
    width:198px;
}
.header-brand img {
    margin-top:15px;
     margin-left:10px;
    display:block;
    width:180px;
    height:auto;
}
.header-title {
    width:516px;
}
.header-title img {
    display:block;
    width:516px;
    height:85px;
}
.header-ornament {
    width:85px;
}
.header-ornament img {
    display:block;
    width:85px;
    height:85px;
}
/* =====================================================
   LANGUAGE NAVIGATION
   ===================================================== */
.language-navigation {
    position:absolute;
    left:0;
    top:50px;
    display:flex;
    gap:10px;
}
.language-navigation img {
 margin-top:4px;
    height:32px;
    width:auto;
}
/* =====================================================
   MAIN STRUCTURE
   ===================================================== */
.main-layout {
    display:grid;
    grid-template-columns:170px 615px;
    gap:10px;
    align-items:start;
}
.portal-navigation {
    width:170px;
}
.content-area {
    width:615px;
}
/* =====================================================
   LEFT NAVIGATION
   ===================================================== */
.portal-block {
    width:170px;
    text-align:left;
    margin-bottom:25px;
}
.portal-block > img {
    display:block;
    width:170px;
    height:21px;
    margin:20px 0 10px 0;
}
/* =====================================================
   DROPDOWNS
   ===================================================== */
.dropdown {
    position:relative;
    margin-top:4px;
}
.dropbtn {
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
    font-family:"DTL Argo WST Medium", sans-serif;
    font-size:12px;
    margin-top:12px;
}
.dropdown-content {
    display:none;
    position:absolute;
     left:100%;
        transform:translateX(-100%);
    top:80%;
    min-width:170px;
    margin-top:30px;
    background:#f9f9f9;
    border:1px solid #aaa;
    z-index:100;
}
    
.dropdown-content a {
    display:block;
    padding:4px 8px;
    color:#000;
    text-decoration:none;
    font-family:"DTL Argo WST", sans-serif;
    font-size:11px;
}
.dropdown-content a:hover {
    background:#ddd;
}
.dropdown-content.show {
    display:block;
}
/* =====================================================
   CONTENT
   ===================================================== */
.content-line {
    width:585px;
    height:2px;
    margin:0 0 21px 0;
    display:block;
}
.illustrations {
    width:585px;
    display:grid;
    grid-template-columns:repeat(6,85px);
    column-gap:15px;
    margin-top:25px;
}
.illustrations img {
    width:85px;
    height:85px;
}
.content-columns {
    width:615px;
    display:grid;
    grid-template-columns:285px 285px;
    gap:15px;
    margin-top:20px;
    margin-bottom:-40px;
}
.content-columns h1,
.content-columns h2,
.content-columns p {
    font-family:"DTL Argo WST", sans-serif;
    font-size:11px;
    line-height:16px;
    font-weight:normal;
    margin:0 0 16px 0;
}
/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
    width:585px;
    margin-top:35px;
    margin-left:180px;
}
.site-footer > img:first-child {
    width:585px;
    height:2px;
}
.site-footer a img[alt="Exquisite Fonts logo"] {
    width:auto;
    height:24px;
    margin-top:-10px;
}
/* =====================================================
   SCALE
   ===================================================== */
.page-scale {
    width:829px;
    margin:0 auto;
    transform-origin:top center;
}
@media (min-width:900px) {
    .page-scale {
        transform:scale(calc((100vw - 40px) / 829));
    }
}
@media (min-width:1200px) {
    .page-scale {
        transform:scale(1.5);
    }
    
}
/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width:900px) {
    .page-scale {
        width:100%;
        transform:none;
    }
    .page-container {
        width:100%;
        padding:20px;
    }
    /* HEADER */
    .site-header {
        width:100%;
        margin:0;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
    }
    .header-brand {
        margin-bottom:15px;
    }
    .header-brand img {
        width:160px;
    }
    .header-title {
        width:100%;
    }
    .header-title img {
        width:100%;
        max-width:516px;
        height:auto;
    }
    .header-ornament {
        margin-top:10px;
    }
    .header-ornament img {
        width:60px;
        height:60px;
    }
    .language-navigation {
        display:none;
    }
    /* MAIN */
    .main-layout {
        display:flex;
        flex-direction:column;
        width:100%;
    }
    .portal-navigation {
        width:100%;
        order:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        margin-top:20px;
    }
    .content-area {
        width:100%;
        order:2;
    }
    /* MOBILE MENUS */
    .portal-block {
        width:100%;
        text-align:center;
        margin-bottom:20px;
    }
    .portal-block > img {
        margin:0 auto 10px auto;
        top:0;
    }
    .dropdown {
        top:0;
        text-align:center;
        margin-bottom:10px;
    }
    .dropbtn {
        display:inline-block;
        font-size:14px;
        margin-top:5px;
    }
    .dropdown-content {
        position:relative;
        left:50%;
        transform:translateX(-50%);
        top:0;
        width:220px;
        text-align:left;
        margin-top:5px;
    }
    /* IMAGES */
    .illustrations {
        width:100%;
        grid-template-columns:repeat(auto-fit,85px);
        justify-content:flex-start;
        gap:15px;
    }
    /* TEXT */
    .content-columns {
        width:100%;
        display:block;
        margin-bottom:20px;
    }
    .intro-text,
    .reference-text {
        width:100%;
    }
    /* FOOTER */
    .site-footer {
        width:100%;
        margin:30px 0 0 0;
    }
    .site-footer > img:first-child {
        width:100%;
        height:auto;
    }
}
/* =====================================================
   RESET / BASIC PAGE
   ===================================================== */
* {
    box-sizing:border-box;
}
body {
    margin:0;
    background:#F1F1F1;
    overflow-x:hidden;
}
/* =====================================================
   PAGE CONTAINER
   ===================================================== */
.page-container {
    width:829px;
    margin:0 auto;
}
/* =====================================================
   HEADER
   ===================================================== */
.site-header {
    display:grid;
    grid-template-columns:198px 516px 85px;
    width:829px;
    margin-top:15px;
    margin-left:-24px;
    padding:0;
    justify-content:start;
    justify-items:start;
    align-items:start;
}
.header-brand {
    width:198px;
}
.header-brand img {
    display:block;
    width:180px;
    height:auto;
}
.header-title {
    width:516px;
}
.header-title img {
    display:block;
    width:516px;
    height:85px;
}
.header-ornament {
    width:85px;
}
.header-ornament img {
    display:block;
    width:85px;
    height:85px;
}
/* =====================================================
   LANGUAGE NAVIGATION
   ===================================================== */
.language-navigation {
    position:absolute;
    left:0;
    top:50px;
    display:flex;
    gap:10px;
}
.language-navigation img {
    height:32px;
    width:auto;
}
/* =====================================================
   MAIN STRUCTURE
   ===================================================== */
.main-layout {
    display:grid;
    grid-template-columns:170px 615px;
    gap:10px;
    align-items:start;
}
.portal-navigation {
    width:170px;
}
.content-area {
    width:615px;
}
/* =====================================================
   LEFT NAVIGATION
   ===================================================== */
.portal-block {
    width:170px;
    text-align:left;
    margin-bottom:25px;
}
.portal-block > img {
    display:block;
    width:170px;
    height:21px;
    margin:20px 0 10px 0;
}
/* =====================================================
   DROPDOWNS
   ===================================================== */
.dropdown {
    position:relative;
    top:10px;
}
.dropbtn {
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
    font-family:"DTL Argo WST Medium", sans-serif;
    font-size:12px;
    margin-top:12px;
}
.dropdown-content {
    display:none;
    position:absolute;
    left:170px;
    top:0;
    min-width:170px;
    background:#f9f9f9;
    border:1px solid #aaa;
    z-index:100;
}
.dropdown-content a {
    display:block;
    padding:4px 8px;
    color:#000;
    text-decoration:none;
    font-family:"DTL Argo WST", sans-serif;
    font-size:11px;
}
.dropdown-content a:hover {
    background:#ddd;
}
.dropdown-content.show {
    display:block;
}
/* =====================================================
   CONTENT
   ===================================================== */
.content-line {
    width:585px;
    height:2px;
    margin:0 0 21px 0;
    display:block;
}
.illustrations {
    width:585px;
    display:grid;
    grid-template-columns:repeat(6,85px);
    column-gap:15px;
    margin-top:25px;
}
.illustrations img {
    width:85px;
    height:85px;
}
.content-columns {
    width:615px;
    display:grid;
    grid-template-columns:285px 285px;
    gap:15px;
    margin-top:20px;
    margin-bottom:-40px;
}
.content-columns h1,
.content-columns h2,
.content-columns p {
    font-family:"DTL Argo WST", sans-serif;
    font-size:11px;
    line-height:16px;
    font-weight:normal;
    margin:0 0 16px 0;
}
/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
    width:585px;
    margin-top:35px;
    margin-left:180px;
}
.site-footer > img:first-child {
    width:585px;
    height:2px;
}
.site-footer a img[alt="Exquisite Fonts logo"] {
    width:auto;
    height:24px;
    margin-top:-10px;
}
/* =====================================================
   SCALE / RESPONSIVE BREAKPOINTS
   ===================================================== */
.page-scale {
    width:829px;
    margin:0 auto;
    transform-origin:top center;
}
/* =====================================================
   LARGE DESKTOP
   ===================================================== */
@media (min-width:1200px) {
    .page-scale {
        transform:scale(1.6);
    }
}
/* =====================================================
   TABLET / SMALL LAPTOP
   701px - 1199px
   Keeps original desktop proportions
   ===================================================== */
@media (min-width:701px) and (max-width:1199px) {
    .page-scale {
        width:829px;
        transform:scale(1.4);
    }
    .page-container {
        width:829px;
    }
    body {
        overflow-x:auto;
    }
}
/* =====================================================
   MOBILE
   max-width:700px
   ===================================================== */
@media (max-width:700px) {
    body {
        overflow-x:hidden;
    }
    .page-scale {
        width:100%;
        transform:none;
    }
    .page-container {
        width:100%;
        padding-top:20px;
        padding-left:35px;
        padding-right:35px;
        padding-bottom:20px;
    }
    /* HEADER */
    .site-header {
        width:100%;
        margin:0;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
    }
    .header-brand {
        margin-bottom:15px;
        align-self:center;
        text-align:center;
        margin-left:-40px;
    }
    .header-brand img {
        width:240px;
        height:auto;
    }
    .header-title {
        width:100%;
    }
    .header-title img {
        width:100%;
        max-width:516px;
        height:auto;
    }
    .header-ornament {
        margin-top:10px;
        align-self:center;
        text-align:center;
         margin-left:50px;
    }
    .header-ornament img {
        width:60px;
        height:60px;
        margin-bottom:-20px;
    }
    .language-navigation {
        display:none;
    }
    /* MAIN */
    .main-layout {
        display:flex;
        flex-direction:column;
        width:100%;
        align-items:flex-start;
    }
    .portal-navigation {
        width:170px;
        margin:20px auto 0 auto;
        display:flex;
        flex-direction:column;
        align-items:center;
    }
    .content-area {
        width:100%;
        margin-top:20px;
    }
    /* MENUS */
    .portal-block {
        width:170px;
        text-align:center;
        margin-bottom:20px;
    }
    .dropdown {
        width:170px;
        text-align:center;
        top:0;
    }
    .dropbtn {
        display:inline-block;
        width:auto;
        max-width:120%;
        white-space:nowrap;
        font-size:18px;
        margin:5px auto;
        text-align:center;
    }
    .dropdown-content {
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        top:100%;
        width:220px;
        margin-top:5px;
        text-align:left;
    }
    .dropdown-content a {
        font-size:18px;
        padding:4px 8px;
    }
    /* IMAGES */
  /* IMAGES */
.illustrations {
    width:100%;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:5px;
    align-items:start;
}

.illustrations img {
    width:100%;
    height:auto;
    max-width:85px;
}
    /* TEXT */
    .content-columns {
        width:100%;
        display:block;
        margin-bottom:20px;
    }
    .content-columns h1,
    .content-columns h2,
    .content-columns p {
        font-size:16px;
        line-height:28px;
    }
    .intro-text,
    .reference-text {
        width:100%;
    }
    /* LINES */
    .content-line {
        width:100%;
        height:auto;
        margin-top:-20px;
        margin-bottom:30px;
    }
    /* FOOTER */
    .site-footer {
        width:100%;
        margin:30px 0 0 0;
        align-self:center;
        text-align:center;
    }
    .site-footer > img:first-child {
        width:100%;
        height:auto;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}