/*В стилях карточек ".new_item" задал фиксированную высоту*/

/*Обнуление*/
*{padding:0;margin:0;border:0;}
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
:focus,:active{outline:none}
a:focus,a:active{outline:none}
nav,footer,header,aside{display: block;}
a,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}

html,body {
    height: 100%;	
	font-family: Arial, "Helvetika Neue", Helvetika, sans-serif;
	}

/* Стили для демонстрации */

#wrapper {                /* Wrapper обертка используется для объединения блоков и их выравнивания по центру страницы */
	min-height: 100%;
	overflow: hidden;
	display: block;
	/*flex-direction: column;*/
}
/* Основные Стили */	
.content {
	margin: 144px 0 12px 0; /* Поля при меню: 118px 0 12px 0;*/ 
	/* ВНУТРЕННИЕ Поля padding: 5px 0 0 0;*/ 
    flex: 1 1 auto;
}

.container {             /*КОНТЕЙНЕР ШАПКИ и ФУТЕРА */
	max-width: 1080px;    /* ширина */
	margin: 0px auto;     /* устанавливает величину внешнего отступа */
	padding: 0px 10px;    /* ВНУТРЕННИЕ Поля МОЖЕТ УБРАТЬ??? посмотреть на мобильной версии */
}

.news_containerSpisok {
	max-width: 1080px;    /* ширина */
	margin: 6px auto 0px;     /* устанавливает величину внешнего отступа */
	padding: 0px 10px;    /* ВНУТРЕННИЕ Поля МОЖЕТ УБРАТЬ??? посмотреть на мобильной версии */
   /* border: 1px solid blue; */
}
/*=============================================================================================================================*/
/* Картинки в карточке */
.news_cards {
    margin: 6px 0px 6px 0px;
}
.news_row{
	margin: 6px -6px 6px -6px;
	display: block;
	
}

.news_column {
	flex: 0 1 100%;
	padding: 0px 6px;
   /*	border: 1px solid red; */   
}

.news_item {
	padding: 0px 0px;    /* ВНУТРЕННИЕ Поля МОЖЕТ УБРАТЬ??? посмотреть на мобильной версии */
}
.news_column a{
	display: block;
	color: #fff;
}
/* Контейнер картинки */
.news_image {
	height: 300px;
	margin: 12px 0px 12px 0px;
	padding: 0px 0px 300px 0px;
	overflow: hidden;
	position: relative;
	border-radius: 15px; /* Радиус скругления */
    box-shadow: 0 0 0px #666; /* Параметры тени */
}
.news_image:before{
	content: "";
	width: 100%;
	height: 100%; 
	position: absolute;
	z-index: 10;
	top: 0;      
	left: 0; 
    border-radius: 15px;	
	background: linear-gradient(-180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);
}
/* Картинка */
.news_image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}
/* ТЕКСТ в Картинке */
.Card-content {
    position: absolute;
    bottom: 6px;                      /*определяет смещение позиционированного элемента относительно нижнего края*/
    color: #fff;
    padding: 0 20px 10px 16px ;
	z-index:10;
}
.Card-title h3{
	font-weight: 600;         /* указываем насколько жирным будет текст */
	font-size: calc(18px + 6 * (100vw / 1280));      /* задает резиновый размер шрифта элемента font-size: 20px; */
	letter-spacing:-.2px;          /*межсимвольный отступ равный 1px. Можно использовать отрицательные значения, чтобы сделать символы ближе друг к другу*/
	line-height:32px; /*           /* междустрочный интервал (по высоте) */
}
.Card-subtitle {
    margin: 16px 0 12px 0;
}
.Card-subtitle em{
	font-weight: 400;         /* указываем насколько жирным будет текст */
	font-size: calc(12px + 4 * (100vw / 1280));      /* задает резиновый размер шрифта элемента font-size: 20px; */
	
}
.Card-text {
    font-weight: 300;         /* указываем насколько жирным будет текст */
    font-size: calc(10px + 6 * (100vw / 1280));      /* задает резиновый размер шрифта элемента font-size: 12px; */
    line-height: 24px;
    color: #fff;
    margin: 10px 0 0px 0;
}
.Card-text i{
    font-size: calc(10px + 4 * (100vw / 1280));    
} 
.pagination li  {            /*расположение пунктов списка по линии и с отступами*/
    display: inline; 
    margin:5px;
} 
.pagination a {
    text-decoration:none;   /*убрать фон и подчеркивание ссылок*/
    background-color:transparent;
    color: white;
    font-size: 16px;
} 
.pagination a:hover {      /*подчеркивание ссылок при наведении*/
    text-decoration:underline;
    
} 
.pagination li.active {    /*оформление текущей страницы: цвет фона, цвет и ширина границы, размер отступов, текст жирным шрифтом*/
    background-color:#5bb7b7; 
    border:1px solid #fff; 
    padding: 1px 3px; 
    font-weight:bold; 
} 
.pagination li.active a {color: #fff} /*белый цвет активного пункта*/

.cluster{
    display: block;
    height: 48px;
    width: 100%;
    border: 1px solid #5bb7b7;
    border-radius: 10px;
    background-color: #5bb7b7;
    text-align: center;
    margin: 6px auto 6px;
    padding: 9px 0 0 0;
    letter-spacing: 5%; /* увеличивает или уменьшает интервал между символами в тексте. */
    line-height:26px; /*           /* междустрочный интервал (по высоте) */
}
.cluster p{
    color: white;
    font-size: calc(14px + 2 * (100vw / 1280));
}
.cluster-Dop{
    display: block;
    height: 48px;
    width: 100%;
    border: 1px solid #5bb7b7;
    border-radius: 10px;
    background-color: #5bb7b7;
    text-align: center;
    margin: 12px auto 6px;
    padding: 9px 0 0 0;
    letter-spacing: 5%; /* увеличивает или уменьшает интервал между символами в тексте. */
    line-height:26px; /*           /* междустрочный интервал (по высоте) */
}
.cluster-Dop p{
    color: white;
    font-size: calc(14px + 2 * (100vw / 1280));
}
.district{
    display: block;
    height: 68px;
    width: 100%;
    border-radius: 10px;
    background-color: #5bb7b7; /*#EF035B #008C99; */
    text-align: center;
    margin: 6px auto 6px;
    padding: 9px 0 0 0;
     /*  letter-spacing: 5%; увеличивает или уменьшает интервал между символами в тексте. */
    line-height:26px; /*           /* междустрочный интервал (по высоте) */
}
.district p{
    color: white;
    font-size: calc(14px + 2 * (100vw / 1280));
}
.next{
    display: block;
    height: 80px;
    width: 50%;
    border: 1px solid #EF035B;
    border-radius: 10px;
    background-color: #EF035B;
    text-align: center;
    margin: 6px auto 0px;
    padding: 10px 0 0 0;
    letter-spacing: 5%; /* увеличивает или уменьшает интервал между символами в тексте. */
    line-height:26px; /*           /* междустрочный интервал (по высоте) */
}


@media(max-width:767px){
	.content {
	margin: 50px 0 77px 0;
	padding: 5px 0 0 0; /* ВНУТРЕННИЕ Поля */ 
}
	.container {
	max-width: none;    /* ширина */
	}
	.containerSpisok {
	max-width: none;    /* ширина */
	margin: 10px auto;     /* устанавливает величину внешнего отступа */
	padding: 0px 10px;
	
	}
	.news_row{
	display: block;    /* Заменил параметр "flex" на "block" для вертикального построения блоков */
	}

	.news_image {
	margin: 12px 0px 12px 0px;
	padding: 0px 0px 50% 0px;
	overflow: hidden;
	position: relative;
	border-radius: 15px; /* Радиус скругления */
    box-shadow: 0 0 0px #666; /* Параметры тени */
    }
    .Card-subtitle {
    margin: 4px 0 0px 0;
    }
    .next{
    margin: 6px auto 20px;    
    }
    .district{
    margin: 0px auto 6px;    
    }
}