@import url("/site-elements/css/4-user-accessible.css");

/*****************/
:root {
    --teal: #31817D;
    --darkgrey: #444444;
    --white: #ffffff;
  	--offwhite: #eeeeee;
    --pink: #c52184;
    --cyan: #22aed1;
    --boxshadow: 0 14px 24px rgba(0,0,0,.2);
}

/*********************/
/* SITE WIDE CLASSES */
/*********************/
header,
footer {
    font-family: Roboto-Thin;
}
body {
    padding: 0;
    margin: 0;
    font-family: Roboto-Regular;
    color: var(--darkgrey);
    background-color: var(--white);
}
#main {
  scroll-margin-top: 120px; /* Adjust to the height of your header when auto scrolling */
}
#page-title {
  scroll-margin-top: 180px; /* Adjust to the height of your header when auto scrolling */
}
h1 {
    font-size: 2.5rem;
    margin-bottom: 1.9rem;
}
h2, .sys_theme-simple .sys_record-control h2 {
  	font-family: Monotone, Jetbrains, monospace;
    font-size: 6rem;
    margin-bottom: 1.2rem;
}
h3, .sys_theme-simple .sys_record-control h3 {
    font-size: 1.7rem;
    margin-bottom: 1rem;
}
h4, .sys_theme-simple .sys_record-control h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
h5, .sys_theme-simple .sys_record-control h5 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
h6, .sys_theme-simple .sys_record-control h6 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
p {
    margin-bottom: 2.5rem;
    font-size: 1.4rem;
    line-height: 3rem;
}
/* Reset any list-specific styling */
ul,
ol {
    margin: 0; /* Reset margins */
    padding: 0; /* Reset padding */
    list-style-position: outside; /* Default position of bullets/numbers */
    margin-bottom: 2.5rem;
}
/* Basic Unordered List (ul) styling */
ul {
    list-style-type: disc; /* Disc bullets for unordered lists */
    margin-left: 1.5em; /* Indent list from left margin */
    padding-left: 1rem; /* No extra padding */
}
/* Basic Ordered List (ol) styling */
ol {
    list-style-type: decimal; /* Decimal numbers for ordered lists */
    margin-left: 1.5em; /* Indent list from left margin */
    padding-left: 1rem; /* No extra padding */
}
li {
    line-height: 3rem;
    font-size: 1.4rem;
}
button,
.button {
    background-color: var(--darkgrey);
    border-radius: 0.5rem;
    color: var(--white);
    padding: 1rem;
    font-family: Roboto-Thin;
    text-decoration: none;
}
hr {
  margin-bottom: 2.5rem;
}
strong, b {
  font-weight: bold;
}
em, i {
  font-style: italic;
}
u {
  text-decoration: underline;
}
@media (max-width: 500px) {
  h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  h2, .sys_theme-simple .sys_record-control h2 {
      font-size: 3.5rem;
      margin-bottom: 1.0rem;
  }
  h3, .sys_theme-simple .sys_record-control h3 {
      font-size: 1.2rem;
      margin-bottom: 0.7rem;
  }
  h4, .sys_theme-simple .sys_record-control h4 {
      font-size: 1rem;
      margin-bottom: 0.5rem;
  }
  h5, .sys_theme-simple .sys_record-control h5 {
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
  }
  h6, .sys_theme-simple .sys_record-control h6 {
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
  }
  p {
      margin-bottom: 2.0rem;
      font-size: 1rem;
      line-height: 2rem;
  }
  /* Reset any list-specific styling */
  ul,
  ol {
      margin: 0; /* Reset margins */
      padding: 0; /* Reset padding */
      list-style-position: outside; /* Default position of bullets/numbers */
      margin-bottom: 2rem;
  }
  /* Basic Unordered List (ul) styling */
  ul {
      list-style-type: disc; /* Disc bullets for unordered lists */
      margin-left: 1em; /* Indent list from left margin */
      padding-left: 0.7rem; /* No extra padding */
  }
  /* Basic Ordered List (ol) styling */
  ol {
      list-style-type: decimal; /* Decimal numbers for ordered lists */
      margin-left: 1em; /* Indent list from left margin */
      padding-left: 0.7rem; /* No extra padding */
  }
  li {
      line-height: 2rem;
      font-size: 1rem;
  }
  hr {
    margin-bottom: 2.0rem;
  }
}
a {
    text-decoration: underline;
    color: var(--teal);
}
body.no-scroll {
    overflow: hidden;
}
iframe {
    max-width: 100% !important;
}
/* To target the <p> that is the parent of an iframe */
p:has(> iframe) {
    text-align: center;
}
.event-content p:has(img),  .news-content p:has(img){
	text-align: center;
}
.event-content img, .news-content img {
  max-width: 50%;
  height: auto;
  text-align: center;
}
@media (max-width: 700px) {
  	.event-content img, .news-content img  {
        max-width: 70%;
    }
}
@media (max-width: 400px) {
  	.event-content img, .news-content img  {
        max-width: 100%;
    }
}
.form {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
}
.field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
.field label {
    margin-bottom: 0.5rem;
}
.field input, .field textarea {
    display: block;
    padding: 1rem;
    border-radius: 0.5rem;
    width: 100%;
  	border-width: 1px;
}
.button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.form button {
    width: 200px;
}
.section-half-and-half {
    display: flex;
    overflow: hidden;
}
@media (max-width: 700px) {
  	.section-half-and-half {
        height: auto;
  		flex-direction: column;
      	width: 100%;
    }
}
     
.section-half-and-half-item {
    width: 50%;
}
@media (max-width: 700px) {
  	.section-half-and-half-item {
      	width: 100%;
    }
}
.section-half-and-half-item img {
    width: 100%;
  	height: 100%;
    object-fit: cover;
    object-position: center;
}
.skip-link {
  position: absolute;
  top: -100%;
  background-color: var(--white);
  color: var(--darkgrey);
  padding: 1rem;
}
.skip-link:focus {
  top: 0;
}
.body {
  overflow: none;
}

.
/* Contentsis generated overrides */
.sys_news-posted-date {
    display: none !important;
}
.sys_events-contact, .sys_events-cyswllt {
    display: none !important;
}
.sys_events-date {
    display: none !important;
}
.sys_record-image-control {
    display: none !important;
}
.sys_record-control dl dd {
    float: none !important;
}
.sys_theme-simple .sys_record-control dl dd {
  	border: 0 !important;
  	width: 100%;
}
dt.sys_events-disgrifiad {
  	display: none !important;
}
.sys_events-registration {
	display: none !important;
}
.sys_theme-simple .sys_record-control dd ul {
  float: none;
  width: auto;
}



/*******************/
/* UTILITY CLASSES */
/*******************/
.max-width-constraint {
    width: 100%;
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 4rem 2rem;
    overflow: hidden;
}
@media(max-width: 700px) {
  .max-width-constraint {
    padding: 2rem 1rem;
  }
}
.max-width-constraint-extra {
   max-width: 1800px;
}
.padding-0 {
    padding: 0 !important;
}
.padding-1 {
    padding: 1rem !important;
}
.padding-2 {
    padding: 2rem !important;
}
.padding-3 {
    padding: 3rem !important;
}
.padding-4 {
    padding: 4rem !important;
}
.padding-y0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.padding-y1 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.padding-y2 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
.padding-y3 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}
.padding-y4 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}
.padding-x0 {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}
.padding-x1 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.padding-x2 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
.padding-x3 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.padding-x4 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
.padding-b0 {
  	padding-bottom: 0 !important;
}
.padding-t0 {
    padding-top: 0 !important;
}
.padding-t1 {
    padding-top: 1rem !important;
}
.padding-t2 {
    padding-top: 2rem !important;
}
.padding-t3 {
    padding-top: 3rem !important;
}
.padding-t4 {
    padding-top: 4rem !important;
}
.padding-b0 {
    padding-bottom: 0 !important;
}
.padding-b1 {
    padding-bottom: 1rem !important;
}
.padding-b2 {
    padding-bottom: 2rem !important;
}
.padding-b3 {
    padding-bottom: 3rem !important;
}
.padding-b4 {
    padding-bottom: 4rem !important;
}
.margin-t0 {
  margin-top: 0 !important;
}
.margin-t1 {
  margin-top: 1rem !important;
}
.margin-t2 {
  margin-top: 2rem !important;
}
.margin-t3 {
  margin-top: 3rem !important;
}
.margin-t4 {
  margin-top: 4rem !important;
}
.margin-b0 {
  margin-bottom: 0 !important;
}
.margin-b1 {
  margin-bottom: 1rem !important;
}
.margin-b2 {
  margin-bottom: 2rem !important;
}
.margin-b3 {
  margin-bottom: 3rem !important;
}
.margin-b4 {
  margin-bottom: 4rem !important;
}
.font-size-1 {
  font-size: 1rem !important;
}
.font-size-2 {
  font-size: 2rem !important;
}
.font-size-3 {
  font-size: 3rem !important;
}
.font-size-4 {
  font-size: 4rem !important;
}   
.align-center {
    text-align: center;
}
.color-teal {
    color: var(--teal);
}
.color-white {
    color: var(--white);
}
.color-darkgrey {
    color: var(--darkgrey);
}
.background-teal {
    background: var(--teal) !important;
    background: linear-gradient(306deg, rgba(54,143,139,1) 0%, rgba(45,157,171,1) 80%, rgba(34,174,209,1) 100%)
      
}
.background-pink {
    background-color: var(--pink) !important;
}
.background-darkgrey {
    background-color: var(--darkgrey) !important;
}
.no-padding {
    padding: 0;
}
.no-margin {
  	margin: 0;
}
.center-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hide {
  display: none;
}
.font-roboto-thin {
  font-family: 'Roboto-Thin';
}
.flex {
  display: flex;
}
.align-items-center {
  align-items: center;
}
      
@media(max-width: 700px) {
  .mobile-padding-0 {
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/**************/
/* ANIMATIONS */
/**************/
@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0); /* Start and end at the original position */
    }
    40% {
        transform: translateY(-30px); /* Bounce up */
    }
    60% {
        transform: translateY(-15px); /* Slightly less bounce */
    }
}

/***************************/
/* HEADER / SPLASH STYLING */
/***************************/
header {
    height: 100dvh; /* fallback - this is normally controlled via the razor so this property operates as a fallback */
    color: var(--white);
}
/* Splash Overlay */
header .splash-overlay {
  	display: grid;
   	grid-template-columns: 1fr;
    grid-template-rows: 100px minmax(0, 8fr) minmax(100px,2fr);
  	grid-template-areas: 'top' 'middle' 'bottom';
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  	overflow-y: hidden;
}
/* Top Bar */
header .top-bar, header .top-bar-mob {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    width: 100%;
   	transition: background-color 0.5s ease;
}

@media (max-width: 500px) {
  header .top-bar, header .top-bar-mob  {
  	padding: 2rem 2rem;
  }
}
      
/* Top Bar */
header .top-bar { 
  	position: fixed;
  	top: 0;
  	z-index: 500;
}
header .top-bar .header-logo  {
    height: auto;
    width: 100px;
}
@media (max-width: 400px) {
  header .top-bar .header-logo {
  	height: 50px;
  	width: 50px;
  }
}
header .primary-nav ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    gap: 3rem;
    margin-bottom: 0;
}
header .primary-nav .nav-item {
  position: relative; //allows position of child with absolute positioning
}
header .primary-nav .sub-nav {
  position: absolute;
  top: 45px;
  right: 0px;
  background: var(--white);
  color: var(--darkgrey);
  padding: 0; /* Remove padding when collapsed */
  font-size: 1.2rem;
  font-family: Roboto-Regular;
  border-radius: 0 0 1rem 1rem;
  max-height: 0;
  overflow: hidden;
  transistion max-height: 0.4s ease-out;
    text-align: right;
}

/* Expand the sub-menu when hovering over the parent nav item */
.nav-item:hover .sub-nav, .nav-item:focus-within .sub-nav {
    max-height: 500px; 
    transition: max-height 0.4s ease-in; /* Smooth transition */
  	padding: 1rem 2rem;
}
header .primary-nav .sub-nav-item {
  padding: 0;
}
@media (max-width: 600px) {
    header .primary-nav ul {
        gap: 2rem;
    }
}
header ul li {
    font-size: 1.5rem;
    list-style: none;
  	cursor: pointer;
}
header ul li a {
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: 0.05rem;
    color: var(--white);
    text-decoration: none;
}
header ul li.accented {
  background: white;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  border-radius: 0.25rem;
  font-weight: 500;
}
header ul li.accented a {
  color: black;
}
header .primary-nav ul li a:hover {
    font-weight: bold;
}
header .top-bar img, header .top-bar-mob img {
    width: 30px;
    vertical-align: middle; /* Align image to the middle of the text */
}
.mobile-hide {
    display: block;
}
.desktop-show {
    display: none;
}
@media (max-width: 1300px) {
    .mobile-hide {
        display: none;
    }
    .desktop-show {
        display: block;
    }
}
.nav-item.accented {
  border: 3px 
}
/* Main Splash */
header .header-content {
  	grid-area: middle;
	display: flex;
    flex-direction: column;
  	justify-content: center;
  	align-items: center;
 	padding: 1rem;;
}

header .header-content h1 {
    font-family: Monotone, Jetbrains, monospace;
    text-align: center;
}
/* Header title font sizes are dynamic depending on the length of the content */
header .header-content h1.large {
    font-size: clamp(5rem, calc(10vh + 10vw), 12rem);
  	line-height: (2rem, calc(10vh + 10vw), 12rem);
}

header .header-content h1.medium {
    font-size: clamp(3rem, calc(7vh + 7vw), 10rem);
}

header .header-content h1.small {
    font-size:  clamp(2rem, calc(5vh + 5vw), 8rem);
}


header .header-content .header-subtitle {
    margin-top: 1rem;
  	margin-bottom: clamp(0.5rem, calc(1vh + 1vw), 4rem);
    letter-spacing: clamp(0.05rem, calc(0.5vh + 0.5vw), 0.2rem);
    text-align: center;
}
      
header .header-content .header-subtitle-top {
  font-size: clamp(1.5rem, calc(2vh + 2vw), 4rem);
}
      
header .header-content .header-subtitle-bottom {
  font-size: clamp(1rem, calc(1vh + 1vw), 3rem);
}

header .caret-container {
  text-align: center;
}
header .down-caret {
    grid-area: "bottom";
    height: 100%;
    cursor: pointer;
}
@media (max-width: 800px) {
    header .down-caret img {
        height: 75px;
    }
}
@media (max-width: 450px) {
    header .down-caret img {
        height: 50px;
    }
}
.bounce {
    animation: bounce 3s ease-in-out 2; /* 3s duration, 2 iterations */
}
header .mobile-menu {
    position: fixed;
  	display: flex;
    height: 100dvh;
    width: 100vw;
    top: 0;
    left: 100vw;
    background-color: rgba(0, 0, 0, 0.9);
    flex-direction: column;
    transition: left 0.3s ease, opacity 0.3s ease;
    visibility: hidden;
  	z-index: 999;
}
.show-menu {
    left: 0 !important;
  	opacity: 1;
    visibility: visible !important;
}											
header .mobile-menu nav {
    flex-grow: 1;
    padding: 1rem;
}
header .mobile-menu nav ul {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
header .mobile-menu a {
    font-size: 3rem;
}
header .mobile-menu .mobile-nav-options img {
  height: 20px;
  width: 20px;
  vertical-align: middle;
}
@media (max-width: 500px) {
    header .mobile-menu a {
        font-size: 2rem;
    }
}
@media (max-width: 400px) {
    header .mobile-menu a {
        font-size: 1.5rem;
    }
}
      
header .mobile-menu .mobile-nav-options .top-level {
  display: flex;
  align-items: center;
  gap: 1rem;
}
header .mobile-menu .sub-nav {
  max-height: 0;
  overflow: hidden;
  transistion max-height: 0.4s ease-out;
}
header .mobile-menu sub-nav.show {
  max-height: 500px;
}
header .mobile-menu .sub-nav a {
  font-size: 1.5rem;
}
@media (max-width: 500px) {
    header .mobile-menu .sub-nav a {
        font-size: 1.2rem;
    }
}
header .mobile-menu .sub-nav-item {
  text-align: center;
}
      
/**********/
/* BUY NOW BUTTON */
/**********/
.buy-now-btn-container {
	display: flex;
  	justify-content: flex-end;
}

/**********/
/* FOOTER */
/**********/
footer .bottom-section .footer-content-wrapper {
    display: flex;
    max-width: 100%;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
    overflow: hidden;
}

/* NEWSLETTER SIGNUP FORM */

footer .newsletter-form {
  background-color: var(--teal);
}
footer .newsletter-form h3, footer .newsletter-form p, footer .newsletter-form label {
  color: var(--white);
}
footer .newsletter-form h3 {
  font-size: 3rem;
}    

footer .newsletter-form p {
  font-size: 2rem;
}
footer .newsletter-form label, footer .newsletter-form input {
  font-size: 1.5rem;
}
footer .newsletter-form button {
  font-size: 1.3rem;
}



@media (max-width: 700px) {
	footer .newsletter-form h3 {
  		font-size: 2rem;
	}    

	footer .newsletter-form p {
  		font-size: 1.5rem;
	}
	footer .newsletter-form label, footer .newsletter-form input {
  		font-size: 1rem;
	}
  	footer .newsletter-form button {
  		font-size: 1rem;
	}
}


/* SUPPORTERS & SOCIALS */

footer .bottom-section {
    background-color: var(--darkgrey);
    color: var(--white);
}
footer .support-logo-container {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
footer .support-logo-container img {
    max-width: 100%;
}
footer .bottom-section-left {
  flex-grow: 1;
}
footer .bottom-section-right {
    flex-grow: 1;
    min-width: 200px;
    text-align: right;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
footer .socials-logo-container {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
footer .socials-logo-container img {
    width: 50px;
}
@media (max-width: 1563px) {
    footer .bottom-section-right,
    footer .bottom-section-left {
        text-align: center;
    }
    footer .socials-logo-container,
    footer .support-logo-container {
        justify-content: center;
    }
}
      
/* TERMS AND CONDITIONS */
footer .terms-and-conditions {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--darkgrey);
  color: var(--white);
  padding-bottom: 2rem;
}
footer .terms-and-conditions a {
  color: var(--white);
}

/*************/
/* ALL CARDS */
/*************/
      
/* position: relative here is used to allow full card link */
.card {
  position: relative;
  box-shadow: var(--boxshadow);
  border-radius: 5px;
  overflow: hidden;
}
      
.card-image-container {
  position: relative;
  overflow: hidden;
}
      
.card-image-container img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}
.card-details {
    padding: 2rem;
  	background-color: var(--white);
}
.card-dates {
    font-size: 1rem;
    margin-bottom: 0;
    line-height: normal;
}
.calicon {
    background: url(/assets/svgs/calendar-days-solid.svg);
    width: 18px;
    height: 20px;
    display: inline-block;
    background-position: center;
    vertical-align: text-bottom;
    margin-right: 10px;
    background-size: 18px 20px;
    opacity: 0.85;
  	color: var(--white);
}

/* 
 The following is used to make the whole card clickable.
 For more info on this accessibility technique: 
 https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html 
*/
.card-link {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-decoration: none !important;
    text-indent: -9999px;
    border: none !important;
}
      
/***************/
/* EVENT CARDS */
/***************/
    
.events-and-exhibition-presenter {
    width: 100%;
}
.event-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.event-card-container p {
    margin-bottom: 0;
}
.current-future-previous-child-grid .section {
	padding-bottom: 4rem;
}
.event-card {
    position: relative;
    height: 400px;
    width: 400px;
    flex-grow: 1;
    overflow: hidden;
    box-shadow: var(--boxshadow);
    border-radius: 0;
}
      
.details-reveal-button {
    display: none;
    height: 50px;
    width: 50px;
    background-color: rgba(0,0,0,0.7);
    color: var(--white);
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: 0;
    border: none;
    z-index: 250;
    padding: 0;
}
.details-reveal-button:focus {
    background: transparent
}

.details-reveal-button:focus .details-reveal-icon {
    display:none;
}

.details-reveal-button .details-reveal-icon {
    height: 50%;
    width: 50%;
    object-fit: contain;
}

@media(max-width: 768px) {
    .details-reveal-button {
        display: flex;
        justify-content: center;
        align-items: center;
    }
} 
.hover-overlay {
    display: none;
    background-color: rgba(0,0,0,0.7);
    height: 100%;
    width: 100%;
    color: var(--white);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    text-align: center;
}

.hover-overlay h3 {
    font-size: 1rem;
    margin-bottom: 0
}

.gallery-item:focus-within .hover-overlay, 
.gallery-item:hover .hover-overlay, 
.event-card:focus-within .hover-overlay, 
.event-card:hover .hover-overlay  {
    display: flex;
}

.event-card .card-title.large {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.event-card .card-title.medium {
    font-size: 2.2rem;
    margin-bottom: 0.9rem;
}
.event-card .card-title.small {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}
      
.event-card .card-photographer {
    font-size: 1.5rem;
    font-style: italic;
  	border-bottom: 2px solid white;
  	margin-bottom: 1rem;
}
.event-card .card-description {
  	font-size: 1rem;
	line-height: 1.2rem;
}
.event-card .card-date {
	font-size: 0.9rem;
  margin-bottom: 0;
}

/**********************/
/* SPECIFIC OVERRIDES */
/**********************/

/* HOME PAGE */
.home-entry {
  text-align: center;
  font-size: 2.5rem;
  font-family: 'ROBOTO-THIN';
  line-height: 5rem;
  margin-bottom: 0;
}
.home-entry .highlight {
  font-family: 'ROBOTO-REGULAR';
}
.home-article-text {
  font-size: clamp(0.5rem, 1.8vw, 1.7rem);
  font-family: 'ROBOTO-REGULAR';
  line-height: clamp(1rem, 4vw, 4rem);
  margin: 0;
}
.home-article div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.home-article > div:nth-child(2) {
  padding: 4rem;
}
.home-header {
    letter-spacing: 0.3rem;
    margin-bottom: 2rem;
}

@media (max-width: 1000px) {
  .home-entry {
    font-size: 2rem;
    line-height: 3.5rem;
  }
  .home-article > div:nth-child(2) {
  	padding: 2.5rem;
  }
  .home-header {
    font-size: 3rem;
    margin-bottom: 3rem;
  }
}

@media (max-width: 700px) {
  .home-entry {
    font-size: 1.8rem;
    line-height: 3rem;
  }
  .home-article-text {
    font-size: 1.0rem;
    line-height: 2.2rem;
  }
  .home-article > div {
  	padding: 2rem 0;
    text-align: center;
  }
  .home-header {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
}
      
/* VISIT PAGE */
.visit-section .contact-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.visit-section .contact-buttons-level-1,
.visit-section .contact-buttons-level-1-details {
    margin-bottom: 2rem;
}
.visit-section .contact-buttons-level-1-details {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    background-color: lightgray;
    padding: 2rem;
    text-align: center;
    border-radius: 5px;
}
.visit-section .contact-buttons-level-1-details p {
    margin-bottom: 0;
}
.visit-section .contact-buttons a {
    height: 100px;
    width: 100px;
    border: 4px solid black;
    border-radius: 50%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.visit-section .contact-buttons a:hover {
    background-color: lightgrey;
}
.visit-section .contact-buttons a img {
    height: 80%;
    width: 80%;
}
.visit-section .contact-data {
    height: 50px; /* fix height so that the page doesn't jump as details are revealed */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.visit-section .contact-data p {
    display: none;
    margin: 0;
}
@media (max-width: 678px) {
    .visit-section .contact-buttons a {
        width: 70px;
        height: 70px;
        padding: 0.5rem;
        border: 3px solid black;
    }
}
.visit-section .sys_cms-form-control li {
    list-style: none;
}
.visit-section .sys_fieldcontent {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}
.visit-section .sys_cms-form-body {
    margin: 0;
}
.visit-section .sys_cms-form-control input,
.visit-section .sys_cms-form-control textarea {
    height: 70px;
    padding: 0px 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 18px;
    width: 225px;
    margin-bottom: 1rem;
}
.visit-section .sys_legend, .visit-section .sys_fieldcontent label, .visit-section .sys_cms-form-item label {
  font-size: 1rem !important;
  font-family: "Roboto-Regular" !important;
  text-align: left;
}

.visit-section .sys_cms-form-control .email,
.visit-section .sys_cms-form-control textarea {
    width: 100% !important;
}
.visit-section .sys_cms-form-control textarea {
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
.visit-section .sys_form-submit {
    background-color: var(--teal);
    border: 2px solid var(--teal);
    color: var(--white);
    padding: 1rem;
    text-decoration: none;
    border-radius: 50vh;
    font-size: 1.2rem;
}
.visit-section .sys_form-submit:hover,
.visit-section .sys_form-submit:focus {
    background-color: var(--white);
    border: 2px solid var(--teal);
    color: var(--teal);
}
.visit-section .one-third-two-thirds {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.visit-section .one-third {
    flex: 1;
    width: 33.33%;
    min-width: 300px;
}
.visit-section .two-thirds {
    flex: 2;
    width: 66.66%;
    min-width: 300px;
    min-height: 400px;
    border-left: 3px solid;
    padding-left: 1rem;
}
@media (max-width: 678px) {
    .visit-section .two-thirds {
        padding-left: 0;
        border-left: none;
    }
}
.visit-section#about-us {
    background: #dddddd;
    padding: 3rem;
}
.visit-section#about-us img {
    float: left;
    width: 40%;
    min-width: 300px;
    height: auto;
    margin: 1rem;
}
.visit-section h2 {
    border-top: 3px solid;
    border-bottom: 3px solid;
}
.visit-section {
    margin-bottom: 5rem;
}
.visit-section .visit-top-image {
    float: right;
    width: 40%;
    height: auto;
    min-width: 300px;
    padding-left: 2rem;
}
@media (max-width: 600px) {
    .visit-section .visit-top-image {
        display: none;
    }
    .visit-section #about-us img {
        float: none;
        width: 100%;
        min-width: 0px;
        margin: 0;
    }
}
      
/************************/
/* CLASSES FOR USER USE */
/************************/
      
.link-btn {
  background-color: var(--teal);
  border: 2px solid var(--teal);
  color: var(--white);
  padding: 1rem;
  text-decoration: none;
  border-radius: 50vh;
}
      
.link-btn:hover, .link-btn:focus {
  background-color: var(--white);
  border: 2px solid var(--teal);
  color: var(--teal);
}
      
.link-btn-inverse {
  background-color: var(--white);
  border: 2px solid var(--teal);
  color: var(--teal);
  padding: 1rem;
  text-decoration: none;
  border-radius: 50vh;
}
      
.link-btn-inverse:hover, .link-btn-inverse:focus {
  background-color: var(--teal);
  border: 2px solid var(--teal);
  color: var(--white);
}

.center {
  margin-left: auto;
  margin-right: auto;
}
      
.width-full {
  width: 100% !important;
  max-width: none !important;
}
.width-three-quarters {
  width: 75% !important;
  max-width: none !important;
}
.width-two-thirds {
  width: 66% !important;
  max-width: none !important;
}
.width-one-half {
  width: 50% !important;
  max-width: none !important;
}
.width-one-third {
  width: 33% !important;
  max-width: none !important;
}
.width-one-quarter {
  width: 25% !important;
  max-width: none !important;
}
@media(max-width:700px) {
  .width-three-quarters, .width-two-thirds, .width-one-half, .width-one-third, .width-one-quarter {
    width: 100%;
  }
}
.body-heading-container {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 3px solid black !important;
  border-bottom: 3px solid black !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem !important;
}
.body-heading-container h2 {
  margin: 0 !important;
}
.float-left {
  float: left;
  margin-right: 1rem;
}
.float-right {
  float: right;
  margin-left: 1rem;
}
      
/*************************/
/* ANIMATIONS */
/*************************/
.animate-opacity {
  position: relative;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  will-change: transform, opacity;
}
/* This media query ensure that those who do not want animations can shut them off */
@media(prefers-reduced-motion) {
  .animate-opacity {
    transition: none;
  }
}
      
/* This disables the animation effect of any elements which are children to the .mobile-disable-transition-within class.  */
/* This is used on the homepage to disabled slide in effect which is staggered */
@media(max-width: 700px) {
  .mobile-disable-transitions-within > * {
    transition: none;
  }
}
/* Disable mobile only animations when viewport is over 700px */
@media(min-width: 701px) {
  .animate-mobile-only {
    transition: none;
  }
}
.opacity-0 {
  opacity: 0;
}
.opacity-1 {
  opacity: 1;
}
.transform-x-minus-100 {
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
}
.transform-x-plus-100 {
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
}
.remove-transform {
  -webkit-transform: none;
  transform: none;
}
.transition-delay-1 {
  transition-delay: 200ms;
}
.transition-delay-2 {
  transition-delay: 700ms;
}