.blog-index { max-width: none; position: relative; }
.blog-index h1 { margin-bottom: 0; }
.blog-index h1 a { text-decoration: none; }
.teaser-collection { display: flex; flex-wrap: wrap; align-items: flex-start; border-radius: 8px; margin-top: 2rem; }
.teaser { width: calc(33% - 18px); border-radius: 2px; margin-right: 18px; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.2); margin-bottom: 30px; overflow: hidden; }
.teaser:nth-child(3) { margin-right: 0; }

.teaser-image-wrapper { margin: -20px -20px 20px -20px; }
.teaser-image { width: 100%; height: 100%; display: block; }
.teaser-meta { font-size: 14px; }
.teaser h2 { font-size: 16px; color: #209cff; }
.teaser a { text-decoration: none; }
.teaser a:hover { text-decoration: underline; }
time { display: block; font-weight: 600; margin-bottom: 10px; }
.teaser-intro { margin-bottom: 10px; }
.teaser-link-more { color: #209cff; font-weight: 600; }
.teaser-link-more > i { margin-left: 4px; transition: all .08s ease-in; }
.teaser-link-more:hover > i { margin-left: 6px; }

@media screen and (max-width: 768px) {
    .sidebar { display: none; }
}

@media screen and (max-width: 700px) {
    .teaser { width: calc(50% - 18px); }
    .teaser:nth-child(2) { margin-right: 0; }
    .teaser:nth-child(3) { margin-right: 18px; }
}

@media screen and (max-width: 470px) {
    .teaser { width: 100%; margin-right: 0; }
    header { position: sticky; top: 0; background-color: #ffffff; z-index: 99999; }
}

.blog-article h1 { font-size: 28px; margin-bottom: 16px; }
.blog-article time { font-weight: normal; padding: 3px 6px; }
.blog-article aside { display: flex; margin-left: 0; margin-bottom: 20px; color: #808080; padding: 0; }
.blog-article article { margin-bottom: 3rem; }
.blog-article article h2 { margin-top: 40px; margin-bottom: 10px; }
.blog-article article h3 { margin-top: 20px; margin-bottom: 6px; }
.blog-article a { color: #209cff; }
.blog-bc { margin-bottom: 20px; }
ul.meta { display: inline-block; }
ul.meta li { display: inline-block; }
.meta-wrapper { margin-right: 12px; font-size: 12px; }
.meta-tag { display: inline-block; padding: 3px 6px; border-radius: 8px; pointer-events: none/* remove when eventually clickable*/; }
.meta-tag a { text-decoration: none; color: #808080; }
.meta-tag a:hover { color: #000000; }
.meta-tag-category { background-color: #eaeaea; }
.meta-tag-tag { background-color: #f1faff; }
nav.articles { display: flex; justify-content: space-between; }
nav.articles > a { flex-basis: 40%; }
.article-img { display: block; width: 100%; height: auto; margin: 2rem 0; border-radius: 2px; }
.article-intro { font-weight: 600; font-size: 16px; line-height: 25px; }
.article-body {line-height: 25px; font-size: 16px; }
.article-body p { font-size: inherit; }

.blog-infobox { padding: 16px; margin: 16px 24px 16px 0; border-radius: 4px; border: solid #dfdfdf 1px; font-size: 15px; }
.blog-infobox h1 { font-size: inherit; }
.blog-infobox table { width: 100%; }
.blog-infobox table tr td { padding-right: 16px; width: 50%; vertical-align: top; }
.blog-infobox table tr td ul { padding-left: 16px; margin-top: 0; }
.blog-infobox table tr td ul li:first-child { margin-top: 0; }
.blog-infobox table tr td:last-of-type { border-left: 1px solid #dfdfdf; padding-left: 16px; padding-right: 0; }

.header-link-wrapper-register { box-shadow: 0 0 0 rgba(48,171,244, 0.6); animation: pulse 2s infinite; display: inline-block; cursor: pointer; background-image: linear-gradient(135deg, #209cff, #68e0cf); border-radius: 50px; color: #ffffff; font-size: 18px; padding: 14px 30px; font-weight: 600; transition: all .2s ease-in; text-decoration: none; margin-right: 0; }

.btn-signup { color: #ffffff !important; box-shadow: 0 0 0 rgba(48,171,244, 0.6); animation: pulse 2s infinite; margin-top: 20px; display: inline-block; cursor: pointer; background-image: linear-gradient(135deg, #209cff, #68e0cf); border-radius: 50px; color: #ffffff; font-size: 18px; padding: 14px 30px; font-weight: 600; transition: all .2s ease-in; text-decoration: none; }
.icon-signup { margin-left: 8px; margin-right: 2px; transition: all .1s ease-in; }
.btn-signup:hover .icon-signup { margin-left: 10px; margin-right: 0; }


/* sidebar */
.sidebar { max-width: 300px; margin-left: 20px; padding-top: 40px; position: sticky; top: 0; flex-shrink: 0; align-self: flex-start; /* https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox */}
.sidebar-widget { background-color: #f1f6f4; border-radius: 2px; padding: 20px; margin-bottom: 25px; }

.social-links { margin: 20px 0; }
.sharing-link { margin-right: 10px; }
.sharing-link img { display: inline-block; vertical-align: middle; margin-right: 6px; }
.sharing-link i { margin-right: 6px; }

@media screen and (max-width: 568px) {
    .sharing-link { display: block; margin-bottom: 8px; }
}