/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-condensed-v16-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
       url('fonts/roboto-condensed-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v16-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v16-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-condensed-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
       url('fonts/roboto-condensed-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}



html, body {height: 100%;}
body{background:#F2F2F2;color:#575756;font-family: 'Roboto Condensed';font-style: normal;font-weight: 300;font-size: 1rem;
display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-direction:column;}

#header{line-height:3rem;width:100%;position: fixed;z-index: 1;text-align:right;transition:all 0.5s;background-color:rgba(255, 255, 255, 0.5);}
#header a{font-size:1.1rem;color:#575756;margin:0 0.5rem;text-decoration: none;text-transform: uppercase;}
#header a:last-child{margin:0 0 0 0.5rem;}
#header a.select{font-weight:bold;}
#header.fixed, #header:hover{background-color:rgba(255, 255, 255, 0.9);transition:all 0.5s;}
#header a:hover{text-decoration: underline;}


header{animation: 40s linear 0s normal none infinite animatedBackground;
    background: url("bilder/header.jpg") repeat-x fixed 0 0 rgba(0, 0, 0, 0);
    min-height: 100vh;
    position: relative;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;background-position: center;}

main{-ms-flex:1 1 auto;flex:1 1 auto}

footer{width: 100%;background: #575756;padding:2rem 0 1rem 0;color:#ffffff;}
footer ul{display: flex;flex-wrap: wrap;align-content: flex-start; justify-content: space-between;width:100%;}
footer ul li{flex-grow: 1;flex-basis: 25%;padding:1rem;box-sizing: border-box;}
footer h3{font-size:1.3rem;font-weight: 400;margin:0 0 1rem 0;position: relative;}
footer h3:after {content: ""; display: block; height: 2px; position: relative; width: 48px; background-color: #8BB31D; margin: 0.2rem 0 0 0;}
footer a, .unterricht a{color:#8BB31D;text-decoration: none;}
footer a:hover, .unterricht a:hover{text-decoration: underline;}
footer .wide>div{border-top:1px solid #878785;padding:1rem 0 0 0;text-align: right;}
.unterricht a{font-weight:bold;}
section{padding:4rem 0;}
section.green{background:#8BB31D;color:#ffffff;}
section.grey{background:#575756;color:#ffffff;}
section.hintergrund{animation: 40s linear 0s normal none infinite animatedBackground;
    background: url("bilder/bangkok.jpg") repeat-x fixed 0 0 rgba(0, 0, 0, 0);
    min-height: 40vh;
    position: relative;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
.wide{max-width:1240px;margin:0 auto;position: relative;padding:0 3rem;}





h1{color:#fff;background:#8BB31D;padding:0.5rem 1rem;font-weight:400;position:absolute;right:3rem;top:75vh;font-size:4rem;transform: skewY(-8deg);}
h2:not(.unter){color:#fff;background:#8BB31D;padding:0.5rem 1rem;font-weight:400;transform: skewY(-8deg);font-size:1.6rem;display:inline-block;margin:0 0 3.5rem 0;}
h2.unter{color:#575756;margin:3rem 0 2rem 0;font-weight:400;font-size:1.6rem;}
h2.unter:after {content: ""; display: block; height: 2px; position: relative; width: 48px; background-color: #8BB31D; margin: 0.3rem 0 0 0;}
p{font-size:1.2rem;line-height:1.8rem;margin:0 0 1.5rem 0;}


@media only screen and (max-width: 900px){
	h1 {font-size:2rem;}

	#header .wide{display: flex;
		max-width: 100%;
		overflow-y: visible;
		overflow-x: auto;
		transform: rotateX(180deg);}
	#header .wide a{transform: rotateX(180deg);}
}


ul.partner{display: flex;flex-wrap: wrap;align-content: flex-start; justify-content: space-between;width:100%;}
ul.partner li{flex-grow: 1;flex-basis: 25%;padding:1rem;box-sizing: border-box;text-align: center;}
ul.partner li img{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%);}
ul.partner li:hover img{filter: none;
  -webkit-filter: grayscale(0%);}

ul.block{display: flex;flex-wrap: wrap;align-content: flex-start; justify-content: space-between;width:100%;}
ul.block li{flex-grow: 1;flex-basis: 25%;padding:1rem;box-sizing: border-box;}
ul.block li div{padding:1.5rem 1rem;background:#575756;color:#ffffff;border-radius: 5px;box-shadow: 2px 5px 30px rgba(0,0,0,.1);text-align:center;}
ul.block li div h3{font-size:1.8rem;font-weight: 400;line-height:2.3rem;}
ul.block li div span{display:block;font-size:2.8rem;font-weight: 400;color:#8BB31D;padding:1.5rem 0 2rem 0;}
ul.block li div a{background: transparent;border:2px solid #ffffff;padding:0.3rem 0.7rem;color:#ffffff;font-size:1.2rem;font-weight: 400;border-radius: 5px;line-height: 1.5rem;text-decoration: none;}

ul.unterricht{width:100%;color:#ffffff;margin-top:20rem;}
ul.unterricht li{margin:1.5rem 0;background-color:rgba(255, 255, 255, 0.5);padding:1rem;}
ul.unterricht li h3, .h3h{font-size:1.5rem;font-weight: 400;line-height:2.3rem;margin:0 0 0.5rem 0;position: relative;}
ul.unterricht li h3 span{position: absolute;right:0;font-size:1.4rem;font-weight: 400;color:#575756;line-height:2.5rem;}
ul.unterricht li h3 span i{font-size:1.0rem;font-weight: 300;}
ul.unterricht li h3:after, .h3h:after {content: ""; display: block; height: 2px; position: relative; width: 48px; background-color: #8BB31D; margin: 0.2rem 0 0 0;}
ul.unterricht li p{font-size:1.2rem;margin-bottom: 0;text-align: center;}


ul.events {display: flex;flex-wrap: wrap;align-content: flex-start; justify-content: space-between;width:100%;}
ul.events li{flex-grow: 1;flex-basis: 50%;padding:1rem 3rem 1rem 4.8rem;box-sizing: border-box;position: relative;}
ul.events li h3{color:#8BB31D;font-size:1.4rem;font-weight: 400;line-height:2.3rem;}
ul.events li span{box-sizing: border-box;float: left;position: absolute;left:0;top:1.5rem;background:#575756;color:#ffffff;border-radius: 5px;text-align: center;width:3.3rem;height:3.3rem;padding:0.2rem 0;font-size:1.7rem;}
ul.events li i{color:#8BB31D;display: block;font-size:1.1rem;font-weight:400;}

.team ul{display:flex;flex-wrap: wrap;justify-content: space-between;width:100%;}
.team ul li{flex:1;text-align:center;padding:0 1rem;}
.team ul li img{ border-radius:50%;object-fit: cover;background: #ffffff;}
.team ul li h3{font-size:1.3rem;font-weight:400;margin: 0.8rem 0 0.5rem 0;}
.team ul li span{font-size:1.2rem;font-weight:300;text-transform: uppercase;display: block;}
.team ul li p{font-size:1.0rem;padding:1rem 0.5rem 0 0.5rem;}

.galler{padding:0;}
.galler ul {display: flex;flex-wrap: wrap;align-content: flex-start; justify-content: space-between;width:100%;}
.galler ul li{flex-grow: 1;flex-basis: 200px;}
.galler ul li figure{position: relative;overflow: hidden;}
.galler ul li a{display:none;}
.galler ul li a:first-child{display:block;}
.galler ul li a img{width:100%;display: block;-moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;}
.galler ul li a img:hover{-moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);}

figure{position: relative;}
figcaption{background-color: rgba(255, 255, 255, 0.7);bottom:0;padding:0.5rem 0.5rem;box-sizing: border-box; width: 100%;font-size:1.3rem; text-align: center; position: absolute;}

@media only screen and (max-width: 1620px) {
	.galler ul li{flex-basis: 350px;}
}

@media only screen and (max-width: 1220px) {
	.galler ul li{flex-basis: 320px;}
}


.kontakt{padding:0;}




.gallery{margin: 0 auto;}
.gallery .item.long{
	width:300px;height:199px;
}
.gallery .item.tall{
	width:300px;height:408px;
}
.gallery .item a, .gallery .item img{
	object-fit: cover;
	width:100%;height:100%;
}
.gallery .item {
	margin-bottom: 10px;
}


.button.is-checked{font-weight: bold;}