html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block
}

header {
	margin-bottom: 1.5em;
}
ol,ul {
	list-style: none
}

blockquote,q {
	quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
	content: '';
	content: none
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

body {
	-webkit-text-size-adjust: none
}

mark {
	background-color: transparent;
	color: inherit
}

input::-moz-focus-inner {
	border: 0;
	padding: 0
}

input,select,textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none
}

@media screen and (max-width:480px) {
	html,body {
		min-width: 320px
	}
}

html {
	box-sizing: border-box
}

*,*:before,*:after {
	box-sizing: inherit
}

body.is-preload *,body.is-preload *:before,body.is-preload *:after {
	-moz-animation: none!important;
	-webkit-animation: none!important;
	-ms-animation: none!important;
	animation: none!important;
	-moz-transition: none!important;
	-webkit-transition: none!important;
	-ms-transition: none!important;
	transition: none!important
}

html {
	height: 100%
}

body {
	height: 100%;
	background-color: #6699cc;
	background-image: url("../img/bg.png"),-moz-linear-gradient(60deg,rgba(255,165,150,0.5) 5%,rgba(0,228,255,0.35));
	background-image: url("../img/bg.png"),-webkit-linear-gradient(60deg,rgba(255,165,150,0.5) 5%,rgba(0,228,255,0.35));
	background-image: url("../img/bg.png"),-ms-linear-gradient(60deg,rgba(255,165,150,0.5) 5%,rgba(0,228,255,0.35));
	background-image: url("../img/bg.png"),linear-gradient(60deg,rgba(255,165,150,0.5) 5%,rgba(0,228,255,0.35));
	background-repeat: repeat,no-repeat,no-repeat;
	background-size:cover;
	background-position: top left,center center,bottom center;
	background-attachment: fixed,fixed,fixed
}

body:after {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: inherit;
	opacity: 0;
	z-index: 1;
	background-color: #fff;
	background-image: url("../images/overlay.png"),-moz-linear-gradient(60deg,rgba(255,165,150,0.5) 5%,rgba(0,228,255,0.35));
	background-image: url("../images/overlay.png"),-webkit-linear-gradient(60deg,rgba(255,165,150,0.5) 5%,rgba(0,228,255,0.35));
	background-image: url("../images/overlay.png"),-ms-linear-gradient(60deg,rgba(255,165,150,0.5) 5%,rgba(0,228,255,0.35));
	background-image: url("../images/overlay.png"),linear-gradient(60deg,rgba(255,165,150,0.5) 5%,rgba(0,228,255,0.35));
	background-repeat: repeat,no-repeat;
	background-size:cover;
	background-position: top left,center center;
	-moz-transition: opacity 1.75s ease-out;
	-webkit-transition: opacity 1.75s ease-out;
	-ms-transition: opacity 1.75s ease-out;
	transition: opacity 1.75s ease-out
}

body.is-preload:after {
	opacity: 1
}

body,input,select,textarea {
	color: #414f57;
	font-family: "Source Sans Pro",Helvetica,sans-serif;
	font-size: 14pt;
	font-weight: 300;
	line-height: 2;
	letter-spacing: .1em;
}

@media screen and (max-width:1680px) {
	body,input,select,textarea {
		font-size: 11pt
	}
}

@media screen and (max-width:480px) {
	body,input,select,textarea {
		font-size: 10pt;
		line-height: 1.75
	}
}

a {
	-moz-transition: color .2s ease,border-color .2s ease;
	-webkit-transition: color .2s ease,border-color .2s ease;
	-ms-transition: color .2s ease,border-color .2s ease;
	transition: color .2s ease,border-color .2s ease;
	color: inherit;
	text-decoration: none
}

a:before {
	-moz-transition: color .2s ease,text-shadow .2s ease;
	-webkit-transition: color .2s ease,text-shadow .2s ease;
	-ms-transition: color .2s ease,text-shadow .2s ease;
	transition: color .2s ease,text-shadow .2s ease
}

a:hover {
	color: #ff7496
}

form {
	margin: 0 0 1.5em 0
}

form>:last-child {
	margin-bottom: 0
}

#nameinput{
	display: flex;
	float:left;
}

label {
	color: #313f47;
	display: block;
	font-size: .9em;
	margin: 0 0 .75em 0
}

select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg'width='40'height='40'preserveAspectRatio='none'viewBox='004040'%3E%3Cpathd='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z'fill='%23c8cccf'/%3E%3C/svg%3E");
	background-size: 1.25rem;
	background-repeat: no-repeat;
	background-position: calc(100% - 1rem) center;
	height: 2.75em;
	padding-right: 2.75em;
	text-overflow: ellipsis
}

select option {
	color: #313f47;
	background: #fff
}

select:focus::-ms-value {
	background-color: transparent
}

select::-ms-expand {
	display: none
}

@media screen and (max-width:480px) {
	ul.icons li a:before {
		font-size: 1.5rem
	}
}

.box {
    width: 350px;
    height: 350px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    background: rgba(50,50,50,0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

#title {
	font-weight: bold;
	font-size: 24px;
	text-align:center;
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
}

.box .fields {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.box .field label {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 5px;
}

.box .field input {
    letter-spacing: 1px;
    font-size: 14px;
    box-sizing: border-box;
    width: 250px;
    height: 35px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.2);
    outline: none;
    padding: 0 12px;
    color: rgba(255,255,255,0.9);
    transition: 0.2s;
}

.box .field input:focus {
    border: 1px solid rgba(255,255,255,0.8);
}
#btn-box {
    width: 250px;
    flex-direction: column;
    align-items: start;
}

#btn-box > a {
    outline: none;
    display: block;
    width: 250px;
    text-align: end;
    text-decoration: none;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
}

#btn-box > a:hover {
    color: rgba(255,255,255,1);
}

#btn-box > div {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#loginbutton {
    outline: none;
    margin-top: 10px;
    display: block;
    font-size: 14px;
    border-radius: 5px;
    transition: 0.2s;
}

#loginbutton:nth-of-type(1) {
    width: 120px;
    height: 35px;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(192, 119, 91, 0.7);
    background: rgba(192, 119, 91, 0.5);
}

#loginbutton:nth-of-type(2) {
    width: 120px;
    height: 35px;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(192, 119, 91, 0.7);
    background: rgba(192, 119, 91, 0.5);
}

#loginbutton:hover {
    border: 1px solid rgba(251, 128, 71, 0.7);
    background: rgba(251, 128, 71, 0.5);
}

@media screen and (max-width:480px) {
	#main {
		padding: 4em 2em 2.5em 2em;
		width: 100%
	}

	#main .avatar:before {
		left: -2em;
		width: calc(100% + 4em)
	}
}

body.is-preload #main {
	-moz-transform: rotateX(15deg);
	-webkit-transform: rotateX(15deg);
	-ms-transform: rotateX(15deg);
	transform: rotateX(15deg);
	opacity: 0
}

#footer {
	-moz-align-self: -moz-flex-end;
	-webkit-align-self: -webkit-flex-end;
	-ms-align-self: -ms-flex-end;
	align-self: flex-end;
	width: 100%;
	padding: 1.5em 0 0 0;
	color: rgba(255,255,255,0.75);
	cursor: default;
	text-align: center
}
#wrapper {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-perspective: 1000px;
	-webkit-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
	position: relative;
	min-height: 100%;
	padding: 1.5em;
	z-index: 2
}

#wrapper>* {
	z-index: 1
}

#wrapper:before {
	content: '';
	display: block
}

@media screen and (max-width:360px) {
	#wrapper {
		padding: .75em
	}
}

body.is-ie #wrapper {
	height: 100%
}

#forgetpwd, #client {
	display: ture
}