/*body {
  display: flex;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}*/

::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #333; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.thumbnail_port img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail_port:hover{
background-color: transparent;
}

.thumbnail_port:hover img{
border: 2px solid black;
}

.thumbnail_port span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: 0px;
border: none;
visibility: hidden;
color: white;
text-decoration: none;
}

.thumbnail_port span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail_port:hover span{ /*CSS for enlarged image*/
visibility: visible;
z-index: 50;
}

/**************************** thumbnail landscape ***************************/

.thumbnail_land img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail_land:hover{
background-color: transparent;
}

.thumbnail_land:hover img{
border: 2px solid black;
}

.thumbnail_land span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: 0px;
border: none;
visibility: hidden;
color: white;
text-decoration: none;
}

.thumbnail_land span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 10px;
}

.thumbnail_land:hover span{ /*CSS for enlarged image*/
visibility: visible;
z-index: 50;
}

span[data-descr] {
  position: relative;
  text-decoration: none;
  font-style: italic;
  color: #000;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}