html,body { margin:0; padding:0; background-color:#000; width:100%; height:100vh; overflow:hidden; font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }
#main { 
	width:100vw; height:100vh; 
	background: url("./images/gostei.jpg") no-repeat center 0;
	background-size: auto 100%;
	color:#FFF;
	margin:0 auto;
	text-align:center;
	position:relative;
	display:flex;
	justify-content: space-between;
}


.fadein1 { 

/*
  position: absolute;
  top: 10%;
  left: 50%;
*/
  color: rgb(255, 255, 255);
  opacity: 0;
  animation-name: fadein;
  animation-delay: 1s;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

}

.fadein2 { 

/*
  position: absolute;
  top: 20%;
  left: 50%;
*/
  text-indent:1em;
  color: rgb(255, 255, 255);
  opacity: 0;
  animation-name: fadein;
  animation-delay: 2.5s;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

}

.fadein3 { 

/*
  position: absolute;
  top: 30%;
  left: 50%;
*/
  text-indent:2em;
  color: rgb(255, 255, 255);
  opacity: 0;
  animation-name: fadein;
  animation-delay: 4s;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

}

.fadein4 { 

/*
  position: absolute;
  top: 40%;
  left: 50%;
*/
  text-indent:3em;
  color: rgb(255, 255, 255);
  opacity: 0;
  animation-name: fadein;
  animation-delay: 5.5s;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

}



@keyframes fadein {
  0% {
     opacity: 0;
     transform: translateY(0);
  }
  100% {
     opacity: 1;
     transform: translateY(20px);
  }
}

.fadeout div { line-height:180%; font-size:28px;  }
.fadeout { width:90%; max-width:640px; text-align:left; margin:0 auto; padding-top:50vh;
  opacity: 1;
  animation-name: fadeout;
  animation-delay: 8s;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes fadeout {
  0% {
     opacity: 1;
     transform: translateY(0);
  }
  100% {
     opacity: 0;
     transform: translateY(-220px);
  }
}

#gostei { 
  background-color:rgba(255,255,255,0.2); width:100%; height:480px; position:absolute; top:calc(50% - 240px); left:0; text-align:center; color:#FFF;

  opacity: 0;
  animation-name: gostei;
  animation-delay: 9s;
  animation-duration: 15.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

}


@keyframes gostei {
  0% {
     opacity: 0;
     transform: translateX(100%);
  }
  20% {
     opacity: 1;
     transform: translateX(0);
  }
  90% {
     opacity: 1;
     transform: translateX(0);
  }
  100% {
     opacity: 0;
     transform: translateX(0);
  }
}

#gostei p:first-child { font-size:32px; }
#gostei p span { font-size:28px; }


@media screen and (max-width: 548px) {
	.fadeout div { font-size:4.8vw;  }


	#gostei p:first-child { font-size:5.2vw; }
	#gostei p span { font-size:4.2vw; }
	
}