* {  box-sizing: border-box;}

body {  font-family: verdana;  font-size: 15px;  padding: 5px;  background: #FFDAB9;}

/* Header/Blog Title */
.header {  border-radius: 5px; padding: 5px;  text-align: center;  background: #DAA520;}
.header h1 { font-size: 20px; color: #0000FF; }
.header h5 { font-size: 10px; color: #8B008B; }
/*--------------------------------*/
h1 { font-size: 20px; color: #0000FF; text-align: center; }


ul {list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  background-color: #87CEEB ;}
ul.a {  list-style-type: circle; }
ul.b {  list-style-type: circle; background-color: #FAFAD2  }

li-menu {border-radius: 15px;  float: left;}
li-menu a,.dropbtn {border-radius: 8px;display: inline-block; color: #000080; text-align: center; padding: 8px 10px;text-decoration: none;}
li-menu a:hover, .dropdown:hover .dropbtn {  background-color: red;}
li-menu.dropdown {  display: inline-block;}

.dropdown-content {  display: none; position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   z-index: 1;}
.dropdown-content a {  color: blue;  padding: 12px 16px;  text-decoration: none;  display: block;  text-align: left;}
.dropdown-content a:hover {background-color: #BDB76B;}
.dropdown:hover .dropdown-content {  display: block;}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {  float: left;   width: 50%;   background-color: #FFEBCD;   padding-left: 10px; }
/* Right column */
.rightcolumn {   float: left;   width: 50%;   background-color: #FFEBCD ;   padding-left: 10px; }

/* Add a card effect for articles */
.card {text-align: center;   background-color: #FFFACD ;   padding: 20px;   margin-top: 20px;  border-radius: 25px;}
div.card:hover {border: 5px solid #777; }
div.card {  padding: 20px;  margin-left: 10px;   margin-right: 10px; border: 3px solid #ccc;   }

/* Clear floats after the columns */
.row:after {  content: "";   display: table;   clear: both; }

/* Footer */
.footer {  padding: 5px;  text-align: center;  background:  #DAA520;  margin-top: 5px; border-radius: 5px;}
.footer h1 { font-size: 20px; color: #0000FF; }
.footer h5 { font-size: 15px; color: #8B008B; }

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {  .leftcolumn, .rightcolumn {       width: 100%;    padding: 0;  }}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {  .topnav a {    float: none;    width: 100%;  }}

div.gallery:hover {   border: 5px solid #777; }
div.gallery {  padding: 20px;  margin-left: 120px;   margin-right: 120px; border: 3px solid #ccc; background-color: #FAFAD2  }
<!-- div.gallery {  margin: 5px;  border: 1px solid #ccc;  float: left;  width: 180px;}-->
div.gallery img {  width: 100%;  height: auto;}
div.desc {  padding: 15px;  text-align: center; }

img {border-radius: 15px; padding: 5px; width: 70%; style="align=middle";}
/*
figure {  display: block;  margin-top: 1em;  margin-bottom: 1em;  margin-left: 10px;  margin-right: 10px;}
*/
figure {
    border-radius: 10px;
    align: middle;
    /*width: 70%;*/
	/*height: auto*/
    border: thin #c0c0c0 solid;
    /*display: flex;*/
	display: block;
    flex-flow: column;
    padding: 5px;
	max-width: 300px;
 /*   	max-height: 300px;*/
    margin: auto;
}

figcaption {
/*  background-color: #CD853F ;*/
  font-size: 8px;
  color: black;
  font-style: italic;
  padding: 2px;
  text-align: middle;
}
p.clear {  clear: both;}

.sidebar {border-radius: 5px; margin: 0; padding: 8; width: 120px; background-color: #FFF0F5; position: fixed;   height: 100%;  overflow: auto; font-size: 10px}
.sidebar a {display: block;   color: black;   padding: 10px;   text-decoration: none; border-radius: 5px;}
.sidebar a.active {   background-color: #4CAF50 ;   color: #00008B  ; } 
.sidebar a:hover:not(.active) {  background-color: #555;  color: blue;}
div.contentw  {margin-left: 120px;   padding: 1px 16px;   height: 1000px; } 

@media screen and (max-width: 700px) {.sidebar {width: 100%; height: auto; position: relative;}.sidebar a {float: left;} div.contentw  {margin-left: 0;} }
@media screen and (max-width: 400px) {.sidebar a {text-align: center; float: none;}}

.collapsible {
  background-color: #FFDEAD;
  color: Black;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
}
.collapsible:after {
  content: '\002B';
  color: black;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}
.active, .collapsible:hover {
  background-color: #DAA520 ;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #FFFACD ;
}

/* texto em bloco sobre um texto */
		divide {display: none;}
	
		bloco:hover + divide {
			/* border: thin #c0c0c0 solid; */
			border: 2px solid #777; 
			align: middle;
			display: block;
			color: blue;
			padding: 5px;  
			text-align: center;  
			background:  #A9A9A9;  
			margin-top: 5px; 
			border-radius: 15px;
    		font-size: 15px; }