body {  
  background-image: url("https://activelife-investments.com/sk/wp-content/uploads/2017/01/pracovna-porada-bg-v3.jpg");
} 

.images {
  position: relative;
  margin-top: 300px;	
  top: 0;
  left: 0;
}

.roll-image {  
  position: absolute; 
  left: 45%; 
  top: 0%; 
  -webkit-animation: roll-in-left 5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both; /* Safari 4.0 - 8.0 */
  animation: roll-in-left 5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
}

.fade-image {
  position: absolute; 
  left: 48%; 
  top: 0%; 
  margin: -20 0 00 -106;
  -webkit-animation: fade-in 2s both; /* Safari 4.0 - 8.0 */
  animation: fade-in 2s both;
  animation-delay: 4s;  
}

button {
  font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-transform: uppercase;
  background-color: Transparent;
  color: #EDE3C8;
  border: 2px solid #EDE3C8;
  position: absolute; 
  left: 50%; 
  top: 0%; 
  margin-top: 60px;	
  padding: 18px 28px;
  
  -webkit-animation: fade-in 2s both; /* Safari 4.0 - 8.0 */
  animation: fade-in 2s both;
  animation-delay: 5s; 
}

button:hover {
  color: #27303F;
  background-color: #EDE3C8;  
}

#showMe {
  animation: cssAnimation 0s 4s forwards;
  visibility: hidden;
}

@keyframes cssAnimation {
  to   { visibility: visible; }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes roll-in-left {
  0% {
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Standard syntax */
@keyframes roll-in-left {
  0% {
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}