@blue: #29abe2;

.page-byens-bolig {

    .flex-grid {
        .flexgrid;
    }

    #page-wrapper {

        .main-container {

            .row {

                section {

                    .content-system {
                        display: none;
                    }

                    .page-content {
                        margin: 0;

                        .panel-separator {
                            display: none;
                        }

                        .pane-cover-a-du-skriver-main-content-panel-pane-1 {

                            .pane-content {
                                float: left;
                                margin: 0 -10px;

                                .view-cover-a-du-skriver-main-content {

                                    .view-content {

                                        .row.overflow {
                                            &.layout-w-n-n, &.layout-n-w-n, &.layout-n-n-w {
                                                .field-underrubrik {
                                                    @media (min-width: 992px) {
                                                        max-height: 45px;
                                                        overflow: hidden;
                                                        display: none;
                                                    }
                                                }

                                                .views-row:not(.wide-region) {
                                                    @media (min-width: 700px) and (max-width: 991px) {
                                                        min-height: 202px !important;

                                                        .field-underrubrik {
                                                            max-height: 52px;
                                                            overflow: hidden;
                                                            padding: 10px 0 0;
                                                        }
                                                    }
                                                }
                                            }
                                        }

                                        .row.overflow.layout-n-n-w .views-row:nth-child(2) .field-underrubrik {
                                            @media (min-width: 992px) {
                                                max-height: 45px;
                                                overflow: hidden;
                                            }
                                        }

                                        .row.overflow {
                                            overflow: hidden;
                                            margin: 0 0 10px;
                                            min-height: 182px;
                                            @media screen and (max-width: @screen-sm-max) {
                                                min-height: 0;
                                            }

                                            &:not(.row.overflow:first-child) {

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

                                            &:nth-child(2) {
                                                margin: 0;

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

                                                .views-row .field-underrubrik {
                                                    display: none;
                                                }
                                            }

                                            &:nth-child(3) {
                                                padding: 10px 0 0;

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

                                                .views-row .field-underrubrik {
                                                    display: none;
                                                }
                                            }
                                        }

                                        .views-row {
                                            border-top: 1px solid #3fb2e5;
                                            float: left;
                                            position: relative;
                                            padding: 0 0;
                                            margin: 0 1% -490px;
                                            background-color: @light-grey;
                                            padding: 0 10px 500px;

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

                                            &:before {
                                                position: absolute;
                                                display: block;
                                                content: '';
                                                top: 0;
                                                left: 0;
                                                right: 0;
                                                bottom: 0;
                                                background-color: black;
                                                opacity: 0;
                                                z-index: 1;
                                                transition: 0.3s;
                                                -webkit-transition: 0.3s;
                                                -o-transition: 0.3s;
                                                -moz-transition: 0.3s;
                                            }

                                            &:not(.views-row-1):not(.views-row-2):not(.views-row-3):not(.views-row-4) {
                                                width: 23%;
                                                margin: 0 1% -500px;
                                                padding: 0 10px 500px;

                                                .field-write-main-image {
                                                    display: none;
                                                }

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

                                                &:after {
                                                    top: -1px;
                                                }
                                            }

                                            .field-write-main-image {
                                                margin: 0 -10px;

                                                .field-write-mi-video {
                                                    position: relative;
                                                    z-index: 2;
                                                }
                                            }

                                            .field-write-city-district {
                                                font-size: 10px;
                                                font-family: 'Montserrat';
                                                text-transform: uppercase;
                                                position: relative;
                                                margin: 9px 0 10px 11px;
                                                margin-left: 11px;
                                                margin-top: 11px;
                                                letter-spacing: 1px;
                                                font-weight: 100;

                                                &:before {
                                                    position: absolute;
                                                    font-family: "mkbh-icons", sans-serif !important;
                                                    font-size: 8px;
                                                    content: 'b';
                                                    top: 2px;
                                                    left: -12px;
                                                    text-transform: none !important;
                                                    color: #29abe2;
                                                }

                                                & + .node-title-compound{
                                                    margin-top: 0!important;
                                                }
                                            }
                                            .node-title-compound {
                                                margin-top: 12px!important;

                                                .views-field-title {
                                                    font-family: 'Montserrat';
                                                    z-index: 1;
                                                    display: inline;

                                                    a {
                                                        color: black;
                                                        //display: inline-block;

                                                        &:before {
                                                            position: absolute;
                                                            content: '';
                                                            display: block;
                                                            top: 0;
                                                            left: 0;
                                                            bottom: 0;
                                                            right: 0;
                                                            z-index: 1;
                                                        }
                                                    }

                                                    & + span {
                                                        font-family: 'Montserrat';
                                                        color: #29abe2;
                                                    }
                                                }

                                                .field-write-sub-headline {
                                                    font-family: 'Montserrat';
                                                    color: #29abe2;
                                                    display: inline;

                                                    & + span {
                                                        color: #9f9f9f;
                                                    }
                                                }
                                            }

                                            .field-underrubrik {
                                                color: #808080;
                                                font-size: 16px;
                                                margin: 16px 0 0;
                                                line-height: 22px;
                                            }

                                            .field-write-body {
                                                font-family: 'Caecilia LT Std';
                                                font-size: 16px;
                                                color: grey;
                                                letter-spacing: -0.1px;
                                                padding: 0;
                                                margin: 16px 0 0;
                                                overflow: hidden;
                                            }


                                        }

                                        .views-row-1 {
                                            width: 48%;

                                            .field-write-sub-headline {
                                                //color: black;
                                            }

                                            .field-underrubrik {
                                                //color: white;
                                            }

                                            .field-write-main-image {

                                                .field-write-mi-video {

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

                                            .field-write-body {
                                                //color: white;
                                                height: auto;
                                                height: 45px;
                                            }
                                        }

                                        .views-row-2 {
                                            width: 23%;
                                            float: left;

                                            .field-write-body {
                                                height: 115px;
                                            }
                                        }

                                        .views-row-3 {
                                            width: 23%;
                                            min-height: 247px;
                                            margin: 0 1% 10px;
                                            padding: 0 10px 10px;

                                            .field-write-body {
                                                height: 44px;
                                            }
                                        }

                                        .views-row-4 {
                                            width: 23%;
                                            min-height: 233px;
                                            margin: 0 1% -490px;

                                            .field-write-body {
                                                height: 25px;
                                            }
                                        }

                                        .views-row-5, .views-row-8 {
                                            width: 23%;
                                            clear: both;

                                            .views-field-title {
                                                overflow: hidden;
                                                margin: 0 0 3px 0;
                                            }
                                        }

                                        .views-row-6, .views-row-9 {
                                            width: 23%;

                                            .views-field-title {
                                                overflow: hidden;
                                                margin: 0 0 3px 0;
                                            }
                                        }

                                        .views-row-7, .views-row-10 {
                                            padding: 0 0 500px;
                                            margin-bottom: -500px;
                                            width: 48%;
                                            position: relative;

                                            .field-write-city-district {
                                                display: inline-block;
                                            }

                                            .field-write-main-image {
                                                float: left;
                                                width: 48%;
                                                margin: 0 10px -10px 0;
                                            }

                                            .views-field-title {
                                                width: 49%;
                                                overflow: hidden;
                                                margin: 0 0 3px;
                                            }

                                            .views-field-title + span {
                                                float: left;
                                                width: 3%;
                                                color: white;
                                            }

                                            .field-write-sub-headline {
                                                width: 40%;
                                            }

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

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

                                        .views-row-3, .views-row-4, .views-row-5, .views-row-6, .views-row-8, .views-row-9 {
                                            .field-write-main-image {
                                                display: none;
                                            }
                                        }

                                        .views-row.wide-region {
                                            padding: 0 0 500px;
                                            margin-bottom: -500px;
                                            width: 48% !important;
                                            //position: relative;

                                            .field-write-main-image {
                                                display: block !important;
                                                float: left;
                                                width: 50%;
                                                margin: 0 10px 0 -10px;
                                            }

                                            .field-write-city-district {
                                                display: inline-block;
                                            }

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

                                        @media screen and(max-width: 992px) {
                                            .row.overflow.layout-w-n-n {
                                                .views-row:nth-child(1) {
                                                    padding: 0;
                                                    width: 100% !important;
                                                    height: auto;
                                                    margin: 0 0 10px;

                                                    .node-title-compound {
                                                        padding: 0 15px;
                                                    }

                                                    .field-write-main-image {
                                                        width: 50% !important;
                                                    }

                                                    & > div {
                                                        width: 50% !important;
                                                        float: left;
                                                        margin: 0 !important;
                                                    }

                                                    .field-write-city-district {
                                                        padding: 10px 30px 10px;

                                                        &:before {
                                                            top: 10px;
                                                            left: 15px;
                                                        }
                                                    }

                                                    & > span {
                                                        padding: 0 0 0 10px;
                                                        width: 3% !important;
                                                    }

                                                    .field-write-sub-headline {
                                                        width: 50%;
                                                        float: none;

                                                        & + span {
                                                            padding: 0;
                                                        }
                                                    }

                                                    .field-write-body {
                                                        padding: 5px 20px 0;
                                                    }
                                                }

                                                .views-row:nth-child(2) {
                                                    margin: 0 1% 0 0;
                                                    padding: 0 10px 15px;
                                                    width: 50%;
                                                    height: 150px;
                                                    min-height: initial;

                                                    .field-write-city-district {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        font-size: 10px;
                                                        font-family: 'Montserrat';
                                                        text-transform: uppercase;
                                                        position: relative;
                                                        margin: 9px 0 10px 11px !important;
                                                        letter-spacing: 1px;
                                                        font-weight: 100;
                                                        padding: 0;

                                                        &:before {
                                                            top: 2px;
                                                            left: -12px;
                                                        }
                                                    }

                                                    .node-title-compound {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        padding: 0;
                                                    }
                                                }

                                                .views-row:nth-child(3) {
                                                    margin: 0 0 10px;
                                                    padding: 0 10px 15px;
                                                    width: 49%;
                                                    height: 150px;
                                                    min-height: initial;

                                                    .field-write-city-district {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        font-size: 10px;
                                                        font-family: 'Montserrat';
                                                        text-transform: uppercase;
                                                        position: relative;
                                                        margin: 9px 0 10px 11px !important;
                                                        letter-spacing: 1px;
                                                        font-weight: 100;
                                                        padding: 0;

                                                        &:before {
                                                            top: 2px;
                                                            left: -12px;
                                                        }
                                                    }

                                                    .node-title-compound {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        padding: 0;
                                                    }
                                                }
                                            }

                                            .row.overflow.layout-n-w-n {
                                                .views-row:nth-child(1) {
                                                    padding: 0 10px 15px;
                                                    width: 100% !important;
                                                    margin: 0 0 10px;
                                                    height: 150px;
                                                    min-height: initial;

                                                    .field-write-city-district {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        font-size: 10px;
                                                        font-family: 'Montserrat';
                                                        text-transform: uppercase;
                                                        position: relative;
                                                        margin: 9px 0 10px 11px !important;
                                                        letter-spacing: 1px;
                                                        font-weight: 100;
                                                        padding: 0;

                                                        &:before {
                                                            top: 2px;
                                                            left: -12px;
                                                        }
                                                    }

                                                    .node-title-compound {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        padding: 0;
                                                    }
                                                }

                                                .views-row:nth-child(2) {
                                                    padding: 0;
                                                    width: 100% !important;
                                                    height: auto;
                                                    margin: 0 0 10px;

                                                    .node-title-compound {
                                                        padding: 0 15px;
                                                    }

                                                    .field-write-main-image {
                                                        width: 50% !important;
                                                    }

                                                    & > div {
                                                        width: 50% !important;
                                                        float: left;
                                                        margin: 0 !important;
                                                    }

                                                    .field-write-city-district {
                                                        padding: 10px 30px 10px;

                                                        &:before {
                                                            top: 10px;
                                                            left: 15px;
                                                        }
                                                    }

                                                    & > span {
                                                        padding: 0 0 0 10px;
                                                        width: 3% !important;
                                                    }

                                                    .field-write-sub-headline {
                                                        width: 50%;
                                                        float: none;

                                                        & + span {
                                                            padding: 0;
                                                        }
                                                    }

                                                    .field-write-body {
                                                        padding: 5px 20px 0;
                                                    }
                                                }

                                                .views-row:nth-child(3) {
                                                    padding: 0 10px 15px;
                                                    width: 100% !important;
                                                    margin: 0 0 10px;
                                                    height: 150px;
                                                    min-height: initial;

                                                    .field-write-city-district {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        font-size: 10px;
                                                        font-family: 'Montserrat';
                                                        text-transform: uppercase;
                                                        position: relative;
                                                        margin: 9px 0 10px 11px !important;
                                                        letter-spacing: 1px;
                                                        font-weight: 100;
                                                        padding: 0;

                                                        &:before {
                                                            top: 2px;
                                                            left: -12px;
                                                        }
                                                    }

                                                    .node-title-compound {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        padding: 0;
                                                    }
                                                }
                                            }

                                            .row.overflow.layout-n-n-w {
                                                .views-row:nth-child(1) {
                                                    margin: 0 1% 0 0;
                                                    padding: 0 10px 15px;
                                                    width: 50%;
                                                    //height: 150px;
                                                    min-height: 202px;

                                                    .field-write-city-district {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        font-size: 10px;
                                                        font-family: 'Montserrat';
                                                        text-transform: uppercase;
                                                        position: relative;
                                                        margin: 9px 0 10px 11px !important;
                                                        letter-spacing: 1px;
                                                        font-weight: 100;
                                                        padding: 0;

                                                        &:before {
                                                            top: 2px;
                                                            left: -12px;
                                                        }
                                                    }

                                                    .node-title-compound {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        padding: 0;
                                                    }
                                                }

                                                .views-row:nth-child(2) {
                                                    margin: 0 0 10px;
                                                    padding: 0 10px 15px;
                                                    width: 49%;
                                                    //height: 150px;
                                                    min-height: 202px;

                                                    .field-underrubrik {
                                                        max-height: 52px;
                                                        overflow: hidden;
                                                        padding: 10px 0 0;
                                                    }

                                                    .field-write-city-district {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        font-size: 10px;
                                                        font-family: 'Montserrat';
                                                        text-transform: uppercase;
                                                        position: relative;
                                                        margin: 9px 0 10px 11px !important;
                                                        letter-spacing: 1px;
                                                        font-weight: 100;
                                                        padding: 0;

                                                        &:before {
                                                            top: 2px;
                                                            left: -12px;
                                                        }
                                                    }

                                                    .node-title-compound {
                                                        display: block;
                                                        float: none;
                                                        width: 100%;
                                                        padding: 0;
                                                    }
                                                }

                                                .views-row:nth-child(3) {
                                                    padding: 0;
                                                    width: 100% !important;
                                                    height: auto;
                                                    margin: 0 0 10px;

                                                    .node-title-compound {
                                                        padding: 0 15px;
                                                    }

                                                    .field-write-main-image {
                                                        width: 50% !important;
                                                    }

                                                    & > div {
                                                        width: 50% !important;
                                                        float: left;
                                                        margin: 0 !important;
                                                    }

                                                    .field-write-city-district {
                                                        padding: 10px 30px 11px;

                                                        &:before {
                                                            top: 10px;
                                                            left: 15px;
                                                        }
                                                    }

                                                    & > span {
                                                        padding: 0 0 0 10px;
                                                        width: 3% !important;
                                                    }

                                                    .field-write-sub-headline {
                                                        width: 50%;
                                                        float: none;

                                                        & + span {
                                                            padding: 0;
                                                        }
                                                    }

                                                    .field-write-body {
                                                        padding: 5px 20px 0;
                                                    }
                                                }
                                            }
                                        }

                                        @media screen and(max-width: 699px) {
                                            .row.overflow.layout-w-n-n {
                                                padding: 0;

                                                .views-row:nth-child(1) {
                                                }

                                                .views-row:nth-child(2) {
                                                    width: 100%;
                                                    margin-bottom: 10px;
                                                }

                                                .views-row:nth-child(3) {
                                                    width: 100%;
                                                    margin-bottom: 10px;
                                                }
                                            }

                                            .row.overflow.layout-n-w-n {
                                                padding: 0;

                                                .views-row:nth-child(1) {
                                                    width: 100%;
                                                    margin-bottom: 10px;
                                                }

                                                .views-row:nth-child(2) {
                                                }

                                                .views-row:nth-child(3) {
                                                    width: 100%;
                                                    margin-bottom: 10px;
                                                }
                                            }

                                            .row.overflow.layout-n-n-w {
                                                padding: 0;

                                                .views-row:nth-child(1) {
                                                    width: 100%;
                                                    margin-bottom: 10px;
                                                }

                                                .views-row:nth-child(2) {
                                                    width: 100%;
                                                    margin-bottom: 10px;
                                                }

                                                .views-row:nth-child(3) {
                                                }
                                            }
                                        }
                                    }

                                    .item-list {
                                        @media (min-width: 1200px) {
                                            padding: 0 10px;
                                        }

                                        .pager {
                                            text-align: left;
                                        }
                                    }
                                }
                            }
                        }

                        .panel-separator {
                            clear: both;
                        }

                        .pane-custom.pane-1 {
                            position: relative;
                            background-color: #d0e2f7;
                            font-family: 'Montserrat';
                            margin: 0 0 22px;
                            width: 83.2%;
                            float: right;

                            & + .panel-separator {
                                display: block;
                            }

                            h2.pane-title {
                                font-family: 'Montserrat';
                                font-size: 26px;
                                font-weight: bold;
                                float: left;
                                @media (min-width: 1200px) {
                                    flex: 245px 0;
                                    -webkit-flex: 245px 0;
                                }
                                margin: 14px 0 0 17px;
                                line-height: 26px;
                                color: inherit;
                                padding: 0;

                                &:before {
                                    display: none;
                                }
                            }

                            .pane-content {
                                margin: 0;

                                p {
                                    float: left;
                                }

                                p:nth-child(1) {
                                    font-size: 20px;
                                    font-weight: normal;
                                    margin: 16px 0 15px 0;
                                    line-height: 26px;
                                }

                                p:nth-child(3) {
                                    font-size: 14px;
                                    font-weight: 100;
                                    position: absolute;
                                    top: 0px;
                                    right: 0px;
                                    bottom: 0;
                                    margin: 0;
                                    padding: 38px 11px 0;
                                    background-color: #29abe2;
                                    width: 60px;
                                    @media (min-width: 992px) and (max-width: 1200px) {
                                        padding: 55px 11px 0;
                                    }
                                    @media (min-width: 320px) and (max-width: 992px) {
                                        display: block;
                                        margin: 0 -10px;
                                    }

                                    a {
                                        position: absolute;
                                        display: inline-block;
                                        word-wrap: break-word;
                                        width: 40px;
                                        text-align: center;
                                        line-height: 13px;
                                        color: white;
                                        padding-top: 10px;
                                        @media (min-width: 320px) and (max-width: 992px) {
                                            position: relative;
                                            padding: 10px 0;
                                        }

                                        &:before {
                                            position: absolute;
                                            display: inline-block;
                                            content: '\f0a9';
                                            font-family: 'FontAwesome';
                                            width: 30px;
                                            height: 30px;
                                            top: -17px;
                                            left: 3px;
                                            color: white;
                                            font-size: 38px;
                                            @media (min-width: 320px) and (max-width: 992px) {
                                                top: 11px;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .pane-mkbh-view-group {

                            .pane-content {

                                .block-wrapper.mkbh-block-front-popular {

                                    .flex-grid {

                                        .flex-column {
                                            border-top: 1px solid #3fb2e5;
                                            background-color: #d0e2f7;

                                            .view-cover-a-du-skriver-popular {

                                                .view-content {

                                                    .views-row {
                                                        color: #999;
                                                        padding: 5px 0 5px 28px;

                                                        .views-field-counter, .views-field-fb-comments {

                                                            .field-content {
                                                                color: #76c8e5;
                                                            }
                                                        }

                                                        .views-field-title {
                                                            display: inline;

                                                            &:after {
                                                                background-color: #7bc9e6;
                                                                bottom: 0;
                                                            }

                                                            .field-content {

                                                                a {
                                                                    color: #1a1a1a;
                                                                }
                                                            }
                                                        }

                                                        .field-write-sub-headline {
                                                            display: inline;
                                                            color: #3fb2e5;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}