/* CSS Document */


p1{
  font-size: 20px;
  color: white;
  text-align: center;
   position: absolute;
  top: 97%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
   animation: fadeIn 1s;	
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
	
}

/* home intro beginning */
.home-intro {
  background-image: url("https://download.unsplash.com/photo-1429277005502-eed8e872fe52");
  background-size: cover;
  height: 100%;
  color: white;
  text-align: center;
  border: 5px solid black;
  animation: fadeIn 1s;	
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
	
}
body, html{
  height: 100%;
}

/* Style the button and place it in the middle of the container/image */
.home-intro .btn {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 24px 36px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.home-intro .btn:hover {
  background-color: rgba(79,79,79,0.68);
}

.btn{
	animation: fadeIn 5s;	
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/*button image */

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

.word1 {
  text-align:center;
  color:black;
  font-family:'Roboto';
  font-weight:300px;
  font-size: 60px;
 
  position: absolute; 
	top: 40%;
  left: 41%;
   transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

.word1 {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

.word1:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 7s infinite;
}

.word1:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
}

.word1:last-of-type .word2 {
  margin-left:-355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}


p {
  font-size:12px;
  color:#999;
  margin-top:200px;
}