@charset "utf-8";
/* CSS Document */

section.welcome{ width:100%; height:100px; display:block; float:left; }
section.welcome h1{width:50%; padding:3px; height:25px; line-height:25px; display:block; color:#00F; font-size:20px; text-align:left; border-bottom:1px solid #ff0505; margin:40px 0px; }	

.imagens{ width:1000px; height:auto; display:block; }
span.titulomenu{ width:80%; display:block; margin:10px 0; border-bottom:2px solid #FF0505; text-align:left; font-weight:bold; }
figure.bannerCategoria{ width:100%; margin:10px auto; }
figure.bannerCategoria img{ border:none; width:100%;}	
#menuCategoria{ width:200px; height:auto; display:block; float:left; }
nav#menuCategoria ul{ width:70%; text-align:left; }
nav#menuCategoria ul li{ display:block; height:20px; }
nav#menuCategoria ul li a:link { text-decoration:none; color:#00F; }

/* visited link */
nav#menuCategoria ul li a:visited { color:#FF0505; }

/* mouse over link */
nav#menuCategoria ul li a:hover { color:#FF0505; }

/* selected link */
nav#menuCategoria ul li a:active { color:#000; }

article{ width:800px; float:left; display:block; text-align:center; margin-bottom:50px;	}
.titulo{ width:250px; display:block; float:left; font-size:22px; font-weight:bold; margin:20px 0; padding-bottom:10px; border-bottom:2px solid #E4E4E4; color:#FF0505; }
figure#fotos{ width:220px; height:300px; float:left; display:block; margin:20px; border: 2px solid #FF0505; }
figure#fotos img{ border:none; width:100%; }
figure#fotos figcaption{ background:#FF0; display:block; float:left; overflow:hidden; width:100%; color:#000; font-size:16px; font-weight:600; height:42px; line-height:40px; text-align:center; margin:0px; padding:0px; }

/************ página descrição ************/
.sombra{ width:407px; height:470px; display:block; box-shadow: -2px 2px 10px #B3B3B3; 	}
.descricao{ width:550px; display:block; float:left; font-size:16px; margin-bottom:50px; }
figure#fotoDescricao{ width:450px; margin:0; display:block; float:left; }	
figure#fotoDescricao img{ border: 1px solid #B4B4B4; }	
figure#fotoDescricao figcaption{ display:none; 	}	
ul#descricao{ width:340px; display:block; float:right; list-style-type:none; text-align:left; font-weight:normal; }
ul#descricao li{ width:100%; display:block; margin:15px 25px; }
.btnVoltar{	width:60px; height:40px; display:block; float:left; margin:10px 30px; line-height:40px; background-color:#FDFDFD; border:1px solid #B4B4B4; font-size:12px; text-decoration:none; color#FF0505; }
.tabCores{width:250px; height:180px; text-align:center; overflow:auto;}

@media (min-width: 320px) and (max-width: 480px){
section.welcome header{ width:100%; display:block; float:left; height:auto;  }
section.welcome h1{display:block; padding:3% 2%; width:100%; height:auto; text-align:left; border-bottom:1 px solid #FF0505;}

section.imagens{padding:3% 2%; width:100%; }

#menuCategoria{ width:100%; margin:5% 0;}
span.titulomenu{ width:20%; display:block; margin:0; float:left; border:none; font-weight:bold; }

nav#menuCategoria ul{ width:75%; margin:0 2.5%;  float:right; }
nav#menuCategoria ul li{ display:inline-block; border-right:1px solid #FF0505; padding:0 1%; height:auto;   }
nav#menuCategoria ul li a{ font-size:12px; }


article{ width:100%; }

figure#fotos{ margin:5% 20%; }

/************ página descrição ************/
.descricao{ display:block; padding:3% 2%; width:100%; height:auto; text-align:left; border-bottom:1 px solid #FF0505;}
figure#fotoDescricao{ width:100%; }	
.sombra{ width:100%; height:auto; }
ul#descricao{ width:100%; float:left; }
ul#descricao li{ width:100%; display:block; margin:5% 0; }
.btnVoltar{	width:60px; height:40px; display:block; float:left; margin:3% 0; line-height:40px; background-color:#FDFDFD; border:1px solid #B4B4B4; font-size:12px; text-decoration:none; color#FF0505; }
.tabCores{width:250px; height:180px; text-align:center; overflow:auto;}

}

/************ smartphones em landscape tablets portrait ************/
@media (min-width: 481px) and (max-width: 1280px){
section.welcome header{ width:100%; display:block; float:left; height:auto;  }
section.welcome h1{display:block; padding:3% 2%; width:100%; height:auto; text-align:left; border-bottom:1 px solid #FF0505;}

section.imagens{padding:3% 2%; width:100%; }

#menuCategoria{ width:100%; margin:5% 0;}
span.titulomenu{ width:20%; display:block; margin:0; float:left; border:none; font-weight:bold; }

nav#menuCategoria ul{ width:75%; margin:0 2.5%;  float:right; }
nav#menuCategoria ul li{ display:inline-block; border-right:1px solid #FF0505; padding:0 1%;   }

article{ width:100%; }


figure#fotos{ margin:5%; }

/************ página descrição ************/
.descricao{ display:block; padding:3% 2%; width:100%; height:auto; text-align:left; border-bottom:1 px solid #FF0505;}
figure#fotoDescricao{ width:100%; }	
.sombra{ width:100%; height:auto; }
ul#descricao{ width:100%; float:left; }
ul#descricao li{ width:100%; display:block; margin:5% 0; }
.btnVoltar{	width:60px; height:40px; display:block; float:left; margin:3% 0; line-height:40px; background-color:#FDFDFD; border:1px solid #B4B4B4; font-size:12px; text-decoration:none; color#FF0505; }
.tabCores{width:250px; height:180px; text-align:center; overflow:auto;}

}