.page-byens-liv {

    .content-system {
        display: none;
    }

    .flex-grid {
        .flexgrid;
    }

    article.mkbh-node-article-display {

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

        .node-inner {
            border-top: 1px solid #f15a24;
            position: relative;

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

                &:before {
                    color: #f15a24;
                }
            }

            .node-title {
                z-index: 1;

                .title {
                    color: #f15a24;
                }
            }

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

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

    }

    article.mkbh-node-article-display .node-content {

        .item-list {

            .node-breadcrumbs {
                font-size: 10px;
                font-weight: 100;
            }
        }

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

            .subtitle {
                color: #f15a24;
            }

            .title {
                color: #1a1a1a;
            }
        }

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

    .main-container {

        .container {

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

                .row.paginated.from-ajax {
                    margin-top: 10px;

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

                    .region-bottom-medium-top-left,
                    .region-bottom-small-left-1,
                    .region-bottom-small-left-2,
                    .region-bottom-small-top-left,
                    .region-bottom-small-top-right,
                    .region-bottom-small-bottom-left,
                    .region-bottom-small-bottom-right {
                        margin-bottom: 0 !important;
                    }

                    @media screen and(max-width: 992px) {
                        margin-top: 0;
                    }
                }

                .pane-content {
                    float: left;

                    .row.overflow-hidden:nth-child(1) {

                        .region-top-left {

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

                        .region-top-right {
                            padding: 0;

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

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

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

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

                            .node-title {
                                overflow: hidden;

                                a {
                                    overflow: hidden;
                                }
                              margin-bottom: 10px;
                            }
                        }

                        .region-bottom-left {
                            padding: 0 0 300px;
                            margin: 0 0 -300px;

                            .region-bottom-medium-top-left {
                                margin: 0 0 10px;
                                overflow: hidden;
                            }
                        }

                        .region-bottom-right {
                            padding: 0;

                            .region-bottom-small-left {
                                padding: 0;

                                .region-bottom-small-top-left {
                                    margin: 0 0 10px;
                                    overflow: hidden;

                                    & + div {

                                        // THIS IS SET FROM BACKEND!
                                        //.node-inner {
                                        //	background-color: #eaa28c;
                                        //
                                        //	ul.node-breadcrumbs li {
                                        //		color: white;
                                        //
                                        //		&:before {
                                        //			color: white;
                                        //		}
                                        //	}
                                        //
                                        //	.subtitle {
                                        //		color: #f15a24;
                                        //	}
                                        //
                                        //	.title {
                                        //		color: white;
                                        //	}
                                        //}
                                    }
                                }
                            }

                            .region-bottom-small-right {
                                padding: 0;

                                .region-bottom-small-top-right {
                                    article.mkbh-node-article-display {
                                        .node-content {
                                            .node-title {
                                                .title {
                                                    display: block; /*URBANPLANENS*/
                                                }
                                            }
                                        }
                                    }
                                }

                                & > .col {
                                    overflow: hidden;

                                    &:first-child {
                                        margin: 0 0 10px;
                                    }
                                }
                            }
                        }
                    }

                    .row {
                        &.overflow-hidden.randomized-rows {
                            article.mkbh-node-article-display.view-mode-medium.orientation-horizontal .node-inner {
                                display: flex;
                                display: -webkit-flex;
                                flex-direction: row;
                                -webkit-flex-direction: row;
                            }

                            .col:nth-child(1), .col:nth-child(2) {
                                border-right: 1px solid #b3b3b3;
                            }

                            .col:nth-child(3) {
                                border-right: 0;
                            }

                            @media screen and(max-width: 992px) {
                                float: none !important;
                                width: auto !important;

                                padding: 0 10px;

                                .col {
                                    padding: 0;
                                    border-right: 0 !important;
                                }

                                &.layout-n-n-w {
                                    .col:nth-child(1) {
                                        width: 50%;
                                        float: left;
                                        overflow: hidden;
                                        padding-right: 10px;
                                        margin-bottom: 10px;
                                    }

                                    .col:nth-child(2) {
                                        width: 50%;
                                        float: left;
                                        overflow: hidden;
                                        margin-bottom: 10px;
                                    }

                                    .col:nth-child(3) {
                                        width: 100%;
                                        float: none;
                                        overflow: hidden;
                                        margin-bottom: 10px;
                                    }
                                }

                                &.layout-n-w-n {
                                    .col:nth-child(1) {
                                        width: 100%;
                                        float: none;
                                        overflow: hidden;
                                        margin-bottom: 10px;
                                    }

                                    .col:nth-child(2) {
                                        width: 100%;
                                        float: none;
                                        overflow: hidden;
                                        margin-bottom: 10px;
                                    }

                                    .col:nth-child(3) {
                                        width: 100%;
                                        float: none;
                                        overflow: hidden;
                                        margin-bottom: 10px;
                                    }
                                }

                                &.layout-w-n-n {
                                    .col:nth-child(1) {
                                        width: 100%;
                                        float: none;
                                        overflow: hidden;
                                        margin-bottom: 10px;
                                    }

                                    .col:nth-child(2) {
                                        width: 50%;
                                        float: left;
                                        overflow: hidden;
                                        padding-right: 10px;
                                        margin-bottom: 10px;
                                    }

                                    .col:nth-child(3) {
                                        width: 50%;
                                        float: left;
                                        overflow: hidden;
                                        margin-bottom: 10px;
                                    }
                                }
                            }

                            @media screen and(max-width: 599px) {
                                padding: 0 10px;

                                .col {
                                    padding-right: 0 !important;
                                    border-right: 0 !important;
                                    float: none !important;
                                    width: 100% !important;

                                    article.mkbh-node-article-display.view-mode-medium.orientation-horizontal .node-inner {
                                        display: block;
                                    }
                                }
                            }
                        }

                        @media screen and(max-width: 992px) {
                            &.overflow-hidden {
                                float: none !important;
                            }
                        }
                    }
                }
            }

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

                .pane-content {

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

                        .flex-column {
                            background-color: #efd9d3;
                            border-top: 1px solid #f15a24;

                            .view .view-content .views-row .views-field-nothing {
                                color: #eaa28c;
                            }

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

                            .view-content {

                                .views-row {

                                    .views-row-grid {
                                        border-color: #f4a992;
                                    }

                                    .views-row-content {
                                        min-height: 45px;
                                        padding: 6px 0;

                                        a {
                                            color: #9f9d9d;
                                        }
                                    }

                                    .views-field-nothing {
                                        color: #f4a992;
                                    }

                                    .views-field-counter {
                                        color: #f4a992;
                                    }

                                    .views-field {
                                        display: inline;
                                    }

                                    .field-article-sub-headline {
                                        display: inline;
                                        color: #f15a24;
                                    }
                                }
                            }

                            &.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-liv {

                .pane-content {

                    .view-content {

                        .views-row {

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

                            .field-article-city-district {
                                font-weight: 100;

                                &:before {
                                    color: #f15a24;
                                }
                            }

                            .views-field-created {
                                font-weight: 100;
                            }

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

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

                .mkbh-flowplayer {
                    min-height: 184px;
                }

                .pane-content {
                    float: left;

                    .row.overflow-hidden {
                        overflow: hidden;

                        .node-inner {
                            border-color: #c1041f;
                        }

                        .node-content {
                            height: 178px;
                            @media (min-width: 1200px) {
                                height: 184px;
                            }

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

                            .node-breadcrumbs li:before {
                                color: #c1041f;
                            }
                        }

                        .region-left {
                            padding: 0;

                            .region-left-right {

                                .region-left-right-top {

                                    .node-inner {
                                        background-color: #cd5257;

                                        .item-list {

                                            .node-breadcrumbs {
                                                color: white;

                                                li:before {
                                                    color: white;
                                                }
                                            }

                                        }

                                        .node-title {

                                            .subtitle {
                                                color: white;
                                            }
                                        }
                                    }
                                }
                            }

                            & > .col {
                                padding: 0;

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

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

                        .region-right {

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

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

                                &:last-child {
                                    margin: 0;

                                    .node-inner {
                                        background-color: #cd5257;

                                        .item-list {

                                            .node-breadcrumbs {
                                                color: white;

                                                li:before {
                                                    color: white;
                                                }
                                            }

                                        }

                                        .node-title {

                                            .subtitle {
                                                color: white;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}