html, body {
font-family: 'Lato', Arial, Helvetica, sans-serif;
font-size: 16px;
}

/*--- Typography --- */

@font-face {
font-family: 'Lato-Light';
src: url('../fonts/Lato-Light.eot');
src: url('../fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), 
url('../fonts/Lato-Light.woff') format('woff'), 
url('../fonts/Lato-Light.ttf')  format('truetype'),
url('../fonts/Lato-Light.svg#Lato-Light') format('svg');
}

@font-face{ 
font-family: 'latobold';
src: url('../fonts/Lato-Bold.eot');
src: url('../fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Lato-Bold.woff') format('woff'),
url('../fonts/Lato-Bold.ttf') format('truetype'),
url('../fonts/Lato-Bold.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
/* --- Entypo pictograms by Daniel Bruce — www.entypo.com--- */
font-family: 'entypo';
src: url('../fonts/entypo.eot');
src: url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
url('../fonts/entypo.woff') format('woff'),
url('../fonts/entypo.ttf') format('truetype'),
url('../fonts/entypo.svg#entypo') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
/* --- Entypo pictograms by Daniel Bruce — www.entypo.com--- */
font-family: 'entypo-social';
src: url('../fonts/entypo-social.eot');
src: url('../fonts/entypo-social.eot?#iefix') format('embedded-opentype'),
url('../fonts/entypo-social.woff') format('woff'),
url('../fonts/entypo-social.ttf') format('truetype'),
url('../fonts/entypo-social.svg#entypo-social') format('svg');
font-weight: normal;
font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
line-height: 1.2em;
font-style: normal;
font-weight: light;
font-weight: 300;
margin-bottom: 0.25em;
}

h1 {
font-size: 42px;
font-weight: bold;
}

h2 {
font-size: 26px;
}

h3 {
font-size: 26px;
}

h4 {
font-size: 18px;
}

ul, ol, p, table {
padding-bottom: 0.5em;
}

b, strong {
font-weight: bold;
}

.small {
font-size: 14px!important;
}

/*--- Grid --- */

.content-width {
margin: 0 auto;
width: 940px;
}

.col {
display: block;
float: left;
vertical-align:top;
margin: 0 1.25% 0 1.25%;
}

#content img,
.content-width,
.col {
background: rgba(0,0,0,0);
}

.col_1 {
width: 97.5%;
margin: 0 1.25% 1.25% 1.25%!important;
}

.col_2 {width: 47.5%;}
.col_3 {width: 30.8%;}
.col_4 {width: 22.5%;}

.col .col {
margin-left: 0;
margin-right: 2.5%;
}

.last {margin-right:0!important;}

/*--- General --- */

.clearfix {clear: both; float: none;}
.last:after, .clearfix:after {content: "";float: none;display: block;
clear: both;visibility: hidden;line-height: 0;height: 0;}

.form_line.absatz,
.absatz {margin-bottom: 20px;}

/*--- Basic Structure --- */

html, body {
background: #eee;
}

#header,
#stage,
#main-content,
#footer {
display: block;
position: relative;
}

/* --- Header --- */

#header {
position: fixed;
top: 0;
z-index: 900;

display: block;
margin: 0;
padding: 0;

background: #000;

width: 100%;
height: 60px;
overflow: hidden;

-webkit-box-shadow: 	0 3px 10px rgba(0,0,0, .5);
-moz-box-shadow: 	0 3px 10px rgba(0,0,0, .5);
box-shadow:				0 3px 10px rgba(0,0,0, .5);
}

#logo {display: block;width: 136px;height: 60px;line-height: 50px;}
#logo img {display: inline;border: none;vertical-align: middle;height: 25px;width: 136px;}

.content-wrapper {
position: relative;
margin-top: 60px;
}

#main-content {
padding-bottom: 20px;
}


/* --- Stage --- */

#stage {
border-bottom: 1px solid rgba(0,0,0,.2);
color: rgba(0,0,0,.75);
text-align: center;

position: relative;
overflow: hidden;
padding: 60px 0;
display: table;
width: 100%;
background-color: #FFF;
background-image: url('../img/bg.jpg');
background-attachment: auto;
background-position:  50% 0;
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

#stage_information {
padding: 0 90px;
position: relative;
z-index: 200;
}

#stage_information p {
font-size: 21px;
}

#stage_information p a {
color: inherit!important;
text-decoration: none;
font-weight: bold;
}

#stage_information p a:hover {
color: #000!important;
border-bottom: 0.1em solid #000;
}

.page_title {
padding-bottom: 0.15em;
}

.page_description {
padding-bottom: 0.25em;
}

.page_cta {
display: none;
}


#keyvisual_stage {
position: absolute;
z-index: 60;
top: 0;
right: 2.5%;

margin: 0; 
padding: 0;
border: none;

display: table-cell;
height: 100%;
width: auto;
/*
height: 397px;
width: 423px;
*/
}

#keyvisual_stage img {
display: block;
height: 100%;
width: auto;
}



/* --- Content Box --- */

.content-box {
position: relative;
z-index: 300;
margin: -40px 0 30px 0;
background: #FFF;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 	0 2px 6px 0 rgba(0,0,0,.25);
box-shadow: 0 2px 6px 0 rgba(0,0,0,.25);
}

.content-box-main,
.content-box-bottom {
padding: 40px 20px 20px 20px;
color: #777;
color: rgba(0,0,0,.53);
}

.content_text {
padding: 20px;
}

.content-box-main h4, h5 {
font-weight: bold;
font-size: 21px;
line-height: 1.3em;
padding-bottom: .35em;
}

.content-box-main h5 {
font-weight: 300;
font-weight: light;
}

.content-box-main p {
font-size: 18px;
}

.disclaimer p {
font-size: 1rem;
}

.content-box a,
.content-box p a {
color: #444;
text-decoration: underline;
}

.content-box a:hover,
.content-box p a:hover {
color: #000;
}

.content-box-bottom {
padding-top: 20px;
border-top: 1px solid rgba(0,0,0,0.07); 
background: rgba(0,0,0,0.05);
}

.content-box-bottom a {
display: block;
position: relative;
text-decoration: none!important;
}

.content-box-bottom a p {
display: inline;
}

.content-box-bottom a p strong {
border-bottom-width: 1px;
border-bottom-color: inherit;
border-bottom-style: solid;
}


#gplay_link img {display: none;}
#appstore_link img {display: none;}

#appstore_link img,
#gplay_link img {display: block; height: 40px;}

#appstore_link,
#gplay_link {
display: inline-block; 
margin: 0 10px 0 0;
height: 44px;
}

#appstore_link p, #gplay_link p  {display: none;}

/* --- Forms + Form Elements --- */

.semantic_line {
color: #777;
background: rgba(0,0,0,.05);
background: #f2f2f2;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,.15);
box-shadow: 0 1px 0 0 rgba(0,0,0,.15);

}



.form_wrapper {
margin-bottom: 20px;
}

.form_post {display: none;}

.semantic_line {
margin: 0 0 5px 0;
padding: 1em;
padding-bottom: 0.5em;
}

.form_line,
form .disclaimer {
margin: 0 0 10px 0;
position: relative;
}

label,
form .disclaimer {
line-height: auto;
color: #777;
}

label a,
form .disclaimer a {
text-decoration: underline!important; 
color: #555;
}

form .disclaimer a:hover, label a:hover {color: #333; text-decoration: underline!important;}
label.hidden {display: none;}


input {
position: relative;
}

input[type=text],
input[type=email],
input[type=password] {
width: 94%;
height: 40px;

margin: 0;
padding: 0 10px;

font-family: 'Lato', Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
line-height: 30px;

outline: none;

color: #999;
color: rgba(0,0,0,.4);

background: #FFF;
border: 1px solid rgba(0,0,0,.15);

-webkit-box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,.1);
box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,.1);
}

input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus {
color: #666;
color: rgba(0,0,0,.65);
}

input:hover::-webkit-input-placeholder {color: #666; color: rgba(0,0,0,.65);}
input:hover::-moz-placeholder {color: #666; color: rgba(0,0,0,.65);}
input:hover:-ms-input-placeholder {color: #666; color: rgba(0,0,0,.65);}
input:hover:-moz-placeholder {color: #666; color: rgba(0,0,0,.65);}

input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover {
background: #FFF;
border-color: rgba(0,0,0,.35);
}

input:focus::-webkit-input-placeholder {color: rgba(0,0,0,0)}
input:focus::-moz-placeholder {color: rgba(0,0,0,0)}
input:focus:-ms-input-placeholder {color: rgba(0,0,0,0)}
input:focus:-moz-placeholder {color: rgba(0,0,0,0)}



/*--- Input Error  --- */

.error,
.error label,
.error label a
{
color: #ba3a2f!important;
}

.error input[type=text],
.error input[type=email],
.error input[type=password] {
border-color: #ba3a2f;
background: #ffedeb;
-webkit-box-shadow: 	0 0 2px 1px rgba(219,68,55,.5);
box-shadow: 				0 0 2px 1px rgba(219,68,55,.5);
}

/*--- Icons --- */

.form_line.error label.hidden {display: block; height: 0; font-size: 0; }

.form_line.error label.hidden:after,
.form_line.success label.hidden:after {
content: '\2716';
font-family: 'entypo';
font-style: normal;
font-weight: normal!important;

text-align: center;
vertical-align: middle;

font-size: 46px;
line-height: 0.05em!important;
height:.5em;
width: .5em;

zoom: 1;
display: block;
margin: -0.275em 0.25em 0 0; 
padding: 0;
position: absolute;
top: 50%;
right: 0;
z-index: 60;
}

.form_line.success label.hidden:after {
content: '\2713'!important;
}


/*--- Input Success  --- */

.success,
.success label,
.success label a {
color: #348836;
}

.success input[type=text],
.success input[type=email],
.success input[type=password] {
color: #348836;
border-color: #348836;
background: #d0ffd1;
-webkit-box-shadow: 	none;
box-shadow: 				none;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus {
color: #999;

border-color: rgba(0,0,0,.5);

-webkit-box-shadow: 	0 0 2px 1px rgba(0,0,0,.15);
box-shadow: 				0 0 2px 1px rgba(0,0,0,.15);
}


.status_message {
	display: block;
	padding: 1em;
	font-size: 14px;
	line-height: auto;
	margin-bottom: 10px;
}

.error_message {
	color: #ba3a2f!important;
	border: 1px solid #ba3a2f;
	background: #ffedeb;
}

.success_message {
	color: #8ea489!important;
	border: 1px solid #d6e9c6;
	background: #dff0d8;
}


/* --- Input Submit --- */

input[type=submit] {
display: block; cursor: pointer;

font-family: 'Lato', Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
line-height: 30px;

margin: 0;padding: 0;
border: none; outline: none; -webkit-border-radius: 0!important; border-radius: 0!important;
text-shadow: none!important;
}


/* --- Buttons --- */
.btn {
display: block;
display: inline-block;
position: relative;

outline: none; cursor: pointer; overflow: hidden; border: none; text-decoration: none!important;
padding: 0;

margin: 0 0 0.85em 0;

background-color: #fdc516;
background-color: rgb(253,197,22);
border-bottom: 1px solid rgba(0,0,0,.25);
-webkit-box-shadow: 	0 2px 3px 0 rgba(0,0,0,0.15);
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.15);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

.btn:active{top: 1px;}

.btn span, 
.btn input[type=submit],
.btn input[type=button] {
display: block;
letter-spacing: auto; text-decoration: none; text-align: center; vertical-align: middle; text-shadow: none;margin: 0!important; border: none!important; outline: none;

background: rgba(0,0,0,0); background: transparent;

color: #000; color: rgba(0,0,0,.85);
line-height: 30px;
padding: 0.5em 1em;
font-weight: bold;
}

.btn input[type=submit],
.btn input[type=button] {
width: 100%;
}


/* --- Social Login--- */

#login_fb,
#login_google,
#login_db {
margin-bottom: 10px;
}

#login_fb span,
#login_google span,
#login_db span {
color: #FFF;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

#login_fb span:before,
#login_google span:before,
#login_db span:before {
content: ' ';
display: block;
text-align: center;
height: 46px;
width: 22px;
line-height: inherit;
position: absolute;
top: 0;
right: 1em;

background: transparent url('../img/icon_google.png') no-repeat right 50%;
background-size: 18px 18px!important;
}

#login_fb {background: #3b5998;}
/* #login_fb span:before {content: '\F30C'!important;} */
#login_fb span:before {background-image: url('../img/icon_facebook.png');}

#login_google {background: #db4437;}
/* #login_google span:before {content: '\F30F'!important;} */
#login_google span:before {background-image: url('../img/icon_google.png');}

#login_db {background: #007ee5;}
/* #login_db span:before {content: '\F330'!important;} */
#login_db span:before {background-image: url('../img/icon_dropbox.png');}


.btn_expanded,
.btn_expanded span,
.btn_expanded input[type=submit],
.btn_expanded input[type=button] {
display: block;
}

.btn:hover span,
.btn:hover input[type=submit],
.btn:hover input[type=button] {
background: rgba(0,0,0,0.2);
color: #000;
}

.btn:active span,
.btn input[type=submit]:focus,
.btn input[type=button]:focus {
background: rgba(0,0,0,0.35);
}






/* --- Content Switch --- 


.registry_completed #user_introduction,
.registry_completed #registryform,
.registry_completed .form_post
{display: none!important;}

.registry_completed #registry_completed-text 
{display: block!important;}


.forgotten_pw .login_social,
.forgotten_pw #login_form_content,
.forgotten_pw #user_introduction,
.forgotten_pw #registryform,
.forgotten_pw .form_post
{display: none!important;}

.forgotten_pw #forgotten_pw-text 
{display: block!important;}
*/



/* --- Tooltip --- */

.ui-tooltip {
position: absolute; 
z-index: 9999; 
width: auto;
color: #FFF;
}

body .ui-tooltip {border-width: 1px;}

.ui-tooltip, 
.arrow:after {
background: rgba(0,0,0,.85);
}

.ui-tooltip.error_post,
.error_post .arrow:after  {
background: #ba3a2f;
}

.ui-tooltip {
text-align: center;
font-size: 13px;
padding: 0.65em;
max-width: 210px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.arrow {width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px;}
.arrow.top {top: -16px; bottom: auto;}
.arrow.left {left: 20%;}
.arrow:after {content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.arrow.top:after {bottom: -20px; top: auto;}


/*--- Transitions --- */
.btn,
.btn span,
.btn input,
input[type=text],
input[type=email],
input[type=password],
#logo,
.ui-accordion-header,
#keyvisual_stage,
.content-box a
{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

/* --- Resposive --- */
@media only screen and (max-width: 1024px){
	.content-width {
	width: 90%!important;
	min-width: 280px;
	}
	#keyvisual_stage {
	margin-right: -10%;
	}
}

@media only screen and (max-width: 680px){
	#logo {
	margin: 0 auto;
	position: relative;
	left: -5px;
	}
	.col {
	float: none;
	width: 97.5%;
	text-align: center;
	}
	.page_description,
	#keyvisual_stage {display: none}
	.form_wrapper {
	text-align: left;
	}
	.page_cta {
	display: block;
	}
	.disclaimer {
	text-align: center;
	}
	#stage_information {
	padding: 0;
	}
	.content-box-bottom .col:after {
	content: '';
	display: block;

	background: rgba(0,0,0,.1);
	position: relative;
	margin: 0.45em auto 0.75em auto;

	width: 60%;
	height: 1px!important;
	overflow: hidden;
	border: none;
	}
	.content-box-bottom .col.last:after {display: none;}
}	

.ui-accordion-header {
cursor: pointer;
text-align: left;
}

#header .col {
position: relative;
}

#header a {
text-decoration: none;
font-size: 1em;
}

.language_switch {
display: block;
min-width: 130px;
height: auto;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}

.nav_right {
text-align: right;
float: right;
}

.language_switch a {
display: block;
color: #7f7f7f;
line-height: 1em;
padding: 0.65em 10px;
border-bottom: 1px solid rgba(255,255,255,.15);
position: relative;
}

.dropdown-menu a:active,
.language_switch:hover a.dropdown-toggle,
a.dropdown-toggle:hover,
.language_switch a:hover {
color: #FDC516;
background: #000;
}

.dropdown-menu a:after {content: ' ';opacity: 0;position: absolute;left: 10px;display: inline-block;width: 0;height: 0;margin-top: 4px; margin-left: 2px;vertical-align: middle;border-left: 4px solid;border-bottom: 4px solid transparent;border-top: 4px solid transparent;}

.dropdown-menu a:active {
padding-left: 22px;

-webkit-box-shadow: 0 0 5px 0 #FDC516;
box-shadow: 0 0 5px 0 #FDC516;
}

.dropdown-menu a:active:after {
opacity: 1;
}

a.dropdown-toggle {
background: none!important;
height: 60px;
line-height: 60px;
padding-top: 0;
padding-bottom: 0;
border-bottom: none;
}

.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px solid;border-right: 4px solid transparent;border-left: 4px solid transparent;}

.dropdown-menu {
text-align: left;
padding: 0;
background: #000;
background: rgba(0,0,0,.85);
-webkit-box-shadow: 0px 3px 5px 0 rgba(0,0,0,.25);
box-shadow: 0px 3px 5px 0 rgba(0,0,0,.25);
}

.dropdown-menu li {
margin: 0;
padding: 0;
}

/* --- Transition --- */
.dropdown,
.dropdown-menu a,
.dropdown-menu a:after,
a.dropdown-toggle,
.language_switch a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

/* --- Switch on / off --- */

.language_switch .dropdown-menu {
display: none;
}

.language_switch .dropdown.open .dropdown-menu {
display: block;
}

/* --- Adjustments for RTL languages --- */

.rtl {
	direction: rtl;
}

.rtl #logo {
	float: right;
}

.rtl .nav_right {
	float: left;
	position: static;
	text-align: left;
}

.rtl .language-list li {
	text-align: right;
}

/*
 * New social login according to Googles requirements
 */
.btn_social {
	display: block;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none !important;
	margin: 0 auto .5rem auto;
	padding: 11px 11px 11px 54px;
	position: relative!important;
	font-family: "Roboto",sans-serif!important;
	font-weight: 500;
	font-size: 14px;
	height: 42px;
	width: auto;
	overflow: hidden;
	border: none;
	outline: none;
	border-radius: 2px;
	box-shadow: 0 1px 0 0 rgba(0,0,0,.15);
	color: #FFF!important;
}

.btn_social img,
.btn_social i.fa {
	display: block;
	position: absolute!important;
	left: 1px;
	top: 1px;
	height: 40px;
	width: 40px;
	overflow: hidden;
	border-radius: 1px;
	font-size: 22px;
	line-height: 40px;
	text-align: center;
	background-color: #FFF;
}

.btn_google {
	background: #4285F4;
}

.btn_google img {
	background-image: url(../../gfx/btn_google_light_normal_ios.svg);
	background-size: 46px 46px;
	background-repeat: no-repeat;
	background-position: -3px -3px;
}

.btn_facebook {
	background: #3b5998;
}

.btn_facebook i:before {
	content: ' ';
	display: block;
	text-align: center;
	height: 46px;
	width: 22px;
	line-height: inherit;
	position: absolute;
	top: 0;
	left: 0.6em;
	background: transparent url('../img/icon_facebook.png') no-repeat right 50%;
	background-size: 18px 18px!important;
}