.page-byens-rum {

    .flowplayer.is-loading .fp-waiting {
        display: none;
    }

    .row.paginated.from-ajax {
        @media (min-width: 992px) {
            margin-top: 10px;
        }
    }

    .flex-grid {
        .flexgrid;
    }

    #page-wrapper {

        .main-container {

            .pane-mkbh-blocks-mkbh-block-byens-rum-laeser {

                article.mkbh-node-article-display {

                    .custom-background-applied {

                        .node-content {

                            ul.node-breadcrumbs {
                                color: white !important;

                                li:before {
                                    color: white !important;
                                }

                                li:after {
                                    color: white !important;
                                }
                            }
                        }

                        .node-title {

                            a {
                                & > span {
                                    color: white !important;
                                }
                            }

                        }
                    }
                }
            }

            article.mkbh-node-article-display {

                .clearfix:after {
                    height: 100%;
                    visibility: visible;
                }

                .node-inner {
                    position: relative;
                    border-top: none;

                    &:before {
                        position: absolute;
                        display: block;
                        content: '';
                        top: 0;
                        left: 0;
                        right: 0;
                        height: 1px;
                        background-color: #c1041f;
                        z-index: 1;
                    }

                    ul.node-breadcrumbs li {
                        letter-spacing: 1px;
                    }

                    .node-content {

                        .node-title {
                            z-index: 1;

                            .subtitle {
                                color: #c1041f;
                            }

                            .title {
                                color: #1a1a1a;
                                //display: inline-block;
                            }
                        }
                    }

                    &:hover {
                        &:after {
                            opacity: 0.3;
                        }
                    }

                    &:after {
                        .pseudo;
                        content: '';
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        background-color: black;
                        opacity: 0;
                        .transition(0.3s);
                    }
                }
            }

            .row {

                section {

                    .content-system {
                        display: none;
                    }

                    .page-content {

                        .pane-mkbh-blocks-mkbh-block-byens-rum-seneste {

                            .pane-content {
                                float: left;

                                .col.no-margin-bottom {
                                    margin-bottom: 0 !important;
                                }

                                .row {

                                    & > div {

                                        article.mkbh-node-article-display .node-image .mkbh-flowplayer {
                                            min-height: 160px;
                                        }

                                        .row:nth-child(1) {

                                            .region-top-left {
                                                width: 50%;

                                                article.mkbh-node-article-display .node-image .mkbh-flowplayer {
                                                    min-height: 195px;
                                                }
                                            }

                                            .region-top-right {
                                                width: 50%;
                                                padding: 0;

                                                .region-top-medium-left {
                                                    width: 50%;
                                                }

                                                .region-top-small-right {
                                                    width: 50%;

                                                    .region-top-small-top {

                                                        .node-inner {
                                                            min-height: 250px;
                                                            @media (min-width: 320px) and (max-width: 992px) {
                                                                min-height: 183px;
                                                            }

                                                            .node-content {

                                                                .node-title {
                                                                    display: inline-block;
                                                                }
                                                            }
                                                        }
                                                    }

                                                    .region-top-small-bottom {

                                                        .node-inner {
                                                            @media (min-width: 320px) and (max-width: 599px) {
                                                                min-height: 183px;
                                                                padding: 0;
                                                                margin: 0;
                                                            }
                                                        }
                                                    }

                                                    .col {
                                                        padding: 0;
                                                    }

                                                    .region-top-small-top {

                                                        .node-inner {
                                                            padding: 0;
                                                            margin: 0 0 10px;
                                                        }
                                                    }
                                                }
                                            }

                                            .node-inner {

                                                .node-content {

                                                    .node-title {
                                                        font-size: 26px;
                                                        line-height: 28px;
                                                    }

                                                    .node-body {
                                                        font-size: 16px;
                                                        overflow: hidden;
                                                    }
                                                }
                                            }
                                        }

                                        .row:nth-child(2) {
                                            margin-bottom: 0;

                                            .region-bottom-left {
                                                padding: 0;

                                                & > .col {
                                                    padding: 0;
                                                    overflow: hidden;

                                                    .col {
                                                        padding: 0 10px 10px;
                                                        max-height: 161px;
                                                        margin: 0 0 10px;
                                                        overflow: hidden;

                                                        .node-content {
                                                            height: 151px;
                                                            overflow: hidden;

                                                            .node-title {
                                                                height: 80px;
                                                                overflow: hidden;
                                                            }
                                                        }

                                                        &:last-child {
                                                            margin: 0;
                                                        }
                                                    }
                                                }

                                                .region-bottom-small-bottom {
                                                    margin: 0;
                                                }

                                                .region-bottom-small-right {

                                                    .region-bottom-small-right-top {

                                                        .node-inner {
                                                            background-color: #f5dddd;
                                                        }
                                                    }
                                                }
                                            }

                                            .region-bottom-right {
                                                padding: 0;

                                                & > .col {
                                                    overflow: hidden;
                                                    margin: 0 0 10px;

                                                    & > article {
                                                        width: 100%;

                                                        .node-inner {
                                                            flex-direction: row;
                                                            -webkit-flex-direction: row;

                                                            .node-content {
                                                                height: 128px;
                                                                overflow: hidden;

                                                                .node-title {
                                                                    height: 80px;
                                                                    overflow: hidden;
                                                                }
                                                            }
                                                        }
                                                    }
                                                }

                                                .region-bottom-medium-bottom {
                                                    margin: 0;
                                                }
                                            }
                                        }

                                        .border-right {
                                            &:last-child {
                                                margin-bottom: 10px;
                                            }
                                        }
                                    }

                                    &.overflow-hidden.randomized-rows:nth-child(2) {
                                        @media (min-width: 599px) and (max-width: 992px) {
                                            margin: 0 -10px 10px;
                                        }

                                        & > .col:not(.wide-region) {
                                            @media (min-width: 320px) and (max-width: 992px) {
                                                min-height: 183px;
                                            }
                                        }

                                        .col {

                                            &:nth-child(2) {
                                                @media (min-width: 993px) {
                                                    border-right: 1px solid @border-right;
                                                    border-left: 1px solid @border-right;
                                                }
                                            }

                                            article .node-inner {
                                                .node-content {
                                                    min-height: 183px;
                                                    @media (min-width: 992px) and (max-width: 1200px) {
                                                        min-height: 178px;
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    &.overflow-hidden.randomized-rows {
                                        &:nth-child(1) {
                                            @media (max-width: 992px) {
                                                margin: 0 -10px -10px;
                                            }
                                        }

                                        &.has-wide-region-first {
                                            & > .col:not(.wide-region) {
                                                @media (min-width: 599px) and (max-width: 992px) {
                                                    margin: 0 0 10px;
                                                }
                                            }

                                            & > .wide-region {
                                                @media (min-width: 599px) and (max-width: 992px) {
                                                    margin: 10px 0;
                                                }
                                            }

                                            & > .col:last-child {
                                                @media (min-width: 599px) and (max-width: 992px) {
                                                    padding: 0 10px 0 0;
                                                }
                                            }
                                        }

                                        &.has-wide-region-in-the-middle {
                                            & > .col {
                                                @media (min-width: 599px) and (max-width: 992px) {
                                                    margin: 10px 0 0;
                                                }
                                            }

                                            & > .col:last-child {
                                                @media (min-width: 599px) and (max-width: 992px) {
                                                    margin: 10px 0;
                                                }
                                            }
                                        }

                                        &.has-wide-region-last {
                                            & > .col:not(.wide-region) {
                                                @media (min-width: 599px) and (max-width: 992px) {
                                                    margin: 10px 0;
                                                }
                                            }

                                            & > .wide-region {
                                                @media (min-width: 599px) and (max-width: 992px) {
                                                    margin: 0 0 10px;
                                                }
                                            }
                                        }

                                        & > .col:nth-child(1) {
                                            @media (min-width: 320px) and (max-width: 599px) {
                                                margin-top: 10px;
                                                margin-bottom: 10px;
                                            }
                                        }

                                        & > .col:nth-child(2) {
                                            @media (min-width: 320px) and (max-width: 599px) {
                                                margin-bottom: 10px;
                                            }
                                            @media (min-width: 599px) and (max-width: 992px) {

                                            }
                                        }

                                        & > .col:nth-child(3) {
                                            @media (min-width: 320px) and (max-width: 599px) {
                                                margin-bottom: 10px;
                                            }
                                            @media (min-width: 599px) and (max-width: 992px) {

                                            }
                                        }

                                        &.has-wide-region-last {
                                            & > .col:nth-child(2) {
                                                @media (min-width: 600px) and (max-width: 992px) {
                                                    padding: 0 10px 0 0;
                                                }
                                            }
                                        }

                                        .col {

                                            &:nth-child(2) {
                                                @media (min-width: 993px) {
                                                    border-right: 1px solid @border-right;
                                                    border-left: 1px solid @border-right;
                                                }
                                            }

                                            &:last-child {
                                                border-right: 0;
                                            }

                                            article .node-inner {
                                                flex-direction: row;
                                                -webkit-flex-direction: row;

                                                .node-inner {
                                                    height: 160px;
                                                    overflow: hidden;
                                                }

                                                .node-content {
                                                    min-height: 183px;
                                                }

                                                .node-title {
                                                    margin-bottom: 10px;
                                                }
                                            }
                                        }

                                        @media screen and(max-width: 992px) {
                                            &:first-child {
                                                .col {
                                                    //margin-top: 10px!important;
                                                }
                                            }

                                            .col {
                                                max-height: none;

                                                //margin-bottom: 10px!important;
                                                overflow: hidden;
                                                position: relative;
                                                border-right: 0;

                                                &:not(.wide-region) {
                                                    @media (min-width: 600px) and (max-width: 992px) {
                                                        width: 50% !important;
                                                    }
                                                    @media (min-width: 320px) and (max-width: 992px) {
                                                        min-height: 183px;
                                                    }
                                                    float: left;
                                                    //margin: 0;
                                                }
                                            }

                                            &.has-wide-region-in-the-middle {
                                                .col:not(.wide-region) {
                                                    width: 100% !important;
                                                    float: none;
                                                }
                                            }

                                            &.has-wide-region-first {
                                                &:not(:last-child) {
                                                    .col.wide-region {
                                                        //margin-bottom: 0!important;
                                                    }
                                                }

                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .pane-mkbh-blocks-mkbh-block-byens-rum-popular {

                            .pane-content {
                                float: left;

                                .mkbh-block-byens-rum-popular {

                                    .flex-grid {
                                        min-height: 270px;

                                        .flex-column {
                                            border-top: 1px solid #c1041f;
                                            background-color: #f5dddd;

                                            .view {

                                                .view-content {

                                                    .views-row {

                                                        .views-field-title {
                                                            &:after {
                                                                background-color: #e9b1b3;
                                                            }
                                                        }

                                                        .views-row-grid {
                                                            border-color: #e6a9ab;
                                                            padding: 7px 0;
                                                            min-height: 45px;

                                                            .views-field-nothing {
                                                                left: -25px;
                                                                top: 14px;
                                                            }
                                                        }

                                                        div[class*=counter] {
                                                            color: #e6a9ab;
                                                        }

                                                        .views-row-content {

                                                            .article-title {
                                                                display: block;

                                                                .separator {
                                                                    color: #999;
                                                                }

                                                                div {
                                                                    display: inline;
                                                                }

                                                                .views-field-title {
                                                                    color: #1a1a1a;
                                                                }

                                                                .field-article-sub-headline {
                                                                    color: #c1041f;
                                                                }
                                                            }
                                                        }

                                                    }
                                                }
                                            }

                                            .view-display-id-most_commented_popular_rum {

                                                .comments-counter {
                                                    position: absolute;
                                                    top: 5px;
                                                }
                                            }

                                            &.column-last {
                                                position: relative;
                                                border: 0 !important;
                                                box-shadow: 0 0 0 15px white inset;
                                                background-color: transparent !important;
                                                flex: 0 0 320px;

                                                & > .dfp-tag-wrapper {
                                                    position: absolute;
                                                    top: 0;
                                                    right: 0;
                                                    bottom: 0;
                                                    left: 0;
                                                    width: 100%;
                                                    height: 100%;
                                                    border: 1px solid #b3b3b3 !important;
                                                    padding: 0 10px;

                                                    .dfp-tag-wrapper {
                                                        width: 300px;
                                                        margin: 0 auto;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .pane-byens-rum-liv-popular-most-read-4-rum {

                            .pane-content {

                                .view-content {

                                    .views-row {

                                        .field-article-main-image {
                                            border-color: #c1272d;
                                        }

                                        .field-article-city-district {

                                            &:before {
                                                color: #c1041f;
                                            }
                                        }

                                        .views-field-nothing {
                                            .field-content {
                                                .field-article-sub-headline {
                                                    color: #c1041f;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .pane-mkbh-blocks-mkbh-block-byens-rum-laeser {

                            article.mkbh-node-article-display.view-mode-medium .node-image .mkbh-flowplayer {
                                min-height: 170px;
                            }

                            .pane-content {
                                float: left;

                                .row {
                                    overflow: hidden;

                                    .node-inner {

                                        .node-image {
                                            overflow: hidden;
                                        }

                                        .node-content {

                                            .node-title {
                                                max-height: 115px;
                                                overflow: hidden;
                                            }
                                        }
                                    }

                                    .region-left {
                                        padding: 0;

                                        .node-inner {
                                            height: 170px;
                                        }

                                        .col.region-left-bottom {
                                            margin: 0;
                                        }

                                        & > .col {
                                            margin: 0 0 10px;

                                            .node-inner {
                                                flex: 1;
                                                -webkit-flex: 1;
                                                padding: 0;
                                                margin: 0;
                                            }
                                        }
                                    }

                                    .region-right {
                                        padding: 0;

                                        .node-inner {

                                            .node-content {
                                                height: 169px;
                                            }
                                        }

                                        .region-right-left {

                                            .col {
                                                margin: 0 0 10px;
                                                overflow: hidden;
                                            }

                                            .region-right-left-bottom {
                                                margin: 0;
                                            }
                                        }

                                        & > .col {
                                            padding: 0;

                                            & > .col {
                                                margin: 0 0 10px;

                                                &:nth-child(1) {
                                                    overflow: hidden;
                                                }

                                                &:last-child {
                                                    margin: 0;
                                                }

                                                .node-inner {
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}