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

    /* Force table to not be like tables anymore */
    .no-more-tables table,
    .no-more-tables thead,
    .no-more-tables tbody,
    .no-more-tables th,
    .no-more-tables td,
    .no-more-tables tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .no-more-tables tr { border: 1px solid #ccc; border-bottom:0px;}
    .no-more-tables tr:last-of-type { border-bottom: 1px solid #ccc;}

    .no-more-tables td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 25%;  /** Determins the width of the titles (left column on mobile view)**/
        white-space: normal;
        text-align:left;
    }

    .no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 25%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }

    /*
    Label the data
    */
    .no-more-tables td:before { content: attr(data-title); }


    /** ADD ONS **/
    .responsive-tbl tbody tr td:first-of-type,
    .responsive-tbl tbody tr td:last-of-type{
        /**display:none !important;**/
    }
    .responsive-tbl tbody tr{
        margin:0px;
    }

}
 @media (min-width: 800px) and (max-width: 1024px) { 
    body nav .container .collapse.navbar-collapse {
        display: block; 
        border: 0px solid #ffffff;
        border-top: 0px solid #ffffff}
        .navbar-header {display: none;}
        nav .container ul.nav.navbar-nav {
        float: left !important;
        overflow-x: hidden;
        white-space: nowrap;
        width: 100%;
        margin: 0px;
    }
    
    nav .container ul.nav.navbar-nav li.nav-divider { 
        display: none;
    }

    nav .container ul.nav.navbar-nav li{
        position: relative; 
        border-right: 1px solid #cacaca;
        border-left: 0px solid #656565;
        float: none;
        display: inline-block;
        margin-left: -3px;
    }
    
    nav #nav-scroll-right, 
    nav #nav-scroll-left {
        display: block;
    }
        
    nav #nav-scroll-right, 
    nav #nav-scroll-left {
            height: 46px;
            width: 40px;
            padding-top: 13px;
            background-color: rgba(0,0,0, 0.5);
            position: absolute;
            color: #fff;
            transition: all 0.5s ease;
            transition-property: all;
            transition-duration: 0.5s;
            transition-timing-function: ease;
            transition-delay: initial;
            display: block;
    }
    
    nav #nav-scroll-left {
        left: 0px;
        padding-left: 11px;
    }

    nav #nav-scroll-right:hover, 
    nav #nav-scroll-left:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }

    body nav .container {
        width: calc(100% - 80px);
        margin-left: 40px;
        float: left;
    }

    body nav #nav-scroll-right {
        right: 0px;
        padding-left: 15px;
    }

    nav .container ul.nav.navbar-nav > li > a {
        padding: 13px 50px 13px 50px;
    }

    /* event-detail sharebutton*/
    .topbuttongroup{
        top: 38px;
        padding:0;
    }

    .page-header{
        margin-top:15px;
    }

    /** FIX SIDEBAR NOT SHOWING ON IFRAME WHEN SIZE IS AROUND 860px (Bug #97645) **/
    .toggled .sidebar-nav li form, 
    .toggled .sidebar-nav li span, 
    .toggled .sidebar-nav li label{
        display:block !important;
    }
    .toggled .sidebar-nav li form .hidden-lbl{
        display:none !important;
    }
}