@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(./open-sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
	background-color: #000;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	height: 100%;
	hyphens: auto;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

a {
	color: #fff;
	text-decoration: none;
}

a.mail {
	display: inline-block;
	text-align: center;
}

div.services {
	text-align: center;
	text-transform: uppercase;
}

div.logo {
	display: inline-block;
	height: 100%;
	text-align: center;
	width: 100%;
}

img.logo {
	display: inline-block;
	margin: 0 5%;
	vertical-align: middle;
	width: 90%;
}

@media screen and (orientation:portrait) {
	.f8 {
		height: 55.3846vw;
		margin: -45.0vw 0 0 -27.6923vw;
		width: 55.3846vw;
	}

	.f5 {
		height: 34.6154vw;
		margin: 10.3846vw 0 0 -6.9230vw;
		width: 34.6154vw;
	}

	.f3 {
		height: 20.7692vw;
		margin: 24.2307vw 0 0 -27.6923vw;
		width: 20.7692vw;
	}

	.f2 {
		height: 13.8461vw;
		margin: 10.3846vw 0 0 -27.6923vw;
		width: 13.8461vw;
	}

	.f1 {
		height: 6.9230vw;
		margin: 10.3846vw 0 0 -13.8461vw;
		width: 6.9230vw;
	}

	.f0 {
		height: 6.9230vw;
		margin: 17.3076vw 0 0 -10.3846vw;
		width: 3.4615vw;
	}

	a.mail {
		font-size: 10vw;
		height: 20.7692vw;
		line-height: 20.7692vw;
		width: 20.7692vw;
	}

	div.services {
		font-size: 4vw;
		line-height: 11.5vw;
	}

	div.logo {
		line-height: 55.3846vw;
	}
}

@media screen and (orientation:landscape) {
	.f8 {
		height: 55.3846vh;
		margin: -27.6923vh 0 0 -45.0vh;
		width: 55.3846vh;
	}

	.f5 {
		height: 34.6154vh;
		margin: -27.6923vh 0 0 10.3846vh;
		width: 34.6154vh;
	}

	.f3 {
		height: 20.7692vh;
		margin: 6.9230vh 0 0 24.2307vh;
		width: 20.7692vh;
	}

	.f2 {
		height: 13.8461vh;
		margin: 13.8461vh 0 0 10.3846vh;
		width: 13.8461vh;
	}

	.f1 {
		height: 6.9230vh;
		margin: 6.9230vh 0 0 10.3846vh;
		width: 6.9230vh;
	}

	.f0 {
		height: 3.4615vh;
		margin: 6.9230vh 0 0 17.3076vh;
		width: 6.9230vh;
	}

	a.mail {
		font-size: 10vh;
		height: 20.7692vh;
		line-height: 20.7692vh;
		width: 20.7692vh;
	}

	div.services {
		font-size: 4vh;
		line-height: 11.5vh;
	}

	div.logo {
		line-height: 55.3846vh;
	}
}

.f0, .f1, .f2, .f3, .f5, .f8 {
	border: 1px solid #fff;
	box-shadow: inset 0 0 0 1px #fff;
	display: inline-block;
	left: 50%;
	position: absolute;
	top: 50%;
}

body.no-touch .f8 *,
body.no-touch .f5 *,
body.no-touch .f3 *,
body.no-touch .f2 *,
body.no-touch .f1 *,
body.no-touch .f2 * {
	visibility: hidden;
}

body.no-touch .f8:hover *,
body.no-touch .f5:hover *,
body.no-touch .f3:hover *,
body.no-touch .f2:hover *,
body.no-touch .f1:hover *,
body.no-touch .f2:hover * {
	visibility: visible;
}

div.text {
	margin: 0 auto;
	max-width: 1280px;
	padding: 15px;
	width: 90vw;
	min-height: calc(100% - 63px);
}

div.text h1 {
	margin: 0;
}

footer {
	padding: 5px;
	text-align: center;
}

footer.home {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
}