body {background-color:#000000; color:white}

#pics {margin-left:25px; height:2000px; width:1080px; border:0px;}

#header {width:2080px; text-align:center; float:left;  position:relative; left:10px; margin-bottom:5px; }
#logo {float:left;}
#nav1 {float:left; text-align:center; position:relative; left:80px; top:10px;}

#nav1 ul
 {list-style-type:none; margin:0px; padding:0px; } 

#nav1 li
 {list-style-type:none; display:inline; margin-right:10px;}

#nav1 li a
 {text-decoration:none; padding:7px 10px; color:white; font:18px Georgia, "Times New Roman", Times, serif; }

#nav1 li a.active, #nav1 li a.active:hover {background-color:yellow; color:black;}

#nav1 li a.non_active, #nav1 li a.non_active:hover {background-color:gray; color:black;}

.container {width:845px;}
.container div {text-align:center; color:white; font:22px Georgia, "Times New Roman", Times, serif;}

#menu {height:315px; width:250px; float:left;}


#pics2 {margin-left:240px; height:475px; width:470px; float:left; }

#pics3 {margin-left:398px; height:475px; width:470px; float:left; } 

#pics4 {margin-left:180px; height:475px; width:600px; float:left; } 

#info {width:343px;float:left;}

#thumbs {height:315px; width:324px; float:left; text-align:right; }

#end {background-color:#FFA500;clear:both;text-align:center;font-family:Helvetica,Ariel,Serif;}
.marginzero {margin-bottom:0;}

.menu {margin:0; padding:0; width:250px; list-style:none; }
.menu li {padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a {text-align:right;height:40px; padding:0px 10px; font:18px "Palatino Linotype", "Book Antiqua", Palatino, serif; color:white; display:block; text-decoration:none;border-style:none;}
.menu li a:hover {border-style:solid;border-width:1px;color:white;}
.menu li a.active, .menu li a.active:hover {background-color:gray; color:black;}
.menu li a span {line-height:40px;}

#top {height:125px; width:350px; position:relative; top:20px;}
#bottom {height:125px;width:350px;}

.innerthumbs {height:150;width:110;float:left;padding:10px;}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  min-width: 420px;
  max-width: 25%;
  padding: 0 4px;
  background: black;
  border-color: white;
}

.column img {
  margin-top:15px;
  vertical-align: middle;
  width: 100%;
  border-radius:30px;
  opacity: 0.9;

}

.column div {
  margin-top:25px;
  text-align:center;
  vertical-align: middle;
  width: 100%;
  border-radius:30px;
  opacity: 0.9;

}



.column img:hover {
opacity: 1;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  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: #555 transparent transparent transparent;
}

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