@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
:root {
    --color-brand: #254a7f;
    --color-bg: #ffffff;
    --color-panel: #f4f4f4;
    --color-panel-hover: #f4f4f4;
    --color-nav: #4f4f4f;
    --color-nav-dropdown: #f4f4f4;
    --color-nav-dropdown-hover: #e6e6e8;
    --color-nav-dropdown-item: #4f4f4f;
    --color-text: #4f4f4f;
    --color-text-search: #4f4f4f;
    --color-link: #e8455a;
    --color-button: #3d4d7d;
    --color-button-text: #ffffff;
    --color-button-hover: #3d4d7d;
    --color-button-light: #ededed;
    --color-button-light-text: #4f4f4f;
    --color-button-light-hover: #ffffff;
    --color-button-blue: #bbcdff;
    --color-button-blue-text: #192d67;
    --color-button-blue-hover: #e0eaff;
    --color-footer-text: #ffffff;
    --color-footer-link: #ffffff;
    --radius: 5px;
    --border: 1px solid #e4e4e4;
    --shadow: 0px 3px 13px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-brand: #1b304e;
        --color-bg: #121b23;
        --color-panel: #212f3e;
        --color-panel-hover: #222f3e;
        --color-nav: #c4c9ce;
        --color-nav-dropdown: #222f3e;
        --color-nav-dropdown-hover: #394977;
        --color-nav-dropdown-item: #e7e9e9;
        --color-text: #e7e9e9;
        --color-text-search: #4f4f4f;
        --color-link: #fea93d;
        --color-button: #c4c4e3;
        --color-button-text: #212f3e;
        --color-button-hover: #d9d9ec;
        --color-button-light: #c4c4e3;
        --color-button-light-text: #212f3e;
        --color-button-light-hover: #d9d9ec;
        --color-button-blue: #c4c4e3;
        --color-button-blue-text: #212f3e;
        --color-button-blue-hover: #d9d9ec;
        --color-footer-text: #ffffff;
        --color-footer-link: #ffffff;
        --radius: 5px;
        --border: 1px solid #33374d;
        --shadow: 0px 3px 13px rgba(0, 0, 0, 0.2);
    }
}
:root {
    --font: Gill Sans, Gill Sans MT, lato, sans-serif;
    /* --font: gill-sans-nova, Gill Sans, Gill Sans MT, lato, sans-serif; */
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    font-family: var(--font);
    color: var(--color-text);
    font-weight: normal;
}

p {
    font-size: 20px;
    line-height: 30px;
    margin: 20px 0px;
    max-width: 75ch;
}

ul li,
ol li {
    font-size: 20px;
    line-height: 30px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px 0px 15px 0px;
    font-weight: 400;
}

h1 {
    font-size: 44px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 26px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 20px;
}

h2.home {
    text-align: center;
}

a {
    color: var(--color-link);
}

#textpage a {
    color: var(--color-link);
    text-decoration: underline;
    font-size: 20px;
}

a.button {
    background: var(--color-button) !important;
    color: var(--color-button-text) !important;
    border-radius: var(--radius);
    padding: 10px 20px;
    display: inline-block;
    margin: 10px 2px;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;
    text-decoration: none !important;
}

a.button:hover {
    background-color: var(--color-button-hover);
}

a.button--light,
a.notice__button {
    background: var(--color-button-light);
    color: var(--color-button-light-text);
    border-radius: var(--radius);
    padding: 10px 20px;
    display: inline-block;
    margin: 10px 2px;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;
    text-decoration: none !important;
}

a.button--light:hover,
a.notice__button:hover {
    background: var(--color-button-light-hover);
}

a.button::after,
a.button--light::after,
a.notice__button::after {
    content: " ›";
    margin-left: 10px;
}

/* Grid */
.grid {
    display: grid;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    margin: 0px 0px 20px 0px;
}

.one {
    display: grid;
    grid: auto/1fr;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

.two {
    display: grid;
    grid: auto/1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

.three {
    display: grid;
    grid: auto/1fr 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

.four {
    display: grid;
    grid: auto/1fr 1fr 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

@media only screen and (max-width: 768px) {
    .two,
    .three,
    .four {
        grid: auto/1fr;
    }
}
@media only screen and (max-width: 425px) {
    .two,
    .three,
    .four {
        grid: auto/1fr;
    }
}
/* Layout */
body {
    margin: 0px;
    padding: 0px;
    font-family: var(--font);
    background: var(--color-bg);
    border-top: 10px solid var(--color-brand);
    font-size: 20px;
    color: var(--color-text);
}

.edge-to-edge {
    width: calc(100vw);
    margin-left: calc(50% - 50vw);
    margin-bottom: 50px;
}

.edge-to-edge img {
    object-fit: cover;
    height: 400px;
}

.clear {
    clear: both;
}

#header {
    width: calc(100% - 60px);
    margin: 0px auto;
    padding: 30px 0px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
}

div#home-content {
    max-width: 1100px;
    margin: auto;
}

#textpage {
    width: 100%;
    display: block;
    max-width: 1100px;
    margin: auto;
}

#container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
    width: 100%;
    position: relative;
    z-index: 50;
    overflow: hidden;
}

hr {
    border: 0.5px solid #dddddd;
    width: 100%;
}

/* Table Styles */
tr:nth-child(even) {
    background: var(--color-panel);
    color: var(--color-text);
}

tr:nth-child(odd) {
    background: transparent;
    color: var(--color-text);
}

td {
    padding: 10px;
    font-size: 20px;
}

/* Page Layout */
#main {
    padding-top: 20px;
    margin: auto;
    padding-left: 30px;
    padding-right: 30px;
    max-width: 1100px;
}

#content {
    width: 100%;
    margin: 40px auto 0px;
    padding: 0px;
    position: relative;
    min-height: 400px;
}

#content_large {
    width: 100%;
    margin: auto;
    padding: 0px;
    position: relative;
    max-width: 1100px;
}

/* Tag */
.tag {
    background: var(--color-panel);
    display: inline-block;
    padding: 0px 10px !important;
    border-radius: 30px;
    margin-right: 10px;
    border: var(--border);
    margin-bottom: 10px;
}

.tag-wrap {
    margin: 30px;
}

@media only screen and (min-width: 0px) and (max-width: 1055px) {
    #header {
        flex-direction: column;
    }
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    #textpage {
        width: 100%;
        display: block;
        float: left;
    }
}
@media only screen and (min-width: 0px) and (max-width: 425px) {
    #textpage .grid .homepanel .tag-wrap .tag {
        margin-bottom: 10px !important;
    }
}
#logo {
    width: 300px;
    margin: 0px;
}

#logo h6 {
    color: var(--color-text);
    font-size: 27px;
    font-weight: normal;
    margin: 0px;
    padding: 0px;
    text-align: left;
}

#logo a {
    text-decoration: none;
}

@media only screen and (min-width: 0px) and (max-width: 1055px) {
    #logo h6 {
        font-size: 32px;
        margin: 0px 0px 30px 0px;
        text-align: center;
    }
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    #logo {
        width: 100%;
        margin: auto;
        float: none;
        margin-bottom: 0px;
    }
}
@media only screen and (min-width: 0px) and (max-width: 600px) {
    #logo h6 {
        text-align: left;
    }
}
.bg-img-learning {
    background-image: url("/wp-content/uploads/tinyimages/Learning/learningbanner1.jpg");
}

.bg-img-shop {
    background-image: url("/wp-content/uploads/tinyimages/shop-2019.jpg");
}

.bg-img-friends {
    background-image: url("/wp-content/uploads/tinyimages/Craft/friends.jpg");
}

.bg-img-venue {
    background-image: url("/wp-content/uploads/tinyimages/venue.jpg");
}

.bg-img-shop3 {
    background-image: url("/wp-content/uploads/tinyimages/shop3.png");
}

.bg-img-workshop {
    background-image: url("/wp-content/uploads/tinyimages/workshop.jpg");
}

.bg-img-workshop2 {
    background-image: url("/wp-content/uploads/tinyimages/workshops2.jpg");
}

.bg-img-learning {
    background-image: url("/wp-content/uploads/tinyimages/Learning/learningbanner1.jpg");
}

.bg-img-about {
    background-image: url("/wp-content/uploads/tinyimages/mg-external-2019.jpg");
}

/* Banner */
.banner {
    height: 222px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    flex-basis: 48%;
}

.banner__content {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width: calc(100% - 40px);
    padding: 20px;
}

.banner__content h1,
.banner__content h2 {
    text-align: center;
    color: white;
    background: none !important;
    display: block !important;
    text-shadow: 2px 2px 10px #5e5e5e;
}

.banner__content button {
    border: 2px solid #ffffff;
    border-radius: 8px;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: white;
    background-color: rgba(255, 255, 255, 0);
    text-align: center;
    cursor: pointer;
}

.banner-content button:hover {
    border: 2px solid var(--color-link);
    background-color: var(--color-link);
    color: white;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .banner__content h1 {
        font-size: 30px !important;
    }
}
@media only screen and (min-width: 0px) and (max-width: 425px) {
    .banner {
        height: 300px;
    }
}
/* Footer */
#footer {
    width: auto;
    padding: 30px;
    background-color: var(--color-brand);
    margin-top: 60px;
}

#footer > div {
    max-width: 1100px;
    margin: auto;
}

#footer a {
    text-decoration: none;
    color: var(--color-footer-link);
}

#footer p {
    font-size: 20px;
    color: var(--color-footer-text);
    text-align: left;
}

#footer_nav {
    width: 100%;
    display: block;
    padding: 0px 0px;
    margin: 0px 0px 0px 0px;
    text-align: center;
}

#footer_nav a {
    margin: 0px 8px 0px 0px;
    padding: 0px 0px 15px 0px;
    font-size: 20px;
    color: var(--color-footer-link);
    display: block;
    text-align: left;
}

#footer_nav a:hover {
    color: var(--color-footer-link);
}

/* Footer Logos */
#footer-logos {
    margin-top: 0px;
    text-align: left;
}

#footer-logos a {
    margin: 0 40px 0 0;
}

#footer-logos img {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Footer Social Links */
#socialnetwork-links {
    margin: 0;
    text-align: left;
    width: 100%;
    background: transparent;
    margin-top: 40px;
}

#socialnetwork-links p {
    padding-top: 10px;
    width: 150px;
}

#socialnetwork-links img {
    margin-right: 12px;
    margin-bottom: 12px;
}

#footer > .grid {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    #footer-logos {
        text-align: left;
    }

    #footer-logos a {
        margin: 0 10px 20px 10px;
        font-size: 14px;
    }

    #footer-logos img {
        margin-top: 20px;
        font-size: 14px;
        margin-bottom: 50px !important;
        width: auto;
        height: auto;
        text-align: left;
        max-height: 86px;
        max-width: 150px;
    }

    #footer > .two,
    .three,
    .four {
        grid: auto/1fr;
    }

    #socialnetwork-links {
        color: var(--color-footer-text);
        margin: 0;
        text-align: left;
        width: 100%;
        background: transparent;
        margin-top: 40px;
    }

    #socialnetwork-links img {
        margin-right: 23px;
        margin-bottom: 12px;
        width: 42px;
        height: auto;
    }
}
@media only screen and (min-width: 0px) and (max-width: 425px) {
    #footer-logos a img {
        margin-bottom: 50px;
        width: 50%;
        text-align: center;
    }
}
/* Gallery */
.galrow {
    margin: 0px 0px px 0px;
    padding: 0px;
}

.galcontainer_wrap {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
}

.galcontainer {
    width: 10%;
    float: left;
    margin: 0px 3% 3% 0px;
    height: auto !important;
    padding: 0px 0px 0px 0px;
}

.galcontainer h1 {
    margin: 8px 0px 2px 0px;
    padding: 0px;
    font-size: 24px !important;
}

.galcontainer h1 span {
    margin: 10px 0px 0px 0px;
    padding: 0px;
    display: block;
    font-size: 19px;
    color: var(--color-text);
}

.galcontainer h3 {
    margin: 10px 0px 10px 0px;
    padding: 0px;
    font-size: 17px;
}

.galcontainer a {
    color: var(--color-link);
    font-size: 0vw;
}

.galcontainer a:hover {
    color: var(--color-link);
}

.datepost {
    margin-bottom: 30px;
    font-size: 20px;
}

#galdetail {
    width: 100%;
    margin: 0px 0px 0px 0px;
}

#galdetail b {
    font-size: 20px;
    background: var(--color-button-blue);
    padding: 5px 10px 8px 10px;
    border-radius: 5px;
    font-weight: normal;
    color: var(--color-button-blue-text);
    text-decoration: none;
}

#galdetail b:hover {
    background: var(--color-button-blue-hover);
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    #galdetail h1 {
        margin: 30px 0px 20px;
        display: block;
        font-size: 30px;
    }

    #galdetail {
        width: 100%;
    }
}
.home-links {
    background: var(--color-panel);
    text-align: center;
    margin-bottom: 0px;
    padding-top: 20px;
    border: var(--border);
    border-radius: var(--radius);
}

.home-links a {
    color: var(--color-text);
    font-size: 20px;
    line-height: 33px;
    text-decoration: none;
}

.home-links a:after {
    content: " ›";
}

.home-links h2 {
    font-size: 30px;
}

/* Home Slider */
#heading_home {
    margin: 16px 0px 2px 0px;
    width: 100%;
    height: 415px;
}

#heading_home ul {
    position: relative;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#heading_home ul li {
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 0px;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#heading_home ul li span {
    opacity: 0.5;
    filter: alpha(opacity=50);
    position: absolute;
    bottom: 4px;
    left: 51px;
    width: 332px;
    padding: 17px 0px 0px 21px;
    height: 203px;
    background: var(--color-nav);
}

#heading_home ul li span h1 {
    font-size: 44px;
    line-height: 45px;
}

#heading_home ul li span p {
    font-size: 20px;
    margin: 5px 0px 0px 0px !important;
}

#product_header {
    width: 100%;
    display: block;
    position: relative;
    background: transparent;
    overflow: hidden;
    height: 400px;
    max-width: 700px;
    margin: 0px 0px 33px 0px;
}

#product_header ul {
    margin: 0px !important;
    padding: 0px;
    position: relative;
    width: 100%;
    display: block;
}

#product_header ul li {
    width: auto;
    margin: 0px !important;
    padding: 0px !important;
    position: relative;
    top: 0px;
    left: 0px;
    list-style: none !important;
    background: none !important;
    height: auto;
}

div#product_header ul li img {
    object-fit: cover;
    height: 100%;
}

#galdetail h1 {
    font-size: 35px;
}

h1 span {
    display: block;
    font-size: 27px;
    margin: 20px 0px 20px 0px;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    #product_header {
        height: 230px;
        overflow: hidden;
    }

    #product_header ul li {
        display: block;
        max-height: 220px;
        height: auto;
    }

    #product_header ul {
        margin-top: 0px !important;
        padding: 0px 0px 10px 0px;
        overflow: hidden;
        height: 230px;
    }

    div#product_header ul li img {
        object-fit: cover;
        height: 240px;
        width: 100%;
    }
}
.galcontainer_wrap {
    width: 100%;
}

.galcontainer img {
    width: 1000px;
    max-width: 90%;
    margin-top: 50px;
    height: 120%;
    max-height: 165px;
    min-height: 165px;
    object-fit: cover;
}

div.galcontainer {
    margin-top: 10px;
    margin-right: 10px;
    width: 31%;
}

.galcontainer a {
    color: var(--color-link);
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    div.galcontainer {
        margin-top: 0px;
        padding-bottom: 40px;
        width: 100%;
    }

    .galcontainer h1 {
        margin: 8px 0px 2px 0px;
        font-size: 25px !important;
    }

    .galcontainer h1 span {
        margin: 8px 0px 2px 0px;
        font-size: 16px !important;
    }

    .galcontainer h3 {
        margin: 8px 0px 2px 0px;
        font-size: 18px;
    }

    .galcontainer img {
        width: 1000px;
        max-width: 100%;
        margin-top: 0px;
        height: 120%;
        max-height: 165px;
        min-height: 165px;
        object-fit: cover;
    }
}
#nav_sub {
    margin: auto;
    width: 100%;
    background: transparent;
    padding: 5px;
}

#nav_sub ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#nav_sub li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: inline-block;
}

#nav_sub a {
    display: block;
    margin: 0px 30px 0px 0px;
    padding: 4px 8px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: normal;
    border-radius: var(--radius);
}

#nav_sub a:hover {
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-panel);
    border-radius: var(--radius);
}

#nav_sub a.selected {
    color: var(--color-button-blue-text);
    background: var(--color-button-blue);
}

#nav_sub ul li ul {
    display: none;
}

#nav_sub li ul li ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#nav_sub li ul li a {
    display: inline-block;
    width: 50px;
    margin: 0px 0px 0px 5px;
    padding: 2px 0px 2px 0px;
    background: none;
    text-decoration: none;
    color: var(--color-nav);
    font-weight: normal;
    font-size: 14px;
}

@media only screen and (max-width: 768px) {
    #nav_sub {
        /* width: 300px; */
        margin: 0px;
        /* padding: 0px; */
        display: none;
        position: relative;
        width: 100%;
        background: transparent;
    }

    #nav_sub ul {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        list-style-type: none;
        width: auto;
    }

    #nav_sub li {
        margin-top: 0px;
        padding: 0px;
        list-style-type: none;
        display: block;
        background: var(--color-panel);
        margin-bottom: 10px;
        border-radius: 5px;
        text-align: center;
        width: 100%;
    }

    #nav_sub a {
        display: block;
        margin: 0px;
        padding: 4px 0px 4px 0px;
        text-decoration: none;
        color: var(--color-nav);
        font-weight: normal;
        font-size: 20px;
        text-align: center;
    }

    #nav_sub li ul li ul {
        top: 0px;
        margin: -10px;
        padding: 0px;
        list-style-type: none;
    }

    #nav_sub li ul li a {
        display: inline-block;
        width: 50px;
        margin: 0px 0px 0px 5px;
        padding: 2px 0px 2px 0px;
        left: center no-repeat;
        text-decoration: none;
        color: var(--color-nav);
        font-size: 14px;
        white-space: nowrap;
    }
}
/* Nav */
a#mailing-list-subscribe {
    display: none;
}

#nav_new {
    width: auto;
    text-align: center;
    margin-top: 0px;
}

#nav_new a {
    margin: 0px 0px 0px 0px;
    text-align: right;
    padding: 0px;
    text-decoration: none;
}

#nav_new a span {
    padding: 0px 0px 5px 0px;
    text-decoration: none;
    color: var(--color-nav);
    line-height: 210%;
    font-size: 17px;
    white-space: nowrap;
}

#nav_new a:hover span {
    text-decoration: none;
    color: var(--color-link);
}

#nav_new a.active span {
    text-decoration: none;
    color: var(--color-link);
}

#nav_new ul {
    width: auto;
    display: flex;
    margin: 0px auto;
}

#nav_new ul li ul li.backto,
#nav_new ul li ul li.viewall {
    display: none;
}

#nav_new ul li {
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 0px 0px 0px 25px;
}

#nav_new ul li img {
    display: none;
}

#nav_new ul li ul {
    display: none;
    background: var(--color-nav-dropdown);
    border: 0px;
    border-radius: 0px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 35px;
    left: -10px;
    z-index: 999;
    overflow: hidden;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

#nav_new ul li:hover ul {
    display: block;
    border: 0px;
}

#nav_new ul li ul li {
    width: 180px;
    margin: 0px;
}

#nav_new ul li ul li a {
    width: 143px;
    color: var(--color-nav-dropdown-item);
    line-height: 22px;
    font-size: 17px;
    display: block;
    text-align: left;
    padding: 10px 19px !important;
}

#nav_new ul li ul li a:last-child {
    border: 0px;
}

#nav_new ul li ul li a:hover {
    background: var(--color-nav-dropdown-hover);
}

#nav ul li ul li a:active {
    color: var(--color-link);
}

@media only screen and (min-width: 0px) and (max-width: 1055px) {
    #nav_new ul li {
        display: inline-block;
        position: relative;
        text-align: center;
        margin: 0px 15px 0px 0px;
    }
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    #nav_new {
        width: 90%;
        border-top: 0px solid #cccccc;
        border-bottom: 0px solid #cccccc;
        text-align: center;
        margin: 12px auto 12px;
    }

    #nav_new ul {
        width: auto;
        display: block;
        margin: 0px auto;
        padding: 0px;
        align-self: center;
        justify-self: center;
    }

    #nav_new a {
        margin: 0px 0px 0px 0px;
        text-align: center;
        padding-left: 0px !important;
    }

    #nav_new ul li ul li a:hover {
        background: none;
    }

    #nav_new ul li ul li {
        width: 100%;
        padding-left: 10px;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        float: none;
        margin: 24px 30px 0px 0px;
        width: 100%;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: var(--color-nav-dropdown);
        width: 100%;
        box-shadow: var(--shadow);
        z-index: 1;
    }
}
@media only screen and (min-width: 0px) and (max-width: 600px) {
    #header #nav_new {
        background: var(--color-nav-dropdown) !important;
    }

    .burger-toggle,
    .burger-toggle:before,
    .burger-toggle:after {
        background: var(--color-nav-dropdown-item) !important;
    }

    .burger.__active .burger-toggle:before,
    .burger.__active .burger-toggle:after {
        background: var(--color-nav-dropdown-item) !important;
    }

    .burger.__active .burger-toggle {
        background: transparent !important;
    }

    #nav_new a span {
        padding: 0px 0px 5px 0px;
        text-decoration: none;
        color: var(--color-nav);
        font-size: 30px;
        line-height: 210%;
        white-space: nowrap;
    }

    #nav_new ul li ul li.backto,
    #nav_new ul li ul li.viewall {
        display: block;
    }

    #nav_new ul li ul {
        box-shadow: none;
    }

    #nav_new ul li ul li a {
        color: var(--color-nav);
        font-size: 30px;
        line-height: 40px;
        width: 100%;
    }

    #nav_new ul li ul {
        background: var(--color-panel) !important;
    }
}
.paging_top {
    position: absolute;
    top: 60px;
    right: 25px;
}

.paging {
    display: block;
    float: right;
    margin: 0px 20px 0px 0px;
}

.paging_top {
    position: unset;
    float: none;
    background: var(--color-panel);
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
}

.paging_top a {
    font-weight: normal;
    color: var(--color-text);
    font-size: 20px;
    padding: 0px 5px 3px 5px;
    border-radius: 5px;
    min-width: 20px;
}

.paging_top a:hover {
    font-weight: normal;
    color: var(--color-link);
    font-size: 14px;
}

.paging_top a:active {
    font-weight: normal;
    color: var(--color-link);
    font-size: 14px;
}

.paging {
    position: block;
    float: none;
    margin: 40px 0px;
}

.paging a {
    font-weight: normal;
    color: var(--color-text);
    font-size: 14px;
}

.paging a:hover {
    font-weight: normal;
    color: var(--color-link);
    font-size: 14px;
}

.paging a:active {
    font-weight: normal;
    color: var(--color-link);
    font-size: 14px;
}

#gallery_main .paging_top {
    top: -10px;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .paging_top {
        display: none;
    }

    .paging {
        display: block;
        float: left;
        margin: 0px;
    }

    .paging a {
        font-weight: normal;
        font-size: 13px;
    }

    .paging a:hover {
        font-weight: normal;
        font-size: 13px;
    }

    .paging a:active {
        font-weight: normal;
        font-size: 13px;
    }
}
/* Panels */
.homepanel {
    background-color: var(--color-panel);
    text-align: left;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    border: var(--border);
    transition: box-shadow 0.1s ease-in-out;
}

.homepanel:hover {
    box-shadow: var(--shadow);
}

.homepanel h1 {
    font-size: 28px;
    margin: 15px 0px 30px 30px;
}

.homepanel h2 {
    font-size: 20px;
    margin: 30px 0px 10px 30px;
    line-height: 0px;
}

.homepanel p {
    font-size: 16px;
    margin: 30px 0px 30px 30px;
    line-height: 26px;
}

.homepanel img {
    width: 100%;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .homepanel h2 {
        font-size: 18px;
    }

    .homepanel h1 {
        font-size: 27px;
        background: none !important;
    }
}
/* Search */
#search {
    width: auto;
    height: 100px;
    margin: 0px;
    max-width: 300px;
}

#search form {
    margin: 0px 0px 0px 0px;
    display: flex;
}

#search input {
    width: calc(100% - 12px);
    font-size: 17px;
    color: var(--color-text-search);
    margin: 0px 10px 0px 0px;
    padding: 0 5px;
    display: block;
    float: none;
    border-radius: var(--radius);
    height: 36px;
    line-height: 25px;
    border: none;
}

#search button {
    background: var(--color-button-blue);
    color: var(--color-button-blue-text);
    border: none;
    border-radius: var(--radius);
    padding: 0px;
    display: block;
    float: none;
    height: 38px;
    line-height: 27px;
    position: relative;
    width: 150px;
    cursor: pointer;
    font-family: gill-sans-nova, sans-serif;
    font-size: 16px;
    margin: 0px;
}

#search button:hover {
    background: var(--color-button-blue-hover);
}

#search label {
    color: var(--color-footer-text);
    margin: 0px 0px 10px 3px;
    display: block;
}

@media only screen and (max-width: 768px) {
    #search {
        width: 100%;
        height: auto;
        margin: auto;
        text-align: center;
        min-height: 80px;
        max-width: 100%;
    }

    #search form {
        margin: 0px auto 40px;
        display: flex;
        align-items: center;
        align-content: center;
        flex-direction: column;
        gap: 10px;
    }

    #search input {
        width: calc(100% - 16px);
        font-size: 12px;
        margin: 0;
        padding: 7px;
        display: inline-block;
        border: 1px solid #999;
        height: 25px;
        line-height: 25px;
        border-radius: var(--radius);
        float: none;
    }

    #search button {
        background: var(--color-button-blue);
        color: var(--color-button-blue-text);
        width: 100%;
    }
}
#sidebar {
    width: 100%;
    padding: 0px;
    font-weight: normal;
    display: none;
}

.staff h1 {
    font-size: 26px;
}

.staff h2 {
    font-size: 17px;
}

#textpage_right {
    width: 22%;
    min-width: 110px;
    display: none;
    float: left;
    margin: -15px 0px 20px 25px;
}

#textpage_right .homecontainer {
    width: 100%;
    margin: 25px 20px 20px 0px !important;
}

#textpage_right .homecontainer img {
    width: 100%;
}

#textpage_right a {
    font-weight: normal;
    color: var(--color-link);
    font-size: 16px;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    #textpage_right .homecontainer {
        width: 200px;
        margin: 25px 0px 20px 0px !important;
    }
}
/* Video */
.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}


body { text-align: left; letter-spacing: normal; }

/*body,p,h1,h2,h3,h4 { margin:0px 0px 0px 0px;  padding: 0px 0px 0px 0px; }*/

.required {
    background-color: #ffff9b;
}
.error {
    background-color: #ffa6a6;
}

label.indent, div.indent {
    float: left;
    width: 150px;
    clear: both;
    font-size: 12px;
    line-height: normal;
    margin: 2px 2px 2px 0;
}

#adminbar {
    position: absolute;
    z-index: 1000;
    padding: 2px 5px 0 5px;
    text-align: center;
    background-color: #ffe900;
    font-size: 12px;
    top: 0;
    left: 0;
    height: 20px;
    width: 100%;
    color: #000;
}
body>#adminbar {
    position: fixed;
}
#adminbar a {
    font-size: 12px;
    font-weight: bold;
    color: black;
}
#adminlinkspacer {
    height: 19px;
}
#draftlink {
    position: absolute;
    z-index: 1001;
    padding: 2px 5px 0 5px;
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    top: 0;
    left: 0;
    height: 20px;
    color: #000;
    background-color: #ffe900;
}
body>#draftlink {
    position: fixed;
}

#adminshowbutton, #adminhidebutton {
    position: absolute;
    z-index: 1001;
    padding: 2px 5px 0 5px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    top: 0;
    right: 0;
    height: 20px;
    color: #000;
    background-color: #ffe900;
    cursor: pointer;
}
body>#adminshowbutton, body>#adminhidebutton {
    position: fixed;
}
#adminhidebutton {
    z-index: 1001;
}

.error_feedback {
    font-size: 12px;
}
.error_feedback li {
    color: #920003;
    list-style-image: url("/images/error-cross.jpg");
    list-style-type: square;
    padding: 0px 0px 5px 0px;
}

a img { border-width: 0px; }

form{ padding:0px 0px 0px 5px; margin: 0px 0px 0px 0px; }

span.hilite { background-color: #dd0; color: #000; font-weight: bold; }

input.short { width:10em; border: 1px solid #C1C9D0;}
input.long { width:20em; border: 1px solid #C1C9D0; }
input.verylong { width:30em; border: 1px solid #C1C9D0; }
input.veryshort { width:6em; border: 1px solid #C1C9D0; }
input.veryveryshort { width:4em; border: 1px solid #C1C9D0; }
input.vvvshort { width: 2em; border: 1px solid #C1C9D0; }
input.border { border: 1px solid #C1C9D0; }

textarea.long {width:15em; border: 1px solid #C1C9D0; height: 8em;}



/* mobile menu */
@media (max-width: 600px) {

    .burger {
        display: inline-block;
        width: 60px;
        height: 60px;
        background: transparent;
        color: #4f4f4f;
        z-index: 999;
        position: absolute;
        cursor: pointer;
        transition: all 0.5s;
        right: 30px;
        top: 16px;
    }

    .burger.__active {
        z-index: 999;
    }

    .burger.__active .burger-toggle {
        background: transparent;
    }

    .burger.__active .burger-toggle:before {
        top: 0;
        background: #4f4f4f;
        transform: rotate(135deg);
    }

    .burger.__active .burger-toggle:after {
        bottom: 0;
        background: #4f4f4f;
        transform: rotate(225deg);
    }

    @media (max-width: 576px) {
        .burger {
            right: 10px;
        }
    }
    @media (min-width: 992px) {
        .burger {
            display: none;
        }
    }
    .burger-toggle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 3px;
        background: #4f4f4f;
    }

    .burger-toggle:before, .burger-toggle:after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background: #4f4f4f;
        transform: translateZ(0);
        backface-visibility: hidden;
        transition: transform 0.3s;
    }

    .burger-toggle:before {
        top: -10px;
        transform: rotate(0);
    }

    .burger-toggle:after {
        bottom: -10px;
        transform: rotate(0);
    }

    @media (max-width: 992px) {
        .body.__mobile {
            overflow: hidden;
        }

        #header #nav_new {
            position: fixed;
            top: 0;
            right: -100vw;
            width: 100vw;
            border: none;
            text-align: left;
            height: 100%;
            background: #fff;
            z-index: 99;
            transition: all 0.4s ease;
            margin: 0;
        }

        #header #nav_new.__active {
            right: 0;
        }

        #header #nav_new ul {
            width: 100vw;
            /* padding: 50px; */
        }

        #header #nav_new ul li {
            display: block;
            padding: 0 50px;
        }

        #header #nav_new ul li:nth-of-type(1) {
            margin: 50px 0 0 0;
        }

        #header #nav_new ul li ul {
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            right: -100vw;
            display: block;
            left: auto;
            z-index: 100;
            transition: all 0.4s ease;
            background: rgb(89, 89, 89);
        }

        #header #nav_new ul li ul.__active {
            right: 0;
        }

        #header #nav_new ul li ul li a:hover {
            background: none;
        }

    }
}

.justine {
    background-image: url(https://images.squarespace-cdn.com/content/v1/59e8b29164b05f0af80ce98a/1513074429993-97L9GACP02NR39N9E6VR/ke17ZwdGBToddI8pDm48kBJJGUYCrQbckB0aB3i9meB7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0r9YoV8ytu8SWDj21Bt3yU9Gh-U0J0GVFf0WX9Hn5Lg-0R4Sk3CvCel_jgOb6mmMUA/DSC06811.JPG?format=2500w);
}

.kate {
    background-image: url(https://images.squarespace-cdn.com/content/v1/59e8b29164b05f0af80ce98a/1549544556739-O8UMUBT0DJZHPRCZZ9QW/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/IMG_4638.jpg?format=2500w);
}

.micki {
    background-image: url(https://images.squarespace-cdn.com/content/v1/59e8b29164b05f0af80ce98a/1514041415574-BGLFSVZ9B0U5PJRLNVVC/ke17ZwdGBToddI8pDm48kDk1dm1oSR9gCa1mX4KqzjN7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u-wQWxfQHg04OxgQwaUq2yiAcNt5Kg2tE9yEtYfM4xwaw/Micki_Studio_049.JPG?format=2500w);
}

.ingrid {
    background-image: url(https://images.squarespace-cdn.com/content/v1/59e8b29164b05f0af80ce98a/1540041267628-INY87CK7VEQRNZS7PGGI/ke17ZwdGBToddI8pDm48kDk1dm1oSR9gCa1mX4KqzjN7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u-wQWxfQHg04OxgQwaUq2yiAcNt5Kg2tE9yEtYfM4xwaw/Ingrid_LOC_060.JPG?format=2500w);
}

.anna {
    background-image: url(https://images.squarespace-cdn.com/content/v1/59e8b29164b05f0af80ce98a/1512730777732-UMZQ6UY7HGN0KPKPU37V/ke17ZwdGBToddI8pDm48kDk1dm1oSR9gCa1mX4KqzjN7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luj0xCD0oh5KMc0gpox0u-wQWxfQHg04OxgQwaUq2yiAcNt5Kg2tE9yEtYfM4xwaw/AnnaNoel-Work-35.JPG?format=2500w);
}

.anne {
    background-image: url(https://images.squarespace-cdn.com/content/v1/59e8b29164b05f0af80ce98a/1515162703061-1BK90GCAAOL8YA64GSF3/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/IMG_3800.jpg?format=2500w);
}

.loc-quote {
    background: #9c9a98;
    padding: 20px 30px 30px 30px;
    margin: 20px 0px;
}

.loc-cta {
    background: #9c9a98;
    margin: 20px 0px;
    padding: 30px 0px 36px;
    text-align: center;
}

.loc-cta h3 {
    color: #ffffff !important;
    font-size: 20px !important;
    margin: 10px 0px 21px 0px !important;
    text-transform: uppercase !important;
}

.loc-quote p {
    color: #fff !important;
}

.loc-quote h3 {
    color: #fff !important;
    text-transform: uppercase;
}

.loc-three {
    display: grid;
    grid: auto / 33% 33% auto;
}