@import url('genericons/genericons.css');

@media screen {

        html {
                background-color: white;
        }
        *, html {
                margin:0;
                padding:0;
        }
        body {
                max-width: 980px;
		margin: auto;
                color: black;
                font-size: 1em;
		font-family: 'Exo 2', sans-serif;
                line-height: 1.5;
/*                width: 90%;*/
/*		padding: 0 1em 0 1em;		*/
/*                margin: auto;	
		background-color: #f1f1f1; */
        }
	
       img {
                max-width: 100%;
                height: auto;
        }

        ul li {
                list-style-type: none;
        }

        ol li {
                margin-left: 2em;
        }

        -moz-hyphens: auto;
        -o-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
	
	/*
                Micro-Clearfix-Hack
                nicolasgallagher.com/micro-clearfix-hack/
        */
        .cf:before, .cf:after { content: " "; display: table; }
        .cf:after, .clear { clear: both; }

        a:link { font-weight: bold; color: #a20000; text-decoration: none;}
        a:visited { font-weight: bold; color: #a20000; text-decoration: none; }
        a:hover { font-weight: bold; color: black; text-decoration: none; }
        a:active { font-weight: bold; color: black; text-decoration: none; }
        a:focus { border: 1px solid #a20000; }

	h1 {
                font-size: 1.3em;
                color: #a20000;
                font-weight: bold;
		padding-top: 1em;
        }

        h2 {
                font-size: 1.1em;
                padding-top: 1em;
                padding-bottom: 1em;
        }

        h3 {
                font-size: 1.0em;
                padding-bottom: 0.5em;
		padding-top: 1em;
        }

        p {
                padding-bottom: 0.5em;
        }

	#slider {
		height: 420px;
		overflow: hidden;
                width: 99.5%;
                position: relative;
                margin-top: 1em;
		border: 0.5px solid #a20000;
		border-top: 5px solid #a20000;
/*		border-bottom: 5px solid #a20000;*/
        }

	.slide {
                position: absolute;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
        }

        .slide img {
                min-height: 420px !important;
                min-width: 980px !important;
                overflow: hidden;
        }

	#slider-points {
                position: absolute;
                bottom: 1em;
                right: 0.2em;
                height: 1em;
                width: 7em;
                display: block;
        }

        .slider-point {
                box-sizing:border-box;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
                height: 1em;
                width: 1em;
                display: block;
                float: left;
                margin-left: 0.5em;
                cursor: pointer;
		background: #a20000;
        }
	
	div.bubble {
		color: #ffffff;
		background-color: #a20000;
		position: absolute;
		bottom: -1px;
		left: 0;
		height: 3em;
		width: 80%;
		padding: 0.5em 1em;
		z-index: 1000;
		font-weight: bold;
	}
	
	.skip {
                position:absolute;
                top:0;
                left:-9999px;
        }

        .askip {
                position:absolute;
                top:0;
                left:-9999px;
        }

        .skip .askip:focus, .skip .askip:active {
                width: 130px;
                position: absolute;
                left: 9999px;
                margin-left: 600px;
                padding: 5px 5px 5px 15px;
                border: 1px solid #0069b4;
                border-radius: 0.5em;
        }

	
	header {
		padding: 0;
		margin: 0;
/*		border-top: 2px groove #a20000;*/
                border-bottom: 2px groove #a20000;		
		height: 6em;		
	}

	header.home {
		height: 1.5em;
		border-bottom: none;
	}	
	
	header figure {
		float: left;
		margin-left: -1.5em;
	}

	header nav > ul {
		float: right;
		margin: 0;
		padding: 0;
	} 
	
	header nav#sprachschalter > ul {
		margin-top: -3em;
		margin-right: -1em;
	}
	
	header.home nav#sprachschalter > ul {
		margin: 0;
		padding: 0;
		
	}
	
	header.home nav#sprachschalter figure {
		margin-top: 0;
		margin-bottom: -1em;
	}	

	header nav#sprachschalter > ul li {
		margin: 0;
		float: left;
	}
	
	header nav#sprachschalter figure {
		margin-left: 0.5em;		
	}
	
	header nav#sprachschalter figure img.current_lang {
		border-bottom: 1px solid #a20000;
	}	

	header nav#navigation > ul > li {
		float: right;
		font-size: 1.1em;
		font-weight: bold;
		padding-top: 0.5em;
		padding-left: 1em;
	}

	header nav#navigation > ul > li:after {
		content: "|";
		padding-left: 1em;
		color: #a20000;
	}
	
/*	header nav#navigation > ul > li:last-child:after {
		content: "";
	}*/
	
	header nav#navigation > ul > li a.current-parent {
		border-top: 2px solid #a20000;
		padding-top: 0.25em;
		color: #474747;
		background-color: white;
	}
	
	header nav#navigation > ul > li > ul {
		min-width: 20%;
		background-color: rgba(162,0,0,1);
		position: absolute;
		margin-left: -99999px;
		border-radius: 0.25em;
		padding: 0.5em;
		line-height: 1.8em;
		font-size: 0.9em;		
	}
	
        header nav#navigation > ul > li:hover > ul,
        header nav#navigation > ul > li:focus > ul,
        header nav#navigation > ul > li:active > ul,
        header nav#navigation > ul > li.current > ul {
                margin-left: 0;
                z-index: 2000;
        }

	header nav#navigation > ul > li > ul > li a:link,
	header nav#navigation > ul > li > ul > li a  {
                color: white !important;
        }

	header nav#navigation > ul > li > ul > li a:hover,
        header nav#navigation > ul > li > ul > li a:active,
        header nav#navigation > ul > li > ul > li a.current-parent  {
                background-color: #7F7F7F !important;
		color: white !important;
		padding: 0.2em;
        }
	
	header nav#navigation > ul > li a.current-parent  {
		background-color: #a20000;
		color: white !important;
		padding: 0.5em;
		border-radius: 0.25em;
	}

	main {
		padding: 1em 1em 2em 1em;		
	}

	main.start {
		padding-top: 0;
		margin-top: 0;
	}
	
	main ul.startseite {
                margin: 0;
                padding: 0;
		margin-top: 0.5em;
/*	        margin-left: 0.5em;
                width: 31.5%;
                float: left;
                min-height: 12em;	
		position: relative;
		border: 0.5px solid #a20000;
		border-top: 5px solid #a20000;*/
        }
	
	main ul.startseite li {
		padding: 0;
		margin: 0;
		float: left;
		list-style-type: none;
		margin-right: 1.2em;
                width: 31.7%;
                min-height: 12em;
                position: relative;
                border: 0.5px solid #a20000;
                border-top: 5px solid #a20000;		
	}
	
	main ul.startseite li:last-child {
		margin-right: 0;
	}
	
	main ul.startseite figure {
                margin: 0;
                padding:0;
                width: 100%;
                position: absolute;
		bottom: 1em;
		left: 0;
		text-align: center;
        }
	
	main ul.startseite figure figcaption.startseite_button {
                position: absolute;
                bottom: -1em;
                width: 100%;
                background-color: #a20000;
                font-size: 1.0em;
                font-weight: bold;
                color: white;
		padding: 0.5em 0 0.5em 0;
                text-align: center;
        }
	
	main nav.breadcrumb ul {	
		margin: 0;
		padding: 0;
		margin-top: -1em;
		font-size: 0.7em;
		text-transform: uppercase;
	}

	main nav.breadcrumb ul li {
		float: left;
		list-style-type: none;
		margin-left: 0;
		padding-right: 1em;
	}
	
	main nav.breadcrumb ul li:after {
		content: " | ";
		color: #a20000;
		font-weight: bold;
		padding-left: 1em;
	}
	
	main nav.breadcrumb ul li a.aktuell {
		text-decoration: underline;
	}
	
	main nav.breadcrumb ul li:last-child:after {
		content: "";
	}
	
	
	main ul {
		padding-bottom: 0.5em;
	}	

	main ul li {
		list-style-type: disc;
		margin-left: 2em;
	}
	
	main #iframepdf {
		width: 100%;
		height: 40em;		
	}
	
	main div.partner {
                float: left;
            	min-width: 24em;
                height: 16em;
                margin-left: 3em;
		margin-right: 2em;
        }

        main div.partner .fahne {
                float: left;
                width: 5em;
        }

        main div.partner .land {
                text-transform: uppercase;
                padding-top: 0.25em;
                padding-left: 3em;
        }

	main div.partner .partner_logo {
                padding-left: 2em;
                padding-top: 1em;
        }

	main article.event {
		margin-top: 1.5em;
	}

	main article.event figure {
		float: left;
	}

	main .div_if_half {
                float: left;
                width: 44%;
                margin-bottom: 2em;
                padding-right: 2em;
                padding-left: 1em;
        }

        main .iframepdf {
                width: 100%;
                height: 32em;
        }

        main .iframepdf_half {
                float: left;
                width: 100%;
                height: 25em;
        }
	
	main div.schalter {
                width: 180px;
                height: 170px;
                border: 1px #a20000 groove;
                margin: 0 1em 5em 1.75em;
                text-align: center;
                float: left;
        }

	main div.schalter figure {
                margin-left: 0.75em;
                width: 150px;
                height: 150px;		
        }

        main div.schalter div.ws {
                position: absolute;
                bottom: 0;
                left: 0.2em;
                padding: 0 0.3em 0.5em 0.3em;
                text-align: center;
        }
	
	main div.schalter div {
		padding-top: 0.5em;
	}	
	
	main div.schalter a {
		display: block;
	}

	main div.schalter div.long {
                margin-top: -2em;
        }
	
	main article.form_contact > form {
                font-size: 0.9em;
                padding: 0.5em;
                margin-bottom: 1em;
        }

        main article.form_contact label {
                float: left;
                min-width: 9.5em;
                font-weight: bold;
                margin-bottom: 1em;
        }

        main article.form_contact input {
                width: 25em;
		padding-left: 0.5em;
        }

        main article.form_contact textarea {
                width: 25em;
		padding-left: 0.5em;
        }

        main article.form_contact input[type="submit"] {
                width: 10em;
                margin-left: 7em;
                margin-top: 2em;
		font-weight: bold;
        }

	main article.form_contact input[type="checkbox"] {
		width: 1em;	
	}	

	main iframe.game {
		border: none;
		width: 100%;
		height: 32em;
		background-color: white;	
	}

	main article.quiz h2,
	main article.quiz div.quiz {
		width: 480px;
		margin:auto;
	}
	
	main article.quiz a {
		display: block;
	}
	
	main article.quiz figure {
		padding-left: 1em;
	}
	
	main article.quiz div.quiz p {
		padding-top: 1em;
		padding-bottom: 2em;
	}
	
	main article.quiz div.answer {
		width: 480px;
		max-height: 45px;
		text-align: center;
		background-color: #a20000;
		color: white;
		font-weight: bold;
		border-radius: 0.5em;
		padding: 0.5em;
	}
	
	main article.quiz a.genericon-next {
		content: '\f429';
		font-size: 76px;
		color: #a20000;
		margin-left: 2em;
	}
	
	main article.quiz a.genericon-previous {
                content: '\f430';
                font-size: 76px;
                color: #a20000;
                margin-left: 0.5em;
		float: left;
        }
	
	main article.quiz p.right_answer {
		color: #a20000;
		font-size: 1.2em;
		font-weight: bold;
	}

	main article.quiz div.again {
		width: 12em;
		height: 2em;
		background-color: #a20000;
		color: white;
		font-weight: bold;
		border-radius: 0.5em;
		text-align: center;
		padding: 1em 0.5em 0.5em 0.5em;
		margin-left: 5em;		
	}
	
	main div.button {
		margin: 0;
		padding: 0;
		margin-top: 0.5em;
		width: 280px;	
		height: 200px;
		border: 0.5px solid #a20000;
		border-top: 5px solid #a20000;
		float: left;
		/*padding: 1em 1em 1em 1.7em;
		text-align: center;*/
		position: relative;
		margin-left: 1.5em;
		margin-bottom: 1em;
	}
	
	main div.button figure {
		width: 100%;
		position: absolute;
		bottom: 1em;
		left: 0;
		text-align: center;
	}
	
	main div.button div {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #a20000;
		font-size: 1.0em;
		font-weight: bold;
		color: white;
		padding: 0.5em 0;
		text-align: center;
	}	
	
	div.middle {
		text-align: center;
	}
	
	.float_left {
		float: left;
		padding-right: 2em;
		padding-bottom: 0.5em;
	}

	.float_right {
                float: right;
		padding-left: 1em;
		padding-bottom: 0.5em;
        }


	nav.footerzeile ul {
		float: right;
	}

        nav.footerzeile > ul > li {
                display: inline-block;
                font-size: 0.9em;
        }

	nav.footerzeile ul li:after {
                content: " | ";
                color: #a20000;
        }

        nav.footerzeile ul li:last-child:after {
                content: "";
        }
	
	.footerrand {
		border-bottom: 2px groove #a20000;
	}

	footer figure {
		height: 11em;
		float: right;
		margin-right: -1.2em;
	}
	
	footer figure > img {
/*		padding-top: 1em;*/
	}
	
	footer div.footer_text > p {		
/*		text-align: center;*/
		padding-top: 1em;
/*		color: #606060;*/
		font-size: 0.9em;
	}
	
	form.create_quiz textarea {
		width: 40em;
		height: 7em;
		margin-bottom: 1em;
	}
	
	form.create_quiz input[type='button'] {
		width: 10em;
	}
	
	form.create_quiz input[type='button'].question {
		margin-left: 5em;
		margin-top: 2em;
	}
	
	form.create_quiz input[type='button'].answer {
		margin-left: 2em;
	}
	
	form.create_quiz textarea.answer {
		float: left;
	}
	
	form.create_quiz input[type='text'] {
		width: 40em;
	}
	
	/* Online search */
	
	h2.onlinesearch {
		padding-top: 0;
		margin-top: 0;
	}
	
	article.big p {
		font-size: 1.2em;
		font-weight: bold;
		margin-bottom: 1em;
	}
	
	a.big {
		font-size: 1.2em;
	}
	
	article.onlinesearch form#senden {
		margin-top: 2em;
		display: block;
	}
	
	figure.image200 img {
		min-height: 460px;
	}
	
	figure.image650 {
		margin-bottom: 1em;
	}

        form#formular .control-label {
                display: block;
		font-weight: bold;
        }
	
	form#formular input[type="text"] {
		width: 33em;
		margin-bottom: 1em;
	}
	
	form#formular textarea {
		width: 33em;
		height: 6em;
		margin-bottom: 1em;
	}
	
	form#formular div.radio-group {
		padding-bottom: 1em;
	}	

	form#formular div.radio-group label.control-label  {
		padding-bottom: 1em;
	}
	
	form#formular div.radio {
		padding-left: 1em;
		font-weight: bold;
	}
	
	form#formular div.checkbox label {
		float: none;
		min-width: 3em;
		padding: 0;
		margin: 0;
	}
	
	form#formular div#yform-formular-privacy_policy_accepted input {
		width: 1.5em;
	}

	form#formular button[type="submit"] {
		margin-left: 10em;
		margin-top: 1em;
		width: 10em;
		font-weight: bold;
	}
	
	form#senden input[type="email"] {
		width: 14em;
		margin-left: 1em;
	}	

	form#senden input[type="submit"] {
		width: 18em;
		font-weight: bold;
		margin-left: 1em;
	}
	
	article.onlinesearch input[type="button"] {
		width: 15em;
		margin-top: 1em;	
	}
	
	div.form-captcha img {
		margin-top: 1em;
		padding-right: 1em;	
	}
	
	div.form-captcha span.input-group-btn {
		float: none;
		display: block;
	}
	
	form#formular div.form-captcha input {
		width: 10em;
	}	
	
	article.guestbook button {
		width: 15em;
	}	
	
	article.guestbook div.guestbook-page > div {
		margin-top: 1em;
	}
}

@media screen and (max-width:1024px) {
	
	header {
		height: 8em;
	}
	
	header figure {
		margin: 0;
		padding: 0;
	}
	
	header nav#navigation > ul > li {
		float: none;
		margin-bottom: 0.5em;
		padding: 0;
		padding-right: 1em;
	}        
	
	header nav#navigation > ul > li:last-child {
		margin-bottom: -1em;	
	}
	
	header nav#navigation > ul > li:after {
                content: none;
		padding-left: 0;
	}

	header nav#sprachschalter > ul {
                float: none;
		margin-top: 0.5em;
		margin-right: 0;
		margin-left: 0.5em;
        }
		

	#slider {
		width: 98.5%;
	}
	
	main ul.startseite li {
		margin-right: 0.75em;
	}
	
	main ul.startseite li:last-child {
		margin-right: 0;
	}
	
	main div.partner {
		min-width: 12em;
		margin-right: 2em;
		margin-left: 1.5em;
	}

	main div.partner div.logo {
		width: 250px;
	}

	footer figure {
		float: none;
		height: 6em;
	}
	
	footer div.footer_text > p {
		padding: 1em;
	}
	
	nav.footerzeile ul {
		padding-right: 0.5em;
	}
}

@media screen and (max-width: 800px) {
	
	main ul.startseite li {
                margin-right: 0.6em;
        }
	
	main div.partner {
                min-width: 8em;
                margin-right: 1em;
                margin-left: 1em;
        }

        main div.partner div.logo {
                width: 180px;
        }

	.float_left,
	.float_right {
		float: none;
	}
	
	form#formular button[type="submit"] {
		margin-left: 5em;
	}
	
	form#formular input {
                width: 100%;
	}
	
	form#formular textarea {
                width: 100%;
        }
	
	form#formular input[type="text"] {
                width: 100%;
        }

}

@media screen and (max-width: 630px) {

	main ul.startseite li {
		float: none;
		width: 98.5%;
		margin-bottom: 1em;
	}	
	
	header nav#navigation > ul > li {
		font-size: 0.9em;
		margin-top: 0.5em;
	}
	
	header nav#sprachschalter > ul {
		margin-top: 1em;
		margin-left: 0;
	}
	
	header nav#sprachschalter figure {
                margin-left: 0.5em;
		width: 26px;
        }
	
	header {
		height: 7em;
	}
	
	header > figure {
		width: 130px;
		margin: 0.5em 0 0 0;
		padding: 0;
	}
	
/*	.yform {
		display: block;
		margin-left: 1em;
	}
	
	.form-group {
		display: block;
	}
	
	.control-label {
                display: block;
	}
	
	.form-control {
                display: block;
		margin-bottom: 1em;
	}
	
	#yform-formular-field-9-abschicken {
		margin-left: 2em;
	}*/
	
	form#senden input[type="email"] {
		display: block;
		margin-left: 0;
		margin-bottom: 1em;	
	}
	
	form#senden input[type="submit"] {
		margin-left: 0;
	}
	
	article.onlinesearch input[type="button"] {
		margin-bottom: 2em;
	}	
	
}	

@media screen and (max-width: 520px) {
	
	 main div.partner {
                min-width: 12em;
                margin-right: 2em;
                margin-left: 2em;
        }

        main div.partner div.logo {
                width: 350px;
        }
	
	main article.quiz div.quiz {
                width: 240px;	
	}
	
	main article.quiz div.answer {
                width: 240px;
	}
	
	main article.quiz a.genericon-next {
        	margin-left: 1em;
        }

	main article.quiz div.again {
                margin-left: 2em;
        }

}