@import url('../fonts/font-awesome/css/all.css?3');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* MAIN */
	* {
		padding: 0;
		margin: 0;
	    box-sizing: border-box
	}
	html, body {
		width: 100%;
		/*height: 100%;*/
		background-color: white;
		color: #6D7F8B;
		font-size: 16px;
		font-weight: normal;
		line-height: 1.4;
		background-size: 100% 100%;
		scroll-behavior: smooth;
		margin: 0;
		padding: 0;	
	}
	html, body, input, button, textarea{
		font-family: 'Montserrat', sans-serif;
		font-weight: 500;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
		-webkit-focus-ring-color: rgba(255, 255, 255, 0);
		-webkit-backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		-moz-osx-font-smoothing: graygauge;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	}
	body {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		min-height: 100vh;
	}
	.body {
		--header-height: 5em;
		--side-padding: 5em;
		--header-bg: #5d6b71;
		--green-color: #69CE64;
		--green-color-darker: #61BC5B;
		--gray-color: #6D7F8B;
		--gray-color-lighter: #869DAC;
	}
	body > * {
		width: 100%;
	}
	main {
		flex: 1 0 auto;
		width: 100%;
		z-index: 1;
		/* height: 100%; */
	}
	a {
		text-decoration: none;
		color: blue;
		text-transform: none;
	}
	section {
		background: transparent;
	}
	.city {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		background-image: url('/images/city.png?2');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center bottom;
		opacity: 0.0;
		transform-origin: 50% 100%;
		transform: scale(1.5, 1.5); 
	}

/* @group Header */
	header {
		width: 100%;
		height: var(--header-height);
		background-color: var(--header-bg);
		border-bottom: 2px solid var(--green-color);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		position: fixed;
		z-index: 999;
		padding: 0 1em 0 1.5em;
		transition: all 0.35s ease-in-out 0s;
	}
	header.scrolled {
		background-color: white;
		border-bottom: 1px solid var(--header-bg);
	}
	header .logo {
		/* display: none; */
		opacity: 0;
		transition: opacity 0.35s ease-in-out 0s;
	}
	header.scrolled .logo {
		width: 15%;
		height: 100%;
		max-width: 200px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		position: relative;
		opacity: 1;
	}
	header.promo .logo {
		width: 15%;
		height: 100%;
		max-width: 200px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		position: relative;
		opacity: 1;
	}
	header .logo a {
		cursor: default;
		pointer-events: none;
	}
	header.scrolled .logo a,
	header.promo .logo a {
		cursor: pointer;
		pointer-events: all;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
		display: block;
	}
	header.scrolled .logo > div,
	header.promo .logo > div {
		width: 100%;
		height: 0;
		position: absolute;
		top: 55%;
		left: 0;
		transform: translateY(-50%);
		/* margin-bottom: 2em; */
		padding-bottom: calc(451/1773*100%);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url('/images/logo_header.svg?19');
	}
	header.promo .logo > div {
		background-image: url('/images/logo_large.svg?19');
	}
	header nav {
		/* width: 100%; */
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-start;
		flex-wrap: nowrap;
	}
	header nav ul {
		list-style-type: none;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: nowrap;
	}
	header nav ul li {
		margin: 0 1em;
	}
	header nav ul li a{
		text-decoration: none;
		color: white;
		text-transform: uppercase;
		font-size: 0.8em;
		font-weight: 600;
		/* transition: all 0.35s ease-in-out 0s; */
	}
	.home::before{
		content: '\f015';
		font-family: FontAwesome;
		font-size: 1.4em;
	}
	header.scrolled nav ul li a{
		color: var(--header-bg);
	}
	nav ul li a.lang {
		display: inline-block;
		width: 3em;
		height: 3em;
		overflow: hidden;
		border-radius: 50%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border: 1px solid white;
		margin: 0 1.25em;
		margin-top: 3px;
	}
	header.scrolled nav ul li a.lang,
	header.promo nav ul li a.lang {

		border: 1px solid #6D7F8B;
	}
	nav ul li a.lang.es{
		background-image: url('/images/es.png');
	}
	nav ul li a.lang.ru{
		background-image: url('/images/ru.png');
	}
	header nav ul li a.active,
	header.scrolled nav ul li a.active,
	header.promo nav ul li a.active{
		color: var(--green-color-darker);
		font-weight: bold;
	}
	/* adaptive menu */
		/* menu icon */
		.nav .menu-icon {
			cursor: pointer;
			display: inline-block;
			float: right;
			position: absolute;
			user-select: none;  
			height: var(--header-height);
			width: var(--header-height);
			top:0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999;
		}
		.nav .menu-icon .navicon {
			background: var(--gray-color);
			display: block;
			height: 2px;
			position: relative;
			transition: background .2s ease-out;
			width: 18px;
		}
		
		.nav .menu-icon .navicon::before,
		.nav .menu-icon .navicon::after {
			background: var(--gray-color);
			content: '';
			display: block;
			height: 100%;
			position: absolute;
			transition: all .2s ease-out;
			width: 100%;
		}
		.nav.ads .menu-icon .navicon,
		.nav.ads .menu-icon .navicon::before,
		.nav.ads .menu-icon .navicon::after{
			background: white !important;
		}
		.nav .menu-icon .navicon::before {
			top: 5px;
		}
		.nav .menu-icon .navicon::after {
			top: -5px;
		}
		/* menu btn */
		.nav .menu-btn {
			display: none;
		}
		.nav .menu-btn:checked ~ .menu-icon .navicon {
			background: transparent;
		}
		.nav .menu-btn:checked ~ .menu-icon .navicon::before {
			transform: rotate(-45deg);
		}
		.nav .menu-btn:checked ~ .menu-icon .navicon::after {
			transform: rotate(45deg);
		}
		.nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::before,
		.nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after {
			top: 0;
		}

/* @group Slideshow */
	section.slideshow {
		flex: 1 0 auto;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		position: relative;
		background-color: var(--header-bg);
		padding-top: var(--header-height);
		
		/*border-top: 1px solid #cccccc;*/
		/*border-bottom: 1px solid #cccccc;*/
	}
	section.slideshow .promo {
		position: absolute;
		top: calc(50% + var(--header-height)/2);
		left: 0%;
		transform: translateY(-50%);
		width: 50%;
		/* min-width: 50em; */
		z-index: 9;
		display: flex;
		padding: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: white;
		overflow: visible;
	}
	section.slideshow .promo p {
		min-height: 6em;
	}
	section.slideshow .promo .logo {
		width: 65%;
		height: 0;
		margin-bottom: 2em;
		padding-bottom: calc(500/1800*65%);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url('/images/logo_large.svg?15');
	}
	section.slideshow .promo .logo path {
		fill:none;
		stroke:#6D7F8B;
		stroke-width:40;
		stroke-miterlimit:10;
	}
	section.slideshow .promo .bullets{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		margin-top: 3em;
	}
	section.slideshow .promo .bullets > div {
		display: inline-block;
		flex: 0 0 16px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		margin: 0 10px;
		border: 2px solid var(--green-color);
	}
	section.slideshow .promo .bullets > div.active {
		background-color: var(--green-color);
	}
	section.slideshow .promo h1 {
		font-weight: 500;
		/* text-transform: uppercase; */
		margin: 0 auto;
		margin-bottom: 0.8em;
		font-size: 1.5em;
		text-align: center;
		color: var(--green-color);
		display: block;
		line-height: 1.4;
		width: 80%;
	}

	section.slideshow#promo-ads .promo h1 {
		font-weight: 500;
		/* text-transform: uppercase; */
		margin: 0 auto;
		margin-bottom: 0.2em;
		font-size: 3.3em;
		text-align: left;
		color: var(--green-color);
		display: block;
		line-height: 1.1;
		width: 80%;
		font-weight: 600;
		letter-spacing: 1px;
	}
	section.slideshow .promo p {
		font-size: 1.25em;
		text-align: center;
		display: none;
		line-height: 1.4;
		width: 80%;
		cursor: default;
	}
	section.slideshow#promo-ads .promo p {
		font-size: 1.5em;
		text-align: left;
		display: block;
		line-height: 1.4;
		width: 80%;
		cursor: default;
	}
	section.slideshow .promo p:first-of-type {
		display: block;
	}
	section.slideshow .promo p b {
		color: var(--green-color);
	}
	section.slideshow .promo p .tel {
		text-decoration: none;
		color: var(--green-color);
		font-size: 2em;
		font-weight: 400;
	}
	section.slideshow .swiper-container{
		position: absolute;
		z-index: 0;
		top: var(--header-height);
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	section.slideshow .swiper-slide {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: right top;
	}
	section.slideshow .swiper-slide.one{
		background-image: url('/images/slideshow/slide_02.jpg?2');
	}
	section.slideshow .swiper-slide.two{
		background-image: url('/images/slideshow/slide_03.jpg?2');
	}
	section.slideshow .swiper-slide.three{
		background-image: url('/images/slideshow/slide_04.jpg?2');
	}
	section.slideshow .swiper-slide.four{
		background-image: url('/images/slideshow/slide_01.jpg?2');
	}

/* @group SCROLL DOWN ICON WITH ANIMATIONS */
		.icon-scroll,
		.icon-scroll::before{
			position: absolute;
			z-index: 9;
			left: 50%;
		}
		.icon-scroll{
			width: 30px;
			height: 46px;
			margin-left: -15px;
			bottom: 20px;
			box-shadow: inset 0 0 0 3px var(--green-color);
			border-radius: 15px;
		}
		.icon-scroll::before{
			content: '';
			width: 10px;
			height: 10px;
			background: var(--green-color);
			margin-left: -5px;
			top: 5px;
			border-radius: 5px;
			animation-duration: 1.75s;
			animation-iteration-count: infinite;
			animation-name: scroll;
		}
		@keyframes scroll{
			0% {opacity: 1;}
			100%{opacity: 0; transform: translateY(22px);}
		}
	
/* @group Section About */
	section.about {
		flex: 1 0 auto;
		width: 100%;
		/* height: 100vh; */

		padding: var(--side-padding);
		padding-top: 5vw;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;

		position: relative;
	}
	section.about .inner {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		height: 100%;
	}
	section.about .inner > div {
		flex: 0 0 65%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: nowrap;
	}
	section.about .inner .info {
		/* opacity: 0; */
	}
	section.about .inner p {
		text-align: left;
		margin: 1em 0;
		line-height: 1.5;
	}
	section.about .inner p:first-of-type {
		margin-top: 0;
	}
	#about-title {
		padding: 3px;
		margin-bottom: 2em;
	}

/* @group Section Why us */
	section.why {
		flex: 1 0 auto;
		width: 100%;
		min-height: 90vh;
		padding: var(--side-padding);
		/* padding-top: 0; */
		padding-top: 5vw;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;

		position: relative;
	}
	section.why .inner {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-start;
		flex-wrap: nowrap;
		height: 100%;
		/* border: 1px solid gray; */
	}
	section.why .inner > div {
		flex: 0 0 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
		flex-wrap: nowrap;
		height: 100%;
	}
	#why-title {
		padding: 3px;
		margin-bottom: 3em;
		flex: 0 1 auto;
	}
	section.why .advantages {
		width: 100%;
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: nowrap;
	}
	section.why .advantages > div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: nowrap;
		flex: 1 0 33%;

	}
	section.why .advantages > div > div{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: nowrap;
		padding: 2em;
		opacity: 0;
		transform: scale(0.8, 0.8);
	}
	section.why .advantages > div > div:nth-of-type(odd){
		transform: translateY(-2em) scale(0.8, 0.8);

	}
	section.why .advantages div.line-1 >div:last-of-type{
		width: 5em;
	}
	section.why .advantages div.line-2 >div:first-of-type,
	section.why .advantages div.line-2 >div:last-of-type{
		width: 1em;
	}
	section.why .advantages div.line-3 >div:first-of-type{
		width: 6em;
	}
	section.why .advantages > div > div h3{
		font-size: 1.75em;
		line-height: 1.1;
		font-weight: 600;
		color: var(--gray-color);
	}

/* @group Section Services */
	section.services {
		flex: 1 0 auto;
		width: 100%;
		height: 90vh;

		padding: var(--side-padding);
		padding-top: 5vw;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		position: relative;
	}
	section.services .inner {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		/* border: 1px solid gray; */
	}
	/* packages */
	section.services .inner > div {
		flex: 0 0 65%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
	}
	/* hint */
	section.services .inner > div:last-of-type {
		flex: 0 0 35%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
		flex-wrap: nowrap;
				/* border: 1px solid gray; */
	}
	#services-title {
		padding: 3px;
		margin-bottom: 2em;
		text-align: left;
	}
	section.services .inner .info {		
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		/* border: 1px solid gray; */
		-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 95%);
	}
	section.services .service {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}
	section.services .service > * {
		display: block;
		max-width: 85%;
	}
	section.services .service > span {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		text-transform: uppercase;
		font-size: 2.5em;
		font-weight: 700;
	}
	section.services .service > span small {
		margin-top: 0.25em;
		opacity: 0.75;
		font-size: 1.1rem;
	}
	section.services .service > ul {
		margin-top: 1.5em;
		list-style-type: square;
		list-style-position: inside;
	}
	section.services .service > ul li {
		font-size: 1.5em;
		color: var(--gray-color);
		margin: 0.1em 0;
		line-height: 1;
	}
	section.services .service > ul li span {
		color: var(--gray-color);
		font-size: 1rem;
	}
	section.services .service > span.price {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		text-transform: uppercase;
		font-size: 3.5em;
		font-weight: 700;
		color: var(--green-color-darker);
		line-height: 1;
		margin-top: 0.5em;
		text-align: left;
		opacity: 1;
	}
	section.services .service > span sup {
		font-size: 0.9rem;
		font-weight: 600;
		text-transform: none;
		line-height: 1.4;
		color: var(--gray-color);
	}
	section.services .service > span.price > small {
		margin-top: 0.5em;
		font-size: 0.9rem;
		font-weight: 600;
		text-transform: none;
		line-height: 1.4;
		color: var(--gray-color);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
	}
	section.services .service > span.price > small b {

		font-size: 1rem;
	}
	section.services .general-hint {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: left;
		padding: 1em var(--side-padding);
		font-size: 0.9rem;
	}
	.services .card{
	  width: 90%;
	  padding: 2em;
	  padding-top: 1.5em;
	  background: #ffffff;
	  border-radius: 2.5em;
	  color: var(--gray-color-lighter);
	  box-shadow: 0.5em  0.5em 1.85em rgba(0, 0, 0, 0.11);
	}
	.services .card ul{
		list-style-type: none;
		/* list-style-position: inside;
		text-align: left; */
	}
	.services .card ul li{
		display: inline-block;
		margin: 0.5em 0;
		line-height: 1.2;
	}
	.services .card .imgBx{
	  position: relative;
	  text-align: center;
	}
	.services .card .imgBx::before{
		content: '\f0eb';
		font-family: FontAwesome;
		font-size: 5em;
	}
	.services .card .contentBx{
	  position: relative;
	  margin-top: 0.75em;
	  text-align: center;
	  font-size: 0.9rem;
	  line-height: 1.4;
	}
	.services .card .contentBx p{
		margin-bottom: 1em;
	}
	.services .card h4 {
		font-size: 1.15em;
		margin-bottom: 0.5em;
		line-height: 1.2;
	}
	.services nav {
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2em;
	}
	.dot-nav {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  height: 1em;
	  margin-top: 2em;
	}

	.dot-nav li {
	  list-style: none;
	  /* margin: 0 10px; */
	  /* cursor: pointer; */
	}

	.dot-nav li.is-active span {
	  background: var(--gray-color);
	}

	.dot-nav li span{
		display: inline-block;
		flex: 0 0 1em;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		margin: 0 0.75em;
		border: 2px solid var(--gray-color);
	}
	
/* @group Contacts */
	section.contacts {
		flex: 1 0 auto;
		width: 100%;
		height: 90vh;

		padding-top: 5vw;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;

		position: relative;
	}
	#contactsmap {
		width: 100%;
		height: 100%;
		-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 95%);
	}
	section.contacts > div:first-of-type {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
		flex-wrap: nowrap;
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
	#contact-title {
		padding: 5px;
		margin-bottom: 1em;
		flex: 0 1 auto;
	}
	section.contacts .address {
		text-align: right;
	}
	section.contacts .address a{
		text-decoration: none;
		color: #5978A3;
	}

/* @group Footer */
	footer {
		flex: 0 0 auto;	
		width: 100%;
		min-height: 40vh;
		background-color: var(--header-bg);
		z-index: 10;
		padding: 4em;
		color: white;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;	
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.2));
		font-size: 0.9em;
	}
	footer .copyright {
		font-size: 1em;
		text-align: right;
		margin-top: 1em;
	}

	footer .logo {
		width: 20em;
		height: 0;
		position: relative;
		padding-bottom: calc(500/1800*20em);
		background-image: url('/images/logo_large.svg?4');
		background-size: 100% 100%;
	}
	footer nav {
		font-size: 1.1em;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
		text-align: right;
		margin-left: 4em;
	}
	footer nav ul {
		list-style: none;
		text-align: right;
	}
	footer nav li {
		list-style: none;
		text-align: right;
		margin-bottom: 0.5em;
	}
	footer nav li a {
		color: white;
	}
	footer nav li a:hover {
		color: var(--green-color);
	}
	footer nav li a.home {
		display: block;
		margin-bottom: 1em;
	}
	footer nav li a.lang{
		display: block;
		text-align: right;
		margin: 2em 0 1em auto;
		align-self: flex-end;
	}

/* @group Media Queries */
			
	/* classic screens */
		@media (max-aspect-ratio: 16/9) {

			.body {
				--side-padding: 4em;
			}

			@media all and (max-width: 1440px) {
				html, body {
					font-size: 15px;
				}
			}
			@media all and (max-width: 1280px) {
				.body {
					--side-padding: 0em;
				}
				main {
					font-size: 0.9em;
				}
				.icon-scroll{
					width: 24px;
					height: 38px;
					margin-left: -12px;
					bottom: 1.5em;
					border-radius: 12px;
				}
				.icon-scroll::before{
					width: 8px;
					height: 8px;
					margin-left: -4px;
					top: 4px;
					border-radius: 4px;
				}
				@keyframes scroll{
					0% {opacity: 1;}
					100%{opacity: 0; transform: translateY(15px);}
				}
			}
			@media all and (max-width: 1180px) {
				main {
					font-size: 0.85em;
				}
			}
			@media all and (max-width: 1024px) {
				html, body {
					font-size: 14px;
				}
				main {
					font-size: 0.8em;
				}
			}
		}
		@media (max-aspect-ratio: 16/10) {
			.body {
					--header-height: 8em;
			}
		}
		@media (max-aspect-ratio: 16/11) {
			.body {
					--header-height: 9em;
			}
		}
		@media (max-aspect-ratio: 16/12) {
			.body {
					--header-height: 10em;
			}
		}
	
	/* wide screens */
		@media (min-aspect-ratio: 16/9) {
			@media all and (max-width: 1400px) {
				html, body {
					font-size: 14px;
				}
				.body {
					--side-padding: 0em;
				}
				main {
					font-size: 0.9em;
				}
			}
			@media all and (max-width: 1280px) {
				.body {
					--side-padding: 0em;
				}
				main {
					font-size: 0.9em;
				}
				.icon-scroll{
					width: 24px;
					height: 38px;
					margin-left: -12px;
					bottom: 1.5em;
					border-radius: 12px;
				}
				.icon-scroll::before{
					width: 8px;
					height: 8px;
					margin-left: -4px;
					top: 4px;
					border-radius: 4px;
				}
				@keyframes scroll{
					0% {opacity: 1;}
					100%{opacity: 0; transform: translateY(15px);}
				}
			}
			@media all and (max-width: 1180px) {
				html, body {
					font-size: 13px;
				}
				main {
					font-size: 0.8em;
				}
			}
			@media all and (max-width: 1024px) {
				html, body {
					font-size: 12px;
				}
				main {
					font-size: 0.8em;
				}
			}
			@media all and (max-height: 600px) {
				html, body {
					font-size: 11px;
				}
				main {
					font-size: 0.85em;
				}
			}
			@media all and (max-height: 500px) {
				.services .card .contentBx{
				  font-size: 0.77rem;
				}
				.services .card{
				  width: 100%;
				  padding: 1.5em;
				}
				.services .card .imgBx::before{
					font-size: 4em;
				}
				section.services .inner > div {
					flex: 0 0 60%;
				}
				section.services .inner > div:last-of-type {
					flex: 0 0 40%;
				}
				#services-title {
					margin-bottom: 0em;
				}
				section.services .service > ul li span,
				section.services .service > span.price > small,
				section.services .service > span.price > small b {
					font-size: 0.8rem;
				}
			}
			

		}

	/* mobiles */
		@media (min-aspect-ratio: 3/4) {
			.nav .menu-icon {
				display: none;
			}
		}
		@media (max-aspect-ratio: 3/4) {
			.body {

				--header-height: 5em;
			}
			header:not(.promo) {
				background-color: white;
				border-bottom: 1px solid var(--header-bg);
			}
			section.slideshow{
				background-color: black;
				height: calc(100vw / 3 * 4);
			}
			header .logo,
			header.scrolled .logo,
			header.promo .logo {
				width: 30%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				position: relative;
				opacity: 1;
			}
			header .logo a {
				cursor: pointer;
				pointer-events: all;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 99;
				display: block;
			}
			header .logo > div {
				width: 100%;
				height: 0;
				position: absolute;
				top: 55%;
				left: 0;
				transform: translateY(-50%);
				/* margin-bottom: 2em; */
				padding-bottom: calc(451/1773*100%);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-image: url('/images/logo_header.svg?19');
			}
			header.promo .logo > div {
				width: 100%;
				height: 0;
				position: absolute;
				top: 55%;
				left: 0;
				transform: translateY(-50%);
				/* margin-bottom: 2em; */
				padding-bottom: calc(451/1773*100%);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-image: url('/images/logo_large.svg?19');
			}
			header nav ul li a{
				margin: 0;
				color: var(--header-bg);
			}
			header.promo nav ul li a{
				margin: 0;
				color: white;
			}
			
			header nav ul li a.lang {
				border: 1px solid #6D7F8B;
				margin: 0;
			}
			.nav {
				height: 100%;
				position: absolute;
				top: 0%;
				left: 0;
				right: 0;	
				padding: 0;
				transform-origin: 100% 0%;
			}
			.nav ul {
				margin: 0;
				padding: 0;
				list-style: none;
				overflow: hidden;

				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-end;
				list-style: none;
				list-style-type: none;
				background: white;
				margin: 0;
			}
			.nav li {
				margin: 0;
				padding: 0;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding: 0;
				margin: 1em 2em;
			}
			.nav li a {

				margin: 0;
			}
			.nav li a.home {
				display: none;
			}
			.menu {
				height: 0;
				transition: max-height .2s ease-out;
				margin: 0;
				width: 50%;
				max-width: 50%;
				transform-origin: 100% 0%;
			}
			.nav .menu-btn:checked ~ .menu {
				height: 100vh;
				width: 50%;
				padding-top: var(--header-height);
				position: relative;
				z-index:0;
			}
			.nav .menu-btn:checked ~ .menu::before{
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				top: calc(var(--header-height) - 1px);
				border-left: 1px solid var(--header-bg);
			}
			.icon-scroll {

				display: none;
			}

			section .inner > div svg,
			#contact-title {
				width: 100% !important;
				margin-top: 2em;
			}
			h1{
				text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
			}

			section.slideshow .promo {
				position: absolute;
				top: auto;
				bottom: 0;
				padding: calc(var(--header-height) / 2) 0;
				width: 100%;
				transform: translateY(0);
				background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 1.0));
				background-size: 100% 100%;
				/* min-width: 50em; */
			}
			section.about .inner > div {

				flex: 0 0 100%;
			}
			section.why .advantages {
				align-items: flex-start;
			}
			section.why .advantages > div {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex: 0 0 auto;
				width: 100%;
			}
			section.why .advantages > div > div{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				padding: 1em 0;
				opacity: 0;
				text-align: center;
				width: 100%;
				transform: scale(1, 1);
			}
			section.why .advantages > div > div:nth-of-type(odd){

				transform: translateY(0) scale(1,1);
			}
			section.why .advantages div.line-1 >div:last-of-type,
			section.why .advantages div.line-2 >div:first-of-type,
			section.why .advantages div.line-2 >div:last-of-type,
			section.why .advantages div.line-3 >div:first-of-type{

				display: none;
			}
			section.why .advantages > div > div h3{
				font-size: 1.5em;
				margin-bottom: 0.2em;
			}
			section.services {

				padding-top: 0;
			}
			section.services .inner .info {		
				-webkit-mask-image: none;
			}
			section.services .service {
				width: 100%;
				min-width: 100%;
				max-width: 100%;
				flex: 0 0 100%;
			}
			section.services .service > * {
				display: block;
				max-width: 100%;
			}
			section.services .inner {
				width: 90%;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
			}
			/* packages */
			section.services .inner > div {
				flex: 0 0 auto;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: nowrap;
						/* border: 1px solid gray; */
			}
			/* hint */
			section.services .inner > div:last-of-type {
				flex: 0 0 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
						/* border: 1px solid gray; */
			}
			section.services .service > ul li span,
			section.services .service > span.price > small,
			section.services .service > span.price > small b {
				font-size: 0.8rem;
			}
			#services-title {
				padding: 3px;
				margin-bottom: 1em;
			}
			.services .card{
			  width: 100%;
			  padding: 1em;
			  margin-top: 1em;
			  border-radius: 0;
			}
			.services .card ul li{
				margin: 0.25em 0;
			}
			.services .card .imgBx::before{
				font-size: 3em;
				display: none;
			}
			.services .card .contentBx{
			  position: relative;
			  margin-top: 0.5em;
			  text-align: center;
			  font-size: 0.8rem;
			  line-height: 1.3;
			}
			.services .card .contentBx p{
				margin-bottom: 1em;
			}
			.services .card h4 {
				font-size: 1em;
				margin-bottom: 0.35em;
			}

			section.services .service > ul li span {
				font-size: 0.8rem;
			}
			section.services .service > span.price {
				font-size: 2em;
				margin-top: 0.5em;
			}
			section.services .service > span sup {
				font-size: 0.8rem;
				line-height: 1.2;
			}
			section.services .service > span.price > small {
				margin-top: 0.5em;
				font-size: 0.8rem;
				line-height: 1.2;
			}
			section.services .service > span.price > small b {

				font-size: 0.8rem;
			}
			section.services .service > ul {
				margin-top: 0.5em;
			}
			section.services .service > ul li {
				margin: 0;
			}
			.services nav {
				bottom: 0.5em;
			}
		}