body {
	padding: 0px;
	margin: 0px;
	background-color:#ce004b;
	font-family: "proxima-nova",sans-serif;
}


h1 {
	font-size: 20px;
	letter-spacing:1px;
	line-height:22px;
	font-weight:400;
	font-style:normal;
	color:#737373;
}

h2 {
	font-size: 16px;
	line-height: 22px;
	font-weight:400;
	font-style:normal;
	color:#fff;
}

h3 {
	font-size: 18px;
	line-height:20px;
	font-weight:400;
	font-style:normal;
	letter-spacing:1px;
	color:#fff;
}

p, li {
	font-size: 16px;
	line-height: 22px;
	font-weight:400;
	font-style:normal;
	color:#737373;
}

li {
	width:420px;
}

ul {
  list-style-type: none;
  margin-left:-18px;
}

ul > li:before {
  content: url('../images/pfeil_02.png');
  position: absolute;
  margin-left: -22px;
  margin-top: 2px;
}

.test{
border: 1px solid #fff;
}

#iframe_container{
	width:800px; 
	height:600px; 
	border: 1px solid #fff; 
	background-color:#fff;
}

.sbutton{
background-color:#fff; 
color:#ce004b; 
font-size:14px; 
border: 1px solid #ce004b;
float:right;
height:30px;
width:100px;
}

.sbutton:hover{
background-color:#ce004b; 
color:#fff; 
font-size:14px; 
border: 1px solid #ce004b;
}

.form_input_01{
font-size: 15px; color:#737373; width:650px; height:75px; background:#f1f1f1; border: 1px solid #fff;
}

.form_input_02{
font-size: 15px; color:#737373; width:550px; height:25px; background:#fff; border: 2px dashed #fff; border-bottom-color:#ce004b;
}


/************************************************************************************
STRUCTURE
*************************************************************************************/
.content_box {
	padding:0px;
	margin:0px;
	width: 100%;
	background-size: 100% 100%;
	height: 300px;
	float:left;
}

#main{
	width:100%;
	overflow:hidden;
}


#mainnav{
	position:fixed;
	left:100%;
	top:0px;
	z-index:5;
	width: 120px;
	height:100%;
	background-color:#f1f1f1;
	margin-left:-120px;
}

#nav_container{
	position:absolute;
	top:50%;
	left:15px;
	width:100px;
	height:350px;
	margin-top:-175px;
}

#logo{
	position:absolute;
	left:50%;
	top:50%;
	z-index:10;
	width: 430px;
	margin-left:-290px;
	margin-top:-50px;

}

#contact{
	position:absolute;
	left: 50%;
	top: 90%;
	z-index: 10;
	width: 420px;
	margin-left:-475px;
	margin-top:-85px;
}

#willkommen{
	position:relative;
	left:50%;
	top:100px;
	z-index:10;
	width: 600px;
	margin-left:-360px;
	text-align:left;

}

#icon_down{
	position:relative;
	left:50%;
	top:90%;
	margin-left:-100px;
	width:100px;
	height:100px;
	text-align:center;
    z-index: 100;
}

#icon_about{
	position:relative;
	left:50%;
	top:75px;
	width:100px;
	margin-left:-490px;
	text-align:center;
}

#box_container{
	position:relative;
	left:50%;
	top:50px;
	margin-left:-500px;
	width:960px;
	height:420px;
}

.box{
	width:245px;
	height:400px;
	border: 2px solid #ce004b;
	padding:20px;
	float:left;
	margin-left:5px;
}

.box p{
	font-size: 14px;
}

#box_02_container{
	position:relative;
	left:50%;
	top:50px;
	margin-left:-500px;
	width:1100px;
	height:2200px;
	background-image:url(../images/linien.png);
	background-repeat:no-repeat;
	background-size:1080px 2200px;
	background-position:20px;
}


.box_02{
	width:600px;
	height:340px;
	background-color:#fff;
	padding:40px;
	float:left;
	margin-top:85px;
}

.box_02_content{
	margin-left:110px; 
	margin-top:-70px;
}


#icon_dienstleistung{
	position:relative;
	left:50%;
	top:35px;
	margin-left:-540px;
	width:100px;
	text-align:center;
}

#download_container{
	
	width:100%;
	height:400px;
	background-color:#fff;
	border: 0px solid #fff;
}

#icon_download{
	position:relative;
	left:50%;
	top:65px;
	margin-left:-490px;
	width:100px;
	text-align:center;
}

#download_content{
	position:relative;
	left:50%;
	top:65px;
	margin-left:-360px;
	width:400px;
	text-align:left;
}

#contact_container{
	
	width:100%;
	height:400px;
	
}

#icon_contact{
	position:relative;
	left:50%;
	top:75px;
	margin-left:-490px;
	width:100px;
	text-align:center;
}

#contact_content{
	position:relative;
	left:50%;
	top:90px;
	margin-left:-360px;
	width:320px;
	text-align:left;
}


#contact_form{
	position:relative;
	left:50%;
	top:100px;
	width:800px;
	height:600px;
	margin-left:-360px;
	background-color:#fff;
}


#mainnav_item_01{
		-moz-transition: all 0.3s ease-in-out 0s;
		-webkit-transition: all 0.3s ease-in-out 0s;
		-o-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		background-size:75px;
		background-image:url(../images/about_icon.png);
		width: 75px;
		height: 75px;
		float:left;
		cursor:pointer;
		margin:10px;
}

#mainnav_item_01:hover{
		background-image:url(../images/about_icon_over.png);
		cursor:pointer;
}


#mainnav_item_02{
		-moz-transition: all 0.3s ease-in-out 0s;
		-webkit-transition: all 0.3s ease-in-out 0s;
		-o-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		background-size:75px;
		background-image:url(../images/dienstleistung_icon.png);
		width: 75px;
		height: 75px;
		float:left;
		cursor:pointer;
		margin:10px;
}

#mainnav_item_02:hover{
		background-image:url(../images/dienstleistung_icon_over.png);
		cursor:pointer;
}


#mainnav_item_03{
		-moz-transition: all 0.3s ease-in-out 0s;
		-webkit-transition: all 0.3s ease-in-out 0s;
		-o-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		background-size:75px;
		background-image:url(../images/downloads_icon.png);
		width: 75px;
		height: 75px;
		float:left;
		cursor:pointer;
		margin:10px;
}

#mainnav_item_03:hover{
		background-image:url(../images/downloads_icon_over.png);
		cursor:pointer;
}


#mainnav_item_04{
		-moz-transition: all 0.3s ease-in-out 0s;
		-webkit-transition: all 0.3s ease-in-out 0s;
		-o-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		background-size:75px;
		background-image:url(../images/kontakt_icon.png);
		width: 75px;
		height: 75px;
		float:left;
		cursor:pointer;
		margin:10px;
}

#mainnav_item_04:hover{
		background-image:url(../images/kontakt_icon_over.png);
		cursor:pointer;
}


#mainnav_item_05{
		-moz-transition: all 0.3s ease-in-out 0s;
		-webkit-transition: all 0.3s ease-in-out 0s;
		-o-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		background-size:40px;
		background-image:url(../images/go_down.png);
		width: 40px;
		height: 40px;
		float:left;
		cursor:pointer;
		margin:10px;
}

#mainnav_item_05:hover{
		background-image:url(../images/go_down_over.png);
		cursor:pointer;
}



/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	
}

/* for 700px or less */
@media screen and (max-width: 700px) {

	#pagewrap {
		width: 94%;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#pagewrap {
		width: 94%;
	}

}

@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}

/* border & guideline (you can ignore these) */

img {
	max-width: 100%;
	height: auto;
}

a:link { color:#737373; text-decoration: none; }
a:visited  {color:#737373; text-decoration: none; }
a:active { color:#737373; text-decoration: none; }
a:hover  {color:#ce004b; text-decoration: none; }

a.white:link { color:#fff; text-decoration: none; }
a.white:visited  {color:#fff; text-decoration: none; }
a.white:active { color:#fff; text-decoration: none; }
a.white:hover  {color:#ce004b; text-decoration: none; }

a.red:link { color:#fff; text-decoration: none; }
a.red:visited  {color:#fff; text-decoration: none; }
a.red:active { color:#fff; text-decoration: none; }
a.red:hover  {color:#737373; text-decoration: none; }