/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
@font-face { font-family: 'MyriadPro-Regular'; src: url('MyriadPro-Regular.otf') format('opentype'); }
html, body {
  font-family:MyriadPro-Regular,Helvetica,Verdana,Arial,Tahoma,Helvetica,sans-serif;
	color:#333333;
	background: #222f63; /* Old browsers */
	/*background-image: url(../img/hintergrund_inpp_Berlin.jpg);*/
	-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	line-height: 22px;
/*	background: #c5c5c5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
/*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIzMDAwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzUyMDAyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMzAwMDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/*background: -moz-linear-gradient(left,  #c5c5c5 0%, #fcfcf9 75%, #fffded 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fffded), color-stop(75%,#fcfcf9), color-stop(100%,#230001)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(left,  #c5c5c5 0%,#fcfcf9 75%,#fffded 100%); /* Chrome10+,Safari5.1+ */
/*background: -o-linear-gradient(left,  #c5c5c5 0%,#fcfcf9 75%,#fffded 100%); /* Opera 11.10+ */
/*background: -ms-linear-gradient(left,  #c5c5c5 0%,#fcfcf9 75%,#fffded 100%); /* IE10+ */
/*background: linear-gradient(to right,  #c5c5c5 0%,#fcfcf9 75%,#fffded 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5c5c5', endColorstr='#f9da7f',GradientType=1 ); /* IE6-8 */

/*	background: #230001; /* Old browsers */
/*	 IE9 SVG, needs conditional override of 'filter' to 'none' */
/*	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIzMDAwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzUyMDAyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMzAwMDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/*	background: -moz-linear-gradient(left,  #fcf2b2 0%, #f1e074 90%, #fcf2b2 100%); /* FF3.6+ */
/*	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcf2b2), color-stop(90%,#f1e074), color-stop(100%,#230001)); /* Chrome,Safari4+ */
/*	background: -webkit-linear-gradient(left,  #fcf2b2 0%,#f1e074 90%,#fcf2b2 100%); /* Chrome10+,Safari5.1+ */
/*	background: -o-linear-gradient(left,  #fcf2b2 0%,#f1e074 90%,#fcf2b2 100%); /* Opera 11.10+ */
/*	background: -ms-linear-gradient(left,  #fcf2b2 0%,#f1e074 90%,#fcf2b2 100%); /* IE10+ */
/*	background: linear-gradient(to right,  #fcf2b2 0%,#f1e074 90%,#fcf2b2 100%); /* W3C */
/*	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf2b2', endColorstr='#fcf2b2',GradientType=1 ); /* IE6-8 */

} /*de006e */
}
img {border:0;}
.img_text {max-width:100%;height:auto;border:1px solid black;margin-left:20px;margin-Bottom:250px; float:right; clear:both;}
.inpp_logo {margin:25px;margin-top:125px;border:0px; width:120px;height:120px;}
.box { float: left;   }
#root { max-width: 1000px; margin: 0 auto;  position:relative;top:00px; left:00px; border: 0; }
.google_maps {border:0; width:500px;height:auto;}
.text_abstand {width:120px; height:40px; display:block; float:left; clear:right;}


#box1 { width: 100%; border: 0px solid black; float: left; position:relative; background-color:#ffffff;border-radius: 20px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
#box2 { width: 100%; float:left; }
#box3 { width: 75%; float:left; clear:right;  border: 0px solid #000000; }
#box4 { width: 100%; }
#box5 { width: 100%; }
#box6 { width: 100%; magin-top:10px;}

#box1_logo {width: 20%; background-color:#ffffff; float:left;}
#box1_img {border:no;margin-left:30px;margin-top:30px;}
#box2_header_img {width:100%;max-width:100%;}


/* CONTENT */
#span_head {margin-left:20px;font-size:1.5em; font-family: "Times New Roman", Times, serif;}
#box3_r1_01 { width:33%; min-width:300px;margin-top:10px; margin-right:5px;background-color:#94c369;float:left; }
#box3_r1_01_large {width:66%; min-width:600px;margin-top:10px; margin-right:0px;background-color:#94c369;float:left;}

#box3_r1_01_big {width:100%; min-width:300px;height: auto; margin-bottom:10px; margin-left:25px; padding-top:5px;margin-right:10px;background-color:#222f63;color:#ffffff; float:left;border-radius: 20px;}

#box3_r1_01_half {width:49%; min-width:200px;height: auto;margin-top:10px; padding-top:5px;margin-right:10px;background-color:#94c369;float:left;}
#box3_r1_02_half {width:49%; min-width:200px;height: auto;margin-top:10px; padding-top:5px;margin-left:2px;background-color:#94c369;float:right;}
#box3_r1_01_1 {background-color:#f8f1da;min-height:214px;padding:20px;color:#333333} /*color:#13689f */
#box3_r1_03 {width:33%; min-width:300px;margin-top:10px;background-color:#94c369;float:left;}
#box3_r2_01 {width:33%; min-width:300px;margin-top:10px; margin-right:5px;background-color:#94c369;float:left;}
#box3_r2_02 {width:24%; min-width:250px;margin-top:10px; margin-right:10px;background-color:#94c369;float:left;}
#box3_r2_02_01 {width:24%; min-width:250px;margin-top:10px; background-color:#94c369;float:left;}
#box3_r2_01_1 {background-color:#f8f1da;min-height:214px;padding:20px;color:#333333}

#box3_r2_01_2 {background-color:#f9d595;min-height:54px;padding:20px;color:#333333;text-align: left;font-size:14px;	border-bottom-right-radius: 20px 20px;}
#box3_r2_01_3 {background-color:#f9d595;min-height:54px;padding:20px;color:#333333;text-align: left;font-size:14px;	border-bottom-right-radius: 20px 20px;}

#box3_r2_01_4 {background-color:#f8f1da;min-height:554px;padding:20px;color:#333333}
#box3_r2_03 {width:33%; min-width:300px;margin-top:10px;background-color:#94c369;float:left; }
/* END CONTENT */

/* FOOTER */
#box6_r1_01 {width:100%; min-width:300px;height: auto;margin-top:10px; padding:20px 0px 20px 20px;margin-right:10px;background-color:#ffffff;float:left;}	
				
#box6_r1_03	{width:98%; min-width:300px;height: auto;padding:0px 0px 20px 20px;margin-right:10px;background-color:#94c369;float:left;}
#box6_r2_01 {width: 340px; height:40px; float:left;background-color:#94c369;color:#333333;padding:20px;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;padding:20px;}
#box6_r2_02 {width: 340px; height:40px; float:left;background-color:#94c369;color:#333333;padding:20px;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;padding:20px;}
#box6_r2_03 {width: 340px; height:40px; float:left;background-color:#94c369;color:#333333;padding:20px;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;padding:20px;}
#box6_r3_01 {width: 45%; height:20px; float:left;background-color:#94c369;color:#333333;padding:20px;border-top:1px solid #ffffff;}
#box6_r3_01_01 {width: 45%;  height:20px; float:right;background-color:#94c369;color:#333333;padding:20px;border-top:1px solid #ffffff;}
#span_head_footer {font-weight:bold;font-size:2em;}
#box6_links {margin-left:40px;}
/* END FOOTER */

	/* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:flex; width:100%; border: 0px solid red;}
  .row { display:table-row; height:10px; border: 0px solid red;}
  .cell { display:table-cell; border: 0px solid red;}

  /* this is where the colspan tricks works. */
  span { width:100%; }


  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 33%; }
  .last { width: 33%; }
  .fill { width: 33%; }


 form { color:#333333;}
 input.kurz {width:50%; border:1px solid #333333;background-color: #fffded;font-size:11px;}
 input.lang {width:50%; border:1px solid #333333;background-color: #fffded;font-size:11px;}
 textarea.anmeldung {width:50%; height:100px; border:1px solid #333333;background-color: #fffded;}
 span.red {color:red;}
 select {background-color: #fffded;border:1px solid #333333;}
 input[type=button], input[type=submit], input[type=reset] {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    background-color: #94c369;
    border: none;
    color: 333333;
    text-decoration: none;
    cursor: pointer;
		width:50%;
		padding: 16px 32px;
		font-weight:bold;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
 input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    background-color: #263318;
		color:#94c369;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}


fader { position: relative; display: inline-block; }
.fader img { vertical-align: top; width:100%;max-width:100%;border:1px solid black;}
.fader img.next { position: absolute; top: 0; left: 0; width:100%;max-width:100%;border:1px solid black;} 
.fader img.next1 { position: absolute; top: 0; left: 0; width:100%;max-width:100%;border:1px solid black;} 

.next { position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0); } #meinFader { position: relative; }
.next1 { position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0); } #eins { position: relative; }

 
a:link {color:#222f63; text-decoration:underlined; font-weight: bold;}
a:visited {color:#222f63; text-decoration:none; font-weight: bold;}
a:hover {color:#6b6a6f; text-decoration:none; font-weight: bold;}

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color: #ffffff;
	font-size:1em
}

#logo {
	display: block;
	padding: 0 30px;
	float: left;
	font-size:20px;
	line-height: 60px;
	clear:both;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:right;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: left;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	clear:both;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	width: 170px;
	/*display:inline-block;*/
	float: none;
	background-color: #f9b233;
	/*background-color: #1583c8;*/
	border: 1px solid #000000;
	border-top-right-radius: 20px 20px;
	border-bottom-right-radius: 20px 20px;
	}

/* Styling the links */
nav a {
	display:block;
	padding:10px 20px;	
	color:#000000;
	font-size:1em;
	text-decoration:none;
}


nav ul li ul li:hover { background: #f9d595; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #222f63; 
	color:#ffffff;
	border-top-right-radius: 20px 20px;
	border-bottom-right-radius: 20px 20px;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: static; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 100px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;

}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
	background-color: #f9d595; 
	border-top-right-radius: 20px 20px;
	border-bottom-right-radius: 20px 20px;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:200px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

#root { max-width: 500px; margin: 0 auto;  position:relative; padding:0;}
#root { max-width: 500px; margin: 0 auto;  position:relative; }


#box1 { width: 95%;  }
#box2 { width: 100%; }
#box3 { width: 100%; }
#box4 { width: 100%; }
#box5 { width: 100%; }
#box6 { width: 100%; }
/* CONTENT */
#span_head {margin-left:20px;font-size:1em; }
#box3_r1_01 { width:33%; min-width:300px;margin-top:10px; margin-right:5px;background-color:#94c369;float:left; }
#box3_r1_01_large {width:66%; min-width:600px;margin-top:10px; margin-right:0px;background-color:#94c369;float:left;}

/* #box3_r1_01_big {width:100%; min-width:200px;margin-top:10px; margin-right:10px;background-color:#94c369;float:left;}*/
#box1_logo {width: 100%; background-color:#ffffff; float:left;}
.inpp_logo {margin:25px;border:0px; width:100px;height:100px;}
#box3_r1_01_big {width:100%; min-width:200px;height: auto; margin-bottom:10px; margin-top:10px;margin-left:0px; padding-top:5px;background-color:#222f63;color:#ffffff; float:left;border-radius: 20px;}
.img_text {max-width:100%;height:auto;border:1px solid black;margin-left:20px;margin-Bottom:25px; float:right; clear:both;}
#box3_r2_01_3 {background-color:#f9d595;min-height:54px;padding:20px;color:#333333;text-align: left;font-size:12px;	border-bottom-right-radius: 20px 20px;}
#box6_r1_01 {width:100%; min-width:300px;height: auto;margin-top:10px; padding-left:20px;margin-right:10px;background-color:#f9d595;float:left;}					
.google_maps {border:0; width:100%;height:auto;}

	/* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:none; width:100%; border: 0px solid red; float:left;}
  .row { display:table-row; height:10px; border: 0px solid red;}
  .cell { display:table-cell; border: 0px solid red;}

  /* this is where the colspan tricks works. */
  span { width:100%; }


  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 100%; display:block;clear:both;float:left; margin-bottom:10px;}
  .last { width: 100%; display:block;clear:both;float:left;margin-bottom:10px;}
  .fill { width: 100%; display:block;clear:both;float:left;margin-bottom:10px;}






#box3_r1_01_half {width:100%; min-width:200px;margin-top:10px; margin-right:10px;background-color:#94c369;float:left;}
#box3_r1_02_half {width:100%; min-width:200px;margin-top:10px; margin-right:0px;background-color:#94c369;float:left;}
#box3_r1_01_1 {background-color:#f8f1da;min-height:214px;padding:20px;color:#333333} /*color:#13689f */
#box3_r1_03 {width:33%; min-width:300px;margin-top:10px;background-color:#94c369;float:left;}
#box3_r2_01 {width:33%; min-width:300px;margin-top:10px; margin-right:5px;background-color:#94c369;float:left;}
#box3_r2_02 {width:100%; min-width:200px;margin-top:10px; margin-right:10px;background-color:#94c369;float:left;}
#box3_r2_02_01 {width:100%; min-width:200px;margin-top:10px; background-color:#94c369;float:left;}
#box3_r2_01_1 {background-color:#f8f1da;min-height:214px;padding:20px;color:#333333}
#box3_r2_01_2 {background-color:#f8f1da;min-height:214px;padding:20px;color:#333333}

#box3_r2_01_4 {background-color:#f8f1da;min-height:554px;padding:20px;color:#333333}
#box3_r2_03 {width:33%; min-width:300px;margin-top:10px;background-color:#94c369;float:left; }
/* END CONTENT */

/* FOOTER */
#box6_r1_03	{width:70%;min-width:200px; height:150px; float:left;background-color:#94c369;color:#333333;padding:20px;margin-top:10px;}
#box6_r2_01 {width:70%;min-width:200px; height:40px; float:left;background-color:#94c369;color:#333333;padding:20px;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;padding:20px;}
#box6_r2_02 {width:70%;width:50%; min-width:200px; height:40px; float:left;background-color:#94c369;color:#333333;padding:20px;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;padding:20px;}
#box6_r2_03 {width:70%;width:50%; min-width:200px; height:40px; float:left;background-color:#94c369;color:#333333;padding:20px;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;padding:20px;}
#box6_r3_01 {width:70%; min-width:200px; height:20px; float:left;background-color:#94c369;color:#333333;padding:20px;border-top:1px solid #ffffff;}
#box6_r3_01_01 {width:70%; min-width:200px; height:20px; float:left;background-color:#94c369;color:#333333;padding:20px;border-top:1px solid #ffffff;}
#span_head_footer {font-weight:bold;font-size:2em;}
#box6_links {margin-left:20px;}
/* END FOOTER */

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #f9b233;
		padding:14px 20px;	
		color:#FFF;
		font-size:15px;
		text-decoration:none;
		border:none;
	border-top-right-radius: 20px 20px;
	border-bottom-right-radius: 20px 20px;
	}

	.toggle:hover {
		background-color: #222f63;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #222f63;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:14px; 
	border-top-right-radius: 20px 20px;
	border-bottom-right-radius: 20px 20px;
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #f9d595; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
		border-top-right-radius: 20px 20px;
		border-bottom-right-radius: 20px 20px;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}