/*
Article
*/
/***************************************************
			Text styles
***************************************************/
body{
	color: rgb(20,20,20);	
}

p{
	color: rgb(80,80,80);
}

/***************************************************
			Page layout/sections
***************************************************/
/*	Formatting for the "big" sections */
.artSectionHeader, .artSectionContent, .artSectionSubscribe, .artSectionNextArticles, .artSectionRelatedArticles, .artSectionRelatedArticlesWrapper, .artRelatedArticle{	
	float: none;
}
/*	Preventing following floats from moving upwards -- ohne .artSectionHeader:after, */
/*	.artSectionSubscribe:after, .artSubscribeBox:after, .artSubscribeButtonInset:after,*/
.artSectionContent:after, .artSectionNextArticles:after, .artSectionNextArticles .centerText:after, .artSectionRelatedArticles:after, .artSectionRelatedArticlesWrapper:after, .artRelatedArticle:after{
	content: " ";
	display: table;
	clear: both;
}
/* .centerText, .centerText*, .artSectionHeader, .artSectionHeader*{
	border: solid 10px rgb(0, 0, 0);	
}
 */
/***************************************************
			Header
***************************************************/
.sidebarMostRead:not(.bottom){
	background: none !important;
	border: 1px solid rgb(250,120,120);
	margin-top: 50px !important;
}

.sidebarMostRead.bottom{
	display: none;
}


.artDateAndCategory{
	margin-top: 80px;
	color: rgb(100,100,100);
	font-size: 0.9em;
	margin-left: -60px;
}
.artTitle{
	margin-top: 0.8em;	
	margin-left: -60px;
}
.artTitle h1{
	font-size: 2.5em;
	line-height: 1.3em;
	font-family: Georgia, serif;
}
	
.artExcerpt{
	margin-top: 1em;
	width: 100%;
}
.artExcerpt p{
	color: rgb(80,80,80);
	font-size: 1em;
}
.artAuthor{
	color: rgb(100,100,100);
	margin-top: 20px;
}

.artAuthor a{
	color: rgb(250,120,120);
}

.artThumbnail{
	width: 100%;
	max-width: 400px;
	background-size: 100%;
	background-position: center;
	/* border: 1px solid rgb(180,180,180); */
	background-color: white;
	background-repeat: no-repeat;
	opacity: 0.9;
	
	margin-top: 20px;
	margin-bottom: 10px;
}
.artThumbnailInner{
	padding-top: 71%;
}
.articleThumbnailSubtitle{
	font-size: 0.8em;
	color: rgb(100,100,100);
	margin-top: 5px;
	
}
/***************************************************
			Content
***************************************************/
.artSectionContent{
	margin-top: 40px;
}
.artText{
	margin-left: 0px;
	/* width: 90%; */
	/* max-width: 800px; */
}
/* .artText p{
	font-size: 1.05em;
	line-height: 1.75em;
	text-align: left;
	margin-bottom: 1.2em;
	font-family: "Noto Serif", "Georgia", serif;

} */

.artText p, .artText ul, .artText li, .artText blockquote{
	font-size: 1em;
	line-height: 1.6em;
	text-align: left;
	margin-bottom: 1.2em;
	font-family: "Roboto", Verdana;
	color: rgb(80,80,80);

}


.artText h3{
	font-size: 1.2em;
	font-weight: 700;	
	margin-top: 1.8em;
	margin-bottom: 0.5em;
	margin-left: -60px;
	text-align: left;
	line-height: 1.7em;
	font-family: "Georgia", serif;
}
.artText blockquote{
	padding-left: 25px;
	margin-right: 0px;
	margin-top: 1em;
	margin-bottom: 1.5em;
	/* font-style: italic; */
	border-left: 1px solid rgb(50,50,50);
	display: block;	
	
	/* color: rgb(100,100,100); */
}

.artText blockquote+blockquote{
	padding-top: 0.5em;
	margin-top: -1.5em;	
}

.artText blockquote p{
	display: inline-block;
	text-indent: 0px !important;
	margin-bottom: 0em;
}

.artSocialButtons{
	width: 100%;
	border: 1px solid rgb(200,200,200);
	padding: 10px 30px 10px 30px;
	margin-top: 80px;
	margin-bottom: 80px;
	/* width: 80%; */
}

.artText a{
	/* color: rgb(100,0,0); */
}

/***************************************************
			Subscribe
***************************************************/
.artSectionSubscribe{
	margin-top: 40px;
}
.artSubscribeBox{
	background-color: rgb(240,240,240);	
	padding: 3% 3% 3% 3%;
	width: 82%;
	border-radius: 3px;
	border: 1px solid rgb(235,235,235);
}
.artSubscribeButtonContainer{
 	float: none;
 
	width: 220px;
	margin-left: auto;	
	margin-right: auto;
	margin-bottom: 1.5em;
}
.artSubscribeText p{
	margin-top: 2px;
	font-size: 1em;	
	color: rgb(40,40,40);
	line-height: 1.6em;
	margin-bottom: 1em;
}
.artSubscribeText h3{
	font-size: 1.8em;
	border-bottom: 5px solid rgb(250,120,120);
	display: inline-block;
	margin-bottom: 0.5em;
	margin-left: 0px;
}
/***************************************************
			Subscribe: Subscription options
***************************************************/
.artSubscribeOptionIntroduction p{
	font-style: italic;
	margin-top: 30px;
}
.artSubscribeOptionText{
	padding: 10px 20px 20px 20px;
	background-color: rgb(255,255,255);
	border-radius: 5px;
	margin-bottom: 1em;
}
.artSubscribeOptionText p{
	font-size: 1em;
	line-height: 1.7em;
	margin-left: 30px;
}
.artSubscribeOptionText h3{
	font-size: 1.2em;
	font-weight: 700;		
	margin-bottom: 0.5em;
	text-align: left;
	border-bottom: none;
	margin-left: 0px;
}
.artSubscribeOptionColorBox{
	float: left;
	width: 0.6em;
	height: 0.6em;
	margin-top: 0.4em;
	margin-right: 15px;
	background-color: rgb(250,120,120);
}
.artSubscribeOptionForm{
	font-size: 0.85em;
}
/***************************************************
			Subscribe: Free articles
***************************************************/
.artSubscribeFreeArticles{
	margin-top: 50px;
}
.artSubscribeFreeArticles h3{
	font-size: 1.2em;
	border-bottom: 5px solid rgb(250,120,120);
	display: inline-block;
	margin-bottom: 0.5em;
}
.artSubscribeFreeArticles p, .artSubscribeFreeArticles a{
	font-size: 1em;
	color: rgb(80,80,80);
}
/***************************************************
			Next articles (same issue)
***************************************************/
.artSectionNextArticles{	
	background-color: rgb(250,250,250);
	border-top: 1px solid rgb(220,220,220);	
	padding-top: 40px;
	margin-top: 100px;	
}
.artNextArticlesIntroduction{
	float: left;
	clear: both;
	width: 30%;
	padding-right: 20px;
	font-size: 1.1em;
}
.artNextArticleWrapper{
	float: right;
	width: 70%;
}
.artNextArticle{
	padding-right: 40px;
	padding-bottom: 20px;
	float: left;
	width: 50%;
	margin-bottom: 40px;
}
.artNextArticle:after{
	content: " ";
	display: table;
	clear:both;
}
.artNextArticle h3{
	font-size: 1em;
	font-family: "Helvetica Neue", Helvetica, Arial;
	font-weight: 700;
	color: rgb(100, 100, 100);
	margin-bottom: 0.5em;
}
.artNextArticle p{
	font-size: 0.9em;
}
.artNextArticle a{
	text-decoration: none;
}
p.artNextArticleCategory{
	font-family: "Helvetica Neue", Helvetica, Arial;
	color: rgb(100,100,100);	
	font-size: 0.75em;	
}
.artNextArticleThumbnail{
	width: 70%;
	background-size: 100%;
	background-position: center;
	border: 1px solid rgb(180,180,180);
	background-color: white;
	background-repeat: no-repeat;
	opacity: 0.6;
	
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	
	cursor: pointer;	
}
.artNextArticleThumbnail:hover{		
	background-color: rgb(200,200,200);
	background-size:100%;
}
.artNextArticleThumbnailInner{
	padding-top: 71%;
}
/***************************************************
			Related articles (same tags)
***************************************************/
/*	Jetzt in style_articleList.css	*/
.artSpanRelated{	
	display: inline-block;
	/* border: 5px solid rgb(250,120,120); */
	/* background: rgb(240,240,240); */
	padding-top: 35px;
	border-top: 1px solid black;
	border-top: 5px solid rgb(250,120,120);
	font-style: italic;
}

.artSpanRelated h3{
	/* font-size: 1em; */
	/* font-weight: normal; */
	margin-top: 0px;
	margin-left: 0px;
	display: none;
}

.artSpanRelated p{
	display: inline;
}

/**********************************************************************************************************************************************/
/*												Responsive styles																			  */
/**********************************************************************************************************************************************/
/***************************************************
			1100px red
***************************************************/
@media (max-width: 1100px){
	.artDateAndCategory{
		margin-top: 40px;
	}
	
	.artTitle{
		margin-top: 0em;
	}
	
	.artText{
		width: 95%;
	}
	
	.artText h3{
		margin-left: 0px;
		margin-bottom: 0.2em;
	}
	
	.artDateAndCategory, .artTitle{
		margin-left: 0px;
	}
	
	.artText p{
		margin-bottom: 0.5em;
	}
	
}
/***************************************************
			1000px green
***************************************************/
@media (max-width: 1000px){
	.artTitle{
		width: 80%;
	}
	
	.artTitle h1{
		font-size: 2em;
	}
	
	.artExcerpt{
		margin-top: 0.5em;
		width: 100%;
	}
		
	/* .artText{
		width: 80%;
	}	 */
	
	.artSubscribeText h3{
		font-size: 1.5em;
	}
	
	.artNextArticlesIntroduction{
		float: none;
		width: 100%;		
	}
	
	.artSectionNextArticles{
		padding-top: 30px;
	}
	
	.artNextArticleWrapper{
		width: 100%;
		margin-top: 10px;
		padding-left: 15px;
	}
	
}
/***************************************************
			1000px, part 2
***************************************************/
@media (max-width: 1000px){
	/* Sidebars */
	
	.sidebarMostRead{
		display: block;
	}
	
	.sidebarMostRead:not(.bottom){
		display: none !important;
	}
	
	.sidebarMostRead.bottom{
		margin-top: 20px;
		display: block !important;
		width: 100% !important;
		float: none !important;
		/* padding: 20px 10px 10px 10px !important;		 */
		padding: 0px !important;
		border: none;
		/* background: none !important; */
		
		/* max-width: 500px; */
		margin: 0 auto;		
		background: none !important;

	}
	.sidebarMostRead.bottom .sidebarTitle{
		border-top:50px solid rgb(250,120,120);
		border-bottom: 20px solid rgb(250,120,120);
		background-color: rgb(250,120,120);
		margin-bottom: 20px;
	}
	
	.sidebarMostRead.bottom .sidebarTitle h3{
		font-size: 1.5em;
		margin-bottom: 0px;
		font-family: Arial;
		font-weight: bold;
		color: rgb(120,120,120);
		
		color: white;
		padding-left: 30px;
		
	}
	
	.sidebarMostRead.bottom .sidebarListArticle{
		float: none;
		margin-left: 15px !important;
	}
	
	/* .sidebarMostRead.bottom .sidebarListArticleThumbnail{
		max-width: 
	} */
	
	
}
/***************************************************
			800px orange
***************************************************/
@media (max-width: 800px){
	
	.artSubscribeBox{
		width: 100%;
	}
	
	.artSubscribeOptionText h3{
		font-size: 1.2em;
	}
	
	.artSubscribeOptionText p{
		margin-left: 0px;
	}
	
	.artRelatedArticlesIntroduction{
		padding-bottom: 2px;
		margin-bottom: 20px;
		font-size: 1.1em;
	}
	
}
/***************************************************
			700px yellow
***************************************************/
@media (max-width: 700px){
	.artTitle h1{
		font-size: 1.5em;
	}
	.artSubscribeButtonContainer{
		float: none;		
		margin-left: 0px;		
	}
	
	.artText{
		width: 100%;
	}
	
	.bigButton.subscribeButtonInset{
		padding: 10px 5px;
		width: 150px;
	}
	
	.bigButton>.subscribeButton{
		padding: 20px 0px;
	}
	
	.bigButton .subscribeValue p{
		font-size: 1em !important;
	}
	
	.bigButton .subscribeType p{
		font-size: 1em !important;
	}
	
	.bigButton.subscribeButtonInset{
		width: 200px;
		padding: 8px;
	}
	
	.bigButton.subscribeButton{	
		padding: 15px 0px 15px 0px;
	}
	
}
/***************************************************
			600px magenta
***************************************************/
@media (max-width: 600px){
	.artSectionNextArticles{
		padding-top: 20px;
		padding-bottom: 10px;
	}
	.artNextArticle{
		width: 100%;
		float: right;
		padding-right: 5px;
		clear: both;
		margin-bottom: 10px;
	}
	
	.artNextArticle h3{
		margin-bottom: 5px;
	}
	
	.artNextArticleThumbnail{
		width: 200px;
	}
	
}
/***************************************************
			500px brown
***************************************************/
@media (max-width: 500px){
	.artThumbnail{
		width: 80%;
	}
	
}
/***************************************************
			400px black
***************************************************/
@media (max-width: 400px){
}