A:link {
	text-decoration: none; 
	color: #EE7F2D;
}
A:visited {
	text-decoration: none;
	color: #aa4400;
}
A:active {
	text-decoration: none;
	color: #552200;
}
A:hover {
	text-decoration: underline;
	color: #007700;
}

BODY {
	background-color: #222222;
	// background: #222 url(../img/paper3.png);
	font: 0.9em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
}

DIV.theImage {
	max-height: 504px;
	max-width: 672px;
        overflow: hidden;
	border-radius: 10px;
}

H1 {
	text-align: center;
	font-size: 2em;
	font-weight: normal;
	margin: 0;
  	font-family: Arial;
	color: #999999; 
}
.section {
	background: #222222;
        border-radius:  10px;
        color:teal;
}

.tile1 {
	max-height: 504px;
	max-width: 2240px;
        overflow: hidden;
	padding: 0px;
        transition: transform 2.0s
}
img.tile1:hover {
        transform:translate(-100px, 0px);
}

.tile2 {
	max-height: 504px;
	max-width: 8000px;
        overflow: hidden;
	padding: 0px;
        transition: transform 9.0s
}
img.tile2:hover {
        transform:translate(-1000px, 0px);
}

.tile4 {
	max-height: 504px;
	max-width: 8000px;
        overflow: hidden;
	padding: 0px;
        float: right;
        transition: transform 9.0s
}
img.tile4:hover {
        transform:translate(854px, 0px);
}

.tile3 {
	max-height: 504px;
	max-width: 8000px;
        overflow: hidden;
	padding: 0px;
        transition: transform 9.0s
}
img.tile3:hover {
        transform:translate(-580px, 0px);
}

.tile0 {
	max-height: 504px;
	max-width: 2240px;
        overflow: hidden;
	padding: 0px;
        transition: transform 0.8s
}
img.tile0:hover {
        transform:scale(1.20);
}

P.caption{
        color: #AAAAAA;
	font-size: 1.2em;
        margin-top: 1em;
	text-align: center;
}

main {
    max-width: 2240px;
    margin: 0rem auto;    
    padding: 0rem 0rem;
    border: 0px solid #000;
}

.flex-container {
    background: #222222;
    border: 0px solid #000;
    border-radius: 5px;
    margin: 1rem 0 0.5rem 0;
}

.flex-item {
    padding: 1.0rem;
    margin: 1rem;
    border: 1px solid #555;
    border-radius: 10px;
    font-weight: normal;
    background-color: #333;
}

/* flex-wrap: wrap; */
#container2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.tooltip {
  position: relative;
  display: inline-block;
  // border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: #4448;
  color: #bbb8;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -75;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #5558 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}