/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}


html, body { background: #FFFFFF; font-size: 13px; line-height: 1.40; font-family: 'Patua One', cursive; width: 100%; height: 100%; }

.clear { clear: both; }
a img { border: none; }
a { color: #5371A5; }
h1 { font-size: 200%; }
h2 { font-size: 160%; }
h3 { font-size: 120%; }
h2, h3, h4 { margin-top: 10px; margin-bottom: 5px; }
p { letter-spacing: 1px; }
table { width: 100%; }
table td { padding: 5px; }
textarea { width: 100%; height: 200px; }
.msg { margin: 20px 0px; }

#page { width: 95%; margin: 10px auto 10px; min-width: 300px; }
#page_inner { padding: 10px; }

header { width: 100%; }
header #logo { text-align: center; }

header #languages { text-align: center; margin: 15px auto 0px; width: 70px;}
header #languages .language { display: block; float: left; }
header #languages .language span { display: none; }
header #languages .language_de { width: 32px; height: 32px; background: url('../img/deutsch.png') no-repeat; }
header #languages .language_en { width: 32px; height: 32px; background: url('../img/englisch.png') no-repeat; }

header nav { position: relative; margin: 15px 0px; }
header nav ul li { padding: 10px 0px 0px 0px; font-weight: bold; line-height: 30px; text-indent: 80px; font-size: 16px; }
header nav ul li:before { content: ">"; font-size: 20px; position: absolute; right: 60px; }
header nav ul li:after { content: ""; display:block; color:white; height:1px; margin-top: 10px; }
header nav ul li:last-child:after { background: none; margin-top: 0px; }
header nav ul li a { text-decoration: none; color: #000000; }
header nav ul li a.active { color: #5371A5; }
header nav ul li a:hover { color: #5371A5; }

section article {}

footer { text-align: center; margin: 10px 0px 10px; }
footer:before { content: ""; display:block; color:white; height:1px; margin: 0px 0px 10px; background: #000000 linear-gradient(90deg, #ffffff 0%,#444444 50%,#ffffff 100%); }

#slider {  background: #FBFBFB; width: 100%; overflow: hidden; }
#slider .container { position: relative; width: 200%; overflow: hidden; }
#slider .container .page { width: 50%; float: left; }
#slider .container .page article { padding: 30px 0px 10px 10px; }
#slider .container .page article p, #slider .container .page article .content { padding-right: 20px; }

.back, input[type=submit] { color: #fff; text-decoration: none; display: inline-block; padding: 4px 10px; border-radius: 5px; border: solid 1px rgba(79, 79, 79, 0.75); position: absolute; top: 5px; right: 5px; background: #333333; background: rgb(181,189,200) -webkit-gradient(linear, 0 0, 100% 0, from(rgba(181,189,200,1)), color-stop(0.36, rgba(130,140,149,1)), to(rgba(40,52,59,1))); background: rgb(181,189,200) linear-gradient(270deg, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); }
.back:hover, input[type=submit]:hover { background: #555555; background: rgb(184,198,223) -webkit-gradient(linear, 0 0, 100% 0, from(rgba(184,198,223,1)), to(rgba(109,136,183,1))); background: rgb(184,198,223) linear-gradient(270deg, rgba(184,198,223,1) 0%,rgba(109,136,183,1) 100%); }

input[type=submit] { position: static; top: 0px; right: 0px; }

@media ( min-width: 480px ) {
	#page { width: 90%; margin: 20px auto 20px; }

	header { position: relative; }
	header #logo {text-align: center; }

	header nav:after, header nav:before { content: ""; display:block; color:white; height:1px; background: #000000 linear-gradient(90deg, #ffffff 0%,#444444 50%,#ffffff 100%); }
	header ul { width: 440px; margin: auto; }
	header nav ul li { padding: 0px; margin: 0px 5px; text-indent: 0px; float: left; }
	header nav ul li:before, header nav ul li:after { content: ""; font-size: 100%; position: static; right: 0px; margin: 0px; background: none; }

	header #languages { position: absolute; top: 0px; right: 0px; margin: 0px; }
	header #languages .language_de { background: url('../img/deutsch.png') no-repeat; }
	header #languages .language_en { background: url('../img/englisch.png') no-repeat; }
	header #languages .language_de:hover { background: url('../img/deutsch2.png') no-repeat; }
	header #languages .language_en:hover { background: url('../img/englisch2.png') no-repeat; }

	section { overflow: hidden; }
}

@media ( min-width: 800px ) {
	#page {margin: 30px auto 30px; }
	header #logo { text-align: left; width: 200px; float: left; }
	header nav { float: right; width: 485px; margin: 88px 0px 0px; }
	header nav ul { width: 100%; }
	header nav:after, header nav:before { background: none; }
	header nav ul li { padding: 0px 5px; line-height: 100px; }
	header nav ul li:before { content: ""; display:block; 
		position: absolute; left: auto; right: auto; top: auto; 
		bottom: auto; margin-left: -10px; color:white; height:100px; width: 1px; 
		background: #000000 linear-gradient(0deg, #ffffff 0%,#444444 50%,#ffffff 100%);	
	}

	header:after { content: ""; display:block; color:white; height:1px; margin: 20px 0px 20px; 
		background: #000000 linear-gradient(90deg, #ffffff 0%,#444444 50%,#ffffff 100%);
	}

	footer { margin: 30px 0px 30px; }

	article h1 { float: left; width: 300px; }
	article p, article .content { width: auto; margin-left: 300px; }
}

@media only screen and (min-width: 1024px) {
	html, body { background: #E8E8E8; }
	body { padding: 30px 0px; }
	#page { width: 1000px; background: #FBFBFB; border-radius: 10px; min-height: 200px; }
	#page_inner { padding: 30px 30px 10px; }

	header nav { width: 585px; }
	header nav ul li { padding: 0px 15px; }
	footer { margin: 30px 0px 0px; }
}


/* Static animation layer */

@font-face {
  font-family: 'Patua One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/PatutaOne.woff') format('woff');
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  height: auto;
}

header #logo img {
  width: 202px;
  height: 187px;
}

header #languages a {
  display: block;
  float: left;
  width: 32px;
  height: 32px;
}

header #languages .language_de { background: url('../img/deutsch.png') no-repeat; }
header #languages .language_en { background: url('../img/englisch.png') no-repeat; }

header #languages .language {
  overflow: hidden;
  text-indent: -9999px;
}

section {
  overflow: hidden;
  transition: height 700ms cubic-bezier(.22, .61, .36, 1);
}

section > .container.articles-track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-left: 0;
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

section > .container.articles-track.is-instant {
  transition-duration: 1ms;
}

section article.site-article {
  display: block;
  float: none;
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  margin-right: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 350ms ease, transform 350ms ease;
}

section article.site-article[aria-hidden="true"] {
  pointer-events: none;
  opacity: .2;
  transform: translateY(8px);
}

body.js-ready section article.site-article[aria-hidden="true"] {
  visibility: hidden;
}

body.is-leaving #page_inner {
  opacity: .01;
  transform: translateY(8px);
}

#page_inner {
  animation: pageEnter 420ms ease both;
  transition: opacity 220ms ease, transform 220ms ease;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.contact-mail {
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #page_inner {
    animation: none;
    transition: none;
  }
  section,
  section > .container.articles-track,
  section article.site-article {
    transition: none !important;
  }
}