/* FONT FACE /////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* source-sans-pro-regular - latin_cyrillic */
@font-face {
    font-family: 'StSt Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
    url('../fonts/source-sans-pro-v14-latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/source-sans-pro-v14-latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-italic - latin_cyrillic */
@font-face {
    font-family: 'StSt Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src:
    url('../fonts/source-sans-pro-v14-latin_cyrillic-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/source-sans-pro-v14-latin_cyrillic-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-600 - latin_cyrillic */
@font-face {
    font-family: 'StSt Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src:
    url('../fonts/source-sans-pro-v14-latin_cyrillic-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/source-sans-pro-v14-latin_cyrillic-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-regular - latin_cyrillic */
@font-face {
    font-family: 'StSt Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
    url('../fonts/montserrat-v15-latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/montserrat-v15-latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-500 - latin_cyrillic */
@font-face {
    font-family: 'StSt Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src:
    url('../fonts/montserrat-v15-latin_cyrillic-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/montserrat-v15-latin_cyrillic-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*Non-mobile delayed render*/
@media (min-width: 576px) { body.stst {display: block;} }

/* FONT SIZE and weight //////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 576px) { :root { font-size: 3vw; } }
@media (min-width: 1024px) { :root { font-size: 2vw; } }
@media (min-width: 1280px) { :root { font-size: 20px; } }
@media (min-width: 1280px) {body {font-size: 20px; line-height: 1.4;}}

/* LAYOUT ////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1280px) {
    #site-top-offset,
    #main-nav,
    #nav-toggle-container-out,
    #container-site > #main-cnt > *,
    #container-site > * {
        padding-left: 0;
        padding-right: 0;
        max-width: var(--st-sz-main-width);
        margin-right: auto;
        margin-left: auto;
    }
    #site-top-offset {height: var(--st-sz-main-pdng-vert-dt);}
}
#main-cnt {margin-bottom: 3rem;}
/* Main Nav Menu /////////////////////////////////////////////////////////////////////////////////////////////////////*/
#main-nav {
    display: none;
    /*position: absolute;*/
    /*width: 100%;*/
    /*min-height: 100vh;*/
    /*padding: 1rem;*/
    background-color: #fff;
    font-size: 2rem;
    align-content: start;
    grid-row-gap: 1rem;
}
#main-nav.opened {display: grid;}
#main-nav a {
    /*min-width: 80%;*/
    padding: 1rem 1.5rem;
    background-color: hsla(200, 50%, 94%, 1);
    color: hsla(210, 55%, 55%, 1);
    text-transform: uppercase;
    font-size: 1.4rem;
}
#container-site.nav-opened {
    /*overflow: hidden;*/
    /*max-height: 50vh;*/
    display: none;
}

/* LISTS /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#container-site > #main-cnt > ul, #container-site > #main-cnt > ol {padding-left: 2rem;}
@media (min-width: 1280px) {
    #container-site > #main-cnt > ul, #container-site > #main-cnt > ol {padding-left: 2rem;}
}

/* FOOTER ////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#main-ftr {
    background-color: #183860;
    padding-top: 1rem;
    padding-bottom: .5rem;
}

@media (min-width: 1280px) {
    #main-ftr {
        padding-top: 1rem;
        padding-bottom: .5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

#footer-nav {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-around;
    margin-bottom: .5rem;
}
p#copy {
    color: hsla(220, 10%, 50%, 1);
    font-size: 1rem;
    text-align: center;
    margin-bottom: 0;
}

/* Tempates //////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*Post*/
@media (min-width: 1024px) {
    section.gallery {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
    }
}
@media (min-width: 1280px) {
    section.gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* OLD 'N' UNUSED */

/* SITE NFO Home */
.tmpl-home h1, .tmpl-home h2 {color: var(--st-clr-main-accent-2);}
.tmpl-home h1, .tmpl-home h2, .tmpl-home h3 {margin-top: 0;}

.feat-container {
    display: grid;
    /*grid-row-gap: 1rem;*/
    margin-bottom: 6rem;
}
@media (min-width: 1280px) {
    .feat-container {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 2rem;
        grid-row-gap: 0;
    }
    .feat-container:nth-child(even) img {order: 2;}
    .feat-container img {width: 25%;}
}
.feat-container img {width: 50%; margin-right: auto; margin-left: auto; margin-bottom: 1rem; opacity: .4;}
.feat-container p {margin-bottom: 1.5rem;}

.feat-container p.highlight {
    color: hsla(0, 0%, 0%, 1);
    margin-bottom: .75rem;
    font-weight: 400;
    font-family: StSt Heebo, sans-serif;
}

#main-cnt #feat-1.feat-container h2 {color: #fff;}
#main-cnt #feat-1.feat-container {
    background-color: var(--st-clr-main-accent);
    color: hsla(180, 50%, 92%, 1);
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 2rem;
    font-size: 1.45rem;
}
@media (min-width: 1280px) {
    #main-cnt #feat-1.feat-container {padding: 2rem; justify-items: start; align-items: start;}
    #main-cnt #feat-1.feat-container section:nth-child(2) {grid-row: 1/3; grid-column: 2/3;}
}

.feat-btn {
    display: block;
    border-color: var(--st-clr-main-accent-2);
    border-width: .12rem;
    border-style: solid;
    color: var(--st-clr-main-accent-2);
    padding: .9rem 1.2rem;
    font-size: 1.25rem;
    text-align: center;
    text-transform: uppercase;
}
@media (min-width: 1280px) {
    .feat-btn {
        display: inline-block;
        border-width: .1rem;
        padding: .3rem 1rem;
        font-size: 1.2rem;
    }
}
#feat-1 .feat-btn {
    border-color: hsla(200, 80%, 100%, 1);
    color: hsla(200, 80%, 100%, 1);
}