html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a:hover { border: 0; } body, input, button, textarea {    font-family: Arial, Helvetica, sans-serif; font-weight:300;} input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
body a { color: #fff; text-decoration:none;}*, *:before, *:after {box-sizing: border-box;}
body {background:#082026;      font-family: Arial, Helvetica, sans-serif;color:#6c878a;}
.header__row {margin:20px 0; overflow:hidden;}
.header__row.view {overflow:inherit;}
.header__conteiner {max-width:1290px; margin-left:auto; margin-right:auto; background:#0f353e; display:flex; align-items:center; padding:15px;     justify-content: space-between; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;}
	.site__logotype {font-size:30px; position:relative; display:flex; align-items:center;}
	.site__logotype em {color:#fff; background:#7cb46d; padding:1px 3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-size:12px; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg);}
	.site__logotype strong {font-weight:600; text-transform:uppercase; color:#7cb46d;}
	.site__logotype span {position:relative; z-index:2; margin-left:4px; font-weight:600;}
 
	.header__navigation {display:flex; margin-right:10px; margin-left:auto;}
	.header__row.view .header__navigation span,
	.header__navigation span,
	.header__navigation a {font-size:15px; margin:0 12px; color:#fff;}
	.header__row.view .header__navigation span {margin-right:0; color:#7cb46d;}
	.header__row.view .header__navigation span:after {-moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
	.header__navigation span:hover,
	.header__navigation a.select,
	.header__navigation a:hover {color:#7cb46d;}
	.header__navigation span {position:relative; display:flex; align-items:center; cursor:pointer; margin-right:0;}
	.header__navigation span:after {display:inline-flex; width:15px; height:15px; background:url('../images/arrow-drop-down-line.svg') center/12px no-repeat; margin-left:8px; transition: all 300ms ease-in-out 0s; content:'';}
	.header__row.view .header__navigation span:after,
	.header__row.view .header__navigation span:hover:after,
	.header__navigation span:hover:after {background:url('../images/arrow-drop-down-active.svg') center/12px no-repeat;}
	.header__navigation span ul { position:absolute; left:-10px; top:30px; display:none; flex-flow:column;  box-shadow: 0 10px 36px -2px rgb(0 0 0 / 18%); background: #0f353e; z-index:13;}
.header__row.view .header__navigation span ul {display:flex;}
	.header__navigation span ul li {}
	.header__navigation span ul li a {line-height:38px; color:#6c878e; display:block; white-space:nowrap;}
	.header__navigation span ul li a:hover {color:#fff;}
	.header__search {display:flex; align-items:center; margin-left:auto; margin-left:25px; z-index:11;}
		.header__button {width:40px; height:40px; background:#082026 url('../images/search-line.svg') center/19px no-repeat; cursor:pointer; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; border:0; margin-right:0; transition: all 300ms ease-in-out 0s; min-width:40px;}
		.header__search.visible .header__button {margin-right:15px;}
		.header__button:hover {}
		.header__search input:focus,
		.header__button:focus {outline:none;}
		.header__search input {font-size: inherit; line-height: inherit;  width:100%; border: 0; display: block; outline: none; font-family: inherit; position: absolute; line-height: 40px; font-size: 16px; background: #0f353e; -webkit-appearance: none; top: 0; width: 100%; opacity: 0; z-index: 1; visibility: hidden; transition: all 0s ease 0s; color:#fff;}
		.header__search input::-webkit-input-placeholder {color: #6c878a;}
		.header__search input:-ms-input-placeholder {color: #6c878a;}
		.header__search input::placeholder {color: #6c878a;}		
		.header__search.visible { box-shadow: 0 10px 36px -2px rgb(0 0 0 / 18%);  background: #0f353e;}		
		.header__search.visible input {opacity: 1; visibility: visible; transition-delay: 1.25s;}
		.header__search form {position:relative;  height:40px; width:0px; overflow:hidden; transition: all 300ms ease-in-out 0s;} 
		.header__search.visible form {width:280px; overflow:inherit;}
		.header__search form div {white-space: nowrap; color: #000; display: flex; height:40px; align-items:center;}
		.header__search form div span {line-height: 40px; font-size: 16px; opacity: 0; display: block; visibility: hidden; transform: translate(0, 12px); transition: all 0.4s ease; color:#fff;    height:40px;}
		.header__search.visible form div span {opacity:1; visibility:inherit;}
		.header__search.visible form div span:nth-child(1) {transition-delay: .9s;  margin-top: -24px;}
		.header__search.visible form div span:nth-child(2) {transition-delay: .6s;  margin-top: -24px;}
		.header__search.visible form div span:nth-child(3) {transition-delay: .3s;  margin-top: -24px;}	 	
.main__article-section {max-width:1290px; margin-left:auto; margin-right:auto; }		
	.article__header {}
	.article__header h1,
	.article__header h2,
	.article__header h3,
	.article__header h4 {color:#fff; font-weight:500; font-size:19px;}
	.video__grid-items {display: flex; flex-wrap: wrap; margin: 12px -10px;}
		.video__post-item {display: flex; flex-direction: column; width: 25%;}
			.video__post-body {padding:10px;}
				.video__thumb-post {display:flex; flex-flow:column;}
					.thumb__picture {display: block; position: relative; padding-top: 56.2%; margin-bottom: 10px;}
					.video__amount,
					.video__time {color:#fff; position:absolute; right:8px; bottom:8px; z-index:12; background:#082026b5;  font-size:13px; padding:3px 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
					.video__amount {background:#7cb46d;}
					.thumb__picture img {display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; object-fit: cover; z-index: 10; filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 12px); object-fit: cover; cursor: pointer; box-shadow: rgb(0 0 0 / 25%) 0px 16px 16px -14px; border-radius: 0.375rem;  transition: transform 0.3s ease, filter 0.3s ease; will-change: transform, filter;}
					.thumb__picture:hover img {transform: scale(1.05); filter: brightness(115%); z-index: 10;} 
					.thumb__details {display:flex; justify-content: space-between;}
						.thumb__article {display:flex; flex-flow:column; width:100%;}
							.thumb__title {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
							.thumb__categories {text-align:center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:100%;     justify-content: center; font-weight:600;}
					.video__thumb-post:hover .thumb__categories,
					.video__thumb-post:hover .thumb__title {color:#7cb46d;}
							.thumb__labels {padding-top:6px;}
							.video__labels span,
							.thumb__labels span {display:flex; align-items:center; font-weight:300; color:#6c878a; font-size:12px; margin-right:12px; margin-top:10px;}
							.thumb__labels span:last-child {margin-right:0;}
							.video__labels span:before,
							.thumb__labels span:before {content:''; display:inline-flex; width:12px; height:14px; min-width:14px; margin-right:6px; background:url('../images/eye-line.svg') center/12px no-repeat;}
							.video__labels span.views:before {background:url('../images/eye-line.svg') center/12px no-repeat;}
							.video__labels span.duration:before {background:url('../images/time-line.svg') center/12px no-repeat;}
							.video__labels span.views {margin-right:12px;}
					.video__rate-emoji {font-size:20px;}
					.video__rate-emoji span {width:35px; height:20px; min-width:35px;   display:flex; align-items:center;     justify-content: center;}
					.video__rate-emoji span img {width:25px;}
.content__page-navigation {display:flex; padding:15px 0; margin-bottom:15px;}					
.content__page-navigation a {display: inline-flex; color: #fff; text-decoration: none; margin: 3px; background-color:#0f353e; -webkit-box-shadow: 0 21px 50px -3px rgb(0 0 0); box-shadow: 0 21px 50px -3px rgb(0 0 0); border-radius: 5px; font-size: 14px; line-height: 30px; text-align: center; min-width: 40px; display:flex; align-items:center;     justify-content: center;}		
.content__page-navigation a:hover,
.content__page-navigation a.current {background:#7cb46d;}		
.content__page-navigation a.prev {padding:0 8px 0 4px;}
.content__page-navigation a.next {padding:0 4px 0 8px;}
.content__page-navigation a.next i,
.content__page-navigation a.prev i {width:20px; min-width:20px; height:20px; background:url('../images/arrow-drop-left-line.svg') center/12px no-repeat; margin-right:4px;}
.content__page-navigation a.next i {margin-right:0; margin-left:4px; background:url('../images/arrow-drop-right-line.svg') center/12px no-repeat;}
.popular__searches-group,
.popular__tags-group {display:flex; flex-wrap:wrap; padding:20px 0; margin:0 -6px;}
.popular__searches-group a,
.popular__tags-group a {display: inline-flex; flex-wrap: wrap; text-decoration: none; color: #fff; font-size: 13px; line-height: 30px; font-weight: 400; margin: 3px; border-radius: 1px; padding: 0 12px 0 10px; position: relative; background-color:#0f353e; -webkit-box-shadow: 0 21px 50px -3px rgb(0 0 0); box-shadow: 0 21px 50px -3px rgb(0 0 0); border-radius: 5px;}
.popular__tags-group a:before {content: '#'; margin-right: 3px; color: #7cb46d;}
.popular__searches-group a {align-items:center;}
.popular__searches-group a:before {content:''; display:inline-flex; width:15px; height:15px; background:url('../images/search-line.svg') center/12px no-repeat; margin-right:5px;}
.popular__tags-group a span {margin-left: 10px; font-size: 12px; color: rgba(255,255,255,.6); }
.popular__searches-group a:hover,
.popular__tags-group a:hover {background:#7cb46d;}
.popular__tags-group a:hover:before {color:#fff;}
.middle__article-page { background:#0f353e;  margin:20px 0; text-align:center; padding:10px 0;}
.article__mobile {display: flex; align-items: center; height: 250px; margin: 20px 0; justify-content: center; overflow: hidden; flex-wrap: wrap;}
.aside-block {display:inline-block; width:300px; height:250px; overflow:hidden; margin: 3px 3px;}
.aside-block-desk {overflow: hidden; display: inline-flex; width: 900px; height: 250px; }
.live_chat {margin: 10px 0 10px 0; background-color: #ffffff; text-align: center; border-radius: 2px;}
.part_ar {display: block; justify-content: center; width:300px; height:100px; margin:1px auto 20px auto;}
.part_ar_middle {display: block; justify-content: center; width:300px; height:auto; margin:5px auto 10px auto;}
.part_ar_desk {display: block; justify-content: center; align-items: center; width: 728px; height: 100px; margin: 15px auto 20px auto;}
.responsive-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(32px, 5vw, 38px);
  background: black;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  justify-content: center;
  text-align: center;
}

.overlay-text {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  line-height: 18px;
}

.overlay-text a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.3s ease;
}
.overlay-text a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.toplinks {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 100%;
}

.toplinks li {
  flex: 0 0 auto;
}

.toplinks a {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.3s ease;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toplinks a:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
  opacity: 0.95;
}

/* toplist */

.popular__toplist-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 0;
  margin: 0;
  list-style: none;
}

.popular__toplist-group a {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #ffffff;
  font-size: 13.5px;
  line-height: 32px;
  font-weight: 600;
  padding: 0 14px 0 12px;
  background: linear-gradient(145deg, #0f353e, #184952);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease, transform 0.2s ease;
}

.popular__toplist-group a:hover {
  background: linear-gradient(145deg, #88d081, #5ca561);
  transform: translateY(-2px);
}


.footer__section {padding:20px 0; margin-top:15px;}
.footer_links {max-width:1290px; margin-left:auto; margin-right:auto; text-align: center;}
.footer_links p {line-height:1.3; margin-bottom:12px; font-size:13px;}
.footer_links p a{text-decoration:none; color:#fff;}
.footer_links p a:hover {color:#7cb46d;}
.footer_links img {display: inline-block;}
	.footer__article {max-width:1290px; margin-left:auto; margin-right:auto; display:flex;     justify-content: space-between; font-size:14px;}
	.footer__article nav {display:flex; align-items:center; }
	.footer__article nav a {color:#6c878a; margin:0 8px;}
	.footer__article nav a:first-child {margin-left:0;}
	.footer__article nav a:hover {color:#7cb46d;}
	.footer__copyright {}
 .video__page-container {display:flex;}
	.video__left-column {width:calc(100% - 320px); max-width:calc(100% - 320px);}
		.video__player-section {position:relative; width: 100%; padding-top: 56.2%;}
.video__page-conteiner {padding:15px;     background: #0f353e; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; margin:12px 0;  }		
	.video__info-toprow {display:flex;}
		.video__left-info {display:flex; flex-flow:column; max-width:calc(100% - 270px);}
			.video__full-title {display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 16px; color: #fff; font-weight: 500;}
			.video__main-categories {margin:10px 0; font-size:11px;}
			.video__main-categories a {font-size:13px; color:#6c878a;}
			.video__main-categories a:hover {color:#7cb46d;}
			.video__labels {display:flex;}
		.video__rate-section {width:260px; margin-left:auto; display:flex; flex-flow:column;}
			.video__emoji-row {}
			.video__emoji-row form {}
			.video__emoji-row button {position:relative;transition: all 0.1s; border:0; cursor:pointer; background:none;}
			.video__emoji-row button i {border: 3px solid #0f353e; background: #e84855; color: #fff; line-height: 16px; min-width: 22px; border-radius: 30px; text-align: center; position: absolute; right: -2px; top: 22px; font-size: 10px;}
			.video__emoji-row button .emojione {font-size: inherit;    display: inline-block;  line-height: normal; vertical-align: middle; width:35px; min-width:35px; height:35px;}
			.video__emoji-row button:hover {transform: scale(1.1, 1.1); }
			.video__emoji-row button:focus {outline:none;}
			.video__vote-text {text-align: center; padding-top: 10px; font-size: 14px; display:none;}
.video__rate-section.voted .video__emoji-row button {opacity:.6;}
.video__rate-section.voted .video__emoji-row button.check {opacity:1; transform: scale(1.1, 1.1);}
.video__rate-section.voted .video__vote-text  {display:block;}
	.video__bottom-row {}
		.main__video-tags {display: flex; flex-wrap: wrap; margin:5px -4px;}
		.main__video-tags a {background: #082026; color: #fff; text-decoration: none; font-size: 12px; line-height: 22px; display: flex; padding: 3px 6px; border-radius: 4px; margin:4px;}
		.main__video-tags a:hover {background:#7cb46d;}
	.video__right-column {width:300px; margin-left:20px;}
	.video__right-column > div {margin-bottom: 20px;}
.tag__group-section {display:flex; margin:20px 0;}
	.tag__group-section ul {width:20%;}
	.tag__group-section ul li {position:relative;  line-height:25px; display:flex; align-items:center;     justify-content: space-between;}
	.tag__group-section ul li.tag__letter:first-child {margin-top:0;}
	.tag__group-section ul li.tag__letter {margin-top:15px;}
	.tag__group-section ul li.tag__letter span {display: block;  color: #fff; font-size: 13px; line-height: 30px; font-weight: 400;  border-radius: 1px;  text-align:center; position: relative; background-color: #0f353e; -webkit-box-shadow: 0 21px 50px -3px rgb(0 0 0); box-shadow: 0 21px 50px -3px rgb(0 0 0); border-radius: 5px; width:100%; margin-right:15px; margin-bottom:15px;}
	.tag__group-section ul li a {text-decoration:none; color:#fff; font-size:14px; }
	.tag__group-section ul li a:hover {color:#7cb46d;}
	.tag__group-section ul li small {color:#6c878e; font-weight:300; font-size:11px; margin-right:15px;}
	
.video__player-navigation {padding:10px 10px 0 10px; position:absolute; left:0; right:0; bottom:0; right:0;}
.video__time-line {display:block; height:3px; width:100%; background:rgba(255,255,255,.5); margin-bottom:6px;}
.video__navigation {display:flex;     justify-content: space-between; align-items:center;}
.video__left-nav {display:flex; align-items:center;}
.video__left-nav button {width:30px; height:30px;  margin-left:12px; border:0; cursor:pointer;}
.video__left-nav button.video__play-btn {background:url('../images/play-fill.svg') center/20px no-repeat;}
.video__left-nav button.video__audio-btn {background:url('../images/volume-down-fill.svg') center/20px no-repeat;}
.video__left-nav button:focus {outline:none;}
.video__left-nav .video__volume-size {position:relative; margin:0 15px;}
.video__left-nav .video__volume-size:before {content:''; display:inline-flex; height:3px; background:rgba(255,255,255,.5); width:80px;}
.video__left-nav .video__volume-size:after {content:''; display:inline-block; position:absolute; left:80%; top:50%; height:9px; width:9px; background:#fff; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; margin:0px -4px 0 0;}
.video__left-nav .video__time-data {color:#fff; font-weight:300; font-size:12px;}
.video__size-button {}
.video__size-button button {width:30px; height:30px; background:url('../images/fullscreen-line.svg') center/20px no-repeat; margin-left:12px; border:0; cursor:pointer;}
.video__size-button button:first-child {margin-left:0;}
.video__size-button button:focus {outline:none;}
.video__size-button button:nth-child(2) {background:url('../images/fullscreen-exit-line.svg') center/20px no-repeat;}
.video__goplay {width:65px; height:66px; background:#333333 url('../images/play-fill.svg') center/35px no-repeat; position:absolute; left:50%; top:50%; cursor:pointer;-moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); z-index:11; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px;}	
.feedback { --normal: #ECEAF3; --normal-shadow: #D9D8E3; --normal-mouth: #9795A4; --normal-eye: #595861; --active: #F8DA69; --active-shadow: #F4B555; --active-mouth: #F05136; --active-eye: #313036; --active-tear: #76b5e7; --active-shadow-angry: #e94f1d; margin: 0; padding: 0; list-style: none; display: flex;     justify-content: flex-end;} .feedback li { position: relative; border-radius: 50%; background: var(--sb, var(--normal)); box-shadow: inset 3px -3px 4px var(--sh, var(--normal-shadow)); transition: background 0.4s, box-shadow 0.4s, transform 0.3s; -webkit-tap-highlight-color: transparent; } .feedback li:not(:last-child) { margin-right: 5px; } .feedback li div { width: 40px; height: 40px; position: relative; transform: perspective(240px) translateZ(4px); } .feedback li div svg, .feedback li div:before, .feedback li div:after { display: block; position: absolute; left: var(--l, 9px); top: var(--t, 13px); width: var(--w, 8px); height: var(--h, 2px); transform: rotate(var(--r, 0deg)) scale(var(--sc, 1)) translateZ(0); } .feedback li div svg { fill: none; stroke: var(--s); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s; } .feedback li div svg.eye { --s: var(--e, var(--normal-eye)); --t: 17px; --w: 7px; --h: 4px; } .feedback li div svg.eye.right { --l: 23px; } .feedback li div svg.mouth { --s: var(--m, var(--normal-mouth)); --l: 11px; --t: 23px; --w: 18px; --h: 7px; } .feedback li div:before, .feedback li div:after { content: ""; z-index: var(--zi, 1); border-radius: var(--br, 1px); background: var(--b, var(--e, var(--normal-eye))); transition: background 0.4s; } .feedback li.angry { --step-1-rx: -24deg; --step-1-ry: 20deg; --step-2-rx: -24deg; --step-2-ry: -20deg; } .feedback li.angry div:before { --r: 20deg; } .feedback li.angry div:after { --l: 23px; --r: -20deg; } .feedback li.angry div svg.eye { stroke-dasharray: 4.55; stroke-dashoffset: 8.15; } .feedback li.angry.active { -webkit-animation: angry 1s linear; animation: angry 1s linear; } .feedback li.angry.active div:before { --middle-y: -2px; --middle-r: 22deg; -webkit-animation: toggle 0.8s linear forwards; animation: toggle 0.8s linear forwards; } .feedback li.angry.active div:after { --middle-y: 1px; --middle-r: -18deg; -webkit-animation: toggle 0.8s linear forwards; animation: toggle 0.8s linear forwards; } .feedback li.sad { --step-1-rx: 20deg; --step-1-ry: -12deg; --step-2-rx: -18deg; --step-2-ry: 14deg; } .feedback li.sad div:before, .feedback li.sad div:after { --b: var(--active-tear); --sc: 0; --w: 5px; --h: 5px; --t: 15px; --br: 50%; } .feedback li.sad div:after { --l: 25px; } .feedback li.sad div svg.eye { --t: 16px; } .feedback li.sad div svg.mouth { --t: 24px; stroke-dasharray: 9.5; stroke-dashoffset: 33.25; } .feedback li.sad.active div:before, .feedback li.sad.active div:after { -webkit-animation: tear 0.6s linear forwards; animation: tear 0.6s linear forwards; } .feedback li.ok { --step-1-rx: 4deg; --step-1-ry: -22deg; --step-1-rz: 6deg; --step-2-rx: 4deg; --step-2-ry: 22deg; --step-2-rz: -6deg; } .feedback li.ok div:before { --l: 12px; --t: 17px; --h: 4px; --w: 4px; --br: 50%; box-shadow: 12px 0 0 var(--e, var(--normal-eye)); } .feedback li.ok div:after { --l: 13px; --t: 26px; --w: 14px; --h: 2px; --br: 1px; --b: var(--m, var(--normal-mouth)); } .feedback li.ok.active div:before { --middle-s-y: .35; -webkit-animation: toggle 0.2s linear forwards; animation: toggle 0.2s linear forwards; } .feedback li.ok.active div:after { --middle-s-x: .5; -webkit-animation: toggle 0.7s linear forwards; animation: toggle 0.7s linear forwards; } .feedback li.good { --step-1-rx: -14deg; --step-1-rz: 10deg; --step-2-rx: 10deg; --step-2-rz: -8deg; } .feedback li.good div:before { --b: var(--m, var(--normal-mouth)); --w: 5px; --h: 5px; --br: 50%; --t: 22px; --zi: 0; opacity: 0.5; box-shadow: 16px 0 0 var(--b); filter: blur(2px); } .feedback li.good div:after { --sc: 0; } .feedback li.good div svg.eye { --t: 15px; --sc: -1; stroke-dasharray: 4.55; stroke-dashoffset: 8.15; } .feedback li.good div svg.mouth { --t: 22px; --sc: -1; stroke-dasharray: 13.3; stroke-dashoffset: 23.75; } .feedback li.good.active div svg.mouth { --middle-y: 1px; --middle-s: -1; -webkit-animation: toggle 0.8s linear forwards; animation: toggle 0.8s linear forwards; } .feedback li.happy div { --step-1-rx: 18deg; --step-1-ry: 24deg; --step-2-rx: 18deg; --step-2-ry: -24deg; } .feedback li.happy div:before { --sc: 0; } .feedback li.happy div:after { --b: var(--m, var(--normal-mouth)); --l: 11px; --t: 23px; --w: 18px; --h: 8px; --br: 0 0 8px 8px; } .feedback li.happy div svg.eye { --t: 14px; --sc: -1; } .feedback li.happy.active div:after { --middle-s-x: .95; --middle-s-y: .75; -webkit-animation: toggle 0.8s linear forwards; animation: toggle 0.8s linear forwards; } .feedback li:not(.active) { cursor: pointer; } .feedback li:not(.active):active { transform: scale(0.925); } .feedback li.active { --sb: var(--active); --sh: var(--active-shadow); --m: var(--active-mouth); --e: var(--active-eye); } .feedback li.active div { -webkit-animation: shake 0.8s linear forwards; animation: shake 0.8s linear forwards; } @-webkit-keyframes shake { 30% { transform: perspective(240px) rotateX(var(--step-1-rx, 0deg)) rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg)) translateZ(10px); } 60% { transform: perspective(240px) rotateX(var(--step-2-rx, 0deg)) rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg)) translateZ(10px); } 100% { transform: perspective(240px) translateZ(4px); } } @keyframes shake { 30% { transform: perspective(240px) rotateX(var(--step-1-rx, 0deg)) rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg)) translateZ(10px); } 60% { transform: perspective(240px) rotateX(var(--step-2-rx, 0deg)) rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg)) translateZ(10px); } 100% { transform: perspective(240px) translateZ(4px); } } @-webkit-keyframes tear { 0% { opacity: 0; transform: translateY(-2px) scale(0) translateZ(0); } 50% { transform: translateY(12px) scale(0.6, 1.2) translateZ(0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1) translateZ(0); } } @keyframes tear { 0% { opacity: 0; transform: translateY(-2px) scale(0) translateZ(0); } 50% { transform: translateY(12px) scale(0.6, 1.2) translateZ(0); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1) translateZ(0); } } @-webkit-keyframes toggle { 50% { transform: translateY(var(--middle-y, 0)) scale(var(--middle-s-x, var(--middle-s, 1)), var(--middle-s-y, var(--middle-s, 1))) rotate(var(--middle-r, 0deg)); } } @keyframes toggle { 50% { transform: translateY(var(--middle-y, 0)) scale(var(--middle-s-x, var(--middle-s, 1)), var(--middle-s-y, var(--middle-s, 1))) rotate(var(--middle-r, 0deg)); } } @-webkit-keyframes angry { 40% { background: var(--active); } 45% { box-shadow: inset 3px -3px 4px var(--active-shadow), inset 0 8px 10px var(--active-shadow-angry); } } @keyframes angry { 40% { background: var(--active); } 45% { box-shadow: inset 3px -3px 4px var(--active-shadow), inset 0 8px 10px var(--active-shadow-angry); } }
.feedback li {position:relative; scale:.8;}
.feedback li.active .rate__data {color:#fff;}
.rate__data {  display:block; position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:14px; margin-bottom:-20px;}
 
@media screen and (max-width: 1290px) {
	.footer__section,
	.header__row,
	.main__article-section {padding-left:12px; padding-right:12px;}
}
@media screen and (max-width: 1024px) {
	.video__post-item {width:33.33%;}
}
@media screen and (max-width: 960px) {
	.video__page-container {flex-flow:column;}
	.video__left-column {width:100%; max-width:100%;}
	.video__right-column {width:100%; margin-left:0; height:250px; text-align:center; margin:20px 0; overflow:hidden;}
	.header__search.visible form {width:220px;}
.article__mobile {display:block;}
.aside-block-desk {display: none;}
}
@media screen and (max-width: 920px) {
	.tag__group-section ul {width:100%;}
	.tag__group-section {flex-flow:column; margin-right:-10px;}
	.tag__group-section ul {display:flex; flex-wrap:wrap; }
	.tag__group-section ul li {width:25%;}
	.tag__group-section ul li.tag__letter {width:100%;}
}
@media screen and (max-width: 860px) {
	.header__conteiner {padding-bottom:0;}
	.header__navigation { order:3; flex:1; width:100%; min-width:100%;}
	.header__navigation a,
	.header__navigation span {margin:0; width:25%; line-height:45px;}
	.header__navigation span ul li a {width:auto;}
	.header__row.view .header__navigation span {margin:0;}
	.header__row.view .header__navigation span ul {padding:0 15px;}
	.header__conteiner {flex-wrap:wrap;}
	.header__search.visible span,
	.header__search.visible input {font-size:14px;}
}
@media screen and (max-width: 720px) {
	.video__post-item {width:50%;}
}
@media screen and (max-width: 660px) {
.header__navigation a, .header__navigation span {    justify-content: center; text-align:center;}
.header__navigation span ul li a {text-align:left; display:block;}
.header__navigation span ul {left:12px;}
	.video__left-info {max-width:100%;}
	.video__info-toprow {flex-flow:column;}
	.video__rate-section {margin-left:0; margin-top:15px; margin-bottom:12px;}
	.feedback {    justify-content: flex-start; margin-bottom:10px;}
}
@media screen and (max-width: 640px) {
		.tag__group-section ul li {width:33.33%;}
	.tag__group-section ul li.tag__letter {width:100%;}
}
@media screen and (max-width: 560px) {
	.header__search {margin-left:0;}
	.header__search.visible form {width:200px;}
}
@media screen and (max-width: 520px) {
	.header__conteiner {position:relative;}
	.header__search {  position:absolute;  right:12px; top:12px;     justify-content: flex-end;}
	.header__search {width:calc(100% - 30px);}
	.header__search form {width:0%;}
	.header__search.visible form {width:100%;}
}
@media screen and (max-width:480px) {
	.toplinks a {padding: 2px 4px; gap: 5px; font-size: 11px; font-weight: normal;}
	.responsive-overlay {height: 20px;}
}
@media screen and (max-width: 460px) {
	.footer__article {flex-flow:column; text-align:center;}
	.footer__article nav {    justify-content: center; margin-bottom:15px;}
	.content__page-navigation a {display:none;}
	.content__page-navigation a.prev,
	.content__page-navigation a.next,
	.content__page-navigation a.current {display:inline-flex;}
	.content__page-navigation {    justify-content: space-between;}
	.header__navigation span ul {left:0;}
	.video__post-item {width:100%;}
}
@media screen and (max-width:420px) {
			.tag__group-section ul li {width:50%;}
	.tag__group-section ul li.tag__letter {width:100%;}
	.header__navigation a:first-child {display:none;}
	.header__navigation a, .header__navigation span {width:33.33%; text-align:center;     justify-content: center;}
	.header__navigation span ul li a {width:auto;}
	.header__row.view ul li a:first-child {display:block;}
	.header__row.view .header__navigation span ul {padding:0 50px 0 15px; text-align:left;}
	.header__row.view .header__navigation span ul li a{ text-align:left;}
	.video__size-button button:last-child {display:none;}
	.video__left-nav .video__volume-size:before {width:45px;}
}
@media screen and (max-width:320px) {
 			.tag__group-section ul li,
	.tag__group-section ul li.tag__letter {width:100%;}
}