/* global settings */
* { font-family: "Lora", "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: inherit; font-size: inherit; color: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { font-weight: normal; font-size: 16px; color: black; height: 100%; min-height: 100%; margin: 0; padding: 0; }
select::-ms-expand { display: none; }
/* remove focus and active states (chrome, firefox) */
*:active, *:focus, a:active, a:focus, button:active, button:focus { outline: none; text-decoration: none; }
a { color: #40668b; text-decoration: none; }
a:hover { color: #40668b; text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* generic layout */
.content { width: 100%; min-height: 100%; position: relative; background: url(../img/hand.png) no-repeat right 5% center / 50%; background-attachment: fixed; }
.bgfix { display: none; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* header and navigation */
header { min-width: 600px; max-width: 720px; width: 100%; position: fixed; }
.fadeout-area { height: 60px; background-color: white; background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.9), rgba(255,255,255,0)); }

/* logo */
.logo-area { padding: 20px 60px 0 60px; background-color: white; }
.logo img { width: 50%; }

/* main navigation */
.nav-container { z-index: 10; position: fixed; right: 0; top: 0; bottom: 0; padding: 20px 20px 0 0; }
.nav-button { z-index: 11; display: block; background: url(../img/menu-x.svg) no-repeat; width: 29px; height: 29px; position: absolute; right: 20px; top: 20px; }
.nav-container.closed .nav-button { background-image: url(../img/menu.svg); }
.nav-button:hover { cursor: pointer; text-decoration: none; }
.main-nav { background-color: rgba(56, 65, 86, 0.9); position: absolute; top: 0; bottom: 0; right: 0; padding: 165px 85px 0 50px; transform: translateX(0); transition: transform 0.15s ease-out; }
.nav-container.closed .main-nav { transform: translateX(100%); transition: transform 0.15s ease-in; }
.main-nav a { color: white; text-decoration: none; font-size: 20px; text-transform: uppercase; font-weight: bold; margin-bottom: 40px; display: block; }
.main-nav ul { list-style: none; position: relative; padding: 0; margin: 0; }
.nav-logo-area { display: none; padding: 20px 60px 0 60px; position: fixed; left: 0; top: 0; z-index: 11; }
.nav-container.closed .nav-logo-area { display: none; }

/* dots */
.nav-dot-container { position: fixed; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 39px; }
.nav-dot { position: relative; display: block; width: 15px; height: 15px; border-radius: 7px; background-color: #bfd0da; margin: 7px 24px 14px 0; text-decoration: none; }
a:hover.nav-dot { cursor: pointer; text-decoration: none; }
.nav-dot-active { background-color: #846d65; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* default page */
.page { padding-top: 200px; }
.subpage { padding-bottom: 60px; }
article { min-width: 480px; max-width: 540px; margin: 0 60px 0 60px; }
article > h1 { font-weight: normal; font-style: normal; font-size: 14px; font-family: "Open Sans", "Helvetica Neue",Helvetica,Arial,sans-serif; color: white; background-color: #9d8d87; text-transform: uppercase; margin: 0 0 44px -37px; padding: 3px 0 3px 37px; max-width: 411px; border-radius: 8px; }
article section h1 { font-weight: normal; font-style: normal; font-size: 22px; color: #40668b; margin: 0 0 30px 0; line-height: 1.4; }
article section h2 { font-weight: bold; font-style: normal; font-size: 16px; color: black; margin: 0 0 30px 0; }
article p { line-height: 1.4em; margin-bottom: 30px; }
.subpage article { padding-top: 165px; }
ol { list-style-type: lower-alpha; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* contact form */
.contact .control-group { margin-top: 15px; }
.contact .control-group-inline { margin-top: 0px; }
.contact .control-group-inline > div { padding-left: 0; }
.contact .control-group-inline > div:last-child { padding-right: 0; }
.contact .radio-group { margin-bottom: 10px; padding-top: 5px; }
.contact .radio-group a { font-size: 14px; color: black; text-decoration: none; background: url(../img/Checkbox_02.svg) no-repeat 0px 1px; height: 20px; display: inline-block; margin: 0 0 0 3px; padding: 0 34px 0 23px; }
.contact .radio-group a.radio-active { background-image: url(../img/Checkbox_01.svg); }
.contact .radio-group a.radio-active:hover { background-image: url(../img/Checkbox_03.svg); color: black; text-decoration: none; }

.contact label { font-size: 14px; font-weight: normal; display: block; padding-left: 3px; }
.contact input, .contact textarea { font-size: 16px; border: none; border-radius: 6px; padding: 5px 15px 5px 15px; width: 100%; display: block; background-color: #eaeeef; border: 1px solid transparent; }
.contact textarea { resize: vertical; height: 130px; }

.contact .button-link { float: right; margin-top: 25px; border: none; font-size: 18px; width: 208px; height: 32px; background-color: #004587; color: white; text-decoration: none; text-align: center; border-radius: 6px; padding: 2px 0 2px 0; }
.contact .button-link:hover { text-decoration: none; background-color: #009fe3; }
.contact .button-link:disabled { background-color: #e5eaf3; }
.contact input.ng-invalid, .contact textarea.ng-invalid { border: 2px solid red; }
.contact input.ng-valid, .contact textarea.ng-valid, .contact input.ng-untouched, .contact textarea.ng-untouched { border: 2px solid transparent; }
.contact-sent { display: none; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* tablet and small screen optimizations */

/* tablet optimizations: both orientations */
@media only screen and (max-width: 1366px)
{
	.content { position: relative; background: none; }
	.bgfix { display: block; position: fixed; width: 100%; height: 100%; background: url(../img/hand.png) no-repeat right 5% center / 50%; z-index: -1; background-size: 50%; }
}

@media only screen and (max-width: 1024px)
{
	.bgfix { background-size: 35%; }
}

/* small screen (landscape) */
@media only screen and (max-width: 800px)
{
	.content { background: url(../img/hand.png) no-repeat; background-position: top 20vh center; background-size: auto 80vh; background-attachment: scroll; }
	.bgfix { display: none; }
	.page { padding-top: 100vh; }
	.logo img { width: 144px; }
	.subpage article { padding-top: 125px; }
}

/* tablet optimizations: portrait */
@media only screen and (max-width: 800px) and (orientation: portrait)
{
	.content { background-position: top 10vh center; background-size: 90% auto; }
	.page { padding-top: 90vh; }
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* phone and very small screen optimizations */

/* phone optimizations */
@media only screen and (max-width: 414px)
{
	.content { background-position: top 14vh center;}
	.page { padding-top: 75vh; }

	.nav-container { padding: 20px 20px 0 0; }
	.main-nav { width: 100vw; }
	.nav-logo-area { display: block; }
	.nav-logo-area img { width: 144px; }
	.nav-dot-container { width: 19px; }
	.nav-dot { width: 11px; height: 11px; border-radius: 5px; margin: 7px 4px 14px 0; }

	article { min-width: 0; max-width: none; width: auto; margin: 0 30px 0 30px; }
	article > h1 { max-width: 300px; margin: 0 0 44px -20px; padding: 3px 0 3px 20px; }

	article section h1 { fmargin: 0 0 30px 0; line-height: 1.4; }
	article section h2 { margin: 0 0 30px 0; }
	article p { line-height: 1.4em; margin-bottom: 30px; }

}

/* phone optimizations: landscape */
@media only screen and (max-width: 736px) and (orientation: landscape)
{
	.content { background-position: top 25vh center; background-size: auto 70vh; }
	.main-nav { padding-top: 105px; }
	.main-nav a { font-size: 20px; margin-bottom: 20px; }
	.nav-dot-container { width: 19px; }
	.nav-dot { width: 11px; height: 11px; border-radius: 5px; margin: 7px 4px 14px 0; }
}

/* phone optimizations: iphone4 and 5 */
@media only screen and (max-width: 320px)
{
	.content { background-position: top 20vh center; background-size: 80% auto; }
	.page { padding-top: 75vh; }
}

/* phone optimizations: iphone4 and 5 landscape */
@media only screen and (max-width: 568px) and (orientation: landscape)
{
	.logo img { width: 100px; }
	.fadeout-area { height: 40px; }
	.main-nav { padding-top: 85px; }
	.main-nav a { font-size: 18px; margin-bottom: 12px; }

	.subpage { padding-bottom: 40px; }
	.subpage article { padding-top: 105px; }
}

/* retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio:: 2), only screen and (min-devicepixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi)
{
}