html, body, .stories {
  height: 100%;
  width: 100%;

  font-family: 'Lato';
  font-size: 16px;

  color: #F0F0F0;
  -webkit-font-smoothing: antialiased;
  background-color: rgb(24, 23, 23);
}

.storyteller, .order {
  font-family: 'Source Sans Pro';
  position: fixed;
  top: 10px;
  letter-spacing: 0.5px;
  z-index: 100;
}

.storyteller {
  font-size: 28px;
  left: 20px;
}

.order {
  line-height: 43px;
  font-size: 24px;
  right: 20px;
}

.order .newest{
  margin-right: 20px;
  font-weight: 600;
}

@media screen and (max-width: 900px){
  .storyteller {
    font-size: 24px;
    left: 20px;
  }

  .order {
    font-size: 18px;
    line-height: 30px;
  }

  .storyteller, .order {
    position: absolute;
  }

  .order {
    left: 20px;
    top: 40px;
    font-size: 20px;
  }
}

.story {
  display: block;
  height: 45%;
  /*box-shadow: inset 0px -50px 279px rgba(0,0,0,.8);
  -webkit-box-shadow: inset 0px -50px 279px rgba(0,0,0,.8);
  -moz-box-shadow: inset 0px -50px 279px rgba(0,0,0,.8);*/

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;

  position: relative;
  color: #F0F0F0 !important;
}

.story .wrapper {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  -webkit-transition: background 0.15s ease-in-out;
  -moz-transition: background 0.15s ease-in-out;
  -ms-transition: background 0.15s ease-in-out;
  -o-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}

.story .wrapper:hover {
  background: rgba(0,0,0,0.15);;
}

.story .details {
  width: 34%;
  position: absolute;
  bottom: 20px;
  left: 34%;
  text-shadow: 1px 1px 20px rgba(0,0,0,1);
  z-index: 1;
}

.story.submissions {
  height: 30%;
}

.story.submissions .wrapper {
  background: rgba(0,0,0,0.7);
}

.fb-like {
  margin-top: 5px;
  height: 28px;
}

@media screen and (max-width: 900px){
  .story .details {
    width: 100%;
    left: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.story .details .title {
  font-size: 46px;
}

.story .details .tagline {
  margin-top: 5px;
  font-size: 24px; 
  line-height: 28px; 
  margin-bottom: 10px;
}

.story .details .reading-time {
  font-size: 18px; 
  float: left;
}

.story .details .share {
  float: right;
}

.like-site {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

@media screen and (max-width: 900px){
  .storyteller {
    font-size: 20px;
  }

  .order {
    font-size: 16px;
    line-height: 18px;
  }

  .story .details .title {
    font-size: 24px;
  }

  .story .details .tagline {
    margin-top: 5px;
    font-size: 18px;
    line-height: 20px; 
    margin-bottom: 5px;
  }

  .story .details .reading-time, .story .details .share {
    font-size: 12px;
  }

  .cover .details {
    width: 100%;
    left: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
  .story .details .title {
    font-size: 22px;
  }

  .story .details .tagline {
    font-size: 16px;
  }
}

/* Only iphone 4 */
@media only screen and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (-webkit-device-pixel-ratio: 2) 
and (device-aspect-ratio: 2/3) {
  .stories {
    margin-top: 50px;
  }
}

/* Only iphone 5 */
/*@media screen and (device-aspect-ratio: 40/71) {
 .stories {
    margin-top: 70px;
  } 
}*/

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.stories .story {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in-out 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in-out 1;
    animation:fadeIn ease-in-out 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:0.4s;
    -moz-animation-duration:0.4s;
    animation-duration:0.4s;
}

.stories .story:nth-child(1) {
  /*-webkit-animation-delay: 0.05s;
  -moz-animation-delay:0.05s;
  animation-delay: 0.05s;*/
}
  
.stories .story:nth-child(2) {
  /*-webkit-animation-delay: 0.2s;
  -moz-animation-delay:0.2s;
  animation-delay: 0.2s;*/
}
 
.stories .story:nth-child(3) {
  /*-webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;*/
}