:root {
	--vvits-blue-grey: #C3D5E4;
	--vvits-light-grey: #9CAAB6;
	--vvits-grey: #828e98;
	--vvits-dark-grey: #40474c;
	--vvits-green: #var(--vvits-green);
	
	--vvits-border-left: 7vw;
	--vvits-border-right: 4vw;
}

@media screen {
	body {
		min-width: 480px;
		margin: 0;
		padding: 0;
		border: 0;
		background-color: #fff;
		overflow-x: hidden;
		color: var(--vvits-dark-grey);
		font-size: 10px;
		font-family: 'Roboto', sans-serif;
		.head {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 5px;
			background-color: var(--vvits-grey);
			z-index: 10;
		}
		.banner {
			min-width: 480px;
			display: flex;
			align-items: center;
			justify-content: end;
			user-select: none;
			overflow: hidden;
			.cover {
				position: absolute;
				min-width: 480px;
				width: 100%;
				opacity: 0.4;
				background-color: var(--vvits-grey);
				z-index: 10;			
			}
			.text {
				position: absolute;
				min-width: 480px;
				width: 100%;
				background-color: transparent;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-end;
				flex-wrap: wrap;
				overflow: hidden;
				z-index: 11;
				.header {
					color: #fff;
					width: 80%;
					padding-left: var(--vvits-border-left);
					padding-right: var(--vvits-border-right);			
					h1 {
						margin: 5px 0;
						font-weight: normal;
						}
					h2 {
						margin: 5px 0;
						font-weight: bold;
						}
					p {
					}
				}
			}
			.image {
				position: absolute;
				top: 0;
				right: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: 0;
			}
			.video {
				display: none;
			}
		}
		.mainmenu {
			position: fixed;
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
			flex-wrap: wrap;
			z-index: 99;
			.overlay {
				position: absolute;
				display: none;
			}
			.block {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: flex-end;
				padding: 0;
				color: #fff;
				background: var(--vvits-grey);
				background: linear-gradient(150deg, rgba(130, 142, 152, 1) 15%, rgba(156, 170, 182, 1) 25%, rgba(156, 170, 182, 1) 40%, rgba(130, 142, 152, 1) 70%, rgba(130, 142, 152, 1) 100%);
				opacity: 0.4;
				a {
					text-decoration: none;
					color: #fff;
				}
				&.home {
					background-image: url("/media/logo.png") !important; 
					background-repeat: no-repeat !important;
					background-position: center !important;
					background-size: contain !important;
					.link {
						display: none;
					}
				}
				&.active {
					background: var(--vvits-green);
					background: linear-gradient(150deg, rgba(0, 175, 140, 1) 15%, rgba(16, 191, 156, 1) 20%, rgba(32, 207, 172, 1) 40%, rgba(0, 175, 140, 1) 70%, rgba(0, 175, 140, 1) 100%);
					color: #fff;
					cursor: pointer;
					opacity: 0.6;
					&:hover {
						opacity: 0.9;
					}
				}
				&.selected {
					background: #var(--vvits-green);
					background: linear-gradient(150deg, rgba(0, 175, 140, 1) 15%, rgba(16, 191, 156, 1) 20%, rgba(32, 207, 172, 1) 40%, rgba(0, 175, 140, 1) 70%, rgba(0, 175, 140, 1) 100%);
					color: #fff;
					opacity: 1 !important;
				}
				&.hover {
					transition: all 0.3s ease-in-out;
					background: var(--vvits-grey);
					background: linear-gradient(150deg, rgba(130, 142, 152, 1) 15%, rgba(156, 170, 182, 1) 25%, rgba(156, 170, 182, 1) 40%, rgba(130, 142, 152, 1) 70%, rgba(130, 142, 152, 1) 100%);
					opacity: 1 !important;
					}
				.link {
					user-select: none;
					width: 100%;
					text-align: right;
				}
			}
			&.full {
				.overlay {
					display: none;
				}
			}
			&.mini {
				transition: all 0.8s ease;
				.block {
					&.selected {
					}
					.link {
						display: none;
					}
				}
			}
		}
		.content {
			position: relative;
			min-width: 480px;
			width: 100%;
			height: 100%;
			padding: 0;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-end;
			flex-wrap: wrap;
			color: var(--vvits-dark-grey);
			background-color: #fff;
			z-index: 2;
			.text {
				width: 60%;
				padding-left: var(--vvits-border-left);
				padding-right: var(--vvits-border-right);
				h1 {
					font-weight: 300;
				}
				h2 {
					color: var(--vvits-light-grey);
					font-weight: 300;
					letter-spacing: -1px;
					strong {
						font-weight: 600;
					}
				}
				h3 {
					color: var(--vvits-light-grey);
					font-weight: 300;
				}
				p {
					span {
						font-weight: 600;
					}
					a {
						color: var(--vvits-green);
						text-decoration: none;
					}
				}
				&:last-child {
					padding-bottom: 150px;
				}
			}
		}
		.footer {
			position: relative;
			height: 100px;
			width: 100%;
			color: #fff;
			background-color: var(--vvits-grey);
			border-top: 1px solid #fff;
			box-shadow: 0 0 10px var(--vvits-dark-grey);
			z-index: 100;
			.container {
				position: absolute;
				left: 
				height: 100px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item {
					margin: 5px;
					&.address {
					}
					&.geo {
						font-weight: 300;
					}
					&.cookies {
						text-align: right;
						font-weight: 300;
					}
					&.timestamp {
						font-weight: 300;
					}
				}
			}
		}
	}
}