@CHARSET "ISO-8859-1";

/* Browser Reset */
* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

body { padding-top: 111px;}

/* boxes */
header { padding:40px 0 25px; position: fixed; top:0; }
footer > .content { padding:40px 0; }

.contentBox {
	width:100%;
	display:block;
}

.content {
	width:1004px;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.div16  { display:inline-block; width:15%; padding:0; margin:3% 3% 3% 0; vertical-align:top; }
.div84  { display:inline-block; width:81%; margin:3% 0; vertical-align:top; }
.div50  { display:inline-block; width:45%; padding:0 2%; vertical-align:top; }
.div50L { display:inline-block; width:48%; padding-right:2%; vertical-align:top; }

/* colors, backgrounds and borders */
.black     { color: #000000; }
.white     { color: #FFFFFF; }
.green     { color: #B6CD38; }
.green2,a  { color: #708016; }
.greyLight { color: #F2F2F2; }

.fontGrey  { color: #666666; }
.fontGrey2 { color: #4D4B4E; }

.whiteBG     { background-color: #FFFFFF; }
.greenBG     { background-color: #B6CD38; }
.greyLightBG { background-color: #F2F2F2; }
.greyDarkBG  { background-color: #828282; }

.headBG { background: url('./img/bg.jpg') top left repeat; }
.shadowInset {
	-moz-box-shadow: inset 0 0 5px 5px #FFFFFF;
	-webkit-box-shadow: inset 0 0 5px 5px	#FFFFFF;
	box-shadow: inset 0 0 5px 5px #FFFFFF;
}

.greenBorderBottom { border-bottom:5px solid #B6CD38; }
.borderT  { border-top:1px dotted #000000; }
.borderL  { border-left:1px dotted #000000; }
.borderR  { border-right:1px dotted #000000; }
.borderTB { border-top:1px dotted #000000; border-bottom:1px dotted #000000; }
.inputBorder { border: 1px solid #CCCCCC; }

/* fonts and styles */
@font-face {
  font-family: 'The Sans B2 Light';
  src: url('./font/TheSans_B2_300_.eot');
  src: local('☺︎'),
    url("./font/TheSans_B2_300_.woff") format("woff"),
    url("./font/TheSans_B2_300_.svg#theSansLight") format("svg");
}
@font-face {
  font-family: 'The Sans B2 Bold';
  src: url('./font/TheSans_B2_700_.eot');
  src: local('☺︎'),
    url("./font/TheSans_B2_700_.woff") format("woff"),
    url("./font/TheSans_B2_700_.svg#theSansBold") format("svg");
}
@font-face {
  font-family: 'The Sans B2 Black';
  src: url('./font/TheSans_B2_900_.eot');
  src: local('☺︎'),
    url("./font/TheSans_B2_900_.woff") format("woff"),
    url("./font/TheSans_B2_900_.svg#theSansBlack") format("svg");
}
@media screen and (max-device-width: 860px) {
	@font-face {
	  font-family: 'The Sans B2 Light';
	  src: url('./font/TheSans_B2_300_.eot');
	  src: 
	    url("./font/TheSans_B2_300_.woff") format("woff"),
	    url("./font/TheSans_B2_300_.svg#theSansLight") format("svg");
	}
	@font-face {
	  font-family: 'The Sans B2 Bold';
	  src: url('./font/TheSans_B2_700_.eot');
	  src: 
	    url("./font/TheSans_B2_700_.woff") format("woff"),
	    url("./font/TheSans_B2_700_.svg#theSansBold") format("svg");
	}
	@font-face {
	  font-family: 'The Sans B2 Black';
	  src: url('./font/TheSans_B2_900_.eot');
	  src: 
	    url("./font/TheSans_B2_900_.woff") format("woff"),
	    url("./font/TheSans_B2_900_.svg#theSansBlack") format("svg");
	}
}

.font_theSansLight { font-family: 'The Sans B2 Light', sans-serif; }
.font_theSansBold { font-family: 'The Sans B2 Bold', sans-serif; }
.font_theSansBlack { font-family: 'The Sans B2 Black', sans-serif; }

.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }
.fs18 { font-size: 18px; }
.fs24 { font-size: 24px; }
.fs30 { font-size: 30px; }
.bold { font-weight: bold; }
.italic { font-style: italic; }

.lineH { line-height: 1.4; }

/* heights, margins, paddings */
.height1 { height: 1px; }

.ml25 { margin-left:25px; }
.ml50 { margin-left: 47px; }
.mtb50 { margin-top: 50px; margin-bottom:50px; }
.mtb3pro { margin-top: 3%; margin-bottom: 3%; }

.mt2  { margin-top: 2px; }
.mt2m { margin-top: -2px; }
.mt3m { margin-top: -3px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt60 { margin-top: 60px; }

.mb60 { margin-bottom: 60px; }

.pl12  { padding-left: 12px; }
.pl20  { padding-left: 20px; }
.pl29  { padding-left: 29px; }
.pt1   { padding-top: 1px; }
.pt3   { padding-top: 3px; }
.pt10  { padding-top: 10px; }
.pt30  { padding-top: 30px; }
.pb20  { padding-bottom: 20px; }
.ptb50 { padding-top: 50px; padding-bottom:50px; }

.maxWidth583 { max-width: 583px; }

/* other globals */
.left  { float: left; }
.right { float: right; }
.clear { clear: both; }
.center { text-align: center;}
.pointer { cursor: pointer; }
.rImg { width:100%; height:auto; display:block; }
.none { display: none; }

/* navigation */
nav > ul > li { list-style: none; display: inline; list-style-type: none; }
nav > ul > li > a {	text-decoration: none; }

#headNav { margin-top:6px; }
#headNav > ul > li { margin-left: 35px; padding:3px 0; }
#headNav > ul > li > a { padding: 0 25px; font-size: 16px; }
#headNav > ul > li > a:hover { color: #000000; }

#footNav > ul > li > a { padding: 0 25px; font-size: 16px; }
#footNav > ul > li > a:hover { text-decoration: underline; color: #B6CD38; }

#mobileNavBtn { display: none; }

#scrollTop { position: fixed; right:20px; bottom:20px; padding:6px 12px; border: 1px solid #B6CD38; background-color: #FFFFFF; cursor:pointer; display:none;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

#scrollTop:hover { background-color:#F2F2F2; }

/* Startsite */
ul.ownList { list-style-image: url('./img/ownlist.png'); }
#start > img { width:30%; height:30%; margin-left:4%; }
#start > img:first-child { margin-left:0; }
#start > .mobile { display: none; padding: 20px 0; }
#start > .mobile > .icon { display:inline-block; width:16%; padding:0; margin:3% 3% 3% 0; }
#start > .mobile > .text { display:inline-block; width:79%; padding:0; margin:5% 0 3%; vertical-align: top; font-size:24px; }

#regBtn > .mobile { display: none; }

.startArrowBlock { width:95%; padding:14px 0; }
.startArrow {
	margin-left:0px;
	width: 0px;
	height: 0px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 40px solid #B6CD38; 
}

.startArrowDark {
	margin-left:0px;
	width: 0px;
	height: 0px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 40px solid #828282; 
}

/* FAQ */
.question { padding: 17px 14px 10px; }

/* Kontakt */
label,.label { width: 15%; display:inline-block; vertical-align:top; padding-top:1.2%; }
.input { padding:1%; width:82%; margin-bottom:4px; display:inline-block; }
.inputPLZ { padding:1%; width:16%; margin-bottom:4px; display:inline-block; }
.inputOrt { padding:1%; width:62.4%; margin-bottom:4px; margin-left:1%; display:inline-block; }
.inputStr { padding:1%; width:70%; margin-bottom:4px; display:inline-block; }
.inputHnr { padding:1%; width:8.4%; margin-bottom:4px; margin-left:1%; display:inline-block; }
input, textarea { margin:0; font-size:16px; width:100%; }
textarea { min-height:80px; }

.focus {
	-moz-box-shadow: inset 0 1px 4px rgba(0,0,0,.2), 0 0 6px #B6CD38 ;
	-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.2), 0 0 6px #B6CD38 ;
	box-shadow: inset 0 1px 4px rgba(0,0,0,.2), 0 0 6px #B6CD38 ;
	border: 1px solid #999999;
}

.errorBox { padding: 10px; border: 1px solid #ebccd1; background-color: #f2dede; color: #a94442; }
.successBox { padding: 10px; border: 1px solid #d6e9c6; background-color: #dff0d8; color: #3c763d; }
.input.formError { border: 1px solid #d70032 !important; }

.button { text-align: center; margin-top: 8px; padding: 6px 12px; background-color: #b6cd38; font-size: 16px; border: 1px solid #a2b926; color: #fff; margin-right: 0.4% !important; width:auto; float:right; cursor: pointer !important; }
.button:hover { background-color: #a2b926; }

.radius { -webkit-border-radius:6px; -khtml-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }

/* responsive Anpassungen */
@media screen and (max-width: 1005px) {
	.content { width: 92%; padding-left: 4%; padding-right: 4%; }
	#headNav > ul > li { margin-left: 15px; }
	#regBtn { font-size:18px; }
	.startArrow { border-top: 26px solid transparent; border-bottom: 26px solid transparent; border-left: 40px solid #B6CD38; }
	.startArrowDark { border-top: 26px solid transparent; border-bottom: 26px solid transparent;	border-left: 40px solid #828282; }
}
@media screen and (max-width: 890px) {
	.label { width: 99%; padding-top:0px; }
	.input { width:97%; }
	.inputPLZ { width:21%; }
	.inputOrt { width:72.4%;}
	.inputStr { width:83%; }
	.inputHnr { width:10.2%; }

}

@media screen and (max-width: 800px) {
	#regBtn > .normal { display: none; }
	#regBtn > .mobile { display: block; }
}
	
@media screen and (max-width: 750px) {
	nav { margin-right:0 !important; }
	#headNav { clear:both; padding:0; width:100%; overflow:hidden; height:0;  }
	#headNav > ul > li { margin: 0; width:100%; padding:10px 0; text-align:center; display:block; }
	#headNav > ul > li > a { font-size: 20px; }
	.borderTB { border-bottom:none; }
	#headNav > ul > li:last-child { border-bottom:1px dotted #000000 !important; }
	#mobileNavBtn { display: block; cursor:pointer; }
	header { padding:20px 0 0; }
	body { padding-top: 72px; }
	#start > .mobile { display: block; }
	#start > .mtb50 { display: none; }
	#startInfo { border-top:none; margin:0; }
	#startInfo > .div50L { width:100%; border-right: none; border-top:1px dotted #000000; padding: 30px 0; }
	#startInfo > .div50 { width:100%; margin:0; border-right: none; border-top:1px dotted #000000; padding: 30px 0; }
	ul.ownList { list-style-image: none; text-align:center; list-style: none; list-style-type: none; margin:0; }
	ul.ownList > li { margin-left: 0; }
	#startMitHead { text-align: center; }
	.label { width: 99%; }
	.input { width:97%; }
	.inputPLZ { width:21%; }
	.inputOrt { width:72.4%;}
}

@media screen and (max-width: 600px) {
	#start > .mobile  > .text{ font-size: 20px; }
	.inputPLZ { width:20%; }
	.inputOrt { width:72.4%;}
	.inputStr { width:82%; }
	.inputHnr { width:10.2%; }
}

@media screen and (max-width: 544px) {
	#impLast { margin-left:0 !important; margin-top:20px; width:100%; }
	.div16 { display: none; }
	.div84 { width: 100%; }
	#imgServicePortal, #textServicePortal, #imgAktivierungskonto, #textAktivierungskonto { width: 100%; padding-left: 0; padding-right:0; }
}

@media screen and (max-width: 480px) {
	#start > .mobile  > .text { width:71%; font-size: 18px; }
	#start > .mobile > .icon { width:24%; }
	.fs30 { font-size: 24px; }
	.fs18 { font-size: 16px; }
	.fs16 { font-size: 14px; }
	#footNav > ul > li > a { padding: 0 5px; }
	.inputPLZ { width:20%; }
	.inputOrt { width:71.4%;}
	.inputStr { width:81%; }
	.inputHnr { width:10.2%; }
}

@media screen and (max-width: 360px) {
	#start > .mobile  > .text { font-size: 14px; }
	#footNav > ul > li > a { font-size: 14px; }
	#headLogo { width: 180px; height: auto; display: block; }
	body { padding-top: 61px; }
	#mobileNavBtn { width: 54px; height: auto; display: block; }
}
