@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Josefin+Slab:wght@300;700&family=Poppins:wght@300&display=swap');



body {
	display: block;
	position: relative;
	height: 100%;
	overflow-x: hidden;
	background: rgba(25,25,25,1.00);
  font-family: 'Poppins', 'Arial', sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 25px;
	color: rgba(255,255,255,0.35);
	text-align: left;
  word-break: break-word;
}

p {
  font: inherit;
  margin-top: 25px;
}

ul, ol {
  display: block;
  position: relative;
  width: 100%;
  text-align: left;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding: 0px;
  margin-top: 12.5px;
}

ul > li, ol > li {
  display: block;
  position: relative;
	list-style: none;
  padding: 12.5px 0px 0px 30px;
}

ol > li {
  counter-increment: ol;
}

ul > li:before {
  content: "—";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
	font: inherit;
	color: rgba(55,205,110,1.00);
	padding-top: 12.5px;
}

ol > li:before {
  content: counter(ol);
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
	font: inherit;
	color: rgba(255,255,255,1.00);
  opacity: 1.00;
	padding-top: 12.5px;
}

img, video {
  max-width: 100%;
  max-height: 100%;
}

a {
  display: inline;
  position: relative;
  font: inherit;
  text-decoration: none;
	color: rgba(255,255,255,1.00);
	cursor: pointer;
  padding: 0px;
  margin: 0px;
  transition: all 0.5s;
}

a:hover {
  text-decoration: underline;
}

a:not([href]) {
  color: inherit;
  cursor: default;
}

a:not([href]):hover {
  color: inherit;
  text-decoration: inherit;
}

p:first-child,
ul:first-child,
ol:first-child {
  margin-top: 0px;
}

p > a {
	text-decoration: underline;
}

p > a:hover {
	text-decoration: none;
}



/* Contents Type */

.content {
  display: block;
	position: relative;
	height: 100%;
	width: 100%;
	max-width: 1290px;
	text-align: left;
	margin: 0px auto;
	padding: 75px 345px 75px 30px;
	z-index: 1;
}

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



/* Titles Type */

h1, h2, h3, h4, h5, .title {
	display: block;
	position: relative;
  width: 100%;
	font-family: 'Josefin Slab';
  font-weight: 300;
	text-align: left;
  color: rgba(255,255,255,1.00);
  transition: all 0.5s;
}

h1, .title.general {
	font-size: 45px;
	line-height: 50px;
}

h2, .title.high {
  font-size: 45px;
	line-height: 50px;
  padding-bottom: 50px;
}

h3, .title.middle {
	font-size: 35px;
	line-height: 40px;
	padding-bottom: 25px;
}

h4, .title.low {
	font-size: 25px;
	line-height: 30px;
	padding-bottom: 25px;
}

h5, .title.min {
	font-size: 18px;
	line-height: 22px;
	padding-bottom: 12.5px;
}



/* Form */

input, textarea, select {
	display: block;
  position: relative;
  width: 100%;
  border-radius: 0px;
	border: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  background: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(255,255,255,0.00);
  font: inherit;
	font-size: 15px;
	line-height: 30px;
	text-align: left;
	color: rgba(255,255,255,1.00);
	white-space: pre-wrap;
  padding: 0px;
  margin: 0px;
	transition: all 0.5s;
}

textarea {
  max-width: 100%;
  min-height: 50px;
  max-height: 150px;
  resize: both;
  overflow: hidden;
}

input:focus, textarea:focus, select:focus {
  border-bottom: 1px solid rgba(255,255,255,1.00);
	outline: none;
  outline-offset: 0px;
}

input::placeholder, textarea::placeholder {
	color: rgba(255,255,255,0.17);
}

input.error, select.error {
  border-bottom: 1px solid rgba(225,50,50,1.00);
}

input.error::placeholder {
  color: rgba(225,50,50,1.00);
}

label {
	display: block;
	position: relative;
	font: inherit;
	font-size: 13px;
	line-height: 20px;
	color: rgba(255,255,255,0.35);
}



/* Button */

.button {
	display: inline-block;
	position: relative;
	width: auto;
	height: 100%;
  border: none;
  outline: none;
  background: url('../images/green-arrow.svg') no-repeat calc(100% - 15px) center / auto auto;
  overflow: hidden;
	font: inherit;
	font-family: 'Josefin Slab';
  font-size: 13px;
  font-weight: 700;
	line-height: 25px;
	text-align: left;
  text-transform: uppercase;
	color: rgba(255,255,255,1.00);
	white-space: nowrap;
  cursor: pointer;
  padding: 0px 80px 0px 0px;
  margin: 25px auto 0px auto;
	transition: all 0.5s;
}

.button:hover {
	background: url('../images/green-arrow.svg') no-repeat 100% center / auto auto;
  color: rgba(255,255,255,0.50);
  text-decoration: none;
}



article h2 + *, article .title.high + *,
article h3 + *, article .title.middle + *,
article h4 + *, article .title.low + *,
article h5 + *, article .title.min + * {
  margin-top: 0px;
}

article * + h2, article * + .title.high   { margin-top: 100px; }
article * + h3, article * + .title.middle { margin-top: 75px;  }
article * + h4, article * + .title.low    { margin-top: 50px;  }
article * + h5, article * + .title.min    { margin-top: 25px;  }

svg {
  display: inline-block;
  position: relative;
  vertical-align: inherit;
  line-height: 1;
}

use {
  fill: rgba(255,255,255,1.00);
  fill-rule: evenodd;
  transition: all 0.5s;
}

.path {
  fill: inherit;
  stroke: inherit;
  stroke-width: inherit;
}

.hidden {
	display: none !important;
}



/* Type LIST */

.type-list {
  display: flex;
	justify-content: flex-start;
	align-items: stretch;
  position: relative;
  width: auto;
	margin: -25px 0px 0px -30px;
}

.type-list > li {
  display: block;
  position: relative;
	flex: 0 1 100%;
  width: 100%;
  padding: 25px 0px 0px 30px;
}

.type-list > li:before {
  display: none;
}



/* HEADER */

.header__content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: column;
	height: 100%;
	min-height: 100vh;
	background: url("../images/main-bg.png") no-repeat center center / auto auto;
	padding: 50px 345px 50px 30px;
}

.logo img {
	display: block;
	max-height: 25px;
}

.header__content > .wrap {
	max-width: 390px;
	margin-top: 25px;
}

.header__desc {
	color: rgba(255,255,255,1.00);
}

.header__additional {
	max-width: 390px;
}

/* Side */

.side {
	display: block;
  position: fixed;
  top: 0px;
  bottom: 0px;
	right: calc(50% - 645px);
  width: 100%;
  max-width: 345px;
  font-size: 0px;
	text-align: right;
  white-space: nowrap;
	padding: 0px 30px;
	z-index: 2;
}

.side:before {
  content: "";
  display: inline-block;
  position: relative;
  width: 0 !important;
  height: 100%;
  vertical-align: middle;
}

.header__nav-button {
	display: none;
}

.menu {
  display: inline-block;
  position: relative;
  width: auto;
  vertical-align: middle;
  line-height: 1;
  white-space: normal;
}

.menu ul li {
  display: block;
  text-align: right;
  padding: 0px;
}

.menu ul li:before {
	content: '';
	display: block;
	position: absolute;
	top: calc(50% - 4.5px);
	left: auto;
	right: 0px;
	width: 7px;
	height: 7px;
	border: 1px solid rgba(255,255,255,0.17);
	padding: 0px;
}

.menu ul li:after {
	content: '';
	display: block;
	position: absolute;
	top: calc(50% - 4.5px);
	right: 0px;
	width: 3px;
	height: 3px;
	margin: 3px;
	transition: all 0.5s;
}

.menu ul li {
  display: block;
  text-align: right;
  padding: 0px;
}

.menu ul li a {
  display: inline-block;
  position: relative;
  width: auto;
  font-family: "Josefin Sans";
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
  color: rgba(255,255,255,1.00);
  padding: 25px 30px 25px 15px;
}

.menu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 12px;
  left: calc(100% - 30px);
  right: 30px;
  width: auto;
  height: 1px;
  background-color: rgba(55,205,110,1.00);
  transition: all 0.5s;
}

.menu ul li a:hover {
  text-decoration: none;
}

.menu ul li a:hover:after {
  left: 15px;
}

.menu ul li:hover:after {
	background-color: rgba(255,255,255,0.35);
}

.header__menu ul li {
  counter-increment: menu;
}

.header__menu ul li a:before {
  content: "0 " counter(menu);
  display: block;
  position: absolute;
  top: 0px;
  right: 100%;
  width: auto;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  color: rgba(100,100,100,1.00);
  padding: 30px 0px 25px 0px;
}



/* MAIN */

.main {
	display: block;
	position: relative;
	overflow: hidden;
}

.main:before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0px;
	left: calc(50% + 300px);
	right: 0;
	height: 50vh;
	background: linear-gradient(0deg, rgba(25,25,25,1.00) 0%, rgba(25,25,25,0.00) 100%);
	z-index: 3;
}



/* Advantages */
.advantages__type-list > li {
	flex: 1 1 33.3%;
}

.advantages__type-list > li > .wrap {
	display: block;
	position: relative;
	height: 100%;
	border-left: 1px solid rgba(255,255,255,0.35);
	padding: 50px 0px 50px 30px;
}

.advantages-item__image {
	display: block;
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid rgba(55,205,110,1.00);
	padding: 15px;
	margin-bottom: 15px;
}

.advantages-item__image img {
	max-width: 30px;
	max-height: 30px;
}

.title.advantages-item__title {
	font-size: 20px;
	line-height: 25px;
	text-align: left;
	text-transform: uppercase;
	padding-bottom: 0px;
}

.title.advantages-item__title:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -13px;
	left: -30px;
	width: 100%;
	max-width: 100px;
	height: 1px;
	background-color: rgba(55,205,110,1.00);
}

.advantages-item__desc {
	color: rgba(255,255,255,1.00);
}



/* Servicse */

.services-item__type-list {
	align-items: center;
}

.services-item__type-list > li {
	flex: 1 1 calc(100% - 315px);
	padding-top: 25px;
	padding-bottom: 25px;
}

.services-item__type-list > li + li {
	flex: 1 1 315px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.title.services-item__title {
	font-size: 30px;
	line-height: 35px;
}









/* FOOTER */

.footer {
	position: relative;
	background-color: rgba(35,35,35,1.00);
	z-index: 10;
}

.footer__content {
	padding-right: 660px;
}

.footer__side {
  position: absolute;
	right: 315px;
	padding-right: 0px;
}

.footer__desc {
	margin-top: 50px;
	opacity: 0.70;
}

.footer__copyright {
	margin-top: 50px;
	opacity: 0.35;
}



/* POPUP */
.popup {
	display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(50,50,50,0.50);
	z-index: 9999;
}

.popup.active {
	display: flex;
}

.popup__content {
	max-width: 600px;
	height: auto;
	background-color: rgba(25,25,25,1.00);
	padding: 50px 60px;
}

.title.popup__title {
	padding: 0px;
}

.popup__button {
	height: auto;
}



/* Cookies */
.cookies {
	display: block;
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background: rgba(50,50,50,0.90);
	z-index: 999;
}

.cookies__content {
	text-align: center;
	padding: 25px 30px;
}

.cookies__button {
	margin-top: 12.5px;
}






/* PAGES */
.page .header__content > .wrap {
	max-width: 100%;
}

.page .header .title.header__title {
	margin-top: 25px;
}

.page .header__image {
	display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 345px;
  width: 285px;
}

.page .header__image img {
	display: block;
	position: absolute;
	top: -9999px;
	bottom: -9999px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: auto;
	margin: auto;
}

/* Breadcrums */
.breadcrums > li {
	display: inline-block;
	padding: 0px;
}

.breadcrums > li:before { display: none; }

.breadcrums > li:not(:last-child) a:after {
	content: '—';
	display: inline-block;
	position: relative;
	font: inherit;
	color: rgba(55,205,110,1.00);
	padding: 0px 15px;
}

.breadcrums > li a {
	display: inline-block;
	color: rgba(255,255,255,0.70);
}

.breadcrums > li:last-child a {
	color: rgba(255,255,255,0.35);
}

.breadcrums > li a[href]:hover {
	text-decoration: none;
	color: rgba(55,205,110,1.00);
}



/* Page Item */
.page.page-item .header__content,
.page.page-contact .header__content {
	background: none;
}

.page.page-item .header__content > .wrap,
.page.page-contact .header__content > .wrap {
	width: calc(100% - 315px);
}



/* Page Contact */
.form {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	text-align: left;
	margin: -25px 0px 0px -30px;
}

.form > * {
	flex: 0 1 auto;
	padding: 25px 0px 0px 30px;
}

.form > .form__wrap {
	flex: 1 1 33.3%;
}

.form > .form__wrap.full {
	flex: 1 1 100%;
}

.title.form__title {
	padding-bottom: 25px;
}