/* Palette:
#000000 rgba(0,0,0,1.0)
#1E1E20 rgba(30,30,32,1.0)
#2A2C2B rgba(42,44,43,1.0)
#374140 rgba(55,65,64,1.0)
#D9CB9E rgba(217,203,158,1.0)
#DC3522 rgba(220,53,34,1.0)
#FFFFFF rgba(255,255,255,1.0)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button {
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
	margin: 0;
	border: 0;
	padding: 0;
	outline: 0;
	border-radius: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

div,
button,
header,
input {
	box-sizing: border-box;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: none;
}

a:hover {
	color: inherit;
}

a:visited {
	color: #000000;
}

input,
textarea,
select,
.input {
	font-family: 'Oxygen', sans-serif;
	border: 0.1rem solid #1e1e20;
	background-color: #ffffff;
}

input:focus,
textarea:focus,
select:focus,
.input:focus {
	outline: none;
	box-shadow: inset 0 0.2rem 0.4rem 0.1rem rgba(0, 0, 0, 0.25);
}

svg {
	shape-rendering: geometricPrecision;
	width: 100%;
	height: 100%;
	pointer-events: all;
}

html {
	font-size: 10px;
	height: 100%;
	font-family: 'Oxygen', sans-serif;
	color: #2a2c2b;
}

body {
	background: url('/css/img/bg.png');
	padding: 2rem 2%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: flex-start;
	align-items: center;
	font-size: 1.6rem;
	line-height: 1.5em;
}

section {
	box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 1);
	background: #d9cb9e;
	background-image: url('img/texture.png');
}

#container {
	max-width: 100rem;
	flex: 1 0 100%;
	z-index: 10;
	perspective: 200rem;
}

#view {
	z-index: 50;
	transform: translateZ(0px);
	display: flex;
	flex-flow: row wrap;
	flex: 1 0 100%;
	justify-content: center;
	align-items: center;
	align-content: flex-start;
	padding: 7rem 1rem 5%;
	margin: 0 2%;
	background: #1e1e20;
	border-radius: 0.5rem;
	box-shadow: 0 0.1rem 1rem #000;

	&.ng-leave,
	&.ng-enter {
		position: absolute;
		left: 0;
		right: 0;
	}

	&.ng-enter {
		animation: slidein 0.8s ease-out none;
		z-index: 60;
	}

	&.ng-leave {
		animation: slideout 0.3s linear none;
	}

	.mobile &.ng-enter,
	.mobile &.ng-leave {
		animation: none;
	}
}

#toaster {
	position: fixed;
	bottom: 5%;
	left: 0;
	right: 0;
	background-color: #1e1e20;
	text-align: center;
	padding: 2rem 5%;
	opacity: 0;
	font-size: 3rem;
	color: #ffffff;
	border-radius: 1rem;
	transition: all 0.1s ease-out;
	visibility: hidden;
	z-index: 200;
	max-width: 90rem;
	margin: 0 auto;

	&.show {
		visibility: visible;
		opacity: 0.95;
	}
}

#footer {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	flex-flow: row wrap;
	text-align: center;
	color: #d9cb9e;
	opacity: 0.75;
	margin: 1rem auto 3rem;
	text-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 1);
	font-size: 1.3rem;
	font-weight: bold;
	z-index: 1;

	> span {
		margin: 0 0.2rem;
	}
}

#svg-filters {
	width: 0;
	height: 0;
}

#nav-container {
	z-index: 100;
	max-width: 97rem;
	margin: 0 auto;
	top: 1.5rem;
	left: 0;
	right: 0;
	transform: translateZ(0px);
	position: fixed;
	perspective: 100rem;

	.mobile.landscape & {
		top: 0;
	}
}

#navigator {
	margin: 0;
	display: flex;
	visibility: hidden;
	opacity: 0;
	background: white;
	height: 0;
	flex-flow: row nowrap;
	padding: 0 2%;
	justify-content: space-between;
	align-content: flex-start;
	align-items: center;
	transition: all 0.2s ease-in-out;
}

#navigator.show {
	visibility: visible;
	transform: rotateX(-30deg) translate3d(0, 0.2rem, -1rem);
	height: 5rem;
	opacity: 1;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0) 30%,
		rgba(0, 0, 0, 0) 70%,
		rgba(0, 0, 0, 0.2) 100%
	);
}

#navigator.show:hover {
	transform: none;
	background: rgba(0, 0, 0, 0.8);
}

#navigator > a {
	text-transform: uppercase;
	color: #ddd;
	line-height: 5rem;
}

#navigator > a:hover {
	opacity: 1;
	color: #fff;
}

#navigator > a > span {
	font-size: 2.5rem;
	margin: 0 0.2rem;
}

#navigator > a:hover > span {
	text-shadow: 0 0 1rem #ffffff;
}

#header {
	background-color: #374140;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
	padding: 0 0.1%;
	height: 5rem;
	display: flex;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
	transition:
		background-color 0.2s ease-out,
		border 0.1s ease-in;
	border-bottom: 0.1rem solid #fff;
	border-top: 0.1rem solid #fff;

	#header-symbol {
		width: 3rem;
	}

	#header-symbol svg:hover path {
		filter: url('/#svg-filter-in-out-heavy');
	}

	.btn {
		width: 4rem;
		height: 100%;
		margin: 0 0.2rem;
		background-position: 0 0;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		transition: box-shadow 1s cubic-bezier(0.1, 5, 0.5, 0.9);
		position: relative;
	}

	.btn > .img {
		height: 100%;
		width: 100%;
	}

	.btn:hover {
		box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
	}

	.btn:active {
		box-shadow:
			0 0 0.1rem rgba(0, 0, 0, 0.5),
			inset 0 -0.1rem 5rem rgba(0, 0, 0, 0.5);
	}

	.btn svg:hover > polygon,
	.btn svg:hover > rect,
	.btn svg:hover > path {
		filter: url('/#svg-filter-in-out');
	}

	.tooltip {
		top: 5rem;
	}

	.btn:hover .tooltip {
		opacity: 1;
		margin-top: 1rem;
		visibility: visible;
	}

	.mobile.portrait #header-title {
		font-size: 1.2rem;
	}

	#header-locale-menu.mask {
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: 0;
		max-width: 100rem;
		width: 100%;
		height: 100%;
		z-index: 1000;
		transform: translateZ(0px);
	}

	#header-locale-menu .selector {
		position: absolute;
		right: 2%;
		top: 4rem;
		background: #ffffff;
		padding: 1rem 2rem;
		width: 20rem;
		box-shadow: 0 0 3rem rgba(0, 0, 0, 0.3);
		border-radius: 0.2rem;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
		align-content: space-between;
	}

	#header-locale-menu .locale {
		flex: 0 0 100%;
		margin: 1.5rem auto;
	}

	#header-locale-menu .locale > span {
		padding: 0.2rem 1rem;
		border-radius: 10rem;
	}

	#header-locale-menu .locale:hover > span {
		background: linear-gradient(#4e4e50, #1e1e20);
		color: #fff;
		border: 1px solid #111;
		box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.5);
		text-shadow: 0 0 0.2rem rgba(0, 0, 0, 1);
	}

	#header-locale-menu .locale:active > span,
	#header-locale-menu .locale.selected > span {
		background: linear-gradient(#1e1e20, #4e4e50);
		color: #fff;
		border: 1px solid #111;
		box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.5);
		text-shadow: 0 0 0.2rem rgba(0, 0, 0, 1);
	}
}

#header-container {
	display: flex;
	margin: 0 0.5rem;
	max-width: 100rem;
	width: 100%;
	height: 100%;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}

#header-container > div {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: left;
}

#header-title {
	flex: 1 0 1rem;
	font-size: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.5rem;
	padding: 0 2%;
}

#home {
	display: flex;
	padding: 1rem 1%;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: flex-start;
}

#home-symbol {
	flex: 1 0 30rem;
	height: 35rem;
	background: url('/css/img/symbol.svg') 0 0 / 100% 100% no-repeat;
	margin-bottom: 2rem;
}

#home-about {
	flex: 1 0 17rem;
	padding: 5rem 5%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: center;
	flex-flow: row wrap;

	> .title {
		flex: 1 0 100%;
		height: 5rem;
		margin-bottom: 2rem;
	}

	> .content > p {
		font-size: 1.7rem;
		margin-top: 2rem;
		font-family: 'Lora', serif;
	}
}

#home-links {
	flex: 1 0 60%;
	padding: 3rem;
	display: flex;
	flex-flow: row wrap;
	justify-content: left;
	align-items: center;
	align-content: flex-start;

	> a {
		color: #ffffff;
		text-shadow: 0 0 2px rgba(0, 0, 0, 1);
		text-transform: uppercase;
		flex: 1 0 auto;
		padding: 4rem 1rem;
		transition: all 0.1s ease;
		font-size: 1.5rem;
		z-index: 0;
	}

	> a::before {
		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 1);
		width: 2.5rem;
		height: 6rem;
		background: #374140;
		content: ' ';
		position: absolute;
		display: block;
		z-index: -1;
		margin: -2rem auto auto 2rem;
		transform: skew(-25deg);
		transition: all 0.1s ease-in;
	}

	> a:hover::before {
		box-shadow: 0 0 3rem rgba(0, 0, 0, 0.9);
		transform: skew(-25deg) scale(1.2, 1.2);
	}

	> a:hover {
		text-shadow: 0 0 0.1rem rgba(0, 0, 0, 1);
		color: #ffffff;
	}

	.action {
		flex: 1 0 100%;
		text-align: center;
	}
}

#home-links-contact {
	width: auto;
}

.mobile.portrait #home-links > a {
	font-size: 1.3rem;
}

#home-links #home-links-solutions:hover::before {
	background-color: #2dac32;
}

#home-links #home-links-expertise:hover::before {
	background-color: #355088;
}

#home-links #home-links-process:hover::before {
	background-color: #bc3a3a;
}

#message {
	padding: 5rem 5%;
	font-family: 'Oxygen', sans-serif;
}

#message-form {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	align-content: flex-start;
	font-size: 2rem;

	.input-box {
		padding: 1rem 1%;
		position: relative;
		flex: 1 0 auto;
		display: flex;
		justify-content: stretch;
	}

	.input-box > input {
		padding: 1.5rem;
		font-size: 1.5rem;
		flex: 1 0 auto;
	}

	.input-box > textarea {
		padding: 1.5rem;
		margin: 1rem auto;
		min-height: 15rem;
		font-size: 1.5rem;
	}

	.input-box.name {
		flex: 3 0 auto;
	}

	.input-box.email {
		flex: 2 0 auto;
	}

	.input-box.phone {
		flex: 1 0 auto;
	}

	#message-respondto {
		flex: 1 0 auto;
		margin: 1rem;
	}

	.input-box.content {
		flex: 1 0 85%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: stretch;
		align-content: stretch;
		align-items: flex-start;
	}

	#message-content {
		flex: 1 0 auto;
	}

	textarea + .tooltip {
		top: 15rem;
	}

	.tooltip {
		left: 3rem;
		top: 6.5rem;
		right: auto;
	}

	.tooltip > span {
		border: 0.5rem solid rgba(42, 44, 43, 1);
		padding: 0.2rem 1rem;
		font-size: 1.2rem;
	}

	.tooltip::before {
		top: -0.8rem;
		margin-left: -0.5rem;
		border-bottom: 1rem solid rgba(42, 44, 43, 1);
		border-left: 0.5rem solid transparent;
		border-right: 0.5rem solid transparent;
	}

	.submit {
		flex: 1 0 100%;
		display: flex;
		justify-content: center;
	}

	.submit > button {
		position: relative;
	}

	.submit > button > span {
		transition: all 0.1s linear;
	}

	#submit-throbber {
		display: none;
		position: absolute;
		top: 0.8rem;
		left: 50%;
		margin-left: -13px;
		width: 26px;
		height: 26px;
		animation: spin 0.5s linear infinite;
	}

	.submit.sending > button > span {
		opacity: 0;
	}

	.submit.sending #submit-throbber {
		display: block;
	}

	.status {
		transition: all 0.1s ease-in;
		opacity: 0;
		text-align: center;
	}

	.status.text {
		opacity: 1;
	}
}

#message-form.ng-submitted .ng-invalid + .tooltip,
#message-form .ng-invalid.ng-touched + .tooltip {
	opacity: 1;
	visibility: visible;
}

#message-form.ng-submitted .input-box > .ng-invalid,
#message-form .input-box > .ng-invalid.ng-touched {
	box-shadow: inset 0 0 0.4rem 0.2rem rgba(255, 0, 0, 0.5);
}

#solutions {
	font-family: 'Lora', serif;
	width: 100%;
	padding: 5rem 5%;

	> h1 {
		text-align: center;
		font-size: 7rem;
		margin: 4rem auto 8rem;
		line-height: 6rem;
		font-family: 'Oxygen', sans-serif;
		font-weight: bold;
	}

	> h2 {
		text-align: center;
		font-size: 2.4em;
		margin: 10rem auto 0rem;
		line-height: 4rem;
		font-family: 'Oxygen', sans-serif;
	}

	> p {
		margin: 1em auto;
		max-width: 56rem;
		font-size: 1.7rem;
	}

	> dl {
		margin: 1rem auto;
		max-width: 60rem;
	}

	> dl > dt {
		font-size: 1.5em;
		margin: 8rem auto 1rem;
		font-family: 'Oxygen', sans-serif;
		font-weight: bold;
		line-height: 1.2em;
	}

	> dl > dd:nth-of-type(2n) {
		margin-top: 4rem;
	}

	> dl > dd > h3 {
		font-size: 0.8em;
		font-family: 'Lucida Grande', 'Arial', sans-serif;
		text-transform: uppercase;
		line-height: normal;
		margin: 0 0 0.2rem -1rem;
	}

	> dl > dd > ul {
		list-style: square outside;
	}

	> dl > dd > ul > li {
		margin-left: 1rem;
	}

	> dl > dd > p:not(:first-of-type) {
		margin: 1.2rem auto;
	}

	.mobile.portrait & {
		> h1 {
			font-size: 6rem;
		}
	}
}

#expertise {
	width: 100%;
	padding: 5rem 5%;
	overflow: hidden;
}

#expertise #search-box {
	margin-bottom: 4rem;

	input {
		width: 100%;
		padding: 1rem;
		font-size: 2rem;
		background:
			url('/css/img/search.svg') 1rem 50% / 2rem 2rem no-repeat,
			#ffffff;
		padding-left: 4rem;
		border: 1px solid #1e1e20;

		.mobile & {
			font-size: 1.2rem;
		}
	}

	.disclaimer {
		text-align: right;
		color: #1e1e20;
		font-size: 1.1rem;
	}
}

#expertise #techs {
	display: grid;
	grid: auto / repeat(auto-fit, minmax(8rem, 1fr));
	gap: 8rem 7rem;
	align-content: flex-start;
	align-items: center;
	flex: 1 1 0;

	.tech {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		position: relative;

		img {
			width: 8rem;
			max-height: 8rem;
		}

		.label {
			margin-top: 1rem;
			font-size: 12px;
			text-align: center;
			font-family: monospace;
			color: rgba(55, 65, 64, 0.75);
			width: 100%;
			line-height: 1.2;
		}
	}

	.tech:hover .tooltip,
	.tech:focus .tooltip {
		opacity: 1;
		margin-top: 1rem;
		visibility: visible;
	}

	.mobile & {
		gap: 3rem 2rem;

		.tech img {
			width: 4rem;
			max-height: 4rem;
		}
	}
}

#process {
	width: 100%;
	padding: 5rem 5%;

	> div {
		max-width: 60rem;
		margin: 2rem auto;
		font-family: 'Lora', serif;
	}

	#disclaimer {
		font-family: 'Oxygen', sans-serif;
		text-align: center;
		font-size: 3rem;
		margin: 2rem auto;
		line-height: 3.8rem;
		font-weight: bold;
	}

	#stages {
		margin-top: 6rem;
		max-width: 50rem;
	}

	#stages > ol > li {
		font-size: 1.8rem;
		line-height: 2.1rem;
		list-style-type: decimal;
		margin-bottom: 1.5rem;

		.mobile & {
			margin-left: 3rem;
		}
	}
}

.page-home {
	#header {
		background-color: #374140;
		border-top-color: #344;
		border-bottom-color: #233;

		svg path,
		svg polygon,
		svg rect {
			fill: #ffffff !important;
		}
	}

	#header-title {
		color: #ffffff;
	}
}

.page-solutions {
	#header {
		background-color: #2dac32;
		border-top-color: #2a3;
		border-bottom-color: #292;

		svg path,
		svg polygon,
		svg rect {
			fill: #ffffff !important;
		}
	}

	#header-title {
		color: #ffffff;
	}
}

.page-expertise {
	#header {
		background-color: #355088;
		border-top-color: #358;
		border-bottom-color: #136;

		svg path,
		svg polygon,
		svg rect {
			fill: #ffffff !important;
		}
	}

	#header-title {
		color: #ffffff;
	}
}

.page-process {
	#header {
		background-color: #bc3a3a;
		border-top-color: #b33;
		border-bottom-color: #911;

		svg path,
		svg polygon,
		svg rect {
			fill: #ffffff !important;
		}
	}

	#header-title {
		color: #ffffff;
	}
}

.page-message {
	#header {
		background-color: #ec4532;
		border-top-color: #e43;
		border-bottom-color: #c21;

		svg path,
		svg polygon,
		svg rect {
			fill: #ffffff !important;
		}
	}

	#header-title {
		color: #ffffff;
	}
}

.switcher {
	display: flex;
	height: 5.1rem;
	font-size: 1.2rem;
	flex-flow: row nowrap;
	justify-content: stretch;
	align-items: stretch;
	align-content: flex-start;
	border: 0.1rem solid rgba(0, 0, 0, 1);
	box-shadow: inset 0 -0.1rem 0.1rem rgba(0, 0, 0, 0.2);
	background: linear-gradient(#ffffff, #fcfcfc);

	.option {
		flex: 1 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem;
		text-transform: uppercase;
		text-align: center;
		color: #4d4d4d;
		text-shadow: 0 0 0.1rem #ccc;

		&:first-child {
			border-radius: 0.1rem 0 0 0.1rem;
		}

		&:last-child {
			border-radius: 0 0.1rem 0.1rem 0;
		}

		&:not(:first-child) {
			border-left: 0.1rem solid #bbbbbb;
		}

		&:hover {
			box-shadow:
				0 0 1rem #303030,
				inset 0 -0.1rem 0.1rem #444444;
		}

		&:active {
			box-shadow: inset 0 0.1rem 2rem #a9a9a9;
		}

		&.selected {
			box-shadow: inset 0 0.1rem 1rem #909090;
		}
	}
}

.tooltip {
	display: flex;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	left: -30rem;
	right: -30rem;
	justify-content: center;
	align-items: flex-start;
	transition: margin 0.2s ease;
	margin-top: 0rem;
	top: 90%;
	z-index: 99;

	.mobile & {
		display: none;
	}

	> span {
		background: rgba(255, 255, 255, 0.9);
		border: 1.5rem solid rgba(42, 44, 43, 1);
		color: #2a2c2b;
		width: auto;
		padding: 2rem;
		border-radius: 0.5rem;
		z-index: 100;
	}

	&::before {
		border-bottom: 2rem solid rgba(42, 44, 43, 1);
		position: absolute;
		display: block;
		content: '';
		left: 50%;
		margin-left: -1rem;
		top: -2rem;
		z-index: 99;
		border-left: 1rem solid transparent;
		border-right: 1rem solid transparent;
	}
}

.mobile #message-form .tooltip {
	display: block;
}

.action-btn {
	background: #dc3522;
	color: #ffffff;
	text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 1);
	border: 0.1rem solid #d03020;
	flex: 0 0 auto;
	width: 15rem;
	padding: 1rem 2rem;
	margin: 2.5rem 1rem;
	text-transform: uppercase;
	text-align: center;
	border-radius: 0.2rem;
	transition: box-shadow 0.05s linear;
}

.action-btn:hover {
	background: linear-gradient(#ec4532, #dc3522);
	box-shadow: inset 0 0.2rem 0.4rem 0rem rgba(255, 255, 255, 0.1);
}

.action-btn:active {
	box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.5);
}

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes slidein {
	from {
		transform: translate3d(0, -150%, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes slideout {
	30% {
		transform: translate3d(0, 20rem, -100rem) rotateX(10deg);
		opacity: 1;
	}

	100% {
		transform: translate3d(0, -10rem, -200rem) rotateX(-80deg);
		opacity: 0;
	}
}