/*
	CSS-Template by Niklas Hofmann
*/

/*********************************************************************************/
/* Global                                                                        */
/*********************************************************************************/
	
 body {
     font-family: 'Arimo', Arial, sans-serif;
 	 font-size: 11pt;
 	 line-height: 1.75em;
	 color: #4c4c4c;
 }

 h1,h2,h3,h4,h5,h6 {
	 text-transform: uppercase;
	 font-weight: bold;
 }
	
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 	 text-decoration: none;
 	 color: inherit;
 }

 html  { 
     box-sizing: border-box; 
 } 
 *, ::before, ::after { 
     box-sizing: inherit; 
 }
 
 img {
	 max-width: 100%;
	 height: auto;
 }

 main h1 {
	 font-size: 2em;
 }

 main ul	{
	 list-style: none;
 }

 main ul a, footer a, main a {
	 text-decoration: none;
	 color: #4c4c4c;
 }
	
 main ul a:hover, footer a:hover, main a:hover {
	  text-decoration: underline;
}


/*********************************************************************************/
/* Colors                                                                        */
/*********************************************************************************/ 

 body {
	 background: white;
 }
 
 header {
	 background: black;
 }
 
 .site-heading {
	 color: white;
 }
 
 .site-heading span {
	 color: white;
 }
 
 nav a {
     color: grey;
 }
 
 nav ul a:hover {
	 background: transparent;
	 color: white;
 }

 nav li.current a {
     background: transparent;
	 color: white;
 }
 
 .image-banner p {
	 background: #4c4c4c;
	 color: white;
 }
 
 .breadcrumbs, .breadcrumbs a {
  	  color: grey;
 }
 
 .breadcrumbs a:hover {
  	 color: #990000; /*darkred*/
 }
 
 hr {
	 color: grey;
 }

 footer {
	 background: grey;
 }
 
 
/*********************************************************************************/
/* body                                                                          */
/*********************************************************************************/

 body {
     margin: 0 auto;
	 min-width: 16em;
	 max-width: 100%;
 }
 
 
/*********************************************************************************/
/* header                                                                        */
/*********************************************************************************/

 header {
	 margin-top: -1.5em;
	 margin-bottom: 0em;
	 padding-top: 0.9em;
	 padding-bottom: 0.1em;
 }
 
 .site-heading {
	 text-transform: lowercase;
	 font-size: 2.2em;
 }
 
 .site-heading span {
	 letter-spacing: -0.06em;
	 font-weight: normal;
 }

 
 /*** nav ***/

 nav ul {
	 padding: 0;
 }

 nav li {
     list-style: none;
 }

 nav a {
     font-size: 1em;
     font-weight: bold;
     text-transform: uppercase;
     text-decoration: none;
 }
 
 nav ul a:hover {
	 list-style: none;
 }

 nav li.current a {
     text-decoration: none;
 }

/*
 nav li.currentpath a {
    text-decoration: none;
  	color: red
	background: blue;	
 }
*/


/*********************************************************************************/
/* banner                                                                        */
/*********************************************************************************/
 
 .image-banner {
	 width: 100%;
 }
 
 .image-banner img {
	 display: block;
	 max-width: 100%; 
	 height: auto;
	 margin-left: auto;
	 margin-right: auto; 
 }

 .image-banner p {
	 margin-top: -2.4em;
	 padding: 5px;
	 text-align: center;
	 opacity: 0;
 }
 
 .image-banner:hover p {
	 max-width: 1200px; 
	 margin-left: auto;
	 margin-right: auto;
	 opacity: 0.9;
 }


/*********************************************************************************/
/* main                                                                          */
/*********************************************************************************/
 
 main  {
	 display: block; /* <main> doesn´t work in IE */
	 margin-left: auto;
	 margin-right: auto;
	 text-align: justify;
 }
 
 /*** breadcrumbs ***/
 
 #breadcrumbs {
	 width:100%;
	 min-height: 2em;
	 max-height: 2.5em;
 } 
 
 .breadcrumbs {
  	 padding-left: 0;
	 text-decoration: none;
  	 color: grey;
 }
 
 .breadcrumbs a {
  	text-decoration: none;
    text-transform: capitalize;
	font-size: 0.8em;
 }
 
 .breadcrumbs a:hover {
  	text-decoration: none;
 }
 
 .hidden-breadcrumbs {
	 display: none;
 }
 
 
 /*** line ***/

 hr {
	 border-top: 0.1em solid;
	 width: 90vw;
	 margin-left: auto;
	 margin-right: auto;
 }
 
 
/*********************************************************************************/
/* footer                                                                        */
/*********************************************************************************/
 
 footer {
	 padding-top: 1em;
	 padding-bottom: 0.3em;
 }
 
 #footer-smallscreen {
	 text-align: center;
 }
 
 #foottab {
	 min-width: 100%;
 }
 
 #foottab th {
	 font-weight: normal;
 }


/*********************************************************************************/
/* User settings                                                                 */
/*********************************************************************************/

.breadcrumbs {display: none;}

.nm_readmore a {color: #990000;}

.nm_post_content ul {
	list-style-type: square;
	padding-left: 1em;
}

/*** datenschutz ***/

.privacy ul {
	/* list-style-type: "- "; */ /*kann icht auf iPhone angezeigt werden*/
	list-style-type: square;
	padding-left: 1em;
}
.privacy li {
	margin-top: 1em;
}

/*** bewerbung (./aboutme) ***/

.aboutme_table ul {
	/* list-style-type: "- "; */ /*kann icht auf iPhone angezeigt werden*/
	list-style-type: square;
	padding-left: 1em;
	margin: 0;
}

.list-style_icon_pdf ul {
	list-style-image: url("pdf.png");
	padding-left: 1.8em;

}
.list-style_icon_pdf li {
	margin-top: 0.5em;
}


/*********************************************************************************/
/* Viewports                                                                     */
/*********************************************************************************/
/* For testing the differnt viewports use browser Firefox and press following	 */
/* key combination: <CTRL><Shift><M>                                    	     */
/*********************************************************************************/

@media (min-width: 320px)  {

 .breadcrumbs, article, aside {
	 padding-left: 1.5em;
 }
 
 .image-banner p {
	 display: none;
 }
 
 .site-heading {
	 text-align: center;
 }
 	
 article, aside {
  	 padding-right: 1.5em;
 }	
 
 footer {
	 clear: both;
 }
 
 #footer-widescreen {
	 display: none;
 }
  
 nav li {
	 margin: 0.5em;
	 text-align: center;
 }
  
 nav a {
	 padding: 0.3em 15px;
 }
}

@media (min-width: 768px)  {

 .breadcrumbs, .site-heading, article {
	 padding-left: 0;
 }
 
 .image-banner p {
	 display: inherit;
 }
 
 .site-heading {
 	 float: left;
	 text-align: left;
	 max-width: 16em;
	 margin-bottom: -0.2em;
 }
 
 article  {
     float: left;
	 max-width: 60vw;
 }	
 
 article.wide {
	 max-width: 100%;
 }	
 
 article.wide, aside, nav {
	 padding-right: 1.5em;
 }
 
 aside {
	 float: right;
	 width: 35vw;
	 padding-left: 2em;	 
 }
  
 header {
	 padding-bottom: 4.5em;
 }
 
 #header-wrapper, main {
	 margin-left: 1.5em;
 }

 hr {
	 display: none;
 }
 
 footer {
	 clear: both;
 }
 
 nav {
	 float: right;
	 padding-top: 0.7em;		
 }
 
 nav li {
	 margin: 0.3em;
	 display: inline;
 }
 
 /* Size background :hover */
  nav a	{ 
	 padding: 1em;
 }
 /* End */
 
 footer {
	 padding-top: 0.1em;
	 padding-bottom: 0.1em;
 }
 
 /* Sticky footer (Footer at sreen-bottom) */
 html, body {
	 height: 100%;
 }
 
 footer {
	 bottom: 0;
 }
 
 #page-height-for-sticky-footer {
	 min-height: 100%;
	 margin-bottom: -2.9em;
 }
 /* End */
}

@media (min-width: 800px)  {	

 article {
     max-width: 63vw;
 }	

 aside {
	 width: 33vw;
 }
 #footer-smallscreen {
	 display: none;
 }
 
 #footer-widescreen {
	 display: inherit;
	 padding-left: 1.5em;
	 padding-right: 1.5em;
 }
}

@media (min-width: 980px)  {	

 article  {
     max-width: 66vw;
 }	

 aside {
	 width: 30vw;
 }
}

@media (min-width: 1280px)  {	

 #header-wrapper, main, #footer-widescreen {
	 max-width: 1200px;
	 margin-left: auto;
	 margin-right: auto;
	 padding-left: 1em;
	 padding-right: 1em;	
 }
 
 article {
	 max-width: 55vw;
	 padding-right: 3em
 }
 
 aside {
	 width: 19vw;
	 padding-right: 0em;
 }
}

@media (min-width: 1800px)  {

 article  {
	 max-width: 45vw;
 }
 
 aside {
	 width: 15vw;
 }
}