@charset "UTF-8";
/*------------------------------------------------------------*\

	general rules

\*------------------------------------------------------------*/
html, body, * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
html, body {
	margin: 0;
	border: 0;
	min-height: 100vh;
	font-family: 'frygiaregular', sans-serif;
	color: #27303b;
	min-height: 100%;
}
a {
	text-decoration: none;
}
img {
	max-width: 100%;
}
.arrow {
	max-width: 2rem;
}
/*------------------------------------------------------------*\

	usefull classes

\*------------------------------------------------------------*/
.full-width {
	padding-left: 5vw;
	padding-right: 5vw;
}
.grid-width {
	padding-left: 5vw;
	padding-right: 5vw;
	max-width: 1200px;
}
.hide {
	visibility: hidden;
}
.center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.no-scroll {
	overflow: hidden;
}
/*------------------------------------------------------------*\

	header

\*------------------------------------------------------------*/
header {
	display: flex;
	flex-direction: column;
	flex-shrink: 0 !important;
	padding: 5vw 5vw 0 5vw;
}
header.home {
	min-height: 97vh;
	display: flex;
	flex-direction: column;
}
#language {
	display: flex;
	list-style-type: none;
	padding: 0;
	justify-content: space-between;
}
#language li a {
	text-transform: uppercase;
	display: flex;
	width: 3em;
	height: 3em;
	vertical-align: middle;
	text-align: center;
	justify-content: center;
	align-items: center;
	border-radius: 1.5em;
	color: #2a79ff;
	font-size: .8em;
	transition: all .3s ease-in-out;
	border: 1px solid transparent;
	border-color: #2a79ff;
}
#language li {
	padding-right: 0;
	margin-right: 16px
}
#language li a.active {
	border-color: #2a79ff;
	pointer-events: none;
	background: #2a79ff;
	color: #ffffff;
}
#language li a:not(.active):hover {
	border-color: #2a79ff;
	background: #2a79ff;
	color: #ffffff;
}
/*------------------------------------------------------------*\

	navigation

\*------------------------------------------------------------*/
nav em {
	font-family: 'blender_proheavy', sans-serif;
	margin-left: 1px;
}
nav {
	font-family: 'blender_probook', sans-serif;
	margin: 0;
	top: 0;
	width: 100%;
	letter-spacing: 1px;
	right: 0; 
	margin: 0 auto;
	display: flex;
}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	justify-content:flex-end;
}
nav ul li {
	display: flex;
	align-items: center;
	justify-content: center;
}
nav ul li:first-child {
	margin-right: auto;
}
nav ul li:not(:last-child) {
    margin-right: 1rem;
}
nav ul li a {
	display: inline-block;
	width: 100%;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #ffffff;
}
nav ul li.link a::after {
	content: '';
	display: block;
	position: relative;
	width: 0%;
	border-bottom: 1px solid;
	top: .5em;
	transition: width .3s ease-in-out;
	margin: 0 auto;
}
nav ul li.link a:hover::after {
	width: 100%;
}
nav ul #home a {
	text-align: left;
	border: none;
	padding: 0;
	color: #2a79ff;
    flex-direction: column;
    justify-content: space-between;
    display: inline;
}
nav #home {
	padding: 0;
	display: flex;
	align-items: center;
	margin-right: auto;
} 
nav #home .home {
	display: none;
}
nav #home img {
	width: 38px;
	margin-right: 10px;
}
nav #home .last {
	font-style: normal;
	font-weight: 900;
}
nav #home:hover .first {
	font-weight: 900;
}
nav #home:hover .last {
	font-weight: 400;
}
/* dark nav */
nav.dark {
	font-family: "blender_promedium";
}
nav.dark ul li a,
nav.dark ul #home a {
	color: #27303b;
}
nav.dark #language li a {
	color: #27303b;
	border-color: #27303b;	
}
nav.dark #language li a:not(.active):hover,
nav.dark #language li a.active {
	color: #ffffff;
	background: #27303b;
	border-color: #27303b;
}
nav.dark #mobile-nav-icon span {
	background: #27303b;
}
.mobile-size nav.dark.is-open ul li a {
	color: #ffffff;
}
nav.dark.is-open #mobile-nav-icon span {
	background: #ffffff;
}
/* mobile nav icon */
#mobile-nav-icon {
  width: 44px;
  height: 40px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  display: none;
}
#mobile-nav-icon span {
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: #ffffff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#mobile-nav-icon span:nth-child(1) {
  top: 4px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobile-nav-icon span:nth-child(2) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobile-nav-icon span:nth-child(3) {
  top: 35px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
nav.is-open #mobile-nav-icon span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 5px;
	left: 7px;
}
nav.is-open #mobile-nav-icon span:nth-child(2) {
	width: 0%;
	opacity: 0;
}
nav.is-open #mobile-nav-icon span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 33px;
	left: 6px;
}
/* mobile nav */
.mobile-size #home a {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.mobile-size #mobile-nav-icon {
	display: block;
}
.mobile-size nav.is-open {
	z-index: 999;
	padding: 5vw;
	position: fixed;
    background: #2a8dff;
	width: 100%;
	height: 100%;
}
.mobile-size nav.is-open #language {
	display: none;
}
.mobile-size nav.is-open ul li a {
	font-size: 36px;
	margin: 20px 0;
	width: initial;
}
.mobile-size nav.is-open #home a {
	color: #ffffff;
}
.mobile-size nav.is-open #home a .home {
	display: block;
}
.mobile-size nav.is-open #home a .first,
.mobile-size nav.is-open #home a .last {
	display: none;
} 
.mobile-size nav.is-open ul {
    justify-content: center;
    flex-direction: column;
}
.mobile-size .toggle-hide {
	display: none;
}
.mobile-size nav.is-open .toggle-hide {
	display: block;
}
.mobile-size nav.is-open ul li:not(:last-child) {
    margin-right: 1rem;
}

/*------------------------------------------------------------*\

	header teaser

\*------------------------------------------------------------*/
#intro {
	padding: 5vw 0;
}
/*------------------------------------------------------------*\

	main

\*------------------------------------------------------------*/
main {
	flex: 1 0 auto;
}
main em {
	font-family: 'frygiabold';
	font-style: normal;
}
/*------------------------------------------------------------*\

	headlines

\*------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: "blender_prothin";
	line-height: 1em;
}
h1 {
	font-size: 3rem
}
/*------------------------------------------------------------*\

	button style

\*------------------------------------------------------------*/
input,
label,
select,
button,
textarea {
	font-family: 'frygiaregular', sans-serif;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	line-height: normal;
	overflow: visible;
	padding: 0;
	-webkit-appearance: button;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
[role="button"] {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	white-space: pre;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
	border: 1px solid;
	height: 3em;
	line-height: 3;
	margin: 0.25rem 0 0.25rem 0;
	padding: 0 1.5em;
	min-width: 13rem;
	font-size: 1.2rem;
	text-align: center;
	font-family: 'frygialight';
	border-radius: 200px;
}

/* set button colors */
[role="button"], 
input[type="submit"], 
input[type="reset"], 
input[type="button"], 
button {
	color: #464251;
	background-color: none;
	border-bottom-color: #464251;
}
[role="button"]:hover, 
input[type="submit"]:hover, 
input[type="reset"]:hover, 
input[type="button"]:hover, 
button:hover {
	color: #F0F0F0;
	background-color: #464251;
	border-color: #464251;
}
[role="button"].bright, 
input[type="submit"].bright, 
input[type="reset"].bright, 
input[type="button"].bright, 
button.bright {
	color: #F0F0F0;
	background-color: none;
	border-bottom-color: #F0F0F0;
}
[role="button"].bright:hover, 
input[type="submit"].bright:hover, 
input[type="reset"].bright:hover, 
input[type="button"].bright:hover, 
button.bright:hover {
	color: #464251;
	background-color: #F0F0F0;
	border-color: #F0F0F0;
}

/* Hexagonal Button Style */
.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}
.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 300px;
  left: 0px;
  height: 34px;
}

.button:before {
  transform: perspective(15px) rotateX(3deg);
}
.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #e04e5e;
}
.button.border:before {
  border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}
.button.border:after {
  border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}

/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #e04e5e;
}
.button.border:hover {
  color: #fff;
  z-index: 2;
}





/*------------------------------------------------------------*\

	Footer

\*------------------------------------------------------------*/
footer {
	clear: both;
	color: #ffffff;
	text-align: center;
	background-color: #46ba79;
	background: linear-gradient(to right, #69e2f7, #328df4);
	font-size: 19px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	font-family: 'frygialight';
}
footer section {
	padding: 5vw;
}
footer section > * {
	max-width: 500px;
	margin: 0 auto;
}
footer #contact {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1.8em;
}
footer #contact p {
	letter-spacing: -.3px;
}
footer #contact a {
	display: inline-block;
	margin-top: 15px;
	color: #ffffff;
	font-family: 'frygiabook';
	letter-spacing: 0;
}
footer #contact a::after {
	content: '';
	display: block;
	width: 0%;
	border-bottom: 1px solid #ffffff;
	opacity: 0;
	transition: all .3s ease-in-out;
}
footer #contact a:hover::after {
	width: 100%;
	opacity: 1;
}
footer #contact h1 {
/* 	font-family: 'Frank Ruhl Libre', serif; */
	font-weight: 500;
	font-size: 68px;
	margin-bottom: 25px;
    line-height: 1.5em;
    letter-spacing: -.01em;
}
footer #contact img {
	width: 1.25em;
    vertical-align: middle;
    margin-right: 7px;
    position: relative;
    top: -1px;
}
footer #legal {
	background: #243953;
	padding-top: 32px;
	padding-bottom: 32px;
	color: #6bb2ff;
	font-size: 16px;
}
footer #legal a {
	color: #6bb2ff;
	transition: all .3s ease-in-out;
}
footer #legal a:hover {
	color: #ffffff;
}
footer #closing {
	background-color: #0f273e;
	font-size: 15px;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #3b668f;
}
footer #closing img {
	width: 16px;
}