*{padding: 0;margin: 0;} 

body{font-family: Arial, sans-serif; margin: 20px; background-color:#f0f0f0}

h1, h2 {text-align: center;}

a{text-decoration: none;}

p{font-size: 2em;}

hr{margin: 1em 0em }f

.titulo{padding-left: 10px;}

.legenda {text-align: center; font-size: 1.5em; margin-top: 1%}

header h1, h2{line-height: 1.5em}

.logo {width: 15%; border: none; margin: 0% 42.5% 0% 42.5%}

img {width:100%; border: solid 1px black}

.imagens {width: 100%; height: 29em}  

.passo1 {float: left; width: 30%; margin: 1% 2% 1% 3%;}

.passo2 {float: left; width: 30%; margin: 1% 2% 1% 0%;}

.passo3{float: left; width: 30%; margin: 1% 3% 1% 0%;}

figcaption {margin-top: 1%; font-size: 1.1em}
 
main {width: 100%; text-align: left}

article {width: 100%; line-height: 4em}

footer {text-align: center; font-style: italic; font-family: times new roman, sans-serif}


.buttonblue{
background:    #66adee;
background:    linear-gradient(#66adee, #124b7e);
border-radius: 1000px;
padding:       12px 25px;
color:         #ffffff;
display:       inline-block;
font:          normal 0.6em "Open Sans", sans-serif;
text-align:    center;
margin: 1%;
}

.buttonblue:hover{
color: white;    
background:linear-gradient(#124b7e, #66adee);
text-decoration: none;}

.buttongreen{
background:    #6aa84f;
background:    linear-gradient(#6aa84f, #38761d);
border-radius: 1000px;
padding:       12px 25px;
color:         #ffffff;
display:       inline-block;
font:          normal 0.6em "Open Sans", sans-serif;
text-align:    center;
margin: 1%;
}

.buttongreen:hover{
color: white;    
background:linear-gradient(#38761d, #6aa84f);
text-decoration: none;}

.buttonyellow {
background:    #f1c232;
background:    linear-gradient(#f1c232, #7f6000);
border-radius: 1000px;
padding:       12px 25px;
color:         #ffffff;
display:       inline-block;
font:          normal 0.6em "Open Sans", sans-serif;
text-align:    center;
margin: 1%;
}

.buttonyellow:hover{
color: white;    
background:linear-gradient(#7f6000, #f1c232);
text-decoration: none;}

.buttonred {
background:    #f1c232;
background:    linear-gradient(#ff0000, #802d2d);
border-radius: 1000px;
padding:       12px 25px;
color:         #ffffff;
display:       inline-block;
font:          normal 0.6em "Open Sans", sans-serif;
text-align:    center;
margin: 1%;
}

.buttonred:hover{
color: white;    
background:linear-gradient(#802d2d, #ff0000);
text-decoration: none;}

/*mobile*/
@media(max-width: 1440px){
label { display: block;}
.imagens {height: 23em;}
    
@media(max-width: 1360px){
label { display: block;}
       
@media(max-width: 1280px){
label { display: block;}
    
.imagens {height: 20em;}

@media(max-width: 950px) {
label { display: block;}
    
.titulo {font-size: 1.5em;}
    
img {width:100%;border: solid 1px dimgrey;}

.imagens {width: 100%; height: 52em;}  

.passo1 {float: left; width: 98%; margin: 1% 1% 1% 1%}

.passo2 {float: left; width: 98%; margin: 1% 1% 1% 1%}

.passo3{float: left; width: 98%; margin: 1% 1% 1% 1%}
    
.logo {width: 40%; border: none; margin: 0% 30% 0% 30%;}