body { 
    margin: 0;
    padding: 0;
    overflow: hidden;
}

canvas {
    outline: none;
}

.hidden {
    display: none;
}
.left {
    left: 60px;
}
.middle {
    right: 130px;
}
.right {
    right: 60px;
}

.scale-button {
    width: 4%;
    height: auto;
    min-width: 30px;
    max-width: 40px;
    position: absolute;
    bottom: 60px;
}
.scale-button:hover {
    cursor: pointer;
}

.grab-cursor {
    cursor: grab;
}

.grabbing-cursor {
    cursor: grabbing;
}

#loader-container {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.rotate-icon {
    width: 4%;
    height: auto;
    min-width: 30px;
    max-width: 40px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    -webkit-animation: fadein 4s;
    -moz-animation: fadein 4s;
    -ms-animation: fadein 4s;
    -o-animation: fadein 4s;
    animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* reduce space between buttons on smaller screens */
@media only screen and (max-width: 992px) {
    .middle {
        right: 120px;
    }
}

@media only screen and (max-width: 600px) {
    .middle {
        right: 110px;
    }
}