body {
 background-image: url("EmpireStatePlazaPanorama.jpg");
 background-size:cover;
 background-repeat:no-repeat;
 background-color: #000;
 background-blend-mode:lighten;
}

.navbar {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.navbar-right {
  float: right;
}

.navbar a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family:sans-serif;
  background-color: #333;

}

.logo {
  font-weight: bold;
}

.navbar a.active {
  background-color: #077;
}

.navbar a:hover {
  background-color: #111;
}
.dropdown {
  display: inline-block;
}
.dropdown-content{
  display: none;
  position: absolute;
}
.dropdown-content a {
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}

h1 {
  color: white;
  font-family:sans-serif;
  text-align:center;
  font-size:60px;
  text-shadow: 2px 2px 2px #000;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
  display:inline-block;
  padding: 5px;
  background-color: #fff;
}


.card a, .horizontal-card a {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
  text-decoration: none;
}

.card a:hover, .horizontal-card a:hover {
  opacity: 0.7;
}

.center {
  display: block;
  margin: auto;
  width: fit-content;
}

.horizontal-card {
  display:flex;
  align-items:center;
  flex-direction: row;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin:10px;
  text-align: center;
  font-family: arial;
  /*max-height: 300px;*/
  width:50vw;
  background-color: #fff;
}

.horizontal-card div {
  padding:10px;
  text-align:left;
}
.thumbnail {
  width:200px;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
}

.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}


.row:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  position: relative;
  /*display: none;*/
}


.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #333;
   color: white;
   text-align: center;
   padding: 5px;
}

.footer a {
  color: #077;
  text-decoration:none;
}
.footer a:hover {
  color: #fff;
}
