/* Quick Navigate */

/* Mobile Style */
@media only screen and (max-width: 768px) {

    .quick_nav {
        display: none;
    }

}

/* Desktop Style */
@media screen and (min-width: 769px) {

    .quick_nav {
        position: relative;
        display: inline-block;
        vertical-align: bottom;
        width: 25%;
    }

    .quick_nav .body {
        position: relative;
        width: 100%;
    }

    /* use main_outer.svg to span the size of .body */
    .quick_nav .body img:not(.main.outer) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .quick_nav .body .main.outer {
        width: 100%;
    }

    .quick_nav .body .glow {
        display: none;
    }

    .quick_nav a {
        font-size: 1.125rem;
        font-weight: 300;
        color: white;
        transition: 0.2s;
    }

    .quick_nav_item01 {
        position: absolute;
        top: 13%;
        left: 6%;
    }
    .quick_nav_item01 a:hover {
        color: #98fff2;
        text-shadow: 0 0 10px #98fff2, 0 0 20px #98fff2;
    }

    .quick_nav_item02 {
        position: absolute;
        top: 20%;
        right: 7%;
    }
    .quick_nav_item02 a:hover {
        color: #deffb7;
        text-shadow: 0 0 10px #deffb7, 0 0 20px #deffb7;
    }

    .quick_nav_item03 {
        position: absolute;
        bottom: 45%;
        left: 32%;
    }
    .quick_nav_item03 a:hover {
        color: #f2a1ff;
        text-shadow: 0 0 10px #f2a1ff, 0 0 20px #f2a1ff;
    }

    .quick_nav_item04 {
        position: absolute;
        bottom: 10%;
        right: 35%;
    }
    .quick_nav_item04 a:hover {
        text-shadow: 0 0 10px white, 0 0 20px white;
    }

}