/*hello world*/
.content {
  position: absolute;
  top: 50%;
  left: 40%;
  /*transform: translate(-50%, -50%);*/
  font-size: 40px;
  line-height: 40px;
  font-family: Lato ,'Arial Narrow', sans-serif; 
  color: #ecf0f1;
  height: 260px;
  overflow:hidden;
}

.visible {
  font-weight:600;
  overflow:hidden;
  height:40px;
  padding:0 40px;
  }

  .visible:before {
    content:'[  ';
    left: 0;
    line-height:40px;
  }
  .visible:after {
    content:']';
    position:absolute;
    right: 0;
    line-height:40px;
  }
  .visible:after, .visible:before {
    position:absolute;
    top:0;
    color:#16a085;
    font-size:42px;
    -webkit-animation-name: opacity;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: opacity;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.content p {
  display:inline;
  float:left;
  margin:0;
}

.content ul {
  margin-top:0;
  padding-left:110px;
  text-align:left;
  list-style:none;
  -webkit-animation-name: change;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.content ul li {
  line-height:40px;
  margin:0;
}

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

@-webkit-keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}

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

@keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}

/*end hello*/

#myNavbar a{
  color: white;
  font-size: large;
 
}

#myNavbar .social a{
  padding: 10px 10px 10px 10px;
}

@media only screen and (min-width : 768px){
 .social{
    float: right;
  }
  #myNavbar .social a {
  font-size: xx-large;
  padding: 50px 10px 10px 10px;
  color:black;
  }
}