/* General */
main.container { padding: 0 0 40px; max-width: 96%; }
main:after, #author:after { clear: both; content: ' '; display: block; }
main > big { display: block; text-align: center; margin: 0 0 40px; font: 700 25pt 'Arial Rounded', 'Arial', sans-serif; color: #434343; }
main > a { display: none; position: fixed; z-index: 9; bottom: 30px; right: 30px; text-decoration: none; color: #414043; padding: 0 20px 0 0; line-height: 1; }
main > a:hover { color: #42bfb5; }
main > a:after{ content: ' '; display: block; position: absolute; bottom: 3px; right: 0; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid #9cdbd9; border-radius: 3px; }

/* Article */
main article { float: left; width: 65%; }
main article.full { float: none; width: 100%; }
main article datetime { font-size: 10pt; line-height: 1; display: block; margin: 0 0 10px; }
h1 { text-shadow: none; width: 100%; color: #42bfb5; text-transform: none; font: 700 29pt/1.2 'Arial', sans-serif; }
main article > nav { border-top: 4px solid #e2e2e2; border-bottom: 4px solid #e2e2e2; margin: 0 0 17px; counter-reset: headline; padding: 9px 0; }
main article > nav b { float: left; display: block; color: #5f5e5f; margin: 0 0 6px; }
main article > nav span { float: right; cursor: pointer; width: 0; height: 0; border-style: solid; border-width: 12px 7.5px 0; border-color: #9cdbd9 transparent transparent transparent; }
main article > nav a { color: #5f5e5f; text-decoration: none; max-width: 100%; display: block; width: max-content; width: -webkit-max-content; counter-increment: headline; line-height: 1.3; position: relative; padding: 0 0 0 23px; }
main article > nav a:hover { color: #42bfb5; }
main article > nav a:before { content: counter( headline )'.'; margin: 0 5px 0 0; display: block; position: absolute; top: 0; left: 0; }
main article > img { width: 100%; margin: 0 0 30px; }
main article > section { border-top: 3px solid #a4a4a4; font-size: 0; text-align: center; padding: 39px 0 0; }
main article > .social-media { border-top: 1px solid #bbb; padding: 39px 0; }
main article > section p { font-size: 14pt; line-height: 1; margin: 0 0 7px; }
main article > section img { display: inline-block; vertical-align: middle; margin: 0 11px; }
main article a { color: #42bfb5; font-style: italic; }
main article blockquote { box-sizing: border-box; position: relative; background: #e1f4ef; padding: 20px; text-align: center; display: block; margin: 0 auto 20px; max-width: 100%; width: 545px; border-radius: 10px; font-size: 15pt; line-height: 1.3; }
main article blockquote *:last-child { margin: 0; }
main article blockquote:before, main article blockquote:after { content: '“'; font-size: 58pt; line-height: 1; display: block; position: absolute; top: 4px; left: 8px; color: #42bfb5; }
main article blockquote:after { content: '”'; left: auto; right: 8px; }

/* Author */
#author { position: relative; margin: 40px 0; }
#author img { width: 90px; height: 90px; border: 2px solid #c4c3c3; border-radius: 50%; display: block; }
#author div { font-weight: 600; font-size: 11pt; position: absolute; top: 50%; left: 110px; transform: translateY( -50% ); max-width: calc( 100% - 110px ); }
#author span { display: block; margin: 3px 0 0; font-size: 10pt; }

/* Other articles */
main aside { float: right; width: 31%; padding: 0 9px; box-sizing: border-box; }
main aside > div { border: 2px solid #838383; padding: 16px 9px; }
main aside h2 { color: #42bfb5; font-size: 18pt; display: none; }
main aside a { border-bottom: 3px solid #e8e8e8; margin: 17px 0 0; display: block; padding: 0 0 7px; }
main aside a:first-of-type { margin: 0; }
main aside a:last-of-type { border: 0; padding: 0; }
main aside a:after { clear: both; content: ' '; display: block; }
main aside img { float: left; width: 147px; margin: 0 11px 0 0; display: block; }
main aside div div { float: right; width: calc( 100% - 158px ); }
main aside h3 { line-height: 1; font-size: 12pt; font-weight: 900; margin: 0 0 2px; }
main aside p { font-size: 11pt; margin: 0; }

@media (max-width: 1060px) {
	main aside { width: 34%; }
}

@media (max-width: 1010px) {
	main article, main aside { float: none; width: 100%; }
	main aside { margin: 30px 0 0; }
	main aside > div { border: 0; padding: 0; }
	main aside h2 { display: block; text-align: center; margin: 50px 0 30px; }
}

@media (max-width: 860px) {
	main > big { margin: 23px 0 40px; }
	h1 { font-size: 23pt; }
}

@media (max-width: 600px) {
	main > big { font-size: 20pt; }
	main > a { bottom: 10px; right: 10px; }
	
	h1 { font-size: 20pt; }
	main article blockquote { font-size: 13pt; }
	main article blockquote:before, main article blockquote:after { font-size: 49pt; }
}

@media (max-width: 400px) {
	main aside img { float: none; margin: 0 auto 10px; }
	main aside div div { float: none; width: 100%; text-align: center; }
	main article > section img { height: 40px; }
}