/*
html for image

<figure>
	<a href="#imagepop">
		<img src="images/landing/timeline.jpg" />
	</a>
	<figcaption>Click to enlarge</figcaption>
</figure>



<div id="imagepop" class="overlay">
<a class="cancel" href="#"></a>
	<div class="popup">
		<a class="close" href="#!">&times;</a>  <!--exclamation popint is crucial to prevent href from going to top -->
		<h3>Development Timeline</h3>

		<div class="content">
		<img src="images/landing/timeline.jpg" />
		</div>
	</div>
</div>

*/


figure {
  width:40%;
  float:right;
  border:1px solid #657493;
  padding:2.5%;
}
@media (max-width:525px) {
  figure {width:95%; margin:5% auto;}
}
figcaption {font-size:.95em;}
figure h3 {font-family: 'Serious Sans' !important; margin-top:0;}
.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.65);
	transition: opacity 200ms;
  visibility: hidden;
	opacity: 0;

  }
  .overlay .cancel {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
    z-index:1;
  }
  .overlay:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

.popup {
	margin: 75px auto;
	padding: 20px;
	background: #fff;
	border: 1px solid #666;
	width: 30%;

  margin:-10% auto 0;
	box-shadow: 0 0 50px rgba(0,0,0,0.5);
	position: relative;
  }
  .popup .close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    right: 20px;
    opacity: 0.8;
    transition: all 200ms;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #666;
    z-index:20;
  }
  .popup .close:hover {
  opacity: 1;
}
  .content {
      max-height: none;
      overflow: auto;
    }