#a {
  width: 100%;
  height: 200px;
  /*position: fixed;*/
  background-color: #34495e;
  padding-top:50px;
}

#a .content {
  position: absolute;
  top: 200px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 35px;
  line-height: 40px;
  font-family: 'Muli';
  color: #ecf0f1;
  height: 160px;
  overflow: hidden;
}

#a .visible {
  font-weight: 600;
  overflow: hidden;
  height: 40px;
  padding: 0 40px;
}
#a .visible:before {
  content: '[';
  left: 0;
  line-height: 40px;
}
#a .visible:after {
  content: ']';
  position: absolute;
  right: 0;
  line-height: 40px;
}
#a .visible:after, #a .visible:before {
  position: absolute;
  top: 0;
  color: #16a085;
  font-size: 42px;
  -webkit-animation: 2s linear 0s normal none infinite opacity;
          animation: 2s linear 0s normal none infinite opacity;
}

#a p {
  display: inline;
  float: left;
  margin: 0;
}

#a ul {
  margin-top: 0;
  /* Abstand */
  padding-left: 180px;
  text-align: left;
  list-style: none;
  -webkit-animation: 18s linear 0s normal none infinite change;
          animation: 18s linear 0s normal none infinite change;
}

#a ul li {
  line-height: 40px;
  margin: 0;
}

@-webkit-keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes change {
  0%, 95%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  5%, 90% {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  10%, 85% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  15%, 80% {
    -webkit-transform: translateY(-30%);
            transform: translateY(-30%);
  }
  20%, 75% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  25%, 70% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  30%, 65% {
    -webkit-transform: translateY(-60%);
            transform: translateY(-60%);
  }
  35%, 60% {
    -webkit-transform: translateY(-70%);
            transform: translateY(-70%);
  }
  40%, 55% {
    -webkit-transform: translateY(-80%);
            transform: translateY(-80%);
  }
  45%, 50% {
    -webkit-transform: translateY(-90%);
            transform: translateY(-90%);
  }
  
}
@keyframes change {
  
  0%, 95%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  5%, 90% {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  10%, 85% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  15%, 80% {
    -webkit-transform: translateY(-30%);
            transform: translateY(-30%);
  }
  20%, 75% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  25%, 70% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  30%, 65% {
    -webkit-transform: translateY(-60%);
            transform: translateY(-60%);
  }
  35%, 60% {
    -webkit-transform: translateY(-70%);
            transform: translateY(-70%);
  }
  40%, 55% {
    -webkit-transform: translateY(-80%);
            transform: translateY(-80%);
  }
  45%, 50% {
    -webkit-transform: translateY(-90%);
            transform: translateY(-90%);
  }
}

@media screen and (max-width:550px){
	#a .content {
		font-size:20px;
	}
	#a .visible:after, #a .visible:before {
		font-size:25px;
	}
	#a ul {
		padding-left:100px;
	}
}