html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em 0;
  line-height: 1.5em;
}

#sampleBtn {
  z-index: 30;
  cursor: pointer;
  bottom: 10%;
  margin: 0;
  position: absolute;
  color: #992d21;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

#sampleBtn:hover {
  transform: scale(1.1);
  transition: all .5s ease;
  color: #e45e5d;
}


@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }


.fade-in {
opacity:0;  /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:.1s;
-moz-animation-duration:.1s;
animation-duration:.1s;
}

.fade-in.one {
width: 20vw;
-webkit-animation-delay: 4.6s;
-moz-animation-delay: 4.6s;
animation-delay: 4.6s;
}