.controlbutton {
    margin:0px;
    padding:0px;
    vertical-align:middle;
    display:inline-block;
}

.controlbutton-small {
    margin:0px;
    vertical-align:middle;
    display:inline-block;
}

.controlbutton {
    width: 22vw;
    height: 22vw;
}

.controlbutton-small {
    width: 18vw;
    height: 18vw;
}

.shiftleft
{
    left:-8px;
    position:relative;
    z-index:250;
}

.shiftleft2
{
    left:-16px;
    position:relative;
}

.shiftleft3
{
    position:relative;
    left:-24px;
    z-index:5;
}

.shiftleft4
{
    position:relative;
    left:-32px;
    z-index:1;
    margin-right: -32px;
}

/*
=====================================================================
= Responsive Layout - Portrait, nowplaying at top
= Changes at 700px high
=====================================================================
*/

@media screen and (min-height: 700px) and (min-width: 400px) and (max-width: 699px) and (orientation: portrait) {

    .controlbutton
    {
        width: 9vw;
        height: 9vw;
    }

    .controlbutton-small
    {
        width: 8vw;
        height: 8vw;
    }

    .shiftleft
    {
        left: 0px;
        position:relative;
        z-index:250;
    }

    .shiftleft2
    {
        left: 0px;
        position:relative;
    }

    .shiftleft3
    {
        position:relative;
        left: 0px;
        z-index:5;
    }

    .shiftleft4
    {
        position:relative;
        left: 0px;
        z-index:1;
        margin-right: 0px;
    }

}


@media screen and (min-height: 700px) and (min-width: 700px) and (orientation: portrait) {

    .controlbutton {
        width: 9vw;
        height: 9vw;
    }

    .controlbutton-small {
        width: 7vw;
        height: 7vw;
    }

}

@media screen and (max-width: 699px) and (orientation: landscape) {

    .controlbutton {
        width: 10vw;
        height: 10vw;
    }

    .controlbutton-small {
        width: 8vw;
        height: 8vw;
    }
}

@media screen and (min-width: 700px) and (max-height: 399px) and (orientation: landscape) {

    .controlbutton {
        width: 10vw;
        height: 10vw;
    }

    .controlbutton-small {
        width: 8vw;
        height: 8vw;
    }
}

@media screen and (min-width:700px) and (min-height: 400px) and (orientation: landscape) {

    .controlbutton {
        width: 9vw;
        height: 9vw;
    }

    .controlbutton-small {
        width: 7vw;
        height: 7vw;
    }

}

@media screen and (min-width:800px) and (min-height: 400px) and (orientation: landscape) {

    .controlbutton {
        width: 6vw;
        height: 6vw;
    }

    .controlbutton-small {
        width: 5vw;
        height: 5vw;
    }

}

@media screen and (min-width:1024px) and (min-height: 400px) and (orientation: landscape) {

    .controlbutton {
        width: 6vw;
        height: 6vw;
    }

    .controlbutton-small {
        width: 4.5vw;
        height: 4.5vw;
    }

}