.wrapper {
  position:relative;
  transform:translateY(-50%);
  top:50%;
  margin: 0 auto;
  width:75%;
  overflow:hidden;
}

.wrapper p {
  position:absolute;
  left:100%;
  width:100%;
  font-size:2em;
  color:#ffffff;
  top:0;
  cursor:pointer;
  opacity:0;
  transition:left 1.4s, opacity .5s ease;
}

.wrapper p.activeText {
  position:relative;
  left:0;
  opacity:1;
}

.wrapper p.slideLeft {
  left:-100%;
  opacity:0;
}

.wrapper p:before {
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.1em;
  vertical-align: -0.4em;
}

.wrapper p:after {
  font-size: 3em;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.45em;
}

ul {
  margin:0;
  padding:0;
  text-align:center;
}

ul li {
  list-style:none;
}
.dot {
  width:10px;
  height:10px;
  border-radius:100px;
  background:#7f8c8d;
  display:inline-block;
  text-lign:center;
  cursor:pointer;
}

.active {
  background:#ecf0f1;
}