/* CSS Document */
html{
    background:#fff;
    color:#000;
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	font-size: 100%;
}
body{
  margin: 0;
  padding: 0;
  width: 100%;
  /* hyphens */
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   background-color: lightgray;
}
h1 {
  font-family:"Ubuntu";
  font-weight:normal;
  font-size: 3.5rem;
  text-align: center;
  color: #fff;
  margin: 0.3rem 0;
  padding: 0;
}
h2 {
  font-family:"Ubuntu";
  font-weight: normal;
  font-size: 3rem;
  text-align: center;
  color: #fff;
  margin: 0.3rem 0;
  padding: 0;
}
h3 {
  font-family: "Ubuntu";
  font-weight: normal;
  font-size: 2.5rem;
  text-align: center;
  margin: 0.3rem 0;
  padding: 0;
  color: #fff;
}
h4 {
  font-family: "Ubuntu";
  font-weight: bold;
  font-size: 2.5rem;
  text-align: center;
  margin: 0.3rem 0;
  padding: 0;
  color: greenyellow;
}
p {
  font-family: "Arvo";
  font-size: 1.7rem;
  text-align: center;
  margin: 5px 0;
  padding: 0;
  z-index: 1;
  position: relative;
  font-weight: normal;
  font-style: normal;
  margin: 2rem auto;
}	
table, th, td {
	border-right: 2px solid darkgrey;
	border-collapse: collapse;
	/*border-end-end-radius: 10px;*/
	font-family: "Arvo";
 	font-weight: normal;
  	font-size: 20px;
} 
td:first-child  {
	border-left: 2px solid darkgrey;
}
th {
	font-weight: bold;
}
caption {
	background-color: sienna;
	font-family: "Ubuntu";
    font-weight: bold;
	font-size: 20px;
	border-radius: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}
tr {
	border-radius: 5px;
}
tr:nth-child(even) {
  background-color: #33ccff;
}
tr:nth-child(odd) {
	background-color:azure;
  }
a {
    color: blue;
    text-decoration:none
}
a:hover{
    text-decoration:underline
}
.error {
	color: #FF0000;
}
/* css identifiyer ID */
#myBtn {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	right: 30px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Removeoutline */
	background-color: green; /* Set a background color */
	color: darkgrey; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 15px; /* Some padding */
	border-radius: 10px; /* Rounded corners */
	font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
} 
#Button {
	border: none; /* Remove borders */
	outline: none; /* Removeoutline */
	background-color: green; /* Set a background color */
	color: White; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 15px; /* Some padding */
	border-radius: 10px; /* Rounded corners */
	font-size: 18px; /* Increase font size */
}
#Button:hover {
  background-color: #555; /* Add a dark-grey background on hover */
} 

.myAButt {
	box-shadow: 2px 2px 3px 0px #9fb4f2;
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	background-color:#7892c2;
	border-radius:10px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	padding:10px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
}
.myAButt:hover {
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
	background-color:#476e9e;
}
.myAButt:active {
	position:relative;
	top:1px;
}

#header {
  width: 100%;
  background: url('../img/header-bg.png');
  height: 70px;
  position: fixed;
  margin-top: 10px;
  /*display: none;*/
}
#logo a { 
    color: #fff; 
    text-decoration: none; 
    float: left; 
    font-size: 30px; 
    margin-top: 20px;
	margin-left: 50px;
    color: #fff; 
    font-family:"Roboto"; 
    font-weight: bold;
}
#malus { 
    background: url('../img/logo.png')no-repeat; 
    width: 100px; 
    height: 110px; 
    margin: 0 auto; 
    position: relative; 
    bottom: -0px;
    }
#slide1, #slide2, #slide3, #slide4 , #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12 {
	width: 100%; 
}
/*Startimage*/
#slide1{
	background:url(../img/slide1.jpg) 50% 0% no-repeat fixed;
	color: #fff;
	height: 300px;
	margin: 0;
	padding: 150px 0 160px 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
/*Home*/
#slide2{
	background-color: darkcyan;
	color: #333333;
	height: auto;
	padding: 50px 0 50px;
  }
/*Zwischen Image*/
#slide3{
  background: url(../img/slide3.jpg) 50% 0 no-repeat fixed;
  color: #fff;
  height: 400px;
  padding: 170px 0 0 0;
  background-size: cover;
}
/* about me*/
#slide4{
  background-color: lightsalmon;
  color: #333333;
  height: auto;
  padding: 50px 0 50px;
}
#slide44{
	background-color: seagreen;
	color: #333333;
	height: auto;
	padding: 50px 0 50px;
  }
#slide5{
  background: url(../img/slide5.jpg) 50% 0 no-repeat fixed;
  color: #fff;
  height: 300px;
  padding: 300px 0 0 0;
  background-size: cover;
}
#slide6{
  background-color: lightgoldenrodyellow;
  color: #333333;
  height: auto;
  padding: 50px 0 50px;
}
#slide6  h3 {
	  color: Blue;
  }

#slide7{
  background: url(../img/slide7.jpg) 50% 0 no-repeat fixed;
  color: #fff;
  height: 300px;
  padding: 300px 0 0 0;
  background-size: cover;
}
#slide8{
  background-color: tomato;
  color: #333333;
  height: auto;
  padding: 50px 0 50px;
}
#slide9{
  background: url(../img/slide9.jpg) 50% 0 no-repeat fixed;
  color: #fff;
  height: 300px;
  padding: 300px 0 0 0;
  background-size: cover;
}
#slide10{
  background-color: Khaki;
  color: #333333;
  height: auto;
  padding: 50px 0 50px;
}
#slide11{
  background: url(../img/slide11.jpg) 30% 0 no-repeat fixed;
  color: #fff;
  height: 300px;
  padding: 300px 0 0 0;
  background-size: cover;
}
#slide12{
	background-color: cornflowerblue;
	color: #333333;
	height: auto;
	padding: 50px 0 50px;
  }
#copyright { color: #fff; font-family:"Wellfleet"; font-size: 14px; margin-top: 100px; text-align: center; }
#copyright a { text-decoration: none; color: #fff; }
/* css identifiyer class */
.center { margin: 0 auto; }
.content { 
	margin: 0 auto; 
	width: 50%; 
	font-family: 'Ubuntu', serif;
	text-align: center;
	}
.content a {
	text-decoration: none;
}
/* .content h3{
	font-weight: bold;
	font-size: 30px;
	font-style: bold;
	margin: 50px auto;
} */
.clear { clear: both; }
.topnav {
	/*background-color: #ffff;*/
	overflow: hidden;
	position: relative;
	margin-top: 25px;
	margin-left: 50px;
}

.topnav a {
	 float: none;
	 display: inline;
	 color: gainsboro;
	 text-align: center;
	 padding: 50px 20px;
	 text-decoration: none;
	 font-family: "Roboto";
	 font-size: 17px;
	 font-weight: bold; 
	 text-transform: uppercase;
	 opacity:1;
}
.topnav a:hover {
	color: #fff;
	opacity:1;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
} 
.quotes_container { 
	width: 100%; 
	margin: 0 auto; 
}
.links img {
	border-radius: 30px;
  	height: 300px;
  	padding: 10px;
	float: left;
	margin-right: 10px;
}
.rechts img {
	border-radius: 30px;
  	height: 200px;
  	padding: 10px;
	float: right;
	margin-left: 10px;
}
.mitte img{
	border-radius: 20px;
	height: 250px;
	padding: 10px;
}
.small_left img {
	border-radius: 30px;
	height: 150px;
	padding: 5px;
	float: left;
}
footer {
	width: 100%;
	margin: auto;
}
footer ul {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: lightgray;
}

footer li {
	font-family: "Roboto"; 
	font-size: 18px;
	font-weight: bold;
	display: inline;
	list-style: inline;
	color: white;
	text-align: center;
	padding: 5px 16px;
}

footer li a {
	color: white;
	text-decoration: none;
}

footer li a:hover {
  color: black;
}
/* Workshop */
#slide_ws1{
  background:url('../img/slide_1ws.jpg') 50% 50% no-repeat fixed;
  height: 150px;
  margin: 0;
  padding: 150px 0 160px 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
	font-family:"Ubuntu";
  font-weight: normal;
  font-size: 45px;
  text-align: center;
  color: Black;
}
#slide_ws2{
  background-color: steelblue;
  color: #333333;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  padding: 50px 0 50px;
}
.content_ws{ 
	margin: 0 auto; 
	width: 70%; 
	font-family: 'Ubuntu', serif;
	text-align: center;
	}
.content_ws a {
	text-decoration: none;
}
.content table, th, td {
	border: 1px solid darkgrey;
	border-collapse: collapse;
	font-family: "Arvo";
} 
.content table{
	border-radius: 10px;
	width: 100%;
}
.content_ws th{
	font-size: 15px;
	background-color: lightblue;
}
.content_ws td{
	font-size: 15px;
	padding: 5px 5px 5px 5px;
}
.bildlinks {
  	float:left;
  	padding: 3px;
 	border: 2px solid #ccc;
  	margin-right: 10px;
	margin-bottom: 10px;
	height: 220px;
	border-radius: 20px;
}
.bildrechts {
  float:right;
  padding: 3px;
  border: 5px solid #ccc;
  margin-bottom: 10px;
  margin-left: 10px;
}
.galerie {
	margin: 0 auto; 
	width: 80%; 
	font-family: 'Ubuntu', serif;
	text-align: center;
}
.galerie figure {
	background: steelblue;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	display: inline-block;
	height: 15em;
	margin: 0 0 1em 2em;
	overflow: hidden;
	padding: 0;
	width: 15em;
	transition: all 0.25s ease-in;
}

.galerie figure img {
	width: 14em;
	height: 15em;
	border-radius: 10px;
}

.galerie figure:hover,
.galerie figure:focus {
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
	margin: -1em 0px 0 20px;
	padding: 5px 5px 30px 5px;
	width: 15em;
	height: 18em;
	z-index: 2;
	transform: scale(2);
}

.galerie figcaption {
	color: #333;
	font: cursive 10px/150%;
	font-family: "Arial", cursive;
	position:relative;
	text-align: center;
	width: 15em;
}
/* Anmeldeform*/
#slide_Anmeldung1{
	background:url('../img/slide_1ws.jpg') 50% 50% no-repeat fixed;
	height: 100px;
	margin: 0;
	padding: 150px 0 160px 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	  background-size: cover;
	  font-family:"Ubuntu";
	font-weight: normal;
	font-size: 45px;
	text-align: center;
	color: Black;
  }
#slide_Anmeldung1 h2{
		color:Black;
		font-weight: bold;
		text-shadow: 2px 2px 4px white;
  }
#slide_Anmeldung2{
	background-color: steelblue;
	color: #333333;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
  }
.Anmeldung {
	background: linear-gradient(-45deg, #eeb552, #3cbfe7, #23d547, #d5d523);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
.Anmeldung form {
	display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 16px;
	padding: 1em;
	background: #f9f9f9;
	border: 1px solid #c1c1c1;
	margin: 2rem auto 0 auto;
	max-width: 700px;
	padding: 1em;
	border-radius: 0.5em;
  }
.item1 {
	text-align: center;
}
.item2_3 {
	grid-column-start: 2;
	grid-column-end: 4;
}
.item1_3 {
	grid-column-start: 1;
	grid-column-end: 4;
}
.Anmeldung form input {
	background: #fff;
	border: 1px solid #9c9c9c;

 }
.Anmeldung input[type=submit] {
	background: lightgrey;
	padding: 0.7em;
	width: 100%;
	border: 0;
	color: black;
 }
.Anmeldung label {
	padding: 0.5em 0.5em 0.5em;
	text-align: right;
	font-size: 1em;
	font-weight: bolder;
 }
.Anmeldung .right label {
	text-align: left;
}
.Anmeldung input {
	padding: 0.7em;
	margin-bottom: 0.5rem;
 }
.Anmeldung .db input{
	background-color: lightgray;
	border-radius: 0.3em;
 } 
.Anmeldung input:focus {
	outline: 3px solid gold;
 }
.Anmeldung .full-width, .final {
    grid-column: 1 / 3;   
}
.Anmeldung p{
	margin: auto;
	padding-top: 1em;
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
}
.Anmeldung .item1_3 p{
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.0em;
	color: darkgrey;
}
.Anmeldung input[type=checkbox]{
	width: 16px;
    height: 16px;
	position:relative ;
	vertical-align: middle;
	margin: auto;
}
.Anmeldung input[type=submit]{
	width: 100%;
    height: 2.0em;
	margin: auto;
	vertical-align: middle;
	background-color: yellowgreen;	
	padding: 5px 15px;
}
.Anmeldung input[type=submit]:hover {
	background: gold;
}
.item1_3 .final {
	background-color: lightsteelblue;
	padding: 0.5em;
	border-radius: 0.3em;
	font-size: 0.7em;
	color: darkslateblue;
	margin: auto;
	width: 80%;
}
.Anmeldung .Confirmation {
	background-color:#23d547 
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	html{
		font-size: 50%;
	}
	#header {
		height: 40px;
		margin-top: 10px;
	}
	.topnav {
		margin-top: 10px;
	}
	.content {
		width: 100%; 
	}
	/* .content p {
		font-size: 15px;				
	}
	.content h3 {
		font-size: 20px;
	} */
	.quotes_container {
		width: 90%;
	}
	 .topnav a:not(:first-child) {display: none;}
	 
	 .topnav a.icon {
		display: inline;
	}
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
		color: white;
	}
	.topnav.responsive a {
		padding: 5px 5px;
		float: none;
		display: block;
		text-align: left;
	}
	.links img {
		height: 150px;
	}
	.rechts img {
		height: 150px;
	}
	h2 {
		font-weight: normal;
		/* font-size: 20px; */
	}
	h3 {
		font-weight: normal;
		/* font-size: 20px; */
	}
	h4 {
		font-weight: normal;
		color: greenyellow;
		/* font-size: 20px; */
	}
	#malus {
	    display: none;
    }
	#slide1 {
		height: 50px;
		margin: 0;
		padding: 5px 0 6px 0;
	}
	#slide3 {
		height: 50px;
		margin: 0;
		padding: 15px 0 16px 0;
	}
	#slide5 {
		height: 50px;
		margin: 0;
		padding: 15px 0 16px 0;
	}
	#slide7 {
		height: 50px;
		margin: 0;
		padding: 15px 0 16px 0;
	}
	#slide9 {
		height: 50px;
		margin: 0;
		padding: 15px 0 16px 0;
	}
	#slide11 {
		height: 50px;
		margin: 0;
		padding: 15px 0 16px 0;
	}
	#slide_ws1 {
		height: 70px;
		margin: 0;
		padding: 15px 0 16px 0;
	}
	.bildlinks {
		margin-right: 5px;
		margin-bottom: 5px;
		height: 150px;
		border-radius: 10px;
	}
	.bildrechts {
		margin-right: 5px;
		margin-bottom: 5px;
		height: 150px;
		border-radius: 10px;
	}
	.galerie figure img {
		width: 10em;
		height: 10em;
	}
	.Anmeldung form {
		grid-template-columns: 200px 1fr;
		grid-gap: 8px;
	  }
	
	  .Anmeldung label {
		text-align: right;
		grid-column: 1 / 2;
		font-size: 0.8;
		font-weight:normal;
	  }
	/* table, caption, th, td {
		font-size: 12px;
	} */
	/* footer li {
		font-family: "Roboto"; 
		font-size: 10px;
	} */
} 
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	html{
		font-size: 70%;
	}
	#slide2 {
		height: 50px;
		margin: 0;
		padding: 50px 0 6px 0;
	}
	.Anmeldung form {
		grid-template-columns: 200px 1fr;
		grid-gap: 8px;
	  }
	h4{
		color: greenyellow;
	}

}