.move_top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 40px;
    z-index: 30;
}

.move_right {
    position: fixed;
    right: 0;
    top: 0;
    width: 40px;
    height: 100vh;
    z-index: 30;
}

.move_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 40px;
    z-index: 30;
}

.move_left {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 100vh;
    z-index: 30;
}

/* DIAGONAL: TOP + LEFT */
.diagonal_moveTL {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    z-index: 31;
    border-radius: 0% 0% 100% 0%;
}

/* DIAGONAL: TOP + RIGHT */
.diagonal_moveTR {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 0;
    right: 0;
    z-index: 31;
    border-radius: 0% 0% 0% 100%;
}

/* DIAGONAL: BOTTOM + LEFT */
.diagonal_moveBL {
    position: fixed;
    width: 100px;
    height: 100px;
    bottom: 0;
    left: 0;
    z-index: 31;
    border-radius: 0% 100% 0% 0%;
}

/* DIAGONAL: TOP + RIGHT */
.diagonal_moveBR {
    position: fixed;
    width: 100px;
    height: 100px;
    bottom: 0;
    right: 0;
    z-index: 31;
    border-radius: 100% 0% 0% 0%;
}

/* TOP */
.goUp {
    background-image: url('../images/arrow_top.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 4vw;
    height: 4vw;
    position: fixed;
    left: calc(50% - 2vw);
    top: 1vw;
    transition: 0.5s ease;
    animation: arrow_move_up 1.5s infinite ease-in-out;
    z-index: 30;
}

.goUp:hover {
    background-image: url('../images/arrow_hover_top.png');
}

/* BOTTOM */
.goDown {
    background-image: url('../images/arrow_bottom.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 4vw;
    height: 4vw;
    position: fixed;
    left: calc(50% - 2vw);
    bottom: 1vw;
    transition: 0.5s ease;
    animation: arrow_move_down 1.5s infinite ease-in-out;
    z-index: 30;
}

.goDown:hover {
    background-image: url('../images/arrow_hover_bottom.png');
}

/* LEFT */
.goLeft {
    background-image: url('../images/arrow_left.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 4vw;
    height: 4vw;
    position: fixed;
    top: calc(50% - 2vw);
    left: 1vw;
    transition: 0.5s ease;
    animation: arrow_move_left 1.5s infinite ease-in-out;
    z-index: 30;
}

.goLeft:hover {
    background-image: url('../images/arrow_hover_left.png');
}

/* RIGHT */
.goRight {
    background-image: url('../images/arrow_right.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 4vw;
    height: 4vw;
    position: fixed;
    top: calc(50% - 2vw);
    right: 1vw;
    transition: 0.5s ease;
    animation: arrow_move_right 1.5s infinite ease-in-out;
    z-index: 30;
}

.goRight:hover {
    background-image: url('../images/arrow_hover_right.png');
}

@keyframes arrow_move_up {
      0% { transform: translate(0, 0.5vw); }
     50% { transform: translate(0, 0);     }
    100% { transform: translate(0, 0.5vw); }
}

@keyframes arrow_move_down {
      0% { transform: translate(0, 0);     }
     50% { transform: translate(0, 0.5vw); }
    100% { transform: translate(0, 0);     }
}

@keyframes arrow_move_left {
      0% { transform: translate(0, 0);     }
     50% { transform: translate(0.5vw, 0); }
    100% { transform: translate(0, 0);     }
}

@keyframes arrow_move_right {
      0% { transform: translate(0.5vw, 0); }
     50% { transform: translate(0, 0);     }
    100% { transform: translate(0.5vw, 0); }
}