.article-title {background-color:var(--c-black);color:#FFF;padding:2em 0}
.article-title a {color:inherit}
.article {line-height:1.5em;padding:2em 0 3em;overflow-x:hidden}
.article h1,.article h2,.article h3 {line-height:1.3em}
.article img {max-width:100%;height:auto}
.article h2 {border-left:3px solid var(--c-main);padding-left:10px}
.article .a-tags {margin-top:10px}
.article .a-tags a {padding:0 10px;background-color:#DDD;color:#000;display:inline-block;margin:0 5px 5px 0;border-radius:5px}
.article .a-tags a:hover {background-color:#FFF}
.article a {color:var(--c-black)}
.article a:hover {color:var(--c-main)}
.article .inline-hotline {display:inline-block;background-color:var(--c-main);padding:3px 10px;border-radius:5px;border:1px solid #F00;color:#FFF}
.article .inline-hotline:hover {background-color:var(--c-main-light);color:#FFF}
.article .a-content .image-container { position:relative; border:1px solid #DDD; overflow-y:auto; width:96%; height:auto; max-height:250px; margin:0 auto; }
.article .a-content .image-container img { display:block; }
.article .a-content hr { display:block; height:1px; border:0; background-color:#DDD; }
.article .a-content .customer-page .col:last-child { text-align:left; }
.article .a-other {border-top:1px solid #DDD;margin-top:3em;padding-top:1em}
.article .a-other.no-border { margin-top:0; border:0; }
.article .a-other ul {margin:.5em 0 0;padding:0 0 0 1em}
.article blockquote {background-color:#FBFBFB;border:1px solid #DDD;box-sizing:border-box;padding:10px;display:block;margin:1em auto;width:90%;max-width:800px;text-align:left}
.article .breadcrumb {color:#FFF;margin-top:1em}
.article .breadcrumb a {color:inherit;vertical-align:middle;text-transform:capitalize}
.article .breadcrumb a:hover {color:var(--c-main-ex-light)}
.article .breadcrumb .icon-home {font-size:1.2em}
.article .breadcrumb .icon-chevron-right {display:inline-block;margin:0 10px}
.article .article-list {margin-bottom:2em}
.article .article-list .col.image {border-top-left-radius:10px;border-top-right-radius:10px;border:1px solid #DDD;border-bottom:unset;overflow:hidden}
.article .article-list .col.content {text-align:left;padding:20px;border:1px solid #DDD;border-top:0;border-bottom-left-radius:10px;border-bottom-right-radius:10px}
.article .article-list .square-image:before {padding-top:50%}
.article .article-list.hover-scroll-up .square-image a { pointer-events:none; }
.article .article-list.hover-scroll-up .square-image:before { padding-top:75%; }
.article .article-list h2 {padding-left:0;border-left:unset;margin-top:0}
.article .page-nav {display:block;margin:2em 0;font-weight:bold;padding:10px;background-color:#FAFAFA;border:1px solid #DDD;box-sizing:border-box;border-radius:5px}
.article .page-nav a {display:inline-block;width:24px;height:24px;line-height:24px;border-radius:100%;text-align:center;margin-left:5px}
.article .page-nav a.active,.article .page-nav a:hover {background-color:var(--c-main);color:#FFF}

@media(min-width:576px) {
	.article .article-list { margin-bottom:1em; display:inline-block; vertical-align:top; width:49%; margin-right:2%; }
	.article .article-list:nth-child(2n+0) { margin-right:0; }
	/* .article .article-list .square-image:before {padding-top:100%}
	.article .article-list .col.image {border-radius:unset;border:1px solid #DDD;border-right:unset}
	.article .article-list .col.content {padding:10px 20px;border-top:1px solid #DDD;border-left:unset} */
	.article .article-list h2 {font-size:1.2em;margin-bottom:.5em}
	.article .article-list h2 a,.article .article-list .col.content .description { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
	.article .article-list .col.content .description {-webkit-line-clamp:2}
}

@media (min-width:768px){
	.article .article-list { width:32%; }
	.article .article-list:nth-child(2n+0) { margin-right:2%; }
	.article .article-list:nth-child(3n+0) { margin-right:0; }
	.article .article-list h2 {font-size:1em;}
	
	.article .a-content .col:first-child { text-align:left; }
	.article .a-content .image-container { margin:0; }
	
	.article .a-other .article-list:last-child { display:none; }
}

@media(min-width:992px) {
	.article-title {padding-top:6em}
	
	.article .article-list { width:23.5%; }
	.article .article-list:nth-child(3n+0) { margin-right:2%; }
	.article .article-list:nth-child(4n+0) { margin-right:0; }
	
	
	.article .article-list .col.content .description {-webkit-line-clamp:4}
	.article .a-other .article-list:last-child { display:inline-block; }
}

@media (min-width:1200px){
	.article .a-content .image-container { max-height:500px; }
	.article .article-list.hover-scroll-up .square-image a { pointer-events:auto; }
}