@font-face{font-family:'Ubuntu';src:url('Ubuntu-Regular.ttf')format('truetype');}
@font-face{font-family:'UbuntuL';src:url('Ubuntu-Light.ttf')format('truetype');}

body,html{
  margin:0;padding:0;  

    font-family:UbuntuL;
    color:#dddddd;

	
}
body{
		background-image:url("textil-bg.jpg");
	background-size:cover;
	background-position: center center;
	min-height:100vh;
}

.LogoFrame{
	padding-top: 140px;
	margin: 0 auto;
position: relative;
display: block;
text-align: center;
font-size: 100pt;
letter-spacing: 0.2em;
}
.LogoFrame img{
display: block;
margin: 0 auto;
	width:100px;
}
.InfoBox {
  position: relative;
  display: block;
  width: calc(100% - 20px);
  max-width: 630;
  margin: 0 auto;
  font-size: 14pt;
  text-align: center;
  padding: 10px;
    padding-top: 10px;
  padding-top: 100px;
}
textarea{
display:block;
	width:100%;
	min-height:90px;
}
input {
			font-size: 16px;
			padding: 10px 10px 10px 0px;
			-webkit-appearance: none;
			display: block;
			color: #636363;
			width: 100%;
			border: none;
			border-radius: 0;
			border-bottom: 1px solid #757575;
		}
		input:focus {
			outline: none;
		}
		label {
			font-size: 16px;
			font-weight: bold;
			position: absolute;
			pointer-events: none;
			left: 0px;
			top: 10px;
			transition: all 0.2s ease;
			color:#333333;
		}
		input:focus ~ label, input.used ~ label {
			top: -20px;
			transform: scale(.75);
			left: -12px;
			font-size: 18px;
			color:#dddddd;
		}
		textarea:focus ~ label, textarea.used ~ label {
			top: -20px;
			transform: scale(.75);
			left: -12px;
			font-size: 18px;
			color:#dddddd;
		}
		
		input:focus ~ .bar:before, input:focus ~ .bar:after {
			width: 50%;
		}
		.group {
			position: relative;
			margin: 20px 20px 40px;
		}
		.bar {
			position: relative;
			display: block;
			width: 100%;
		}
		.bar:before, .bar:after {
			content: '';
			width: 0;
			bottom: 1px;
			position: absolute;
			height: 1px;
			background: #35aa47;
			transition: all 0.2s ease;
		}
		.bar:before {
			left: 50%;
		}
		.bar:after {
			right: 50%;
		}
@media(max-width:900px){
	.LogoFrame{font-size:60pt;}
}
@media(max-width:700px){
	.LogoFrame{font-size:40pt;}
}