/* ===== RESPONSIVE STYLE ===== */

@media (max-width:1600px) {
	.container {
		padding: 0 20px;
	}
	.footer__block {
		padding: 0px 3rem;
	}
	.footer .logo {
		margin: 0 3rem 0 0;
	}
	.footer .input-wrapper {
		width: 20rem;
	}
	.left__bar{
		padding-right:2rem;
	}
	.right__bar{
		padding-left:2rem;
	}
	.main__column {
		padding:0 2rem;
	}
	.section__body {
		padding: 0 0 0 2rem;
	}
}

@media (max-width:1440px) {
	html {font-size: 0.55vw}
	.logo {
		margin: 0 auto 2rem;
		width: 8rem;
	}
	.h2, h2 {
		font-size: 3rem;
	}
	.h3, h3 {
		font-size: 2rem;
	}
	.h4, h4 {
		font-size: 1.8rem;
	}
	
}

@media (max-width:1280px) {
	.container {
		padding:0 15px;
	}
	/* Mobile menu */
	.mobile-btn {
		width:16px;
		display: block;
		margin-right:20px;
	}
	.mobile-btn span{
		display: block;
		height: 1px;
		background-color: #000;
		border-radius: 2px;		
	}
	.mobile-btn span:not(:last-child){margin-bottom:5px;}
	.nav {
		position: fixed;
		display:flex;
		flex-direction: column;
		justify-content: space-between;
		transform: translateX(-100%);
		visibility: hidden;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: #fbfbfb;
		padding: 50px 20px;
		transition: all .3s;
		z-index: 120;
		overflow-y:auto;
	}
	.nav.active{
		transform: translateX(0);
		visibility: visible;
	}
	.close-menu {
		width: 25px;
		height: 25px;
		position: absolute;
		top: 20px;
		right: 20px;
	}
	.close-menu::before,
	.close-menu::after{
		content: '';
		width: 100%;
		height: 1px;
		border-radius: 2px;
		background-color: #000;
		position: absolute;
		left: 0;
		top: 50%;
	}
	.close-menu::before{transform: rotate(45deg);}
	.close-menu::after{transform: rotate(-45deg);}

	.menu {flex-direction: column;}
	.menu li {margin: 0 0 20px 0;text-align: center;}
	.menu li a{
		font-size: 16px;
		color: #000;
	}
	.mobile-menu__content {display:block;}
	/* // Mobile menu */

	.header {
		padding:20px 0 0;
	}
	.header__mobile {
		display: flex;
	}
	.header__content {
		display: none;
	}
	.logo {
		margin: 0 auto;
		width: 49px;
	}
	.h3, h3 {
		font-size: 1.7rem;
	}
	.section__column:first-child, .section__column:last-child {
		width:20%;
	}
	.block__title {
		font-size: 18px;
	}
	.card__info__item {
		font-size: 1.4rem;
	}
	.focus__news p {
		font-size: 1.6rem;
	}
	.card__info__item {
		padding-right: 0.7rem;
		margin-right: 0.7rem;
	}

	.theme-link {
		margin:0 20px 0 0;
	}

}

@media (max-width:1024px) {
	html {font-size: 0.6vw;}
	.tablet-col-2 {grid-template-columns: repeat(2, 1fr);}
	.tablet-col-3 {grid-template-columns: repeat(3, 1fr);}
	.news__date {
		font-size:10px;
	}
	blockquote::before {
		font-size: 3em;
		top:0px;
	}
	.article__list.marker--list li a{
		font-size: 12px;
	}
	.section__body {
		padding: 0 0 0 4rem;
	}
	.section__body__grid {
		gap:2rem;
	}
	.action__card__title {
		font-size: 2rem;
	}
	.footer .logo {
		margin: 0 2rem 0 0;
		flex: none;
	}
	.footer__block {
		padding: 0;
		border-left: none;
	}
	.footer .social-link {
		margin:0 20px 0 0;
	}
	.footer .social {
		margin-right:0;
	}
	.resp__card .news__img {
		height: auto;
	}

}

@media (max-width:768px) {
	html {font-size: 10px;}
	p, ul li, ol li, a, .text {font-size: 17px;}
	
	.sm-hide {display:none;}
	.sm-show {display:block;}
	.sm-show.flex {display:flex;}

	.popup-window, .thanks-window {width: calc(100% - 40px);}

	.sm-col-1 {grid-template-columns: repeat(1, 1fr);}
	.sm-col-2 {grid-template-columns: repeat(2, 1fr);}
	.sm-col-3 {grid-template-columns: repeat(3, 1fr);}
	.sm-col-1 .item {grid-column: auto; grid-row: auto;}

	.mw-100 {width:100%;}

	.main__column {
		width: 100%;
		padding: 0 0 2rem;
	}
	.language__wrapper {
		margin-left:0px;
	}
	.left__bar, .right__bar, .section__body {
		padding:0;
		width: 100%;
	}
	.news__card.resp__card {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		margin:0;
		padding:20px 0;
		border-top:1px solid #d9d9d9
	}
	.resp__card .news__img {
		width: 77px;
		height: 77px;
		margin:0 0 0 15px;
		flex: none;
	}
	.resp__card .news__img img {
		aspect-ratio: 1;
	}
	.focus__news .block__title {
		display: inline-block;
	}
	
	.input-wrapper input, .input-wrapper textarea {
		font-size: 14px;
		height: 45px;
	}
	.footer-nav li a {
		font-size: 13px;
	}
	.footer-nav li {
		margin-bottom: 10px;
		width: auto;
	}
	.footer__bottom__item .logo {
		display:block;
		margin:0 auto 20px;
	}
	.footer__bottom {
		border-top: none;
		flex-direction: column;
		margin-top:0;
		padding-top:20px;
	}
	.footer__bottom__item {
		width: 100%;
		border-bottom: 1px solid var(--gray);
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	.footer__col {
		width: 100%;
		border-bottom:1px solid var(--gray);
		padding-bottom:20px;
		margin-bottom:20px;
	}
	.section__body__grid {
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		gap:0;
	}
	.section__body__grid .item {
		width: 100%;
	}
	.action__card {
		padding: 3rem 2rem;
		height: auto;
		margin:30px 0;
	}
	.action__card .btn-container {
		margin-top:0;
	}
	.section {
		padding:30px 0;
	}
	.first-screen {
		padding:40px 0 0;
	}
	.first-screen .section__content {
		padding-bottom: 3rem;
	}
	.order-auto {
		order: 2;
	}
	.order-1 {
		order:1;
	}
	.aside__item {
		border-bottom:1px solid #d9d9d9;
		padding-bottom:15px;
	}
	.copyright {
		text-align: center;
	}
	.footer .social-link {
		width: 45px;
		height: 45px;
	}
	.footer .social {
		margin-right: 0;
		order: 2;
	}
	.footer .language__wrapper {
		order: 3;
		margin: 0;
	}
	.footer__item:last-child {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.footer__search {
		width: 100%;
		margin-bottom:30px;
	}
	.footer__search .input-wrapper {
		width: 100%;
	}
	.footer__bottom p {
		text-align: center;
	}
	.footer__bottom p br {
		display: none;
	}
	.news__card {
		padding:0 0 20px;
	}
	.news__card__info {
		margin-top: 10px;
	}
	.grid-row-2 .news__img img {
		aspect-ratio: 1.7;
	}
	.aside__col:first-child {
		margin:0;
	}
	.focus__news__img {
		margin-bottom: 2rem;
	}
	hr {
		margin: 2rem 0;
	}
	.sidebar {
		border-right: none;
	}
	.h2, h2, .h1, h1  {
		font-size: 34px;
	}
	.h4, h4 {
		font-size: 1.7rem;
	}
	.block__column {
		width:100%;
	}
	.news__grid {
		gap:0;
	}
	.btn__row {
		gap:20px;
	}
	.article__body p {
		font-size: 17px;
	}
	.article__title {
		text-align: center;
	}
	.breadcrumb {
		padding: 2rem 0;
	}
	.social-link {
		margin-left: 15px;
	}
	.auth__img {
		margin-right: 15px;
	}
	.advice__img {
		width: 55px;
		margin-right: 2rem;
	}
	.advice__img img {
		aspect-ratio: 1;
	}
	.advice {
		margin-bottom: 2rem;
	}
	.btn--with-icon img {
		margin-left: 2rem;
	}
	.action__card__title {
		font-size: 3rem;
	}
	.article__body {
		padding-bottom: 1rem;
		margin-bottom: 3rem;
	}
	.breadcrumb li a {
		font-size: 12px;
	}
	.news__card .news__card__title {
		font-size: 24px;
		line-height: 1.2;
	}
	.news__card.resp__card .news__card__title {
		font-size: 17px;
	}
	.news__img {
		margin-bottom: 15px;
	}
	.article__img {
		margin-bottom: 2rem;
	}
	.article__img__comment {
		font-size: 12px;
	}

	.theme-nav__content {
		flex-direction: column;
	}
	.theme-nav-list.column-2 {
		column-count: 1;
	}
	.theme-nav__head {
		border:0;
		padding:0;
		margin: 0;
	}
	.theme-nav-col {
		margin-bottom:20px;
		padding-bottom:20px;
		border-bottom:1px solid rgba(255,255,255,0.2);
	}
	.theme-nav-col:last-child {
		border-bottom:none;
	}
	.theme-nav-list {
		padding: 2rem 0 0 2rem;
	}
	.theme-nav {
		padding: 3rem 0 2rem;
	}
	.theme-nav-title::after {
		display: block;
	}
	.theme-nav__head.active .theme-nav-title::after {
		transform: rotate(225deg);
	}

	.main-post-text p {
        font-size: 16px;
        font-family: 'Manrope';
        text-align: left;
        margin-bottom: 1.2em;
    }

    .main-post-text h2 {
        font-size: 22px;
        font-weight:bold;
        margin-bottom: 14px;
    }

	h1.article__title {
		font-size:26px;
	}

    .main-post-text h3 {
        font-size:18px;
        font-weight:bold;
        margin-bottom: 14px;
    }

    .main-post-text ol li,
    .main-post-text ul li {
        font-size:16px;
        margin-bottom:0.5rem;
    }
    .main-post-text ul li::marker,
    .main-post-text ol li::marker {
      color: #D2312D; 
      font-size:16px;
    }
	/* Добавочные стили для страницы Гороскопа и Погоды */
	.page__title {
		font-size: 3.4rem;
	}

	.zodiac__card {
		padding: 2rem 2rem;
	}

	.zodiac__img {
		width: 6.6rem;
		margin-right: 2rem;
	}

	.zodiak__date {
		font-size: 14px;
	}

	.zd__toggle {
		display: inline-block;
		font-size: 14px;
		margin-left: 8.6rem;
		transform: translateY(-10px);
	}

	.zodiac__card__body {
		display: none;
	}

	.zodiac__card__head {
		flex-direction: column;
		align-items: flex-start;
		margin: 0;
	}

	.horoscope__type__wrap {
		gap: 2rem;
	}

	.horoscop__col .action__card {
		margin: 50px 0 0;
	}

	.selector__link {
		padding: 0.5em 1em;
		font-size: 1.3rem;
	}

	.zodiac__img.mobile__pic {
		display: block;
	}

	.zodiac__card__body {
		margin-top: 10px;
	}

	.zodiac__content {
		padding: 0;
	}

	.zodiac__slider,
	.weather__slider {
		padding-right: 0;
	}

	.zodiac__slide .zodiac__img {
		width: 4rem;
	}

	.zodiac__slide .zodiac__title {
		font-size: 1.4rem;
		margin-right: 0;
	}

	.zodiac__slide .zodiak__date {
		font-size: 12px;
	}

	.zodiac__slider__area {
		margin-bottom: 3rem;
	}

	.zodiac__slide {
		padding: 1rem;
	}

	.zodiac__info__row {
		padding: 1.5rem;
	}

	.zodiac__info__text {
		font-size: 1.4rem;
	}

	.mob-h-scroll {
		overflow: auto;
	}

	.page__head {
		margin-bottom: 3rem;
	}

	.weather__banner {
		padding: 2rem;
	}

	.wb__temp {
		font-size: 34px;
		line-height: 1.1;
	}

	.wb__indicator {
		font-size: 18px;
	}

	.current__weather {
		padding: 0 0 10px;
		margin-bottom: 20px;
		border-right: 0;
		border-bottom: 1px solid #d9d9d9;
		display: flex;
		flex-wrap: wrap;
	}

	.common__weather .item:last-child {
		padding-left: 0;
	}

	.city {
		font-size: 1.8rem;
		line-height: 1.5;
		margin-bottom: 15px;
	}

	.current__weather__row {
		padding: 0 10px 0 0;
		border-bottom: none;
		flex-direction: column;
		align-items: flex-start;
		width: 33%;
		margin-bottom: 10px;
		justify-content: flex-start;
	}

	.cw__text {
		font-size: 1.3rem;
		margin-bottom: 5px;
	}

	.common__weather {
		margin-bottom: 3rem;
		padding-bottom: 3rem;
		border-bottom: 1px solid #d9d9d9;
	}

	.text__block {
		margin-bottom: 4rem;
	}

	.ws__time {
		margin-bottom: 1rem;
	}

	.wt__date {
		font-size: 16px;
	}

	.weather__tabs .active .wt__date,
	.weather__tabs .active .wt__temp__day {
		font-size: 1.8rem;
	}

	.weather__tabs .active .wt__img {
		width: 4rem;
		height: 4rem;
	}

	.weather__tabs .tab {
		min-width: 140px;
		margin-right: 15px;
	}

	.weather__tab {
		border: 1px solid #d9d9d9;
		padding: 1.5rem;
	}

	.table__row__title {
		display: none;
	}

	.weather__table td {
		border-right: none;
		width: 75px;
	}

	.mobile__row {
		display: table-row;
	}

	.table__date {
		font-size: 1.6rem;
	}

	.weather__card .wt__text {
		display: block;
	}

	.weather__card {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.weather__card .wt__temp__wrap {
		display: flex;
		align-items: center;
	}

	.weather__card .wt__img {
		margin-left: 20px
	}

	.weather__card .wt__temp__day {
		margin-right: 1em;
	}
}

@media (max-width:767px) {	
	.mobile-col-1 {grid-template-columns: repeat(1, 1fr);}
	.mobile-col-2 {grid-template-columns: repeat(2, 1fr);}
	.mobile-col-1 .item {grid-column: auto; grid-row: auto;}

	.footer-nav.col-4 {
		column-count: 2;
	}
	.video__slider .slide {
		width: 250px;
	}
	.video__slider .slide {
		padding:0 1rem;
	}
	.video__slider .slick-list {
		margin:0 -1rem;
	}

	/* Добавочные стили для страницы рейтинга */
		/* Добавочные стили для страницы рейтинга */
		.raiting__block {
			padding: 2rem;
		}
	
		.rb__col {
			width: 100%;
			margin-bottom: 20px;
		}
	
		.rb__col:last-child {
			margin-bottom: 0;
		}
	
		.company__logo {
			width: 50%;
		}
	
		.atention__text p{
			font-size: 14px;
		}
	
		.raitiong__title {
			font-size: 2.8rem;
			margin-bottom: 1em;
		}
	
		.raiting__content {
			padding: 4rem 0 6rem;
		}
	
		.raiting__content p,
		.check__text {
			font-size: 16px;
		}
	
		.raiting__column {
			margin: 3rem 0;
		}
	
		.rb__col:nth-child(2),
		.rb__col:last-child {
			padding: 0;
		}
	
		.company__raiting {
			padding: 0 4rem;
		}
	.company__logo {
		width: 50%;
		height: 110px;
	}

	.dikii .tags li:last-child {
		margin-right:0px;
		padding-right: 0px;
	}
	.dikii .tags {
		margin-bottom:22px;
	}
	.dikii {
		flex-direction: column;
	}
	.tags li a {
		font-size: 1.2rem;
	}
	.company__raiting {
		padding: 0 0 0 2rem;
	}

	.checkpoint__block {
		padding: 2rem;
	}

	.lang-link {
		margin-left: 1.5em;
	}

	.language__wrapper {
		margin-left: 0;
	}

	.lang-link:first-child {
		margin: 0;
	}

	.checkpoint__icon {
		margin: 0 1rem 0 0;
		width:2rem;
	}

	.btn--dark-blue {
		font-weight:600;
	}
	.company__star__row {
		margin-bottom: 0.7rem;
	}

	.company__name,
	.company__grade {
		margin-bottom: 0.3em;
	}

	.company__star__row img {
		width: 1.7rem;
	}

	.raiting__item {
		justify-content: space-between;
	}

	.checkpoint:not(:last-child) {
		margin-bottom: 0.7rem;
	}

	.bonus__text {
		font-size: 2.2rem;
	}
}

@media (max-width:480px) {	
	.btn {width:100%;}
	.video__slider__area {
		margin-right:-15px;
	}
	/* Добавочные стили для страницы Гороскопа и Погоды */
	.zodiac__slider .slide,
	.weather__slider .slide {
		width: 110px;
	}

	.zodiac__slider .slide {
		padding: 0 0.7rem;
	}

	.zodiac__slider .slick-list {
		margin: 0 -0.7rem;
	}

	.weather__slide {
		padding: 1.5rem;
	}

	.h2,
	h2,
	.h1,
	h1 {
		font-size: 2.2rem;
	}

	.mob-h-scroll {
		justify-content: flex-start;
	}
}
