* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Plus Jakarta Sans', sans-serif;
	margin: 0 auto;
	font-weight: 400;
	color: #2b3c58;
	line-height: 1.3;
	font-size: 16px;
	background: #f5f7fa;
}

html {
	overflow: visible !important;
	margin: 0 !important;
}

.long-block{
    margin: 20px;
    width: 100%;
    float: left;
    text-align: center;
}

.themes-container{
    display: flex;
    flex-wrap: wrap;
}

.btn-green {
	background: #22B573 !important;
}

.btn-red {
	background: #ED7C83 !important;
}

.popular-search-request-container {
	width: 100%;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
}

@media only screen and (min-width: 1100px) {
	.popular-requests {
		display: block;
		background: white;
		color: black;
		padding: 8px 15px 8px 15px;
		border-radius: 10px;
		font-size: 14px;
		margin: 10px;
	}
}

@media only screen and (max-width: 1143px) {
	.popular-requests {
		display: none;
	}
}

.skins-list-header {
	width: 100%;
	height: 50px;
	background: #889dba;
	padding-left: 20px;
	border-radius: 3px;
	display: flex;
	align-content: stretch;
	align-items: center;
	color: white;
}

/* 2.1 Title */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	display: block;
	font-weight: bold;
	margin-bottom: 10px;
	padding: 0;
	line-height: 1.2;
}

h1,
.h1 {
	font-size: 27px;
}

h2,
.h2 {
	font-size: 24px;
}

h3,
.h3 {
	font-size: 22px;
}

h4,
.h4 {
	font-size: 20px;
}

h5,
.h5 {
	font-size: 18px;
}

h6,
.h6 {
	font-size: 16px;
}

/* 2.2 Button */
button,
input[type=submit],
.btn {
	background: #6ab4f5;
	border: none;
	text-align: center;
	color: #fff;
	display: inline-block;
	padding: 13px 20px 15px 20px;
	border-radius: 5px;
	min-width: 135px;
	line-height: 1;
	font-weight: bold;
}

button:hover,
.btn:hover,
input[type=submit],
.btn_white:hover,
.btn_transparent:hover {
	background: #2b3c58;
	text-decoration: none !important;
	cursor: pointer;
}

/* 2.4 Default tags */
p {
	margin-bottom: 5px;
}

a {
	color: #2b3c58;
	text-decoration: none !important;
	cursor: pointer;
	outline: none;
}

a:hover {
	text-decoration: underline;
}

a:focus {
	outline: none;
}

img {
	height: auto;
	vertical-align: middle;
	border: none;
	max-width: 100%;
}

b,
strong {
	font-weight: 600;
}

form {
	padding: 0;
	margin: 0;
	display: block;
}

input {
	margin-bottom: 20px;
	width: 100%;
	color: #2b3c58;
	outline: none !important;
	border: 1px solid #2b3c58;
	background: #e6e6e6;
	padding: 12px;
	border-radius: 5px;
	font-size: 15px;
}

textarea {
	margin-bottom: 30px;
	width: 100%;
	color: #2b3c58;
	outline: none !important;
	min-height: 100px;
	border: 1px solid #CCCBCB;
	background: transparent;
	padding: 15px 15px;
	font-size: 14px;
	display: block;
	border-radius: 4px;
}

select {
	margin-bottom: 25px;
	width: 100%;
	color: #2b3c58;
	outline: none !important;
	border: 1px solid #CCCBCB;
	background: transparent;
	padding: 10px 15px;
	border-radius: 4px;
}

::-webkit-input-placeholder {
	color: #2b3c58;
}

::-moz-placeholder {
	color: #2b3c58;
}

/* Firefox 19+ */
:-moz-placeholder {
	color: #2b3c58;
}

/* Firefox 18- */
:-ms-input-placeholder {
	color: #2b3c58;
}

label {
	cursor: pointer;
}

ul,
ol {
	padding: 0;
	margin-left: 30px;
	list-style-type: square;
}

ol {
	counter-reset: myCounter;
}

ol li {
	list-style: none;
}

ol li:before {
	counter-increment: myCounter;
	content: counter(myCounter);
	display: inline-block;
	margin: 0px 15px 0px 0px;
}

address {
	font-style: normal;
}

blockquote {
	border-left: 1px solid #CCCBCB;
	padding: 3px 0 7px 19px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 20px;
	line-height: 1.6;
	margin-bottom: 50px;
	color: #201E20;
	font-weight: 600;
	max-width: 600px;
}

article li {
	list-style: none;
	margin: 5px 0;
	position: relative;
}

article ul li:before {
	font: normal normal normal 8px/1 FontAwesome;
	content: "\f04d";
	position: relative;
	top: -2px;
	padding-right: 15px;
}

article ul,
article ol {
	margin: 30px;
}

main table {
	width: 100%;
	border-collapse: collapse;
}

main tr:nth-of-type(odd) {
	background: #e0e0e0;
}

main th {
	background: #6D849B;
	color: white;
	font-weight: normal;
}

main td,
main th {
	padding: 5px 15px;
	border: 1px solid #CCCBCB;
	text-align: left;
	line-height: 1.3;
}

/* 2.5 Dental Grid System*/
.container {
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 17px 11%;
}

.di_row_flex {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	/* align-items: center; */
	width: 100%;
}

.row:before,
.row:after {
	content: " ";
	display: table;
	clear: both;
}

.row_15 {
	margin: 0 -30px;
}

.col {
	width: 100%;
}

.col-1-60 {
	width: 65%;
	float: left;
}

.col-1-40 {
	width: 35%;
	float: left;
}

.col_2 {
	width: 40%;
	float: left;
}

.col_3 {
	width: 33.3%;
	float: left;
}

.col_3_top {
	width: 33.3%;
	float: left;
	max-width: 357px;
}

@media only screen and (min-width: 1900px) {
	.magic_img {
		max-width: 20% !important;
	}
}

@media only screen and (min-width: 2000px) {
	.col_3 {
		width: 25%;
		float: left;
	}

	#request_banner {
		max-height: 230px;
	}

	.request_btn {
		padding: 13px 30px 16px 30px !important;
	}
}

.col_4 {
	width: 25%;
	float: left;
}

.col_5 {
	width: 20%;
	float: left;
}

.col_6 {
	width: 16.66%;
	float: left;
}

header {
	width: 100%;
	min-height: 107px;
	background: #2b3c58;
}

.header_container {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
}

.logo {
	width: 242px;
}

main {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
	z-index: 1;
}

.sidebar100hv {
	min-height: 100vh;
	display: flex;
	position: relative;
}

.wrapper {
	display: flex;
	height: 100vh;
}

.sidebar {
	background-color: #e4edf4;
	width: 316px;
	min-height: 100%;
	top: 0;
	padding: 27px 22px;
}

.content {
	height: 100%;
}

.seach {
	text-align: center;
	margin: 0 auto;
	padding-top: 31px;
}

.seach form {
	position: relative;
	width: 260px;
	margin: 0 auto;
}

.seach input,
.seach button {
	border: none;
	outline: none;
}

.seach input {
	width: 100%;
	height: 44px;
	padding-left: 15px;
}

.seach button {
	height: 44px;
	width: 44px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	line-height: 55px;
	background: transparent;
	padding: 0;
	color: #a6b4c6;
	min-width: auto;
}

.seach button:before {
	content: "\f002";
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-size: 27px;
}

.seach button:hover {
	color: #2b3c58;
}

.header_baner {
	height: 44px;
	width: 125px;
	margin-top: 27px;
	padding: 5px;
	margin-right: 9.5%;
}

.home_block {
	margin-bottom: 15px;
	padding: 8px;
	background: radial-gradient(circle, rgb(131 208 255) 0%, #976cc4 100%);
	text-align: center;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 5px;
}

.home_block_bd {
	text-align: center;
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: center;
	justify-content: center;
	width: 60%;
}

.home_block_text {
	color: white;
	font-size: 1.5vw;
	line-height: 1.3;
	margin: 10px;
}

.request_link {
	text-decoration: none !important;
	width: 100%;
}

.home_block_btn {
	min-width: 205px;
	background: #3a3943c9;
	padding: 13px 23px;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
	text-decoration: none !important;
	color: #ffffff;
	border-radius: 5px;
	font-size: 19px;
	line-height: 15px;
}

.home_block_btn:hover {
	background: #2B3C58;
	padding: 13px 25px;
}

.home_block_img {
	max-height: 166px;
	margin-right: 8px;
}

.cut-text {
	text-overflow: ellipsis;
	overflow: hidden;
	width: 272px;
	height: 1.2em;
	white-space: nowrap;
	margin-top: 10px;
}

.textlink {
	color: #3971ff;
}

.feedback-container {
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.feedback-container button {
	padding: 15px 20px 13px 20px
}

.feedback-container input {
	width: unset;
	margin: 0 !important;
	margin: 5px 7px 5px 7px !important;
}

.checkbox-container {
	text-align: left;
	background: #d1e8fe;
	padding: 12px 17px 12px 17px;
	border-radius: 10px;
	margin: 10px;
}

.content-feedback {
	justify-content: center;
	align-items: center;
	padding: 50px !important;
}

.feedback-container textarea {
	padding: 12px;
	margin: 13px;
	width: 94%;
	border: 2px solid #2b3c58;
}

.btns-apply {
	display: none;
}

.doyouwanttoapply {
	padding: 10px;
	margin-bottom: 44px;
	font-size: 20px;
	font-weight: 600;
}

/*GREEN BUTTON*/
.youtube-button {
	background: linear-gradient(0deg, #469bff, #79ccff);
	text-align: center;
	font-weight: 300;
	padding: 4px;
	width: calc(48% - 8px);
	margin: 12px auto 0px auto;
	height: 40px;
	line-height: 2.2;
	-webkit-border-radius: 30px;
	border-radius: 3px;
	cursor: pointer;
	text-decoration: none !important;
	color: white;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 18px;
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgb(0 0 0 / 0%);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: .2s;
	transition-duration: .2s;
	font-family: PlusJakartaBold;
}

.youtube-button:before {
	content: "";
	position: absolute;
	z-index: -1;
	background: #2098D1;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: .2s;
	transition-duration: .2s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	text-decoration: none !important;
	content: "";
	position: absolute;
	border-radius: 3px;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00c37c', endColorstr='#00ae57', GradientType=1);
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-out;
	background: linear-gradient(0deg, #62beef, #79ccff);
	transition-timing-function: ease-out;
	font-weight: 400;
}

.youtube-button:active,
.youtube-button:focus,
.youtube-button:hover {
	color: #fff;
}

.youtube-button:active:before,
.youtube-button:focus:before,
.youtube-button:hover:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	border-radius: 3px;
}

.success-container {
	display: flex;
	font-size: 15px;
	align-items: center;
}

.p-25 {
	padding: 25px;
}

.overlay-banner {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	background: #000000b8;
	z-index: 111111;
	align-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 5%;
}

.rateus-banner {
	background-image: url(/img/ratebg.svg);
	width: 665px;
	height: -webkit-fill-available;
	position: absolute;
	z-index: 111;
	background-size: auto;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
}

.rateus-banner i {
	font-size: 40px;
	position: absolute;
	right: 17px;
	top: 14px;
	color: #6F7C99;
	cursor: pointer;
}

.rate-title {
	font-size: 27px;
	color: #29aae1;
	text-align: center;
	text-transform: uppercase;
	margin-top: 30px;
	font-weight: 600;
}

.rateus-banner img {
	margin-top: 15px;
	width: 40%;
}

.rateus-banner .btn {
	width: 235px;
	margin-top: 16px;
}

.not-now {
	text-decoration: none !important;
	margin-top: 11px;
}

.check-b {
	display: flex;
	width: auto;
	margin-top: 12px;
}

.check-b input {
	width: 26px;
	margin-top: 4px;
}

.more-skins {
	font-size: 21px;
	margin-top: 10px;
}

.stay-tunned {
	text-align: center;
	display: flex;
	justify-content: center;
	background: #a6b4c6 !important;
	color: #ffffff;
	justify-content: center;
	font-size: 25px;
	justify-content: center !important;
	box-shadow: none !important;
}

.py-60 {
	padding: 20px 0;
}

@media only screen and (max-width: 768px) {
	.py-60 {
		padding: 52px 0;
	}
}

section {}

.py-60 h1 {
	margin-bottom: 25px;
}

h2 {
	font-family: Roboto-Light;
	font-size: 32px;
	color: #000;
	line-height: 1.25;
	text-transform: uppercase;
}

@media only screen and (max-width: 768px) {
	h2 {
		font-size: 24px;
	}
}

.text-control-1 h2 {
	margin-bottom: 20px;
}

@media only screen and (max-width: 768px) {
	.text-control-1 h2 {
		margin-bottom: 16px;
	}
}

.q-mark {
	color: #2b3c58;
	padding: 20px 0 17px 27px;
	font-weight: bold;
}

.question {
	font-size: 20px;
	color: #2b3c58;
	line-height: 1.5;
	padding: 25px;
	margin-bottom: 0;
	font-weight: bold;
}

.material-icons.drop {
	padding: 20px;
	font-size: 2rem;
	color: #d40119;
	transition: transform 0.5s ease-in-out;
}

.answer {
	font-size: 16px;
	color: #232323;
	padding-left: 32px;
	padding-bottom: 25px;
	background-color: #fff;
	overflow: hidden;
	padding-right: 67px;
}

.accordion {
	background-color: #fff;
	color: #444;
	cursor: pointer;
	width: 100%;
	margin-bottom: 20px;
	text-align: left;
	border: none;
	outline: none;
	transition: 0.4s;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

@media only screen and (max-width: 768px) {
	.accordion {
		margin-bottom: 16px;
	}
}

.question-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.25s ease-in-out;
}

.answer-wrapper {
	display: none;
	padding-bottom: 20px;
}

.icon-expend {
	transform: rotateX(180deg);
	transition: transform 0.75s ease-in-out;
}

.active,
.accordion:hover .question-wrapper {}

.active p,
.accordion:hover .question-wrapper p {}

.w-100 {
	width: 100%;
	display: flex;
	align-items: center;
}

.font-aw {
	font-size: 25px !important;
	margin-right: 29px;
	color: #889dba;
}

.success-number {
	background: white;
	border-radius: 50%;
	min-width: 37px;
	min-height: 37px;
	font-size: 27px;
	text-align: center;
	margin-right: 12px;
}

.contact1 {
	width: 100%;
	min-height: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 100px;
}

.container-contact1 {
	width: 900px;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 20px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	padding: 53px 50px 63px 70px;
	margin-top: 20px;
	box-shadow: 0 0px 5px #d8dadf;
}

/*------------------------------------------------------------------[  ]*/
.contact1-pic {
	width: 337px;
	margin-left: -25px;
	margin-top: -21px;
}

.contact1-pic img {
	max-width: 100%;
}

/*------------------------------------------------------------------[  ]*/
.contact1-form {
	width: 390px;
}

.contact1-form-title {
	display: block;
	font-size: 24px;
	color: #333333;
	line-height: 1.2;
	text-align: center;
	padding-bottom: 17px;
}

input.input1 {
	font-family: 'Plus Jakarta Sans';
	height: 50px;
	border-radius: 5px;
	padding: 0 15px;
}

input.input1+.shadow-input1 {
	border-radius: 5px;
}

textarea.input1 font-family: 'Plus Jakarta Sans';
min-height: 150px;
border-radius: 5px;
padding: 12px 30px;
}

textarea.input1+.shadow-input1 {
	border-radius: 5px;
}

/*---------------------------------------------*/
.wrap-input1 {
	position: relative;
	width: 100%;
	z-index: 1;
	margin-bottom: 20px;
}

.input1 {
	font-family: 'Plus Jakarta Sans';
	display: block;
	width: 100%;
	background: #f5f5f5;
	font-size: 15px;
	line-height: 1.5;
	color: #666666;
}

.shadow-input1 {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	box-shadow: 0px 0px 0px 0px;
	color: #e4edf4;
}

.input1:focus+.shadow-input1 {
	-webkit-animation: anim-shadow 0.5s ease-in-out forwards;
	animation: anim-shadow 0.5s ease-in-out forwards;
}

@-webkit-keyframes anim-shadow {
	to {
		box-shadow: 0px 0px 80px 30px;
		opacity: 0;
	}
}

@keyframes anim-shadow {
	to {
		box-shadow: 0px 0px 80px 30px;
		opacity: 0;
	}
}

/*---------------------------------------------*/
.container-contact1-form-btn {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.contact1-form-btn {
	min-width: 193px;
	height: 50px;
	border-radius: 5px;
	background: #56b1fa;
	border-radius: 5px;
	font-size: 21px;
	font-family: 'Plus Jakarta Sans' line-height: 2.3;
	color: #fff;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 25px;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

.contact1-form-btn i {
	margin-left: 7px;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

.contact1-form-btn:hover {
	background: #2B3C58;
}

.contact1-form-btn:hover i {
	-webkit-transform: translateX(10px);
	-moz-transform: translateX(10px);
	-ms-transform: translateX(10px);
	-o-transform: translateX(10px);
	transform: translateX(10px);
}

.rate_us a {
	color: white;
	text-decoration: none;
}

.rate_us img {
	position: absolute;
	width: 64px;
	bottom: 7px;
}

.rate_us {
	position: relative;
	height: 43px;
	width: 115px;
	display: flex;
	background-repeat: no-repeat;
	justify-content: center;
	background-size: 139px;
	background-position: center;
	background-image: url(/resources/images/rate_us.svg);
	line-height: 1.8;
	padding-right: 4px;
	cursor: pointer;
	background: linear-gradient(0deg, #ff5863, #ffab3a);
	border-radius: 50px;
	justify-content: center;
	display: flex;
	color: white;
	cursor: pointer;
	transform: perspective(1px) translateZ(0);
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: .2s;
	transition-duration: .2s;
}

.rate_us:before {
	border-radius: 50px;
	content: "";
	position: absolute;
	z-index: -1;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: .2s;
	transition-duration: .2s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(0deg, #fa6e77, #fabc69);
}

.rate_us:active,
.rate_us:focus,
.rate_us:hover {
	color: #fff;
}

.rate_us:active:before,
.rate_us:focus:before,
.rate_us:hover:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	border-radius: 50px;
}

.rate_us img {
	position: absolute;
	width: 69px;
	bottom: 7px;
	left: calc(50% - 36px);
}

.item {
	/*    max-width: 350px;        max-height: 330px;*/
	padding: 20px 30px;
	position: relative;
}

.item_vn {
	aspect-ratio: 1.1;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	background: white;
	position: relative;
	padding: 8px;
	box-shadow: 0 0px 5px #d8dadf;
	border-radius: 4px;
}

.item_img {
	height: 78%;
}

.img_howto {
	border: none;
	max-width: 70%;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	box-shadow: 0 0px 2px #d8dadf;
}

.disabled {
	filter: grayscale(1) !important;
	pointer-events: none;
}

.fa_left {
	margin-left: 5px;
}

.img_fill {
	height: -webkit-fill-available;
	width: 100%;
}

.item_row {
	display: flex;
	margin: 0 -30px;
	flex-direction: row;
	flex-wrap: wrap;
}

.item_l {
	text-align: left;
	padding-right: 10px;
	padding-left: 5px;
	font-size: 12px;
}

.item_r {
	text-align: right;
	padding-right: 10px;
	padding-left: 5px;
	font-size: 12px;
}

.item_vn_row {
	display: flex;
	height: 15px;
	text-align: center;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	text-align: center;
}

.flex {
	display: flex;
}

.error-404 {
	flex-direction: column;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.error-404 img {
	width: 387px;
}

.error-404 div {
	font-size: 25px;
	margin-top: 5px;
}

.hashtags-menu-container {
	margin-top: 5px;
	margin-bottom: 5px;
	display: flex;
	flex-wrap: wrap;
	margin-top: 12px;
	margin-bottom: 12px;
}

.hashtag {
	font-size: 13px;
	background: #fff;
	padding: 10px 20px 10px 20px;
	width: fit-content;
	border-radius: 15px;
	cursor: pointer;
	margin: 4px;
}

.hashtag-silver {
	font-size: 13px;
	background: #d4d6d8;
	padding: 10px 20px 10px 20px;
	width: fit-content;
	border-radius: 15px;
	cursor: pointer;
	margin: 4px;
}

.hashtag-silver a {
	text-decoration: none;
}

.hashtags-menu-container a {
	text-decoration: none;
}

.hashtags-a {
	text-decoration: underline;
}

.active-hashtags {
	margin-bottom: 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.request_btn {
	background: #2bca30;
	display: inline-block;
	text-decoration: none !important;
	color: #ffffff;
	border-radius: 5px;
	padding: 10px 23px 12px 23px;
	width: fit-content;
	border-radius: 7px;
	cursor: pointer;
	font-size: 1.2vw;
	margin-top: 10px;
}

.request_btn:hover {
	background: #42c473;
}

.magic_img {
	width: 25%;
	margin-top: -50px;
	margin-bottom: -8px;
}

.item_title a {
	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
	padding-right: 5px;
	white-space: nowrap;
	color: #5e6468;
	display: block;
	margin: 0px 5px 5px 5px;
	font-size: 0.8vw;
	font-weight: bold;
}

.item_hover {
	opacity: 0;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(255 255 255 / 92%);
}

.item:hover .item_hover {
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.item_hover:hover {}

.item_hover_row {
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.item_hover_row_2 {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.item_hover_row a {
	font-size: 14px;
	/* margin: 0 15px; */
}

.item_hover_row a:last-child {
	background: #2b3c58;
}

.item_hover_row a:last-child:hover {
	opacity: 0.8;
}

.item_hover_i {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	margin-bottom: 38px;
}

.item_hover_i img {
	width: 85px;
	height: 85px;
}

.item_nav {
	padding: 10px;
	text-align: center;
	margin: 0px auto 0px auto;
}

.item:hover .item_title,
.item:hover .item_vn_row {
	opacity: 0;
}

.mobile_btn {
	display: none;
}

.sidebar_baner {
	height: 360px;
	padding: 8px;
	background: #c7b299;
	text-align: center;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.menu {
	margin-bottom: 15px;
}

.menu ul {
	margin: 0;
	padding: 0;
}

.menu li {
	list-style: none;
	position: relative;
}

.menu li span {
	display: inline-block;
	margin-left: 10px;
}

.menu li a {
	padding: 8px 17px;
	background-size: cover;
	display: flex;
	justify-content: flex-start;
	border-radius: 5px;
}

.menu li a:before {
	margin-right: 5px;
	content: '';
	width: 37px;
	height: 37px;
	background-image: url("../img/menu_icons.svg");
	background-repeat: no-repeat;
	background-position: -8px -9px;
	background-size: 111px;
	display: block;
}

.menu li b {
	position: absolute;
	right: 43px;
	top: 17px;
	color: white;
	font-weight: normal;
	padding: 4px 10px;
	background: #74beff;
	border-radius: 15px;
	line-height: 1;
	width: 37px;
	text-align: center;
	font-size: 14px;
}

#home:before {
	background-position: -8px -9px;
}

#recent:before {
	background-position: -10px -70px;
}

#top:before {
	background-position: -8px -126px;
}

#used:before {
	background-position: -8px -184px;
}

#how:before {
	background-position: -8px -243px;
}

#feedback:before {
	background-position: -8px -301px;
}

#cursor_land:before {
	background-position: -8px -360px;
}

.active #cursor_land:before {
	background-position: -63px -360px
}

.active #home:before {
	background-position: -63px -9px
}

.active #recent:before {
	background-position: -63px -69px;
}

.active #top:before {
	background-position: -63px -126px;
}

.active #used:before {
	background-position: -62px -184px;
}

.active #how:before {
	background-position: -60px -243px;
}

.active #feedback:before {
	background-position: -61px -301px;
}

.menu li:hover #cursor_land:before {
	background-position: -63px -360px
}

.menu li:hover #home:before {
	background-position: -63px -9px
}

.menu li:hover #recent:before {
	background-position: -63px -69px;
}

.menu li:hover #top:before {
	background-position: -63px -126px;
}

.menu li:hover #used:before {
	background-position: -62px -184px;
}

.menu li:hover #how:before {
	background-position: -60px -243px;
}

.menu li:hover #feedback:before {
	background-position: -61px -301px;
}

.menu li a span {
	display: inline-block;
	padding-top: 9px;
	font-weight: bold;
}

.menu li:hover a {
	background: #BDCCD4;
	color: white;
	text-decoration: none;
}

.active a {
	background: #889dba;
}

.active a {
	color: white;
}

.mobile_nav {
	background: #889dba;
}

.nav_home:before {
	margin-right: 5px;
	content: '';
	width: 30px;
	height: 30px;
	background-image: url("../img/menu_icons.svg");
	background-repeat: no-repeat;
	background-position: -52px -9px;
	background-size: 87px;
	display: block;
}

.page_row {
	margin: 10px 0;
}

.page_row .col_2 {}

.div {
	background: #c7b299;
	text-align: center;
}

.page_row {
	margin-bottom: 15px;
}

.previous_skin:hover {
	scale: 1.2;
	transition: scale .3s;
}

.next_skin:hover {
	scale: 1.2;
	transition: scale .3s;
}

.previous_skin {
	background: url(/img/prew-next.svg);
	position: absolute;
	background-repeat: no-repeat;
	background-size: 200px;
	width: 91px;
	height: 91px;
	left: 0;
	top: calc(50% - 45px);
	transition: scale .3s;
}

.next_skin {
	background: url(/img/prew-next.svg);
	background-position: -110px 0px;
	position: absolute;
	background-repeat: no-repeat;
	background-size: 200px;
	width: 91px;
	height: 91px;
	right: 0;
	top: calc(50% - 45px);
	transition: scale .3s;
}

.content_block_r_modified {
	position: relative;
	padding: 50px;
	margin-top: -50px;
	justify-content: center;
	display: flex;
}

.content_block_r {
	position: relative;
	padding: 50px;
	justify-content: center;
	display: flex;
}

.detail-add-btn {
	width: 100%;
	text-align: center;
}

.details-align {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin-bottom: 10px;
	margin-top: 10px;
}

.detail-add-btn a {
	width: 150px;
}

.content_block_l h1 {
	font-size: 22px;
	color: #5e6468;
}

.page_text {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 25px;
	text-align: justify;
}

.page_div {
	padding: 25px;
	width: 210px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%);
}

.details-img {}

.content_block_l {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}

.h-220 {
	height: 220px;
}

.content_block {
	flex-wrap: wrap;
	background: white;
	padding: 20px;
	box-shadow: 0 0px 5px #d8dadf;
	border-radius: 4px;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.related {
	margin-top: 35px;
}

.related .row_15 {
	margin: 0 -15px;
}

.related h6 {
	text-align: center;
	margin-bottom: 2px;
}

.related .item {
	padding: 15px;
}

.related .item_hover_row a {
	font-size: 15px;
	margin: 0 5px;
}

.related .btn {
	min-width: 100px;
}

.related .item_title a {
	font-size: 15px;
}

.related .item:hover .item_title {
	opacity: 1;
}

.item_hover_row a {
	width: 40%;
	min-width: inherit;
	/* padding: 10px; */
	margin: 0;
	display: inline-grid;
}

/* 16 Footer Block */
footer {
	color: #2b3c58;
	background: white;
	padding: 20px 11%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

footer i {
	line-height: 12px;
}

.footer_nav {
	float: right;
}

.footer_nav a {
	display: inline-block;
	margin: 5px 15px;
}

.footer_nav a:last-child {
	margin-right: 0;
}

.nav_home,
.close {
	display: none;
}

/* Responsive CSS Tablet and Mobile*/
@media only screen and (max-width: 2000px) {
	.rateus-banner {
		width: auto;
		height: auto;
	}

	.rateus-banner i {
		right: 22px;
	}

	.rate-title {
		margin-top: 17px;
	}
}

@media only screen and (max-width: 1500px) {
	.test:after {
		content: '@media (max-width: 1024px)';
	}

	.item_title a {
		font-size: 13px;
	}

	.item_l {
		font-size: 11px;
	}

	.item {
		padding: 15px 15px;
	}

	.item_r {
		font-size: 11px;
	}

	.footer_nav a {
		font-size: 13px;
	}

	.footer_copi {
		font-size: 13px;
	}

	.content_block_l h1 {
		font-size: 17px;
	}

	.page_text {
		font-size: 12px;
		margin-bottom: 10px;
	}

	.active-hashtags {
		font-size: 13px;
	}

	.hashtag-silver {
		padding: 5px 10px 5px 10px;
		font-size: 12px;
	}

	.related .item_title a {
		font-size: 13px;
	}

	.related .item {
		padding: 8px;
	}

	.content_block_l {
		width: 100%;
	}

	.details-align {
		margin-bottom: 5px;
		margin-top: 10px;
	}

	.content_block_r {
		padding-left: 0px;
		width: 100%;
	}

	.content_block {
		box-shadow: 0 0px 3px #d8dadf;
	}

	.item_vn {
		box-shadow: 0 0px 3px #d8dadf;
	}

	.sidebar {
		width: 280px;
		padding: 21px 18px;
	}

	.img_howto {
		max-width: 92%;
	}

	.answer {
		font-size: 14px;
	}

	.pagination {
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.item_hover_row a {
		font-size: 13px;
		width: 45%;
		min-width: inherit;
	}

	.hashtag {
		font-size: 12px;
		padding: 5px 10px 5px 10px;
	}

	body {
		font-size: 14px;
	}

	.menu li a {
		padding: 6px 17px;
	}

	.page-numbers {
		font-weight: 600;
		font-size: 12px !important;
	}

	.skins-list-header {
		height: 43px;
	}

	.popular-requests {
		font-size: 13px;
		padding: 5px 12px 6px 12px;
		margin: 7px;
		border-radius: 13px;
	}

	header {
		height: 75px !important;
		min-height: 70px !important;
	}

	input {
		font-size: 14px;
	}

	.header_baner {
		margin-right: 8.5%;
		margin-top: 11px;
	}

	.seach {
		padding-top: 15px;
	}

	.logo {
		width: 183px;
	}

	.crumb {
		transform: scale(0.85);
		margin-left: -67px;
	}

	.h1 {
		font-size: 22px;
	}

	.question {
		font-size: 17px;
	}

	footer {
		padding: 10px 11%;
	}
}

/* Responsive CSS Tablet and Mobile*/
@media only screen and (max-width: 1200px) {
	.test:after {
		content: '@media (max-width: 1024px)';
	}

	.col_3 {
		width: 50%;
		float: left;
	}

	.footer_nav a {
		margin: 5px;
	}

	.content_block_l {
		width: 100%;
	}

	.content_block_r {
		width: 100%;
		margin-bottom: 20px;
	}

	.content_block {
		flex-direction: column-reverse;
	}

	.content_block_r {
		padding-left: 0px;
	}

	.page_div {
		position: relative;
	}

	.col_4 {
		width: 50%;
	}

	.item {
		padding: 20px 15px;
		position: relative;
	}

	.item_hover {
		padding: 20px;
	}

	.row_15 {
		margin: 0 -15px;
	}

	.home_block_btn {
		min-width: 162px;
		background: #3a3943c9;
		padding: 8px 10px;
		display: inline-block;
		margin-top: 5px;
		margin-bottom: 5px;
		text-decoration: none !important;
		color: #ffffff;
		border-radius: 5px;
		font-size: 15px;
		line-height: 15px;
	}

	.home_block_text {
		margin: 0px;
	}

	.feedback-container {
		width: 80%;
	}
}

@media only screen and (max-width: 830px) {
	.request_btn {
		font-size: 15px;
	}

	.img_howto {
		max-width: 95%;
	}

	.magic_img {
		width: 60%;
		margin-top: 10px;
		margin-bottom: -8px;
	}

	.test:after {
		content: '@media (max-width: 980px)';
	}

	header .menu {
		display: none;
	}

	.home_block_text {
		font-size: 23px;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.h1,
	.h2,
	.h3,
	.h4,
	.h5,
	.h6 {
		line-height: 1.2;
		font-size: 20px;
	}

	h1,
	.h1 {
		font-size: 24px !important;
	}

	.col_3_top {
		width: 100%;
		float: left;
	}

	.col_3 {
		width: 100%;
		float: left;
	}

	.sidebar {
		display: none;
	}

	.mobile_btn {
		display: block;
		color: white;
		font-size: 30px;
		position: absolute;
		right: 23px;
		top: 10px;
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 1;
	}

	.item .col_2 {
		width: 50%;
	}

	.item {
		padding: 15px 0;
	}

	.home_block {
		flex-direction: column;
	}

	footer {
		flex-direction: column;
		padding: 15px;
		text-align: center;
		background: #889dba;
	}

	.footer_nav a {
		display: inline-block;
		font-size: 14px;
		margin: 0 10px;
		color: white;
	}

	.col_2 {
		width: 100%;
	}

	.di_row_flex {
		display: block;
		position: relative;
	}

	.logo {
		width: 50%;
	}

	.seach {
		order: 3;
		padding-top: 15px;
	}

	.header_baner {
		position: absolute;
		top: -13px;
		right: -16px;
		height: 40px;
	}

	.header_container {
		padding-right: 0;
	}

	.item_nav {
		width: 100%;
	}

	.home_block_bd {
		margin-top: 10px;
		width: 100%
	}

	.home_block_img {
		margin-right: 0px;
	}

	.container {
		padding: 20px;
	}

	.sidebar100hv {
		display: block;
		min-height: auto;
	}

	.sidebar {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		min-width: auto;
		min-height: auto;
		padding: 50px 22px 27px 22px;
	}

	.seach form {
		width: 200px;
	}

	.close {
		display: block;
		position: absolute;
		right: 20px;
		top: 6px;
		color: #22395d;
		font-size: 28px;
		z-index: 9999;
	}

	.row_15 {
		margin: 0
	}

	.item_hover_row a {
		min-width: 40%;
	}

	.nav_home {
		color: white;
		background: #889DBA;
		padding: 11px 30px;
		background-size: cover;
		display: flex;
		justify-content: row;
	}

	.nav_home span {
		margin-left: 5px;
		margin-top: 5px;
	}

	.page_row .col_2 {
		float: left;
		width: 50%;
	}

	.feedback-container {
		width: 100%;
	}

	.content-feedback {
		padding: 10px !important;
	}
}

@media only screen and (max-width: 767px) {
	.test:after {
		content: '@media (max-width: 767px)';
	}
}

@media only screen and (max-width: 568px) {
	.test:after {
		content: '@media (max-width: 568px)';
	}

	.img_howto {
		max-width: 95%;
	}

	.item_hover {
		display: none !important;
		opacity: 0 !important;
	}
}

.breadcrumb {
	/*centering*/
	display: flex;
	overflow: hidden;
	border-radius: 5px;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag;
}

.breadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 13px;
	line-height: 36px;
	color: white;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 50px 0 50px;
	background: #666;
	background: linear-gradient(#666, #333);
	position: relative;
}

/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
	padding-left: 25px;
	border-radius: 5px 0 0 5px;
	/*to match with the parent's radius*/
}

.breadcrumb a:first-child:before {
	left: 14px;
}

.breadcrumb a:last-child {
	border-radius: 0 5px 5px 0;
	/*this was to prevent glitches on hover*/
	padding-right: 31px;
}

/*hover/active styles*/
.breadcrumb a.active,
.breadcrumb a:hover {
	background: #333;
	background: linear-gradient(#333, #000);
}

.breadcrumb a.active:after,
.breadcrumb a:hover:after {
	background: #333;
	background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
	content: '';
	position: absolute;
	top: 0;
	right: -18px;
	/*half of square's length*/
	/*same dimension as the line-height of .breadcrumb a */
	width: 36px;
	height: 36px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:     length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)    if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #666;
	background: linear-gradient(135deg, #666, #333);
	/*stylish arrow design using box shadow*/
	box-shadow: 8px -11px 14px 0px rgb(141 141 141 / 16%), 3px -3px 0 2px rgb(99 99 99 / 10%);
	/*            5px - for rounded arrows and             50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}

/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
	content: none;
}

/*we will use the :before element to show numbers*/
.flat a,
.flat a:after {
	background: white;
	color: #5e5e5e;
	transition: all 0.5s;
}

.flat a:before {
	background: white;
	box-shadow: 0 0 0 1px #ccc;
}

.flat a:hover,
.flat a.active,
.flat a:hover:after,
.flat a.active:after {
	background: #d4d6d8;
}

.crumb {
	height: 37px;
	margin-bottom: 15px;
}

.pag-wrapper {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.pagination-wrapper {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.pagination {
	display: block;
	height: 50px;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 35px;
	background-color: #fff;
}

@media only screen and (max-width: 1199px) {
	.pagination {
		height: 50px;
		margin-top: 50px;
		padding: 0 10px;
		border-radius: 25px;
	}
}

.cursor-default {
	cursor: default;
}

.page-numbers {
	display: block;
	padding: 0 15px;
	float: left;
	transition: 400ms ease;
	color: #595959;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 50px;
}

.page-numbers:hover,
.page-numbers.current {
	background-color: #889dba;
	color: #fff;
}

.page-numbers.prevs:hover,
.page-numbers.nexts:hover {
	background-color: transparent;
	color: #57b4e6;
}

@media only screen and (max-width: 1199px) {
	.page-numbers {
		padding: 0 15px;
		font-size: 16px;
		line-height: 50px;
	}
}

@media only screen and (min-width: 120px) and (max-width: 1024px) {
	.page-numbers {
		padding: 0 14px;
		display: none;
	}

	.feedback-container {
		width: 100%;
	}

	.page-numbers:nth-of-type(2) {
		position: relative;
		padding-right: 50px;
	}

	.page-numbers:nth-of-type(2)::after {
		content: "...";
		position: absolute;
		font-size: 25px;
		top: 0;
		left: 45px;
	}

	.page-numbers:nth-child(-n+3),
	.page-numbers:nth-last-child(-n+3) {
		display: block;
	}

	.page-numbers:nth-last-child(-n+4) {
		padding-right: 14px;
	}

	.page-numbers:nth-last-child(-n+4)::after {
		content: none;
	}
}

/* Home intro (h1 + one paragraph) above the catalogue — the page had no h1 at all. */
.page-intro { padding: 4px 4px 10px; }
.page-intro h1 { font-size: 26px; font-weight: 600; margin: 0 0 8px; color: #2c3e50; line-height: 1.25; }
.page-intro p { margin: 0; font-size: 15px; line-height: 1.55; color: #5c6b7a; max-width: 900px; }
@media (max-width: 640px) { .page-intro h1 { font-size: 21px; } .page-intro p { font-size: 14px; } }

/* Menu items with a Font Awesome glyph instead of the sprite (new pages). */
.menu li a.menu-fa:before { content: none; }
.menu li a.menu-fa i { width: 37px; height: 37px; margin-right: 5px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #6c7f99; flex: none; }
.menu li.active a.menu-fa i, .menu li a.menu-fa:hover i { color: #2c3e50; }

/* ── Content pages (/ad-skipper, /youtube-dark-mode, /youtube-old-layout) ── */
.yt-article { background: #fff; border-radius: 8px; padding: 26px 30px 30px; color: #2c3e50; line-height: 1.6; font-size: 15.5px; box-shadow: 0 1px 3px rgba(44, 62, 80, 0.08); }
.yt-article h1 { font-size: 30px; line-height: 1.2; font-weight: 600; margin: 0 0 12px; color: #1f2d3d; }
.yt-article h2 { font-family: inherit; font-size: 21px; font-weight: 600; margin: 30px 0 10px; color: #1f2d3d; text-transform: none; line-height: 1.3; }
.yt-article h1 { font-family: inherit; text-transform: none; }
.yt-article__hero { min-height: 0; background-clip: padding-box; }
.yt-article p { margin: 0 0 12px; }
.yt-article a { color: #2f6fd1; }
.yt-article code { background: #f1f4f8; border: 1px solid #e1e7ef; border-radius: 4px; padding: 1px 6px; font-size: 14px; }
.yt-article__hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: center; padding: 26px 30px; margin: -26px -30px 22px; border-radius: 8px 8px 0 0; background: linear-gradient(120deg, #eef3fa 0%, #e6ecf5 60%, #f3eef8 100%); }
.yt-article__hero--adskip { background: linear-gradient(120deg, #eef7f1 0%, #e4f1ea 60%, #eef3fa 100%); }
.yt-article__hero--dark { background: linear-gradient(120deg, #1d2430 0%, #262d3b 60%, #2b2540 100%); color: #e9eef5; }
.yt-article__hero--dark h1 { color: #fff; }
.yt-article__hero--dark .yt-lead { color: #cfd6e0; }
.yt-article__hero--old { grid-template-columns: 1fr; }
.yt-article__hero-art img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 14px 30px rgba(30, 40, 60, 0.18); }
.yt-kicker { display: inline-block; padding: 5px 11px; border-radius: 999px; background: #fff; color: #2f6fd1; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(44, 62, 80, 0.1); }
.yt-article__hero--dark .yt-kicker { background: rgba(255, 255, 255, 0.12); color: #9ec1ff; box-shadow: none; }
.yt-lead { font-size: 16.5px; color: #4a5a6d; margin: 0 0 18px; }
.yt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.yt-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 6px; font-weight: 600; font-size: 15px; text-decoration: none !important; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.yt-btn--primary { background: #2f6fd1; color: #fff !important; box-shadow: 0 6px 16px rgba(47, 111, 209, 0.3); }
.yt-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(47, 111, 209, 0.36); }
.yt-btn--ghost { background: #fff; color: #2f6fd1 !important; border: 1px solid #d6dfeb; }
.yt-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: #55667a; font-weight: 600; }
.yt-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 12px 0 6px; }
.yt-tile { background: #f6f8fb; border: 1px solid #e3e9f1; border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.yt-tile b { font-size: 15px; color: #1f2d3d; }
.yt-tile span { font-size: 14px; color: #4a5a6d; line-height: 1.5; }
.yt-steps { margin: 8px 0 14px; padding-left: 0; list-style: none; counter-reset: ytstep; }
.yt-steps li { position: relative; padding: 10px 0 10px 46px; counter-increment: ytstep; border-bottom: 1px solid #edf1f6; }
.yt-steps li:last-child { border-bottom: 0; }
.yt-steps li::before { content: counter(ytstep); position: absolute; left: 0; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: #2f6fd1; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.yt-table-wrap { overflow-x: auto; margin: 12px 0 8px; border: 1px solid #e3e9f1; border-radius: 8px; }
.yt-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; }
.yt-table th, .yt-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #edf1f6; }
.yt-table thead th { background: #f1f4f8; font-weight: 600; color: #1f2d3d; }
.yt-table tr:last-child td { border-bottom: 0; }
.yt-swatch { display: inline-block; width: 44px; height: 22px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12); vertical-align: middle; }
.yt-faq { display: flex; flex-direction: column; gap: 8px; }
.yt-faq__item { background: #f6f8fb; border: 1px solid #e3e9f1; border-radius: 8px; overflow: hidden; }
.yt-faq__item summary { cursor: pointer; list-style: none; padding: 12px 40px 12px 16px; font-weight: 600; color: #1f2d3d; position: relative; }
.yt-faq__item summary::-webkit-details-marker { display: none; }
.yt-faq__item summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #2f6fd1; border-bottom: 2px solid #2f6fd1; transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; }
.yt-faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.yt-faq__item p { margin: 0; padding: 0 16px 14px; color: #4a5a6d; }
.yt-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 26px 0 4px; padding: 18px 22px; border-radius: 8px; background: linear-gradient(100deg, #2f6fd1, #4a8cf0); color: #fff; box-shadow: 0 10px 24px rgba(47, 111, 209, 0.3); }
.yt-cta > div { display: flex; flex-direction: column; gap: 2px; }
.yt-cta b { font-size: 17px; }
.yt-cta span { font-size: 13.5px; opacity: 0.92; }
.yt-cta .yt-btn--primary { background: #fff; color: #2f6fd1 !important; box-shadow: none; }
@media (max-width: 800px) {
  .yt-article { padding: 18px 16px 22px; }
  .yt-article__hero { grid-template-columns: 1fr; margin: -18px -16px 18px; padding: 20px 16px; }
  .yt-article__hero-art { order: -1; }
  .yt-article h1 { font-size: 24px; }
  .yt-tiles { grid-template-columns: 1fr; }
}

/* Language switcher in the footer + the richer skin page sections. */
.footer_lang { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: center; padding: 10px 12px 4px; font-size: 13px; color: #6c7f99; }
.footer_lang a { color: #4a5a6d; text-decoration: none; padding: 3px 7px; border-radius: 4px; }
.footer_lang a:hover { background: #e9eef5; }
.footer_lang a.active { background: #2c3e50; color: #fff; }
.skin-more { background: #fff; border-radius: 8px; padding: 22px 26px 24px; margin: 18px 0; color: #2c3e50; line-height: 1.6; font-size: 15px; box-shadow: 0 1px 3px rgba(44, 62, 80, 0.08); }
.skin-more h2 { font-family: inherit; font-size: 20px; font-weight: 600; text-transform: none; color: #1f2d3d; margin: 18px 0 8px; line-height: 1.3; }
.skin-more h2:first-child { margin-top: 0; }
.skin-more__list { margin: 0 0 6px; padding-left: 20px; }
.skin-more__list li { margin: 4px 0; }
.skin-more .yt-faq { margin-top: 14px; }