body {
  background: #fff;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  margin:0;
}

.container {
  position: relative;
  background: #3cc8bf;
  top: 0;
  left: 0;
  width:460px;
  height:260px;
  overflow: hidden;
}

.ad-container {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}

.foto-1 {
  position: absolute;
  top: 0%;
  left: 0%;
  width:100%;
  height:auto;
  opacity: 1;
  z-index: 9;
  scale: 1.3;
  animation: move 7.5s ease-in-out 0s forwards, opac 0.6s ease-in 7.5s forwards;
  transform-origin: 50% 50%;
}

.foto-2 {
  position: absolute;
  top: 0%;
  left: 0%;
  width:100%;
  height:auto;
  opacity: 1;
  z-index: 8;
  scale: 1.3;
  animation: movezoom 7.5s ease-in-out 7.5s forwards;
  transform-origin: 50% 50%;
}

/* .foto-3 {
  position: absolute;
  top: 0%;
  left: 0%;
  width:100%;
  height:auto;
  opacity: 1;
  z-index: 7;
  scale: 1.2;
  animation: move 4s ease-in-out 7.95s forwards, opac 0.6s ease-in 11.5s forwards;
  transform-origin: 50% 50%;
} */

/* .foto-4 {
  position: absolute;
  top: 0%;
  left: 0%;
  width:100%;
  height:auto;
  opacity: 1;
  z-index: 6;
  scale: 1.2;
  animation: move 4s ease-in-out 11.95s forwards, opac 0.6s ease-in 15.5s forwards;
  transform-origin: 50% 50%;
}

.foto-5 {
  position: absolute;
  top: 0%;
  left: 0%;
  width:100%;
  height:auto;
  opacity: 1;
  z-index: 5;
  scale: 1.2;
  animation: move 4s ease-in-out 15.95s forwards;
  transform-origin: 50% 50%;
} */

.txt-1 {
	position: absolute;
	top: 70%;
	left: 5%;
	width: 57%;
	height: auto;
  opacity: 0;
	z-index: 11;
	animation: slidein 0.5s cubic-bezier(.25,.75,.5,1.25) forwards, opac 0.6s ease-in 7.5s forwards;
}

/* .txt-2 {
	position: absolute;
	top: 71%;
	left: 5%;
	width: 53%;
	height: auto;
  opacity: 0;
	z-index: 11;
	animation: slidein 0.5s cubic-bezier(.25,.75,.5,1.25) 4.5s forwards, opac 0.6s ease-in 7.5s forwards;
} */

.txt-3 {
	position: absolute;
	top: 70%;
	left: 5%;
	width: 45.5%;
	height: auto;
  opacity: 0;
	z-index: 11;
	animation: slidein 0.5s cubic-bezier(.25,.75,.5,1.25) 8.5s forwards;
}

/* .txt-4 {
	position: absolute;
	top: 70%;
	left: 5%;
	width: 46%;
	height: auto;
  opacity: 0;
	z-index: 11;
	animation: slidein 0.5s cubic-bezier(.25,.75,.5,1.25) 12.5s forwards, opac 0.6s ease-in 15.5s forwards;
}

.txt-5 {
	position: absolute;
	top: 70%;
	left: 5%;
	width: 47%;
	height: auto;
  opacity: 0;
	z-index: 11;
	animation: slidein 0.5s cubic-bezier(.25,.75,.5,1.25) 16.5s forwards;
} */

.cta {
	position: absolute;
	top: 74%;
	left: 68%;
	width: 28%;
	height: auto;
  opacity: 0;
	z-index: 11;
	animation: pulse 2.5s ease-in-out infinite, slideinr 0.5s cubic-bezier(.25,.75,.5,1.25) 0.5s forwards;
}

.copy-bar {
  position: absolute;
  top: 60%;
  left: 0%;
  background-color: #3cc8bf;
  width:460px;
  height:130px;
  z-index: 10;
  /* animation: movebar 0.7s ease-out forwards; */
}

@keyframes move{
  to { 
    scale: 1;
  }
}

@keyframes movezoom{
  to { 
    scale: 1;
    top:-60%;
  }
}

@keyframes moveup{
  to { 
    top: -15%;
  }
}

@keyframes opac{
  to { 
    opacity: 0;
  }
}

@keyframes movebar{
  to { 
    top: 60%;
  }
}

@keyframes slidein{
  to { 
    opacity: 1;
    left:7%;
  }
}

@keyframes slideinr{
  to { 
    opacity: 1;
    left:65%;
  }
}

@keyframes pulse{
  from {scale: 1;} 
  50% {scale: 1.1;}
  to {scale: 1;}
}

@media only screen and (max-width: 400px) {
  .container {
    width:260px;
    height:147px;
  }
}