html,body {
    margin-top: 25px !important;
Margin-left: 0px;
Margin-right: 0px;
	font-family: "Host Grotesk", sans-serif;
  color: black;
line-height: 1.2;
	letter-spacing: 0.05em;
  word-spacing: -0.03em;
	overflow-y: auto;
}
section {
Position: absolute;
}
@media screen and (min-width: 1024px) {
  div.section {
Top: 0px;
Margin-top: 0px;
Margin-left: 150px;
Margin-right: 150px;
}
}
@media screen and (max-width: 1023px) {
  div.section {
Top: 0px;
Margin-top: 0px;
Margin-left: 90px;
Margin-right: 90px; 
}
}
@media screen and (max-width: 600px) {
  div.section {
Top: 0px;
Margin-top: 0px;
Margin-left: 15px;
Margin-right: 15px;
}
}
.container {
Margin-top: 0px;
}
.topnav {
position: fixed;
Top: 0;
  background-color: white;
z-index: 999;
}
@media screen and (min-width: 1024px) {
  div.topnav {
Top: 0px;
Right: 150px;
Left: 150px;
}
}
@media screen and (max-width: 1023px) {
  div.topnav {
Top: 0px;
Right: 90px;
Left: 90px;
}
}
@media screen and (max-width: 600px) {
  div.topnav {
Top: 0px;
Right: 0px;
Left: 0px;
}
}
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: left;
  Padding: 15px 15px;
  text-decoration: none;
z-index: 100;
}
@media screen and (min-width: 1024px) {
  div.topnav a {
Border: solid;
border-width: 0px 0px 0px 0px;
  font-size: 1em;
}
}
@media screen and (max-width: 1023px) {
  div.topnav a {
Border: solid;
border-width: 0px 0px 0px 0px;
  font-size: 0.9em;
}
}
@media screen and (max-width: 600px) {
  div.topnav a {
Margin-left: 0px;
Margin-right: 0px;
Border: solid;
border-width: 0px 0px 1.5px 0px;
  font-size: 0.9em;
}
}
.topnav a:hover {
  color: black;
}
.topnav a.active {
  color: black;
z-index: 100;
  font-style: italic;
}
@media screen and (min-width: 1024px) {
  div.topnav a.active {
}
}
@media screen and (max-width: 1023px) {
  div.topnav a.active {
}
}
@media screen and (max-width: 600px) {
  div.topnav a.active {
}
}
.topnav a.sub {
  color: black;
z-index: 100;
}
@media screen and (min-width: 1024px) {
  div.topnav a.sub {
Border: solid;
border-width: 0px 0px 2px 0px;
}
}
@media screen and (max-width: 1023px) {
  div.topnav a.sub {
Border: solid;
border-width: 0px 0px 2px 0px;
}
}
@media screen and (max-width: 600px) {
  div.topnav a.sub {
Border: solid;
border-width: 0px 0px 2.5px 0px;
}
}
.topnav a.main {
  color: black;
}
@media screen and (min-width: 1024px) {
  div.topnav a.main {
Border: solid;
Margin-left: -15px;
border-width: 0px 0px 0px 0px;
}
}
@media screen and (max-width: 1023px) {
  div.topnav a.main {
Margin-left: -15px;
Border: solid;
border-width: 0px 0px 0px 0px;
}
}
@media screen and (max-width: 600px) {
  div.topnav a.main {
Margin-left: 0px;
Border: none;
border-width: 0px 0px 0px 0px;
text-align: left;
}
}
.topnav .icon {
  display: none;
position: fixed;
Right: 0;
    top: 0;
    z-index: 999;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
Border: none;
border-width: 0px 0px 0px 0px;
z-index: 999;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: fixed;}
  .topnav.responsive .icon {
    position: fixed;
    right: 0;
    top: 0;
z-index: 999;
  }
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
z-index: 999;
  }
  box-sizing: border-box;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 0px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 601px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 1024px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
.heading {
color: black;
  position: fixed;
 text-align: left;
}
@media screen and (min-width: 1024px) {
  div.heading {
 font-size: 1.1em;
Left: 5px;
Top: 300px;
}
}
body a {
  cursor: pointer;
  color: black;
  text-decoration: none;
}
body section {
  margin-bottom: 0px;
}
.sanstitle {
Margin-top: 0px;  
margin-bottom: 5px;
color: black; 
}
@media screen and (min-width: 1024px) {
  div.sanstitle {
Margin-top: 0px; 
Margin-left: 0px;
Margin-right: 0px;
 font-size: 1.4em;
}
}
@media screen and (max-width: 1023px) {
  div.sanstitle {
Margin-top: 0px; 
Margin-left: 0px;
Margin-right: 0px; 
 font-size: 1.4em; 
}
}
@media screen and (max-width: 600px) {
  div.sanstitle {
Margin-top: 0px; 
Margin-left: 0px;
Margin-right: 0px;
 font-size: 1.1em;
}
}
.sanscolum {
Margin-top: 0px;  
margin-bottom: 0px;
color: black;
Font-weight: 400;
  
}
@media screen and (min-width: 1024px) {
  div.sanscolum {
Margin-top: 15px; 
Margin-bottom: 50px;
Margin-left: 0px;
Margin-right: 40px;
 font-size: 1em;
}
}
@media screen and (max-width: 1023px) {
  div.sanscolum {
Margin-top: 0px; 
Margin-bottom: 50px;
margin-left: 0px;
Margin-right: 0px; 
 font-size: 1em; 
}
}
@media screen and (max-width: 600px) {
  div.sanscolum {
Margin-top: px; 
Margin-bottom: 10px;
Margin-right: 0px;
Margin-left: 0px;
 font-size: 0.9em;
}
}
.colum {
Margin-top: 0px;  
margin-bottom: 0px;
color: black;
  
}
@media screen and (min-width: 1024px) {
  div.colum {
Margin-top: 0px; 
Margin-bottom: 0px;
Margin-left: 0px;
Margin-right: 0px;
}
}
@media screen and (max-width: 1023px) {
  div.colum {
Margin-top: 0px; 
Margin-bottom: 0px;
Margin-left: 0px;
Margin-right: 0px; 
}
}
@media screen and (max-width: 600px) {
  div.colum {
Margin-left: 0px;
Margin-right: 0px;
Margin-top: 0px; 
Margin-bottom: 15px;
}
}
.sans { 
position: relative;
font-kerning: auto;
color: black;
}
@media screen and (min-width: 1024px) {
  div.sans {
Margin-top: 20px;
 font-size: 1em;
}
}
@media screen and (max-width: 1023px) {
  div.sans {
 font-size: 0.9em; 
}
}
@media screen and (max-width: 600px) {
  div.sans {
 font-size: 0.9em;
}
}
.sansmini {
Margin-top: 0px;  
Margin-bottom: 8px;
color: black;
}
@media screen and (min-width: 1024px) {
  div.sansmini {
Margin-left: 0px;
Margin-right: 0px;
Margin-bottom: 90px;
    font-size: 0.9em;
}
}
@media screen and (max-width: 1023px) {
  div.sansmini {
Margin-left: 0px;
Margin-right: 0px;
Margin-right: 10px;
Margin-bottom: 70px;
    font-size: 0.9em;
}
}
@media screen and (max-width: 600px) {
  div.sansmini {
Margin-left: 0px;
Margin-right: 0px;
Margin-bottom: 20px;
    font-size: 0.9em;
}
}
.sansminicolum {
Margin-bottom: 8px;
color: black;
}
@media screen and (min-width: 1024px) {
  div.sansminicolum {
Margin-top: 15px;  
Margin-left: 0px;
Margin-right: 0px;
Margin-bottom: 0px;
    font-size: 1em;
}
}
@media screen and (max-width: 1023px) {
  div.sansminicolum {
Margin-top: 0px;  
Margin-left: 0px;
Margin-right: 20px;
Margin-bottom: 0px;
    font-size: 1em;
}
}
@media screen and (max-width: 600px) {
  div.sansminicolum {
Margin-left: 0px;
Margin-right: 0px;
Margin-top: 15px;  
Margin-bottom: 0px;
Max-width: 100%;
    font-size: 0.9em;
}
}
/* Styles for Accordion */

}
.toggle {
Margin-bottom: 0px;
}
.toggle-title {
cursor: pointer;
Margin-bottom: 8px;
color: black;
}
@media screen and (min-width: 1024px) {
  div.toggle-title {
Margin-left: 0px;
Margin-right: 0px;
    font-size: 0.9em;
}
}
@media screen and (max-width: 1023px) {
  div.toggle-title {
Margin-left: 0px;
Margin-right: 0px;
    font-size: 0.9em;
}
}
@media screen and (max-width: 600px) {
  div.toggle-title {
    font-size: 0.9em;
Margin-left: 0px;
Margin-right: 0px;
Margin-left: 0px;
Margin-right: 0px;
}
}
.toggle .toggle-inner {
display: none;
}
.list {
Margin-top: 10px;  
margin-bottom: 50px;
}
@media screen and (min-width: 1024px) {
  div.list {
Margin-left: 0px;
Margin-right: 0px;
    font-size: 0.9em;
	max-width: 50%;    
}
}
@media screen and (max-width: 1023px) {
  div.list {
Margin-left: 0px;
Margin-right: 0px;
    font-size: 0.9em;
	max-width: 70%;
}
}
@media screen and (max-width: 600px) {
  div.list {
Margin-left: 0px;
Margin-right: 0px;
    font-size: 0.9em;
	max-width: 100%;
}
}
.box {
  background-color: white;
  color: white;
}
  .wrapper {
    width: 100%;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(2, 50%);
    Margin-top: 0px;
    margin-bottom: 0px;
   Margin-left: 0px;
   Margin-right: 0px;
grid-row-gap: 10px;
} 
  .wrappertext {
    width: 100%;
    display: grid;
    grid-gap: 15px;
    font-size: 0.8em;
Color: black;
}
@media screen and (min-width: 1024px) {
  div.wrapper, div.wrappertext {
grid-template-columns: repeat(2, 50%);    
}
}
@media screen and (max-width: 1023px) {
  div.wrapper, div.wrappertext {
grid-template-columns: repeat(1, 100%);
}
}
@media screen and (max-width: 600px) {
  div.wrapper, div.wrappertext {
        grid-template-columns: repeat(1, 100%);
}
}
.imagebox {
   width: 100%;
  height: 100%;
  object-fit: cover;
opacity: 2;
}
.grid {
display: flex;
   flex-wrap:wrap;
margin-top: 0px;
Margin-left: 0px;
Margin-right: 0px;
margin-bottom: 0px;
Column-gap: 15px;
row-gap: 15px;
}
.kachel {
position: relative;
	margin-left: 0px;
Margin-right: 0px;
Margin-top: 0px;
margin-bottom: 0px;
	z-index:1;
}
@media screen and (min-width: 1024px) {
div.kachel {
	width: 310px;
max-height: 410px;
}
}
@media screen and (max-width: 1023px) {
div.kachel {
	width: 310px;
max-height: 410px;
}
}
@media screen and (max-width: 600px) {
div.kachel {
	width: 310px;
max-height: 410px;
}
}
.imagekachel {
  object-fit: cover;
max-width: 300px;
max-height: 400px;
opacity: 2;
}
@media screen and (min-width: 1024px) {
div.imagekachel {
max-width: 300px;
max-height: 400px;
}
}
@media screen and (max-width: 1023px) {
div.imagekachel {
max-width: 300px;
max-height: 400px;
}
}
@media screen and (max-width: 600px) {
div.imagekachel {
max-width: 300px;
max-height: 400px;
}
}
.imagefull {
Margin-top: 0px;  
margin-bottom: 0px;
 margin-left: 0px;
  margin-right: 0px;
height: 60vh;
max-width: 100%;
object-fit: cover;
}
.imagecolum {
 margin-left: 0px;
  margin-right: 0px;
max-width: 100%;
object-fit: contain;
}
@media screen and (min-width: 601px) {
div.imagecolum {
Margin-top: 0px;  
margin-bottom: 0px;
Margin-left: 0px;
Margin-right: 0px;
width: 100%;  
  }
}
@media screen and (max-width: 600px) {
div.imagecolum { 
Margin-top: 0px;
margin-bottom: 0px;
 margin-left: 0px;
  margin-right: 0px;
width: 100%;
  }
}
.caption {
color: black;
Text-align: left;
}
@media screen and (min-width: 1024px) {
  div.caption {
Margin-bottom: 40px;
Margin-left: 0px;
Margin-right: 0px;
    font-size: 0.9em;
}
}
@media screen and (max-width: 1023px) {
  div.caption {
Margin-bottom: 40px;
Margin-left: 0px;
Margin-right: 0px;
    font-size: 0.9em;
}
}
@media screen and (max-width: 600px) {
  div.caption {
Margin-bottom: 20px;
Margin-left: 0px;
Margin-right: 0px;
    font-size: 0.7em;
}
}
.hr {
  Border-top: 3px dotted;
Color: black;
Margin-top: 30px;
Margin-left: 0px;
Margin-right: 0px;
margin-bottom: 10px;
}
@media screen and (min-width: 600px) {
  div.hr {
    display: none;
  }
}
.hryellow {
  Border-top: 20px solid hsl(155, 100%, 80%);
Margin-top: 30px;
Margin-left: 0px;
Margin-right: 0px;
margin-bottom: 20px;
}
.underline {
  text-decoration: underline solid black 1px;
  text-underline-offset: 2.5px;

}
.underlinewhite {
	color: white;
	border-bottom-color: white;
	border-bottom: 1px solid;
	padding-bottom: 0px;

}
.underlineblack {
  text-decoration: underline solid black 1px;
  text-underline-offset: 2.5px;
}
::selection {
  background: hsl(155, 100%, 90%);
color: black;
} 
}