.topbtn {
  position: fixed;
  top: 80%;
  right: 35px;
  z-index: 999;
}
.topbtn li {
  margin-top: 10px;
  height: 30px;
}
.topbtn a {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  background: #fff;
  border: 1px solid #ccc;
  transition: opacity .6s ease-in-out;
}
.topbtn a.disable {
  opacity: .6;
  cursor: default;
}
.topbtn a.disable:hover:before {
  border-top-color: #999;
  border-bottom-color: #999;
}
.topbtn a:before {
  transition: .3s ease-in-out;
}
.topbtn a:hover:before {
  border-top-color: #00b4d9;
  border-bottom-color: #00b4d9;
}
.topbtn .icon {
  position: absolute;
  font-size: 14px;
  padding:6px 0 0 7px;
}
.topbtn .icon:hover {
  color: #00b4d9;
}
@keyframes swings {
  0% {right:120px;}
  100% {right:150px;}
}
@media screen and (max-width:767px) {
 .topbtn {right: 10px;}
}

/* Social List */
.social-list {
  position: fixed;
  right: 35px;
  top: 70%;
  list-style: none;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  -webkit-transform: translateY(-55%);
  -ms-transform: translateY(-55%);
  transform: translateY(-55%);
  z-index: 999;
}

.social-list li {
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  margin-bottom: 3px;
  text-align:center;
}
.social-list li a,
.social-list li a:visited {
  color: #555;
  text-align:center;
}
.social-list li a:hover,
.social-list li a:focus,
.social-list li a:active {
  color: #00b4d9;
}

@media (max-width: 767px) {
 .social-list {
   display: none;
 }
}