html {
    height: 100%;
    overflow-y: scroll;
}

body#page_gallery {
    background-image: url('../img/backgrounds/bg_restaurant.jpg');
    background-position: 50%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

#scroll {
    overflow: hidden;
    position: absolute;
    right: 48px;
    border-radius: 50px;
    z-index: 1000;
    transform-style: preserve-3d;
}

#navi {
    list-style: none;
    padding: 0;
    transition: transform .3s ease-in-out;
}

#navi li {
    padding: 10px;
    background: linear-gradient(45deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.5));
    border-radius: 50%;
    width: 110px;
    height: 110px;
    margin: 10px 0;
    transition: all .5s linear;
    overflow: hidden;
}

#navi li:hover {
    cursor: pointer;
    background: linear-gradient(45deg, rgba(0, 0, 0, .5), rgba(0, 10, 190, 0.5));
}

#navi li a {
    display: block;
    background-position: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform .35s linear;
}

#navi li:hover:nth-child(2n+1) a {
    transform: scale(1.05) rotate(2deg);
}

#navi li:hover:nth-child(2n) a {
    transform: scale(1.05) rotate(-2deg);
}

#prev {
    width: 69px;
    height: 37px;
    background: url(../gfx/btn_gallery.png) no-repeat left top;
    position: absolute;
    top: 55px;
    right: 77px;
    z-index: 1001;
}

#prev:hover {
    background-position: -69px top;
    cursor: pointer;
}

#next {
    width: 69px;
    height: 37px;
    background: url(../gfx/btn_gallery.png) no-repeat left -37px;
    position: absolute;
    bottom: 55px;
    right: 77px;
    z-index: 1001;
}

#next:hover {
    background-position: -69px -37px;
    cursor: pointer;
}