* {
	margin: 0;
	padding: 0;
	font-family: "Roboto";
}

body {
    background-image: url(../img/background.jpg);
    right: 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
	flex-flow: wrap;
}

input {
	display: block;
    width: 100%;
    border: none;
	border-bottom: 1px solid;
	outline: none;
	padding: .3rem;
}

.r-button {
	display: inline-block;
	border: none;
	border-radius: 2px;
	padding: .8em 1.8em;
	transition: background-color .2s ease;
	cursor: pointer;
	font-size: .8rem;
}

.r-box {
	width: 25rem;
	margin: 0px auto;
	border-radius: 5px;
	padding: 1.5em;
	background-color: white;
	overflow: auto;
	text-align: center;
}

.r-box > img {
	margin-bottom: 1rem;
    height: 4rem;
}

.r-box .r-button {
	float: right;
	margin-top: 1rem;
}

.z-3 {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.z-3 img.url-icon {
    width: 25rem;
}
.r-control {
	padding: 1rem 0;
	text-align: left;
	position: relative;
}

#username + label:before {
	content: '\f1bc';
	font-family: "icons";
	margin-right: .2rem;
}

#password + label:before {
	content: '\f173';
	font-family: "icons";
	margin-right: .2rem;
}

#alert-cookies {
    position: fixed;
    bottom: 0;
    background: rgba(0,0,0,.3);
    color: #fff;
    width: auto;
    transition: bottom .2s ease;
    z-index: 2000;
    padding: 1rem;
	display: flex;
	align-items: center;
	left: 0;
	right: 0;
}

#alert-cookies.hide {
    display: none;
}

#alert-cookies p {
	flex-grow: 1;
}

#alert-cookies .r-button {
	margin: .5rem;
}

#comboboxLang {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 120px;
}

#comboTrigger {
    cursor: pointer;
    align-items: center;
	display: none !important;
	background-color: #e4e4e4;
	padding: .2rem .4rem;
}

#comboTrigger:after {
	content: "\f142";
	font-family: "icons";
}

#comboTrigger > div {
	border-radius: 2px;
    border: none;
    align-items: center;
    padding: .25rem;
	display: flex;
	flex-grow: 1;
}

#comboTrigger img {
	max-width: 2rem;
    max-height: 2rem;
    width: 100%;
    height: auto;
    margin-right: .5rem;
    border-radius: 0;
    border: 0;
}

#comboList {
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    height: 0;
    margin-top: .1rem;
    opacity: 0;
    overflow: auto;
    position: absolute;
    z-index: -1;
    transition: opacity .15s, height .15s;
	z-index: 10000;
	width: 100%;
}

#comboboxLang.active #comboTrigger {
    background: #fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	transition: background-color .15s, box-shadow .15s;
}

#comboboxLang.active #comboList {
	opacity: 1;
	height: auto;
}

#comboList li {
    cursor: pointer;
    display: flex;
    padding: .4rem .6rem;
    position: relative;
    align-items: center;
}

#comboList li:hover {
	background-color: #f0f0f0;
}

#comboList li div {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

#comboList li img {
	max-width: 2rem;
    max-height: 2rem;
    width: 100%;
    height: auto;
    margin-right: .5rem;
    border-radius: 0;
    border: 0;
}

#comboList li.selected-item {
	display: none;
}

.eye-font-icon {
    position: absolute;
    transform: translateY(-100%);
    padding: .3rem;
    right: 0;
    cursor: pointer;
}

.eye-font-icon:before {
	content: '\f147';
	font-family: "icons";
}

.eye-font-icon.blind:before {
	content: "\f11c";
}

@font-face {
    font-family: 'Roboto';
    src: url('../font/roboto-regular.eot');
    src: local('Roboto-Regular'), url('../font/roboto-regular.eot?#iefix') format('embedded-opentype'), url('../font/roboto-regular.woff') format('woff'), url('../font/roboto-regular.ttf') format('truetype'), url('../font/roboto-regular.svg#RobotoRegular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "icons";
    src: url("../fonticons/icons.eot?86539410a9dc96456d95718ae8f04695");
    src: url("../fonticons/icons.eot?#iefix") format("embedded-opentype"), url("../fonticons/icons.woff2?86539410a9dc96456d95718ae8f04695") format("woff2"), url("../font/fonticons/icons.woff?86539410a9dc96456d95718ae8f04695") format("woff"), url("../fonticons/icons.ttf?86539410a9dc96456d95718ae8f04695") format("truetype"), url("../fonticons/icons.svg?86539410a9dc96456d95718ae8f04695#icons") format("svg");
    font-weight: normal;
    font-style: normal;
}

label {
    position: absolute;
	transform: translateY(-120%);
	transition: margin-top .2s ease, font-size .2s ease;
	margin-top: 0;
	font-size: .9rem;
	pointer-events: none;
}

input:focus + label,
input:valid + label {
	margin-top: -28px;
	font-size: .8rem;
}

/* LEGAL */
body#background-none {
    background-image: none;
    color: #3d3d3d;
    font-size: .8rem;
}

body#background-none * {
    box-sizing: border-box;
}

.legal {
    background: #fff;
    max-width: 80%;
    margin: 0 auto;
    margin-top: 1rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    height: auto;
    margin-bottom: 1rem;
    padding: 10%;
}

.legal ol {
    padding-left: 40px;
    margin: 1em 0;
    color: #5b5b5f;
}

.legal li + li {
    margin-top: 1em;
}

.login-incorrect {
    color: #E53935;
    margin-top: -.8rem;
    text-align: left;
    font-size: .8rem;
    position: absolute;
}

.r-footer {
    width: 100%;
    background-color: #BDBDBD;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.r-footer .r-image {
    padding: 0.4rem 1.4rem;
}

.r-footer .powered-font-icon:before {
    font-size: 0.65em;
}

.r-footer img {
    height: 10px;
}

.unauthorized-error {
    font-size: 1.5rem;
}

/*tablet*/
@media screen and (max-width: 768px) {
}
/*mobile*/
@media screen and (max-width: 480px) {
    .r-box,
    .z-3 img.url-icon {
        width: 85vw;
    }
    .r-footer{
        flex-direction:  column;
    }
}