#container {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    z-index: 1;
}


#dock-wrapper {
    display: inline-block;
    position: relative;
    top: -11px;
}

#dock {
    list-style: none;              
    margin: 0 0 0 0;
    background: #385031a6;
    padding: 5px;
    border-radius: 8px;
    overflow: hidden;
}

#dock li {
    position: relative;
    top: 4px;
    width: 80px;
    float: left;    
    cursor: pointer;
}

#dock li a,
#dock li > div{
    display: inherit;
    transition: 0.15s linear;
    -webkit-transition: 0.15s linear;
    -moz-transition: 0.15s linear;
    transition-property: transform, margin;
    -webkit-transition-property: -webkit-transform, margin;
    -moz-transition-property: -moz-transform, margin;
    margin: 0 auto;
    text-decoration: none;
}

#dock > li > a > img,
#dock li a, #dock li > div{
   position: relative;
   z-index: 1;
}

#dock li:hover a {
    transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform: scale(1.1);
    margin: 0 10px;    
}

#dock li .title {
    position: relative;
    font-size: 0.7rem;
    position: relative;
    top: -7px;
    background: #282829a3;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
}

@media only screen and (max-height: 500px) {
    #container{
        height: 100%;
        width: 12%;
    }
    #dock-wrapper {
        position: absolute;
        top: 50%;
        right: 1%;
        transform: translateY(-50%);
    }
    #dock {
        height: auto;
        background: #80808069;
        padding: 5px 5px 5px 5px;
    }
    #dock li {
        float: none;
    }
    
    #dock li .title {
        margin-bottom: 10px;
    }
    
}