/* HTML elements */
* { 
	margin: 0; 
	padding: 0; 
}
body {
	color:#3f3f3f;
	text-align: center; 
	margin: 0;
	padding: 0;
	font-family: 'Source Sans Pro', sans-serif;
}
article {
	width: 100%;
}
img {
	width: 100%;
	height:auto;
}
#mainContent a:link,  #mainContent a:visited {
	text-decoration: none;
}
#mainContent a:hover {
	text-decoration: underline;
}
#mainContent h2 {
	padding: 1em 1em 0.5em;
	text-align: left;
	max-width: 625px; 
	margin: auto;
	font-size: 2em;
}
#mainContent h3 {
	padding: 1em  1em 1em 1em; 
	text-align: left;
	max-width: 625px; 
	margin: auto;
	font-weight: normal;
	font-size: 1.3em;
}
#mainContent p {
	width: 100%;
	max-width: 625px; 
	text-align: left; 
	line-height:1.5em;
	padding: 0  1em 1em 1em; 
	margin: 0 auto;
}
#mainContent ul {
	width: 100%;
	max-width: 625px; 
	text-align: left; 
	line-height:1.5em;
	margin: auto;
	padding: 0 0 0 2em;
}
#mainContent li {
	list-style: square;
	margin-bottom: 1em;
}
#globalFooter {
	background-color: #434343;
    color: #f3f3f3;
    font-size: 1em;
    padding: 0;
    margin: 0;
}
#globalFooterWrapper {
	width:90%;
	margin: 0em auto 0em auto;
	padding:3em 0 2em 0;
}

/* Global Site Navigation */

#globalNav {
	display: block; 
	width:100%; 
	margin: auto; 
	line-height: 2.5em; 
	position: absolute; 
	top:1em; 
	z-index: 1; 
	text-align: left;
}
#globalNavWrapper {
	background-color:#ffffff;
	border-radius: 3px;
	max-width:625px;
	margin: auto;
	box-shadow: 1px 2px 17px -8px #252525;
	line-height: 3em;
	/* box-shadow: 1px 1px 2px 0 #252525 */
}
#globalNavHome {
	display: inline-block;
	font-weight: bold;
	margin:0 1em 0 1em;
}
#globalNavHome a:link, #globalNavHome a:visited {
	color: #000000;
	text-decoration: none;
}
#globalNavHome a:hover, #globalNavHome a:active {
	color: #fedd43;
	text-decoration: none;
	border-bottom: 2px solid #fedd43;
}
#globalNavItems {
	display: inline-block;
	text-align: right;
	float: right;
}
#globalNavItems li {
	display: inline-block;
	margin-right:1em;
}
#globalNavItems a:link, #globalNavItems a:visited {
	color: #000000;
	text-decoration: none;
}
#globalNavItems a:hover, #globalNavItems a:active {
	color: #454545;
	text-decoration: none;
	border-bottom: 2px solid #454545;
}

/* Global Site Footer */

#globalFooter a:link, #globalFooter a:visited {
    color: #f3f3f3;
    text-decoration: none;
}
#globalFooter a:hover {
    color: #f3f3f3;
    text-decoration: underline;
}
#articleFooter {
	background-color: #f7f7f7;
	border-top: 1px dashed #bbb;
	border-bottom: 1px dashed #bbb;
	padding: 3em 0;
	color: #333333;
	
}
#articleFooter h2 {
	padding: 0;
	color: #000000;
}
#footnotesBox {
	font-size: 0.8em;
}
#footnotesBox p {
	padding: 1em 0 1em 0;
	border-bottom: 1px solid #dddddd;
}
#footnotesBox a:link, #footnotesBox a:visited {
	color: #333333;
	font-weight: bold;
    text-decoration: underline;
}
#footnotesBox a:hover {
	text-decoration: none;
	color: #aaaaaa;
}
.backfromfootnote {
    display: inline-block;
    background-color: #dbdbdb;
    border-radius: 4px;
    font-weight: bold;
    padding: 0.1em 0.3em;
    margin: 0 0 0 0.3em;
    text-decoration: none !important;
}

/* large article image */
#contentHeader {
	max-width: 100%;
	margin:0 0 3em 0;
	padding:0;
	min-height: 700px;
	max-height: 700px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
	background-color: #86b3db;
}

/* main article headline */
#contentHeader h1 {
	text-shadow: 1px 1px 1px #000; 
	font-size: 5em; 
	color: #fff; 
	max-width: 625px;
	margin:0 auto 0 auto;
	padding: 0 0.4em;
	line-height: 1.1em;
}
#contentHeader p {
	text-shadow: 1px 1px 1px #000; 
	font-size: 2em; 
	color: #fff; 
	padding: 2em auto 2em auto;
	margin: 0 auto;
	font-style: italic;
	text-align: center;
	max-width: 625px;
	font-weight: 100;
}
#headlineBox {
	position: absolute;
	bottom: 2em;
	left:auto;
	width: 100%;
}

/* article index */
#articleIndex {
	background-color: #f9f7df;
    color: #4f4d40;
    float: right;
    margin: 1em 10% 1em 2em;
    padding: 0;
    text-align: left;
}
#articleIndex h2 {
	font-size: 2em;
    margin: 0;
    padding: 0.5em 1em 0.5em 24px;
}
#articleIndexReadingtime {
	background-color: #e4f0d9;
    border-top: 1px solid #ddd;
    bottom: 0;
    color: green;
    font-size: 0.8em;
    line-height: 1.5em;
    margin: 1em 0 0 0;
    padding: 0.5em 1em 1em 24px;
	}
#articleIndex ol {
	padding: 0 24px 0 24px;
	margin: 0;
	list-style-position: inside;
	counter-reset: item;
}
#articleIndex li {
	line-height: 1.5em;
	list-style-type: inherit;
	font-weight: normal;
	color:#818181;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	display: block;
}
#articleIndex li:before {
	content: counters(item, ".") " ";
	counter-increment: item;
	padding-right: 0.3em;
}
#articleIndex a:link, #articleIndex a:visited {
	/* color: #4f4d40; */
	color: #ae9d2b;
	text-decoration: none;
	font-weight: normal;
}
#articleIndex a:hover {
	text-decoration: underline;
}

/* Sidebar Quote */

.articleSidebarQuote {
	background-color: #f6fdf6; 
	float: right; 
	margin: 1em 10% 1em 1em; 
	text-align: left;
	color: #89998d;
	padding: 0;
	width: 30%;
	min-width: 310px
}
.articleSidebarQuote blockquote {
	font-size: 1.5em;
    line-height: 1.25em;
    margin: 0;
    padding: 0 1em 1em;
}
.articleSidebarQuote blockquote p {
	padding: 0 !important;
}	
.articleSidebarQuote blockquote:before {	
	content: open-quote;
    display: block;
    font-size: 700%;
    height: 1px;
    margin-left: -0.55em;
    padding: 0.3em 0 0 0.3em;
    position: relative;
    color: #ccdcd0;
}
.articleSidebarQuote  footer {
	padding: 1em 0 0 0;
	font-style: italic;
	font-size: 0.6em;
}

/* Sidebar Note */

.articleSidebarNote {
    background-color: #fffbef;
    color: #a9996d;
    float: right;
    margin: 19px 10% 1em 1em;
    min-width: 310px;
    padding: 1em;
    text-align: left;
    width: 30%;
}
.articleSidebarNote p {
	padding: 0 !important;
	line-height: 1,25em;
}	

/* Picture that fits perfectly into the main column */

.inlineImage {
    margin: 0 auto 2em;
    max-width: 100%;
    padding: 0;
}
.inlineImage img {
	max-width: 100%; 
	margin:0; 
	padding:0; 
	text-align: right;
	vertical-align: bottom;
}
.inlineImageFullwidth {
	width: 100%;
	margin: 0px auto;
}
.inlineImageBackgroundcolor {
	width: 100%;
	margin: 0px auto;
	background-color: #fafafa;
}
.inlineImageBackgroundcolor div {
	width: 625px;
	margin: 0px auto;
}
.inlineImage figcaption {
	color: #818181;
    font-family: serif;
    font-style: italic;
    margin: 0.5em auto;
    padding: 0;
    text-align: left;
    width: 625px;
}

/* Picture that is larger than the main column */

.inlineImageXL {
	max-width: 80%;
	margin: 5em auto;
	padding:0;
}
.inlineImageXL img {
	width: 100%;
	height:auto;
	margin:0; 
	padding:0;
}
.inlineImageXL figcaption {
	 text-align: left;
	 color:#818181;
	 font-style: italic;
	 font-family: serif;
	 margin:0.5em auto 0 auto; 
	 padding:0;
	 width: 625px;
}
.marked {
	background-color: #fcfa7b
}
#socialbox p {
	text-align: center;
}
#socialbox ul {
  	margin: 0 auto 3em auto;
    max-width: 90%;
    padding: 0;
    text-align: center;
}
.social-sharing {
    list-style: none;
}
.social-sharing li {
    display: inline-block;
    text-align: left;
}
.social-button {
    border-radius: 3px;
    display: block;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1.1em;
    margin: 0 10px 10px 0;
    padding: 5px;
    text-decoration: none;
}
.social-button span {
    display: block;
    font-weight: normal;
}
.social-sharing .facebook {
    border: 1px solid #3B5998;
    color: #3B5998;
}
.social-sharing .facebook:hover {
    border: 1px solid #082665;
    color: #082665;
    background-color: #f8f9fc;
}
.social-sharing .twitter {
    border: 1px solid #4099FF;
    color: #4099FF;
}
.social-sharing .twitter:hover {
    border: 1px solid #0D66CC;
    color: #0D66CC;
    background-color: #f5faff;
}
.social-sharing .googleplus {
    border: 1px solid #D84B37;
    color: #D84B37;
}
.social-sharing .googleplus:hover {
    border: 1px solid #A51804;
    color: #A51804;
    background-color: #fdf7f6;
}
.social-sharing .pinterest {
    border: 1px solid #cb2027;
    color: #cb2027;
}
.social-sharing .pinterest:hover {
    border: 1px solid #980000;
    color: #980000;
    background-color: #fef6f6;
}
.social-sharing .linkedin {
    border: 1px solid #0976b4;
    color: #0976b4;
}
.social-sharing .linkedin:hover {
    border: 1px solid #004381;
    color: #004381;
    background-color: #f5fbfe;
}
.social-sharing .tumblr {
    border: 1px solid #35465c;
    color: #35465c;
}
.social-sharing .tumblr:hover {
    border: 1px solid #35465C;
    color: #35465C;
    background-color: #f9fafb;
}
.social-sharing .xing {
    border: 1px solid #026466;
    color: #026466;
}
.social-sharing .xing:hover {
    border: 1px solid #003133;
    color: #003133;
    background-color: #f5ffff;
}
.social-sharing .whatsapp {
    border: 1px solid #4dc247;
    color: #4dc247;
}
.social-sharing .whatsapp:hover {
    border: 1px solid #1A8F14;
    color: #1A8F14;
    background-color: #f8fcf7;
}

/* Related Articles */

#relatedContent {
	font-size: 1em;
	width: 100%;
	max-width: 625px; 
	text-align: left; 
	line-height:1.5em;
	padding: 0  1em 1em 1em; 
	margin: 0 auto;
}
#relatedContent h1 {
	padding: 2em  1em 0.4em 0; 
	text-align: left;
	margin: auto;
	font-size: 2em;
}
 .previewPicture {
	margin:0 0.5em 0 0; 
	padding:0;
	display: inline-block; 
	width:45%
}
.previewBox .previewPicture img {
	max-width: 100%; 
	margin:0; 
	padding:0; 
	text-align: right;
	vertical-align: bottom;
}
.previewBox {
	display: inline-block;
	margin:0 0 3em 0;
	border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
}
.previewBox h2 {
	margin:1em 0 0.4em 0;
}
.previewBox h2 a:link, .previewBox h2 a:visited {
	color:#333;
	text-decoration: none;
}
.previewBox h2 a:hover {
	color:#aaa;
	text-decoration: underline;
}
#relatedContentHead {
	margin:0 0 2em 0;
}
.previewBox p {
	margin:0 0 0 0;
}
.previewBoxText {
	display: inline-block;
	width:49%;
	vertical-align: top;
	margin:0 0 0 1em;
}
#footerBreadcrumbs {
	color: grey;
	text-align: left;
	float: left;
}
#footerContact {
	color: grey;
	text-align: right;
}


/* min-width */
@media screen and (min-width: 900px) {
	.social-sharing .whatsapp {
		display:none;
	}
	.social-button {
		font-size: 1em;
	}
	.cd-top {
	  display: inline-block;
	  height: 40px;
	  width: 40px;
	  position: fixed;
	  bottom: 90px;
	  right: 20px;
	  background-color: #ededed;
	  overflow: hidden;
	  line-height: 40px;
	  white-space: nowrap;
	  visibility: hidden;
	  color:#8c8c8c;
	  opacity: 0;
	  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
	  -moz-transition: opacity .3s 0s, visibility 0s .3s;
	  transition: opacity .3s 0s, visibility 0s .3s;
	}
	.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
	  -moz-transition: opacity .3s 0s, visibility 0s 0s;
	  transition: opacity .3s 0s, visibility 0s 0s;
	}
	.cd-top.cd-is-visible {
	  /* the button becomes visible */
	  visibility: visible;
	  opacity: 1;
	  color:#8c8c8c;
	}
	.no-touch .cd-top:hover {
	  background-color: #e86256;
	  opacity: 1;
	}

}

/* min-width & max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
	#contentHeader {
		min-height: 360px;
		max-height: 360px;
	}
	#contentHeader h1 {
		font-size: 3em;
		padding:0;
	}
	#articleIndex {
		width:100%;
		margin:0 auto 1em auto;
		float:none;	
	}
	.inlineImageXL {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}
	.inlineImage {
		width: 90%;
	}
	#articleIndex {
		width: 90%;
	}
	#mainContent h2 {
		width: 90%;
		margin: 0 auto 0.5em auto;
		padding: 0;
		max-width: 90%;
	}
	#mainContent h3 {
		width: 90%;
		margin: 0 auto 0.5em auto;
		padding: 0;
		font-weight: bold;
		max-width: 90%;
	}
	#mainContent p {
		width: 90%;
		margin: 0 auto 1.5em auto;
		padding: 0 0 1em 0;
		max-width: 90%;
	}
	#mainContent ul {
		width: 90%;
		margin: 0 auto 0.5em 5%;
		padding: 0;
		max-width: 100%;
	}
	#socialbox ul {
		display: inline-block;
		margin: 0 auto 5em auto;
		padding: 0;
		width: initial;
		max-width: 80%;
	}
	#mainContent li { 
		list-style-position: inside;
	}
	.articleSidebarQuote {
		margin:1em;
	}
	#globalNavWrapper {
		width: 100%;	
	}
	#contentHeader h1 {
		width: 100%;	
	}
	.articleSidebarNote {
		margin: 1em;
		min-width: 200px; 
	}
	#contentHeader p {
		width: 100%;	
		font-size: 1.5em;
		margin-top: 0.1em;
	}
	.inlineImageBackgroundcolor div {
		width: 100%;	
		margin: 0;
		padding: 0;
	}
	.inlineImage figcaption {
		width: 100%;
		margin: 0.5em auto 2em auto;	
	}
	.inlineImageXL figcaption {
		width: 90%;
		margin: 0.5em auto 2em auto;
	}
	#relatedContent {
		width:90%;
		margin: 0 auto 0.5em auto;
		padding: 0;
	}
	#footnotesBox {
		font-size: 0.8em;
	}
	.previewBox {
		
	}
	.previewPicture {
		width:100%;
	}
	.previewBoxText {
		width:100%;
		margin:0 0 1em 0;
	}
	#globalFooter {
		font-size: 1em;
	}
	.cd-top {
		display: none;
	}
	#footerBreadcrumbs {
		display:none;
	}
}


/* max-width */
@media screen and (max-width: 600px) {
	#globalNav {
		display: none;
	}
	#contentHeader {
		min-height: 450px;
		max-height: 450px;
	}
	#contentHeader h1 {
		font-size: 3em;
		padding:0;
	}
	.inlineImageXL {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}
	#articleIndex {
		display:none;
	}
	#mainContent h2 {
		width: 90%;
		margin: 0 auto 0.5em auto;
		padding: 0;
	}
	#mainContent h3 {
		width: 90%;
		margin: 0 auto 0.5em auto;
		padding: 0;
		font-weight: bold;
	}
	#mainContent p {
		width: 90%;
		margin: 0 auto 1.5em auto;
		padding: 0 0 1em 0;
	}
	#mainContent ul {
		width: 90%;
		margin: 0 auto 0.5em auto;
		padding: 0;
		max-width: 100%;
	}
	#mainContent li { 
		list-style-position: inside;
	}
	.articleSidebarQuote {
		margin:1em;
	}
	#globalNavWrapper {
		width: 100%;	
	}
	#contentHeader h1 {
		width: 100%;	
	}
	.articleSidebarNote {
		margin: 1em;
		min-width: 200px; 
	}
	#contentHeader p {
		width: 100%;	
		font-size: 1.5em;
		margin-top: 0.1em;
	}
	.inlineImageBackgroundcolor div {
		width: 100%;	
		margin: 0;
		padding: 0;
	}
	.inlineImage figcaption {
		width: 90%;
		margin: 0.5em auto 2em auto;	
	}
	.inlineImageXL figcaption {
		width: 90%;
		margin: 0.5em auto 2em auto;
	}
	#relatedContent {
		width:90%;
		margin: 0 auto 0.5em auto;
		padding: 0;
	}
	#footnotesBox {
		font-size: 1em;
	}
	.previewBox {
		
	}
	.previewPicture {
		width:100%;
	}
	.previewBoxText {
		width:100%;
		margin:0 0 1em 0;
	}
	#globalFooter {
		padding: 1em;
		font-size: 1em;
	}
	#globalFooter div {
		margin: 0 0 1em 0;
		clear: both;
	}
	.cd-top {
		display: none;
	}
	#footerBreadcrumbs {
		display:none;
	}
	.backfromfootnote {
		margin: 1em 0 0.5em 0;
		display: list-item;
		text-align: center;
		list-style-type: none;
	}
}