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

    .entry-body .asset-img-link + span[style^="font-"] {
        display: block}

    .entry-body p a:last-of-type,
    .entry-body p em {
        display: inline-block !important;}
        .entry-body p a:last-of-type img {
            float:none !important;}

    .nomargintop,
    .nomargintop a {float: left}

    .nomargintopgrey.colourbullet,
    .nomarginbottomgrey.colourbullet,
    .nomargintopnopaddingtopgrey.linkdefault {
        clear:both;
        max-width: 320px; /*minus L/R padding 32px*/}

    .desktop {display: none}
    .mobile {display: block}

    /*FOUC*/
    #nav-wrapper {display: none;}
    .main-nav-toggle ~ #nav-wrapper {display: block;}
    /**/

    .top-lvl-opn #tabjoin a {
        /*using this as there is no h3 in this drop down - all sub-dropdowns to show on parent click*/
        display: block !important}

    .second-nav.second-nav-hidden-menu {width:75%;}

    /*individual bg image positioning*/
    .asian-african #outer {
        background-position: 68% -20px}
        .asian-african #outer header.js-open #headingwrapper {
            background-position: 68% center !important;}

    .outfield #outer {
       background-position: -568px -100px;}
    .outfield #outer header.js-open #headingwrapper {
        background-position: -568px -230px !important;}

    .business #outer {
        background-position: -513px -43px;}
        .business #outer header.js-open #headingwrapper {
            background-position: -513px 283px !important;}

    /*.digital-scholarship #outer {
        background-position: center top;}*/
        .digital-scholarship #outer header.js-open #headingwrapper {
            background-position: 50% 42% !important;}

    .endangered-archives #outer {
        background-position: -491px -9px;}
        .endangered-archives #outer header.js-open #headingwrapper {
            background-position: -491px -139px !important;}

    .inspired-by #outer {
        background-position: -413px 99px;}
        .inspired-by #outer header.js-open #headingwrapper {
            background-position: -413px -25px !important;}

    /*Newton bronze statue*/
    .european-studies #outer,
    .music #outer,
    .social-science #outer,
    .uk-web-archive #outer {
        background-position: -579px -105px;}
        .european-studies #outer header.js-open #headingwrapper,
        .music #outer header.js-open #headingwrapper,
        .social-science #outer header.js-open #headingwrapper,
        .uk-web-archive #outer header.js-open #headingwrapper {
            background-position: -579px -229px !important;}

    .untold-lives #outer {
        background-position: -591px 38px;}
        .untold-lives #outer header.js-open #headingwrapper {
            background-position: -591px -92px !important;}

    .sound-vision #outer {
        background-position: -400px 51px;}
        .sound-vision #outer header.js-open #headingwrapper {
            background-position: -400px -77px !important;}

    .science #outer header.js-open #headingwrapper {
       background-position: 50% -129px !important;} 

    /*.newsroom #outer {
        background-position: -400px 51px;}*/
        .newsroom #outer header.js-open #headingwrapper {
            background-position: 50% -127px !important;}

    /**/

    #top #main-navigation {float:left;}

    #top h1 {
        clear:none;
        min-height:100px;
        line-height:100px;
        padding-top:0;
        padding-bottom:0;
        padding-left:0;
        border-bottom:1px solid #fff;
        overflow:hidden;}
        #top h1 a {padding-left: 16px;}


    #site-logo {
        float: left;
        height: 100px;
        border: none;}

    #primarynav {
        border: none;
        position: relative;
        z-index: 9;
        height: auto;
        padding: 0;
        float: none;
        width:auto;}
        #primarynav h3 {font-size: 1.3em}
        #primarynav ul {
            margin:0;
            height:auto;}
            #primarynav li {
                width:100%;
                border-top: 1px solid #fff;
                height:auto;}
                #primarynav li.mega div {
                    /*override blogs.css using ID's*/
                    width:100% !important;
                    position: static;
                    padding: 0;}
                    #primarynav li.mega div .submenucol {
                        width:100%;
                        padding: 0 16px;
                        box-sizing: border-box;}
                    #primarynav li.mega div .submenucol:first-of-type {padding-top: 5px;}
                    #primarynav li.mega div .submenucol:last-of-type {
                        margin-bottom: 10px !important;}
                        #primarynav li.mega div .submenucol h3 {
                            padding:5px;
                            background: #ccc;
                            margin-bottom:0;}
                            #primarynav li.mega div .submenucol p {
                                padding:0;
                                margin:0;
                                background:#e8e8e8;}
                                    .submenucol a {
                                        display: block;
                                        padding:10px;
                                        border-top:1px solid #ccc;}
                            #primarynav li.mega div .submenucol p:first-of-type a {border-top:none;}
                .no-js a.topmenu {
                    display: block;
                    height:34px;
                    line-height:34px;   
                    background-color: #0F375C;
                    border:0;}
                    a:visited.topmenu {color: #fff}

    .main-nav-toggle {
        margin-top: 1px;
        margin-right: 1px;
        z-index: 10;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        margin-bottom: -1px;
        cursor: pointer;
        border: none;}
        .main-nav-toggle > span.list-icon {
            background-image: url(https://blogs.bl.uk/resources/images/bl-web-sprite.png) !important;
            background-position: -343px -56px;
            height: 32px;
            width: 32px;
            display: block;
            background-color: #333;}

        nav#secondnav,
        nav#secondnav ul.nav-list  {
            /* display: inline-block; */
            height: 100%;}
        nav#secondnav ul.nav-list {/*width:80%;*/}
        .open-second-menu nav#secondnav ul.nav-list {
            width:auto;}
            nav#secondnav ul.nav-list a {
                padding:0.5em 1em;}
                nav#secondnav ul.nav-list.v-menu a {
                    background-image:none;
                    background-color:transparent;}
        .open-second-menu #outer {
            overflow:hidden;
            float:left;
            position:absolute;}

    .second-nav.second-nav-hidden-menu {height:auto !important;}
    
    /* .open-second-menu #secondnav li, */
    #secondnav li {font-weight: normal;}
    #secondnav .nav-list.v-menu li  {
        overflow: hidden;
        display: block;
        margin-bottom: 10px;}
        #secondnav .nav-list.v-menu li a {padding:1rem;}
    /* .open-second-menu #secondnav li:last-of-type, */
    #secondnav .nav-list.v-menu li:last-of-type {margin-bottom:0;}
    #secondnav .nav-list.v-menu li.current a  {
        background-color: #1e6eb8;
        width:100%;
        box-sizing: border-box;}

    /*#secondnav a {
        background-image:none !important;}*/
        #secondnav li.first.current a {
            background: #1E6EB8;}
    
    #secondnav a:visited, 
    #secondnav a:hover, 
    #secondnav a:active, 
    #secondnav a:link {
        padding: 0;
        margin: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .open-second-menu .second-nav-hidden-menu {background-color:#0F375C;}
    .open-second-menu .second-nav-hidden-menu #secondnav {display:inline-block;}

    .open-second-menu #secondnav li.secondarynav-morelink {
        background: #fff;
        color: #000 !important;
        opacity: 0.9;
        height: 100%;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        width: 25%;
        padding: 16px;
        box-sizing: border-box;
        /*right: 0;
        cursor: pointer;
        text-transform: uppercase;
        text-align: right;
        display: block;
        margin: -1px 0px 0 0;*/}

    .second-nav.second-nav-hidden-menu li a, 
    .second-nav.second-nav-hidden-menu .current a {
        display: block;
        padding:1rem;}
    #secondnav li.secondarynav-morelink {
        position: absolute;
        right: 0;
        cursor: pointer;
        text-transform: uppercase;
        text-align: right;
        display: block;
        margin: -1px 0px 0 0;
        /*padding: 8px 16px;
        padding: 0.5rem 1rem;*/
        padding-right:12px;}
    
    #headingwrapper {
        display: none;
        /*width:100%;
        overflow: hidden;*/}

    .headerpanel h2 {
        font-size:2.2em;
    }
    
    #inner,
    #leftcol,
    #rightcol,
    #searchpanelwrapper, 
    aside {width:auto;}

    #asian_african_links.module-typelist .module-header {
        padding-left:16px;}

    #leftcol {
        margin:0;
        width:100%;
        box-sizing: border-box;}
        #leftcol .pager-bottom .pager-inner .pager-right a {padding-right:16px;}
        #leftcol .entry-body ol li {
            float: left;
            clear:both;}
        #leftcol .entry-body .photo-wrap {
            width:100% !important;}
            /*#leftcol .entry-body a {
                float:left;
                width:100%;}*/
                /*#leftcol .entry-body a img {
                    float:left;
                    width:100% !important;
                    height:auto;
                    box-sizing: border-box;}*/
        #leftcol .entry-footer {clear:both;overflow:hidden;}

    #headerpanel {
        width:auto;
        padding-right:16px;}

    #searchpanel {width:auto;}

    /*aside#rightcol section {
        margin-right:16px;
        margin-left:16px;}*/
            
    /*aside iframe {margin-left:16px;}*/

    iframe#twitter-widget-0,
    header#top,
    h3.module-header {width:auto;}

    /*XXXXXXXXXXXXXXX Mobile sub nav XXXXXXXXXXXXXXXXXXX*/
    
    .second-nav.second-nav-hidden-menu {
        width: 75%;
        display: none;
        line-height: 150%;
        height: auto;
        float: right;}
         .second-nav {
            overflow: hidden;
            height:35px;
            width:100%;
            background: #0f375c;
            line-height: 35px}
        .second-nav nav,
        .second-nav nav ul.menu {
            display: inline-block;
            height: auto;
            padding:0;
            margin:0;
            width:90%;}
            .second-nav ul.menu li,
            .second-nav ul.menu li a {
                color: #fff;
                font-size:14px;}
            .second-nav li.secondarynav-morelink {
                position: absolute;
                right: 0;
                cursor: pointer;
                text-transform: uppercase;
                text-align: right;
                display: block;
                margin: -1px 0px 0 0;
                padding: 0.5em 1em;}
                .second-nav li a {
                    text-decoration: none;
                    display: block;
                    padding: 0.5em 1em;} 
                .second-nav li.current a {
                    background-color: #1E6EB8;}
    .h-menu li {float:left;} 
    .entry-body p {overflow-wrap: break-word;}
    .entry-body p iframe {width:100%;}
    #searchpanelwrapper  {padding:16px;}
}

@media only screen and (max-width : 601px) {
    
    html:not(.custom-main-index-template) div#searchpanelwrapper {display: none}

    aside#rightcol section a img {
        width:100%;
        height:auto;}

    /*div#searchpanelwrapper {display: none}*/


    aside iframe {margin-left:0;}
    
    #blogsubscribe {
        width:auto;
        float:none;
        text-align: left;
        clear:left;}
        #blogsubscribe input#subscribe {width:210px;}
        #blogsubscribe input.subscribesubmit {margin-top:6px;}

    /*individual bg image positioning*/
    .outfield #outer {
        background-position: -721px -100px;}
        .outfield #outer header.js-open #headingwrapper {
            background-position: -721px -231px !important;}

    /*endangered-archives: see @media 768px*/

    #leftcol .entry-body a img {
        float:left;
        width:100% !important;
        height:auto;
        box-sizing: border-box;}

    /*TODO: */
    #leftcol .entry-body a span img {}


    footer#standardfooter nav {
        float:left;
        margin-top:10px;}
        footer#standardfooter li:first-of-type a:link:first-of-type {
            border:0;
            padding-left:0;}

}

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

    #top h1 a {
        line-height: normal;
        padding-top:32px;
        display: block;
    }

    #top h1 a:empty {display: none;}

    /*individual bg image positioning*/
    .outfield #outer {
        background-position: -741px -100px;}
        .outfield #outer header.js-open #headingwrapper {
            background-position: -741px -231px !important;}

    /*endangered-archives: see @media 768px*/
    
    footer {
        /*all footers but not the page footer*/
        display: flex;
        flex-wrap: wrap;}
        footer span {margin-bottom: 6px;}

    footer#standardfooter li {margin-bottom:10px;}
}

@media only screen and (max-width : 425px) {
    /* individual bg image positioning */
    .asian-african #outer {
        background-position: 72% 4px}
        .asian-african #outer header.js-open #headingwrapper {
            background-position: 72% 757px !important;}*

    .outfield #outer {
        background-position: -796px -100px;}
        .outfield #outer header.js-open #headingwrapper {
            background-position: -796px -231px !important;}

    .business #outer {
        background-position: -893px -42px;}
        .business #outer header.js-open #headingwrapper {
            background-position: -893px -172px !important;}

    /*endangered-archives: see @media 768px*/

    .inspired-by #outer {
        background-position: -408px 109px;}
        .inspired-by #outer header.js-open #headingwrapper {
            background-position: -408px -20px !important;}

    /*Newton bronze statue*/
    .european-studies #outer,
    .music #outer,
    .social-science #outer,
    .uk-web-archive #outer {
        background-position: -830px -105px;}
        .european-studies #outer header.js-open #headingwrapper,
        .music #outer header.js-open #headingwrapper,
        .social-science #outer header.js-open #headingwrapper,
        .uk-web-archive #outer header.js-open #headingwrapper {
            background-position: -830px -231px !important;}

    .untold-lives #outer {
        background-position: -932px 75px;}
        .untold-lives #outer header.js-open #headingwrapper {
            background-position: -931px -82px !important;}

    .sound-vision #outer {
        background-position: -400px 51px;}
        .sound-vision #outer header.js-open #headingwrapper {
            background-position: -400px -77px !important;}

    /*.medieval-manuscripts #outer {
        background-position: -1034px 163px;}*/
        .medieval-manuscripts #outer header.js-open #headingwrapper {
            background-position: 50% 324px !important;}

   /* .science #outer {}
    .science #outer header.js-open #headingwrapper {
       background-position: 50% -129px !important;}*/ 

    p.asset-video iframe {width:100%;}

    .entry-body p img {
        width: 100%;
        height: auto;}
}

@media only screen and (max-width : 375px) {
    /* individual bg image positioning 
    * js-open is js added when carousel is open
    */
    .asian-african #outer {
        background-position: 72% 32px}
        /*.asian-african #outer header.js-open #headingwrapper {
            background-position: 74% center !important;}*/

    .outfield #outer {
        background-position: -846px -100px;}
        .outfield #outer header.js-open #headingwrapper {
            background-position: -846px -231px !important;}

    .business #outer {
        background-position: -942px -44px;}
        .business #outer header.js-open #headingwrapper {
            background-position: -942px -173px !important;}

    .endangered-archives #outer {
        background-position: -540px -9px;}
        .endangered-archives #outer header.js-open #headingwrapper {
            background-position: -531px -138px !important;}

    .inspired-by #outer {
        background-position: -429px 109px;}
        .inspired-by #outer header.js-open #headingwrapper {
            background-position: -429px -20px !important;}

    .untold-lives #outer {
        background-position: -975px 163px;}
        .untold-lives #outer header.js-open #headingwrapper {
            background-position: -975px -21px !important;}

    /*.sound-vision #outer {
        background-position: -400px 51px;}
        .sound-vision #outer header.js-open #headingwrapper {
            background-position: -400px -77px !important;}*/

    /*.medieval-manuscripts #outer {
        background-position: -1034px 163px;}
        .medieval-manuscripts #outer header.js-open #headingwrapper {
            background-position: 50% 324px !important;}*/

    /*.science #outer {}
    .science #outer header.js-open #headingwrapper {
       background-position: 50% -129px !important;} */
}

@media only screen and (max-width : 320px) {
    
    /*iframe#twitter-widget-0 {width:90% !important;}*/

    #searchpanel {margin-bottom:6px;}

   /* individual bg image positioning */

    .outfield #outer {
        background-position: -901px -100px;}
        .outfield #outer header.js-open #headingwrapper {
            background-position: -901px -231px !important;}

    /*.business #outer {
        background-position: -942px -40px;}
        .business #outer header.js-open #headingwrapper {
            background-position: -942px -173px !important;}*/

    .inspired-by #outer {
        background-position: -441px 95px;}
        .inspired-by #outer header.js-open #headingwrapper {
            background-position: -440px -34px !important;}

    /*.living-knowledge #outer {
        background-position: -441px 95px;}*/
        .living-knowledge #outer header.js-open #headingwrapper {
            background-position: 50% -128px !important;}

    .endangered-archives #outer {
        background-position: -543px -9px;}
        .endangered-archives #outer header.js-open #headingwrapper {
            background-position: -543px -138px !important;}

    .english-drama #outer {
        background-position:}
        .english-drama #outer header.js-open #headingwrapper {}

    /*Newton bronze statue*/
    .european-studies #outer,
    .music #outer,
    .social-science #outer,
    .uk-web-archive #outer {
        background-position: -901px -105px;}
        .european-studies #outer header.js-open #headingwrapper,
        .music #outer header.js-open #headingwrapper,
        .social-science #outer header.js-open #headingwrapper,
        .uk-web-archive #outer header.js-open #headingwrapper {
            background-position: -901px -232px !important;}

    .untold-lives #outer {
        background-position: -1034px 163px;}
        .untold-lives #outer header.js-open #headingwrapper {
            background-position: -1034px -19px !important;}

    #rightcol {float:none;}


}