@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body {
  background-color: #eee ;
  font-family: Source Sans Pro;

}

p {
  margin: 5px;
}
h1 {
  font-weight: 300;
  letter-spacing: 2px;
  color: #fff;
  opacity: .8;
}
h2 {
  text-transform: uppercase;
  letter-spacing: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
   color: #0082c7;
}
h4 {
    text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0px;
  margin-top: 0px;
  color: #fff;
  opacity: .8;
  font-size: 14px;
}

.container {
  width: 730px;
  margin: auto;
  
}

.bg-1 {
  background-color: #20807a; 
}

.bg-2 {
  background-color: #54b98b; 
}

.bg-3 {
  background-color: #fecd74; 
}

.bg-4 {
  background-color: #fd785d; 
}

.bg-5 {
  background-color: #f5424a; 
}

.bg-6 {
  background-color: #75acb7; 
}

.close-button {
  height: 25px;
  width: 25px;
  float: right;
  
  transition: opacity .5s;
}


.view-button {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #48838e;
  margin-top: 30px;
  float: right;
  opacity: .8;
  transition: opacity .3s;
  color: #fff;
font-weight: bold;
  letter-spacing: 2px;
  
}

.view-button:hover {
  opacity: 1;
}

.view-button1 {
  width: 280px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #48838e;
  margin-top: 40px;
  float: right;
  opacity: .8;
  transition: opacity .3s;
  color: #fff;
font-weight: bold;
  letter-spacing: 2px;
  
}

.view-button1:hover {
  opacity: 1;
}

.close-button:hover {
  opacity: .7;
}
a {color: white; text-decoration: none; font-weight: bold;}
.closed-box {
  margin: 5px;
  width: 171px;
  height: 135px;
  float: left;
  outline: 1px solid white;
  outline-offset: -4px;
}

.open-box {
position: relative;
  float: left;
  background-color: #cbe7ed;
  padding: 15px;
  margin: 5px;
color: black;
width: 684px;
}

img {
 
  margin-left:-35px;
  margin-top:-10px;
}

img:hover {
  opacity: .9;
}
figure { width: 151px;}
figcaption
{text-align: center;font-weight:bold;
color: white; margin-top: 0px; margin-left: -50px;}
table {
border: 1px solid black;
}

td, th {
border: 1px solid black;
padding: 5px;