@charset "UTF-8";
/*
Theme Name: Maria Ward Gymnasium
Theme URI: http://www.emwgym.de
Author: networkerz GmbH
Version: 1.0
*/


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

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





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


/* dosis-600 - latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/dosis-v8-latin/dosis-v8-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Dosis SemiBold'), local('Dosis-SemiBold'),
       url('fonts/dosis-v8-latin/dosis-v8-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/dosis-v8-latin/dosis-v8-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/dosis-v8-latin/dosis-v8-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/dosis-v8-latin/dosis-v8-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/dosis-v8-latin/dosis-v8-latin-600.svg#Dosis') format('svg'); /* Legacy iOS */
}





	

html, body {
	font-family: 'Dosis';
	font-style: normal;
	font-weight: 300;
	font-size:16px;
	text-align: center;
	line-height:22px;
	color:#001b37;
	margin: 0px;
	padding: 0px;
}

body {
	position:relative;
	background-color: #fff;
	}

.clear,
.clear-mobile {
	clear:both;
	height: 1px;
	}

.clear-mobile {
	display: none;
}

a.logo {
	width:286px;
	height:85px;
	background-image:url(img/logo.png);
	background-repeat:no-repeat;
	background-size:286px 85px;
	position:absolute;
	left: 30px;
	top:12px;
	}


a,
a:focus {
	outline:0;
	font-weight: 200;	
	text-decoration: none;	
	}
	


	a:hover {
		text-decoration:none;
		color: inherit;
		opacity: 0.8;
		}

a.btn {
	background-color: #001b37;
	color: #fff;
	padding: 12px 20px;
	display: inline-block;
	font-size: 18px;
	line-height: auto;
	border: 0px;
	border-radius: 0px;
	max-width: 100%;
	min-width: 300px;
	margin: 0px auto;
	text-transform: uppercase;
	letter-spacing: 1px;
	width: auto;
}

a.btn:hover {
	opacity: 0.8;
}

.btn.focus, .btn:focus, .btn:hover {
    color: #fff;
    text-decoration: none;
	background-color: #001b37;
}

p {
	margin: 0 0 15px 0;
	}

p.info {
	margin-top: 40px;
}


h1 {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 300;
	font-size: 38px;
	line-height: 45px;
	margin:50px auto 50px auto;
	text-transform: uppercase;
	letter-spacing: 2px;
  }


h2 {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 300;
	font-size: 30px;
	line-height: 38px;
	margin:40px auto 40px auto;
	text-transform: uppercase;
}

	.counter span {
		font-family: 'Roboto Slab';
		font-style: normal;
		font-weight: 300;
		font-size: 30px;
		line-height: 38px;
		margin: 0px 0px 0px 7px;
		text-transform: none;
		display: inline-block;
	}


h3 {
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 15px;
}

strong,
b {
	font-weight: 700;
}



h1,
h2 {
	width:100%;
	text-align: center;
}


.container-fluid {
    max-width: 1440px;
	position:relative;
	padding-left: 30px;
	padding-right: 30px;	
}

	.row {
		margin-right: -30px;
		margin-left: -30px;
	}


input { 
	color:#001b37;
	border:1px solid #001b37;
	background-color: #fff;
	font-size: 16px;
	padding: 5px 10px 3px 10px;
	width:240px;
	margin-right:20px;
	margin-bottom:5px;
	text-align: center;
}

input[type="submit"] {
    border:0px solid #9a9a9a;
	background-color: #001b37;
	margin-left: 0px;
	margin-bottom:0px;
	margin-top:45px;
	color: #fff;
	text-transform: uppercase;
}

input[type="submit"]:hover {
    border:1px solid #001b37;
	color: #001b37;
	background-color: #fff;
}




/* contents */


header {
	width: 100%;
	height: 110px;
	background-color: rgba(0,27,55,0.90);
	position: fixed;
	color: #fff;
	font-size: 16px;
	letter-spacing: 1px;
	z-index: 2000;
	top:0px;
	left: 0px;
}

	.header-spacer {
		height: 160px;
	}

	header form {
		position: absolute;
		right: 48px;
		background-color: #fff;
		top: 110px;
		width: 100%;
		max-width: 450px;
		display: none;
	}


	header form.active {
		display: block;
	}

	header form input {
		border: 0px;
		margin: 0px;		
		padding: 7px 10px;
		display: block;
	}

	header form input[type="text"] {
	  width: 80%;
		text-align: left;
		color: #68738d;
		float: left;
	}

	header form input[type="text"]:focus {
		color: #001b37;
	}

	header form input[type="image"] {
		width: 37px;
		padding: 0px;
		float: right;
	}


nav {
	position: absolute;
	right: 20px;
	top:60px;
	z-index: 100;
}

	nav a {
		color: #9fa4b8;
	}

	nav ul {
		list-style: none;
		text-align: right;
		margin: 0px;
		padding: 0px;
		display: flex;
	}

		nav ul li {
			margin:0px 13px;
			position: relative;
			display: flex;
  			justify-content: center;
  			align-items: center;			
		}

		nav ul li a,
		nav ul li.active ul li a {
			font-weight: 300;
			position: relative;
		}

		nav ul li.active a {
			font-weight: 700;
			color: #fff;
		}

			nav ul li a:hover {
				color: #fff;
				text-decoration: none;
				opacity: 1;
			}	


		nav ul li.current_page_item a,
		nav ul li.current-page-ancestor a{
			color:#fff;
		}

		nav ul li ul {
			background-color: transparent;
			position: absolute;
			top: 16px !important;
			left: -50% !important;
			padding: 30px 0px 0px 0px !important;
			margin: 0px;
			display: none;
			min-width: 155px !important;
			flex-shrink: 0;
			width: 0; 
			height: 0; 
		}

		nav ul li ul li {
			width: 100%;
			margin:0px;
			padding: 0px;
			text-align: center;
			-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.55);
			-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.55);
			box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.55);
			border-bottom: 2px solid transparent;
		}

			nav ul li ul li:last-child {
				border-bottom: 0px solid transparent;
			}

			nav ul li.current_page_item ul li a,
			nav ul li.current-page-ancestor ul li a,
			nav ul li ul li a,
			nav ul li ul li.current_page_item a {
				color: #001b36;
				font-size: 15px;
				background-color: #fff;
				padding: 5px 15px;
				display: block;
				-webkit-transition: all 0.2s ease-in;
				-moz-transition: all 0.2s ease-in;
				-o-transition: all 0.2s ease-in;
				transition: all 0.2s ease-in;	
				width: 100%;
				font-weight: 300;
			}

			nav ul li ul li a:hover,
			nav ul li.current-page-ancestor ul li.current_page_item a {
				background-color: #001b36;
				color: #fff;
			}

			nav ul li ul li:first-child a:after {
				bottom: 100%;
				left: 50%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
				border-color: rgba(255, 255, 255, 0);
				border-bottom-color: #fff;
				border-width: 10px;
				margin-left: -10px;
				-webkit-transition: all 0.2s ease-in;
				-moz-transition: all 0.2s ease-in;
				-o-transition: all 0.2s ease-in;
				transition: all 0.2s ease-in;				
			}

			nav ul li ul li:first-child a:hover:after,
			nav ul li ul li:first-child.current_page_item a:after{
				border-color: rgba(0, 27, 55, 0);
				border-bottom-color: #001b37;
			}



hr {
	border-top: dotted 4px #001b36;
	margin-top: 50px;
	margin-bottom: 50px;	
}

.balken-body hr {
	clear:both;
	height: 1px;	
	border-top: dotted 0px #001b36;
	margin: 0px;
}

main {
	min-height:400px;
	padding-bottom: 40px;
}

.page-template-news main {
	margin-top:110px;
	padding-top: 30px;
}


div.slider {
	position: relative;
}

	div.slider ul {
		list-style: none;
		margin:0px;
		padding: 0px;
	}
	
		div.slider ul li {
			position: relative;
		}

		div.slider img {
			width:100%;
			height: auto;
		}
		
		div.slider .headlines {
			position: absolute;
			top: calc(50% - 10px);
			left:30px;
			width: calc(100% - 60px);
			text-align: left;
		}

			.category div.slider .headlines {
				top: calc(50% - -20px);
			}

		div.slider .headline {			
			background-color:rgba(265,265,265,0.8);
			color:#000;			
			font-family: 'Roboto Slab';
			font-style: normal;
			font-weight: 300;
			font-size: 36px;
			line-height: 45px;
			margin:0px;
			text-transform: uppercase;
			letter-spacing: 3px;	
			padding: 10px 15px;
			width: auto;
			display: inline-block;
		}

		div.separator {
			height: 2px;
			width:100%;
			display: block;
		}

		div.slider .subline {			
			background-color:rgba(265,265,265,0.8);
			color:#000;		
			font-size: 18px;
			line-height: 25px;
			padding: 10px 20px;		
			width: auto;
			display: inline-block;
		}

			div.slider .subline a {
				text-transform: uppercase;
				font-weight: 600;
				color:#000;
			}


.slidergalerie {
	width:100%;
	max-width: 800px;
	margin: 0px auto 80px auto;
	position: relative;
}

	.slidergalerie.klein {
		width:100%;
		max-width: 415px;
		margin: 0px auto 80px auto;
		position: relative;
	}

	.slidergalerie .slick-arrow {
		position: absolute;
		width: 37px;
		height: 37px;
		z-index: 1000;
		top: calc(50% - 21px);
		background-color: #fff;
		border-radius: 35px;
		cursor: pointer;
	}

		.slidergalerie .slick-arrow i.arrow {
			color: #001b37;
		}

		.slidergalerie .slick-arrow.slick-prev {
			left: -55px;
		}

		.slidergalerie .slick-arrow.slick-next {
			right: -55px;
		}

		.slidergalerie .slick-arrow.slick-prev i.arrow {
			transform: rotate(-135deg);
			margin: 10px 10px 10px 13px;
		}

		.slidergalerie .slick-arrow.slick-next i.arrow {
			transform: rotate(45deg);
			margin: 10px 10px 10px 5px;
		}

	.slidergalerie img {
		margin-bottom:6px;
	}


ul.slick-slider {
	margin: 0px;
	padding: 0px;
}

	.slick-dots {
		position: absolute;
		bottom: 20px;
		width: 100%;
	}

		ul.slick-dots li {
			display: inline-block;		
		}

		ul.slick-dots li:only-child {
			display: none;
		}

		ul.slick-dots li button {
			width:20px;
			height: 20px;
			border-radius: 20px;
			background-color:#fff;
			border:2px solid #fff;
			font-size: 0px;	
			margin: 0px 5px;
		}

		ul.slick-dots li button:hover,
		ul.slick-dots li.slick-active button {
			background-color:#001b37;
		}


.content {
	margin:0px 40px;
}

.content img {
	width:100%;
	height: auto;
}

	.content .back-button img {
		max-width: 105px;
	}

		.back-button {
			margin-top: 40px;
		}		
.content .wp-block-image img {
	width:auto;
}
.content .wp-block-gallery {
	margin: 65px auto; 
}
.content a {
	color:#001b37;
	font-weight: 400;
	text-decoration: underline;
}

	.content a:hover {
		color: #8d8d8d;
	}

	.content .gremien a,
	.content .reiter-nav a {
		text-decoration: none;
	}

.content.suchergebnisse,
.content.suchergebnisse h2 {
	text-align: left;
}

.content.suchergebnisse {
	margin-bottom: 80px; 
}

.content.suchergebnisse h2 {
	margin-bottom: 15px;
}


	.start-teaser {
		margin-bottom:40px;
		padding-bottom: 30px;
		border-bottom:dotted 4px #001b36;
	}


	.col-left,
	.col-right,
	.col50,
	.col33,
	.col25 {
		float: left;
	}
		.col-left {margin-right: 0px; width:calc(50% - 10px);}
		.col-right {margin-left: 0px; width:50%;}

		.col50 {width:calc(50% - 10px); margin-right: 10px;}
		.col33 {width:calc(33.332% - 10px); margin-right: 10px;}
		.col25 {width:calc(25% - 10px); margin-right: 10px;}
	


	.teaser {
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		width: calc(33.333% - 2px);
		float: left;
		margin:2px 1px 1px 1px;
		height: 350px;
		background-position: center center;
	}


	.teaser.gruen {background-image: url("files/dummy-content/teaser-small0.jpg");}
	.teaser.blau {background-image: url("files/dummy-content/teaser-small1.jpg");}
	.teaser.orange {background-image: url("files/dummy-content/teaser-small2.jpg");}
	.teaser.rot {background-image: url("files/dummy-content/teaser-small3.jpg");}
	.teaser.violett {background-image: url("files/dummy-content/teaser-small4.jpg");}
	.teaser.gruen2 {background-image: url("files/dummy-content/teaser-small5.jpg");}

	.teaser-info {
		text-align: center;
		color:#fff;
		position: relative;
		background-color: #001b37;
		width: calc(100% - 3px);
		padding: 0px 100px 5px 100px;
		margin: 0px 2px 0px 1px;
	}

.teaser-info p a {
	color: #fff;
	display: block;
	margin: 0px auto 15px auto;
	text-transform: uppercase;
	font-weight: 600;
}

.teaser-info p a strong {
	text-transform: uppercase;
}

	.teaser-small .teaser-info {
		height: 70px;
		position: absolute;
		bottom: 0px;
		width: 100%;
	}

.teaser-info:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.teaser-info-inner {
	display: inline-block;
	vertical-align: middle;
	width: 90%;
	border-bottom:dotted 4px #001b36;
	border-top:dotted 4px #001b36;
	margin: -40px auto auto auto;
	padding: 15px 10px;	
}

.teaser-small .teaser-info-inner {
	display: none;
}

.teaser-info span {
    position: absolute;
    bottom: 15%;
    display: block;
    left: calc(50% - 45px);
	font-weight: bold;
}

.teaser-small span.mehr {
    position: absolute;
    bottom: 30%;
    display: block;
    left: calc(50% - 45px);
	font-weight: bold;
	color: #fff;
}

.start-buttons a.btn {
	width: 100%;
	text-transform: none;
	white-space: normal;
	color: #fff;
}

	.start-buttons .col-left {margin-right: 10px; width:calc(50% - 10px);}
	.start-buttons .col-right {margin-left: 0px; width:calc(50% - 10px);}



.bg-blau {
	background-color: #e3e5ec;
	margin-top:115px;
	padding: 50px 0px;
}

	.bg-blau + .bg-blau {
		margin-top:0px;
		padding: 0px 0px 70px 0px;
	}

	.bg-blau + .bg-blau h2 {
		margin: 10px auto 70px auto;
	}

	.bg-blau hr {
		margin-bottom: 10px;
	}



.news-slider {
    width: 85%;
    margin: 0px auto 50px auto;
}

	.news-slider .slick-slide img {
		width:100%;
		height: auto;
	} 

	.news-slider ul li {
		background-color: #fff;
	}	

	.news-slider .col-right {
		padding:10px 10px 10px 15px;
		text-align: left;
	}



	.news-slider .slick-arrow {
		position: absolute;
		width: 37px;
		height: 37px;
		z-index: 1000;
		top: calc(50% - 21px);
		background-color: #001b37;
		border-radius: 35px;
		cursor: pointer;
	}

	.news-slider .slick-arrow:hover {
		opacity: 0.8;
	}


	.news-slider .slick-arrow.slick-prev {left: -55px;}
	.news-slider .slick-arrow.slick-next {right: -55px;}


	i.arrow {
	  position: relative;
	  display: inline-block;
	  vertical-align: middle;
	  color: #fff;
	  box-sizing: border-box;
		width: 16px;
	  height: 16px;
	  border-width: 3px 3px 0 0;
	  border-style: solid;
	  margin: 10px;
	  border-radius: 0 2px 0 0;	
		}

	  i.arrow:before {
		right: 0;
		top: -3px;
		width: 23px;
		height: 4px;
		transform: rotate(-45deg);
		transform-origin: right top;
		box-shadow: inset 0 0 0 32px;
	  }

	i.arrow::after {
		width: 3px;
		height: 3px;
		left: -2px;
		top: -3px;
		box-shadow: inset 0 0 0 8px, 17px 19px;
	}




.news-slider .slick-arrow.slick-prev i.arrow {transform: rotate(-135deg); margin:10px 10px 10px 13px;}
.news-slider .slick-arrow.slick-next i.arrow {transform: rotate(45deg); margin:10px 10px 10px 5px;}


	.news-datum {
		margin-top:3px;
		margin-bottom:5px;
		font-size: 14px;
	}

	.news-kategorie {
		font-size: 18px;
		font-weight: 600;
		padding-bottom: 10px;
		margin-bottom: 15px;
		border-bottom: 2px dotted #001b37;
	}

	.news-headline {
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 10px;
		text-transform: uppercase;
	}

	.news-text a {
		font-weight: 600;
		color: #001b37;
	}


.news-image {
	max-width: 200px;
	float: left;
	margin: 0px 25px 40px 0px;
}

.category-items {
	padding-top:30px;
	margin-bottom: 100px;
}

.news-teaser {
	width:80%;
	margin: 0px auto 15px auto;
	text-align: left;
}

	.news-teaser-image {
		width:200px;
		float: left;
		margin-right: 15px;
	}

	.news-teaser-infos {
		float: left;
		width: calc(100% - 215px);
	}

		span.news-teaser-date {
			display: inline-block;
			width:auto;			
			padding-bottom:6px;
			margin-bottom:8px;
			position: relative;
		}

span.news-teaser-date2 {
			display: block;
			width:auto;			
			padding-bottom:6px;
			margin-bottom:8px;
			position: relative;
	border-bottom: 1px solid #001b37;
		}

			span.news-teaser-date a {
				font-weight: normal;
				color: #999;
			}

		span.news-teaser-date:before {
		  content : "";
		  position: absolute;
		  left    : 0;
		  bottom  : 0;
		  height  : 1px;
		  width   : 62px; 
		  border-bottom:1px solid #001b37;
		}

		.single-post span.news-teaser-date:before {
		  content : "";
		  position: absolute;
		  left    : 0;
		  bottom  : 0;
		  height  : 1px;
		  width   : 100%; 
		  border-bottom:1px solid #001b37;
		}

		.news-teaser-headline {
			font-weight: 600;
			text-transform: uppercase;
			margin-bottom:5px;
		}

		.news-teaser-text {
			margin-bottom:10px;
		}

		.news-teaser-infos a {
			font-weight: 600;
		}


a.quicklink {
	display: inline-block;
	margin: 0px 30px;
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	color: #001b37;
}

	a.quicklink:hover {
		opacity: 0.8;
	}

	a.quicklink .icon-wrapper {
		width: 170px;
		height: 170px;
		border: 3px dotted #001b37;
		border-radius: 170px;
		padding: 10px;
		margin:0 auto 20px auto;
	}

	a.quicklink .icon-wrapper .icon {
		width: 146px;
		height: 146px;
		border-radius: 146px;
		background-color: #68738d;
	}

	a.quicklink img {
		margin-top:6px;
	}



.schwerpunktthema {
	background-image:url("files/dummy-content/startseite-schwerpunktthema.jpg");  /* fallback image */
	background-size: cover;
	background-repeat: no-repeat;
	height: 565px;
	width: calc(100% - 40px);
	margin: 0px auto;
	position: relative;
	text-align: left;
}

	.schwerpunktthema div.bg-white {
		background-color: rgba(255,255,255,0.8);
		width: 600px;
		height: 305px;
		position: absolute;
		left: 105px;
		bottom:40px;
		padding: 20px;
	}

	.schwerpunktthema .kategorie {
		border-bottom: 2px dotted #001b37;
		display: inline-block;
		font-size: 18px;
		text-transform: none;
		font-weight: 600;
		padding-bottom: 10px;
		margin-bottom: 10px;
		letter-spacing: 1px;
	}

	.schwerpunktthema .headline {
		display: block;		
		font-family: 'Roboto Slab';
		font-style: normal;
		font-weight: 300;
		font-size: 30px;
		line-height: 35px;	
		margin-bottom:15px;
		letter-spacing: 1px;		
	}

	.button-wrapper {
		width:100%;
		text-align: center;
	}

		.schwerpunktthema a.btn {
			padding:6px 12px;
			font-size: 18px;
			margin: 0px auto;
		}





ul.termine-filter {
	margin: 0px auto 30px auto;
	padding: 0px;
	list-style: none;
	display: flex;
    justify-content: space-between;
	width: calc(100% - 40px);
}

	ul.termine-filter li {
		border:3px solid;		
		background-color: #fff;
		color: #001b37;
		margin-right:8px; 
		padding: 5px 22px 7px 22px;
		font-size: 16px;
		cursor: pointer;
	}

ul.termine-filter li:hover,
ul.termine-filter li.active {
	background-color: #001b37;
	color: #fff;
	border-color: #001b37;
}

ul.termine-filter li:last-child {
	margin-right: 0px;
}

	ul.termine-filter li.allgemeines {border-color: #b2bd66; color: #001b37; background-color: #fff;}
	ul.termine-filter li.unterricht {border-color: #ec6608; color: #001b37; background-color: #fff;}
	ul.termine-filter li.pruefungen {border-color: #e73431; color: #001b37; background-color: #fff;}
	ul.termine-filter li.konzerte {border-color: #ebc400; color: #001b37; background-color: #fff;}
	ul.termine-filter li.vortraege {border-color: #7bafdf; color: #001b37; background-color: #fff;}	
	ul.termine-filter li.fahrten {border-color: #b2bd66; color: #001b37; background-color: #fff;}


	ul.termine-filter li.allgemeines:hover,
	ul.termine-filter li.allgemeines.active {border-color: #ebc400; color: #fff; background-color: #ebc400;}
	ul.termine-filter li.unterricht:hover,
	ul.termine-filter li.unterricht.active {border-color: #ec6608; color: #fff; background-color: #ec6608;}
	ul.termine-filter li.vortraege:hover,
	ul.termine-filter li.vortraege.active {border-color: #7bafdf; color: #fff; background-color: #7bafdf;}
	ul.termine-filter li.konzerte:hover,
	ul.termine-filter li.konzerte.active {border-color: #ebc400; color: #fff; background-color: #ebc400;}
	ul.termine-filter li.fahrten:hover,
	ul.termine-filter li.fahrten.active {border-color: #b2bd66; color: #fff; background-color: #b2bd66;}
	ul.termine-filter li.pruefungen:hover,
	ul.termine-filter li.pruefungen.active {border-color: #e73431; color: #fff; background-color: #e73431;}


.termine-wrapper {
	background-color: #fff;
	font-size: 16px;
	width: calc(100% - 40px);
	margin: 0px auto 0px auto;
	-webkit-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);	
}

	.termine-header {
		background-color: #001b37;
		padding: 10px 0px;
		color: #fff;
		font-size: 18px;
	}

		.termine-header div,
		.termin div {
			float: left;
			padding: 5px 10px;
		}


			.termine-monat {width:18%;}
			.termine-kw {width:7%;}
			.termine-datum {width:15%;}
			.termine-kategorie {width:5%; min-height: 30px;}
			.termine-veranstaltung {width:55%; text-align: left;}

	.termine-kategorie span {width: 99%; margin-top:3px; height: 20px; display: block;}

	.termine-kategorie.allgemeines span {background-color: #efcf31;}
	.termine-kategorie.unterricht span {background-color: #ec6608;}
	.termine-kategorie.pruefungen span {background-color: #e73431;}
	.termine-kategorie.konzerte span {background-color: #ebc400;}
	.termine-kategorie.vortraege span {background-color: #7bafdf;}	
	.termine-kategorie.fahrten span {background-color: #b2bd66;}


	.termine-inner {
		max-height: 420px;
		overflow: auto;
	}

		.termine-inner::-webkit-scrollbar {
			width: 12px;
		}

		.termine-inner::-webkit-scrollbar-track {			
			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
			box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
			border-radius: 10px;
		}

		.termine-inner::-webkit-scrollbar-thumb {
			border-radius: 10px;			
			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
			box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
		}

	.termin {
		width: 100%;
	}

.termin:nth-of-type(even) {
background-color:#ebebeb;
}
    
.termin:nth-of-type(odd) {
background-color:#fff;
}



.counter {
	display: block;
	width:calc(16.665% - 20px);
	margin: 0px 9px;
	float: left;
}

	.counter h3 {
		display: inline-block;
		width: auto;
		margin: 10px auto 10px auto;
		font-size: 30px;
		line-height: 38px;
	}

	.count-text {
		font-size: 19px;
		color: #68738d;
		line-height: 23px;
	}


	.counter .icon-wrapper {
		width: 120px;
		height: 120px;
		border: 2px dotted #001b37;
		border-radius: 120px;
		padding: 7px;
		margin: 0 auto 20px auto;
	}

	.counter .icon-wrapper .icon {
		width: 102px;
		height: 102px;
		border-radius: 102px;
		background-color: #ffffff;
	}



.maria-ward .content {
	width: 95%;
	max-width: 1275px;
	margin: 65px auto;	
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 300;
	font-size: 15px;
	line-height: 22px;	
}

	.maria-ward .content p {
		margin:0px auto 40px auto;
	}





.intro {
	font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 300;
	margin: 65px auto;
	padding-bottom: 40px;
	border-bottom: dotted 4px #001b36;
}

	.content .intro p {
		padding: 0px 30px;
		font-size: 20px;
		line-height: 28px;
		text-align: center;
	}


.nav-tabs {
    border-bottom: 0px solid #ddd;
}


.leitbild-reiter {margin-bottom:50px;}

ul.reiter-nav {
	padding:0px;
	margin: 0px auto 60px auto;
	list-style: none;
}

	ul.reiter-nav li {
		display: inline-block;
		margin: 0px 10px 25px 10px;
		font-family: 'Roboto Slab';
		font-size: 20px;
		}	

	ul.reiter-nav li a {
		font-weight: 300;
	}

	ul.reiter-nav li img {
		width: 83px;
		height: auto;
		margin-bottom: 10px;
		opacity: 0.4;
	}

		ul.reiter-nav li.active img,
		ul.reiter-nav li a:hover img,
		ul.reiter-nav li a:hover,
		ul.reiter-nav li.active a:hover {
			opacity: 1;
		}

	ul.reiter-nav li span {
		display: block;
	}



.tab-content {
	max-width: 1110px;
	margin: 0px auto;
}

.tab-pane {
	padding-bottom: 20px;
}

	.leitbild-reiter .tab-content {background-color: #f5e3d4;}


	.tab-pane img {
		width: 295px;
		height: auto;
		float: left;
		margin-right: 0px;
	}

	.tab-pane img.alignleft {
		float: left;
		margin-right: 35px;
	}

	.tab-pane img.alignright {
		float: right;
		margin-left: 35px;
		margin-right: 5px;
	}

	.tap-pane-intro {
		float: left;	
		width: calc(100% - 330px);
		text-align: left;
		margin-left: 30px;
	}

	.tap-pane-intro h3 {
		font-family: 'Roboto Slab';
		font-size: 35px;
		font-weight: 300;
		margin-top: 60px;
		letter-spacing: 2px;
		margin-right: 30px;
	}

	.tap-pane-intro h4 {
		font-family: 'Roboto Slab';
		font-size: 20px;
		font-weight: 400;
		margin: 15px 0px 30px 0px;
		letter-spacing: 1px;
		margin-right: 30px;
	}

	.content .tap-pane-intro p {
		font-family: 'Roboto Slab';
		font-size: 17px;
		line-height: 24px;
		font-weight: 300;
		margin: 10px 30px 20px 0px;
		letter-spacing: 1px;
		padding: 0px;
	}

	.tab-pane-content {
		margin: 0px 30px;
		background-color: #fff;
		padding: 20px 20px;
		text-align: left;
	}

		.tab-pane-content ul {
			padding-left: 25px;			
			margin-bottom: 40px;
		}

			.tab-pane-content ul li {
				font-size: 16px;
				line-height: 22px;
				margin-bottom: 10px;
			}

	p.zusatzinfo {
		font-family: 'Roboto Slab';
		font-size: 15px;
		line-height: 22px;
		font-weight: 300;
		margin: 50px auto 50px auto;
		padding: 0px 20px;
		text-align: left;
		max-width: 1110px;
	}



.balken {
	max-width: 1000px;
	margin: 0px auto 80px auto;
	text-align: left;
}

	.balken-header {
		background-color: #001b37;
		padding: 1px 30px 50px 30px;
		position: relative;
	}


.downloads .balken {
    max-width: 1000px;
    margin: 0px auto 40px auto;
    text-align: left;
}

.content p {
    max-width: 1000px;
    margin: 0px auto 10px auto;
    text-align: left;
	padding: 0px 20px 0px 20px;
}

	.downloads .balken-header {
		padding: 1px 20px 15px 20px;
	}

	.downloads .balken-header h2 {
		margin: 20px auto 5px auto;
		font-size: 25px;
		line-height: 35px;
	}

	.downloads .balken button {
		bottom: 15px;
		right: 10px;
	}

	.downloads .balken-body {
		background-color: #eee;
		padding: 20px 0px 15px 20px;		
	}

	.downloads .balken-body ul li {
		padding: 5px 0px;
	}

		.downloads .balken-body ul li ul {
			margin-bottom: 7px;
		}

	.downloads .balken-body p {
		margin-bottom: 15px;
		margin-top: 15px;
	}

	.downloads .balken-body li p {
		margin-bottom: 0px;
		margin-top: 0px;
	}



	.balken-header h2 {
		color: #fff;
		text-align: left;
		letter-spacing: 1px;
		margin-bottom: 25px;
	}

	.balken-header p {
		color: #fff;
		padding: 0px;
	}

	.balken-header img {
		max-width: 159px;
		float: left;
		margin: 40px 40px 30px 0px;
	}


	.balken button {
		position: absolute;
		bottom: 10px;
		right: 10px;
		color: #fff;
		font-weight: 600;
	}

		.balken button span {
			width: 30px;
			height: 30px;
			background-color: #fff;
			color: #001b37;
			-webkit-border-radius: 27px;
			-moz-border-radius: 27px;
			border-radius: 27px;
			display: inline-block;
			font-size: 30px;
			line-height: 22px;
			margin-left: 8px;
			position: relative;
		}


		.balken button[aria-expanded="false"] span:after{
			content:"+";
		}

		.balken button[aria-expanded="true"] span:after{
			content:"-";
		}



	.balken button:hover {
		color: #5f7892;
		background-color: transparent;
	}

	.balken button:hover span {
		background-color: #44617f;
		color: #fff;
	}


	.balken-body {
		padding: 20px 0px 0px 0px;
	}

		.balken-body h3 {
			font-size: 22px;
			margin-top: 20px;
			margin-bottom: 10px;
			font-weight: 600;
		}

		.balken-body p {
			margin-bottom: 25px;
		}

		.balken-body img.alignright {
			width: auto;
			float: right;
			margin:10px 0px 20px 20px;
		}

		.balken-body img.alignleft {
			width: auto;
			float: left;
			margin:10px 20px 20px 0px;
		}

		.balken-body a {
			color: #001b37;
			display: inline-block;
			margin-left: 5px;
		}




.timeline-wrapper {
	background-color: #e3e4eb;
	margin-bottom: 120px;
	padding: 105px 0px 75px 0px;
}

	.outer-wrapper-timeline {
		background-color: #ccceda;
		padding: 50px 30px 40px 30px;
		max-width: 1360px;
		margin: 0px auto;
	}

	.timeline-nav-button--prev {
		left: 3px;
	}

	.timeline-nav-button--next {
		right: 3px;
	}

	.timeline-nav-button:disabled {
		opacity: 0.5;
		pointer-events: none;
	}

	.timeline-nav-button {
		background-color: #001b36;
		border: 2px solid #fff;
	}

	.timeline-nav-button--prev::before {
		background-image: url(img/timeline-prev.gif);
		background-position: -2px -1px !important;
	}

	.timeline-nav-button--next::before {
		background-image: url(img/timeline-next.gif);
	}

	.timeline-nav-button::before {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 19px 26px;
		content: '';
		display: block;
		height: 23px;
		left: 50%;
		position: absolute;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		top: 50%;
		width: 19px;
	}

	.timeline--horizontal .timeline__item {
		padding: 0px!important;
	}

	.timeline--horizontal .timeline-divider {
		background-color: #001b36;
	}

	.timeline__content {
		background-color: transparent;
		border-right: 3px solid #001b36;
		border-top: 1px dotted #001b36;
		border-left: 0px;
		border-bottom: 1px dotted #001b36;
		border-radius: 0px;
		color: #333;
		display: block;
		padding: 1.25rem;
		position: relative;
		margin-right: 12px;
	}

	.timeline--horizontal .timeline__item--top.timeline__item::after {
		right: -6px;
		left: auto;
		top: 100%;
	}
	.timeline--horizontal .timeline__item--bottom.timeline__item::after {
		right: -7px;
		left: auto;
		top: 0px;
	}


	.timeline--horizontal .timeline__item--bottom {
		padding: 0px;
	}

	.timeline__content h2 {
		font-size: 1.25rem;
		font-weight: 700;
		margin: 0 0 .625rem;
		text-align: right;
		color: #001b36;
	}

	.timeline__item::after {
		background-color: #fff;
		border: 4px solid #001b36;
		border-radius: 50%;
		right: -10px;
	}

	.timeline--horizontal .timeline__item .timeline__content::before,
	.timeline--horizontal .timeline__item .timeline__content::after {
		border-left: 0px solid transparent;
		border-right: 0px solid transparent;
		border-top: 0px solid #ccc;
	}


	.timeline img {
		float: left;
		margin-right: 10px;
		max-width: 100px;
		margin-top: -20px;
	}

		.timeline__content p {
			font-size: 13px;
			line-height: 18px;
			margin-bottom: 5px;
			text-align: right;
		}


	.timeline-nav-button {
		background-color: #001b36;
		border: 0px solid #ddd;
		border-radius: 37px;
		height: 37px;
		width: 37px;
	}



.gremien {
	max-width: 1270px;
	margin: 0px auto 70px auto;
}
	
	.gremien .col50,
	.gremien .col33 {
		margin-bottom: 10px;
		height: 165px;
	}

	.schulleitung {background-color:#d3d5e0;}
	.kollegium {background-color:#aeb2c4;}
	.elternbeirat {background-color:#828aa2;}
	.foerderverein {background-color:#5c6883;}
	.ehemalige {background-color:#394a67;}
	.sekretariat {background-color:#202f48;}

	.gremien a {
		height: 100%;
		width: 100%;
		font-weight: bold;
		position: relative;
		padding-left: 125px;
		font-size: 20px;
		display: flex;
		justify-content: center;
		align-items: center;				
	}

	.gremien div a:before {content: ''; width: 105px; height: 105px; display: block; position: absolute; left: 20px; top:50%; margin-top:-52px;}

	.gremien .schulleitung a:before {background-image: url("img/icon-gremien1.gif");}
	.gremien .kollegium a:before {background-image: url("img/icon-gremien2.gif");}
	.gremien .elternbeirat a:before {background-image: url("img/icon-gremien3.gif");}
	.gremien .foerderverein a:before {background-image: url("img/icon-gremien4.gif");}
	.gremien .ehemalige a:before {background-image: url("img/icon-gremien5.gif");}
	.gremien .sekretariat a:before {background-image: url("img/icon-gremien6.gif");}


	.gremien .col50 a {
		color: #001b37;
	}

	.gremien .col33 a {
		color: #fff;
	}

	.gremien-detail {
		margin: 45px auto;
		padding-bottom: 40px;
	}
	
	.gremien-detail img.icon {
		max-width: 105px;
		margin-bottom:40px;
	}

.gremien-detail input {
	width: 100%;
	padding: 10px 20px;
	font-weight: bold;
}


.lehrerliste {
	margin: 25px 0px 65px 0px;
	overflow: hidden;
}

.lehrerliste .col25 {
	margin-right: 0px;
	width:25%;
	min-height: 435px;
}

.lehrerliste .lehrer-inner {
	width:calc(100% - 10px);
	background-color: #f5e3d4;
	padding: 20px;
	border-bottom:10px solid #fff;
	position: absolute;
	height:100%;
}

	.lehrerliste .img-wrap {
		border-bottom: 2px solid #fff;
		background-color: #b5b8bd;
		margin: -20px -20px 0px -20px;
		width: calc(100% + 40px);
	}

		.img-wrap img {
			max-width: 212px;
		}

		.lehrer-inner .img-wrap img {
			max-width:none;
		}

	span.lehrer-name,
	span.lehrer-info {display:block; text-align: left;}

	span.lehrer-name {
		text-transform: uppercase;
		font-weight: bold;
		margin:25px 0px 15px 0px;
	}

	span.lehrer-info p {
		margin: 0px;
		padding: 0px;
	}

	span.lehrer-info a {
		display: block;
		margin: 10px 0px 0px 0px;
	}


ul.filter-wrap {
	margin: 0px;
	padding: 0px;
}

ul.filter-wrap li {
	display: block;
	transition-duration: 0.5s;
	position: relative;
	z-index: 1000;
	border:1px solid #001b37;
	background-color: #fff;
	padding: 10px;
}

	ul.filter-wrap li:hover {
		cursor: pointer;
		background-color: #001b37;
		color: #fff;
		
	}

	ul.filter-wrap li ul {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		transition: all 0.5s ease;
		margin: 0px;
		padding: 0px;
		left: 0;
		top: 43px;
		display: none;
		text-align: center;
		width: 100%;
		z-index: 1001;
		border-left:1px solid #001b37;
		border-right:1px solid #001b37;
		border-bottom:1px solid #001b37;
	}

	ul.filter-wrap li.dropdown-active > ul,
	ul.filter-wrap li.dropdown-active ul {
		visibility: visible;
		opacity: 1;
		display: block;
	}

	ul.filter-wrap li ul li {
		clear: both;
		width: 100%;
		text-align: center;
		border:0px solid #001b37;
		color: #001b37;
		cursor: pointer;
	}


.wpcf7-form {
	max-width: 400px;
	margin: 80px auto 50px auto;
	text-align: left;
}

.wpcf7-form label {
	width:100%;
}

	.wpcf7-form input,
	.wpcf7-form textarea {
		width: 100%;
		margin-right: 0px;
		border:1px solid #001b37;
		text-align: left;
		font-weight: 300;
	}

#wpcf7-f2583-p2573-o1 .wpcf7-form input[type="submit"] {
    margin-top: 0px;
}


footer {
	background-color: #001b37;
	padding: 30px 0px;
	width:100%;
	color: #99a4af;
}

footer h2 {
	color: #fff;
}

	footer ul {
		list-style: none;
		font-size:14px;
		margin:20px 0px 0px 0px;
		padding: 0px;
	}

	footer ul li {
		display: inline-block;
		margin:0px 20px 0px 0px;
	}

	footer ul li a {
		font-size: 18px;
		text-transform: uppercase;
		color: #fff;
	}

footer .col25 {
	width: 25%;
	float: left;
	text-align: left;
}

footer .col30 {
	width: 30%;
	float: left;
	text-align: left;
}

footer .col30:first-child {
	text-align: center;
}

footer .col40 {
	width: 40%;
	float: left;
	text-align: left;	
}

footer p a img {
	margin:20px 20px 0px 0px;
}

	footer p a:hover img {
		opacity: 0.8;
	}

.footer-image {
    width: 70%;
    max-width: 221px;
    margin: -70px auto 0px auto;
}

.footer-image2 {
    width: 70%;
    max-width: 221px;
    margin: 10px auto 0px auto;
}