.dock,.dockOff,.floatUp,.floatDown,.orbSpace,.orbOff
{
    margin: 0;
    width: 70%;
    bottom: 2.34%;
    left: 15%;
    position: fixed;
    border-radius: 50px;
    background-color: rgb(44,44,44,0.4);
    transition: background-color 0.4s, transform 0.3s ,box-shadow 0.7s;
    transition-timing-function: ease;
    animation-name: glow;
    animation-duration: 0.7s;
    padding: 0.47%;
    /*box-shadow: 0px 0px 50px black;*/
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
}

.dockOff
{
    animation-name: close;
    animation-duration: 0.4s;
    padding: 0.47%;
    animation-fill-mode: both;
}

.floatUp
{
    bottom: 10%;
    animation-name: Up;
    animation-fill-mode: both;
    animation-duration: 0.7s;
}

.floatDown
{
    bottom: 2.34%;
    animation-name: Down;
    animation-fill-mode: both;
    animation-duration: 0.7s;
}

@keyframes Up {
    0% {
        bottom: 2.34%;
        /*width: 200%;
        left: -50%;
        opacity: 0;
        transform: scale(4.7);*/
    }
}

@-webkit-keyframes Up {
    0% {
        bottom: 2.34%;
    }
}


@keyframes Down {
    0% {
        bottom: 10%;
        /*width: 200%;
        left: -50%;
        opacity: 0;
        transform: scale(4.7);*/
    }
}

@-webkit-keyframes Down {
    0% {
        bottom: 10%;
    }
}

@keyframes close {
     90% {
        border-radius: 4px;
        opacity: 0.4;
       
    }
    100% {
        bottom: -47%;
    }
}

@-webkit-keyframes close {
    90% {
        border-radius: 4px;
        opacity: 0.4;
       
    }
    100% {
        bottom: -47%;
    }
}

.dockLink:link,
.dockLink:active,
.dockLink:visited {
    font-family: Arial;
    color: white;
    transition: color 0.5s;
}

.dockLink:hover {
    color: darkgrey;
    text-decoration: none;
    cursor: none;
}

/*@media not all and (min-resolution:.001dpcm) { 
    @media {
        .dock { 
            
            padding-top: 0.74%;
        }
    }
}*/

@keyframes glow {
    0% {
        bottom: -47%;
        /*width: 200%;
        left: -50%;
        opacity: 0;
        transform: scale(4.7);*/
    }
}

@-webkit-keyframes glow {
    0% {
        bottom: -47%;
    }
}

.dock:hover,.floatUp:hover,.floatDown:hover {
    transform: scale(1.047);
    background-color: rgb(7,7,7,0.5);
}

.docktable {
    width: 100%;
    font-size: large;
}

.dockFooterTable {
    width: 100%;
    padding: 2%;
    font-size: large;
}

#link_mobile, #list_mobile
{
    background-color: black;
    display: none;
}

/*ORB BEGINS */

    /*#orbBar
    {
        position: fixed;
        bottom: 3%;
        width: 40%;
        background-color: transparent;
        left: 30%;
        border-radius: 44px;
        padding: 0.4%;
        filter: drop-shadow(0px 0px 13px black);
    }*/

    .orbSpace, .orbOff
    {
        position: fixed;
        width: 40%;
        bottom: 3%;
        background-color: transparent;
        left: 30%;
        border-radius: 47px;
        padding: 0.3%;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        filter: drop-shadow(0px 0px 13px black);
    }

    .orb
    {
        padding: 12%;
        border-radius: 100%;
        border: none;
        transform: scale(1);
        transition: all 0.4s;

        animation-name: rotateAxis;
        animation-duration: 1s;
        animation-delay: 0.5s;
        animation-timing-function: ease-in-out;
    }

    .dockOff
    {
        animation-name: close;
        animation-duration: 0.4s;
        animation-fill-mode: both;
    }

    .orb:hover
    {
        cursor: none;
        transform: scale(1.74);
    }

    .orbOption:hover
    {
        animation-name: rotateAxis;
        animation-duration: 1s;
        
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    @keyframes rotateAxis
    {
        0%
        {
            transform: rotate(0);
        }

        100%
        {
            transform: rotate(360deg);
        }
    }

    #orbInfo
    {
        position: fixed;
        border-radius: 47px;
        background-color: rgb(13,13,13,0.4);
        color: white;
        left: 44%;
        bottom: 7.4%;
        padding: 0.5%;
        padding-left: 1%;
        padding-right: 1%;
        display: none;
        -webkit-backdrop-filter: blur(13px);
        backdrop-filter: blur(13px);
    }

    .genie
    {
        animation-name: genieRaise;
        animation-duration: 0.25s;
        animation-timing-function: ease-in-out;
    }

    @keyframes genieRaise
    {
        0%
        {
            bottom: -4%;
            opacity: 0;
        }

        69%
        {
            opacity: 0%;
        }

        100%
        {
            bottom: 7.7%;
            opacity: 1;
        }
    }

    /*.genieX
    {
        animation-name: genieLower;
        animation-duration: 0.1s;
        animation-timing-function: ease-in-out;
    }

    @keyframes genieLower
    {
        0%
        {
            bottom: 7.7%;
            opacity: 1;
        }

        90%
        {
            opacity: 1%;
        }

        100%
        {
            bottom: -4%;
            opacity: 0;
        }
    }*/

    #footerOrb
    {
        background-image: linear-gradient(147deg, magenta, black);
    }

    #siOnlineOrb
    {
        background-image: linear-gradient(to top, darkred, red, orange);
    }

    #siNoteOrb
    {
        background-image: linear-gradient(to bottom, aqua, blue);
    }

    #siCDFOrb
    {
        background-image: linear-gradient(to bottom, brown, orange, yellow);
    }

    #siTimesOrb
    {
        background-image: linear-gradient(to bottom, yellow, red, blue);
    }
    #waOrb
    {
        background-image: linear-gradient(45deg, grey, black);
    }
    #siTunesOrb
    {
        background-image: linear-gradient(45deg, aqua, blue, magenta);
    }
    #siPracticeOrb
    {
        background-image: linear-gradient(to bottom, yellow, aqua);
    }

/*ORB ENDS*/

@media only screen and (max-width: 1000px) {

#link:
{
    color: white;
}

#link_mobile
{
    background-color: transparent;
    display: block;
}
#list_mobile
{
    display: block;
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    background-color: rgb(13,13,13,0.4);
    /*box-shadow: 0px 0px 50px black;*/
    margin-bottom: 3%;
}
    .dock,.floatUp,.floatDown,.orbSpace {
        width: 94%;
        left: 3%;
        border: none;
        display: none;
    }
    .docktable {
        width: 100%;
        /*font-family: 'Myriad Pro Regular';*/
        font-size: medium;
    }
    #homeDock {
        box-shadow: 0px 0px 3px magenta;
    }
    #OnlineDock {
        box-shadow: 0px 0px 3px red;
    }
    #CDFdock {
        box-shadow: 0px 0px 3px yellow;
    }
    #wadock {
        box-shadow: 0px 0px 3px grey;
    }
    #scheduleDock {
    box-shadow: 0px 0px 3px grey;
    }
}

/*@media only screen and (min-width: 1920px) {
    .dock {
        padding-top: 0.7%;
    }
}*/