@font-face {
    font-family: main;
    src: url(/static/OswaldRegular.ttf);
}

@font-face {
    font-family: mainbold;
    src: url(/static/OswaldBold.ttf);
}

@font-face {
    font-family: mainsemibold;
    src: url(/static/OswaldSemiBold.ttf);
}

html {
    -webkit-text-size-adjust: 100%;
    position: relative;
    height: 100%;
    width: 100%;
}

body {
	background-image: url(/static/bg2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px;
    margin: 0px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    /*font-family: Century Gothic, sans-serif;*/
    font-size: 1em;
    font-family: main;
    min-width: 400px;
    height: 100%;
}

.maincontent {
    height: 100%;
}

.loginmask {
	/*position: absolute;
	width: 100%;
	height: 50%;
	padding: 5px;
    -webkit-appearance: none;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    opacity: 1;
    -webkit-transition: margin 0.5s ease, opacity 0.5s ease;
	-moz-transition: margin 0.5s ease, opacity 0.5s ease;
	-ms-transition: margin 0.5s ease, opacity 0.5s ease;
	-o-transition: margin 0.5s ease, opacity 0.5s ease;
	transition: margin 0.5s ease, opacity 0.5s ease;
	width: 400px;
    background-color: #FFFFFF;
    border-radius: 5px;*/
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
}

.loginmaskheader {
    display: flex;
    flex: 1;
}

.loginmaskbody {
    display: flex;
    position: relative;
    flex: 2 0 400px;
    flex-shrink: 0;
}

.loginmaskbody > .spacer {
    position: relative;
    height: auto;
    max-height: 400px;
    overflow: hidden;
    flex: 3 1 750px;
}

.loginmaskbody > .content {
    position: relative;
    flex: 2 0 400px;
    position: relative;
    width: 400px;
    border-radius: ;
}

.loginmaskbody form {
    background-color: #FFFFFF;
    max-width: 400px;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.3);
    border-radius: 5px;
}

.loginmaskbody form > div{
    padding: 1em;
}

.loginmaskbody input[type=text], .loginmaskbody input[type=password] {
    border: 0;
    border-bottom: 1px solid #008080;
    width: 100%;
    font-size: 1.1em;
    box-sizing: border-box;
    margin-bottom: 1px;
    border-radius: 0;
}

.loginmaskbody input[type=text]:hover, .loginmaskbody input[type=password]:hover {

}

.loginmaskbody input[type=text]:focus, .loginmaskbody input[type=password]:focus {
    border-bottom: 2px solid #008080;
    outline: 0;
    margin-bottom: 0px;
}

.loginmaskbody button[type=submit] {
    transform: translate(-50%, 50%);
    position: relative;
    left: 50%;
    line-height: 2em;
    cursor: pointer;
    background-color: #008080;
    -webkit-appearance: none;
    border-radius: 5px;
    border: 0;
    color: #FFFFFF;
    font-size: 1.3em;
    font-family: mainsemibold;
    letter-spacing: 0.1em;
}

.loginmaskfooter {

}


.selecttype p {
	font-weight: lighter;
	font-size: 1em;
}

.selecttype h2 {
	font-weight: lighter;
	font-size: 1.2em;
	text-align: center;
	margin-bottom: 2em;
}

.title {
    margin: 0;
    padding: 0;
    color: #315b67;
}

.title.main {
    font-size: 2em;
}

.title.second {
    margin-top: 1em;
    font-size: 1.2em
}

.selecttype input[type=text], .selecttype input[type=password] {
	padding: 12px 0px 14px 0px;
    margin: 0px auto;
    width: 100%;
    max-width: 90%;
    border: 0;
    outline: 0;
    border-bottom: 1px solid #315b67;
    box-sizing: border-box;
    margin-top: 5px;
    margin-left: 5%;
    margin-right: 5%;
    font-family: main;
    font-size: 0.9em;
    resize: none;
    background: #fcfcfe;
    border-radius: 0px;
    box-shadow: inset 0 -5px 45px rgba(253,253,254,0.2), 0 1px  1px rgba(255,255,255,0.2);
    -webkit-transition: border-color 0.4s ease, box-shadow 0.4s ease;
	-moz-transition: border-color 0.4s ease, box-shadow 0.4s ease;
	-ms-transition: border-color 0.4s ease, box-shadow 0.4s ease;
	-o-transition: border-color 0.4s ease, box-shadow 0.4s ease;
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
	height: 3em;
    min-height: 3em;
    margin-bottom: 1px;
}

.selecttype input[type=text]:focus, .selecttype input[type=password]:focus {
    /*border-color: #274953;*/
    border-bottom: 2px solid #274953;
    margin-bottom: 0px;
}

.selecttype input[type=submit] {
	/*margin-top: 20px;
    background-size: 20px 20px;
    background-position: 5px 50%;
    background-repeat: no-repeat;
    font-family: main;
    padding-left: 35px;
    -webkit-box-shadow: 0px 0px 10px 3px rgb(70 70 70 / 50%);
    -moz-box-shadow: 0px 0px 10px 3px rgba(70,70,70,0.5);
    box-shadow: 0px 0px 10px 3px rgb(70 70 70 / 50%);
    border-radius: 5px;
    border: 2px solid #315b67;
    text-decoration: none;
    cursor: pointer;
    background-color: #315b67;
    color: #e8e8e8;
    height: 2.5em;
    font-size: 1em;
    left: 50%;
    position: relative;
    transform: translateX(-50%);*/
}

.selecttype input[type=submit]:focus {
 	-webkit-box-shadow: inset 0px 0px 10px 3px rgb(70 70 70 / 50%);
    -moz-box-shadow: inset 0px 0px 10px 3px rgba(70,70,70,0.5);
    box-shadow: inset 0px 0px 10px 3px rgb(70 70 70 / 50%);
    background-color: #274953;
}

.selecttype .login {
	background-image: url(/static/enter.png);
}

.selecttype .reset {
	background-image: url(/static/reset.png);
}

.selecttype button {
	/*margin-top: 40px;
    background-image: url(/static/lock.png);
    background-size: 15px 15px;
    background-position: 5px 50%;
    background-repeat: no-repeat;
    font-family: main;
    padding-left: 35px;
    -webkit-box-shadow: 0px 0px 10px 3px rgb(70 70 70 / 50%);
    -moz-box-shadow: 0px 0px 10px 3px rgba(70,70,70,0.5);
    box-shadow: 0px 0px 10px 3px rgb(70 70 70 / 50%);
    border-radius: 5px;
    border: 0px solid #307EBA;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    color: #000000;
    height: 1.5em;
    font-size: 0.9em;
    left: 50%;
    position: relative;
    transform: translateX(-50%);*/
}

.selecttype button:focus {
	border: 1px solid #307EBA;
}

.selecttype  label {
	margin-left: 5%;
	margin-right: 5%;
}

.loginerror, .logoutinfo {
	text-align: center;
	color: red;
}

@media screen and (min-height: 500px){
	.logoportal {
	    top: 5%;
	}
	.selecttype {

	}
}

@media screen and (min-height: 700px){
	.logoportal {
	    top: 10%;
	    background-size: 332px 50px;
	    height: 50px;
		width: 332px;
	}

	.selecttype {
		top: 50%;
	}

}