@media only screen and (max-device-width: 680px) {
    body {

    }
    #OptionColor
    {
        visibility:hidden;
    }
    #OptionBack
    {
        visibility:hidden;
    }
    .LoginBox {
        position:fixed;
        top: 30%;
        left: 50%;
        width:30em;
        height:18em;
        margin-top: -9em; /*set to a negative number 1/2 of your height*/
        margin-left: -15em; /*set to a negative number 1/2 of your width*/
    }

    .LoginBox h2 {
        color: white;
        font-family:  "Segoe UI", "Open Sans", Arial, Helvetica, Sans-Serif;
        font-size: 15px;
        position: relative;
    }
    .LoginBox input {
        padding: 5px;
        display: block;
    }
        #avatarImg
        {
            width:100px;
            position: relative;
            top: -50px;
            left:50px;
        }
    #section1 h1, #section2 h1
    {
        font-size: 20px;
    }
    .metro .tile
    {
        border:1px solid #ffffff;
    }
    .metro .tile.wide.imagetext
    {
        width:230px;
        height:60px;
    }
    .metro .tile .image-wrapper span.icon
    {
        width:40px;
        height:40px;
        font-size:40px;
        line-height:40px;
    }
    .metro .tile .text4
    {
        font-size:12px;

    }
    .metro .tile.wide.imagetext .image-wrapper
    {
        width:40px;
        height:40px;
    }
    .panorama .panorama-sections .panorama-section.tile-span-2
    {
        width:250px;
    }
    .panorama
    {
        margin:0;
    }
    .metro .tile.wide.imagetext
    {
        padding:10px;
    }
    .panorama .panorama-sections .panorama-section
    {
        margin-right:25px;
    }
    .metro .tile
    {
        height:80px;
    }
    .metro .tile.app .image-wrapper
    {
        display:block;
        margin-left:10px;
        float:left;
        width:40px;
        height:40px;
        padding:0;
        margin-top:10px;

        }

/*Customer-Index*/
    #header-container h1
    {
        font-family:  "Segoe UI", "Open Sans", Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        padding-left:10px;
        line-height:0px;
    }
    #container
    {
        width:680px;
    }
    [class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"]
    {
        width:45%;
        float:left;
    }
    .pull-right h3
    {
        font-family:  "Segoe UI", "Open Sans", Arial, Helvetica, Sans-Serif;
        font-size:8px;
        display:none;
    }
    .pull-right h5
    {
        font-family:  "Segoe UI", "Open Sans", Arial, Helvetica, Sans-Serif;
        font-size:6px;
        display:none;
    }
    #nav-bar
    {
        margin-bottom:1px;
        margin-top:5px;
        height:30px;
    }
    #wizard-step-content h4
    {
        font-size:10px;
        padding-left:10px;
    }
    #wizard-step-content br
    {
        display:none;
    }
    #top-info > a b
    {
        font-size:16px;
        line-height:20px;
        
    }
    #top-info > a
    {
        width:20px;
        height:20px;
        line-height:0;
        border-bottom-width:1px;
        margin-top:5px;
    }
    .StructInfoH2 
    {
        font-size:14px;
        line-height:20px;
    }
    .input-append input
    {
        font-size:10px;
        border-width:1px;
        margin-left:10px;
    }
    .win-commandimage
    {
        width:20px;
        height:20px;
        font-size:12px;
        line-height:20px;
    }
    #SearchResults1
    {
        top: -8px !important;
    }
    hr.win-command
    {
        height:20px;
    }
    .win-commandlayout
    {
        min-height:34px;
    }
    a.win-command, button.win-command
    {
        min-width:30px;
    }
    a.win-command, button.win-command
    {
        margin:0px;
    }
}