html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

img {
  overflow: hidden;
  white-space: pre;
}

#vertical-centerer {
  width: 100%;
  float: left;
  height: 50%;
}

#closed-images {
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
}

#portrait, #landscape {
  position: relative;
  margin: 0 auto;
  margin-top: -150px;
}

#portrait img {
  width: 100%
}

#landscape img {
  width: 800px;
  height: 300px;
}

#portrait {
  font-size: 5pt; /* Alt text can't wrap or hide overflow in Chrome; it just disappears! */
  max-width: 100%;
  width: 450px;
  display: none; /* Display the landscape variant by default */
  margin-top: -180px;
}

#landscape {
  font-size: 10pt;
  width: 800px;
  height: 300px;
  display: block;
  margin-top: -150px;
}

.email-link, .allori-link-logo {
  position: absolute;
  display: block;
  /* Uncomment the following to view the images' clickable areas: */
  /*
  background-color: #ccc;
  opacity: 0.5;
  */
}

.email-link {
  left: 0;
  width: 100%;
}

#portrait .email-link {
  top: 37%;
  height: 16%;
}

#landscape .email-link {
  top: 98px;
  height: 34px;
}

.allori-link-logo {
  left: 0;
  width: 100%;
}

#portrait .allori-link-logo {
  top: 69%;
  height: 19%;
}

#landscape .allori-link-logo {
  top: 203px;
  height: 65px;
}

/* Computer - canvas in portrait aspect ratio */
@media only screen and (max-width: 800px) and (-webkit-device-pixel-ratio: 1) {
  /* When the canvas is narrower than the above width */
  #portrait  { display: block !important; }
  #landscape { display: none  !important; }
}

/* Portrait and landscape */
@media only screen and (orientation: portrait) {
  #portrait  { display: block; }
  #landscape { display: none; }
}
@media only screen and (orientation: landscape) {
  #portrait  { display: none; }
  #landscape { display: block; }
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  #portrait  { display: none  !important; } /* Override 'computer' */
  #landscape { display: block !important; }
  #closed-images { min-height: 400px; }
}

/* iPhone 4, 5, High-DPI Androids, and not retina iPads ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5)
and (max-device-height: 1023px),
only screen and (min-device-pixel-ratio : 1.5)
and (max-device-height: 1023px) {
  #landscape { margin-top: -110px; } /* Correct vertical image position */
}

/* Apple iPhones 3G/3GS, 4, 5 (portrait) */
@media
only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1) 
and (orientation : portrait),
only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) 
and (orientation : portrait),
only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) 
and (orientation : portrait) {
  #closed-images { height: 300px; } /* Hack to get correct viewport width */
  #portrait { margin-top: -130px; } /* Correct vertical image position */
}

/* Apple iPhones 3G/3GS, 4, 5 (landscape) */
@media
only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1) 
and (orientation : landscape),
only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) 
and (orientation : landscape),
only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) 
and (orientation : landscape) {
  #closed-images { height: 370px; } /* Hack to get correct viewport width */
  #landscape { margin-top: -65px; } /* Correct vertical image position */
}