/* Applies to the entire body of the HTML document (except where overridden by more specific
selectors). */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0px;
	height: 100%;
	font-family: Roboto;
	font-size: 0.875rem;
	background-color: #fcfcfc; 
	/* background-image: url("body-bg.jpg"); 
    background-attachment: fixed; */
  }

/* BEGIN OF NAVIGATION STYLING */
#home .home,
#wir .wir,
#kooperation .kooperation,
#organisation .organisation,
#team .team,
#kindergarten .kindergarten,
#downloads .downloads,
#neuigkeiten .neuigkeiten,
#kontakt .kontakt { 
	background-color: #9acad1;
	color: #ffffff;

}

/* Add background color to the top navigation */
.topnav {
	background-color: #398096;
	/* border-top: 4px solid #398096; */
    /*border-bottom: 4px solid #ffffff;*/
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #ffffff;
	text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	font-size: 17px;
	vertical-align: middle;
  }

  .topnav a.home {
    padding: 2px 16px 0px 16px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #9acad1;
    color: #ffffff;
  }
  
  /* Add an active class to highlight the current page, but not in use because of matching id and class solution
  .topnav a.active {
    background-color: #9acad1;
    color: #ffffff;
  }*/
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }

/* Hide the home link on the homepage */ 
  #home .topnav a.home {
    display: none;
  }
  
/* When the screen is less than 900 pixels wide, hide all links, except for the first one ("Home icon"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 900px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 900px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

/* BEGIN OF a11y */

.skip-link-wrapper {
	position: fixed;
	top: 12px;
	left: 50%;
	-webkit-transform:translateX(-50%);transform:translateX(-50%);
	z-index: 10;
	}
	
	@media (min-width:1024px){
	.skip-link-wrapper {
	left: auto;
	right: 6.4rem;
	-webkit-transform: none;
	transform:none; }
	}
	
	.skip-link {
	color: white;
	border-radius: 50px;
	padding: 7px 16px;
	line-height: 1.2;
	-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.24);
	box-shadow:0 2px 4px 0 rgba(0,0,0,.24);
	-webkit-transform:translateY(-200%);
	transform: translateY(-200%);
	outline: none!important;
	opacity:.01;
	-webkit-transition: transform .2s ease-out, opacity 0ms linear .2s;
	transition: transform .2s ease-out, opacity 0ms linear .2s;
	}
	
	.skip-link:focus {
    background-color: #ea9a50;
	text-decoration: none;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: transform .2s ease-out;
	transition: transform .2s ease-out;
	opacity: 1;
	}

/* End OF a11y */

/* BEGIN OF HEADINGS */
/* Applies to all <h1>...</h1> elements. */
h1 {
	font-size: 2rem;
	font-weight: normal;
	margin-top: 0px;
	scroll-margin-top: 3em;
  }
    .h1:focus {
    background-color: #ea9a50;
	outline: none;;
  }

h1.start {
	font-size: 2rem;
	font-weight: normal;
	font-variant-caps: all-small-caps;
	margin-bottom: 0.25em;
}

div.intro h1 {
	font-family: Cabin Sketch;
	font-size: 2rem;
	font-weight: 400;
	margin-bottom: 0.25em;
}

/* Applies to all <h2>...</h2> elements. */
h2 {
	font-family: Cabin Sketch;
	color: #398096;
	font-size: 1.8rem;
	font-weight: normal;
	margin: 2.25rem 0px 1.25rem;
	scroll-margin-top: 5em;
  }

div.corners h2 {
	margin-top: 2rem;
	  }

/* Applies to all <h3>...</h3> elements. */
h3 {
	color: #398096;
	font-size: 1.25rem;
	font-weight: normal;
	scroll-margin-top: 3em;
  }

/* BEGIN OF TEXT STYLING */
/* Applies to all <p>...</p> elements. */
p {
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.6;
}

div.intro p {
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.6;
	margin: 0;
}

/* Applies to all <strong>...</strong> elements. */
strong {
	font-size: 1.2rem;
	color: #99CC66;
	font-weight: bold;
}

/* applies to all <a>...</a> elements within a p-element. */
/* unvisited link */
p a:link {
	color: #398096;
  }
  
  /* visited link */
p a:visited {
	color: #398096;
  }
  
  /* mouse over link */
p a:hover {
	color: #ea9a50;
  }
  
  /* selected link */
p a:active {
	color: #ea9a50;
  }

/* Applies to all <ul>...</ul> elements with the class list. */
ul.list {
	font-size: 1rem;
	font-weight: normal;
	line-height: 2.6;
	list-style-type: none;
	list-style-position: outside;
	padding-left: 1em;
	text-indent: -2em;
}

ol {
	list-style: none;
	counter-reset: item;
  }

ol > li {
	counter-increment: item;
	margin-bottom: 5px;
  }

ol > li:before {
	margin-right: 10px;
	content: counter(item);
	background: #398096;
	border-radius: 100%;
	color: white;
	width: 1.2em;
	text-align: center;
	display: inline-block;
  }

li h3 {
	display: inline-block;
	margin-top: 4rem;
}

/* When the screen is less than 900 pixels wide, ul.list will have a smaller line-height*/
@media screen and (max-width: 900px) {
    #neuigkeiten ul.list{
	line-height: 1.5;
    }
  }

ul.list li {
padding-left: 1em;
}

ul.list li::before {
	content: "☀"; /* Insert content that looks like bullets */
	padding-right: 0.5rem;
	/* color: #faff9e; */
	color: #ea9a50;
}


/* Styling for <hr> elements with faded ends, gradient: transparent - color - transparent */
hr.fade {
    border: 0;
    height: 2px;
	/*background-image: linear-gradient(to right,rgba(154, 202, 209, 0.25), rgba(154, 202, 209, 0.75), rgba(154, 202, 209, 0.25));*/
	background-image: linear-gradient(to right,rgba(154, 202, 209, 0.25), rgba(154, 202, 209, 0.75), rgba(154, 202, 209, 0.25));
}

/* BEGIN OF BUTTON STYLING */
/* Applies to all elements with <... class="button"> specified. */
.button {
	background-color: #ea9a50;
	/* border: 2px solid #99cc66; */
	border-radius: 4px;
	color:  #ffffff;
	padding: 1rem 2rem;
	width: 25%;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
  }

/* Change the link color to orange on hover */
.button:hover {
	background-color: #cc6633; 
	color: #ffffff;
  }

/* BEGIN OF SPECIAL ELEMENTS STYLING */
/* Applies to the 'alert' element. Include in html file as follows:
<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Message</strong> Message.
</div> */
.alert {
  padding: 1.25rem;
  background-color: rgba(250, 250, 250, .8);
  border-bottom: solid 1px #398096;
  color: #000000;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.alert a:link {
	color: #000000;
  }

.alert a:hover {
	color: #ea9a50;
  }

.closebtn {
  margin-left: 1rem;
  color: #000000;
  font-weight: bold;
  float: right;
  font-size: 1.25rem;
  line-height: 1.25rem;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: #398096;
}

/* Applies to all elements with <... class="content-table"> specified. */
.content-table {
	border: 2px dotted #ea9a50;
	background-color: #ffffff;
	border-radius: 1rem;
	margin: 2rem;
	padding: 0.5rem;
	width: 25%;
}

/* Applies to all <ul>...</ul> elements within <... class="content-table"> specified. */
div.content-table ul {
	color: #398096;
	font-size: 1rem;
	line-height: 1.6;
	padding-left: 2rem;
} 

div.content-table ul.list a {
	color: #398096;
	text-decoration: none;
}

div.content-table ul.list a:hover {
	color: #ea9a50;
	text-decoration: none;
}

/* When the screen is less than 900 pixels wide, content-table will have a wider box*/
@media screen and (max-width: 900px) {
    .content-table {
	font-size: 1.5rem;
	padding: 1rem;
	width: 75%;
    }
  }

.nextto {
	display: inline-block;
	padding: 0.5rem;

}

/* Applies to all elements with <... class="bg"> specified. */
.img-organisation{
	/* The image used */
	background-image: url("/images/organisation.jpg");
	border-top: 4px solid #9acad1;
	height: 20rem; 

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }

  .img-kooperation{
	/* The image used */
	background-image: url("/images/kooperation.jpg");
	border-top: 4px solid #9acad1;
	height: 20rem; 

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }

  .img-team{
	/* The image used */
	background-image: url("/images/team.jpg");
	border-top: 4px solid #9acad1;
	height: 20rem; 

	/* Center and scale the image nicely */
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;
  }

  .img-neuigkeiten{
	/* The image used */
	background-image: url("/images/neuigkeiten.jpg");
	border-top: 4px solid #9acad1;
	height: 20rem; 

	/* Center and scale the image nicely */
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
  }

  .img-wir{
	/* The image used */
	background-image: url("/images/wir.jpg");
	border-top: 4px solid #9acad1;
	height: 20rem; 

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }

  /* If the screen size is 600px or less, change the height of class="bg" to 150px.*/
  @media only screen and (max-width: 600px) {
	div.img-organisation {
	height: 12rem;
	}
  }

/* Applies to all elements with <... class="intro"> specified. */
.intro {
	padding: 2rem;
	margin: 0;
    color: #ffffff;
	background-color: #9acad1;
  }

.intro h1 {
	color: #ffffff;
}

.intro.main {
	padding: 3rem 1rem 2rem;
	margin: 0;
    color: #398096;
	background-color: #ffffff;
	background-image: url(/images/hks-header.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }

.intro.main h1 {
	color: #ffffff;
	font-size: 2.5rem;
    line-height: 1.5rem;
  }

span.subheading {
	font-size: 1.25rem;
	color: #ffffff;
  }


/* Applies to all <iframe>...</iframe> elements. */
iframe {
	margin: auto;
	padding: 0px;
	width: 100%;
	height: 50%;
	display: block;
  }

  /* If the screen size is 600px or less, change iframe width. */
@media only screen and (max-width: 600px) {
	iframe {
	margin: 2em;
	padding: 2em;
	width: 75%;
	}
  }

/* Applies to all elements with <... class="corners"> specified. Looks like a paper taped up at top corners. */
  .corners { 
	background-color: #ffffff;
	/*height: 450px;*/
	margin: 7rem auto;
	padding: 0.25rem;
	max-width: 1200px;
	position: relative;
	z-index: 1;
	width: 90%;
	box-shadow: 0 1px 7px hsla(0, 0%, 0%, 0.2);
  }

  a.btn-in-note {
	z-index: 5;
  }
  
  /* Corner Effect */
  .corners:after,
  .corners:before {
	background: #9acad1;
	opacity: 0.5;
	content: '';
	height: 40px;
	position: absolute;
	z-index: 10;
	top: -25px;
	width: 100px;
	box-shadow: 0 5px 10px -7px hsla(0, 0% ,0%, 0.5);
  }
  .corners:after {
	left: -50px;
	transform: rotate(-45deg);
  }
  .corners:before {
	right: -50px;
	transform: rotate(45deg);
  }

  /* modification of .corners for contactcard */
  .contactcard { 
	background-color: #ffffff;
	/*height: 450px;*/
	margin: 7rem auto;
	padding: 1rem;
	max-width: 900px;
	position: relative;
	z-index: -100;
	width: 90%;
	box-shadow: 0 1px 7px hsla(0, 0%, 0%, 0.2);
  }
  
  /* Corner Effect */
  .contactcard:after,
  .contactcard:before {
	background: #9acad1;
	opacity: 0.5;
	content: '';
	height: 40px;
	position: absolute;
	z-index: -100;
	top: -25px;
	width: 100px;
	box-shadow: 0 5px 10px -7px hsla(0, 0% ,0%, 0.5);
  }
  .contactcard:after {
	left: -50px;
	transform: rotate(-45deg);
  }
  .contactcard:before {
	right: -50px;
	transform: rotate(45deg);
  }

/* END OF SPECIAL ELEMENTS STYLING */

/* BEGIN OF Homepage ELEMENTS STYLING*/

/* BEGIN Intro header */



/* END Intro header */

.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 5px;
  }
  
  .flex-container .teaser {
	background-color: #99cc66;
	color: #ffffff;
	width: 50%;
	margin: 10px;
	padding: 5px;
	text-align: center;
	line-height: 75px;
	font-size: 21px;
  }

.homebg {
	/* The image used */
	background-image: url(background.jpg);
  
	/* Full height */
	height: 100%;
  
	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }

.imgrow {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
	box-sizing: border-box;
  }

  /* Creates first column with 25% that sits next to each other */
  .contactcolumn-1 {
	flex: 25%;
	max-width: 25%;
	padding: 0 4px;
	box-sizing: border-box;
    overflow: hidden;
  }

    /* Creates second column with 75% that sits next to each other */
	.contactcolumn-2 {
		flex: 75%;
		max-width: 75%;
		padding: 0 4px;
		box-sizing: border-box;
		overflow: hidden;
	  }

	  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	  @media screen and (max-width: 600px) {
		.contactcolumn-1, .contactcolumn-2
		{
		  flex: 100%;
		  max-width: 100%;
		  box-sizing: border-box;
		}
	  }
  
  /* Create three equal columns that sits next to each other */
  .imgcolumn {
	flex: 33.33%;
	max-width: 33.33%;
	padding: 0 4px;
	box-sizing: border-box;
    overflow: hidden;
  }
  
  .imgcolumn img {
	margin-top: 8px;
	vertical-align: middle;
	box-sizing: border-box;
  }

  div .corners .imgcolumn {
	margin-bottom: 8px;
    overflow: hidden;
  }

  .imgcolumn a img:hover{
    transition: all .2s ease-in-out;
	transform: scale3d(1.03,1.03,1);
	/* testing if right place overflow: hidden; */
}
  
  /* Responsive layout - makes a two column-layout instead of three columns */
  @media screen and (max-width: 900px) {
	.imgcolumn {
	  flex: 50%;
	  max-width: 50%;
	  box-sizing: border-box;
	}
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
	.imgcolumn {
	  flex: 100%;
	  max-width: 100%;
	  box-sizing: border-box;
	}
  }
/* END OF Homepage ELEMENTS STYLING */

/* BEGIN OF UNSURE ELEMENTS */ 
/* Applies to navigation elements. */

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	line-height: 2.6;
	overflow: hidden;
	background-color: #ffffff;
	border-bottom: 4px solid #398096;
  }
  
  nav ul li {
	float: left;
  }
  
  nav ul li a {
	display: block;
	color: #398096;
	font-size: 0.875rem;
	text-align: center;
	padding: 0.5rem 2rem;
	text-decoration: none;
  }
  
  /* Change the link color to orange on hover */
  nav ul li a:hover {
	background-color: #9acad1;
	color: #ffffff;
  } 

  nav a.active {
	background-color: #9acad1;  
	color: #ffffff;
	font-weight: bold;
  }

  /* Applies to all elements with <... class="content"> specified. */
  .content {
	margin: 4rem 10rem;
  }

/* If the screen size is 900px or less, set the margin of <div> to 2em.*/
@media only screen and (max-width: 900px) {
	div.content {
	  margin: 2em;
	}
  }

/* If the screen size is 600px or less, set the margin of <div> to 2em.*/
@media only screen and (max-width: 600px) {
	div.content {
	  margin: 1em;
	}
  }

/* Applies to all elements with <... class="disclaimer"> specified. */
.disclaimer {
	float: left;
}

/* Applies to all elements with <... class="header"> specified. */
.header {
	padding: 1rem;
	position: static;
	text-align: center;
	font-size: 1.5rem;
	font-variant-caps: all-small-caps;
	color: #ffffff;
	background-color: #9acad1;
}

.hks-header {
	padding: 0.875rem 2rem;
	position: static;
	line-height: 3rem;
	font-size: 1.5rem;
	font-variant-caps: all-small-caps;
	text-align: center;
	background-color: #398096;
	color: #ffffff;
}

/* Applies to all elements with <... class="subintro"> specified. */
  .subintro {
	font-size: 1rem;
	line-height: 1.6;
    color: #ffffff;
}

/* Applies to all elements with <... class="highlight-box"> specified. */
  .highlight-box {
	border: 4px dotted #99cc66;
	color: #99cc66;
	font-size: 1.25rem;
	font-variant-caps: all-small-caps;
	float: left;
	box-sizing: border-box;
	width: 33.33%;
	height: 100%;
	padding: 1.5rem;
}  

/* Applies to all elements with <... class="info-box"> specified. */
.info-box {
	background-color: #9acad1;
	color: #ffffff;
	font-size: 0.875rem;
	float: left;
	box-sizing: border-box;
	width: 33.33%;
	height: 100%;
	margin: 4px;
	vertical-align: middle;
	padding: 5px;
  }

/* Applies to all elements with <... class="address"> specified. */
  .address {
	margin: 10px;
	text-align: center;
	padding: 5px;
  }