main{
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	gap: 0;	
}
.contentWrap {
	width: 100%;
	display: flex;
	justify-content:center;
	.content{
		width: 100%;
		max-width: var(--content-width);
	}
}
.menuWrap{
	display: flex;
	align-items: center;
	width: 100%;
	border-radius: var(--stn-radius);
	background-color: var(--color-light);
	height: 84px;
	padding: 0 24px 0 38px;
	.Icon.Mobmenu{
		display: none;
		background-color: var(--footer-color);
	}
}
.languageTopBar{
	display: flex;
	flex-direction: column;
	position: absolute;
	background-color: var(--color-light);
	border-radius: var(--mid-radius);
	box-shadow: 0 4px 10px 0 rgba(119, 136, 153, 0.4);	
	padding: 38px 26px;
	z-index: 3;
	font-weight: var(--bold-weight);
	gap: 7px;
	label{
		text-transform: uppercase;
		font-size: var(--regular-font-size);
		color: var(--highlight);
		margin-bottom: 7px;
	}
	a{
		display: inline-block;
		text-decoration: none;
		padding: 0 20px;
		line-height: 42px;
		height: 42px;
		font-size: var(--prm-font-size);
		border-radius: var(--small-radius);
		width: 100%;
	}
	a:hover{
		background-color: var(--hover-color);
	}
}
.mobOverlay{
	display: none;
	width:100%;
	height: 100%;
	position: fixed;
	top: 0;
	left:0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index:100001;
}
.mobOverlay.Opened{display: block;}
.mobMenu{
	display: none;
	width:70%;
	height: 100%;
	position: fixed;
	top: 0;
	left:0;
	z-index:100002;
	background-color: var(--color-light);
	transform: translate(-100%);
	a{
		display: flex;
		gap: 12px;
		height: 42px;
		align-items:center;
		text-decoration: none;
		color: var(--nav-links);
		font-size: var(--regular-font-size);
		font-weight: var(--bold-weight);
		width: max-content;
		.Icon{
			width: 18px;
			height: 18px;
		}
		z-index:1;
	}
	.submenuWrapper{
		max-height: 42px;
		height:auto;
		z-index:0;
		transition: max-height 0.3s ease;
		overflow: hidden;
		.submenu{
			display: flex;
			flex-direction: column;
			gap: 24px;
			padding: 24px 0;
			a{
				display: grid;
				grid-template-columns: 24px 1fr;
				gap: 24px;				
				opacity:0;
				transition: opacity 0.3s ease;
				width:100%;
			}
		}
	}	
	.submenuWrapper.opened{
		max-height: 400px;
		.submenu a{
			opacity:1;
		}
	}	
}
.mobMenu.Opened{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0;
	padding: 52px 30px 39px 30px;
	transform: translate(0);
	animation-name: showMobMenu;
	animation-duration: 300mS;
	animation-timing-function: linear;
	font-family: var(--prm-font);
	.menuWrapp{
		flex-grow:1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 24px;
	}
}
.mobMenu.Hide{
	display: flex;
	transform: translate(100%);
	animation-name: hideMobMenu;
	animation-duration: 300mS;
	animation-timing-function: linear;
}
@keyframes showMobMenu {
  0% {
    transform: translate(-100%);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes hideMobMenu {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-100%);
  }
}
.navigation{
	position: relative;
	width: 100%;
	z-index:10;
	.links{
		width:100%;
		height: 58px;
		display: flex;
		justify-content: flex-end;
		align-content: center;
		align-items: center;
		a{
			.Icon{
				background-color: var(--active-color);
			}
			text-transform: uppercase;
			margin-right: 44px;
			text-decoration: none;
			color: var(--nav-links);
			font-size: var(--regular-font-size);
			line-height: 24px;
			display: inline-flex;
			align-items: center;
			gap: 12px;
		}
	}
	.Logo{
		img{
			width: 134px;
			height: 35px;
			float: left;
		}
	}
	.Login, .Signup{
		line-height: 42px;
		text-decoration: none;
		font-size: var(--prm-font-size);
		white-space: nowrap;
	}
	.Signup{
		background-color: var(--highlight);
		border-radius: var(--semi-radius);
		color: #FFF;
		padding: 0 40px;
		font-weight: 600;		
	}
	.Login{
		display: inline-flex;
		align-items: center;
		gap: 12px;
		margin-right: 44px;
		color: var(--nav-links);
		.Icon{
			background-color: var(--color-dark);
		}
	}	
	nav{
		flex-grow:1;
		text-align:center;
		width:100%;
		display: flex;
		justify-content: center;
		align-items:center;
		a{
			display: flex;
			gap: 12px;
			height: 42px;
			padding: 0 22px;
			align-items:center;
			text-decoration: none;
			color: var(--nav-links);
			border-radius: var(--small-radius);
			.Icon{
				width: 18px;
				height: 18px;
			}
		}
		a:hover, a.selected, a.current{
			background-color: var(--hover-color);
		}
		.submenu{
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;
			width:100%;
			max-width: 798px;
			padding: 38px 46px 43px;
			border-radius: var(--mid-radius);
			box-shadow: 0 4px 10px 0 rgba(119, 136, 153, 0.4);			
			background-color: var(--color-light);
			position: absolute;
			top: calc(100% + 14px);
			left: 50%;
			transform: translateX(-50%);
			text-align: left;
			label{
				grid-column-end: span 2;
				width: 100%;
				color: var(--highlight);
				font-weight: var(--bold-weight);
				font-size: var(--regular-font-size);
				text-transform: uppercase;
				padding-left: 20px;
			}
			a{
				display: grid;
				grid-template-columns: 24px 1fr;
				gap: 7px 24px;
				height:auto;
				line-height: normal;
				padding: 20px;
				border-radius: var(--mid-radius);
				font-family: var(--primary-font);
				font-size: var(--prm-font-size);	
				svg{
					grid-row-end: span 2;
					align-self: flex-start;
				}
				.label{
					font-weight: var(--bold-weight);					
				}
			}
		}
	}
}
.spacer{
	display: inline-block;
	width: 100%;
	height: var(--h-desktop);
}
.badge{
	background-color: var(--block-hover);
	border-radius: var(--small-btn-radius);
	height: 36px;
	line-height: 36px;
	color: var(--color-light);
	font-family: var(--primary-font);
	font-size: var(--regular-font-size);	
	font-weight: var(--bold-weight);	
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0 36px;
}
a.action{
	text-decoration: none;
	background-color: var(--active-color);
	border-radius: var(--semi-radius);
	height: 42px;
	line-height: 42px;
	color: var(--footer-color);
	font-family: var(--primary-font);
	font-size: var(--prm-font-size);	
	font-weight: var(--bold-weight);	
	white-space: nowrap;
	padding: 0 42px;	
	position: relative;
}
a.action.highlight{
	color: var(--color-light);
	background-color: var(--highlight);
}
a.action.dark{
	color: var(--color-light);
	background-color: var(--footer-color);
}
a.action.loading::after{
	content:"";
	display: block;
	width: 24px;
	height: 24px;
	background-image: url(./i/Ui/loader.svg);
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background-color: transparent;
}
section{
	h1, h2, h3, h4{
		font-family: var(--hdr-font);
		font-weight: var(--hdr-h2-weight);
		margin:0;
		color: var(--hdr-color);
	}
	h1{
		font-size: var(--hdr-h2-size);
	}
	h2{
		font-size: var(--hdr-h2-size);
	}
	h3{
		font-size: var(--hdr-h2-size);
	}	
	h4{
		font-size: var(--hdr-h4-size);
	}	
}
.content.page{
	display:flex;
	flex-direction:column;
	gap: 60px;
	align-items: center;
	padding: 80px 0;
	h1{
		margin:0;
		font-family: var(--hdr-font);
		font-weight: var(--hdr-h1-weight);
		font-size: var(--hdr-h1-size);
		color: var(--hdr-color);
		margin:0;		
	}
	.text{
		display: block;
		width: 100%;
		max-width: var(--block-mid-width);
		padding: 60px;
		background-color: var(--color-light);
		border-radius: var(--semi-radius);
		font-family: var(--primary-font);
		font-size: var(--prm-font-size);	
		font-weight: var(normal);
	}
}
.form{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 28px;
	width:100%;
	>div.field{
		width:100%;
		position: relative;
		input, textarea{
			outline: none;
			width:100%;
			height:68px;
			line-height:68px;
			padding:0 0 0 32px;
			border: 2px #FFF solid;
			border-radius: var(--block-radius);
			font-family: var(--primary-font);
			font-size: var(--input-font-size);
			color: var(--footer-color);
		}
		textarea{
			height: 252px;
			resize: none;
		}
		span.placeholder, input::placeholder, textarea::placeholder{
			color: var(--placeholder-color);
			font-size: var(--prm-font-size);
		}
		span.placeholder{
			display: none;
			position: absolute;
			top: 8px;
			left: 32px;
			font-size: var(--small-font-size);
		}			
		input:focus, textarea:focus{
			border: solid 2px #d3d4df;
		}
		textarea:not(:placeholder-shown) + span.placeholder,
		input:not(:placeholder-shown) + span.placeholder{
			display: block;
		}
		textarea:not(:placeholder-shown),
		input:not(:placeholder-shown){
			padding-top: 12px;
		}		
	}
	button{
		font-family: var(--primary-font);
		display: inline-block;
		font-size: var(--prm-font-size);
		color: var(--color-light);
		padding: 0 40px;
		background-color: var(--highlight);
		border-radius: var(--semi-radius);
		line-height: 48px;
		height: 48px;	
		font-weight: var(--bold-weight);			
		width: 100%;
		border: 2px var(--highlight) solid;
		position: relative;
		cursor: pointer;
	}
	button.loading::after{
		content:"";
		display: block;
		width: 24px;
		height: 24px;
		background-image: url(./i/Ui/loader.svg);
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(255,255,255,0.3);
	}
	input[type=checkbox]{
		display: none;
	}
	input[type=checkbox] + label[for]{
		font-family: var(--primary-font);
		font-size: var(--small-font-size);
		color: var(--txt-light);
		display:flex;
		gap: 18px;
		align-items: center;
		align-content: center;
		cursor: pointer;
		a{
			color: inherit;
			font-weight: var(--strong-weight);
		}
	}
	input[type=checkbox] + label[for]::before{
		content:"";
		display: block;
		width: 24px;
		height: 24px;
		background-image: url(./i/Ui/checkBox.svg);
		background-repeat: no-repeat;
		background-size: contain;
	}
	input[type=checkbox]:checked + label[for]::before{
		background-image: url(./i/Ui/checkBoxChecked.svg);
	}
	input.Error, textarea.Error{
		border: 2px var(--highlight) solid !important;
	}
	input.done, textarea.done{
		border: 2px #00cc33 solid !important;
	}	
	input[type=checkbox].Error + label[for]::before{
		background-image: url(./i/Ui/checkBoxError.svg);
	}	
	input[type=checkbox].Error + label[for]{
		color: var(--highlight);
	}
	input[type=checkbox]:checked.Error + label[for]::before{
		background-image: url(./i/Ui/checkBoxErrorChecked.svg);
	}	
}
footer{
	.Main, .copyright{
		display: grid;
		width: 100%;
		grid-template-columns: 43% 1fr;
	}
	.Main{
		padding: 83px 0 65px 0;
		.data{
			display: flex;
			flex-direction: column;
			gap: 28px;
			.Logo{
				img {
					width: 44px;
					height: 50px;
				}
			}
			.slogan{
				font-family: var(--hdr-font);
				font-size: var(--extra-big-font-size);
				font-weight: var(--semi-weight);
				color: var(--footer-color);
			}
			.links{
				display: flex;
				gap: 72px;
				a{
					font-family: var(--primary-font);
					text-decoration: none;
					line-height: 42px;
					height: 42px;
					display: inline-flex;
					gap: 2px;
					align-items: center;
					font-size: var(--regular-font-size);
					font-weight: var(--bold-weight);
					text-transform: uppercase;
					color: var(--txt-light);
				}				
			}
			.socials{
				display: block;
				height: auto;
				display:flex;
				a{
					display: inline-flex;
					.Icon{
						background-color: var(--footer-color);
						width:32px;
						height: 32px;
					}
				}
			}
		}
		.hotlinks{
			background-color: var(--footer-color);
			width: 100%;
			height: 100%;
			border-radius: var(--block-radius);
			padding: 36px 0 36px 46px;
			display: flex;
			gap: 170px;
			nav{
				display:flex;
				flex-direction: column;
				gap: 12px;
				line-height: 36px;
				label{
					font-family: var(--primary-font);
					color: var(--body-color-dark);
					text-transform: uppercase;
					font-weight: var(--bold-weight);
					font-size: var(--regular-font-size);
				}
				a{
					text-decoration: none;
					color: var(--color-light);
					font-size: var(--prm-font-size);
					font-weight: var(--bold-weight);
				}
			}
		}
	}
	.copyright{
		padding: 0px 0 54px 0;
		font-family: var(--primary-font);
		>span{
			font-size: var(--prm-font-size);
			color: var(--txt-light);
			font-weight: normal;
		}
		.links{
			display: flex;
			gap: 80px;
			a{
				font-family: var(--primary-font);
				text-decoration: none;
				line-height: 24px;
				height: 24px;
				font-size: var(--regular-font-size);
				font-weight: var(--bold-weight);
				color: var(--txt-light);
			}			
		}
	}
}
a.signup{
	display: inline-block;
	font-size: var(--prm-font-size);
	color: var(--color-light);
	padding: 0 40px;
	background-color: var(--highlight);
	border-radius: var(--semi-radius);
	line-height: 42px;
	height: 42px;	
	text-decoration: none;
	font-weight: var(--bold-weight);
}

.Icon{
	display: inline-block;
	cursor: pointer;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;	
	mask-position: center;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;		
	background-color: #000;
	width: 24px;
	height: 24px;
}
.Icon.World{-webkit-mask-image: url(./i/Icons/World.svg); mask-image: url(./i/Icons/World.svg);}
.Icon.LoginIcon{-webkit-mask-image: url(./i/Icons/Login.svg); mask-image: url(./i/Icons/Login.svg);}
.Icon.SrvStatus{-webkit-mask-image: url(./i/Icons/ServiceStatus.svg); mask-image: url(./i/Icons/ServiceStatus.svg);}
.Icon.Submenu{-webkit-mask-image: url(./i/Icons/Submenu.svg); mask-image: url(./i/Icons/Submenu.svg);}
.Icon.ArrowGo{-webkit-mask-image: url(./i/Icons/ArrowGo.svg); mask-image: url(./i/Icons/ArrowGo.svg);}
.Icon.Linkedin{-webkit-mask-image: url(./i/Icons/Linkedin.svg); mask-image: url(./i/Icons/Linkedin.svg);}
.Icon.OpenArrow{-webkit-mask-image: url(./i/Icons/OpenArrow.svg); mask-image: url(./i/Icons/OpenArrow.svg);}
.Icon.Mobmenu{-webkit-mask-image: url(./i/Icons/Mobmenu.svg); mask-image: url(./i/Icons/Mobmenu.svg);}


@media (max-width: 1100px) {
	.spacer {
		height: var(--h-tablet);
	}
	.navigation{
		.Logo {
			img {		
				width: 94px;
				height: auto;
			}
		}
		a{
			font-size: 14px;
		}
	}
}
@media (max-width: 850px) {
	.navigation{
		.Signup, .Login {
			display: none;
		}
	}	
}
@media (max-width: 600px) {
	body{
		padding-top: 44px;
	}
	.spacer {
		height: var(--h-mobile);
	}
	.badge{
		font-size: var(--small-font-size);
		height: 24px;
		line-height: 24px;
	}	
	.navigation{
		position: fixed;
		top: 0;
		left: 0;		
		.links{
			display: none;
		}
		.menuWrap{
			display: grid;
			grid-template-columns: 80px 24px 1fr;
			gap: 28px;
			height: 44px;
			border-radius: 0;
			padding: 0 24px;
			.Icon.Mobmenu{
				display: block;
			}
			nav, .Login {
				display: none;
			}
			.Signup{
				display: block;
				padding:0;
				background-color: transparent;
				color: var(--highlight);
				width: max-content;
				justify-self: flex-end;
			}
			.Logo img{
				width: 80px;
				height: 22px;
			}
		}	
	}
	section{
		h1, h2, h3{
			line-height: 1.2;
			letter-spacing: -0.6px;	
		}
		h1{
			font-size: var(--hdr-h2-size);
		}
		h2{
			font-size: var(--hdr-h2-size);
		}
		h3{
			font-size: var(--hdr-h2-size);
		}	
		h4{
			font-size: var(--hdr-h4-size);
		}	
	}	
	footer{
		padding: 0 24px;
		.Main, .copyright{
			grid-template-columns: 1fr;
			padding-bottom: 57px;
			.data{
				.slogan{
					font-size: 22px;
					letter-spacing: -0.52px;
				}				
				.links{
					flex-direction: column;
					gap: 16px;
					a{
						font-size: var(--prm-font-size);
					}
				}
			}
			.hotlinks{
				flex-direction: column;
				gap: 38px;
				padding: 38px 24px;
				margin: 48px 0 0 0;
				height: auto;
				nav{
					gap: 10px;
				}
			}
		}		
		.copyright{
			gap: 42px;
			>span{grid-row-start: 2}
			.links{
				grid-row-start: 1;
				flex-direction: column;
				gap: 24px;
			}
		}
	}
}