/*
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Global CSS Rules for Fonts and Layout - Starts Here
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
*/
/* Global Variables */
@import url('forms.css');
:root{
    --primary-dark: #173C3F; /* Used as CTA Dark too */
    --primary-dark-40-transparent: rgba(23, 60, 63, 0.64);
    --primary-light: #D7E9E3;  /* Used as CTA Light too */
    --primary-light-25-transparent: rgba(215, 233, 227, 0.25);
    --secondary-light-green: #395D62; /* Used as CTA Dark too */
    --secondary-light-green-25-transparent: rgba(114, 187, 163, 0.25);
    --link-color: #4992A0;
    --white-color: #FFFFFF;
    --black-color: #000000;
    --star-grey: #D9D9D9;
    --light-grey: #F9F9F9;
    --error-color: #e74c3c;
    --cta-mid: #306970;
    --banner-anchor-color: #72BBA3;

    /* Nav Style Colors */
    --nav-primary-li: #395D62;
    --nav-primary-bg: #F1F1F1;

    --font-lato: "Lato", sans-serif;
    --font-garamond: "adobe-garamond-pro", serif;
    --font-awesome: "Font Awesome 6 Free";

    --font-weight-regular: 400;
    --font-weight-semi-bold: 500;
    --font-weight-bold: 700;

    --font-style-normal: normal;
    --font-style-italic: italic;

    --base-font-size: 15px;
    --base-line-height: calc(var(--base-font-size) * 1.5);

    --base-sm-padding: 10px;
    --base-lg-padding: 30px;

    --base-sm-margin: 10px;
    --base-lg-margin: 30px;

    --base-width: 100%;
    --base-max-width: 320px;

    --base-height: 100vh;

    --base-text-align-left: left;
    --base-text-align-center: center;
    --base-text-align-right: right;

    --base-border: 1px solid rgba(0,0,0,0.26);
    --base-border-radius: 5px;
    --base-shadow: 0 0 15px 5px rgba(0,0,0,0.26);

    --base-bg-30-transparent: rgba(0, 0, 0, 0.5);

    --offset-shadow-top: 20px -20px 0px var(--primary-light);
    --offset-shadow-bottom: -20px 20px 0px var(--primary-light);

    --offset-shadow-top-left: -20px -20px 0px var(--primary-light);
    --offset-shadow-bottom-right: 20px 20px 0px var(--primary-light);

    --offset-shadow-top-secondary: 20px -20px 0px var(--secondary-light-green-25-transparent);
    --offset-shadow-bottom-secondary: -20px 20px 0px var(--secondary-light-green-25-transparent);

    --offset-shadow-top-left-secondary: -20px -20px 0px var(--secondary-light-green-25-transparent);
    --offset-shadow-bottom-right-secondary: 20px 20px 0px var(--secondary-light-green-25-transparent);

}
/* WildCard Settings */
*{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    list-style: none;
    box-sizing: border-box;
}
/* Global Default Font Settings - Lato Regular */
html, body, a {
    font-family: var(--font-lato);
    font-weight: var(--font-weight-regular);
    font-style: var(--font-style-normal);
    font-size: var(--base-font-size);
    color: var(--black-color);
    text-align: var(--base-text-align-left);
    scroll-behavior: smooth;
}
p, div{
    line-height: var(--base-line-height);
}
section{
    padding: var(--base-lg-padding) 0;
    &.half-padding{
        padding: calc(var(--base-lg-padding) / 2) 0;
    }
}
video{
    border-radius: var(--base-border-radius);
}
strong{
    font-weight: var(--font-weight-bold);
    &.h6-style{
        font-size: calc(var(--base-font-size) * 1.75);
        line-height: calc(var(--base-font-size) * 2.75);
    }
    &.h5-style{
        font-weight: var(--font-weight-semi-bold);        
    }
}
/* Link Styling */
a{
    text-decoration: none;
    color: var(--link-color);
    font-weight: var(--font-weight-bold);
    &:hover{
        text-decoration: underline;
    }
}
/* Heading Styling */
h1, h2, h3, h4, h5, h6, .h5-style, .h6-style {
    font-family: var(--font-garamond);
    font-weight: var(--font-weight-bold);
    font-style: var(--font-style-normal);
}
h1 {
    font-size: calc(var(--base-font-size) * 1.9);
    line-height: calc(var(--base-font-size) * 2.4);
}
h2 {
    font-size: calc(var(--base-font-size) * 1.7);
    line-height: calc(var(--base-font-size) * 2.2);
}
h3 {
    font-size: calc(var(--base-font-size) * 1.3);
    line-height: calc(var(--base-font-size) * 1.8);
}
h4 {
    font-size: calc(var(--base-font-size) * 1.2);
    line-height: calc(var(--base-font-size) * 1.7);
    &.h4-medium-font{
        font-size: calc(var(--base-font-size) * 1.8889);
        line-height: calc(var(--base-font-size) * 2.8889);
    }
    &.h4-small-font{
        font-size: calc(var(--base-font-size) * 1.3333);
        line-height: calc(var(--base-font-size) * 2.3333);
    }
}
h5, .h5-style {
    font-size: calc(var(--base-font-size) * 1.5);
    line-height: calc(var(--base-font-size) * 2);
}
h6, .h6-style {
    font-size: calc(var(--base-font-size) * 1.75);
    line-height: calc(var(--base-font-size) * 2.75);
}
hr{
    border: var(--base-border);
    border-color: var(--white-color);
    margin: var(--base-sm-margin) 0;
    &.border-black{
        border-color: var(--black-color);
    }
    &.border-half{
        border-width: calc(1px / 2);
    }
    &.border-x2{
        border-width: calc(1px * 2);
    }
    &.border-x3{
        border-width: calc(1px * 3);
    }
}
img{
    display: block;
}
/* Global Layout Styles */
.container,
.container-fluid {
    margin: 0 auto;
}
.container {
    width: var(--base-width);
    max-width: var(--base-max-width);
    padding: 0 calc(var(--base-sm-padding) * 2);
}
.contianer-fluid,
.col {
    width: var(--base-width);
}
/* Row and Column Layout */
.row {
    width: var(--base-width);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    align-content: space-between;
    align-items: stretch;
}
.col2 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 2);
}
.col3 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 3);
}
.col4 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 4);
}
.col5 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 5);
}
.col6 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 6);
}
.col7 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 7);
}
.col8 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 8);
}
.col9 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 9);
}
.col10 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 10);
}
.col11 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 11);
}
.col12 .col {
    width: var(--base-width);
    max-width: calc(var(--base-width) / 12);
}
.col{
    &.w20 {
        width: calc(var(--base-width) / 100 * 20);
        max-width: calc(var(--base-width) / 100 * 20);
    }
    &.w25 {
        width: calc(var(--base-width) / 100 * 25);
        max-width: calc(var(--base-width) / 100 * 25);
    }
    &.w30 {
        width: calc(var(--base-width) / 100 * 30);
        max-width: calc(var(--base-width) / 100 * 30);
    }
    &.w35 {
        width: calc(var(--base-width) / 100 * 35);
        max-width: calc(var(--base-width) / 100 * 35);
    }
    &.w40 {
        width: calc(var(--base-width) / 100 * 40);
        max-width: calc(var(--base-width) / 100 * 40);
    }
    &.w45 {
        width: calc(var(--base-width) / 100 * 45);
        max-width: calc(var(--base-width) / 100 * 45);
    }
    &.w50 {
        width: calc(var(--base-width) / 100 * 50);
        max-width: calc(var(--base-width) / 100 * 50);
    }
    &.w55 {
        width: calc(var(--base-width) / 100 * 55);
        max-width: calc(var(--base-width) / 100 * 55);
    }
    &.w60 {
        width: calc(var(--base-width) / 100 * 60);
        max-width: calc(var(--base-width) / 100 * 60);
    }
    &.w65 {
        width: calc(var(--base-width) / 100 * 65);
        max-width: calc(var(--base-width) / 100 * 65);
    }
    &.w70 {
        width: calc(var(--base-width) / 100 * 70);
        max-width: calc(var(--base-width) / 100 * 70);
    }
    &.w75 {
        width: calc(var(--base-width) / 100 * 75);
        max-width: calc(var(--base-width) / 100 * 75);
    }
    &.w80 {
        width: calc(var(--base-width) / 100 * 80);
        max-width: calc(var(--base-width) / 100 * 80);
    }
    &.w85 {
        width: calc(var(--base-width) / 100 * 85);
        max-width: calc(var(--base-width) / 100 * 85);
    }
    &.w90 {
        width: calc(var(--base-width) / 100 * 90);
        max-width: calc(var(--base-width) / 100 * 90);
    }
    &.w100 {
        width: var(--base-width);
        max-width: var(--base-width);
    }
}
/* Global Class Based Styles */
.body-accent{
    font-style: var(--font-style-italic);
}
.spacer{
    width: var(--base-width);
    height: calc(var(--base-font-size) * 1.25);
    &.x2{
        height: calc(var(--base-font-size) * 2.5);
    }
    &.half{
        height: calc(var(--base-font-size) * 1);
    }
    &.quarter{
        height: calc(var(--base-font-size) * 0.3125);
    }
    &.base{
        height: var(--base-font-size);
    }
}
.border-bottom{
    border-bottom: var(--base-border);
}
section#footer-divider{
    padding: 0;
}
/* Global Color Classes */
.color-black{
    color: var(--black-color);
}
/* Global Button Styles */
.btn-holder{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--base-sm-margin);
    & .btn{
        border-radius: calc(var(--base-font-size) * 0.25);
        font-weight: var(--font-weight-bold) !important;
        font-size: calc(var(--base-font-size) * 1);
        line-height: var(--base-line-height);
        text-align: var(--base-text-align-center);
        padding: var(--base-sm-padding) calc(var(--base-sm-padding) * 2);
        margin-right: var(--base-sm-margin);
        &:last-child{
            margin-right: 0;
        }
    }
    & .btn-primary{
        background-color: var(--primary-dark);
        border: var(--base-border);
        border-color: var(--primary-dark);
        color: var(--white-color);
    }
    & .btn-secondary{
        background-color: var(--secondary-light-green);
        border: var(--base-border);
        border-color: var(--secondary-light-green);
        color: var(--white-color);
    }
    & .btn-outline{
        background-color: transparent;
        border: var(--base-border);
        border-color: var(--white-color);
        color: var(--white-color);
    }
    & .btn-text-link{
        background-color: transparent;
        color: var(--secondary-light-green);
        &.no-padding{
            padding: 0;
        }
        &.base-font{
            font-size: var(--base-font-size);
        }
    }
    & .btn-outline-white{
        border-width: 2px;
        border-color: var(--white-color);
    }
}
.content-holder{
    display: block;
}
.adobe-font{
    font-family: var(--font-garamond);
}
/* Global iFrame Styles */
.iframe-container{
    min-width: var(--base-width);
    min-height: calc(var(--base-font-size) * 11);
    & iframe{
        width: inherit;
        min-width: inherit;
        max-width: var(--base-width);
        height: inherit;
        min-height: inherit;
    }
    & img{
        width: inherit;
        min-width: inherit;
        max-width: var(--base-width);
        height: inherit;
        min-height: inherit;
    }
}
/* Global List Styles */
ul.vertical-list{
    & li {
        position: relative;
        padding-bottom: calc(var(--base-sm-padding) * 1.5);
        padding-left: calc(var(--base-sm-padding) * 2.5);
        line-height: var(--base-line-height);
    }
    & li::before {
        content: "\f178";
        font-family: var(--font-awesome);
        font-weight: var(--font-weight-bold);
        margin-right: var(--base-sm-padding);
        color: var(--primary-dark-40-transparent);
        position: absolute;
        left: 0;
        top: 0;
        /* transform: translateY(35%); */
    }
}
ul.vertical-list-2-columns{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
ul.horizontal-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: stretch;
    width: var(--base-width);
}
section#page-title {
    background: url(../images/blog-page-title.png) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: var(--base-width);
        height: var(--base-width);
        background-color: var(--primary-dark-40-transparent);
        z-index: 1;
    }
    & .container{
        position: relative;
        z-index: 2;
        color: var(--white-color);
        & .w65{
            width: var(--base-width);
            max-width: var(--base-width);
        }
    }
    &.blog-single-title{
        & .col.w65 {
            width: var(--base-width);
            max-width: var(--base-width);
        }
        & a.breadcrumb-link,
        & .author-box a,
        & .categories-box a{
            color: var(--banner-anchor-color);
        }
        & .author-box{
            margin-bottom: calc(var(--base-sm-margin) * 1.5);
        }
        & .categories-box{
            justify-content:space-between;
            align-items: flex-start;
            & strong{
                width: var(--base-width);
                margin-bottom: var(--base-sm-margin);
            }
            & ul.horizontal-list{
                width: calc(var(--base-width));
                max-width: calc(var(--base-width));
                row-gap: calc(var(--base-sm-margin) / 2);
                flex-direction: row;
                margin: 0;
                & li{
                    margin-right: var(--base-sm-margin);
                }
            }
        }
        & .btn-holder{
            width: var(--base-width);
            justify-content: flex-start;
            flex-direction: row;
        }
    }
    &.single-page-title{
        & .col.w65 {
            width: var(--base-width);
            max-width: var(--base-width);
        }
        & a.breadcrumb-link{
            color: var(--banner-anchor-color);
        }
        & .btn-holder{
            width: var(--base-width);
            justify-content: flex-start;
        }
    }
    &.authors-and-reviewers-single-title{
        & .w65{
            width: var(--base-width);
            max-width: var(--base-width);
        }
        & a.breadcrumb-link{
            color: var(--banner-anchor-color);
            font-weight: var(--font-weight-regular);
        }
        & .btn-holder{
            width: var(--base-width);
            justify-content: flex-start;
        }
    }
    & .breadcrumb-holder{
        flex-direction: row;
    }
}
/* Styles from old site for internal pages and posts */
.wp-singular .content-holder{
    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
        margin: calc(var(--base-sm-margin) * 2) 0;
    }
    p{
        margin-bottom: calc(var(--base-sm-margin) * 1.5);
    }
    /* Tables */
    & table {
        width: 100%;
        max-width: 100%;
        margin: var(--space-2, 1rem) auto !important;
    }

    & table th,
    & table td {
        padding: var(--space-1, 1rem) !important;
        vertical-align: top !important;
        border-bottom: 1px solid var(--secondary-light-green, rgba(0, 0, 0, 0.125));
        border-left: 0;
        border-right: 0;
        line-height: var(--base-line-height) !important;
    }

    & tr {
        vertical-align: inherit;
        border-color: inherit;
    }
    /* Ordered Lists */
    & ol {
        list-style: none;
        padding: 1rem 0 0 1.5rem;
        counter-reset: item;
    }

    & ol > li {
        position: relative;
        padding-left: 1.5rem;
        margin-bottom: 1rem;
        counter-increment: item;
        line-height: var(--base-line-height);
    }

    & ol > li::before {
        content: counter(item) ".";
        position: absolute;
        top: 0;
        left: 0;
        color: var(--blue, #306970);
        font-weight: bold;
    }
    /* Unordered Lists */
    & ul {
        margin-top: 20px;
    }
    /* Video Wrappers (merged variants) */
    & .video-wrapper,
    & .video-wrapper2,
    & .video-wrapper3,
    & .video-wrapper4 {
        position: relative;
        margin: 0 0 50px 0;
        border-radius: 0.5rem;
        box-shadow: 0 0.15rem 1.25rem rgba(3, 28, 39, 0.2);
        width: 100%;
    }

    /* Video Title */
    & .video-title {
        display: inline-flex;
        padding-left: 20px;
    }
}
.wp-singular .content-holder .alignleft {
    float: none;
    display: block;
    margin: 0 auto 1rem auto;
}
@media (min-width: 375px){
    :root{
        --base-max-width: 375px;
    }
    .iframe-container{
        min-height: calc(var(--base-font-size) * 13);
    }
}
@media (min-width: 425px){
    :root{
        --base-max-width: 425px;
    }
    .iframe-container{
        min-height: calc(var(--base-font-size) * 15);
    }
}
/* 2. LARGE MOBILE (480px+) */
@media (min-width: 480px) {
    :root{
        --base-max-width: 480px;
    }
    .iframe-container{
        min-height: calc(var(--base-font-size) * 16);
    }
}
/* 3. TABLET (768px+) */
@media (min-width: 768px) {
    :root{
        --base-font-size: 16px;
        --base-line-height: calc(var(--base-font-size) * 1.6);
        --base-lg-padding: 40px;
        --base-lg-margin: 40px;
        --base-max-width: 768px;
    }
    .iframe-container{
        min-height: calc(var(--base-font-size) * 26);
    }
    .wp-singular .content-holder{
        &.single-post h1,
        &.single-post h2,
        &.single-post h3,
        &.single-post h4,
        &.single-post h5,
        &.single-post h6,
        & #single-page h1,
        & #single-page h2,
        & #single-page h3,
        & #single-page h4,
        & #single-page h5,
        & #single-page h6{
            margin: calc(var(--base-sm-margin) * 2) 0;
        }
        &.single-post p{
            margin-bottom: calc(var(--base-sm-margin) * 1.5);
        }
        /* Styles from old site for internal pages and posts */
        /* Video Wrappers (merged variants) */
        & .video-wrapper,
        & .video-wrapper2,
        & .video-wrapper3,
        & .video-wrapper4 {
            margin: 0 0 50px 30px;
            width: calc(var(--base-width) - 30px);
        }
        /* Columns */
        & .columns {
            float: left;
            width: 50%;
        }

        & .alignright {
            float: right;
            margin-right: 1rem!important;
            margin-bottom: 1rem!important;
            width: 200px!important;
        }

        & .alignleft {
            float: left;
            margin-right: 1rem!important;
            margin-bottom: 1rem!important;
            width: 200px!important;
        }
    }
    section#page-title {
        & .container{
            & .btn-holder{
                flex-direction: row;
            }
        }
        &.single-page-title{
            & .btn-holder{
                flex-direction: row;
            }
        }
        &.authors-and-reviewers-single-title{
            & .btn-holder{
                flex-direction: row;
            }
        }
    }
}
/* 4. DESKTOP (1024px+) */
@media (min-width: 1024px) {
    :root{
        --base-max-width: 1024px;
    }
    .container{
        padding: 0 calc(var(--base-sm-padding) * 2);
    }
    h1 {
        font-size: calc(var(--base-font-size) * 2.5);
        line-height: calc(var(--base-font-size) * 3.0);
    }
    h2 {
        font-size: calc(var(--base-font-size) * 2.25);
        line-height: calc(var(--base-font-size) * 3.25);
    }
    h3 {
        font-size: calc(var(--base-font-size) * 2.0);
        line-height: calc(var(--base-font-size) * 3.0);
    }
    h4 {
        font-size: calc(var(--base-font-size) * 1.75);
        line-height: calc(var(--base-font-size) * 1.75);
        &.h4-medium-font{
            font-size: calc(var(--base-font-size) * 1.5);
            line-height: calc(var(--base-font-size) * 2.5);
        }
        &.h4-small-font{
            font-size: calc(var(--base-font-size) * 1.1);
            line-height: calc(var(--base-font-size) * 2.1);
        }
    }
    h5 {
        font-size: calc(var(--base-font-size) * 1.5);
        line-height: calc(var(--base-font-size) * 2);
    }
    h6 {
        font-size: calc(var(--base-font-size) * 1.75);
        line-height: calc(var(--base-font-size) * 2.75);
    }
    /* Row and Column Layout */
    .row {
        width: var(--base-width);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }
    .col2 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 2);
    }
    .col3 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 3);
    }
    .col4 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 4);
    }
    .col5 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 5);
    }
    .col6 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 6);
    }
    .col7 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 7);
    }
    .col8 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 8);
    }
    .col9 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 9);
    }
    .col10 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 10);
    }
    .col11 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 11);
    }
    .col12 .col {
        width: var(--base-width);
        max-width: calc(var(--base-width) / 12);
    }
    .col{
        &.w20 {
            width: calc(var(--base-width) / 100 * 20);
            max-width: calc(var(--base-width) / 100 * 20);
        }
        &.w25 {
            width: calc(var(--base-width) / 100 * 25);
            max-width: calc(var(--base-width) / 100 * 25);
        }
        &.w30 {
            width: calc(var(--base-width) / 100 * 30);
            max-width: calc(var(--base-width) / 100 * 30);
        }
        &.w35 {
            width: calc(var(--base-width) / 100 * 35);
            max-width: calc(var(--base-width) / 100 * 35);
        }
        &.w40 {
            width: calc(var(--base-width) / 100 * 40);
            max-width: calc(var(--base-width) / 100 * 40);
        }
        &.w45 {
            width: calc(var(--base-width) / 100 * 45);
            max-width: calc(var(--base-width) / 100 * 45);
        }
        &.w50 {
            width: calc(var(--base-width) / 100 * 50);
            max-width: calc(var(--base-width) / 100 * 50);
        }
        &.w55 {
            width: calc(var(--base-width) / 100 * 55);
            max-width: calc(var(--base-width) / 100 * 55);
        }
        &.w60 {
            width: calc(var(--base-width) / 100 * 60);
            max-width: calc(var(--base-width) / 100 * 60);
        }
        &.w65 {
            width: calc(var(--base-width) / 100 * 65);
            max-width: calc(var(--base-width) / 100 * 65);
        }
        &.w70 {
            width: calc(var(--base-width) / 100 * 70);
            max-width: calc(var(--base-width) / 100 * 70);
        }
        &.w75 {
            width: calc(var(--base-width) / 100 * 75);
            max-width: calc(var(--base-width) / 100 * 75);
        }
        &.w80 {
            width: calc(var(--base-width) / 100 * 80);
            max-width: calc(var(--base-width) / 100 * 80);
        }
        &.w85 {
            width: calc(var(--base-width) / 100 * 85);
            max-width: calc(var(--base-width) / 100 * 85);
        }
        &.w90 {
            width: calc(var(--base-width) / 100 * 90);
            max-width: calc(var(--base-width) / 100 * 90);
        }
        &.w100 {
            width: var(--base-width);
            max-width: var(--base-width);
        }
    }
    .spacer{
        width: var(--base-width);
        height: calc(var(--base-font-size) * 2.5);
        &.x2{
            height: calc(var(--base-font-size) * 5);
        }
        &.half{
            height: calc(var(--base-font-size) * 1.25);
        }
        &.quarter{
            height: calc(var(--base-font-size) * 0.625);
        }
        &.base{
            height: var(--base-font-size);
        }
    }
    .btn-holder{
        flex-direction: row;
    }
    .iframe-container{
        min-height: calc(var(--base-font-size) * 15);
    }
    section#page-title {
        & .container{
            & .w65{
                width: calc(var(--base-width) / 100 * 65);
                max-width: calc(var(--base-width) / 100 * 65);
            }
        }
        &.blog-single-title{
            & .col.w65 {
                width: calc(var(--base-width) / 100 * 65);
                max-width: calc(var(--base-width) / 100 * 65);
            }
            & .categories-box{
                justify-content:space-between;
                align-items: flex-start;
                & strong{
                    width: var(--base-width);
                    margin-bottom: var(--base-sm-margin);
                }
                & ul.horizontal-list{
                    width: calc(var(--base-width));
                    max-width: calc(var(--base-width));
                    flex-direction: row;
                }
            }
            & .btn-holder{
                flex-direction: row;
            }
        }
        &.single-page-title{
            & .col.w65 {
                width: calc(var(--base-width) * 65 / 100);
                max-width: calc(var(--base-width) * 65 / 100);
            }
            & .btn-holder{
                flex-direction: row;
            }
        }
    }
}
/* 5. LARGE DESKTOP (1200px+) */
@media (min-width: 1200px) {
    :root{
        --base-font-size: 18px;
        --base-line-height: calc(var(--base-font-size) * 1.8);

        --base-sm-padding: 10px;
        --base-lg-padding: 80px;

        --base-sm-margin: 10px;
        --base-lg-margin: 80px;

        --base-width: 100%;
        --base-max-width: 1200px;

        --base-height: 100vh;
    }
    .container{
        padding: 0 calc(var(--base-sm-padding) * 2);
    }
    section#page-title{
        &.authors-and-reviewers-single-title{
            & .w65{
                width: calc(var(--base-width) / 100 * 65);
                max-width: calc(var(--base-width) / 100 * 65);
            }
        }
    }
}
/* 6. EXTRA LARGE (1440px+) */
@media (min-width: 1440px) {
    :root{
        --base-max-width: 1440px;
    }
    h1 {
        font-size: calc(var(--base-font-size) * 3);
        line-height: calc(var(--base-font-size) * 3.5);
    }
    h2 {
        font-size: calc(var(--base-font-size) * 2.75);
        line-height: calc(var(--base-font-size) * 3.75);
    }
    h3 {
        font-size: calc(var(--base-font-size) * 2.5);
        line-height: calc(var(--base-font-size) * 3.5);
    }
    h4 {
        font-size: calc(var(--base-font-size) * 2.25);
        line-height: calc(var(--base-font-size) * 2.75);
        &.h4-medium-font{
            font-size: calc(var(--base-font-size) * 1.8889);
            line-height: calc(var(--base-font-size) * 2.8889);
        }
        &.h4-small-font{
            font-size: calc(var(--base-font-size) * 1.3333);
            line-height: calc(var(--base-font-size) * 2.3333);
        }
    }
    h5 {
        font-size: calc(var(--base-font-size) * 1.5);
        line-height: calc(var(--base-font-size) * 2);
    }
    h6 {
        font-size: calc(var(--base-font-size) * 1.75);
        line-height: calc(var(--base-font-size) * 2.75);
    }
    .container {
        padding: 0;
    }
    /* Global Class Based Styles */
    .body-accent{
        font-style: var(--font-style-italic);
    }
    .spacer{
        width: var(--base-width);
        height: calc(var(--base-font-size) * 2.5);
        &.x2{
            height: calc(var(--base-font-size) * 5);
        }
        &.half{
            height: calc(var(--base-font-size) * 1.25);
        }
        &.quarter{
            height: calc(var(--base-font-size) * 0.625);
        }
        &.base{
            height: var(--base-font-size);
        }
    }
    .border-bottom{
        border-bottom: var(--base-border);
    }
    section#footer-divider{
        padding: 0;
    }
    /* Global Color Classes */
    .color-black{
        color: var(--black-color);
    }
    /* Global Button Styles */
    .btn-holder{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        & .btn{
            border-radius: calc(var(--base-font-size) * 0.25);
            font-weight: var(--font-weight-bold);
            font-size: calc(var(--base-font-size) * 1.20);
            line-height: var(--base-line-height);
            text-align: var(--base-text-align-center);
            padding: var(--base-sm-padding) calc(var(--base-sm-padding) * 3);
            margin-right: var(--base-sm-margin);
            &:last-child{
                margin-right: 0;
            }
        }
        & .btn-primary{
            background-color: var(--primary-dark);
            border: var(--base-border);
            border-color: var(--primary-dark);
            color: var(--white-color);
        }
        & .btn-secondary{
            background-color: var(--secondary-light-green);
            border: var(--base-border);
            border-color: var(--secondary-light-green);
            color: var(--white-color);
        }
        & .btn-outline{
            background-color: transparent;
            border: var(--base-border);
            border-color: var(--white-color);
            color: var(--white-color);
        }
        & .btn-text-link{
            background-color: transparent;
            color: var(--secondary-light-green);
            &.no-padding{
                padding: 0;
            }
            &.base-font{
                font-size: var(--base-font-size);
            }
        }
        & .btn-outline-white{
            border-width: 2px;
            border-color: var(--white-color);
        }
    }
    .content-holder{
        display: block;
    }
    .adobe-font{
        font-family: var(--font-garamond);
    }
    /* Global iFrame Styles */
    .iframe-container{
        min-width: var(--base-width);
        min-height: calc(var(--base-font-size) * 21);
        & iframe{
            width: inherit;
            min-width: inherit;
            height: inherit;
            min-height: inherit;
        }
    }
    /* Global List Styles */
    ul.vertical-list{
        & li {
            position: relative;
            padding-bottom: calc(var(--base-sm-padding) * 1.5);
            padding-left: calc(var(--base-sm-padding) * 2.5);
            line-height: var(--base-line-height);
        }
        & li::before {
            content: "\f178";
            font-family: var(--font-awesome);
            font-weight: var(--font-weight-bold);
            margin-right: var(--base-sm-padding);
            color: var(--primary-dark-40-transparent);
            position: absolute;
            left: 0;
            top: 0;
            /* transform: translateY(35%); */
        }
    }
    ul.vertical-list-2-columns{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    ul.horizontal-list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: flex-start;
        align-items: stretch;
        width: var(--base-width);
    }
    section#page-title {
        background: url(../images/blog-page-title.png) no-repeat center center;
        background-size: cover;
        position: relative;
        overflow: hidden;
        &::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: var(--base-width);
            height: var(--base-width);
            background-color: var(--primary-dark-40-transparent);
            z-index: 1;
        }
        & .container{
            position: relative;
            z-index: 2;
            color: var(--white-color);
        }
        &.blog-single-title{
            & a.breadcrumb-link,
            & .author-box a,
            & .categories-box a{
                color: var(--banner-anchor-color);
            }
            & .author-box{
                margin-bottom: calc(var(--base-sm-margin) * 1.5);
            }
            & .categories-box{
                justify-content:space-between;
                align-items: flex-start;
                & strong{
                    width: fit-content;
                    margin-right: var(--base-sm-margin);
                }
                & ul.horizontal-list{
                    width: calc(var(--base-width) - 120px);
                    max-width: calc(var(--base-width) - 120px);
                    row-gap: calc(var(--base-sm-margin) / 2);
                    & li{
                        margin-right: var(--base-sm-margin);
                    }
                }
            }
            & .btn-holder{
                width: var(--base-width);
                justify-content: flex-start;
            }
        }
        &.single-page-title{
            & a.breadcrumb-link{
                color: var(--banner-anchor-color);
            }
            & .btn-holder{
                width: var(--base-width);
                justify-content: flex-start;
            }
        }
        &.authors-and-reviewers-single-title{
            & a.breadcrumb-link{
                color: var(--banner-anchor-color);
                font-weight: var(--font-weight-regular);
            }
            & .btn-holder{
                width: var(--base-width);
                justify-content: flex-start;
            }
        }
    }
    /*
    * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    * Global CSS Rules for Fonts and Layout - Ends Here
    * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    */
    /*
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    * Global CSS Overrides for Content Elements using WP classes - Starts Here
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    */
}