@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("/tinyimages/Learning/learningbanner1.jpg");
}

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

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

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

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

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

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

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

.bg-img-about {
  background-image: url("/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;
    margin: 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;
  padding: 0px;
  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;
    display: block;
    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;
  padding: 10px 0px 10px 0px;
  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%;
  display: block;
  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;
}