/*
style_home.css
*/

/***************************************************
			Shortlinks
***************************************************/
.homeSectionShortLinks{
	padding-top: 20px;
}

.homeSectionShortLinks:after{
	content: " ";
	display: table;
	clear: both;
}

.homeSectionShortLinks p{
	font-family: Arial;
	font-size: 0.8em;
	color: rgb(100,100,100);
	text-align: center;
}



/***************************************************
			Announcements
***************************************************/
.homeSectionAnnouncements{
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	padding-top: 40px;	
	padding-bottom: 40px;	
	
}

.homeSectionAnnouncements .center p{
	font-size: 0.9em;
	display: inline-block;
	background-color: rgb(255, 230, 70);
	
	border-radius: 5px;
	padding: 10px 15px 10px 15px;
	overflow: hidden;	
	text-align: center;
	
}


/***************************************************
			Current articles
***************************************************/
.homeSectionCurrentArticles{
	margin-top: 30px;
	padding-bottom: 100px;
}

.homeSectionCurrentArticles:after{
	content: " ";
	display: table;
	clear: both;
}


.currentArticlesLeft{
	width: 70%;
	float: left;
}

.currentArticlesLeft:after{
	content: " ";
	display: table;
	clear: both;
}


/***************************************************
		Article row
***************************************************/
.articleRow{
	border-bottom: 1px solid rgb(250,120,120);
	display: flex;
	
	margin-top: 1%;
	margin-bottom: 1%;
	
	padding-left: 1%;
	padding-right: 1%;
	
	padding-top: 2%;
	padding-bottom: 2%;
}

.articleRow:last-child{
	border-bottom: none;
}

.articleRow:after{
	content: " ";
	display: table;
	clear: both;
}

/***************************************************
		Additional posts
***************************************************/
.articleRow.additionalPosts{
	background-color: rgb(220,220,220);
	display: none;
	border: none;
}

/***************************************************
		Article
***************************************************/
.currentArticle{
 	float: left;
	width: 32%;
	
	position: relative;
	
	padding-left: 3%;
	padding-right: 3%;	
}

.currentArticle:first-child{
	padding-left: 0%;
	width: 40%;
}

.currentArticle:last-child{
	padding-right: 0%;	
	width: 28%;
}

.currentArticleThumbnail{	
	width: 100%;
	background-size: 100%;
	background-position: top-center;
	background-color: rgb(150,150,150);
	background-repeat: no-repeat;

	opacity: 0.9;
	cursor: pointer;
	
	margin-top: 60px;
}

.currentArticleThumbnail:hover{		
	background-color: rgb(200,200,200);
	opacity: 0.6;	
}

.currentArticle:last-child .currentArticleThumbnail{
	margin-top: 60px;
}

.currentArticle:first-child .currentArticleThumbnail{
	margin-top: 0px;
}

.currentArticleThumbnailInner{
	padding-top: 71%; /* Wichtig, legt Seitenverhältnis fest */
	background: linear-gradient(to bottom right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0) 40%);
}



.currentArticleTextWrapper{	
	margin-top: 10px;
}

.currentArticleTextWrapper p.currentArticleDate{
	color: rgb(100,100,100);
	margin-top: 10px;
	font-size:0.8em;
	font-style: italic;
}

.currentArticleTextWrapper p.currentArticleDate a{
	color: rgb(250,120,120);
	text-decoration: none;

}
 
.currentArticleTextWrapper h3{
	font-family: Alegreya, Georgia, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 1em;
	
	/* line-height: 1em; */
}

.currentArticleTextWrapper p.currentArticleExcerpt{
	margin-top: 5px;
	font-size: 0.95em;
	
}

/***************************************************
		First article
***************************************************/
.currentArticle.firstArticle{
	width: 100%;
}

.firstArticle .currentArticleTextWrapper{
	width: 52%;
	float: left;
}
  
.firstArticle .currentArticleThumbnail{
	width: 45%;
	float: right;
}

.firstArticle .currentArticleTextWrapper h3{
	font-size: 1.8em;
	line-height: 1.3em;
	margin-top: .8em;
}

/***************************************************
		Show more
***************************************************/
.homeSectionShowMore{
	width: 100%;
	margin-top: 4%;
	margin-bottom: 5%;
	
}

.showLessButton{
	display: none;
}

a.showMoreButton{
	display: inline-block;
}

a.showMoreButton, a.showLessButton{
	text-align: center;
	border: 1px solid rgb(250,120,120);
	
	background-color: white;
	
	padding: 20px 20px 20px 20px;
	
	font-family: Arial;
	font-size: 1em;
	font-weight: bold;
	color: rgb(250,120,120);
	
	text-decoration: none;
	font-size: 0.9em;	
	margin-bottom: 10px;
	
}

a.showMoreButton:hover,a.showLessButton:hover{
	background-color: rgb(220,220,220);
	cursor: pointer;
}



/***************************************************
			Featured articles
***************************************************/

.articleRow.featured{
	border-bottom: none;
}

.currentArticle.featured{
	width: 50%;
	padding-left: 2%;
	padding-right: 2%;	
	border-right: 1px solid rgb(250,120,120);	
}

.currentArticle.featured:last-child{
	border-right:none;
}

.currentArticle.featured .currentArticleThumbnail{
	display: none;
}

.currentArticle.moreOnThisFeature{
	padding-top: 20px;
}

.currentArticle.moreOnThisFeature a{
	/* width: 100%;	 */
	text-align: center;
	/* display: inline-block; */
	border: 1px solid rgb(250,120,120);
	
	background-color: white;
	
	padding: 20px 50px 20px 50px;
	
	font-family: Arial;
	font-size: 1em;
	font-weight: bold;
	color: rgb(250,120,120);
	
	text-decoration: none;
	font-size: 0.9em;
	
	
}

.currentArticle.moreOnThisFeature a:hover{
	background-color: rgb(220,220,220);
}

/***************************************************
			Divider
***************************************************/
.homeDivider{
	width: 100%;
	border-top: 2px solid black;
	padding-top: 70px;
	padding-bottom: 30px;	
}

.homeDivider h3{
	font-size: 2.5em;
	font-weight: bold;	
}

.homeDivider#theorie{
	background: rgb(250,120,120);
}

.homeDivider#theorie h3{
	color: white;
}

.homeDivider#theorie p{
	/* color: rgb(200,200,200); */
}


.homeDivider#suche{
	background: rgb(220,220,220);
}

.homeDivider#suche h3{
	color: black;
}


/***************************************************
			Featured articles
***************************************************/
.homeSectionFeaturedArticles{
	background-color: rgb(250,120,120);
	padding-bottom: 40px;
}

.homeSectionFeaturedArticles:after{
	content: " ";
	display: table;
	clear: both;
}

.homeSectionFeaturedArticles .center{	
	background-color: white;
	padding-bottom: 30px;
}

.featuredTitle{
	border-top: 80px solid rgb(120,120,120);
	padding: 15px 5px 0px 5px;
	display:inline-block;
}

.featuredTitle h3{
	font-size: 1.4em;
	font-weight: bold;
	color: rgb(120,120,120);
	font-family: Arial;
}

/***************************************************
			Archiv
***************************************************/

.homeSectionArchive{
	background-color: rgb(220,220,220);
	padding-bottom: 50px;
}

.homeSectionArchive .center{
	background-color: white;
	padding-bottom: 60px;
}

.homeArchiveText{	
	margin-left: 50px;
	margin-top: 50px;
	/* padding-bottom: 50px; */
}

.homeSectionArchive .featuredTitle{
	border-top: 80px solid rgb(250,120,120);

}
.homeSectionArchive .featuredTitle h3{
	color: rgb(120,120,120);

}

a.archiveLink{
	border: 1px solid rgb(120,120,120);
	background-color: white;
	padding: 20px 20px 20px 20px;
	font-family: Arial;
	font-size: 1em;
	font-weight: bold;
	color: rgb(120,120,120);
	margin-right: 10px;
	text-decoration: none;
	display: inline-block;
	margin-bottom: 10px;
}

a.archiveLink:hover{
	background-color: rgb(220,220,220);
}

/***************************************************
			Taglist
***************************************************/

.homeSectionArchive p.taglist{
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
	
	font-size: .9em;
}

.small{
	font-size: 0.7em;
}

/**********************************************************************************************************************************************/
/*												Responsive styles																			  */
/**********************************************************************************************************************************************/
@media (max-width: 1000px){
	.currentArticlesLeft{
		width: 100%;
		float: none;
		margin: 0 auto;
	}
	
	/* Sidebars */
	.sidebarIntro{
		float:none !important;
		width: 100% !important;
		padding: 10px !important;
	}
	
	.sidebarIntro p.buttonlink{
		display: inline-block;
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.sidebarMostRead{
		display: block !important;
		width: 100% !important;
		float: none !important;
		padding: 10px !important;
	}
	
	.sidebarMostRead .sidebarTitle h3{
		font-size: 1.2em;
		font-weight: bold;
	}
}


/***************************************************
			800px
***************************************************/
@media (max-width: 800px){
	.homeSectionShortLinks{
		/* padding-top: 5px; */
	}


	.homeSectionCurrentArticles{
		
		/* padding-bottom: 100px; */
		max-width: 400px;
		margin: 0 auto;
		margin-top: 30px;
		padding-bottom: 40px;
	}
	.currentArticlesLeft{
		width: 100%;
		float: none;
		margin: 0 auto;
		padding-bottom: 50px;
	}
	
	.articleRow, .homeSectionShowMore{
		display: block; /* Remove flex */
		margin: 0;
		border: none;
		
		padding-left: 4%;
		padding-right: 4%;
		/* padding: 0; */
		
	}
	
	.currentArticleTextWrapper{
		margin-top: 0px;
	}
	
	/* First article */	  
	.firstArticle .currentArticleThumbnail, .currentArticleThumbnail{
		width: 100%;
		float: none;
		margin: 0 auto;
	}
	
	.firstArticle .currentArticleTextWrapper, .currentArticleTextWrapper{
		width: 100%;
		float: left;
	}
	
	.firstArticle .currentArticleTextWrapper p.currentArticleDate, .currentArticleTextWrapper p.currentArticleDate{
		font-size: .8em;
	}

	.firstArticle .currentArticleTextWrapper h3, .currentArticleTextWrapper h3{
		font-size: 1.1em;		
		margin-top: 0.2em;
	}
	
	
	.firstArticle .currentArticleTextWrapper p.currentArticleExcerpt, .currentArticleTextWrapper p.currentArticleExcerpt{
		font-size: .9em;
		margin-top: 0.2em;
	}
	
	/* Remaining articles */

	.currentArticle, .currentArticle:first-child, .currentArticle:last-child{
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid rgb(250,120,120);
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	
	.currentArticle:after{
		content: " ";
		display: table;
		clear: both;
	}
	
	.currentArticle .currentArticleThumbnail, .currentArticle:first-child .currentArticleThumbnail, .currentArticle:last-child .currentArticleThumbnail{
		margin-top: 0px;
		
	}
	
	/* Featured articles */
	.homeSectionFeaturedArticles .center{
		max-width: 400px;
	}
	
	.currentArticle.featured{
		border-right: none;		
	}
	
	.currentArticle.featured:last-child{
		border-bottom: none;
	}
	
	.currentArticle.moreOnThisFeature{
		text-align: center;
	}
	
	.featuredTitle{
		display: block;
		width: 100%;
	}
	
	.homeDivider{
		text-align: center;
	}
	
	.homeDivider h3{
		display: inline-block;
	}

	/* Archiv */
	.homeSectionArchive .center{
		max-width: 400px;
	}
	
	
	.homeArchiveText{
		margin-left: 10px;
	}
	
	a.archiveLink{
		display: inline-block;
		margin-right: 10px;
	}
	
	/* Taglist */
	.homeSectionArchive p.taglist{
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
	}
}