@import "https://fonts.googleapis.com/css?family=Roboto:500";
.sag-icon-bar{position:fixed;top:60%;right:0;width:50px;font-family: 'Roboto', 'sans-serif';z-index:99;}
.sag-icon-bar ul {list-style-type: none;margin: 0;padding: 0;display:flex;flex-direction:column}
.sag-icon-bar ul li{padding:10px}
.sag-icon-bar ul li.s1{background:#2db842;border-radius:10px 0 0 0}
.sag-icon-bar ul li.s2{background:#525252}
.sag-icon-bar ul li.s4{background:#DF1183}
.sag-icon-bar ul li.s3{width:100px;line-height:30px;background:#fe9301;border-radius:10px 0 0 0;letter-spacing:1px;
    font-size:22px;font-weight:250;transform:rotate(-90deg) translateX(-100%);transform-origin:0 0;}
.sag-icon-bar ul li.s1:hover{background:#25c73d}
.sag-icon-bar ul li.s2:hover{background:#454545}
.sag-icon-bar ul li.s4:hover{background:#BD0F6F}
.sag-icon-bar ul li.s3:hover{background:#e08100}
.sag-icon-bar ul li a{color:#fff;display: flex;align-items: center;justify-content: center;text-decoration:none}
.sag-icon-bar ul li a i{font-size:24px;color:#fff}
.sag-icon-bar ul li.s3 a i{margin-right:5px}

@media only screen and (max-width: 560px) {
.sag-icon-bar{top:auto;bottom:0;width:100%}
.sag-icon-bar ul {flex-direction:row}
.sag-icon-bar ul li.s1{width:18%;border-radius:0}
.sag-icon-bar ul li.s2{width:18%}
.sag-icon-bar ul li.s4{width:18%}
.sag-icon-bar ul li.s3{font-size:18px;border-radius:0;line-height:18px;width:46%;transform:unset}
}