html {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 12pt;
}

body {
	padding:0;
	margin: 0;
	display: block;
	background: #fff;
	height: 100%;
}

A, A:hover, A:visited {
	text-decoration: none;
	color: #61a093;
}

div {
	font-family: Verdana;
	font-size: 12pt;
	color: #403d52;
}

@font-face {
    font-family: 'crooker';
    src: url('crooker.otf') format('opentype');
}

.readmore {
	text-align: right;
	margin: 20px 0px;
}

.header-container {
	display: flex; /* отображает блоки в один ряд и запрещает их перенос один под другой */
	height: 120px;
	align-items: center;  /* выравнивание всего содержимого по центру по вертикали */
	box-sizing: border-box; /* не увеличивает ширину блока на размер padding и border (чтобы горизонтальный scroll-bar раньше времени не появлялся) */
}

.footer-container {
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	width: 100%;
	height: 220px;
	background: linear-gradient(90deg, #a7acea, #7d4cc9);
	background-color: opacity: .5;
}

.footer-container2 {
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	width: 100%;
	height: 220px;
	background: url('img/footer-fon.png');
	padding: 20px;
}

.first-footer-text, .second-footer-text {
	width: 60%;
	float: left;
	justify-content: top;
	color: #fff;
}

.second-footer-text {
	width: 40%;
	float: left;
	justify-content: top;
	margin-left: 20px;
}

.soc {
	display: flex;
}


.menu-container {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	justify-content: center;
	margin: 20px 0px;
}


.header-logo {
	padding: 0px 60px;
	box-sizing: border-box;
}

.header-logo-mini {
	padding: 0px 20px;
	box-sizing: border-box;
}

.header-title {
	padding: 0px 20px;
	box-sizing: border-box;
	min-width: 100px;
	max-width: 600px;
}

.header-space {
	flex-grow: 1; /* используетяс вместе с display: flex; в родительском контейнере */
}

.main-title {
	font-family: verdana;
	color: #6f5da6;
	font-size: clamp(20px, 3vw, 28px);
	margin: 10px 0px;
}

.title {
	color: #61a093;
	font-size: 28px;
	margin: 40px 0px 0px 0px;
}

.header-buttons {
	padding: 0px 30px;
	box-sizing: border-box;
	justify-content: center;
}

.spec_banner-container {
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	width: 100%;
	min-height: 800px;
	background: linear-gradient(90deg, #a7acea, #7d4cc9);
	background-color: opacity: .5;
}

.spec_banner {
	max-width: 1000px;
	width: 100%;
	min-height: 700px;
	margin: 50px 0px;
	padding: 20px;
	background: url('img/octoberfon2.png');
	background-color: #612a8a;
	position: relative;
	border-radius: 40px;
	box-sizing: border-box;
}

.banner-container {
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	width: 100%;
	height: 200px;
	background: linear-gradient(90deg, #a7acea, #7d4cc9);
	background-color: opacity: .5;
}

.banner {
	max-width: 1000px;
	width: 100%;
	height: 200px;
	background: url('img/girls.png') no-repeat 100% 100%;
	position: relative;
}

.main-content-container {
	display: grid;
	box-sizing: border-box;
	justify-content: center;
}

.main-content {
	padding-left: max(2%, 20px);
	padding-right: max(2%, 20px);
	height: auto;
}

.banner-title {
	justify-content: center;
	color: #fff;
	font-size: clamp(20px, 3vw, 28px);
}

.main-news-anons-container {
	display: flex;
	flex-wrap: wrap; /* перенос блоков на следующую строку, если они не помещаются*/
	max-width: 1500px;
}

.main-block-container {
	display: flex;
	flex-wrap: wrap; /* перенос блоков на следующую строку, если они не помещаются*/
	max-width: 1500px;
}

.main-news-anons {
	flex: calc(33.333% - 10px); /* блоки будут пропорционально растягиваться и сжиматься */
	padding: 20px;
	box-sizing: border-box;
	min-width: 280px;
	max-width: calc(33.333% - 10px);
}

.main-block {
	flex: 1 1 100%;
	max-width: 100%;
	padding: 20px;
	box-sizing: border-box;
	min-width: 280px;
}

.push {
  list-style: none;
  font-size: inherit;
}
.push li {
  position: relative;
  padding: 20px 0 20px 40px;
  font-size: inherit;
}
.push li:before {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #61a093;
  content: "";
  left: 0;
  transition: .3s ease-in-out;
  top: 27px;
  font-size: inherit;
}
.push li:after {
  position: absolute;
  border-left: 1px dotted #61a093;
  width: 1px;
  bottom: -12px;
  content: "";
  left: 3px;
  top: 48px;
  font-size: inherit;
}
.push li:last-child:after {content: none;}

.clear {
	clear: both;
}

.scale-img {
	max-width: 100%;
	height: auto;
}

.small-text {
	color: #000;
	font-size: 10px;
	text-align: center;
}

.button, .button A, .button A:hover, .button A:visited{
	font-size: 14px;
	border-radius: 8px;
	text-align: center;
	vertical-align: center;
	padding: 10px 0px;
	margin: 5px 0px;
	background: #7631be;
	transition: all .2s linear;
	color: #fff;
	width: 180px;
}

.button:hover, .button A:hover{
	background: #4d1884;
}

.button2, .button2 A, .button2 A:hover, .button2 A:visited{
	font-size: 16px;
	border-radius: 8px;
	border: 1px solid #7631be;
	text-align: center;
	vertical-align: center;
	padding: 7px 0px;
	margin: 10px 0px;
	background: #4d1884;
	transition: all .2s linear;
	color: #fff;
	width: 180px;
}

.button2:hover, .button2 A:hover{
	background: #fff;
	color: #61a093;
}

.main-menu-item, .main-menu-item A, .main-menu-item A:hover, .main-menu-item A:visited{
	font-size: 14px;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
	vertical-align: center;
	padding: 10px 10px;
	background: #fff;
	color: #61a093;
	box-sizing: border-box; 
}

.main-menu-item:hover, .main-menu-item A:hover{
	text-decoration: underline #7631be;
	text-underline-offset: 15px;
	text-decoration-thickness: 2px
}

.title-link, .title-link A, .title-link A:hover, .title-link A:visited{
	font-size: 20px;
	color: #61a093;
	padding: 10px 0px;
}

.title-link:hover, .title-link A:hover{
}

.image-text-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 20px;
}

.list-item {
	display: flex;
	align-items: center; /* выравнивание по вертикали */
	gap: 10px;
}

.list-item img {
	width: 32px;
	height: 32px;
	object-fit: cover; /* для сохранения пропорций */
}

@media (min-width: 1001px)
{
	.small {display: none}
	.main-news-anons {
		flex: 1 1 calc(33.333% - 10px);
		max-width: calc(33.333% - 10px);
	}
}

@media (max-width: 1000px)
{	
	.big {display: none}
	.main-news-anons {
		flex: 1 1 100%;
		max-width: 100%;
	}
}


@media (min-width: 601px) and (max-width: 970px)
{
	.small3 {display: none}
	.big3 {display: block}
}

@media (min-width: 1201px)
{
	.small3 {display: none}
	.big3 {display: block}
}

@media (max-width: 600px)
{	
	.small3 {display: block}
	.big3 {display: none}
}

@media (min-width: 971px) and (max-width: 1200px)
{	
	.small3 {display: block}
	.big3 {display: none}
}

@media (min-width: 971px)
{
	.small2 {display: none}
}

@media (max-width: 970px)
{	
	.big2 {display: none}
}