/* CSS buttons navigation - float ONTOP */

div.sticky {
  position: sticky;
  top: 0px;
  width: 870px;
  border: 1px solid lightgray;
  background-color: rgba(200, 200, 200, 0.7);
  background-image: linear-gradient(gray, #e3e3e3);
  margin-left: auto;
  margin-right: auto;
  visibility: hidden;
  z-index: 90;  /* always on top - elevar div sobre mouseovers class="flou" */
}

#floatbtn-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

#floatbtn-group button {
  background-color: #e3e3e3;
  border: 1px dotted #393939;
  color: #3333ff;
  font-weight: bold;
  padding: 5px 10px;  /* Some top-bot left-right padding */
  cursor: pointer;
  float: left;	 /* para juntar buttons aunque se espacíen por HTML */
}

/* Clear floats (clearfix hack) */
#floatbtn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Prevent double borders */
#floatbtn-group button:not(:last-child) {
  border-right: none;
}

/* Add a background color on hover */
#floatbtn-group button:hover {
  background-color: white;
  color: dimgray;
}

/* CSS buttons navigation - static ONBOT */

.btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-group button {
  background-color: lightgray;
  border: 1px dotted #393939;
  color: #3333ff;
  font-weight: bold;
  padding: 5px 10px; /* Some top-bot left-right padding */
  cursor: pointer;
  float: left; /* Float the buttons side by side */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Prevent double borders */
.btn-group button:not(:last-child) {
  border-right: none;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: white;
  color: dimgray;
}
