html[dir="ltr"] #vala_scrolltotopbutton{
 right: 30px; 
}
html[dir="rtl"] #vala_scrolltotopbutton{
 left: 30px; 
}
@media screen and (max-width: 979px) {
  #vala_scrolltotopbutton {
    bottom:62px!important; 
  }
  
  html[dir="ltr"] #vala_scrolltotopbutton {
    right: 15px!important;
	}
  html[dir="rtl"] #vala_scrolltotopbutton {
    right: 15px!important;
	}
}


{{$opacity = theme.vala_scrollbtn_opacity / 100;}}
#vala_scrolltotopbutton {
  opacity:{$opacity};
  display: inline-block;
  background-color: rgb(var(--vala_scrollbtn_bgcolor));
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: {theme="vala_scrollbtn_margin_bottom"}px;
  transition: background-color .3s ease-in-out, 
  opacity .5s, visibility .5s;
  {{if theme.vala_scrollbtn_heighttoscroll != 0}}
    opacity: 0;
    visibility: hidden;
  {{endif}}
  z-index: 7990;
}
#vala_scrolltotopbutton::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.1em;
  line-height: 30px;
  color: rgb(var(--vala_scrollbtn_color));
}

#vala_scrolltotopbutton.show {
  opacity:{$opacity};
  visibility: visible;
}

#vala_scrolltotopbutton.show:hover {
  opacity:1;
  cursor: pointer;
  background-color: rgb(var(--vala_scrollbtn_bgcolor));
}
#vala_scrolltotopbutton.show:active{
  background-color: rgb(var(--vala_scrollbtn_bgcolor));
}