@import url('/fonts/font-awesome/css/font-awesome.css');
@import url('/fonts/rub/style.css');

/* @group Main */
	* {
		padding: 0;
		margin: 0;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box
	}
	html, body {
		width: 100%;
		height: 100%;
		min-height: 650px;
		background-color: #fff;
		color: var(--color-text-default);
		font-size: 14px;
		font-weight: 400;
		line-height: 1.5em;
		background-size: 100% 100%;
		background-attachment: fixed;
		scroll-behavior: smooth;
		margin: 0;
		padding: 0;	
	}
	html, body, input, button, textarea{
		font-family: 'Montserrat', sans-serif;
		-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);

	}
	input {
		line-height: 1;
		-webkit-appearance: none;
		-moz-appearance:    none;
		appearance:         none;
	}
	main {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.body {
		--color-header-bg: #23272A;
		--color-footer-bg: #23272A;
		--color-header-font: white;
		--color-link: #4C6588;
		--color-text-default: #23272A;
		--color-slider-bg: #FFFFFF;
		--color-shaded-bg: #EEEEF0;
		
		--color-citation-bg: #23272A;
		--color-citation-text: white;
				
		--color-promo-bg: white;
		--color-promo-text: 23272A;
		
		--color-configurator-light: var(--color-dark-gray);
		--color-configurator-dark: var(--color-dark-gray);
		--color-configurator-medium: #bbbbbb;
		
		--color-section-separator: #cccccc;
		
		--color-tooltip-bg-default: #FFFFFF;
		--color-tooltip-border-default: #23272A;
		--color-tooltip-text-default: 23272A;
		
		--color-button-green: #0FA652;
		
		--color-dark-gray: #515A62;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		
	}
	a {
		text-decoration: none;
		color: var(--color-link);
	}
	sup {
		font-size: 0.75em;
	}
	.logo a {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99;
	}

/* @group Header */
	header {

		flex: 0 0 auto;

		background-color: var(--color-header-bg);
		color: var(--color-header-font);
		width: 100%;
		padding: 0.75em 1.5em;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
	}
	header h1 {
		font-size: 1em;
		display: inline-block;
	}
	header > div {
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		font-size: 1em;
		font-weight: 500;
	}
	header > div a {
		text-decoration: none;
		color: var(--color-header-font);
		margin-right: 2em;
	}

/* @group Buttons */
	a.default-button,
	button.default-button {
		display: inline-block;
		padding: 1.25em 4em;
		border-radius: 0.1em;
		border: 2px solid var(--color-text-default);
		text-transform: uppercase;
		color: var(--color-text-default);
		text-decoration: none;
		text-align: center;
		font-weight: 600;
		letter-spacing: 1px;
		margin-top: 2em;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
		line-height: 1;
		transition: color 0.35s ease-in-out 0s;
		background: transparent !important;
		cursor: pointer;
		font-size: 1em;
		outline: none;
		/*z-index: 2;*/
	}
	button.default-button {
		/*z-index: 1;*/
	}
	a.default-button.fullwidth,
	button.default-button.fullwidth {
		width: 100%;
	}
	a.default-button::before,
	button.default-button::before {
		content: '';
		position: absolute;
		background-color: var(--color-text-default);
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transform-origin: center center;
		transform: scale(0, 1);
		transition: all 0.35s ease-in-out 0s;
		opacity: 0;
		z-index: -1;
	}
	a.default-button:hover,
	button.default-button:hover {
		color: white;
	}
	a.default-button:hover::before,
	button.default-button:hover::before {
		transform: scale(1, 1);
		opacity: 1;
	}
	button.default-button.loading::after {
		content: '';
		/*font-weight: bold;*/
		font-size: 0.6em;
		color: #ffffff;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
		position: absolute;
		width: 100%;
		height: 100%;
		padding: 0;
		top: 0;
		left: 0;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: translate3d(0, 0, 0);
		background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.1)), color-stop(0.25, rgba(0, 0, 0, 0.05)), color-stop(0.5, rgba(0, 0, 0, 0.05)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.75, rgba(255, 255, 255, 0.1)), color-stop(0.75, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05)));
		background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
		background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
		background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
		background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
		background-size: 4em 4em;
		animation: processing 750ms linear infinite;
	}
	a.green-button {
		display: inline-block;
		padding: 1.25em 4em;
		padding-top: calc(1.25em + 2px);
		border-radius: 0.2em;
		border: none;
		border-bottom: 4px solid rgba(0, 0, 0, .1);
		text-transform: uppercase;
		color: white;
		text-decoration: none;
		text-align: center;
		font-weight: 600;
		letter-spacing: 1px;
		margin-top: 2em;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
		line-height: 1;
		transition: color 0.35s ease-in-out 0s;
		background: var(--color-button-green);
		cursor: pointer;
		font-size: 1.1em;
		outline: none;
	}
	a.green-button.fullwidth,
	button.default-button.fullwidth {
		width: 100%;
	}
	a.green-button::before {
		content: '';
		position: absolute;
		background-color: rgba(0, 0, 0, .05);
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transform-origin: center center;
		transform: scale(0, 1);
		transition: all 0.35s ease-in-out 0s;
		opacity: 0;
		z-index: 2;
	}
	a.green-button:hover {
		color: white;
	}
	a.green-button:hover::before {
		transform: scale(1, 1);
		opacity: 1;
	}
	a.green-button.loading::after {
		content: '';
		/*font-weight: bold;*/
		font-size: 0.6em;
		color: #ffffff;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
		position: absolute;
		width: 100%;
		height: 100%;
		padding: 0;
		top: 0;
		left: 0;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: translate3d(0, 0, 0);
		background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.1)), color-stop(0.25, rgba(0, 0, 0, 0.05)), color-stop(0.5, rgba(0, 0, 0, 0.05)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.75, rgba(255, 255, 255, 0.1)), color-stop(0.75, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05)));
		background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
		background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
		background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
		background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
		background-size: 4em 4em;
		animation: processing 750ms linear infinite;
	}
	.sales-button {
		display: inline-block;
		background-color: #0FA652;
		color: white;
		font-size: 1.1em;
		font-weight: 600;
		padding: 0.75em 2em;
		border-radius: 4px;
		text-decoration: none;
		white-space: nowrap;
		letter-spacing: 1px;
		margin-top: 0.5em;	
	}

/* @group Navigation */
	nav,
	nav .menu {

		flex: 0 0 auto;

		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		flex-wrap: nowrap;
		
		position: relative;
	}
	nav {
		min-height: 4em;	
	}
	nav .links {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		flex-wrap: nowrap;
		padding: 2em;
		flex: 0 0 40%;
	}
	nav .links a,
	nav .links > div {
		color: var(--color-text-default);
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 600;
		margin: 0 2em;
		white-space: nowrap;
		position: relative;
		display: inline-block;
	}
	nav .links a::before {
		content: '';
		position: absolute;
		bottom: -0.5em;
		left: 0;
		right: 0;
		border-bottom: 3px solid var(--color-header-bg);
		transform-origin: center center;
		transform: scale(0, 1);
		transition: all 0.25s ease-in-out 0s;
		opacity: 0;
	}
	nav .links a:hover::before {
		transform: scale(1, 1);
		opacity: 1;
	}
	nav .links .dropdown {
		cursor: pointer;
	}
	nav .links .dropdown span {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}
	nav .links .dropdown span::after {
		content: '\f0d7';
		font-family: FontAwesome;
		margin-left: 0.5em;
	}
	nav .links .dropdown::before {
		border-bottom: none;
	}
	nav .links .dropdown ul {
		position: absolute;
		bottom: 0;
		background-color: white;
		min-width: 16em;
		margin-left: -8em;
		left: 50%;
		z-index: 99;
		transform: translateY(100%);
		list-style-type: none;
		padding-top: 2em;
		display: none;
	}
	nav .links .dropdown ul li {
		text-align: left;
		padding: 2em 0;
		text-align: center;
	}
	nav .links .dropdown:hover ul {
		display: block;
	}
	nav .logo {
		width: 8em;
		height: 8em;
		margin: 0.5em;
		position: relative;
	}
	nav .logo svg {
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		fill: var(--color-text-default);
	}

/* @group Slideshow */
	section.slideshow {

		flex: 0 0 60vh;

		width: 100%;
		height: 60vh;
		position: relative;
		
		overflow: hidden;
		
		background-color: var(--color-slider-bg);
		
		/*border-top: 1px solid #cccccc;*/
		/*border-bottom: 1px solid #cccccc;*/
	}
	.slideshow img {
		display: block;
		height: 60vh;
		width: auto;
		min-width: calc(60vh * 2.5) !important;
	}
	.slideshow canvas {
		height: 60vh !important;
		object-fit: cover !important;
	}

/* @group Citation */
	section.citation {
		width: 100%;
		padding: 2em 0 1.0em 0;
		
		
		font-size: 2.4em;
		font-weight: 300;
		
		background: var(--color-citation-bg);
		color:  var(--color-citation-text);
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	section.citation > div {
		max-width: 90%;
		margin: 0 auto;
		line-height: 1.3;
		text-align: right;
		position: relative;
	}
	section.citation > div::before {
		content: '\f10d';
		font-family: FontAwesome;
		opacity: 0.15;
		position: absolute;
		left: 0;
		top: 0;
		transform: translate(-150%, -50%);
	}
	section.citation > div::after {
		content: '\f10e';
		font-family: FontAwesome;
		opacity: 0.15;
		position: absolute;
		right: 0;
		bottom: 0;
		transform: translate(150%, -50%);
	}
	section.citation small {
		align-self: flex-start;
		font-size: 0.4em;
		font-weight: 500;
		font-style: italic;
		display: block;
		margin-top: 1em;
	}

/* @group Promo */
	section.promo {
		width: 100%;
		padding: 1.5em 0 1.5em 0;
		
		
		font-size: 2.3em;
		font-weight: 300;
		
		background: var(--color-promo-bg);
		color:  var(--color-promo-text);
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	section.promo > div {
		/*width: 90%;*/
		max-width: 90%;
		margin: 0 auto;
		line-height: 1.3;
		text-align: center;
		position: relative;
		/*font-weight: 500;*/
	}

/* @group Types */
	section.types {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-start;
		flex-wrap: nowrap;
		
		padding: 6em 2em 6em 2em;
		
		background-color: var(--color-shaded-bg);
	}
	section.types > div {
		width: 30%;
		max-width: 450px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	section.types > div .illustration {
		/*border: 1px solid yellow;*/
		width: 50%;
		height: 0;
		padding-bottom: 50%;
		position: relative;
		margin-bottom: 2em;
		position: relative;
	}
	section.types > div .illustration svg {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-size: 100% 100%;
		background-color: var(--color-text-default);
		border: 3px solid var(--color-text-default);
		fill: var(--color-shaded-bg);	
	}
	section.types > div .illustration a {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		z-index: 99;
	}
	section.types > div h3 {
		font-size: 1.7em;
		font-weight: 400;
		text-align: center;
		line-height: 1.4;
	}
	section.types > div p {
		text-align: center;
		margin-top: 1em;
	}

/* @group Illustrated */
	section.content {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: nowrap;
		padding: 0;	
		background-color: var(--color-shaded-bg);
	}
	section.content.videos {
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding-left: 3em;
		padding-right: 3em;
	}

	section.content.videos .video {
		flex: 0 0 20%;
		width: 20%;
		position: relative;
		padding: 0 !important;
		margin: 2em;
		padding: 0 !important;
	}
	section.content.videos .video a {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		margin: 0 !important;
	}
	section.content.videos .video a img {
		width: 100% !important;
		height: 100% !important;
	}
	section.content.videos .video a::after {
		content: '';
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		background-image: url('/images/youtube_cover.png?2');
		background-size: 100% 100%;
	}
	section.content.videos .video a::before {
		content: attr(title);
		position: absolute;
		top:6px;
		right: 10px;
		bottom: 0;
		left: 10px;
		z-index: 11;
		color: white;
		text-align: left;
		font-size: 0.9em;
		font-weight: 500;
	}
	section.content > div {
		overflow: hidden;
	}
	section.content.odd > div,
	section.content.even > div {
		border: 1em solid white;
	}
	section.content.odd > div:first-of-type,
	section.content.even > div:last-of-type {
		flex: 0 0 50%;
	}
	section.content.odd > div:last-of-type,
	section.content.even > div:first-of-type {
		flex: 1 1 100% !important;
		padding: 2em 4em;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	section.content.videos2 > div {
		border: 0em solid white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	section.content.videos2 > div:first-of-type {
		flex: 0 0 50%;
	}
	section.content.videos2 > div:last-of-type {
		flex: 1 1 100% !important;
	}
	section.content.videos2 > div a {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0;
		position: relative;
		width: 80%;
	}
	section.content.videos2 > div a img {
		height: 100% !important;
		width: 100% !important;
	}

	section.content.videos2 .video a::after {
		content: '';
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		background-image: url('/images/youtube_cover.png?3');
		background-size: 100% 100%;
	}
	section.content.videos2 .video a::before {
		content: attr(title);
		position: absolute;
		top:6px;
		right: 10px;
		bottom: 0;
		left: 10px;
		z-index: 11;
		color: white;
		text-align: left;
		font-size: 1em;
		font-weight: 500;
	}

	section.content > div i {
		font-style: normal;
		font-weight: 500;
		margin-bottom: 1em;
		display: block;
	}
	section.content {
		background-size: 100% 100%;
		/* min-height: 50vh; */
		min-height: 450px;
	}
	.about section.content > div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		border: 1em solid white;
	}
	.about section.content > div b {
		text-align: center;
		margin: 0 auto;
	}
	section.content .illustration {
		position: relative;
		width: 100%;
		height: 100%;
		/*padding-bottom: calc(800 / 1200 * 100%);*/
		background-size: cover;
		background-position: center center;
		transform-origin: center center;
		transition: transform 1s ease-in-out 0s;
	}
	section.content .illustration.collaborate {
		background-image: url(/images/illustrations/collaborate-with-us.jpg?2);
	}
	section.content .illustration.why-us {
		background-image: url(/images/illustrations/why-us.jpg?2);
	}
	section.content b.title {
		text-transform: uppercase;
		font-weight: 500;
		font-size: 2em;
		display: block;
		margin-bottom: 1em;
		line-height: 1.4;
	}
	section.content:hover .illustration {
		transform: scale(1.1, 1.1);
	}

/* @group Footer */
	footer {
		width: 100%;
		padding: 3.5em;
		background-color: var(--color-footer-bg);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: nowrap;
		color: white;
	}
	footer a {
		color: white;
	}
	footer > div {
		flex: 0 0 40%;
		font-weight: 500;
	}
	footer > div:first-of-type {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		text-align: left;
	}
	footer > div:last-of-type {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		text-align: right;
	}
	footer > div.logo {
		flex: 0 0 10em;
	}
	footer .logo {
		width: 12em;
		height: 12em;
		margin: 1em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 0.85em;
		white-space: nowrap;
		text-align: center;
		position: relative;
	}
	footer .logo svg {
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		fill: white;	
	}
	footer .organization-name {
		font-size: 1.4em;
		margin-bottom: 1em;
	}
	footer > div.links {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-start;
		flex-wrap: nowrap;
	}
	footer .links > div {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
		margin: 0 3em;
		line-height: 1.8;
	}
	footer .links > div:last-of-type {
		margin-right: 0;
	}
	footer .links > div .title {
		text-transform: uppercase;
		font-weight: 500;
		font-size: 1.2em;
		margin-bottom: 0.75em;
	}
	footer .links > div a {
		color: white;
		white-space: nowrap;
	}

/* @group Default Page Head */
	section.head {
		width: 100%;
		height: 60vh;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.head-inner {
	  position: relative;
	  display: flex;
	  align-items: center;
	  width: 100%;
	  /*max-width: 1060px;*/
	  height: 100%;
	  margin: 0 auto;
	  z-index: 5;
	  background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
	  background-size: 100% 100%;	  
	}
	.head-content {
	  padding: 0 1em;
	  width: 90%;
	  margin: 0 auto;
	}
	.head-content h1 {
	  font-weight: 400;
	  font-size: 6em;
	  line-height: 100px;
	  letter-spacing: -1px;
	  color: white;
	  margin: 1rem 0;
	  text-shadow: 0 1px 0px var(--color-text-default);
	}
	.head-content span {

		font-weight: 500;
		font-size: 1.8em;
		line-height: 1.4;
		color: white;
		text-shadow: 0 -1px 0px var(--color-text-default); 
	}

/* @group Default Page Content */
	section.default-content {
		width: 100%;
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	section.default-content > div {
		width: 100% !important;
		margin: 0;
		padding: 1em 2em;
		text-align: center;		
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	section.default-content > div.shaded {
		background-color: var(--color-shaded-bg);
		padding: 2em 2em;
		align-items: flex-start;
	}
	section.default-content > div.centered {
		width: 90%;
		max-width: 1280px;
	}
	section.default-content > div.centered.row {
		width: 90%;
		max-width: 1280px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		padding-bottom: 3em;
	}
	section.default-content > div:last-of-type {
		padding-bottom: 6em;
	}
	section.default-content h2 {
		font-weight: 500;
		font-size: 3em;
		margin-bottom: 0.5em;
		line-height: 1.4;
	}
	section.default-content h4 {
		font-weight: 500;
		font-size: 1.6em;
		margin-bottom: 0.5em;
	}
	section.default-content p {
		margin: 0 auto;
		width: 90%;
		max-width: 900px;
	}
	section.default-content > div > div {
		flex: 0 0 50%;
		will-change: transform;
	}
	section.default-content > div > div.auto {
		flex: 0 0 auto;
	}
	section.default-content > div > div img {
		max-width: 100%;
	}
	section.default-content > div > div ul {
		list-style-type: decimal;
		text-align: left;
		list-style-position: inside;
		line-height: 2;
	}
	section.default-content .details {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 1em;
	}
	section.default-content .details > div {
		margin: 0 auto;
		text-align: left;
	}
	section.default-content .details h3 {
		font-size: 2em;
		font-weight: 500;
		margin-bottom: 0.5em;
	}
	section.default-content .details-icon {
		display: block;
		width: 5em;
		height: 5em;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;
		margin-bottom: 1em;
	}
	section.default-content .details-icon.oil {
		background-image: url(/images/icons/icon-oil.png?2);
	}
	section.default-content .details-icon.laquer {
		background-image: url(/images/icons/icon-laquer.png?2);
	}
	section.default-content .centered-block {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: 2em 4em;
		max-width: 700px;	
	}
	section.default-content > div > div.fullwidth {
		flex: 0 0 100%;
		padding: 2em 0;
	}
	section.default-content .padded {
		padding: 3em 0;
	}
	section.default-content .three {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		flex-wrap: nowrap;
		padding-bottom: 5em;
	}
	section.default-content .three > div {
		flex: 0 0 30%;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	section.default-content .three > div .illustration {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 70%;
		height: 0;
		padding-bottom: calc(3/4*70%);
		margin-bottom: 4em;
	}
	section.default-content img {
		max-width: 100% !important;
		object-fit: cover;
	}
	section.default-content > div.centered.row .illustration {
		flex: 0 0 35%;
	}
	section.default-content .illustration svg {
		fill: white;
		background-color: var(--color-text-default);
		border: 4px solid  var(--color-text-default);
		width: 100%;
		height: 100%;
	}
	.about-icon {
		width: 150px;
		height: 150px;
		margin: 0 auto;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.content div.base{
		position: relative;
	}
	.show-details.abs{
		position: relative;
		z-index: 99999;
	}
	.content div.base a{
		display: inline-block;
		padding: 0.75em 2em;
		text-decoration: none;
		text-transform: uppercase;
		color: white;
		align-self: center;
		background-color: #515A62;
		margin-top: 2em;
		min-width: 15em;
	}
	.content div.base .hidable {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #EEEEF0;
		z-index: 999;
		display: flex;
		padding: 0 2em 4em 2em;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		visibility: hidden;
		opacity: 0;
		transition: all 1s;
	}
	.content div.base .hidable.displayed {
		opacity: 1;
		visibility: visible;
	}

/* @group Contacts */
	section.contacts {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		margin: 0 auto;
		width: 100%;
		max-width: 1024px;
		padding-bottom: 5em;
	}
	section.contacts > div {
		padding: 2em;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: 100%;
	}
	section.contacts > div:first-of-type {
		flex: 0 0 40%;
	}
	section.contacts > div:last-of-type {
		flex: 0 0 60%;
	}
	section.contacts > div > * {
		width: 100%;
		text-align: left;
	}
	section.contacts h3 {
		font-weight: 500;
		text-transform: uppercase;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		font-size: 1.4em;
		margin-bottom: 1em;
		margin-top: 1em;
	}
	section.contacts h3:first-of-type {
		margin-top: 0;
	}
	section.contacts h3::before {
		font-family: FontAwesome;
		margin-right: 0.1em;
		color: var(--color-dark-gray);
		font-weight: normal;
		font-size: 1.75em;
		text-align: center;
		width: 1em;
	}
	section.contacts h3.visit-us::before {
		content: '\f041';
	}
	section.contacts h3.contact-us::before {
		content: '\f10b';
	}
	section.contacts b {
		font-weight: 600;
		text-transform: uppercase;
		margin-left: 6em;
	}
	section.contacts > div > div {
		margin-left: 6em;
		line-height: 1.7;
	}
	section.contacts form {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	section.contacts form > * {
		width: 100%;
	}
	section.contacts form input {
		background: transparent;
		border: none;
		font-size: 1em;
		padding: 1em;
		border-bottom: 2px solid var(--color-dark-gray);
		margin-bottom: 2em;
		border-radius: 0;
	}
	section.contacts form textarea {
		background: transparent;
		font-size: 1em;
		padding: 1em;
		border: 2px solid var(--color-dark-gray);
		margin-top: 1em;
		height: 10em;
		border-radius: 0;
	}

/* @group Configurator */
	section.configurator {
		width: 100%;
	}

/* @group Decor */
	section.decor {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		flex-wrap: nowrap;
		padding: 4em;
		/* padding-top: 0; */
		max-width: 1280px;
		margin: 0 auto;
		
		flex: 1 1 auto;
	}
	section.decor > div:first-of-type {
		flex: 0 0 60%;
		padding: 0 2em;
	}
	section.decor > div:last-of-type {
		flex: 0 0 40%;
		padding: 0 2em;
	}
	section.decor .product {
		background-color: var(--color-shaded-bg);
		padding: 2em !important;
		margin-right: 2em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* height: 100%; */
	}
	section.decor .product > div:first-of-type{
		text-align: center;
		font-size: 1.6em;
		padding: 1em 0 2em 0;
		font-weight: 500;
	}
	section.decor .product .additional-photos {
		width: 100%;
		height: 8em;
		margin-top: 2em;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
	}
	section.decor .product .additional-photos > div {
		width: 25%;
		height: 0;
		padding-bottom: calc(3/4*25%);
		background-position: center center;
		background-size: cover;
		cursor: pointer;
		margin-right: 1em;
		position: relative;
	}
	section.decor .product .additional-photos > div:last-of-type{
		margin-right: 0;
	}
	section.decor .product .additional-photos > div.active::after {
		content: '';
		position: absolute;
		z-index: 99;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 3px solid #0FA652;
		box-sizing: border-box;
	}

	section.decor .product .img {
		width: 100%;
		height: 0;
		padding-bottom: calc(3/4*100%);
		background-size: cover;
		background-position: center;
	}
	section.decor  > div.params {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: 0;
		padding-top: 0;
		padding-left: 0;
	}
	section.decor .params > div {
		width: 100%;
	}
	section.decor table {
		width: 100%;
	}
	section.decor table tr td {
		padding: 0.33em 1em;
	}
	section.decor table tr:nth-of-type(odd) td {
		background-color: var(--color-shaded-bg);
	}
	section.decor table tr td:first-of-type {
		text-align: left;
	}
	section.decor table tr td:last-of-type {
		text-align: right;
	}
	section.decor .order {
		padding-bottom: 3em;
	}
	section.decor .order .book-comment {
		text-align: center;
		line-height: 1.2;
		margin-top: 0.75em;
	}
	section.decor .order .book-comment b {
		color: #0FA652;
		font-size: 1.2em;
	}
	section.decor .order .price {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		color: var(--color-configurator-dark);
		margin: 0.5em auto;
		margin-top: 0;
	}
	section.decor .order .price b {
		flex: 0 0 auto;
		font-size: 1.25em;
		line-height: 1;
	}
	section.decor .order .price > span {
		flex: 0 0 auto;
		font-size: 3em;
		line-height: 1.2;
		font-weight: 600;
		display: block;
		margin: 0.2em auto 0 auto;
		white-space: nowrap;
	}
	.price .is-sale {
		display: inline-block;
		/* margin: 0 0.33em !important; */
	}
	section.decor .order .price-total {
		font-weight: bold;
		white-space: nowrap;
		line-height: 1;
		text-align: center;
	}
	#price::after,
	#total-price::after {
		content: "\e900";
		font-family: rub;
		font-weight: normal;
		font-size: 0.75em;
		margin-left: 0.35em;
		vertical-align: 0.025em;
	}
	section.decor .param.area {
		position: relative;
		width: 100%;
		height: 4em;
		margin-top: 2.5em;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
	}
	section.decor .param #area {
		position: absolute;
		left: 5em;
		right: 0;
		margin: 0;
		top: 50%;	
		height: 4px;
		margin-top: -2px;
		background: var(--color-configurator-light);
		border-radius: 4px;
	}
	section.decor .param.area input {
		background: #ECECEC;
		border: none;
		font-size: 1.1em;
		padding: 0.5em;
		border-radius: 4px;
		text-align: center;
		border: 2px solid var(--color-dark-gray);
		width: 4em;
		margin: 0;
	}
	section.decor .param #area .ui-slider-range-min {
		height: 4px;
		width: 100%;
		position: absolute;
		background: var(--color-configurator-light);
		border: none;
		border-radius: 4px;
		outline: none;
	}
	section.decor .param #area .ui-slider-handle {
		width: 2em;
		height: 2em;
		max-width: 2em;
		display: block;
		border-radius: 50%;
		border: 1px solid var(--color-configurator-light);
		background: white;
		box-shadow: 0px 3px 0px rgba(0,0,0,0.1);
		position: absolute;
		margin-left: -1em;
		margin-top: -1em;
		top: 50%;
		cursor: pointer;
		outline: none;
	}
	section.decor .param #area .ui-slider-handle::before {
		content: attr(data-title);
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0.7em 0.5em 0.5em 0.5em;
		background-color: var(--color-configurator-light);
		color: white;
		font-weight: 700;
		border-radius: 5px;
		font-size: 1.25em;
		line-height: 1;
		white-space: nowrap;
		top: -12px;
		left: 50%;
		transform: translate(-50%, -100%);
	}
	section.decor .param #area .ui-slider-handle::after {
		content: '';
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 10px 0 10px;
		border-color: var(--color-configurator-light) transparent transparent transparent;
		position: absolute;
		top: -12px;
		left: 50%;
		margin-left: -10px;
	}
	.fancy-view {
		width: 90%;
		max-width: 800px;
		/*height: 90%;*/
		/*max-height: 800px;*/
		padding: 3em;
		border: 2px solid var(--color-dark-gray);
		border-radius: 0.25em;
		box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
	}

/* @group Dealers */
	section.dealers {
		width: 100%;
		height: 80vh;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}
	section.dealers > div {
		flex: 0 0 70%;
		height: 100%;
		height: 80vh;
	}
	section.dealers > div:first-of-type {
		flex: 0 0 30%;
	}
	section.dealers .scrollable {
		width: 100%;
		height: 80vh;
		overflow-y: scroll;
			border-top: 1px solid var(--color-section-separator);	
	}
	section.dealers .scrollable .dealer {
		padding: 1.5em 2em;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 0 auto;
		border-bottom: 1px solid var(--color-section-separator);
		
		width: 100%;
	}
	section.dealers .scrollable .dealer .name {
		font-weight: 600;
		font-size: 1.2em;
		text-transform: uppercase;
		text-align: left;
		
		margin-bottom: 0.5em;
		
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
	}
	section.dealers .scrollable .dealer .name::before {
		content: '\f041';
		font-family: FontAwesome;
		margin-right: 0.5em;
		color: inherit;
		font-weight: normal;
		font-size: 1.25em;
		text-align: center;	
	}
	#dealer-map {
		width: 100%;
		height: 100%;
	}

/* @group Portfolio */
	section.portfolio {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 2em;
		padding-bottom: 5em;
	}
	section.portfolio .preview {
		flex: 0 0 27%;
		width: 27%;
		height: 0;
		padding: 0;
		padding-bottom: 25%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		margin: 1em;
		border: 10px solid var(--color-shaded-bg);
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: background-size 1s ease-in-out 0s;
	}
	section.portfolio .preview:hover::after {
		content: attr(title);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: white;
		font-weight: 600;
		font-size: 1.2em;
		line-height: 1.5;
		padding: 2em;
		box-sizing: border-box;
		opacity: 1;
		z-index: 99;
	}
	.portfolio .fancybox-bg {
		background-color: #444444;
		opacity: 0.9 !important;
	}

/* @group Order UI */
	.order-ui h2 {
		display: block;
		width: 100%;
		margin: 0 auto 1em auto;
		padding-bottom: 1em;
		font-size: 2em;
		font-weight:  500;
		text-align: center;
		border-bottom: 1px solid var(--color-section-separator);
	}
	section.order {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		padding: 0;
		max-width: 1280px;
		margin: 0 auto;
		
		flex: 1 1 auto;
	}
	section.order > div:first-of-type {
		flex: 0 0 40%;
		padding: 0 2em 0 0;
	}
	section.order > div:last-of-type {
		flex: 0 0 60%;
		padding: 0 0 0 2em;
	}
	section.order .product img {
		width: 100%;
	}
	section.order  > div.params {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: 0;
		padding-top: 0;
		padding-left: 0;
	}
	section.order .params > div {
		width: 100%;
	}
	section.order .order {
		padding-bottom: 3em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	section.order .order > * {
		width: 100%;
	}
	section.order .order input {
		background: transparent;
		border: none;
		font-size: 1.1em;
		padding: 0.5em;
		border-bottom: 2px solid var(--color-dark-gray);
		margin: 1em auto;
		border-radius: 0;
	}
	section.order .order .book-comment {
		text-align: center;
		line-height: 1.2;
		margin-top: 0.75em;
	}
	section.order .order .price {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		color: var(--color-configurator-dark);
		margin: 0.5em auto;
		margin-top: 0;
	}
	section.order .order .price b {
		flex: 0 0 auto;
		font-size: 1.25em;
		line-height: 1;
	}
	section.order .order .meter-price {
		font-size: 1.75em !important;
	}
	section.order .order .price > span {
		flex: 0 0 auto;
		font-size: 3em;
		line-height: 1.2;
		font-weight: 600;
		display: block;
		margin: 0.2em auto 0 auto;
		white-space: nowrap;
	}
	section.order .order .price-total {
		font-weight: bold;
		white-space: nowrap;
		line-height: 1;
		text-align: center;
	}
	.result .book-comment b{
			color: #0D954A;
		}

/* @group Anumations */
	@keyframes processing {
	  0% { background-position: 0 0; }
	  100% { background-position: 4em 0; }
	}

/* @group Responsive Menu */
	nav .menu-icon {
		cursor: pointer;
		display: none;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		position: absolute;
		
		user-select: none;  
		height: 4em;
		width: 4em;
		
		top: 50%;
		right: 1em;
		transform: translate(0, -50%);	
	}
	nav .menu-icon .navicon {
		background: var(--color-text-default);
		display: block;
		height: 2px;
		position: relative;
		transition: background .2s ease-out;
		width: 2.2em;
	}
	nav .menu-icon .navicon:before,
	nav .menu-icon .navicon:after {
		background: var(--color-text-default);
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		transition: all .2s ease-out;
		width: 100%;
	}
	nav .menu-icon .navicon:before {
		top: 0.5em;
	}
	nav .menu-icon .navicon:after {
		top: -0.5em;
	}

	/* menu btn */

	nav .menu-btn {
		display: none;
	}
	nav .menu-btn:checked ~ .menu {
		transform: translateX(0);
	}
	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 Sales */

	section.sales {
		width: 100%;
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		
		background-color: var(--color-shaded-bg);
	}
	section.sales > div {
		width: 90%;
		margin: 0 auto;
		padding: 1em 2em;
		text-align: center;
		
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: flex-start;		
	}
	section.sales > div > * {
		width: 100%;
	}
	section.sales .product {
		flex: 0 0 20%;
		margin: 2%;	
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: 2em;
		height: auto;
		border: 1px solid #dddddd;
		position: relative;
		/*background-color: var(--color-lighter-gray-bg);*/
		/*border: 1px solid #A2B3BE;*/
		background-image: linear-gradient(to top, var(--color-lighter-gray-bg), white);
	}
	section.sales .product > * {
		width: 100%;
	}
	section.sales .product .product-discount {
		width: 30%;
		height: 0;
		padding-bottom: 30%;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		margin-bottom: 2em;
		position: absolute;
		top: 0;
		left: 100%;
		transform: translate(-60%, -40%);

		
	}
	section.sales .product .product-discount > div {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: white;	
		font-size: 1.5em;
		font-weight: bold;
		z-index: 10;
		transform-origin: center center;
		transform: rotateZ(-10deg);
		overflow: visible;
	}
	section.sales .product .product-discount svg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		max-width: 6em;
		max-height: 6em;
		fill: #E33C3F;
	}
	section.sales .product b {
		font-weight: 500;
		font-size: 1.5em;
		line-height: 1.4;
		margin-bottom: 0.75em;
		white-space: nowrap;
	}
	section.sales .product .you-save {
		font-weight: 600;
		color: #E33C3F;
	}
	section.sales .product .sales-image {
		width: 100%;
		height: 0;
		padding-bottom: calc(3/4*100%);
		background-size: cover;
		background-position: center center;
		margin-bottom: 1em;
	}
	section.sales .product strong {
		font-weight: 500;
		font-size: 1.75em;
		line-height: 1.4;
		margin-top: 0.75em;
		white-space: nowrap;
	}
	@media all and (max-width: 1500px) {
		section.sales > div {
			width: 100%;
			padding: 1em 2em;
		}
	}
	@media all and (max-width: 1400px) {
		section.sales .product {
			margin: 2% 1%;
			padding: 2em 1em;
		}
	}
	@media all and (max-width: 1200px) {
		section.sales .product {
			flex: 0 0 30%;
		}
	}
	@media all and (max-width: 760px) {
		section.sales .product {
			flex: 0 0 45%;
		}
	}
	@media all and (max-width: 512px) {
		section.sales .product {
			flex: 0 0 80%;
		}
		section.sales .product .product-discount {
			width: 60%;
			padding-bottom: 60%;
		}
	}

/* @group Info */
	.info {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 4em;
	}
	.info.nopadding {
		padding-top: 0em;
	}
	.info div{
		flex: 0 0 30%;
		padding: 2em;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		min-width: 300px;
	}
	.info div h3{
		font-size: 1.4em;
		margin-bottom: 0.5em;
	}
	.info div a{
		display: block;
		text-decoration: none;
		text-align: left;
		width: 100%;
		padding: 1em 3rem 1em 4rem;
		position: relative;
		background-color: #EEEEF0;
		margin: 0.5em 0;
		color: #333;
		font-size: 1em;
	}
	.info div a::after{
		content: '\f01a';
		font-family: FontAwesome;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 3rem;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		font-size: 2em;
		color: #515A62;
	}
	.info div a::before{
		content: 'PDF';
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(-15%, -50%);
		width: 3rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		font-size: 2em;
		color: #ffffff;
		background-color: #515A62;
		font-weight: bold;
		font-size: 0.75em;
		padding: 0.1em 0.5em;
	}
	@media all and (max-width: 1200px) {
		.info div{
			flex: 0 0 50%;
			margin: 2em 4em;
		}
	}

/* @group Media Queries */
	@media all and (max-height: 700px) {
		.result {		
			padding: 0 1em 1em 1em;
			min-height: 550px;
		}			
		.result .title {
			font-size: 1.2em;
			margin: 0.5em auto;
		}
		.result .image {
			flex: 0 0 0;
			width: 20em;
			height: 0;
			padding-bottom: calc(3/4*20em);
			margin-bottom: 0;
		}
		.result .image .content {
			width: 20em;
			height: 0;
			padding-bottom: calc(3/4*20em);
		}
		.result .book-comment {
			line-height: 1;
			font-size: 0.9em;
			margin-top: 1em;
		}
		.result .price {
			margin: 1em auto;
		}
		.result .price b {
			font-size: 1em;
			white-space: nowrap;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
		}
		.result .price b span{
			margin: 0 0.25em;
		}
		.result .price > span {
			flex: 0 0 auto;
			font-size: 2.5em;
			line-height: 1.2;
			font-weight: 700;
			display: block;
			margin: 0.2em auto 0 auto;
		}
	}
	@media all and (max-width: 1400px) {
		html, body {
			font-size: 12px;
		}
	}
	@media all and (max-width: 1200px) {
		html, body {
			font-size: 11px;
		}
		header {
			display: none;
		}
		body > nav {
			border-bottom: 1px solid var(--color-shaded-bg);
			z-index: 999999;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background-color: white;
		}
		body > nav .logo {
			order: -1;
			margin: 2em auto;
		}
		nav .menu {
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			
			position: fixed;
			height: calc(100vh - 4em);
			top: 4em;
			right: 0;
			left: auto;
			width: auto;
			min-width: 1px;
			z-index: 9999;
			background-color: white;
			transform: translateX(100%);
			padding: 0 2em 0 2em;
			border-left: 1px solid var(--color-shaded-bg);
			transition: transform 0.25s ease-in-out 0s;
			overflow-y:  auto;
		}
		nav .links {
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			padding: 0;
			margin: 0;
			flex: 0 0 auto;
		}
		nav .menu-icon {
			display: flex;
		}
		nav .links a {
			width: 100%;
			padding: 1.5em 2em;
			text-align: center;
			margin: 0;
		}
		nav .links span::after {
			content: '';
			margin: 0;
		}
		nav .links .dropdown span::after {
			content: '';
			margin: 0;
		}
		nav .links a:hover::before {
			transform: scale(0);
			opacity: 0;
		}
		nav .links .dropdown > span {
			display: none;
		}
		nav .links .dropdown {
			padding: 0;
			margin: 0;
		}
		nav .links .dropdown ul {
			position: relative;
			background: transparent;
			width: 100%;
			margin-left: 0;
			left: auto;
			right: auto;
			padding: 0;
			transform: translateY(0);
			list-style-type: none;
			padding-top: 0;
			display: block;
		}
		nav .links .dropdown ul li {
			text-align: center;
			padding: 0;
			margin: 0;
			width: 100%;
		}
		section.content.odd > div:last-of-type,
		section.content.even > div:first-of-type {
			padding: 2em 3em;
		}
		section.content {
			min-height: 35vh;
		}
		a.default-button,
		button.default-button {
			padding: 1.25em 2em;
		}
		footer .links > div {
			margin: 0 2em;
		}
		.fancybox-stage {
			margin-top: 4em !important;
		}
	}
	@media all and (max-width: 1024px) {
		html, body {
			font-size: 10px;
		}
	}	
	@media all and (max-width: 960px) {
		html, body {
			font-size: 11px;
		}
		.fancybox-thumbs {
		  top: auto;
		  width: auto;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  height: 95px;
		  padding: 10px 10px 5px 10px;
		  box-sizing: border-box;
		  background: rgba(0, 0, 0, 0.3);
		}
		.fancybox-toolbar{
			padding-top: 4.4em;
		}
		.fancybox-show-thumbs .fancybox-inner {
		  right: 0;
		  bottom: 95px;
		}
		.fancybox-caption__body{
			font-size: 0.8em;
			line-height: 1.2;
		}
		.fancybox-is-open .fancybox-bg {
		    opacity: 1;
		}
		section.decor {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			padding: 1em;

		}
		section.decor > div:first-of-type,
		section.decor > div:last-of-type {
			flex: 0 0 auto;
			padding: 1em;
			margin: 0;
			width: 100%;
		}
		section.decor .product > div:first-of-type{
			padding-top: 3em !important;
			line-height: 1.2;
		}

		section.head {
			height: 35vh;
			font-size: 0.9em;
		}
		.info.nopadding div{
			padding: 0 2em;
			
		}
		.info > div:first-of-type{
			margin-top: 0;
		}
		section.types {
			flex-direction: column;
			justify-content: space-around;
			align-items: center;	
			padding: 3em 2em 3em 2em;		
		}
		section.types > div {
			width: 90%;
			max-width: 400px;
			margin: 3em auto;
		}
		section.content {
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
		}
		section.content.videos,
		section.content.videos2 {
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap !important;
		}
		section.content.videos2.first{
			padding-top: 2em !important;
		}
		section.content.videos2.last{
			padding-bottom: 2em !important;
		}
		section.content > div:not(.video) {
			flex: 0 0 50% !important;
			border: none !important;
			align-items: center !important;
			text-align: center !important;
			/*padding: 8em 6em;*/
		}
		section.content > div.video{
			flex: 0 0 45% !important;
			padding: 0 !important;
			width: 90% !important;
			margin: 1em;
		}
		section.content .illustration {
			min-height: 50vh;
		}
		section.content.even > div:first-of-type {
			order: 2;
		}
		#slider-content {
		  font-size: 0.9em;
		  padding-right: 5em;
		}
		#slider-content h2 {
			font-weight: 500;
			font-size: 3.5em;
			line-height: 1.4;
		}
		section.content b.title {
			font-size: 1.7em;
		}
		#pagination {
			transform: translateY(-50%) scale(0.5);
			right: 1.5em;
		}
		footer {
			padding: 2em;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}
		footer > div {
			flex: 0 0 auto;
			margin: 2em auto;

		}
		footer > div {
			display: flex;
			flex-direction: column;
			justify-content: flex-start !important;
			align-items: center !important;
			text-align: center !important;
			padding: 0;
		}
		footer > div.links {
			display: none !important;
		}
		body > nav {
			font-size: 1.1rem;
		}
		h1.head-title {
			font-size: 3.5em;
			line-height: 1.4;
		}
		section.portfolio .preview {
			flex: 0 0 90%;
			width: 90%;
			padding-bottom: 80%;
		}
		section.portfolio .preview::after {
			content: attr(title);
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .25);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			color: white;
			font-weight: 600;
			font-size: 1.2em;
			line-height: 1.5;
			padding: 2em;
			box-sizing: border-box;
			opacity: 1;
			z-index: 99;
		}
		section.default-content {
		}
		section.default-content > div {
			flex: 0 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			max-width: 100%;
			max-height: 1000vh;
		}
		section.default-content > div > div.fullwidth {
			flex: 0 0 auto;
			padding: 2em 0;
		}
		section.default-content > div.shaded {
			flex: 1 0 auto;
		}
		section.default-content .centered-block {
			flex: 0 0 auto;
			padding: 2em 2em;
		}
		section.default-content .three {
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		section.default-content .three > div {
			flex: 0 0 auto;
			margin: 3em auto;
		}
		section.default-content .three > div:first-of-type {
			margin-top: 0;
		}
		section.default-content .three > div:last-of-type {
			margin-bottom: 0;
		}
		section.default-content ul {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
		}
		section.default-content .three > div .illustration {
			margin-bottom: 2em;
		}
		section.default-content .details > div {
			text-align: center;
			padding-top: 3em;
			padding-bottom: 3em;
		}
		section.default-content > div {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
		}
		section.default-content > div .illustration {
			/*width: 50vw !important;*/
		}
		
		section.default-content img {
			position: relative;
			display: block;
			max-width: 100% !important;
			max-height: 100% !important;
		}
		section.default-content > div > div {
			width: 100%;
			text-align: center;
		}
		
		section.default-content > div.centered.row {
			flex-direction: column;
			padding-bottom: 3em;
		}
		section.default-content > div.centered.row .illustration {
			max-width: 50vw;
			margin-bottom: 1em;
		}
		section.dealers {
			width: 100%;
			height: auto;
			min-height: 1em;
			flex-direction: column;

		}
		section.dealers .scrollable {
			flex: 0 0 auto;
			width: 100vw;
			margin: 0;
			height: auto;
			overflow-y: hidden;	
			order: 2;	
		}
		section.dealers > div:first-of-type{
			order: 2;
		}
		#dealer-map {
			flex: 0 0 auto;
			height: 100vw;
			width: 100vw;
			margin: 0;
			order: 1;
		}
		section.dealers > div {
			flex: 0 0 auto !important;
			height: auto !important;
		}
		section.contacts {
			display: flex;
			flex-direction: column;
					
		}
		section.contacts > div {
			flex: 0 0 100%;
			width: 100vw;
			text-align: center !important;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
		}
		section.contacts > div h3 {
			justify-content: center;
		}
		section.contacts > div > div {
			text-align: center;
			padding: 0;
			margin: 0 auto;
		}


		
		.result {

			width: 100%;
			height: auto;
			padding: 0.5em 0.75em;
			
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			
			position: fixed;
			left: 0;
			bottom: 0;
			top: auto;
					
			box-shadow: 0px 0 3em rgba(0, 0, 0, 0.25);
			
			/*height: 10em !important;*/
			min-height: 1px;
			max-height: 25vh !important;	
			overflow: hidden;
		}
		.result > b {
			display: none;
		}
		.result .title,
		.result .availability,
		.result .price b {
			display: none;
		}
		.result .image {
			flex: 0 0 8em;
			width: 8em;
			height: 8em;
			padding: 0;
			max-height: 8em !important;
		}
		.result .image .content {
			
			width: 100%;
			height: 0;
			padding-bottom: 100%;
			margin: 0;
		}
		.old-price{
			margin: 0 1em;
		}
		.old-price:empty{
			margin: 0;
			display: none;
		}
		.front-page-content .calculator-container .widget .params {
			padding-right: 0;
		}
		.segmented-control > label:after, 
		.segmented-control > label {
			white-space: normal;
			height: 100%;
		}
		
		.result .price {
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: flex-end;
			flex-wrap: nowrap;
		}
		.result .price b {
			font-size: 1em;
			line-height: 1;
		}
		.result .price > span {
			font-size: 1.8em;
			line-height: 1;
			margin: 0.2em auto 0 auto;
		}
		.result .price-total {
			font-weight: bold;
			white-space: nowrap;
			line-height: 1;
		}
		.result a.book {
			font-size: 1em;
			border-radius: 2px;
			/*padding-top: 3px;*/
			border-bottom: 3px solid rgba(0, 0, 0, .1);
			text-transform: uppercase;
			margin-top: 0.5em;
			/*height: 3em;*/
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.result .book-comment {
			line-height: 1;
			margin-top: 0.35em;
		}
		
		.result .subcontainer {
		
			padding-left: 1em;
		}
		#m2 {
			display: inline-block;
			margin-left: 0.35em;
		}
		#m2 sup {
			font-size: 0.5em;
		}
		
		.front-page-content .calculator-container {
			order: 1;
		}
		.front-page-content .navigation-container {
			order: 2;
			border-bottom: none;
			border-top: 1px solid var(--color-section-separator);
			padding-top: 2em;
			padding-bottom: 2em;
			font-size: 1.1em;
		}
		.front-page-content .calculator-container .widget .params .param-title {
			margin-top: 1em;
		}
		
		
		.calculator-container {
			padding: 0;
		}
		.calculator-container .widget {
			padding: 2em 0.25em;
					
		}
		.calculator-container .widget .params {
			padding-right: 0;
		}
		.calculator-container .widget .params .param .color-control {
		
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			
		}
		.calculator-container .widget .params .param .color-control label {
			flex: 0 0 calc(90% - 1vw);
			width: calc(90% - 1vw);
			height: 0;
			padding-bottom: calc(3/4*90% - 1vw);
			/* padding-bottom: calc(90% - 1vw); */
			margin: 1em 0;		
		}
		.calculator-container .widget .params .param .color-control label.disabled {
			display: none;	
		}
		.calculator-container .widget .params .param.area {
			margin-top: 5em;
			padding-left: 3em;
			
		}
		.calculator-container .widget .params .param #area {
			left: 3em;
			right: 3em;
		}
		section.order {
			flex-direction: column !important;
			padding: 0 !important;
		}
		.order-ui {
			width: 100%;
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
		
		section.order > div:first-of-type {
			flex: 0 0 auto;
			padding: 0 0 0 0;
			max-width: 40vw !important;
		}
		section.order > div:last-of-type {
			flex: 0 0 auto;
			padding: 0 0 0 0;
			margin: 0 !important;
		}
		.order-ui h2 {
			margin: 0 auto 0.5em auto;
			padding-bottom: 0.5em;
			font-size: 1.5em;
		}
	}