#apDiv1 {  
  position:absolute;  
  width:100%;  
  height:136px;  
  z-index:1;  
  background-color: #666666;  
  left: 0px;  
  top: 0px;  
}  
#apDiv3 {  
  position:absolute;  
  width:100%;  
  height:46px;  
  z-index:1;  
  left: 21px;  
  top: 81px;  
  font-size: 36px;  
  color: #CCC;  
}  
#apDiv5 {  
  position:absolute;  
  width:100%;  
  height:14px;  
  left:0px;    
  z-index:3;  
  top: 122px;  
  background-color: #333333;  
}  
#apDiv13 {  
  position:absolute;  
  width:200px;  
  height:78px;  
  z-index:5;  
  left: 0px;  
  top: 0px;  
}  
#apDiv22 {  
  position:absolute;  
  width:14px;  
  height:78px;  
  z-index:11;  
  left: 232px;  
  top: 0px;  
  background-color: #4D4D4D;  
}  
#apDiv23 {  
  position:absolute;  
  width:247px;  
  height:8px;  
  z-index:12;  
  left: -1px;  
  top: 73px;  
  background-color: #4D4D4D;  
}

.flexcontainer {
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  -webkit-justify-content: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

figure img {
  border: 1px solid black;
  height: 200px;
}

figcaption {
  background: #777777;
  border: 1px solid black;
  padding: 5px;
  color: black;
  text-align: center;
  font-family: "Arial";
}

body {
  background: slategrey;
}


html, body, .footer, .push, .wrapper {
  margin: 0;
}

html, body {
  height: 100%;
}

.footer {
  background: #333333;
  color: grey;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -2em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 2em; /* .push must be the same height as .footer */
}