body{
width:90%;
margin:0 auto;
}

div#principal{
margin:0 auto;
width:60%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:10px;
}

div#principal #h2{
text-align:center;
margin: 10px auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 10px 10px 10px 5px black;
width:60%;
}

section#secao01{
margin:10px auto;
width:70%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 10px 10px 10px 5px black;
padding-bottom:10px;
}

section#secao01 h2{
text-align:center;
text-shadow: #C0C0C0 1px 1px 1px, #ccc -1px -1px 1px;
}

section#secao02{
margin:10px auto;
width:50%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 10px 10px 10px 5px black;
}

section#secao02 a p{
color:red;
text-align:center;
font-size:20px;
text-shadow: #C0C0C0 1px 1px 1px, #ccc -1px -1px 1px;
}

section#secao02 a{
color:red;
text-decoration:none;
}

section#secao01 p{
}

label{
margin-bottom: 0.2em;
    color: #000;
    display: block;
	text-shadow: #C0C0C0 1px 1px 1px, #ccc -1px -1px 1px;
	}
	
input{
border-radius:5px;
}

div#formulario{
margin: 0 auto;	
width:90%;
}

div.campo{
	float:left;
	margin: 5px;
	width:30%;
}

div#divResultado{
	width:0;
	height:0;
clear:both;	
margin:0 auto;
border-radius:5px;
background-color:#fff;
-webkit-transition: all 1500ms linear 250ms;
transition: all 1500ms linear 250ms;
}

p#resp{
font-size: 20px;
color:#fff;
text-align:center;
padding:5px;
}

button#btnEnviar{
border:1px solid #000;
margin: 5px;
}

button#btnLimpar{
border:1px solid #000;
margin: 5px;
}


@media only screen and (max-width: 1600px) {

div#principal{
width:70%;
}
}

@media only screen and (max-width: 1500px) {

section#secao01{
width:80%;
}
section#secao02{
width:70%;
}
}

@media only screen and (max-width: 1400px) {

div#principal{
width:75%;
}
}

@media only screen and (max-width: 1300px) {

div#principal{
width:80%;
}
}

@media only screen and (max-width: 1200px) {

div#principal{
width:85%;
}
}

@media only screen and (max-width: 1100px) {

div#principal{
width:90%;
}
section#secao02{
width:80%;
}
}

@media only screen and (max-width: 1000px) {

div#principal{
width:95%;
}
section#secao01{
width:85%;
}
}

@media only screen and (max-width: 900px) {

div#principal #h2{
width:70%;
}
section#secao01{
width:90%;
}
div#formulario{
width:95%;	
}
}

@media only screen and (max-width: 800px) {

div#principal #h2{
font-size: .9em;
}
input{
	width:90%;
}
p#resp{
	font-size:18px;
}
}

@media only screen and (max-width: 700px) {

div#principal #h2{
font-size: .8em;
}
input{
	width:80%;
}
p#resp{
	font-size:17px;
}
}

@media only screen and (max-width: 630px) {

div#principal #h2{
font-size: .7em;
}
input{
	width:65%;
}
p#resp{
	font-size:17px;
}
}

@media only screen and (max-width: 580px) {

div#principal #h2{
font-size: .6em;
}
p#resp{
	font-size:16px;
}
}