/* Textlinks */
a:link, a:visited {
         font-size: 1.0em;
         color: #0276b0;
         font-weight: bold;
         text-decoration: none;
}
a:hover {
	color: #000000;
         text-decoration: none;
}

a.button:link, a.button:visited {
	display: inline-block;

	background: #0681bc; /* Old browsers */
	background: -moz-linear-gradient(top,  #0681bc 0%, #42b5ec 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #0681bc 0%,#42b5ec 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #0681bc 0%,#42b5ec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0681bc', endColorstr='#42b5ec',GradientType=0 ); /* IE6-9 */

         -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

         margin: 10px 0px;
         padding: 5px 15px;

         font-size: 1.6em;
         color: #FFFFFF;
         border-bottom: 0px #FFFFFF solid;
         text-shadow: #01669c 1px 1px 1px;
}

a.button:hover {
         background: #42b5ec; /* Old browsers */
         background: -moz-linear-gradient(top,  #42b5ec 0%, #0681bc 100%); /* FF3.6-15 */
         background: -webkit-linear-gradient(top,  #42b5ec 0%,#0681bc 100%); /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(to bottom,  #42b5ec 0%,#0681bc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42b5ec', endColorstr='#0681bc',GradientType=0 ); /* IE6-9 */
}

a.button.grey:link, a.button.grey:visited {
	display: inline-block;

	background: #e8e8e8; /* Old browsers */
	background: -moz-linear-gradient(top,  #e5e5e5 0%, #f4f4f4 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #e5e5e5 0%,#f4f4f4 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #e5e5e5 0%,#f4f4f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */

         -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

         margin: 10px 0px;
         padding: 5px 15px;

         font-size: 1.6em;
         color: #3F3F3F;
         border-bottom: 1px #e8e8e8 solid;
         text-shadow: #FFFFFF 1px 1px 1px;
}

a.button.grey:hover {
	background: #e8e8e8; /* Old browsers */
	background: -moz-linear-gradient(top,  #BFBFBF 0%, #6F6F6F 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #BFBFBF 0%,#6F6F6F 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #BFBFBF 0%,#6F6F6F 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BFBFBF', endColorstr='#6F6F6F',GradientType=0 ); /* IE6-9 */
         color: #FFFFFF;
         border-bottom: 1px #FFFFFF solid;
         text-shadow: #4F4F4F 1px 1px 1px;
}

/* Allgemein */
body {
	background:#FFFFFF url(../images/bg.jpg) top center repeat-x;
         background-size: 100% 100%;
         margin: 0px;
         padding: 0px;

         font-family: 'PT Sans', sans-serif;
         font-size: 1.0em;
         color: #000000;
         font-weight: normal;
}

.clear 	{ clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }
img 	{ border:0px; }
.links 	{ float: left; }
.rechts 	{ float: right; }
.center 	{ text-align: center; }
.pad	{ padding: 5px 10px; }
.pads	{ padding: 25px 0px; }
.font-big { font-size: 1.1em; }
.font-bigger { font-size: 1.2em; }
.additional-text { display: none; }

img.l { float:left; margin: 0px 15px 5px 0px; }
img.r { float:right; margin: 0px 0px 5px 15px; }

.bg1 	{ background: #FFFFFF; border-bottom: 1px #EFEFEF solid; padding: 8px 5px; }
.bg2 	{ background: #FFFFFF; border-bottom: 1px #EFEFEF solid; padding: 8px 5px; }

/* Überschriften */
h1, h2, h3, h4, h5 {
	font-family: 'Abel', sans-serif;
         background-size: 220px !important;
}

h1 {
   	font-size: 2.0em;
 	color: #2F2F2F;
 	font-weight: bold;
         margin: 0px 0px 0px 0px;
         text-shadow: #FFFFFF 1px 1px 0px;
}

h2 {
   	font-size: 1.8em;
 	color: #0681BD;
 	font-weight: bold;
         margin: 0px 0px 5px 0px;
         text-shadow: #FFFFFF 1px 1px 0px;
}

h3 {
   	font-size: 1.6em;
 	color: #2F2F2F;
 	font-weight: bold;
         margin: 0px 0px 5px 0px;
         text-shadow: #FFFFFF 1px 1px 0px;
}

h3.letter {
         display: inline-block;
         font-size: 1.6em;
 	color: #2F2F2F;
 	font-weight: bold;
         text-align: center;
         margin: 25px 0px 5px 0px;
         padding: 5px 25px;
         text-shadow: #FFFFFF 1px 1px 0px;
         background: #EEEEEE;
         -webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

h4 {
   	font-size: 1.5em;
 	color: #2F2F2F;
 	font-weight: bold;
         margin: 0px 0px 5px 0px;
         text-shadow: #FFFFFF 1px 1px 0px;
}

h5 {
   	font-size: 1.5em;
 	color: #2F2F2F;
 	font-weight: bold;
         margin: 0px 0px 5px 0px;
         text-shadow: #FFFFFF 1px 1px 0px;
}

/* Seitenaufbau */
#wrapper {
	width: 100%;
}

.site {
         margin: 0px auto 0px auto;
         padding: 10px 50px;
         min-width: 850px;
         max-width: 1400px;
}

#headermenu {
         width: 100%;
         min-height: 55px;
         margin-bottom: 0px;

	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 23%, #ececec 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 23%,#ececec 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 23%,#ececec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececec',GradientType=0 ); /* IE6-9 */

         border-bottom: 1px #FFFFFF solid;
         border-top: 2px #DFDFDF solid;
         -webkit-box-shadow: 0px 10px 10px -10px rgba(0, 110, 165, 0.75);
	-moz-box-shadow:    0px 10px 10px -10px rgba(0, 110, 165, 0.75);
	box-shadow:         0px 10px 10px -10px rgba(0, 110, 165, 0.75);
}
#headermenu .menu {
	text-align: center;
}
#headermenu .menu a {
         float: right;
         display: inline-block;
         height: 35px;
         padding: 0px 10px 0px 10px;

         font-family: 'Abel', sans-serif;
         color: #7F7F7F;
         font-size: 1.5em;
         font-weight: normal;
         text-shadow: #FFFFFF 1px 1px 0px;

         -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
#headermenu a:hover { color: #000000; background: #FFFFFF; }

#logo { 	float: left; }
#logo a {
         display: inline-block;
         height: 35px;
         background:transparent url(../images/logo_blue.png) center left no-repeat;
         background-size: 50px;
         padding: 0px 0px 0px 65px;

         font-family: 'Abel', sans-serif;
         color: #000000;
         font-size: 1.8em;
         font-weight: normal;
}
#logo a span {
         font-family: 'Abel', sans-serif;
         color: #3F3F3F;
         font-weight: normal;
}
#logo a:hover { color: #0276b0; background:transparent url(../images/logo_blue.png) center left no-repeat; background-size: 50px; }

#header {
         width: 100%;
         height: 350px;
         -webkit-box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:    inset 0px 10px 10px -10px rgba(0, 0, 0, 0.25);
	box-shadow:         inset 0px 10px 10px -10px rgba(0, 0, 0, 0.25);
         border-top: 2px #014f78 solid;
}
#header.bild1 { background:transparent url(../images/header_01.jpg) top center no-repeat; background-size: cover; }
#header.bild2 { background:transparent url(../images/header_02.jpg) top center no-repeat; background-size: cover; }

#header #teaser {
	margin: 40px 0px 20px 0px;
         min-width: 280px;
         width: 60%;
         border: 0px #000 solid;
         font-family: 'Abel', sans-serif;
}

#header #teaser b {
         padding: 0px 0px 15px 0px;
         color: #000000;
         font-size: 1.7em;
         font-weight: bold;
         text-shadow: #FFFFFF 1px 1px 0px;
}

#header #teaser ul {
	margin: 10px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
}

#header #teaser ul li {
	list-style: none;
	margin: 0px;
         padding: 0px 0px 0px 40px;
         line-height: 40px;
         background:transparent url(../images/dot_black.png) center left no-repeat;
         background-size: 30px;
         color: #5F5F5F;
         font-size: 1.4em;
         font-weight: bold;
         text-shadow: #FFFFFF 1px 1px 0px;
}

#header_fernhochschule {
         width: 100%;
         height: 240px;
         -webkit-box-shadow: inset 0px 10px 10px -10px rgba(0, 110, 165, 0.85);
	-moz-box-shadow:    inset 0px 10px 10px -10px rgba(0, 110, 165, 0.85);
	box-shadow:         inset 0px 10px 10px -10px rgba(0, 110, 165, 0.85);
}

#header_fernhochschule.girl { background:transparent url(../images/bg_girl.png) 70% 0px no-repeat; }
#header_fernhochschule.boy { background:transparent url(../images/bg_boy.png) 70% 0px no-repeat; }

#header_fernhochschule .logo {
         float: left;
         background: #FFFFFF;
         padding: 10px;
         width: 250px;
         margin-top: 15px;
         margin-right: 35px;
         -webkit-box-shadow: 0px 10px 10px -10px rgba(0, 110, 165, 0.85);
	-moz-box-shadow:    0px 10px 10px -10px rgba(0, 110, 165, 0.85);
	box-shadow:         0px 10px 10px -10px rgba(0, 110, 165, 0.85);
}

#vorteile {
         float: left;
         width: 350px;
         margin-top: 15px;
         text-shadow: #01669c 1px 1px 0px;
         font-family: 'Abel', sans-serif;
}

#vorteile b {
	font-size: 1.7em;
	color: #000000;
         font-weight: bold;
         text-shadow: #01669c 0px 0px 0px;
         border-bottom: 2px #000000 dotted;
}
#vorteile ul {
	margin: 10px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
}

#vorteile ul li {
	list-style: none;
	margin: 0px;
         padding: 0px 0px 0px 35px;
         line-height: 32px;
         background:transparent url(../images/dot.png) center left no-repeat;
         background-size: 24px;
         color: #FFFFFF;
         font-size: 1.3em;
         font-weight: bold;
}

#inhalt {
         width: 100%;
         margin: 0px 0px;
         background: #FFFFFF;
}
#inhalt #content {
	float: left;
	width: calc(100% - 350px);
}
#inhalt #formular {
	float: right;
         width: 300px;
         min-height: 350px;
         margin-top: -100px;

         padding: 5px;
         background: #f6f6f8;

         text-align: center;
         -webkit-box-shadow: 0px 10px 10px -10px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 10px 10px -10px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 10px 10px -10px rgba(50, 50, 50, 0.75);
}

#inhalt #beratung-fernschule, #inhalt #kontakt-fernschule {
	float: right;
         width: 300px;
         min-height: 100px;
         margin: 25px 0px 0px 0px;

         padding: 5px;
         background: #E7EEF1;

         text-align: left;
         font-size: 0.8em;
         -webkit-box-shadow: 0px 10px 10px -10px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 10px 10px -10px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 10px 10px -10px rgba(50, 50, 50, 0.75);
         -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#inhalt #beratung-fernschule b, #inhalt #kontakt-fernschule b {
	display: block;
         color: #0681BD;
         text-align: center;
         font-size: 1.3em;
         padding: 5px 0px;
}

#inhalt .info {
	background: #e7eef1;

         -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;

         padding: 10px 20px;
         margin: 10px 0px 25px 0px;

         font-size: 0.8em;
         color: #6F6F6F;
}

#info {
         width: 100%;
         margin: 0px 0px;
         background: #FFFFFF;
}

#infoboxen {
         width: 100%;
         background: #eeeeee;
         padding: 25px 0px 25px 0px;
         margin: 0px;

         -webkit-box-shadow: inset 0px 10px 5px -5px rgba(175, 175, 175, 0.75);
	-moz-box-shadow:    inset 0px 10px 5px -5px rgba(175, 175, 175, 0.75);
	box-shadow:         inset 0px 10px 5px -5px rgba(175, 175, 175, 0.75);

         font-family: 'Abel', sans-serif;
         font-size: 1.0em;
         color: #000000;
         font-weight: normal;
         text-shadow: #FFFFFF 1px 1px 1px;
}

#infoboxen .box {
	float: left;
         width: calc(33.33333% - 20px);
         margin: 0px 0px;
         border: 0px #000 solid;
}
#infoboxen .box:nth-child(3n+2) { margin: 0px 30px 25px 30px; }

#infoboxen .bg {
         background: #f9f9f9;

         -webkit-box-shadow: 0px 10px 10px -10px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 10px 10px -10px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 10px 10px -10px rgba(50, 50, 50, 0.75);

         border: #DFDFDF 0px solid;
         border-bottom: #DFDFDF 3px solid;
}

#infoboxen .box .pad { padding: 5px 15px; }

#infoboxen b {
	font-size: 1.4em;
         padding: 5px 0px;
	display: block;
}

#infoboxen a {
	display: block;
         font-size: 1.0em;
         color: #9F9F9F;

         padding: 7px 0px 8px 0px;
         border-top: #FFFFFF 1px solid;
         border-bottom: #e6e6e6 1px solid;
}
#infoboxen a:first-child { border-top: #FFFFFF 0px solid; }
#infoboxen a:last-child { border-bottom: #e6e6e6 0px solid; }

#infoboxen ul {
	margin: 0px;
         padding: 5px;
}
#infoboxen li {
	list-style: none;
         border-top: #FFFFFF 1px solid;
         border-bottom: #e6e6e6 1px solid;
         padding-right: 120px;
         background-size: 150px;
}
#infoboxen li:first-child { border-top: #FFFFFF 0px solid; }
#infoboxen li:last-child { border-bottom: #e6e6e6 0px solid; }
#infoboxen li a { font-size: 1.1em; border: #e6e6e6 0px solid; padding: 5px 0px; }
#infoboxen li a:hover { color: #5F5F5F; }


/* Sterne */
.stars-0 { background:transparent url(../images/stars0.png) center right no-repeat; }
.stars-1 { background:transparent url(../images/stars1.png) center right no-repeat; }
.stars-2 { background:transparent url(../images/stars2.png) center right no-repeat; }
.stars-3 { background:transparent url(../images/stars3.png) center right no-repeat; }
.stars-4 { background:transparent url(../images/stars4.png) center right no-repeat; }
.stars-5 { background:transparent url(../images/stars5.png) center right no-repeat; }

.vote { float: right; height: 25px; width: 150px; display: block; background-size: 100%; }

/* Footer */
#footer {
         width: 100%;
         background: #0276b0;
         padding: 15px 0px 50px 0px;

         -webkit-box-shadow: inset 0px 10px 5px -5px rgba(0, 70, 110, 0.75);
	-moz-box-shadow:    inset 0px 10px 5px -5px rgba(0, 70, 110, 0.75);
	box-shadow:         inset 0px 10px 5px -5px rgba(0, 70, 110, 0.75);

         font-family: 'Abel', sans-serif;
         font-size: 0.9em;
         color: #FFFFFF;
         font-weight: normal;
         text-shadow: #00476d 1px 1px 1px;
}

#footer .box {
	float: left;
         width: calc(33.33333% - 20px);
         margin: 5px 0px;
}
#footer .box:nth-child(3n+2) { margin: 0px 30px 25px 30px; }

#footer b {
	font-size: 1.2em;
         padding: 5px 0px;
	display: block;
}

#footer a {
	display: block;
         font-size: 1.0em;
         padding: 5px 0px 6px 0px;
         border-top: #1b8ec8 1px solid;
         border-bottom: #006597 1px solid;
         color: #FFFFFF;
}
#footer a:first-child { border-top: #1b8ec8 0px solid; }
#footer a:last-child { border-bottom: #1b8ec8 0px solid; }
#footer .copy { font-size: 0.8em; }
#footer .copy a { display: inline; font-weight: normal; }

/* Startseite */
#startseite {
         width: 100%;
         background: transparent;
         padding: 25px 0px 25px 0px;
         margin: 0px;
}

#startseite .box {
	float: left;
         width: calc(33.33333% - 20px);
         margin: 0px 0px 25px 0px;
         border: 0px #000 solid;
         background: #FFFFFF;

         -webkit-box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.55);
	-moz-box-shadow:    0px 10px 10px -10px rgba(0, 0, 0, 0.55);
	box-shadow:         0px 10px 10px -10px rgba(0, 0, 0, 0.55);

         border: #DFDFDF 0px solid;
         border-bottom: #DFDFDF 3px solid;

         font-size: 1.0em;
         color: #000000;
         font-weight: normal;
         text-shadow: #FFFFFF 1px 1px 1px;
         text-align: center;
}

#startseite .box:nth-child(3n+2) { margin: 0px 30px 25px 30px; }

#startseite .box b {
	display: block;
	font-family: 'Abel', sans-serif;
         font-weight: bold;
         font-size: 1.3em;
         background: #DFDFDF;
         border-top: #FFFFFF 1px solid;
         border-bottom: #CFCFCF 1px solid;
         padding: 10px 0px;
         margin-bottom: 10px;
         height: 22px;
         overflow: hidden;
}

#startseite .box span {
	display: block;
         height: 65px;
         overflow: hidden;
}

#startseite .box a.left { float:left; display: inline-block; width: calc(100% - 100px); padding: 5px 0px; font-size: 1.4em; }
#startseite .box a.right { float:right; display: inline-block; width: 80px; padding: 5px 0px; font-size: 1.4em; }



/* Sonstiges */
#pagebutton {
	z-index: 10;
         bottom: 0;
	position: fixed;
         background: #239cd6;
         padding: 10px 0px 15px 0px;

         width: 100%;

         font-size: 1.2em;
         color: #FFFFFF;
         text-align: center;
         text-shadow: #00476d 1px 1px 1px;
}

#pagebutton a {
	color: #FFFFFF;
}
#pagebutton a span {
	display: inline-block;
         background: #FFFF00;
	color: #000000;
         -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
         padding: 5px 10px;
         text-shadow: #FFFFFF 1px 1px 0px;
}

#pagebutton a span:hover { background: #FFFFFF; }

#testmodus {
	z-index: 15;
         bottom: 0;
	position: fixed;
         background: #000000;
         padding: 10px 0px 15px 0px;

         width: 100%;

         font-size: 0.8em;
         color: #FFFFFF;
         text-align: center;
         text-shadow: #00476d 1px 1px 1px;
}

/* Formulare */
input[type="text"], select, textarea {
 	border: 1px #CFCFCF solid;

 	font-size: 1.0em;
 	color: #000000;

 	padding: 3px 5px 3px 8px;
 	margin: 2px 0px 5px 0px;
         width: 100%;

         background: #FFFFFF;
         -webkit-box-shadow: inset 5px 5px 5px -5px rgba(0, 0, 0, 0.15);
         -moz-box-shadow:    inset 5px 5px 5px -5px rgba(0, 0, 0, 0.15);
         box-shadow:         inset 5px 5px 5px -5px rgba(0, 0, 0, 0.15);
}
input[type="text"], textarea { width: calc(100% - 13px); }

input[type="submit"], input[type="button"], .button {
	display: block;
         width: 100%;

	background: #1996dd; /* Hier Grundfarbe ändern */

         border: 1px rgba(0, 0, 0, 0.1) solid;
         border-bottom: 2px rgba(0, 0, 0, 0.2) solid;

         -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

         cursor: pointer;

         font-family: 'Abel', sans-serif;
         text-align: center;
         font-size: 1.4em;
         font-weight: bold;
         color: #FFFFFF;
         text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 0px;

         padding: 5px 10px 5px 10px;
         margin: 10px 0px 5px 0px;
}

input[type="submit"]:hover, input[type="button"]:hover {
         color: #FFFFFF;
         background-color: #7F7F7F; /* Hier Grundfarbe ändern */
}

/* Katalog Form */
#katalog_bestellung {
	margin: 5px 10px;
         font-size: 0.9em;
}

#katalog_bestellung .titel {
	padding: 10px 0px;

         font-family: 'Abel', sans-serif;
         font-size: 1.4em;
         color: #1996dd;
         font-weight: normal;
         text-shadow: #FFFFFF 1px 1px 1px;
         text-align: center;
         text-transform: uppercase;
}

#katalog_bestellung input[name="plz"] {
         float: left;
         width: 60px;
}

#katalog_bestellung input[name="ort"] {
         float: right;
         width: calc(100% - 100px);
}

#katalog_bestellung input[name="hausnummer"] {
         float: right;
         width: 40px;
}
#katalog_bestellung input[name="strasse"] {
         float: left;
         width: calc(100% - 80px);
}

#w { position: fixed; display: none; z-index: 10000; bottom: 0; left: 0; background: #000000; color: #FFFFFF; padding: 5px 10px; }

/* Media Querys */
@media (max-width: 1080px) {
	#header_fernhochschule.girl { background:transparent url(../images/bg_girl.png) 95% 0px no-repeat; }
	#header_fernhochschule.boy { background:transparent url(../images/bg_boy.png) 95% 0px no-repeat; }
         h1.stars-0, h1.stars-1, h1.stars-2, h1.stars-3, h1.stars-4, h1.stars-5 { text-align: center; padding-bottom: 50px; background-position: bottom center; }
         #startseite .box span { font-size: 0.8em; height: 75px; }

         #infoboxen .box, #footer .box  {
                 float: left;
                 width: calc(50% - 20px);
                 margin: 0px 0px 20px 0px;
                 border: 0px #000 solid;
         }
         #infoboxen .box:nth-child(3n+2), #footer .box:nth-child(3n+2) { margin: 0px 10px 25px 10px; float: right; border: 0px #000000 solid; }
         #infoboxen .box.big, #footer .box.big  {
                 float: left;
                 width: calc(100% - 10px);
                 margin: 0px 0px 20px 0px;
                 border: 0px #000 solid;
         }
         #infoboxen .box.big:nth-child(3n+2), #footer .box.big:nth-child(3n+2) { margin: 0px 10px 25px 10px; }
}

@media (max-width: 850px) {
         .site {
                 padding: 10px 20px;
                 min-width: 300px;
         }
         #startseite .box {
                 float: left !important;
                 display: inline-block !important;
                 width: calc(50% - 22px) !important;
                 margin: 0px 10px 25px 10px !important;
                 border: 0px #000 solid;
         }
         #startseite .box img { width: 100%; height: auto; max-width: 250px; }

         #headermenu .menu .k3 { display: none; }

         #teaser { font-size: 0.8em; width: 100% !important; }
         #header #teaser ul li {
                 padding: 0px 0px 0px 30px;
                 line-height: 30px;
                 background-size: 25px;
         }
         #inhalt #content {
                 float: none;
                 width: 100%;
         }
         #inhalt #formular {
                 float: none; width: 100%;
                 margin-top: 0px;
         }

         #inhalt #beratung-fernschule { float:left; width: calc(50% - 20px); margin: 20px 0px; }
         #inhalt #kontakt-fernschule { float:right; width: calc(50% - 20px); margin: 20px 0px; }

         #header_fernhochschule {
                 width: 100%;
                 height: 400px;
                 -webkit-box-shadow: inset 0px 10px 10px -10px rgba(0, 110, 165, 0.85);
                 -moz-box-shadow:    inset 0px 10px 10px -10px rgba(0, 110, 165, 0.85);
                 box-shadow:         inset 0px 10px 10px -10px rgba(0, 110, 165, 0.85);
         }

         #header_fernhochschule.girl { background-position: right bottom !important; }
         #header_fernhochschule.boy { background-position: right bottom !important; }

}

@media (max-width: 700px) {
         #infoboxen .box, #infoboxen .box:nth-child(3n+2), #infoboxen .box.big, #infoboxen .box.big:nth-child(3n+2) { float: none; width: calc(100% - 20px); margin: 0px 10px 25px 10px; border: 0px #000000 solid; }
         #infoboxen .box b { text-align: center;}
}

@media (max-width: 600px) {
         #headermenu #logo { float: none; margin: 5px auto; text-align: center; }
         #headermenu #logo a { float: none; margin: 5px auto; }
         #headermenu .menu { display: block; }
         #headermenu .menu a { float: none; }

         #header { height: 420px; }
         #header.bild1 { background:#FFFFFF url(../images/header_01c.jpg) top center no-repeat; }
         #header.bild2 { background:#FFFFFF url(../images/header_02c.jpg) top center no-repeat; }
         #teaser { padding-top: 170px; font-size: 0.7em; }
         #header #teaser ul li {
                 color: #0276b0;
         }
         #startseite .box span { font-size: 0.7em; height: 95px; }
}

@media (max-width: 500px) {


         .site {
         	padding: 10px 10px !important;
         	min-width: 280px !important;
	}
         #startseite .box a.left { float:none; display: inline-block; width: calc(100% - 10px); padding: 5px 0px; margin: 5px 0px 0px 0px; font-size: 1.4em; }
	#startseite .box a.right { float:none; display: inline-block; width: calc(100% - 10px); padding: 5px 0px; font-size: 1.4em; }
         #header_fernhochschule.girl, #header_fernhochschule.boy { background-image: none !important; }
}

@media (max-width: 460px) {
	#header { height: 200px !important; }
	#logo a { font-size: 1.5em; }
	#headermenu .menu a { padding: 5px 5px 5px 5px; font-size: 1.4em; height: auto; }
         #header_fernhochschule .logo { float: none; background: #FFFFFF; padding: 10px; width: 250px; margin: 10px auto; }
         #vorteile { float: none; width: 100%; }
         #vorteile b { display: block; text-align: center; }



         #infoboxen .box, #startseite .box, #footer .box  {
                 float: none;
                 width: 100% !important;
                 margin: 0px 0px 20px 0px  !important;
                 border: 0px #000 solid;
         }
         #infoboxen .box:nth-child(3n+2), #startseite .box:nth-child(2n+2), #footer .box:nth-child(3n+2) { margin: 0px 0px 25px 0px; float: none; border: 0px #000000 solid; }
         #infoboxen li { background-size: 100px; }
         #teaser { display: none; }


         #inhalt #formular, #inhalt #beratung-fernschule, #inhalt #kontakt-fernschule { float:none !important; width: calc(100% - 10px) !important; margin: 10px 0px; }
         #tipps { display: none; }
         #startseite .box span { font-size: 0.9em !important; height: 75px !important; }
}