/*==========================================================
ROOT stuff
==========================================================*/
:root {
  --text-color-1: #333333;
  --body-size-1: 20px;
  --body-leading-1: 1.6em;
  --spot-color-1: #ff3333;
}
@media only screen and (max-width: 576px) {
:root {
  --body-leading-1: 1.5em;
}
}


/*==========================================================
TYPOGRAPHY
==========================================================*/



@font-face {
	font-family: 'Circs';
	src: url('Circs.ttf') format('truetype'),
       url('Circs.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Dine-ExtraLight';
	src: url('Dine-ExtraLight.ttf') format('truetype'),
       url('Dine-ExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSansThin';
	src: url('SylexiadSansThin.ttf') format('opentype'),
       url('SylexiadSansThin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSansThin-Italic';
	src: url('SylexiadSansThin-Italic.ttf') format('opentype'),
       url('SylexiadSansThin-Italic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSansThin-Bold';
	src: url('SylexiadSansThin-Bold.ttf') format('opentype'),
       url('SylexiadSansThin-Bold.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSansThin-BoldItalic';
	src: url('SylexiadSansThin-BoldItalic.ttf') format('opentype'),
       url('SylexiadSansThin-BoldItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSansMedium';
	src: url('SylexiadSansMedium.ttf') format('opentype'),
       url('SylexiadSansMedium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSansMedium-Italic';
	src: url('SylexiadSansMedium-Italic.ttf') format('opentype'),
       url('SylexiadSansMedium-Italic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSansMedium-Bold';
	src: url('SylexiadSansMedium-Bold.ttf') format('opentype'),
       url('SylexiadSansMedium-Bold.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSansMedium-BItalic';
	src: url('SylexiadSansMedium-BItalic.ttf') format('opentype'),
       url('SylexiadSansMedium-BItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSansSpacedThin';
	src: url('SylexiadSansSpacedThin.ttf') format('opentype'),
       url('SylexiadSansSpacedThin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSansSpacedThin-Italic';
	src: url('SylexiadSansSpacedThin-Italic.ttf') format('opentype'),
       url('SylexiadSansSpacedThin-Italic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSansSpacedThin-Bold';
	src: url('SylexiadSansSpacedThin-Bold.ttf') format('opentype'),
       url('SylexiadSansSpacedThin-Bold.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSansSpacedThin-BItalic';
	src: url('SylexiadSansSpacedThin-BItalic.ttf') format('opentype'),
       url('SylexiadSansSpacedThin-BItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSansSpacedMed';
	src: url('SylexiadSansSpacedMed.ttf') format('opentype'),
       url('SylexiadSansSpacedMed.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSansSpacedMed-Ita';
	src: url('SylexiadSansSpacedMed-Ita.ttf') format('opentype'),
       url('SylexiadSansSpacedMed-Ita.woff') format('woff');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSansSpacedMed-Bold';
	src: url('SylexiadSansSpacedMed-Bold.ttf') format('opentype'),
       url('SylexiadSansSpacedMed-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSansSpacedMed-BIta';
	src: url('SylexiadSansSpacedMed-BIta.ttf') format('opentype'),
       url('SylexiadSansSpacedMed-BIta.woff') format('woff');
	font-weight: 700;
	font-style: italic;
}


@font-face {
	font-family: 'SylexiadSerifThin';
	src: url('SylexiadSerifThin.ttf') format('opentype'),
       url('SylexiadSerifThin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSerifThin-Italic';
	src: url('SylexiadSerifThin-Italic.ttf') format('opentype'),
       url('SylexiadSerifThin-Italic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSerifThin-Bold';
	src: url('SylexiadSerifThin-Bold.ttf') format('opentype'),
       url('SylexiadSerifThin-Bold.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSerifThin-BoldItalic';
	src: url('SylexiadSerifThin-BoldItalic.ttf') format('opentype'),
       url('SylexiadSerifThin-BoldItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSerifMedium';
	src: url('SylexiadSerifMedium.ttf') format('opentype'),
       url('SylexiadSerifMedium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSerifMedium-Italic';
	src: url('SylexiadSerifMedium-Italic.ttf') format('opentype'),
       url('SylexiadSerifMedium-Italic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}


@font-face {
	font-family: 'SylexiadSerifMedium-Bold';
	src: url('SylexiadSerifMedium-Bold.ttf') format('opentype'),
       url('SylexiadSerifMedium-Bold.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSerifMedium-BoldItalic';
	src: url('SylexiadSerifMedium-BoldItalic.ttf') format('opentype'),
       url('SylexiadSerifMedium-BoldItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSerifSpacedThin';
	src: url('SylexiadSerifSpacedThin.ttf') format('opentype'),
       url('SylexiadSerifSpacedThin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSerifSpacedThin-Italic';
	src: url('SylexiadSerifSpacedThin-Italic.ttf') format('opentype'),
       url('SylexiadSerifSpacedThin-Italic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSerifSpacedThin-Bold';
	src: url('SylexiadSerifSpacedThin-Bold.ttf') format('opentype'),
       url('SylexiadSerifSpacedThin-Bold.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSerifSpacedThin-BItalic';
	src: url('SylexiadSerifSpacedThin-BItalic.ttf') format('opentype'),
       url('SylexiadSerifSpacedThin-BItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSerifSpacedMed';
	src: url('SylexiadSerifSpacedMed.ttf') format('opentype'),
       url('SylexiadSerifSpacedMed.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSerifSpacedMed-Italic';
	src: url('SylexiadSerifSpacedMed-Italic.ttf') format('opentype'),
       url('SylexiadSerifSpacedMed-Italic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'SylexiadSerifSpacedMed-Bold';
	src: url('SylexiadSerifSpacedMed-Bold.ttf') format('opentype'),
       url('SylexiadSerifSpacedMed-Bold.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'SylexiadSerifSpacedMed-BItalic';
	src: url('SylexiadSerifSpacedMed-BItalic.ttf') format('opentype'),
       url('SylexiadSerifSpacedMed-BItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}


/*==========================================================
==========================================================*/


.specimen-dine {
  font-family: 'Dine-ExtraLight', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-style: normal;
}


.specimen-circs {
  font-family: 'Circs', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
}



.specimen-sylexiad-serif-thin {
  font-family: 'SylexiadSerifThin', Georgia, serif;
  font-weight: 100;
  font-style: normal;
}
.specimen-sylexiad-serif-thin-italic {
  font-family: 'SylexiadSerifThin-Italic', Georgia, serif;
  font-weight: 100;
  font-style: italic;
}
.specimen-sylexiad-serif-thin-bold {
  font-family: 'SylexiadSerifThin-Bold', Georgia, serif;
  font-weight: 100;
  font-style: normal;
}
.specimen-sylexiad-serif-thin-bold-italic {
  font-family: 'SylexiadSerifThin-BoldItalic', Georgia, serif;
  font-weight: 100;
  font-style: italic;
}


.specimen-sylexiad-serif-medium {
  font-family: 'SylexiadSerifMedium', Georgia, serif;
  font-weight: 500;
  font-style: normal;
}
.specimen-sylexiad-serif-medium-italic {
  font-family: 'SylexiadSerifMedium-Italic', Georgia, serif;
  font-weight: 500;
  font-style: italic;
}
.specimen-sylexiad-serif-medium-bold {
  font-family: 'SylexiadSerifMedium-Bold', Georgia, serif;
  font-weight: 500;
  font-style: normal;
}
.specimen-sylexiad-serif-medium-bold-italic {
  font-family: 'SylexiadSerifMedium-BoldItalic', Georgia, serif;
  font-weight: 500;
  font-style: italic;
}



.specimen-sylexiad-serif-spaced-thin {
  font-family: 'SylexiadSerifSpacedThin', Georgia, serif;
  font-weight: 100;
  font-style: normal;
}
.specimen-sylexiad-serif-spaced-thin-italic {
  font-family: 'SylexiadSerifSpacedThin-Italic', Georgia, serif;
  font-weight: 100;
  font-style: italic;
}
.specimen-sylexiad-serif-spaced-thin-bold {
  font-family: 'SylexiadSerifSpacedThin-Bold', Georgia, serif;
  font-weight: 100;
  font-style: normal;
}
.specimen-sylexiad-serif-spaced-thin-bold-italic {
  font-family: 'SylexiadSerifSpacedThin-BItalic', Georgia, serif;
  font-weight: 100;
  font-style: italic;
}



.specimen-sylexiad-serif-spaced-medium {
  font-family: 'SylexiadSerifSpacedMed', Georgia, serif;
  font-weight: 500;
  font-style: normal;
}
.specimen-sylexiad-serif-spaced-medium-italic {
  font-family: 'SylexiadSerifSpacedMed-Italic', Georgia, serif;
  font-weight: 500;
  font-style: italic;
}
.specimen-sylexiad-serif-spaced-medium-bold {
  font-family: 'SylexiadSerifSpacedMed-Bold', Georgia, serif;
  font-weight: 500;
  font-style: normal;
}
.specimen-sylexiad-serif-spaced-medium-bold-italic {
  font-family: 'SylexiadSerifSpacedMed-BItalic', Georgia, serif;
  font-weight: 500;
  font-style: italic;
}



.specimen-sylexiad-sans-thin {
  font-family: 'SylexiadSansThin', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-style: normal;
}
.specimen-sylexiad-sans-thin-italic {
  font-family: 'SylexiadSansThin-Italic', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-style: italic;
}
.specimen-sylexiad-sans-thin-bold {
  font-family: 'SylexiadSansThin-Bold', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-style: normal;
}
.specimen-sylexiad-sans-thin-bold-italic {
  font-family: 'SylexiadSansThin-BoldItalic', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-style: italic;
}



.specimen-sylexiad-sans-medium {
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
}
.specimen-sylexiad-sans-medium-italic {
  font-family: 'SylexiadSansMedium-Italic', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
}
.specimen-sylexiad-sans-medium-bold {
  font-family: 'SylexiadSansMedium-Bold', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
}
.specimen-sylexiad-sans-medium-bold-italic {
  font-family: 'SylexiadSansMedium-BItalic', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
}



.specimen-sylexiad-sans-spaced-thin {
  font-family: 'SylexiadSansSpacedThin', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-style: normal;
}
.specimen-sylexiad-sans-spaced-thin-italic {
  font-family: 'SylexiadSansSpacedThin-Italic', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-style: italic;
}
.specimen-sylexiad-sans-spaced-thin-bold {
  font-family: 'SylexiadSansSpacedMed-Bold', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-style: normal;
}
.specimen-sylexiad-sans-spaced-thin-bold-italic {
  font-family: 'SylexiadSansSpacedMed-BIta', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-style: italic;
}


.specimen-sylexiad-sans-spaced-medium {
  font-family: 'SylexiadSansSpacedMed', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
}
.specimen-sylexiad-sans-spaced-medium-italic {
  font-family: 'SylexiadSansSpacedMed-Ita', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
}
.specimen-sylexiad-sans-spaced-medium-bold {
  font-family: 'SylexiadSansSpacedMed-Bold', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
}
.specimen-sylexiad-sans-spaced-medium-bold-italic {
  font-family: 'SylexiadSansSpacedMed-BIta', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
}


.specimen-font-size-1 {
  font-size: 24px;
}

.sub-arrow-size-1 {
  font-size: 0.75em !important;
}


/*==========================================================
BACKGROUND IMAGE
==========================================================*/


.div-background-color {
  background-color: #FFFFFF;
  box-shadow: -35px 0px 0px 0px #FFFFFF, 35px 0px 0px 0px #FFFFFF;
}




/*==========================================================
BACKGROUND CHANGE STYLES
==========================================================*/


.img-wrap {
  position: relative;
  -webkit-animation: swap-image 5s infinite normal;
  animation: swap-image 5s infinite normal;
}

.img1 {
  width: 100%;
  height: auto;
}

.img2 {
  position: absolute;
  right: 20px;
  bottom: 0;
  height: 100%;
  width: auto;
}


.A {
  animation: animA 9s infinite alternate;
}

.B {
  animation: animB 9s infinite alternate;
}

@keyframes animA {
  0%,25% {
    opacity: 0;
    z-index: 0;
  }
  50% {
    opacity: .10;
  }
  
  100% {
    opacity: 1;
    z-index: 1
  }
}

@keyframes animB {
  0%,25% {
    opacity: 1;
    z-index: 1;
  }
  50% {
    opacity: .10;
  }
 100% {
    opacity: 0;
    z-index: 0
  }
}






#content-1 {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-image: url("background-images/1.jpg");
  background-size: cover;
  z-index: -1;
}
#content-1 img {
  width: auto;
} 
#content-2 {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-image: url("background-images/2.jpg");
  background-size: cover;
  z-index: -1;
}
#content-2 img {
  width: auto;
} 

@media only screen and (max-width: 1080px) {
#content-1, #content-2, #content-3, #content-4, #content-5, #content-6, #content-7 {
  display: none !important;
  }
}


#backgroundchange>div {
    animation: slide 30s infinite;
    opacity: 0
}

#backgroundchange>div:nth-child(1) {
    opacity: 1
}

#backgroundchange>div:nth-child(2) {
    animation-delay: 5s
}

#backgroundchange>div:nth-child(3) {
    animation-delay: 10s
}

#backgroundchange>div:nth-child(4) {
    animation-delay: 15s
}

#backgroundchange>div:nth-child(5) {
    animation-delay: 20s
}

#backgroundchange>div:nth-child(6) {
    animation-delay: 25s
}



@keyframes slide {
    20% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}










/*==========================================================
TYPOGRAPHY
==========================================================*/
strong {
  font-family: 'SylexiadSerifMedium-Bold', Georgia, serif;
  font-weight: 500;
  font-style: normal;
}
em {
  font-family: 'SylexiadSerifMedium-Italic', Georgia, serif;
  font-weight: 500;
  font-style: italic;
}
.fraction {
  font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}
.arrow-right-nav {
  font-size: 18px;
}

.arrow-right-nav-space-left {
  margin-left: 1em;
}

@media only screen and (max-width: 576px) {
  .arrow-right-nav-space-left {
  margin-left: 1.15em;
}  
}

.copyright {
  color: #999999;
}
.text-red {
  color: var(--spot-color-1);
}

p a:link, li a:link, h1 a:link {
  text-decoration: none;
  color: var(--spot-color-1);
}
p a:visited, li a:visited, h1 a:visited  {
  text-decoration: none;
  color: var(--spot-color-1);
}
p a:hover, li a:hover, h1 a:hover  {
  text-decoration: none;
  color: var(--spot-color-1);
}
p a:active, li a:active, h1 a:active  {
  text-decoration: none;
  color: var(--spot-color-1);
}


nav p {
  font-size: 24px;
}

nav p a:link {
  text-decoration: none;
  color: var(--spot-color-1);
  font-family: 'SylexiadSerifMedium', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
}
nav p a:visited {
  text-decoration: none;
  color: var(--spot-color-1);
  font-family: 'SylexiadSerifMedium', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
}
nav p a:hover {
  text-decoration: none;
  color: var(--spot-color-1);
  font-family: 'SylexiadSerifMedium', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
}
nav p a:active {
  text-decoration: none;
  color: var(--spot-color-1);
  font-family: 'SylexiadSerifMedium', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
}


.nav-selected a:link  {
  color: #333333 !important;
}

.nav-selected a:visited {
   color: #333333 !important;
}

.nav-selected a:hover {
  color: #333333 !important;
}

.nav-selected a:active {
   color: #333333 !important;
}



/*==========================================================
Focus link style default setter
==========================================================*/
a:focus, button:focus {
  outline: auto !important;
}






/*==========================================================
MAIN AND MISC
==========================================================*/
.main-width {
  display: flex;
  flex-flow: column;
  height: 100%;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
html {
  scroll-behavior: auto !important;
}


.padding-webpage-top {
  padding-top: 50px;
}


.main-width {
  max-width: 950px;
  border-top: solid;
  border-top-color: var(--spot-color-1);
  border-top-width: 9px;
}

.main-width-for-index {
  max-width: 950px;
}



.background-color {
  background-color: #fefef9;
}




/*==========================================================
IMAGE SIZES
==========================================================*/
img {
  height: auto;
  max-width: 100%
}

.img-50 {
  max-width: 50%;
}

.img-75 {
  max-width: 75%;
}


.image-border-1 {
  border: 2px solid #cccccc;
}

p {
  font-family: 'SylexiadSerifMedium', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--body-size-1);
  line-height: var(--body-leading-1);
  color: var(--text-color-1);
}




ul + h1, ul + p {
  margin-top: 1em;
}



.download-button {
  font-family: 'SylexiadSerifMedium', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--body-size-1);
  padding: 0.45em 0.95em 0.35em 0.95em;
  color: #FFFFFF;
  background-color: #339933;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2rem;
  text-align: center;
  display: inline-block;
  border: none;
}
.download-button:link {
  text-decoration: none !important;
  color: #FFFFFF !important;
}
.download-button:visited {
  text-decoration: none !important;
  color: #FFFFFF !important;
}
.download-button:hover {
  text-decoration: none !important;
  color: #FFFFFF !important;
}
.download-button:active {
  text-decoration: none !important;
  color: #FFFFFF !important;
}


.bar {
  position: absolute;
  top: 0px;
  left: 0;
  width: 15px;
  height: 400px;
  background-color: var(--spot-color-1);
}
.bar-2 {
  position: absolute;
  top: 0px;
  left: 0;
  width: 15px;
  height: 400px;
  background-color: var(--spot-color-1);
}

.margin-top-less-1 {
  margin-top: -40px;
}


.rule-1 {
  background-color: var(--spot-color-1);
  margin-top: 30px;
  margin-bottom: 30px;
  height: 2px;
}




/*==========================================================
HEADINGS
==========================================================*/

.sylexiad-sans {
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
}

h1 {
  font-family: 'SylexiadSerifMedium-Bold', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  line-height: var(--body-leading-1);
  color: 333333;
}

.fonts-h1-serif {
  font-family: 'SylexiadSerifMedium', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
}
.fonts-h1-sans {
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
}

.nav-title-heading {
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
}

.nav-title-heading a:link  {
  color: #333333 !important;
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
}

.nav-title-heading a:visited {
  color: #333333 !important;
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
}

.nav-title-heading a:hover {
  color: var(--spot-color-1) !important;
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
}

.nav-title-heading a:active {
  color: #333333 !important;
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
}




.fonts-h1-dine {
  font-family: 'Dine-ExtraLight', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 40px;
} 
.dine {
  font-family: 'Dine-ExtraLight', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 20px;
} 
.dine-sa {
  font-family: 'Dine-ExtraLight', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 20px;
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
} 

.dine-sa-2 {
  font-family: 'Dine-ExtraLight', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 20px;
  font-feature-settings: "ornm";
} 
.circs {
  font-family: 'Circs', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 60px;
  line-height: 1.3em;
} 



.fonts-h1-circs {
  font-family: 'Circs', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 90px;
  margin-top: -20px;
  color: #666666;
  margin-bottom: 0px;
} 

.fonts-h1-sans {
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
} 

.fonts-h1-serif-grey {
  font-family: 'SylexiadSerifMedium', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  color: #666666;
} 
.fonts-h1-sans-grey {
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  color: #666666;
} 




/*==========================================================
BULLET LISTS
==========================================================*/
ul {
  font-size: var(--body-size-1);
  line-height: var(--body-leading-1);
  font-family: 'SylexiadSerifMedium', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  color: var(--text-color-1);
  margin-left: 0px;
  padding-left: 1.2em;
  margin-bottom: 0px;
  padding-top: 0px;
  list-style-type: none;
  margin-top: 0px;
}
li {
  font-size: var(--body-size-1);
  padding-left: 0.4em; /* Also needed for space (tweak if needed) */
  padding-bottom: 0px;
  line-height: var(--body-leading-1);
  color: var(--text-color-1);
}
ul li::before {
  content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: var(--spot-color-1); /* Change the color */
  font-family: 'SylexiadSerifMedium-Bold', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.5em; /* Also needed for space (tweak if needed) */
  margin-left: -1.5em; /* Also needed for space (tweak if needed) */
}







/*==========================================================
FOOTER
==========================================================*/
footer {
    flex-grow: 1;
    margin-top: auto;
    margin-bottom: 0;
    font-size: 16px;
    max-height: 170px;
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding-left: 0px !important;
    padding-top: 30px;
    padding-bottom: 50px;
}

/*! When the window is less than 576px */
@media (max-width: 576px) {
    footer {
    flex-grow: 1;
    margin-top: auto;
    margin-bottom: 0;
    font-size: 16px;
    max-height: 170px;
    padding-bottom: 30px;
  }
    footer p {
    line-height: 1.9em;
  }
}



.footer-index {
  margin-left: -23px !important;
}





/*==========================================================
NAVIGATION MENU
==========================================================*/
nav {
  display: block;
  z-index: 10;
}

nav.expand {
  display: block;
  margin-top: 60px;
  z-index: 10;
}


#responsive-menu {
  margin-left: -20px;
  margin-right: -25px;
  padding-left: 5px;
  vertical-align: middle;
  position: fixed;
  top: 0px;
  z-index: 9999;
  padding-top: 4px;
  margin-top: -4px;
  border-right-width: 5px;
  border-right-color: #ff3333;
  border-right-style: solid
}

.responsive-menu-style {
  font-family: 'SylexiadSansMedium-Bold', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  background-color: #ff3333;
  vertical-align: middle;
  color: #FFFFFF;
  padding-top: 0px;
  padding-bottom: 0px;
  text-decoration: none;
  cursor:pointer;
  z-index: 9999;
}


@media screen and (max-width: 576px) {
  nav {
      display: none;
   }
  .contents {
      margin-top: 60px;
   }
  .img-logo {
      margin-top: 50px;
  }
}
@media screen and (min-width: 576px) {
   #responsive-menu {
     display: none;
   }
}

.hamburger {
  padding: 8px 14px 8px 20px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
     }
  .hamburger.is-active:hover {
     }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #FFFFFF;}

.hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin-right: 8px;
}

.hamburger-width {
  width: 100vw;
  padding-top: 11px;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -4px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 4px;
    background-color: #FFFFFF;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }
/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }







/*==========================================================
MEDIA QUERIES
==========================================================*/


@media only screen and (max-width: 576px) {
  nav a, nav p {
  font-size: var(--body-size-1) !important;
  padding: 4px 0px 4px 0px;
  }
  .padding-webpage-top {
  padding-top: 60px;
  }
  nav .fonts-h1-sans {
  font-family: 'SylexiadSerifMedium-Bold', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 21px;
  margin-bottom: 14px;
  margin-top: -14px;
  }
  .img-more-top-on-mobile {
  margin-top: 2em;
  }
  ul {
  padding-left: 0.9em !important;
  }
  li {
  padding-left: 0em !important; /* Also needed for space (tweak if needed) */
  }
  ul li::before {
  width: 0.9em !important; /* Also needed for space (tweak if needed) */
  margin-left: -0.9em !important; /* Also needed for space (tweak if needed) */
  }
}

@media only screen and (max-width: 576px) {
  nav {
  border-bottom: 3px solid var(--spot-color-1);
  margin-bottom: 40px;
  }
}

@media only screen and (min-width: 576px) {
  nav.expand {
  margin-top: 0px !important;
  }
}

@media only screen and (max-width: 576px) {
  nav.expand {
  margin-top: 10px !important;
  }
}

@media only screen and (min-width: 576px) {
  nav .fonts-h1-sans {
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  }
}



/*==========================================================
SKIPNAV
==========================================================*/
.skipnav {
  text-align: left;
  font-family: 'SylexiadSansMedium', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--body-size-1);
  background-color: var(--spot-color-1);
  colour: #FFFFFF;
  max-width: 250px;
}
.skipnav a {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  padding-left: 8px;
  padding-top: 5px;
}
.skipnav a:focus {
  position: static;
  left: 20px;
  height: 30px;
  overflow: visible;
  display: block;
  vertical-align: middle;
  padding-top: 0px;
  padding-left: 8px;
  margin-top: 0px;
  text-decoration: none;
  color: #FFFFFF;
  border-color: #ffffff #ffffff #a3a3a3;
  margin-bottom: 1px;
  padding-bottom: 1px;
  border-style: solid;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0px;
  border-left-width: 0;
  min-width: 250px;
}
.skipnav a:link {
  text-decoration: none;
  color: #FFFFFF;
  border-color: #ffffff #ffffff #a3a3a3;
  margin-bottom: 1px;
  padding-bottom: 1px;
  border-style: solid;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0px;
  border-left-width: 0;
}
.skipnav a:visited {
  text-decoration: none;
  color: var(--text-color-1);
  border-color: #ffffff #ffffff #a3a3a3;
  margin-bottom: 1px;
  padding-bottom: 1px;
  border-style: solid;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0px;
  border-left-width: 0;
}
.skipnav a:hover {
  text-decoration: none;
  color: #FFFFFF;
  border-color: #ffffff #ffffff var(--spot-color-1);
  margin-bottom: 1px;
  padding-bottom: 1px;
  border-style: solid;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0px;
  border-left-width: 0;
}
.skipnav a:active {
  text-decoration: none;
  color: #FFFFFF;
  border-color: #ffffff #ffffff #a3a3a3;
  margin-bottom: 1px;
  padding-bottom: 1px;
  border-style: solid;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0px;
  border-left-width: 0;
}