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

    /*formerly 1024px*/
    .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
    }

    #nav-wrapper {
        display: none;
    }

    .main-nav-toggle~#nav-wrapper {
        display: block;
    }

    /*TODO: JQ to JS conversion on megamenu() - remove prefix, roll out sitewide */
    .main-nav-toggle~#nav-wrapper {
        display: block;
        margin-top: -270px;
        /* css animate */
        -webkit-transition: margin-top .75s .01s ease-in-out;
        -moz-transition: margin-top .75s .01s ease-in-out;
        -o-transition: margin-top .75s .01s ease-in-out;
        -ms-transition: margin-top .75s .01s ease-in-out;
        z-index: 0;
    }

    .main-nav-toggle.slide~#nav-wrapper {
        margin-top: 0;
    }

    /**/
    .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 h1 {
        clear: none;
        min-height: 100px;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        border-bottom: 1px solid #fff;
        overflow: hidden;
        font-size: 1.7rem;
        z-index: 10;
    }

    #top h1 a {
        padding-left: 16px;
        padding-top: 16px;
        display: inline-block;
        max-width: calc(100% - 42px);
    }

    #site-logo {
        float: left;
        height: 100px;
        border: none;
        background: white;
        width: 52px;
        z-index: 11;
    }

    #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:first-of-type {
        border-top: 0;
    }

    #primarynav li:last-of-type {
        border-bottom: 1px solid #fff;
    }

    #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: 11;
        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:not(.custom-search-results #headingwrapper):not(.custom-db-archive #headingwrapper) {
		display: none;
    }*/

    #headingwrapper {
        display: none;
    }

    .custom-search-results #headingwrapper,
    .custom-db-archive #headingwrapper {
        display: block;
    }

    .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;
        padding-right: 16px;
        margin-bottom: 16px;
    }

    #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 {
        padding-bottom: 16px !important;
    }

    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%;
    }

    header#top {
        display: flex;
        flex-wrap: wrap;
    }

    .dev header#top,
    .newsroom header#top,
    .web-archive header#top,
    .untold-lives header#top,
    .sound-vision header#top,
    .social-science header#top,
    .science header#top,
    .living-knowledge header#top,
    .music header#top,
    .americas header#top,
    .asian-african header#top,
    .collection-care header#top,
    .digital-scholarship header#top,
    .endangered-archives header#top,
    .english-drama header#top,
    .european-studies header#top,
    .innovation-enterprise header#top,
    .maps-views header#top,
    .medieval-manuscripts header#top {
        /* 2024: remove .dev and header#top on roll out */
        display: block;
    }

    header#top hgroup {
        /* search results uses hgroup in header */
        flex-grow: 1;
    }

    #site-logo {
        order: 1;
    }

    header#top h1 {
        order: 2;
        flex-grow: 1;
    }

    .nav-wrapper {
        order: 3;
        width: 100%;
    }

    nav#secondnav {
        order: 4;
        flex-grow: 1;
    }
}

/*XXX Modular edits, merge once working XXX*/
@media only screen and (max-width : 1007px) {
    #leftcol {
        width: 65%;
    }

    #rightcol {
        width: 35%;
        float: right;
    }

    #rightcol section {
        max-width: 320px;
    }

    .custom-archive-index #leftcol {
        display: flex;
    }
}

@media only screen and (max-width : 900px) {
    #leftcol {
        width: 100%;
    }

    #rightcol {
        width: 100%
    }

    #rightcol section {
        max-width: none;
    }
}

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

    #searchpanelwrapper {
        padding: 16px
    }

    #searchpanel {
        margin-bottom: 16px
    }

    #searchpanel,
    #blogsubscribe {
        width: 100%;
        float: left;
    }

    #searchpanel form,
    #blogsubscribe form {
        display: flex;
        width: 100%;
    }

    #searchpanel .searchbox,
    #blogsubscribe #subscribe {
        flex-grow: 1;
        padding: 15px;
        width: auto;
        margin: 0;
    }

    #blogsubscribe input.subscribesubmit {
        height: 48px;
        margin-top: 0;
    }

    #searchpanel .searchbutton {
        width: 46px;
    }
}

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

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

    aside iframe {
        margin-left: 0;
    }

    /*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;
    }


    #rightcol {
        float: none;
        clear: both;
    }

    /*Not Ideal, but code has no discernible name/features other than alt*/
    /* a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"*/
    #leftcol .entry-body a img[alt*=noc],
    #leftcol .entry-body a img[alt*=Noc],
    #leftcol .entry-body a img[alt*=ccownwork],
    #leftcol .entry-body a img[alt*=Ccownwork],
    #leftcol .entry-body a img[alt*="Creative Commons Licence"] {
        width: auto !important;
    }

    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 : 601px) {

    a.topmenu:hover {
        background: #1f4967;
    }

    #outer {
        background: none;
    }

    #searchpanelwrapper {
        /*show on demand js*/
        display: none;
        padding-bottom: 0;
    }

    #searchpanelwrapper {
        -webkit-transition: margin-top .23s .01s ease-in-out;
        -moz-transition: margin-top .23s .01s ease-in-out;
        -o-transition: margin-top .23s .01s ease-in-out;
        -ms-transition: margin-top .23s .01s ease-in-out;
        margin-top: -80px;
        display: block;
    }

    #searchpanelwrapper.slide {
        margin-top: 0;
    }

    .search-on-demand-wrapper {
        display: flex;
        justify-content: flex-end;
        background: #C7C9CF;
        font-size: 1.3em;
        padding-right: 8px;
        border-bottom: 1px solid #ccc;
    }

    .search-on-demand {
        display: flex;
        justify-content: left;
        width: auto;
        text-decoration: none;
        align-items: center;
        max-width: none;
        color: #444;
        padding: 8px;
    }

    .search-on-demand span {
        display: block;
        padding: 8px;
        border: 1px solid #999;
    }

    .search-on-demand:active {
        color: inherit;
    }

    .search-on-demand:after {
        content: "";
        background-image: url(../../resources/images/bl-web-sprite.png);
        background-position: -104px -152px;
        width: 32px;
        margin-left: 0;
        height: 32px;
        background-color: #999;
        border-right: 1px solid #999;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
    }

    .search-on-demand.open:after {
        background-position: -152px -152px;
    }

    #searchpanel form,
    #blogsubscribe form {
        flex-wrap: wrap;
    }

    #blogsubscribe form .subscribesubmit {
        text-transform: unset;
        width: 100%;
        margin-top: 6px;
        font-size: 19px;
    }

    #blogsubscribe form .subscribesubmit:hover {
        background: #1f4967;
    }

    .search-results .entry-body .entry-text {
        width: auto;
    }

    header#top h1 {
        flex-shrink: 1;
        flex-basis: 0;
    }

    #site-logo {
        height: auto;
        background: #1E6EB8;
        border-bottom: 1px solid #fff;
    }

    /*prevent double bdr below given width*/
    #top img {
        border-bottom: none;
    }
}

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

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

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

    /*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) {

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

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

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

    html #outer {
        background: none;
    }

    #searchpanel {
        margin-bottom: 6px;
    }

}