@charset "utf-8";
/* CSS Document */
body{
margin:0;
border:0;}
#corpo{
width:100%;}
.topo{
border-bottom:1px solid #ccc;
width:100%;
height:90px;}
.logo{
width:150px;
float:left;}
.rede-social{
width:20%;
float:right;
margin-top:2%;}
.icone{
margin-right:5%;}
img.icone{
width:30px;
height:30px;
float:left;}
.box{
float:left;
margin:0 auto;
margin-left:6%;}

/**********Formulário*************/
h2{
font:30px Arial, Helvetica, sans-serif;
text-align:center;}
#formulario{
margin-top:8%;
margin-bottom:10%;
float:left;}

input[type=text]{ 
display:block;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border:1px solid #ccc;
margin-bottom:5%;
width:350px;
padding-top:10px;
padding-bottom:10px;}

textarea{
border: 1px solid #ccc;
width:350px;
height:100px;
display:block;
margin-bottom:5%;}

input[type=text]:hover, textarea:hover{ 
border:1px solid #999999;}

input[type=submit]{
width:100px;
padding-bottom:5px;
padding-top:5px;
background:#00529c;
color:#ffffff;}
input[type=submit]:hover{
cursor:pointer;}

.rodape{
text-align:center;
background:#00529c;
color:#FFFFFF;
font:11px Arial, Helvetica, sans-serif;
width:100%;
padding:10px 0 10px 0;}

img.pedreiro{
margin-top:15%;
}

@media screen and (max-width: 500px) {
   .rede-social{
width:40%;
float:right;
margin-top:2%;}

.box{
width:100%;
margin:0 auto;
margin-left:6%;}

#formulario{
margin-top:8%;
margin-left:3%;
width:80%;}
}