body{
    background-color:#f2f2f2
}

main{
    margin-bottom:200%
}

.floating-menu{
    border-radius: 100px;
    z-index:999;
    padding-top:10px;
    padding-bottom:10px;
    left:0;
    position:fixed;
    display:inline-block;
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%)
}

.main-menu{
    margin:0;
    padding-left:0;
    list-style:none
}

.main-menu li a{
    display:block;
    padding:1px;
    color:#fff;
    border-radius:50px;
    position:relative;
    -webkit-transition:none;
    -o-transition:none;
    transition:none
}

.main-menu li a:hover{
    background:rgba(244,244,244,.8)}
    
.menu-bg{
    background-image:-webkit-linear-gradient(top,#b1b1b1 0,#413e3e 100%);
    background-image:-o-linear-gradient(top,#b1b1b1 0,#413e3e 100%);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#b1b1b1),to(#413e3e));
    background-image:linear-gradient(to bottom,#b1b1b1 0,#413e3e 100%);
    background-repeat:repeat-x;
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50px;
    z-index:-1;
    top:0;
    left:0;
    -webkit-transition:.1s;
    -o-transition:.1s;
    transition:.1s
}

.ripple{
    position:relative;
    overflow:hidden;
    transform:translate3d(0,0,0)
}

.ripple:after{
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    pointer-events:none;
    background-image:radial-gradient(circle,#000 10%,transparent 10.01%);
    background-repeat:no-repeat;
    background-position:50%;
    transform:scale(10,10);
    opacity:0;
    transition:transform .5s,opacity 1s
}

.ripple:active:after{
    transform:scale(0,0);
    opacity:.2;
    transition:0s
}