a#logo{
    position: absolute;
    z-index: 99999;
    padding: 10px 0 0 0;
    margin: 0 0 0 10%;
    left: 0;}

a#logo img{
	height: 60px;}

.header{
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	padding: 0 0 0 0;
	width: 100%;
	height: 100px;
	background-color: rgba(0,0,0,0.0);
	overflow: hidden;
	transition:	height 200ms ease-in-out,
				background-color 200ms ease-in-out;}

.header a#logo{
	float: left;
	top: 100px;
	opacity: 0.0;
	margin: 0 0 0 10%;
	padding: 0;
	transition:	opacity 300ms ease-in-out,
				top 200ms ease-in-out;}

.header a#logo img{
	height: 40px;
	padding: 10px 0 10px 0;}

.header ul{
	z-index: 21;
	margin-top: 0px;
	position: fixed;
	right: 10%;
	left: auto;
	top: 40px;
	transition:	right 150ms ease-in-out,
				top 150ms ease-in-out;}

.header ul a li{
	margin: 0;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
	transition: padding 100ms ease-in-out;}

.header ul a li:hover{
	text-decoration: underline;}

.header ul li{
	display: inline-block;
	padding: 0 0 0 20px;}

.hit{
	color: #f47920;}

.header p{
	display: none;}

/* =================================== SMALL HEADER =======================================*/

.header.small{
	height: 61px;
	transition:	height 200ms ease-in-out,
				background-color 300ms ease-in-out;
	background-color: rgba(0,0,0,0.8);}

.header.small ul{
	top: 20px;
	transition: right 150ms ease-in-out,
				top 150ms ease-in-out;}

.header.small ul a li{
	transition: color 200ms ease-in-out,
				padding 200ms ease-in-out,
				background-color 300ms ease-in-out;}

.header.small a#logo{
	opacity: 1;
	top: 0;
	transition:	opacity 200ms ease-in-out,
				top 200ms ease-in-out 200ms;}

/* =================================== Login =======================================*/

.login,
.login .escape{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;}

.login{
	display: none;}

.login .escape{
	z-index: 10001;}

.login a p,
.login input{
	margin: 1rem 1rem 0 1rem;
    font-size: 0.8rem;
    line-height: 1.2rem;}

.login a p{
	margin: 0 1rem 1rem 0;
	text-align: right;	
}

.login .login-form button{
	margin: 0 1rem 1rem 1rem;}

.login .login-form{
	z-index: 10002;
	position: fixed;
	display: flex;
    flex-direction: column;
	margin-top: 80px;
	right: 10%;
	width: 300px;
	background-color: #f0f0f0;
	border: 1px solid #c8c8c8;
	border-radius: 10px;
	transition: margin-top 300ms ease-in-out;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.5);}

.login .login-form form {
	display: inherit;
    flex-direction: inherit;
}

.login.small .login-form{
	margin-top: 60px;}

.login img{
	position: absolute;
	top: -9px;
	right: 30px;}

.login input{
   margin: 0 1rem;}

.login input:first-of-type{
	margin-top: 1rem;
}


/* =================================== @media 1366px =======================================*/

@media screen and (max-width: 1366px){
	.header ul{
		right: 5%;
		transition:	right 150ms ease-in-out,
					top 150ms ease-in-out;}
	a#logo,
	.header a#logo{
		margin: 0 0 0 5%;}

	.header ul li a{
		padding-bottom: 20px;}

	.login .login-form{
		right: 5%;}}

/* =================================== @media 1024px =======================================*/

@media screen and (max-width: 1050px){
	.header ul li{
		padding: 0 0 0 16px;
		transition:	padding 150ms ease-in-out;}

	.header a#logo img{
		height: 40px;}}

/* =================================== MOBILE VERSION =======================================*/

@media screen and (max-width: 800px){

a#logo{
	position: fixed;}

a#logo img{
	height: 40px;}

.header a#logo{
	display: none;}

.header{
	background-color: rgba(0,0,0,0.4);
	height: 60px;}

.header.open{
	height: auto;
	background-color: #404040;
	transition:	background-color 150ms ease-in-out,
				height 150ms ease-in-out;}

.header p{
	position: relative;
	color: white;
	display: block;
	float: right;
	right: 2rem;
	margin-top: 20px;}

.header ul{
	display: none;
	top: initial;
	margin: 1rem 0 0 0;
	opacity: 0.0;
	transition:	opacity 400ms ease-in-out 150ms,
				height 150ms ease-in-out;}

.header.open ul{
	display: block;
	opacity: 1.0;
	transition:	opacity 150ms ease-in-out 0;
	margin: 0;
	padding: 0;
	width: 100%;
	position: relative;
	clear: both;
	float: right;
	right: 0;}

.header ul a li:active{
	background-color: #f47920;}

.header.open ul a li span{
	padding-right: 2rem;}

.header.open .escape{
	background-color: rgba(0,0,0,0.5);
    position: absolute;
    width: 100vw;
    height: 100vh;}

.header.small ul{
	top: initial;}

.header ul li{
	margin: 0;
	line-height: 4rem;
	text-align: right;
	display: block;
    border-bottom: 1px solid #646464;}

.header ul li a{
	padding: 0 2rem 0 2rem;}

.login .login-form{
	right: 1rem;
	width: 90%;
	background-color: #f0f0f0;
	border: 1px solid #c8c8c8;
	border-radius: 10px;
	transition: margin-top 350ms ease-in-out 0;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.5);}

}

.login .captcha {
    position: relative;
    top: unset;
    right: unset;
    margin: 0 1rem 1rem 1rem;
}

.login .captcha.hide, .login .re-captcha.hide {
    display: none;
}

.login .captcha .show {
    display: block;
}

.login .input_captcha.hide {
    display: none;
}

.error-message {
    color: #f47920;
    margin: 0 1rem 1rem 1rem;
}

.login .re-captcha {
    height: 40px;
    background-color: #646464;
    margin: 0 1rem 1rem 1rem;
}

.branding .captcha {
    position: relative;
    top: unset;
    right: unset;
    margin: 0 1rem 1rem 1rem;
}
/* branding - whitelabel */
.branding .captcha.hide, .branding .re-captcha.hide {
    display: none;
}

.branding .captcha .show {
    display: block;
}

.branding .input_captcha.hide {
    display: none;
}

.branding .re-captcha {
    height: 40px;
    background-color: #646464;
    margin: 0 1rem 1rem 1rem;
    cursor: pointer;
}

.sdk .captcha {
    position: relative;
    top: unset;
    right: unset;
    margin: 0 1rem 1rem 1rem;
}
/* branding - whitelabel */
.sdk .captcha.hide, .sdk .re-captcha.hide {
    display: none;
}

.sdk .captcha .show {
    display: block;
}

.sdk .input_captcha.hide {
    display: none;
}

.sdk .re-captcha {
    height: 40px;
    background-color: #646464;
    margin: 0 1rem 1rem 1rem;
    cursor: pointer;
}

.sdk .captcha {
    position: relative;
    top: unset;
    right: unset;
    margin: 0 1rem 1rem 1rem;
}
/* branding - whitelabel */
.contact .captcha.hide, .contact .re-captcha.hide {
    display: none;
}

.contact .captcha .show {
    display: block;
}

.contact .input_captcha.hide {
    display: none;
}

.contact .re-captcha {
    height: 40px;
    background-color: #646464;
    margin: 0 1rem 1rem 1rem;
    cursor: pointer;
}