@font-face {
    font-family: 'OpenSansVar';
    src: url('../fonts/OpenSans-VariableFont.ttf') format('truetype');
  }

  @font-face {
    font-family: 'Open Sans';
    src: 
        url('../fonts/OpenSans-Regular.woff2') format('woff2'),
        url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src:
        url('../fonts/OpenSans-Bold.woff2') format('woff2'),
        url('../fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: 
        url('../fonts/OpenSans-SemiBold.woff2') format('woff2'),
        url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}




:root {
    --cof: 5px;

	--header: 80px;

	--font-h1: 25px;
    --line-h1: 40px;

    --font-h2: 22.5px;
    --line-h2: 30px;

    --font-h3: 20px;
    --line-h3: 30px;

    --font-h4: 15px;
    --line-h4: 20px;

    --font-h5: 12.5px;
    --line-h5: 20px;

	--logo-font: 15px;
	--logo-line: 25px;

	--menu-font: 15px;
	--menu-line: 15px;

	--list-font: 17.5px;
	--list-line: 25px;

	--font-text: 15px;
	--line-text: 25px;
	--font-mtext: 12.5px;
	--line-mtext: 20px;

	--m-text: 10px;
	--m-mtext: 10px;
	--m-h1: 25px;
	--m-h2: 15px;
	--m-h3: 10px;
	--m-h4: 10px;
	--m-h5: 10px;

	--font-weight: 500;
	--logo-weight: 600;
	--h-weight: 700;
	--regular-weight: 400;

	--gap: 10px;
	--m-section: 50px;

	--c-title: #242424;
	--c-title-h1: #000000;
	--c-dtext: black;
	--c-text: #3A3A3A;
	--c-mtext: #575655;
	--c-accent: #ED7D31;
	--c-daccent: #FFC000;
	--c-laccent: #F9C17D;
	--c-dlaccent: #FF654F;
	--c-icon: #115227;
	--c-bac: white;

	--news-height: 155px;
}

body {
	font-family: OpenSansVar, "Open Sans", sans-serif;
	font-weight: var(--font-weight);
	font-size: var(--font-text);
	line-height: var(--line-text);
	color: var(--c-text);
	background-color: #ffffff;
}

h1, .h1 {
	font-size: var(--font-h1);
	line-height: var(--line-h1);
	margin-bottom: var(--m-h1);
	color: var(--c-title-h1);
	font-weight: var(--h-weight);
}

h2, .h2 {
	font-size: var(--font-h2);
	line-height: var(--line-h2);
	margin-bottom: var(--m-h2);
	color: var(--c-title);
	font-weight: var(--h-weight);
}

h3, .h3 {
	font-size: var(--font-h3);
	line-height: var(--line-h3);
	margin-bottom: var(--m-h3);
	color: var(--c-title);
	font-weight: var(--h-weight);
}

.com-content-article h3, .com-content-article .h3 {
	margin-top: var(--m-h3);
}

h4, .h4 {
	font-size: var(--font-h4);
	line-height: var(--line-h4);
	margin-bottom: var(--m-h4);
	color: var(--c-title);
	font-weight: var(--h-weight);
}

h5, .h5 {
	font-size: var(--font-h5);
	line-height: var(--line-h5);
	margin-bottom: var(--m-h5);
	color: var(--c-title);
	font-weight: var(--h-weight);
}

p {
	margin-bottom: var(--m-text);
}

.com-content-article p  {
	line-height: 160%;
}

.about-text p {
	line-height: var(--line-text);
}

.max-mtext p {
	margin-bottom: calc(var(--m-text) * 2);
}



.accent {
	color: var(--c-accent);
}

.upptext {
	text-transform: uppercase;
}

button, .btn {
	line-height: 100%;
	padding: 10px 35px;
	background-color: rgba(0 0 0 / 0);
	border: var(--c-title) 2px solid;
	border-radius: 8px;
	transition: .3s;
	color: var(--c-title);
}

button:focus, .btn:focus {
	color: var(--c-accent);
	border: var(--c-title) 2px solid;
	outline: 2px solid var(--c-accent);
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
	color: var(--c-dtext);
    background-color: transparent;
    border-color: var(--c-accent) 2px solid;
}

button:focus:not(:focus-visible) {
	outline: var(--c-accent) 2px solid;
}

button:active, .btn:active {
	color: var(--c-title);
	border: var(--c-accent) 2px solid;
}

.btn a {
	text-decoration: none;
}

.action {
	font-size: 1.1em;
    font-weight: var(--logo-weight);
    padding: 20px 40px;
    background: #232426;
    color: white;
	margin: var(--m-h2) auto;
    display: block;
    line-height: 140%;
}

.readmore a:visited {
    color: var(--c-title);
}

button:hover, .btn:hover, .readmore a:visited:hover {
	color: var(--c-accent);
	background-color: transparent;
	border: var(--c-accent) 2px solid;
}

.action:hover {
	color: var(--c-accent);
	background: #232426;
}

header {
	background-color: rgba(20 7 2 / 50%);
	position: absolute;
	z-index: 100;
	width: 100%;
}

header img, footer .brand-logo img {
	width: 90px;
	height: var(--header);
}

header .container {
	position: relative;
}

i {
	color: inherit;
}

.navbar-toggler {
	color: var(--c-dtext);
}

.mod-menu {
	flex-direction: row;
}

.mod-menu li {
	font-size: var(--menu-font);
	font-weight: var(--regular-weight);
}

.mod-menu li a {
	color: var(--c-text);
	position: relative;
	text-decoration: none;
	transition: all .3s;
}

.mod-menu li a::after {
	content: "";
	position: absolute;
	bottom: 3px;
	left: 0;
	width: 0%;
	height: 0;
	border-bottom: 1px var(--c-text) solid;
    transition: width .3s;
}

.mod-menu li.active a:after{
	width: 100%;
}

.mod-menu li a:hover {
	color: var(--c-accent);
}

.mod-menu li a:active:after {
	width: 100%;
}

.footer-nav  li {
	flex-basis: 50%;
}

.footer-links ul{
	flex-direction: column;
}

.logotext {
	font-size: var(--logo-font);
	line-height: var(--logo-line);
	font-weight: var(--logo-weight);
	color: var(--c-title);
	word-spacing: 100vw;
}

.mini-text {
	font-size: var(--font-mtext);
	line-height: var(--line-mtext);
	color: var(--c-mtext);
	margin-top: var(--m-mtext);
}

.section {
	margin-bottom: var(--m-section);
}

.dark {
	--c-text: #8F8F8F;
	--c-dtext: white;
	--c-mtext: #8F8F8F;
	--c-title: #ffffff;
	--c-title-h1: #ffffff;
	--c-accent: #FFC000;
	--c-daccent: #FF654F;
	--c-laccent: #F9C17D;
	--c-dlaccent: #FF654F;
	--c-icon: #ffffff;
	--c-bac: #232426;

	color: var(--c-text);
}

.navbar-toggler {
	color: var(--c-title);
}


.brand-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	min-width: 90px;
}

.site-name {
	padding-left: 10px;
}

.about-img {
	height: auto;
    border-radius: 16px;
    object-fit: cover;
}

.left {
	float: left;
}

.about-list {
	padding: 15px;
	border-image-source: url('../../../../../images/templates/box-swadow.png');
	border-image-width: 20px;
	border-image-slice: 40 fill;
	border-image-outset: 10px;
	border-image-repeat: round;
	position: relative;
	bottom: var(--m-section);
}

a {
	font-weight: 700;
	color: var(--c-dtext);
}

a:active {
	color: var(--c-daccent);
}

a:visited {
	color: var(--c-dlaccent);
}

a.btn:visited {
	color: var(--c-dtext);
}

.mod-menu li a {
	font-weight: 400;
}

.cheek-list {
	margin-bottom: 0;
}

.cheek-list li{
	list-style: none;
	position: relative;
	margin-bottom: 10px;
}

.cheek-list li::after{
	content: '\0047';
	position: absolute;
	left: -2rem;
	top: 50%;
	margin-top: -.5em;
	height: 1em;
	width: 1em;
	font-family: 'ppr_icons';
	font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale

}

/* Generated by Glyphter (http://www.glyphter.com) on  Sun Feb 11 2024*/
@font-face {
    font-family: 'ppr_icons';
    src: url('../fonts/ppr_icons.eot');
    src: url('../fonts/ppr_icons.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ppr_icons.woff') format('woff'),
         url('../fonts/ppr_icons.ttf') format('truetype'),
         url('../fonts/ppr_icons.svg#ppr_icons') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class*='icon-']:before{
	display: inline-block;
   font-family: 'ppr_icons';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}
.icon-spped:before{content:'\0041';}
.icon-cliener:before{content:'\0042';}
.icon-steam:before{content:'\0043';}
.icon-flask:before{content:'\0044';}
.icon-fire:before{content:'\0045';}
.icon-quality:before{content:'\0046';}
.icon-chek:before{content:'\0047';}
.icon-prev:before{content:'\0048';    position: relative;top: 2px;}
.icon-next:before{content:'\0049';    position: relative;top: 2px;}
.icon-prevup:before{content:'\004a';    position: relative;top: 2px;}
.icon-nextup:before{content:'\004b';    position: relative;top: 2px;}

.news-block {
	margin-bottom: var(--m-h1);
}

.news-block a {
	text-decoration: none;
	display: grid;
}

.news-block h4 {
	min-height: 0px;
}

.news-block .news-img {
	width: 100%;
	height: var(--news-height);
}

.news-block .news-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.ppr-line {
	margin: var(--m-text) 0;
	opacity: 1;
	border-top: var(--c-accent) solid 2px;
	max-width: 100px;
}

.icon-block div {
	color: var(--c-icon);
}

.icon-block div {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	font-weight: 600;
}

.icon-block div i {
	height: 50px;
	width: 50px;

	display: flex;
    align-items: center;
    justify-items: center;
    margin-right: 20px;
	position: relative;
    top: 2px;
}

.icon-block div i::before {
	font-size: 40px;
}

.icon-block div span {
	width: 100%;
}

.bottom-section-img {
	background-image: url("../../../../../images/templates/bottom.jpg");
	min-height: 330px;
	width: 100%;
	background-size: cover;
	text-align: center;
}

.footer {
	background-color: #232426;
	padding-top: 10px;
	padding-bottom: 10px;
}

.white {
	color: white;
}

.vacancy-img {
	width: 80px;
	height: 50px;
	margin-right: 10px;
}

.vacancy-img img {
	height: 100%;
	width: auto;
}

.copyright {
	background: #292C2F;
	color: var(--c-text);
	font-size: var(--font-mtext);
}

.article-top {
	min-height: calc(var(--header)*2);
	position: relative;
	background-color: #242424;
}

.article-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}

.article-img img{
	filter: brightness(0.7);
}

.article-img img.nofilter{
	filter: brightness(1);
}

.article-content {
	position: relative;
	z-index: 1;
	height: 100%;
	min-height: calc(var(--header)*2);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--header);
}

.article-content h1 {
	margin: 0;
	position: relative;
    top: -5px
}

.item-image {
	max-width: 100%;
	overflow: hidden;
	height: 100%;
	margin: 0;
}

.item-image img {
    object-fit: cover;
	width: 100%;
	height: 100%;
}

.pagination a:visited {
	color: var(--c-text);
}

.active>.page-link, .page-link.active {
	background-color: var(--c-accent);
    border-color: var(--c-accent);
}

.page-link:focus {
	box-shadow: none;
	border: 1px solid var(--c-accent);
}

.com-content-article__body img {
    width: 100%;
    object-fit: cover;
    height: auto;
}

.gallery img{
	height: 100%;
}

.blog-items .item-image {
	margin-bottom: 0;
}

p.readmore {
	margin-bottom: 0
}

.blog .item-content {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog .row {
	margin-bottom: 50px;
}

.blog .page-header {
	min-height: 120px;
	margin-bottom: var(--m-h2);
}

.blog h3, .readmore {
	margin-top: var(--m-h3);
	text-decoration: none;
}

.blog a {
	text-decoration: none;
}

.vacancy-content>* {
	margin-bottom: 0;
}

.sf2-required {
	color: var(--c-accent)!important;
}

.sf2-header {
	margin: 0!important;
}

input, textarea, select{
	border: 1px solid #767676;
    color: var(--c-text);
    line-height: var(--line-text);
    box-shadow: none;
	padding: 10px 20px;
	border-radius: 8px;
	width: 100%;
	margin-bottom: 10px;
}

label {
	color: var(--c-title)!important;

}

.sf2Win {
	min-width: 90%;
}

.note {
	background: #e7e7e7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
	border: 3px solid #e7e7e7;
    width: 100%;
    padding: 10px 25px;
    line-height: var(--line-text);
	position: relative;
	transition: .3s color;
}
.note.nactive{
	color: #888888;
}

.note::before {
	content:'';
	position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border: 10px solid transparent;
	top: -22px;
    left: calc(50% - 5px);
    border-bottom: 20px solid #e7e7e7;
}

.sf2-checkbox-label {
	display: flex!important;
	align-items: center!important;
	margin-bottom: 10px!important;
}



.sf2-checkboxes input {
	width: 25px!important;
    height: 25px!important;
    display: block!important;
	margin: 0 !important;
	margin-right: 10px !important;
	
}

.custom-checkbox {
	color: var(--c-accent);
	accent-color: currentcolor;
}

.sf2Style-default button.sf2-element[type="submit"], .sf2Style-default button.sf2-element.sf2SendBtn {
	background-color: transparent!important;
	color:var(--c-text)!important;
	border: 1px solid var(--c-text)!important;
}

.sf2Style-default button.sf2-element[type="submit"]:hover, .sf2Style-default button.sf2-element.sf2SendBtn:hover {
	color:var(--c-accent)!important;
	border: 1px solid var(--c-accent)!important;
}

.sf2-form-item:last-child {
	margin-top: 15px;
}

.sf2-checkboxes .sf2-checkbox-label {
	margin: 0px !important;
}

.sf2-form-item.sf2-form-item-captcha {
	margin-top: 0px !important;
}

@media not all and (hover: none) {
	a:hover {
		color: var(--c-accent);
	}
}

@media (min-width: 576px) {
	:root {
		--header: 90px;

		--font-h1: 35px;
		--line-h1: 45px;

		--font-h2: 30px;
		--line-h2: 40px;

		--font-h3: 22.5px;
		--line-h3: 35px;

		--font-h4: 20px;
		--line-h4: 30px;

		--font-h5: 15px;
		--line-h5: 20px;
		
		--font-text: 15px;
		--line-text: 25px;
		--font-mtext: 12.5px;
		--line-mtext: 20px;

		--m-text: 10px;
		--m-mtext: 10px;
		--m-h1: 40px;
		--m-h2: 25px;
		--m-h3: 20px;
		--m-h4: 15px;
		--m-h5: 10px;

		--gap: 15px;
		--m-section: 50px;
	}
	

	
	.note::before {
		left: -20px;
		border: 10px solid transparent;
		border-right: 10px solid #e7e7e7;
		top: calc(50% - 10px);
    	border-bottom: 10px solid transparent;
	}

.container, .container-sm {
    max-width: 540px;
}
}

@media (min-width: 768px){

	:root {
		--header: 90px;

		--font-h1: 55px;
		--line-h1: 70px;

		--font-h2: 35px;
		--line-h2: 45px;

		--font-h3: 25px;
		--line-h3: 35px;

		--font-h4: 20px;
		--line-h4: 30px;

		--font-h5: 15px;
		--line-h5: 20px;
		
		--font-text: 17.5px;
		--line-text: 30px;
		--font-mtext: 15px;
		--line-mtext: 25px;

		--m-text: 15px;
		--m-mtext: 10px;
		--m-h1: 40px;
		--m-h2: 25px;
		--m-h3: 20px;
		--m-h4: 15px;
		--m-h5: 15px;

		--gap: 25px;
		--m-section: 50px;
	}

	.container, .container-md, .container-sm {
		max-width: 720px;
	}
	.bottom-section-img {
		padding-top: var(--m-section);
		padding-bottom: var(--m-section);
	}
	.bottom-section-img h2 {
		margin-bottom: var(--m-section)!important;
	}

	.footer {
		padding-top: 30px;
		padding-bottom: 20px;
	}

	.article-top, .article-content, .item-image img{
		min-height: 260px;
	}
}

@media (min-width: 992px) {
	:root {
		--font-h2: 30px;
		--line-h2: 40px;

		--font-h4: 17.5px;
    	--line-h4: 25px;

		--font-text: 15px;
		--line-text: 25px;

		--font-mtext: 12.5px;
    	--line-mtext: 20px;

		--gap: 75px;
		--m-section: 75px;
	}
	.container, .container-lg, .container-md, .container-sm {
		max-width: 842px;
	}

	.blog h3, .readmore {
		margin-top: 0;
	}

}


@media (min-width: 1200px) {
	:root {
		--gap: 120px;
		--m-section: 75px;
	}
	.container, .container-lg, .container-md, .container-sm, .container-xl {
		max-width: 960px;
	}

	h1 {
		width: 70%;
	}

	.article-content h1 {
		max-width: 100%;
		width: 100%;
	}
}


@media (min-width: 1400px) {
	:root {
		--gap: 216px;
		--m-section: 75px;
	}

	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1130px;
	}

	h1 {
		max-width: 770px;
	}

	.px-xxl-12 {
		padding-right: 12px;
		padding-left: 12px;
	}

	.footer-nav li {
		flex-basis: 100%;
	}

	.bottom-section-img {
		padding-top: 90px;
		padding-bottom: 125px;
	}

	.bottom-section-img h2 {
		margin-bottom: 120px!important;
	}

	.about-img {
		width: 270px;
	}

	.article-top, .article-content, .item-image img{
		min-height: 340px;
	}

	.max-mtext li {
	}


	.max-mtext {
		line-height: 30px;
	}
}