@media (max-width: 1280px) {
    .navigation .dropdown.locationmenu { border-left:0; border-bottom-left-radius: 0; }
    .navigation .dropdown.adminmenu { border-right:0; border-bottom-right-radius: 0; }
}

@media (max-width: 768px) {
    /* Splits */
    .splitcontainer { width:100%; height:100%; overflow:hidden; position: relative; }
    .split:first-child { width:100%; position: absolute; top:0; left:0px; border:0; padding:0; }
    .split:last-child { width:100%; position: absolute; top:0; left:100%; border-left:2px solid rgba(0,0,0,.15); padding:0; }
    .split:last-child .content { padding: 10px 16px 16px 16px; }

    .split { transition: all .3s ease-in-out; }
    .split .filters { display:none; }
    .split .trigger { position: absolute; top:0px; right:0px; width: 56px; height: 64px; text-align: right; padding-right:6px; }
    .split .trigger:after { content:'\f142'; font-size:20px; font-family: 'FontAwesome'; color:#333; line-height: 64px; text-align: center; }
    .split .trigger.active:after { content:'\f0da  \f142'; }
}

@media (max-width: 640px) {

    /* Scrollbars */
    ::-webkit-scrollbar { width: 0; }
    ::-webkit-scrollbar-track { }
    ::-webkit-scrollbar-thumb { background-color: initial; }

    /* View */
    view { position: relative; padding:0; }

    /* Splits */
    .split .trigger { padding-right:20px; }

    /* Fonts */
    body { font-size:12px; }
    label { font-size:10px;  }
    h1 { font-size:24px; }

    /* Floats */
    .float50 {
        width:100%;
        padding-left:0 !important;
        padding-right:0 !important;
        margin-bottom:24px;
    }

    /* Content */
    .content {padding:16px;}

    /* Navigation */
    .navigation .logo { height: 20px; margin-top: 6px; }
    .navigation .menuwrap { padding:0;}
    .navigation .menu table td p { display:none; }
    .navigation .admin p.short, .navigation .location p.short, .navigation .back p.short { display:inline; }
    .navigation .admin p.long, .navigation .location p.long, .navigation .back p.long { display:none; }
    .navigation .dropdown { max-width: 100%; padding: 24px; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }

    /* Tabs */
    .tab:first-child { margin-left:0; }
    .tab:first-child:after { display:none; }
    .tab:last-child:after { width:64px; }

    /* Lists */
    ul.list li.subheader { padding: 24px 16px 16px 0; }
    ul.list li.subheader:first-child { padding: 16px 16px 16px 0; }
    ul.list li.item .icon { display:none; }
    ul.list li.item.draggable .icon {
        display:table-cell;
        width:24px;
        padding:16px 0;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAFUlEQVQYV2NkYGBg+P//vy8jI+NmABdCBAJ0E6UgAAAAAElFTkSuQmCC) repeat;
    }
    ul.list li.item .icon i { display:none; }
    ul.list li.item .desc { padding:16px 0; }
    ul.list li.item .desc { max-width: 0; }
    ul.list li.item .desc p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    ul.list li.item .button { padding:0 10px 0 0; }
    ul.list li.item div.checkbox { width:60px; }

    /* Listbuttons */
    ul.buttons li.item .icon { padding: 16px 10px 16px 6px; }


    /* Views */
        /* Login */
        view.login .loginform .table { margin-bottom:16px; }
        view.login .loginform .icon { display: table-cell; width:64px; position: relative; padding-left:16px; }
        view.login .loginform .icon i { font-size:84px; }
        view.login .loginform .msg { display:table-cell; padding-left:24px; padding-right:16px;  font-size:12px;}
        view.login .loginform .msg h1 { margin-top:0; font-size:24px; }
        view.login .loginform .msg p.short { display:inline; }
        view.login .loginform .msg p.long { display:none; }
}

@media (max-height: 1024px) {
    .gutterspacer { height:76px; }
    .gutterwrapper { width:100%; max-width: 1280px; margin:0 auto; padding: 0 16px;}
    .gutter { background:rgba(240,240,240,0.9); position: fixed; width:100%; bottom:0; left:0; right:0; margin:0; padding:16px 0; display:none; }
    .content.scrollable { height:100%; max-height:100%; }

    .splash .logo { height:calc(100vh - 100px); }
    .splash .footer { height:100px; background-image: radial-gradient( 100% 100px at top, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%); }
}