/* alternatives Boxmodell */

/* Font-face Icons */
@font-face {
	font-family: 'CHILLER';
	src: url('./CHILLER.eot');
	src: local('CHILLER'), url('./CHILLER.woff') format('woff'), url('./CHILLER.ttf') format('truetype');
}
/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_1382">Text with this font applied</p> */
.fontsforweb_fontid_1382 {
	font-family: 'CHILLER' !important;
}

*, ::before, ::after {
  box-sizing: border-box;
}

body {
  max-width: 75em;
  margin: 0 auto;
  padding: 0 1em;
  font: normal 1em Arial;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
  color: #262626; 
  background-color: #585858;
}

* {
	box-sizing: border-box;
	
}

/* === Farben, Formen und Schriftgrößen === */

h1 {
	margin: 0 0 1em;
	font-size:20pt;
	color: black;
}

h2 {
	margin: 0 0 1em;
	color: white;
	margin: 0 0 1em;
	
}

h3 {
	color:#FF0000;  
	font-size:20pt;  /* Größe */
	font-family:Chiller, sans-serif; /* Schriftart */
}	
	
a { 
	color: white; 
	outline: none; 
	text-decoration: none;
	
}
a:hover,
a:focus	{ 
	color: red; 
	background: none;
	text-decoration: none; 
}

a.more	{ 
	float: right; 
	font-weight: bold; 
	padding: 0.3em 1em; 
	color: midnightblue; 
	text-decoration: none; 
	background: url('../img/icon/arrow.png') no-repeat right; }
a.more:hover,
a.more:focus { 
	color: #535353; 
}

main img {
	width: 100%;
}

[alt=decoration]{
	width: auto;
}



/** CONTENT  - Layout **/
header {
	color:white;
	background: #585858;
}

#logo{
	display:inline-block;
	color:white;
	padding: 0em;
	font-size:150%;
}

#fenster{
	font: bold 1em 
	display:inline-block;
	color:grey;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	padding-right: 1.5em;
	padding-left: 2em;
	background: #fff;
	font-size:100%;
}

/*  section.flexslider ist im eigenen flexslider.css definiert!  */

main {
  display: grid;
  grid-gap: 0rem;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}

article,
main > h1,
#bar {
	grid-column: 1 / -1;     /* nimmt volle Breite ein */	
}

article {
	margin-top: 2em;	
  	-webkit-column-count: 4;  
  	-webkit-column-width: 20em; 
  	columns: 4 20em;  
  	-ms-hyphens: auto;
  	-webkit-hyphens: auto;
  	hyphens: auto;  
}

aside {
	color:white;
	background: #34383D;	
	padding: 1em;
}

aside h1,aside section ul{color:white;}	

section{
	margin-bottom: 2em;
	padding: 1em;
}

section#bar {
	position:relative;	
	margin-bottom:2em;
	display: grid;
			
}

section#bar:before,
section#bar:after,

#bar:before {
	left: 0;
	top: 0;
}

#bar:after{    
	transform: scale(-1,1);
	right:0;
}

#bar form {
	float:right;
	padding: 1em 0 0 2em;
	text-aling: right;
}

img.resp {width:100%}

ul.feature{
}

ul.feature li{
	border-bottom: 2px dotted #616161;
    color: #CCCCCC;
    list-style: square;
    padding: 15px 0 5px 15px;
}

p.tweet-box{
	background: none repeat scroll 0 0 #000000;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 14px;
    padding: 12px;
}
p.tweet-box span, p.tweet-box a {
    color: #07B2E6;
}

a[aria-current=page]{
	background: grey;
	color: yellow;
	
}

/* 1-Spaltenlayout  */
@media only screen and (max-width: 500px) {

article section, section.spalte {width:100%;}
}