@media only screen and (max-width:699px) {
    body {
        width: 100%;
        min-width: 400px
    }

    body #content,
    body #footer,
    body #header {
        width: 100%
    }

    body .oo-header {
        height: auto
    }

    body .oo-header>.oo-current-condition-visual {
        background-position: -13500px 0
    }

    body .oo-header .oo-expanded-notification-box,
    body .oo-header .oo-location-box-edit,
    body .oo-header .oo-notification-box-edit,
    body .oo-header .oo-weather-box-edit {
        width: 100vw;
        height: 100vh;
        border-radius: 0
    }

    body .oo-header .oo-expanded-notification-box .notification,
    body .oo-header .oo-location-box-edit .notification,
    body .oo-header .oo-notification-box-edit .notification,
    body .oo-header .oo-weather-box-edit .notification {
        width: 100%
    }

    body .oo-header .oo-expanded-notification-box {
        overflow: scroll
    }

    body .oo-header .oo-header-inner {
        width: 100%;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 30px 30px 0 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    body .oo-header .oo-header-inner .oo-header-col {
        width: 100%;
        padding-bottom: 30px;
        position: relative
    }

    body .oo-header .oo-header-inner .oo-header-col.col-user {
        width: 100%;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }

    body .oo-header .oo-header-inner .oo-header-col.col-weather {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3
    }

    body .oo-header .oo-header-inner .oo-header-col.col-news {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }

    body .oo-header .oo-header-inner .oo-header-col.col-live {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4
    }

    body .oo-header .oo-header-inner .oo-header-col:after {
        width: 80%;
        bottom: 10px;
        left: 0;
        right: 0;
        margin: auto
    }

    body .oo-top-bar .oo-top-bar-inner {
        width: 100% !important;
        padding: 0 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    body .oo-top-bar .oo-top-bar-inner .oo-top-bar-user span {
        display: none
    }

    body .oo-top-bar .oo-top-bar-inner .oo-top-bar-user.oo-top-bar-st {
        padding: 0 20px 0 0;
        margin-right: -10px
    }

    body .oo-top-bar .oo-top-bar-inner .oo-top-bar-user.oo-top-bar-st small {
        display: none
    }

    body .oo-top-bar .oo-top-bar-inner .infoicon,
    body .oo-top-bar .oo-top-bar-inner .tstorm-counter {
        display: none
    }

    body .st-container {
        padding: 0 !important
    }

    body .st-container .st-map-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

    body .st-container .st-map-container .st-map-legend {
        display: none
    }

    body #header>img {
        display: none
    }

    body #header .oo-current-condition {
        right: 10px;
        width: calc(100% - 20px)
    }

    body #header_menu {
        top: 1454px !important
    }

    body #header_menu .mainmenu {
        width: 100%;
        border-left: none;
        cursor: pointer
    }

    body #header_menu .mainmenu:before {
        display: block;
        position: absolute;
        padding-left: 30px;
        height: 50px;
        top: 0;
        left: 10px;
        content: 'Menu';
        font-size: 16px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 48px;
        color: #666;
        background: url(../images/icons8-menu.svg) left center no-repeat;
        background-size: 20px
    }

    body #header_menu .mainmenu li {
        width: 100%;
        display: none
    }

    body #header_menu .mainmenu li:first-of-type {
        margin-top: 50px
    }

    body #header_menu .mainmenu li a {
        width: 100%;
        border-right: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    body #header_menu .mainmenu li a:first-of-type {
        border-left: none
    }

    body #header_menu .mainmenu li a .icon {
        position: relative
    }

    body #header_menu .mainmenu li a .facebook:after {
        content: 'Facebook';
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        font-weight: 400;
        position: absolute;
        top: -10px;
        left: 35px;
        line-height: 51px;
        font-family: inherit
    }

    body #header_menu .mainmenu li a .twitter:after {
        content: 'Twitter';
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        font-weight: 400;
        position: absolute;
        top: -10px;
        left: 35px;
        line-height: 51px;
        font-family: inherit
    }

    body #header_menu .mainmenu li a .youtube:after {
        content: 'YouTube';
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        font-weight: 400;
        position: absolute;
        top: -10px;
        left: 35px;
        line-height: 51px;
        font-family: inherit
    }

    body #header_menu .mainmenu li a .instagram:after {
        content: 'Instagram';
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        font-weight: 400;
        position: absolute;
        top: -10px;
        left: 35px;
        line-height: 51px;
        font-family: inherit
    }

    body #content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        overflow: hidden
    }

    body #content #topbanners {
        width: 100%;
        padding: 0 10px;
        margin: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: auto;
        overflow: hidden
    }

    body #content #topbanners>div {
        display: none
    }

    body #content #topbanners>div:first-of-type {
        display: block;
        width: 100%
    }

    body #content #topbanners div.ab_item {
        width: 100%;
        height: 40vh;
        margin-left: 0;
        margin-right: 0
    }

    body #content #topbanners div.ab_item .ab_img {
        height: 40vh;
        width: 100%
    }

    body #content #topbanners div.ab_item .ab_img:after {
        width: 100%
    }

    body #content #topbanners div.ab_item .ab_text {
        width: 85%
    }

    body #content #topbanners div.ab_item .ab_button {
        width: 100%;
        height: 100%
    }

    body #content #topbanners div.ab_item .ab_button a {
        width: 100%;
        height: 100%;
        background-position: bottom right;
        background-repeat: no-repeat
    }

    body #content .video-bar {
        margin-left: 0;
        width: 100%
    }

    body #content .video-bar .video-bar-wrapper {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        margin-top: 10px;
        padding: 0 10px 0 10px
    }

    body #content .video-bar:before {
        display: none
    }

    body #content .video-bar:after {
        display: none
    }

    body #content .adsbygoogle,
    body #content div[style="padding: 10px 0px 10px 5px;"] {
        overflow: hidden;
        width: 100% !important
    }

    body #content #left {
        width: 100%;
        margin: 0;
        padding: 0 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float: none;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }

    body #content #left>div:first-of-type {
        overflow: visible !important
    }

    body #content #left div.block_layer {
        width: 100% !important;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden
    }

    body #content #left div.block_layer#block_bf7a69507b7df3e72dad7a7ba62e30f0 div,
    body #content #left div.block_layer#block_d295e74e14b81d17274c64f95afb27fd div {
        width: auto !important
    }

    body #content #left div.block_layer#block_bf7a69507b7df3e72dad7a7ba62e30f0 img,
    body #content #left div.block_layer#block_d295e74e14b81d17274c64f95afb27fd img {
        width: 100%;
        height: auto
    }

    body #content #left div.block_layer.block-weatherforecast.winter {
        background-size: cover
    }

    body #content #left div.block_layer .dopplerradar img {
        width: 100% !important
    }

    body #content #left div.block_layer .dopplerradar a {
        height: auto !important;
        background-size: cover
    }

    body #content #main {
        width: 100%;
        margin: 0;
        padding: 0 10px
    }

    body #content #main div.block_layer,
    body #content #main div.topTweetsHomepage {
        width: calc(100% - 20px) !important;
        height: auto
    }

    body #content #main div.block_layer .oo-topics.recenttopics .recenttopicrow,
    body #content #main div.topTweetsHomepage .oo-topics.recenttopics .recenttopicrow {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: auto
    }

    body #content #main div.block_layer .oo-topics.recenttopics .recenttopicrow .part.large,
    body #content #main div.topTweetsHomepage .oo-topics.recenttopics .recenttopicrow .part.large {
        width: 100%
    }

    body #content #main div.block_layer .oo-topics.recenttopics .recenttopicrow .part.small,
    body #content #main div.topTweetsHomepage .oo-topics.recenttopics .recenttopicrow .part.small {
        width: 50%
    }

    body #content #main div.block_layer .topTweetsTitle,
    body #content #main div.topTweetsHomepage .topTweetsTitle {
        display: none
    }

    body #content #main div.block_layer .topTweet,
    body #content #main div.topTweetsHomepage .topTweet {
        width: 100%;
        height: 40vh;
        border-radius: 0;
        float: none;
        margin-bottom: 10px
    }

    body #content #main div.block_layer .topTweet .purpleGradient,
    body #content #main div.block_layer .topTweet .tweetFrom,
    body #content #main div.topTweetsHomepage .topTweet .purpleGradient,
    body #content #main div.topTweetsHomepage .topTweet .tweetFrom {
        width: 100%
    }

    body #content #main div.block_layer .topTweet .purpleGradient:after,
    body #content #main div.block_layer .topTweet .tweetFrom:after,
    body #content #main div.topTweetsHomepage .topTweet .purpleGradient:after,
    body #content #main div.topTweetsHomepage .topTweet .tweetFrom:after {
        width: 100%
    }

    body #content #main div.block_layer .topTweet .tweetFrom,
    body #content #main div.topTweetsHomepage .topTweet .tweetFrom {
        bottom: 50px;
        top: auto
    }

    body #content #main div.block_layer .topTweet .tweetText,
    body #content #main div.topTweetsHomepage .topTweet .tweetText {
        bottom: 20px;
        top: auto;
        width: 90%;
        height: auto
    }

    body #content #main div.block_layer .block_content div#map,
    body #content #main div.topTweetsHomepage .block_content div#map {
        width: 100% !important
    }

    body #content #main div.block_layer .block_content div#test,
    body #content #main div.topTweetsHomepage .block_content div#test {
        width: 100% !important;
        margin-top: 10px
    }

    body #content #main div.block_layer .block_content div#test .report-toggle,
    body #content #main div.topTweetsHomepage .block_content div#test .report-toggle {
        margin-left: 0
    }

    body #content #main div.block_layer .block_content div#test .weerbericht,
    body #content #main div.block_layer .block_content div#test .weerbericht_meer,
    body #content #main div.topTweetsHomepage .block_content div#test .weerbericht,
    body #content #main div.topTweetsHomepage .block_content div#test .weerbericht_meer {
        width: 90% !important
    }

    body #content #main div.block_layer .block_content div#map_legend,
    body #content #main div.topTweetsHomepage .block_content div#map_legend {
        display: none
    }

    body #content #main div.block_layer .block_content .pager_container,
    body #content #main div.topTweetsHomepage .block_content .pager_container {
        display: none
    }

    body #content #main div.block_layer .block_content div#guestbook tr td[width="40"],
    body #content #main div.topTweetsHomepage .block_content div#guestbook tr td[width="40"] {
        display: none
    }

    body #footer {
        padding: 0 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    body #footer div.fblock,
    body #footer div.fblockm {
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden
    }

    body #footer div.fblock div.block_layer,
    body #footer div.fblockm div.block_layer {
        margin-left: 0;
        margin-right: 0;
        width: 100% !important
    }

    body #Topiclargeleaderboard,
    body .topicdisclaimer {
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    body #Topiclargeleaderboard div.block_layer,
    body .topicdisclaimer div.block_layer {
        margin-left: 0;
        margin-right: 0;
        width: 100% !important
    }

    body #Topiclargeleaderboard+div.fblock,
    body #Topiclargeleaderboard+div.fblockm,
    body .topicdisclaimer+div.fblock,
    body .topicdisclaimer+div.fblockm {
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden
    }

    body #Topiclargeleaderboard+div.fblock div.block_layer,
    body #Topiclargeleaderboard+div.fblockm div.block_layer,
    body .topicdisclaimer+div.fblock div.block_layer,
    body .topicdisclaimer+div.fblockm div.block_layer {
        margin-left: 0;
        margin-right: 0;
        width: 100% !important
    }

    body #Topiclargeleaderboard+div.fblock div.block_layer div.block_content,
    body #Topiclargeleaderboard+div.fblockm div.block_layer div.block_content,
    body .topicdisclaimer+div.fblock div.block_layer div.block_content,
    body .topicdisclaimer+div.fblockm div.block_layer div.block_content {
        width: 100% !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    body #Topiclargeleaderboard+div.fblock div.block_layer table,
    body #Topiclargeleaderboard+div.fblockm div.block_layer table,
    body .topicdisclaimer+div.fblock div.block_layer table,
    body .topicdisclaimer+div.fblockm div.block_layer table {
        display: block
    }

    body #Topiclargeleaderboard+div.fblock div.block_layer table tr,
    body #Topiclargeleaderboard+div.fblockm div.block_layer table tr,
    body .topicdisclaimer+div.fblock div.block_layer table tr,
    body .topicdisclaimer+div.fblockm div.block_layer table tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: distribute;
        justify-content: space-around
    }

    body #Topiclargeleaderboard+div.fblock div.block_layer table tr td,
    body #Topiclargeleaderboard+div.fblockm div.block_layer table tr td,
    body .topicdisclaimer+div.fblock div.block_layer table tr td,
    body .topicdisclaimer+div.fblockm div.block_layer table tr td {
        display: block
    }

    body #Topiclargeleaderboard+div.fblockm+div.fblockm {
        display: none
    }

    body .topicdisclaimer {
        height: auto !important;
        line-height: normal !important;
        padding: 20px
    }

    body div.forum {
        line-height: normal;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    body div.forum #forumpager {
        height: auto !important;
        margin: 0 !important;
        margin-bottom: 20px;
        float: none !important;
        width: 100%;
        clear: both;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    body div.forum #buttonscrolltop {
        margin-bottom: 20px
    }

    body div.forum .breadcrumb {
        width: 100%;
        float: none
    }

    body div.forum #defaultform select {
        display: none
    }

    body div.forum #defaultform .def_button.antwoorden {
        height: 50px;
        line-height: 48px;
        margin-top: 50px;
        border-radius: 3px;
        width: 100%
    }

    body div.forum .categoryheader {
        height: 180px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    body div.forum .categoryheader h2,
    body div.forum .categoryheader h3 {
        line-height: normal !important;
        margin: 0 !important;
        width: 100%
    }

    body div.forum .footerstatstable {
        display: block
    }

    body div.forum .footerstatstable tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    body div.forum .footerstatstable tr td {
        display: block;
        width: 100%;
        font-size: 8px !important;
        line-height: normal
    }

    /* body div.forum .boardrow,
    body div.forum .topicrow {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    body div.forum .boardrow .newreplies,
    body div.forum .topicrow .newreplies {
        display: none
    }

    body div.forum .boardrow .topicinfo,
    body div.forum .topicrow .topicinfo {
        width: 100%;
        padding-bottom: 15px;
        border-bottom: 1px solid #d4d4d4;
        border-right: none !important
    }

    body div.forum .boardrow .topicinfo a,
    body div.forum .topicrow .topicinfo a {
        font-size: 23px
    }

    body div.forum .boardrow .topicinfo .boardtopicpager a,
    body div.forum .topicrow .topicinfo .boardtopicpager a {
        font-size: 12px
    }

    body div.forum .boardrow .lastreply,
    body div.forum .boardrow .stats,
    body div.forum .topicrow .lastreply,
    body div.forum .topicrow .stats {
        width: 100%;
        margin-top: 15px
    }

    body div.forum .boardrow .lastreply,
    body div.forum .topicrow .lastreply {
        padding-bottom: 15px;
        border-bottom: 1px solid #d4d4d4
    } */

    /* =====================================================
       FORUM - BOARD EN TOPIC RIJEN
       ===================================================== */

    body div.forum .boardrow,
    body div.forum .topicrow {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 120px;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        overflow: hidden;
    }

    body div.forum .boardrow .newreplies,
    body div.forum .topicrow .newreplies {
        display: none;
    }

    body div.forum .boardrow .topicinfo,
    body div.forum .topicrow .topicinfo {
        grid-column: 1 / -1;
        width: auto !important;
        min-width: 0;
        padding: 12px 14px 10px 14px;
        box-sizing: border-box;
        border-right: 0 !important;
        border-bottom: 1px solid #d4d4d4;
    }

    body div.forum .boardrow .topicinfo>a,
    body div.forum .topicrow .topicinfo>a {
        display: block;
        max-width: 100%;
        font-size: 18px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: break-word;
    }

    body div.forum .boardrow .topicinfo .small,
    body div.forum .topicrow .topicinfo .small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.35;
    }

    body div.forum .boardrow .topicinfo .boardtopicpager a,
    body div.forum .topicrow .topicinfo .boardtopicpager a {
        display: inline;
        font-size: 10px;
    }

    body div.forum .boardrow .lastreply,
    body div.forum .topicrow .lastreply {
        grid-column: 1;
        width: auto !important;
        min-width: 0;
        margin: 0;
        padding: 10px 12px 10px 14px;
        box-sizing: border-box;
        border-right: 1px solid #d4d4d4;
        border-bottom: 0;
        font-size: 11px;
        line-height: 1.35;
    }

    body div.forum .boardrow .lastreply>a,
    body div.forum .topicrow .lastreply>a {
        display: block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body div.forum .boardrow .lastreply span,
    body div.forum .topicrow .lastreply span {
        font-size: 11px;
        line-height: 1.35;
    }

    body div.forum .boardrow .stats,
    body div.forum .topicrow .stats {
        grid-column: 2;
        width: auto !important;
        min-width: 0;
        margin: 0;
        padding: 10px 8px;
        box-sizing: border-box;
        font-size: 11px;
        line-height: 1.35;
    }

    body div.forum .boardrow .stats .iconized,
    body div.forum .topicrow .stats .iconized {
        display: block;
        white-space: nowrap;
        font-size: 11px;
    }

    body div.forum .boardrow>br.clear,
    body div.forum .topicrow>br.clear {
        display: none;
    }

    /* Forum einde aanpassing */

    body div.forum .mod_opties {
        height: auto !important;
        width: 100% !important;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    body div.forum .mod_opties .clear,
    body div.forum .mod_opties div {
        float: none !important
    }

    body div.forum #topicfooter div[style="float: right;"] {
        float: none !important;
        margin-top: 15px !important
    }

    body div.forum #topicfooter .antwoordenbutton {
        margin-top: 15px
    }

    body div.forum .topic.post {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    body div.forum .topic.userinfo {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    body div.forum .topic.userinfo .avatar {
        width: 50px;
        height: 50px;
        margin-left: 20px;
        background-size: 50px !important;
        margin: 0 20px 0 0
    }

    body div.forum .topic.userinfo .avatar img,
    body div.forum .topic.userinfo .avatar:after {
        width: 25px;
        height: 25px;
        background-size: 25px !important
    }

    body div.forum .topic.userinfo .userstats {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1
    }

    body div.forum .topic.userinfo .userstats .stat {
        text-align: left !important
    }

    body div.forum .topic.userinfo .userstats .ustatus {
        margin: 15px 0
    }

    body div.forum .topic.postbody .controls.right {
        float: none !important;
        padding-top: 10px
    }

    /* =========================================================
   OnweerOnline Responsive verbeteringen
   - Gebruikerspaneel
   - Winterstoplicht
   - Laatste forumberichten
   ========================================================= */

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

        body .oo-header .oo-header-inner .oo-header-col.col-user.user-logged-in,
        body .oo-header .oo-header-inner .oo-header-col.col-user.user-logged-out {
            width: 100%;
            box-sizing: border-box;
        }

        body .oo-header .oo-header-inner .oo-header-col.col-user.user-logged-in .oo-user-panel,
        body .oo-header .oo-header-inner .oo-header-col.col-user.user-logged-out .oo-user-panel {
            width: 100%;
            box-sizing: border-box;
        }

        body #content #left .block_layer:has(.stoplicht) {
            width: 100% !important;
            height: auto !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* body #content #left .block_layer:has(.stoplicht) > h1.block.dark_top {
        width: 100% !important;
        height: 50px !important;
        box-sizing: border-box;
    } */

        /* Winterstoplicht - titel verticaal centreren */
        body #content #left .block_layer:has(.stoplicht)>h1.block.dark_top {
            width: 100% !important;
            height: 50px !important;
            display: flex !important;
            align-items: center !important;
            box-sizing: border-box !important;
        }

        body #content #left .block_layer:has(.stoplicht)>h1.block.dark_top>span {
            line-height: normal !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        body #content #left .block_layer .stoplicht {
            position: relative;
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 196 / 131;
            overflow: hidden;
        }

        body #content #left .block_layer .stoplicht .sl_img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }

        body #content #left .block_layer .stoplicht .sl_link {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }

        body #content #left .block_layer .stoplicht>a {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }

        body #content #main .oo-topics.recenttopics {
            width: 100%;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow {
            display: flex !important;
            flex-wrap: wrap !important;
            width: 100%;
            height: auto !important;
            min-height: 0;
            margin: 0 0 2px 0;
            box-sizing: border-box;
            overflow: hidden;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part.large {
            float: none;
            width: 100% !important;
            height: auto !important;
            min-height: 0;
            padding: 10px 38px 8px 12px;
            box-sizing: border-box;
            border-right: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.7);
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part.large strong {
            display: block;
            width: 100%;
            margin: 0 0 3px 0;
            white-space: normal;
            overflow: visible;
            font-size: 14px !important;
            line-height: 1.25;
            text-overflow: clip;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part.large strong>a:first-of-type {
            display: block;
            width: 100% !important;
            font-size: 14px !important;
            line-height: 1.25;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part.large>span {
            display: block;
            margin: 0;
            font-size: 9px !important;
            line-height: 1.3;
            white-space: normal;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part.large .hpftp {
            font-size: 9px !important;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part.small {
            float: none;
            width: 65% !important;
            height: auto !important;
            min-height: 47px;
            padding: 6px 8px 6px 12px;
            box-sizing: border-box;
            border-right: 1px solid rgba(255, 255, 255, 0.75);
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part.smaller {
            float: none;

            width: 35% !important;
            height: auto !important;
            min-height: 47px;
            padding: 6px 8px;
            box-sizing: border-box;
            border-right: 0;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part span.iconized {
            display: flex;
            align-items: center;
            clear: none;
            min-height: 17px;
            margin: 0 0 2px 0;
            font-size: 10px !important;
            line-height: 1.2;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part span.iconized:first-of-type {
            margin-top: 0;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part span.iconized:before {
            display: block;
            flex: 0 0 15px;
            float: none;
            clear: none;
            width: 15px;
            height: 15px;
            margin: 0 9px 0 0;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part span.iconized.user a {
            font-size: 11px;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow.sticky-topic-home strong:before {
            display: inline-block;
            margin: 0 7px 2px 0;
            font-size: 12px;
            line-height: 1.2;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow.sticky-topic-home strong a:first-of-type {
            width: auto !important;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow.sticky-topic-home .large span:before {
            width: 23px;
            height: 21px;
            margin: -2px 7px 0 0;
        }

        body #content #main .oo-topics.recenttopics .recenttopicrow .part strong a img {
            top: 1px;
            right: -27px;
        }

        body #content #main .topics-more {
            width: 100%;
            box-sizing: border-box;
        }

        body>.footer_seperator {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box;
        }

        body>.fblockm {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
        }

        body>.fblockm>.block_layer {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box;
        }

        body>.fblockm>.block_layer>h1.block.dark_top {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
        }

        body>.fblockm>.block_layer>.block_content {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
        }

        body>.fblockm .logotable {
            width: 100% !important;
            max-width: 100% !important;
        }

        body>.fblockm .logotable img {
            max-width: 100% !important;
            height: auto !important;
        }

        /* =====================================================
       FORUM - INFOBAR
       ===================================================== */

        body div.forum .infobar {
            position: relative;
            width: 100%;
            height: auto;
            min-height: 0;
            margin: 30px 0 15px 0;
            padding: 14px 70px 14px 16px;
            box-sizing: border-box;
            overflow: hidden;
            clear: both;
        }

        body div.forum .infobar .message {
            float: none;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            line-height: 1.4;
        }

        body div.forum .infobar .icon {
            display: none;
        }

        body div.forum .infobar .avatar {
            position: absolute;
            top: 50%;
            right: 14px;
            float: none;
            width: 44px;
            height: 44px;
            margin: 0;
            transform: translateY(-50%);
        }

        body div.forum .infobar .avatar img {
            display: block;
            width: 44px;
            height: 44px;
            max-width: 44px;
            object-fit: cover;
            border: 1px solid #000;
            box-sizing: border-box;
        }

        body div.forum .infobar .clear {
            display: none;
        }

        /* =========================================================
   STORMTRACK - MOBIEL
   ========================================================= */

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

            body .st-container {
                padding: 0 !important;
                width: 100%;
                height: 100%;
                height: 100dvh;
                box-sizing: border-box;
            }

            body .st-container .st-map-container {
                position: absolute;
                top: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                left: 0 !important;
                width: 100%;
                height: 100%;
                height: 100dvh;
                display: flex;
                overflow: hidden;
                box-sizing: border-box;
            }

            body .st-container .st-map-container #stmap {
                width: 100% !important;
                height: 100% !important;
                min-width: 0;
                flex: 1 1 auto;
            }

            body .st-container .st-map-container .st-map-sidebar {
                position: relative;
                flex: 0 0 10px;
                width: 10px !important;
                max-width: 10px;
                padding: 0 !important;
                background: #2b3050;
                overflow: visible;
                box-sizing: border-box;
                transition: width .3s ease, max-width .3s ease, flex-basis .3s ease;
            }

            body .st-container .st-map-container .st-map-sidebar form,
            body .st-container .st-map-container .st-map-sidebar .st-map-legend,
            body .st-container .st-map-container .st-map-sidebar>span {
                display: none;
            }

            body .st-container .st-map-container .st-map-sidebar:before {
                position: absolute;
                top: 20px;
                right: -50px;
                width: 50px;
                height: 50px;
                display: block;
                background-color: #2b3050;
                background-image: url(../images/st-mobile-toggle.png);
                background-position: center center;
                background-repeat: no-repeat;
                content: '';
                cursor: pointer;
                z-index: 10000;
            }

            body .st-container .st-map-container .st-map-sidebar.open {
                flex: 0 0 min(82vw, 330px);
                width: min(82vw, 330px) !important;
                max-width: 330px;
                padding: 20px 16px !important;
                overflow-x: hidden;
                overflow-y: auto;
                box-sizing: border-box;
            }

            body .st-container .st-map-container .st-map-sidebar.open form,
            body .st-container .st-map-container .st-map-sidebar.open>span {
                display: block;
            }

            body .st-container .st-map-container .st-map-sidebar.open .st-map-legend {
                display: none;
            }

            body .st-container .st-map-container .st-map-sidebar.open>span {
                margin-bottom: 20px;
                font-size: 17px;
                line-height: 1.3;
            }

            body .st-container .st-map-container .st-map-sidebar.open form .st-option-row {
                margin-bottom: 12px;
            }

            body .st-container .st-map-container .st-map-sidebar.open form label {
                display: block;
                font-size: 14px;
                line-height: 20px;
                white-space: normal;
            }

            body .st-container .st-map-container .st-map-close {
                top: 10px;
                right: 10px;
                width: 40px;
                height: 40px;
                line-height: 40px;
                z-index: 10001;
            }

            body .st-container .st-map-container .st-map-layers {
                top: 10px;
                right: 60px;
                width: 40px;
                height: 40px;
                z-index: 10001;
            }

            body .st-container .st-map-container .st-map-webcams {
                top: 10px;
                right: 110px;
                height: 40px;
                padding: 0 12px;
                font-size: 12px;
                line-height: 40px;
                z-index: 10001;
            }

            body .st-container .st-map-container .st-map-layer-select {
                width: calc(100% - 30px) !important;
                max-width: 400px;
                height: auto !important;
                max-height: calc(100dvh - 30px);
                padding: 20px;
                overflow-y: auto;
                box-sizing: border-box;
            }

            body .st-container .st-map-container .st-map-layer-select span {
                font-size: 18px;
                margin-bottom: 15px;
            }

            body .st-container .st-map-container .st-map-layer-select .bind {
                margin-bottom: 12px;
            }

            body .st-container .gm-style-iw,
            body .st-container .gm-style-iw-c {
                max-width: calc(100vw - 40px) !important;
                box-sizing: border-box;
            }
        }

        /* =========================================================
   Mobiele homepage layout fix
   ========================================================= */

        body #content #main {
            float: none !important;
            order: 1 !important;
            width: 100% !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }

        body #content #left {
            float: none !important;
            order: 2 !important;
            width: 100% !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }

        /* =========================================================
   Laatste forumberichten - mobiele breedte
   ========================================================= */

        body #content #main {
            width: 100% !important;
            padding: 0 10px !important;
            box-sizing: border-box !important;
        }

        body #content #main div.block_layer {
            width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box !important;
        }

        /* =========================================================
           Grote buienradar - responsive op mobiel
           ========================================================= */

        body #content #main div.block_layer .block_content>img {
            display: block;
            max-width: 100% !important;
            height: auto !important;
            background-size: 100% auto !important;
            background-repeat: no-repeat !important;
        }

        /* =========================================================
   Top Tweets homepage - verbergen op mobiel
   ========================================================= */

        body #content #main div.topTweetsHomepage {
            display: none !important;
        }

      /* =========================================================
   Registratieformulier - moderne mobiele styling
   ========================================================= */

/* Formulierblokken */
body #registerform fieldset {
    padding: 16px !important;
    margin: 0 0 16px 0 !important;
    border: 1px solid rgba(76, 72, 94, 0.18) !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

/* Paarse titelbalk van iedere stap */
body #registerform .fieldsetheader {
    margin: -16px -16px 18px -16px !important;
    padding: 11px 16px !important;
    min-height: 42px !important;
    height: auto !important;

    background: #767caf !important;
    color: #fff !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 20px !important;

    box-sizing: border-box !important;
}

/* Meer ruimte tussen de velden */
body #registerform label {
    display: block !important;
    margin: 0 0 16px 0 !important;

    color: #4c485e !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

/* Tekstvelden */
body #registerform input[type="text"],
body #registerform input[type="password"],
body #registerform input[type="email"],
body #registerform select,
body #registerform textarea {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-top: 6px !important;
    padding: 11px 12px !important;

    border: 1px solid #c9cad5 !important;
    border-radius: 4px !important;
    outline: none !important;

    background: #fff !important;
    color: #333 !important;

    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 20px !important;

    box-sizing: border-box !important;

    -webkit-appearance: none;
    appearance: none;
}

/* Focus: duidelijk zichtbaar welk veld actief is */
body #registerform input[type="text"]:focus,
body #registerform input[type="password"]:focus,
body #registerform input[type="email"]:focus,
body #registerform select:focus,
body #registerform textarea:focus {
    border-color: #767caf !important;
    box-shadow: 0 0 0 3px rgba(118, 124, 175, 0.15) !important;
}

/* Tekstvak handtekening */
body #registerform textarea {
    min-height: 90px !important;
    resize: vertical !important;
}

/* Bestandskiezer avatar */
body #registerform input[type="file"] {
    display: block !important;
    width: 100% !important;

    margin-top: 6px !important;
    padding: 10px !important;

    border: 1px solid #c9cad5 !important;
    border-radius: 4px !important;
    background: #f7f7fa !important;

    box-sizing: border-box !important;
}

/* Voorwaarden-checkbox niet uitrekken */
body #registerform input[type="checkbox"] {
    width: auto !important;
    margin: 0 6px 0 0 !important;
    vertical-align: middle !important;
}

/* Informatiebalk */
body #registerform .infobar {
    margin-bottom: 16px !important;
    border-radius: 4px !important;
}

/* Foutmelding */
body #registerform .warningbar {
    margin-bottom: 16px !important;
    border-radius: 4px !important;
}

/* "of" tussen Facebook en normale registratie */
body #registerform .ofsep {
    margin: 18px 0 !important;
}

/* =========================================================
   Registreren-knop
   Oude achtergrondafbeelding vervangen door moderne knop
   ========================================================= */

body #registerform .def_button.registreren {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    float: none !important;

    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 18px !important;

    background-image: none !important;
    background: #f5a623 !important;

    border: 0 !important;
    border-radius: 4px !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Tekst van registratieknop */
body #registerform .def_button.registreren span {
    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    text-shadow: none !important;
}

/* Tekst "Alles goed ingevuld?" */
body #registerform .right.small {
    display: block !important;
    float: none !important;

    width: 100% !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;

    text-align: center !important;
    color: #777 !important;
}
    }
}