/*
.article {

}

.article .author {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	margin: 10px;
}

.article .author .info .name {
	font-weight: bolder;
}

.product-advices {
	border-top: 1px solid #c9c9c9;
	padding-top: 10px;
	margin-top: 30px;
}

.product-advices .articles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
	gap: 15px;
}

.product-advices .articles .article .image {
	grid-area: image;
}

.product-advices .articles .article .image>img {
	width: 100%;
	height: auto;
}

.product-advices .articles .article .title {
	grid-area: title;
}

.product-advices .articles .article .perex {
	grid-area: perex;
}

.product-advices .articles .article {
	display: grid;
	grid-template:  "image title"
					"image perex";
	gap: 10px;
	grid-template-columns: 100px 1fr;
	border: 1px solid #c9c9c9;
	padding: 10px;
	border-radius: 5px;
}
 */


.articles {text-align:center;  display:flex; flex-flow:wrap; overflow:hidden; box-shadow:-1px 0 0 #f6f6f6}
.articles .box {position:relative; vertical-align:top; background-color:#fff;  flex:0 0 25%; text-align:left; overflow:hidden; box-shadow:inset -1px 0 0 #f6f6f6, inset 0 -1px 0 #f6f6f6}
.articles .box:first-child { flex:0 0 50%}
.articles .box:first-child a.image {position:absolute; top:0; bottom:0; left:0; display:inline-block; width:50%; height:100%}
.articles .box:first-child a.image img {display:none}
.articles .box.hidden {display:none}
.articles a.image {display:block; width:100%; background-repeat:no-repeat; background-position:center center; background-size:cover}
.articles a.image img {width:100%; height:auto}
.articles .box:first-child a.text {display:inline-block; width:50%; margin-left:50%}
.articles a.text {display:block; width:100%; padding-bottom:40px}
.articles h3 {display:block; padding:30px 40px 20px 40px; line-height:28px; color:#231f20; font-size:17px; font-family:Roboto, sans-serif; font-weight:700}
.articles .box:first-child .intro {display:block; padding:0 40px 20px 40px; line-height:25px; color:#a7a7a7; font-size:14px}
.articles .box:first-child .intro span {display:block; width:20px; height:2px; margin:10px 0 30px 0; background-color:var(--color-01-hex)}
.articles .intro {display:none}
.articles .next {position:absolute; bottom:20px; right:0; display:block; width:calc(100% - 40px); padding-top:20px; color:var(--color-01-hex); font-size:14px}
.articles .box:first-child .next {width:calc(50% - 40px)}
.articles .next span {display:inline-block; width:6px; height:9px; vertical-align:middle; margin-left:14px; background:url(/templates/b2c/images/arrow-blue.png)}
.articles .box:first-child:hover .next {text-decoration:underline}
.articles a {vertical-align:top; text-decoration:none}
.articles a.detail {position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.85); padding:40px; line-height:25px; color:#fff; font-size:15px; box-shadow:inset -1px 0 0 #000; opacity:0; transition:all 300ms ease}
.articles a.detail .next {background-color:#000; left:0; bottom:0; padding:15px 0 15px 40px; box-shadow:0 -30px 80px #000; color:#fff}
.articles a.detail .next span {background:url(/templates/b2c/images/arrow-white.png)}
.articles .box:not(:first-child):hover a.detail {opacity:1}
.articles-more {text-align:center}
.articles-more a {display:inline-block; margin:25px 0; text-decoration:none}
.articles-break {height:35px; background-color:#d0d0d0}
#articles-all-toggle {background-color:#fff; padding:50px 0 70px 0; text-align:center; font-size:14px; color:var(--color-01-hex); text-decoration:underline; border-bottom:1px #f6f6f6 solid; cursor:pointer}
#articles-all-toggle span {display:inline-block; margin-left:8px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid var(--color-01-hex); vertical-align:middle}


.articles-categories {padding:40px 0}
.articles-categories h1 {font-size:32px; font-family:Roboto, sans-serif; font-weight:700; text-transform:uppercase; padding-bottom:30px}
.articles-categories .list { display:flex; flex-flow:wrap; box-shadow:-1px -1px 0 #f6f6f6}
.articles-categories a { flex:0 0 25%;  display:flex; align-items:center; text-decoration:none; color:#a7a7a7; box-shadow:inset -1px -1px 0 #f6f6f6}
.articles-categories a:hover {color:#000}
.articles-categories img {margin-left:20px}
.articles-categories h2 {padding:25px 20px; font-size:16px}
.articles-empty-categories {height:70px}
.articles-all {border-top:#f6f6f6 1px solid}
.center-dark .articles {box-shadow:-1px 0 0 #d0d0d0}


@media only screen and (max-width:1600px) {
	.articles {padding-top:20px}
	.articles-break {height:1px}
	.articles-categories h1 {padding:0 40px 30px 40px}
}




@media only screen and (max-width:1080px) {


	.articles {padding-top:0}
	.articles .box { flex:0 0 calc(100% / 3)}
	.articles .box:first-child { flex:0 0 calc(100% / 3)}
	.articles .box:first-child a.image {position:relative; display:block; width:100%; height:auto; background:initial}
	.articles .box:first-child a.image img {display:block}
	.articles .box:first-child a.text {display:block; width:100%; margin-left:0}
	.articles .box:first-child .intro {display:none}
	.articles .box:first-child .next {width:calc(100% - 40px)}

	.missing-content .mark {width:100px; margin:25px 40px 0 0; font-size:100px}

	.articles-categories a { flex:0 0 calc(100% / 3)}
	#articles-all-toggle {padding:30px 0}

}


@media only screen and (max-width:980px) {
	.articles-more a {margin:10px 0}

	.articles-categories h1 {padding:0 20px 20px 20px}
	.articles-categories {padding:20px 0}

}


@media only screen and (max-width:820px) {
	.articles .box { flex:0 0 50%}
	.articles .box:first-child { flex:0 0 50%}
	.articles:not(.articles-all) .box:nth-child(3) {display:none}
	.articles-categories a { flex:0 0 50%}
}

@media only screen and (max-width:520px) {
	.articles .box {
		flex: 0 0 100%
	}

	.articles .box:first-child {
		flex: 0 0 100%
	}
}


@media only screen and (max-width:480px) {
	.articles-categories a { flex:0 0 100%}
}