.article {
    margin-bottom: 20px;
}

.article__title {
	font-size: 36px;
	text-transform: none;
	margin-bottom: 15px;
	text-decoration: none;
}

.article__container p > img,
.article__container div > img,
.article__container a > img {
	width: 100%;
}



.article__title .countersBlock {
    vertical-align: middle;
}


.article__date {
    font-size: 14px;
    color: #848484;
    margin-bottom: 18px;
}








.articleInfo__avatarContainer {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
}


.articleInfo {
    font-size: 14px;
    color: #848484;
}
.articleInfo a {
    text-decoration: underline;
    color: inherit;
    font-weight: bold;
}
.articleInfo a:hover {
    text-decoration: none;
}



.articleInfo__avatarContainer .articleInfo {
    /*	float: left;
        padding-left: 10px;
        border-left: 2px solid #dbdbdb;
        min-height: 44px;*/
}


.articleInfo__avatarContainer .articleInfo__avatar {
    float: left;
    width: 44px;
    height: 44px;
    margin-right: 15px;
}
.articleInfo__avatarContainer .articleInfo__avatar img {
    width: 100%;
    border-radius: 50%;
}












.brick.view_articlePhoto {
    width: 606px;
    height: auto;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.brick.view_articlePhoto {
		width: calc(100% - 3%);
	}

	.articlePhoto__link {
		width: 100%;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1040px) {
    .brick.view_articlePhoto {
        width: calc(100% - 13px)
    }
}
@media screen and (min-width: 1041px) and (max-width: 1279px) {
    .brick.view_articlePhoto {
        width: calc(100% - 22px)
    }
}
.articlePhoto__link {
	display: inline-block;
	font-size: 0; /* чтою не было пустых пикселей внизу */
	margin-bottom: 8px;
	width: 100%;
}
.article__image {
    width: 98%; /* позаботьтесь, чтобы изображение было подходящих пропорций */
    /*height: 400px;*/
}
.articlePhoto__info {
    font-size: 14px;
    color: #525252;
    margin-bottom: 0;
}
.articlePhoto__author {
    font-size: 14px;
    color: #848484;
    margin-bottom: 0;
}

.article__picture {
    margin-bottom: 20px;
    padding: 10px;
    background: #eeeeee;
}

.article__picture__name {
    margin: 5px 0 0 10px;
    font-family: 'PT Sans';
    font-weight: normal;
}

.article__picture__author {
    margin: 0 0 15px 10px;
    font-family: 'PT Sans';
    font-size: 14px;
    color: #848484;
}











.article__readmore {
    font-size: 17px;
    font-weight: bold;
    color: black;
    display: inline-block;
    position: relative;
    padding: 5px 40px 5px 0;
    margin-bottom: 20px;
}
.article__readmore:after {
    content: '';
    position: absolute;
    top: 5px;
    right: 0;
    width: 30px;
    height: 22px;
    display: block;
    background: url(../_images/icons_sprite.png) -10px -199px no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
    .article__readmore:after {
        background-image: url(../_images/icons_sprite_2x.png);
        background-size: 282px 500px;
    }
}











.readAlso {
    font-size: 18px;
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 20px;
}
.readAlso__list {
    font-size: 18px;
    font-style: normal;
}
.readAlso__item {
    color: #de0606;
    list-style: square;
    margin-left: 25px;
}
.readAlso__link {
    text-decoration: none;
    color: inherit;
}
.readAlso__link:hover {
    text-decoration: underline;
}






.hint {
    color: #a6a5a5;
    font-size: 14px;
    margin-bottom: 10px;
}








.article__tags {
    font-size: 14px;
    margin-bottom: 20px;
}
.article__tags a {
    color: inherit;
    text-decoration: underline;
}
.article__tags a:hover {
    text-decoration: none;
}

.author {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 15px 0 20px;
    background: #eeeeee;
}

.author__info {
    padding: 30px;
	font-size: 14px;
	flex: 1;
}


.author__photo {
    width: 350px;
    height: 290px;
    float: right;
}

@media screen and (max-width: 1279px) {
    .author__photo {
        width: 260px;
        height: 200px;
    }
}

.article-short__container {
	display: flex;
	position: relative;
	height: 350px;
	overflow: hidden;
	margin: 30px 0;
}

.article-short__container .textTabs {
	margin-right: 0;
}

.article-short__container .view_dotBetween .textTabs__item {
	margin-left: 0;
}

.article-short__container .view_dotBetween .textTabs__item:after {
    display: inline-block;
    content: "";
    width: .286em;
    height: .286em;
    margin-left: .6em;
	margin-right: .3em;
    margin-bottom: .24em;
    background-color: #fdab1c;
}

.article-short__container .view_dotBetween .textTabs__item:last-child:after {
	display: none;
}

.article-short__container .view_dotBetween .textTabs__item:before {
	display: none;
}

.article-short__info-background {
	position: relative;
	width: 330px;
	height: 100%;
	z-index: 2;
}

.article-short__info {
	position: absolute;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	top: 15px;
	left: 15px;
	padding: 20px 20px 18px;
	width: 330px;
	height: calc(100% - 30px);
	box-sizing: border-box;
}

.article-short__image {
	flex: 1;
	/*position: relative;*/
	z-index: 1;
	background-size: cover;
	background-size: 110%;
	background-position: center;
}

.article-short__header {
	font-size: 32px;
    display: block;
    line-height: 31px;
    height: 100%;
    overflow: hidden;
    max-height: 220px;
    margin-top: 5px;
    font-weight: bold;
    font-family: 'Roboto Slab', serif;
    text-decoration: none;
	word-break: break-word;
}

.article-short__header:hover {
	color: inherit;
}


.article-short__container:hover .countersBlock__item.readLater,
.authors-articles-brick__content:hover .countersBlock__item.readLater {
	opacity: 1;
}

.article-short__image .clickable {
	-webkit-transition: background .15s ease-out;
    -moz-transition: background .15s ease-out;
    transition: background .15s ease-out;
}

.article-short__container:hover .article-short__image .clickable {
	background: rgba(0,0,0,.18);
}

.article-short__container .countersBlock__item.readLater:hover {
	opacity: 0.5;
}

.article-short__container .countersBlock__item.readLater:hover .icon {
	opacity: 1;
}

.article-short__info .countersBlock__item.readLater {
	z-index: 25;
}

.article-short__info .countersBlock__item.readLater .icon {
	opacity: 0.3;
}

.article-short__container .readLater.only-glass {
	display: none;
}

.article-short__copyright {
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: white;
	opacity: .4;
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.article-short__container {
		height: 300px;
	}
	
	.article-short__info-background {
		width: 220px
	}
	
	.article-short__info {
		width: 220px;
		padding: 15px;
	}

	.article-short__header {
		font-size: 20px;
		line-height: 25px;
		margin-bottom: 30px;
	}

	.article-short__image {
		background-size: cover;
	}

	.article-short__container .readLater.only-glass {
		display: initial;
		padding-right: 20px;
	}
	.article-short__container .readLater.with-text {
		display: none;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.article-short__info-background {
		width: 250px
	}
	
	.article-short__info {
		width: 250px;
	}

	.article-short__header {
		font-size: 28px;
		line-height: 28px;
		margin-bottom: 30px;
	}

	.article-short__image {
		background-size: cover;
	}

	.article-short__container .readLater.only-glass {
		display: initial;
		padding-right: 20px;
	}
	.article-short__container .readLater.with-text {
		display: none;
	}
}

/*yellow*/
.article-short--yellow .article-short__info {
	background-color: #ffd051;
}
.article-short--yellow .textTabs a, 
.article-short--yellow .countersBlock__item {
	color: #c2a041;
}

.article-short--yellow .article-short__info-background {
	background-color: #372c0d;
	box-shadow: 5px 0px 30px 15px #372C0D;
}

/*blue*/
.article-short--blue .article-short__info {
	background-color: #677a87;
}

.article-short--blue .textTabs a, 
.article-short--blue .countersBlock__item {
	color: #929fa9;
}

.article-short--blue .article-short__header {
	color: white;
}

.article-short--blue .article-short__info-background {
	background-color: #2b343b;
	box-shadow: 5px 0px 30px 15px #2b343b;
}

/*red*/
.article-short--red .article-short__info {
	background-color: #791a04;
}

.article-short--red .textTabs a, 
.article-short--red .countersBlock__item {
	color: #d0b1ac;
}

.article-short--red .article-short__header {
	color: white;
}

.article-short--red .article-short__info-background {
	background-color: #3a0c01;
	box-shadow: 5px 0px 30px 15px #3a0c01;
}

/*blue-light*/
.article-short--blue-light .article-short__info {
	background-color: #cee0ed;
}

.article-short--blue-light .textTabs a, 
.article-short--blue-light .countersBlock__item {
	color: #929fa9;
}

.article-short--blue-light .article-short__info-background {
	background-color: #4a555d;
	box-shadow: 2px 0px 30px 15px #4a555d;
}

/*green*/
.article-short--green .article-short__info {
	background-color: #75aa4f;
}

.article-short--green .textTabs a, 
.article-short--green .countersBlock__item {
	color: #59823e;
}

.article-short--green .article-short__header {
	color: white;
}

.article-short--green .article-short__info-background {
	background-color: #2b411c;
	box-shadow: 5px 0px 30px 15px #2b411c;
}

.photostory-brick {
	position: relative;
	display: flex;
	height: 350px;
	background-color: black;
	color: white;
}

.photostory-brick:hover .photostory-brick__link {
	color: #c64a1b;
}

.photostory-brick__info {
	justify-content: space-between;
    display: flex;
    flex-direction: column;
	width: 310px;
	padding: 25px 20px 20px;
}

.photostory-brick__link {
	color: white;
	font-size: 32px;
    line-height: 31px;
    text-decoration: none;
    font-weight: bold;
}

.photostory-brick__section {
	text-transform: uppercase;
	font-size: 15px;
	opacity: .8;
}

.photostory-brick__text {
	opacity: .8;
	font-size: 17px;
    line-height: 25px;
}

.photostory-brick__image {
	flex: 1;
}

.photostory-brick__image {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.photostory-brick {
		height: 300px;
	}

	.photostory-brick__info {
		width: 195px;
	}
	.photostory-brick__section {
		font-size: 14px;
	}
	.photostory-brick__link {
		font-size: 20px;
		line-height: 25px;
	}
	.photostory-brick__text {
		font-size: 14px;
		line-height: 20px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

	.photostory-brick__link {
		font-size: 28px;
		line-height: 28px;
	}

	.photostory-brick__text {
		font-size: 16px;
		line-height: 20px;
	}

	.photostory-brick__info {
		width: 225px;
	}
}

.authors-articles-brick {
	display: flex;
	height: 350px;
	background-color: #eeeeee;
}

.authors-articles-brick__left {
	position: relative;
	width: 335px;
	padding: 15px;
	
}
.authors-articles-brick__image {
	position: relative;
	width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.authors-articles-brick__author {
	position: absolute;
	bottom: 15px;
	left: 20px;
	color: white;
}

.authors-articles-brick__content {
    position: relative;
    display: flex;
	flex: 1;
    padding: 15px 15px 15px 0;
    flex-direction: column;
    justify-content: flex-end;
}

.authors-articles-brick__header {
	font-size: 36px;
    line-height: 32px;
	margin-bottom: 12px;
	font-family: 'Roboto Slab', serif;
	cursor: pointer;
	font-weight: bold;
}

.authors-articles-brick__text {
	font-size: 18px;
	line-height: 26px;
}

.authors-articles-brick__label {
	display: inline-table;
	margin-bottom: 10px;
	padding: 2px 5px;
}

.authors-articles-brick__name {
	display: block;
	font-size: 18px;
}

.authors-articles-brick__title {
	font-size: 11px;
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.authors-articles-brick {
		height: 300px;
	}

	.authors-articles-brick__left {
		width: 220px;
	}

	.authors-articles-brick__header {
		font-size: 26px;
		line-height: 28px;
		margin-bottom: 6px;
	}

	.authors-articles-brick__text {
		font-size: 14px;
		line-height: 20px;
	}

	.authors-articles-brick__label {
		margin-bottom: 5px;
	}

	.authors-articles-brick__name {
		font-size: 14px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.authors-articles-brick__left {
		width: 250px;
	}

	.authors-articles-brick__header {
		font-size: 26px;
		line-height: 28px;
	}

	.authors-articles-brick__text {
		font-size: 16px;
    	line-height: 20px;
	}

	.authors-articles-brick__label {
		margin-bottom: 5px;
	}
}