body, html {
  padding: 0px;
  margin: 0px;
  font-family: helvetica,arial,sans-serif;
  box-sizing: border-box; }

.row {
  height: 15%;
  max-height: 300px;
  padding: 10px 0px;
  box-sizing: border-box;
  white-space: nowrap; }
  .row:first-of-type {
    margin-top: 140px; }
  .row > div {
    transition: all 500ms;
    margin-right: 20px;
    height: 100%;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    padding: 20px; }
    .row > div.onscreen_horiz {
      background-color: green;
      opacity: 1; }
    .row > div.offscreen_horiz {
      background-color: gray; }
    .row > div.overflowing_horiz {
      background-color: orange; }
    .row > div.onfromleft {
      background-color: red; }
    .row > div.onfromright {
      background-color: blue; }
    .row > div:before {
      content: attr(class); }
  .row.quarterwidth > div {
    width: 25%; }
  .row.halfwidth > div {
    width: 50%; }
  .row.fullwidth > div {
    width: 100%; }
  .row.doublewidth > div {
    width: 200%; }

#key {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  min-height: 120px;
  height: 15%;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: rgba(255, 255, 255, 0.75);
  line-height: 36px;
  white-space: nowrap; }
  #key > div {
    display: inline-block;
    padding: 0px 20px;
    text-align: center; }
  #key h3 {
    margin-bottom: 0px; }
    #key h3 a {
      font-weight: normal; }

.screenwrapper {
  width: 90px;
  height: 36px;
  position: relative;
  margin: 0 auto; }

.screen {
  border: 1px solid #333;
  width: 60%;
  position: absolute;
  top: 0px;
  left: 20%;
  height: 100%;
  box-sizing: border-box; }

.block {
  height: 50%;
  position: absolute;
  top: 25%; }
  .block.onscreen_horiz {
    left: 30%;
    background-color: green;
    width: 40%; }
  .block.offscreen_horiz1 {
    left: 0;
    background-color: gray;
    width: 15%; }
  .block.offscreen_horiz2 {
    right: 0;
    background-color: gray;
    width: 15%; }
  .block.overflowing_horiz {
    left: 0;
    background-color: orange;
    width: 100%; }
  .block.onfromleft {
    left: 0;
    background-color: red;
    width: 50%; }
  .block.onfromright {
    right: 0;
    background-color: blue;
    width: 50%; }

/*
  .onscreen_vert / green
  <div class="screenwrapper">
    <div class="screen"></div>
    <div class="block onscreen_vert"></div>
  </div>
  .offscreen_vert / gray
  <div class="screenwrapper">
    <div class="screen"></div>
    <div class="block offscreen_vert"></div>
  </div>
  .overflowing_vert / orange
  <div class="screenwrapper">
    <div class="screen"></div>
    <div class="block overflowing_vert"></div>
  </div>
  .onfromtop / red
  <div class="screenwrapper">
    <div class="screen"></div>
    <div class="block onfromtop"></div>
  </div>
  .onfrombottom / blue
  <div class="screenwrapper">
    <div class="screen"></div>
    <div class="block onfrombottom"></div>
  </div>
*/