#cont{
	font-family: "FontN";
	color: #fff;
	
	width: 80%;
	margin: 0 10%;
	padding: 2vw 0;
	
	height: auto;
	background-color: #000;
	display: block;
}

#erro{
	width: 80%;
	display: none;
	padding: 2vw 0;
	padding-left: 20%;
	text-align: left;
	
	font-size: 1.25vw;
	background-color: #161616;
   
    -webkit-border-radius: 1vw;
    -moz-border-radius: 1vw;
    border-radius: 1vw;
    
	color: #0f0;
}

#erroHDL{
    color: #fff;
}

#formT{
	width: 40%;
	margin: 0 30%;	
    
}

#HdL{
	font-family: "FontB";
	font-size: 2vw;
	text-align: center;
	padding: 2vw 0;
	color: #0f0;
	
}

.left{
	width: 50%;
	text-align: right;
	vertical-align: top;
	font-size: 1.1vw;
	padding: 0 1vw;
}

.right{
	text-align: left;
	font-size: 1vw;
}


.inputs{
	height: 100%;
	width: 100%;
    
    padding-left: 1vw;
	font-family: inherit !important;
	font-size: inherit !important;
    color: #0f0;
    
    background-color: #161616;
    border: 0;
    text-decoration: none;
    
    webkit-border-radius: .5vw;
    -moz-border-radius: .5vw;
    border-radius: .5vw;
}

.inputs:focus{
    border: none;
    text-decoration: none;
    outline: none;
}

#spacer{
	height: 2vw;
}

#info{
    text-align: center;
    font-size: 1.5vw;
}

#data{
	padding: 1vw 0;
	padding-left: 15%;
	text-align: left;
	font-size: 1vw;

}

#block{
    display: none;
    width: 30%;
    margin: 0 30%;
    background-color: #141414;
    padding: 6vw 5%;
    text-align: center;
    
    -webkit-border-radius: 1vw;
    -moz-border-radius: 1vw;
    border-radius: 1vw;
}

#text{
    width: 100%;
    display: block;
    color: #fff;
    font-size: 1.5vw;
    margin-bottom: 2vw;
}

#text2{
    font-family: 'FontB' !important;
    width: 100%;
    display: block;
    font-size: 3vw;
    color: #00ff00;
}

@media only screen and (min-width: 1000px) and (max-width: 1500px) {
	#cont{
		width: 80%;
	}

	#erro{
		width: 80%;
		padding: 2vw 10%;

		font-size: 1.55vw;
	}

	#formT{
		width: 60%;
	}

	#HdL{
		font-size: 3vw;
	}

	.left{
		width: 30%;
		font-size: 1.5vw;
		padding: 0 1vw;
	}

	.right{
		font-size: 1.5vw;
	}
	
	#spacer{
		height: 5vw;
	}

	#data{
		padding: 1vw 0;
		font-size: 1vw;
	}
}

@media only screen and (min-width: 500px) and (max-width: 1000px) {
	#cont{
		width: 90%;
		padding-top: 20vw;
	}

	#erro{
		width: 80%;
		padding: 2vw 10%;

		font-size: 2.55vw;
	}

	#formT{
		width: 80%;
	}

	#HdL{
		font-size: 6vw;
	}

	.left{
		width: 40%;
		font-size: 3.5vw;
		padding: 0 1vw;
	}

	.right{
		font-size: 3.5vw;
	}
	
	#spacer{
		height: 10vw;
	}

	#data{
		padding: 1vw 0;
		font-size: 3vw;
	}
}

@media only screen and (max-width: 500px) {
		#cont{
		width: 90%;
		padding-top: 30vw;
	}

	#erro{
		width: 80%;
		padding: 2vw 10%;

		font-size: 3vw;
	}

	#formT{
		width: 100%;
	}

	#HdL{
		font-size: 6vw;
	}

	.left{
		width: 40%;
		font-size: 3.5vw;
		padding: 0 1vw;
	}

	.right{
		font-size: 3.5vw;
	}
	
	#spacer{
		height: 10vw;
	}

	#data{
		padding: 1vw 0;
		font-size: 3vw;
	}
}