@orange: #f7931e;
@light-orange: #efd7c5;
@grey: #b3b3b3;
@background-node-color: #1a1a1a;

.page-foto {

    .flex-grid {
        .flexgrid;
    }

    #page-wrapper {

        .main-container {

            .row {

                section {

                    .content-system {
                        display: none;
                    }

                    .page-content {
                        margin: 0 -15px 0 0;

                        a {
                            display: inline-block;
                        }

                        .pane-cover-c-main-content-panel-pane-1 {

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

                                .view-content {

                                    .views-row {
                                        float: left;
                                        padding: 0 0px 500px;
                                        margin: 0 1% -500px;
                                        background-color: @background-node-color;
                                        position: relative;
                                        border-right: 1px solid grey;
                                        border-top: 1px solid @orange;

                                        &:hover {

                                            .views-field-title {

                                                .field-content {

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

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

                                        &:after {
                                            position: absolute;
                                            display: block;
                                            content: '';
                                            top: 0;
                                            bottom: 0;
                                            right: -11px;
                                            width: 1px;
                                            background-color: grey;
                                        }

                                        .field-photo-main-image {
                                            img {
                                                width: 100%;
                                            }
                                        }

                                        .views-field-nothing {
                                            font-family: 'Montserrat';
                                            font-size: 10px;
                                            font-weight: 100;
                                            text-transform: uppercase;
                                            color: @orange;
                                            padding: 14px 0 0 29px;
                                            letter-spacing: 1px;

                                            .field-content {
                                                position: relative;
                                                padding-left: 4px;

                                                &:before {
                                                    font-family: 'FontAwesome';
                                                    content: '\f030';
                                                    display: block;
                                                    position: absolute;
                                                    top: -4px;
                                                    left: -18px;
                                                    color: @orange;
                                                    font-size: 14px;
                                                }
                                            }
                                        }

                                        .views-field-title {
                                            font-family: 'Montserrat';
                                            padding: 0 12px 20px;
                                            z-index: 1;

                                            a {
                                                color: white;

                                                &:before {
                                                    background-color: black;
                                                    opacity: 0;
                                                    transition: 0.3s;
                                                }
                                            }

                                            .field-photo-sub-headline {
                                                color: #f7931e;
                                                display: inline;

                                                & + span {
                                                    color: white;
                                                    padding-right: 5px;
                                                }
                                            }
                                        }

                                        .field-body {
                                            font-family: 'Caecilia LT Std';
                                            font-size: 16px;
                                            color: @grey;
                                            margin: 0 11px 20px;
                                            overflow: hidden;
                                        }
                                    }

                                    .first-row-wrapper {
                                        overflow: hidden;
                                        margin: 0 -10px;
                                    }

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

                                    .views-row-2 {
                                        width: 23%;
                                    }

                                    .views-row-3 {
                                        width: 23%;

                                        &:after {
                                            display: none;
                                        }
                                    }

                                    .views-row-last {
                                        &:after {
                                            display: none;
                                        }
                                    }

                                    .second-row-wrapper {
                                        padding: 10px 0 0;
                                        clear: both;
                                        display: inline-block;
                                        overflow: hidden;
                                        margin: 0 -10px 0;
                                        @media (min-width: 600px) {
                                            margin: 0 -10px 5px;
                                        }

                                        .views-row {
                                            width: 23%;

                                            .views-field-title {
                                                padding: 0 10px 20px;

                                                .field-content {

                                                    a {
                                                        display: inline-block;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

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

                                .item-list {
                                    @media (min-width: 600px) {
                                        margin: -5px 0 0;
                                    }
                                }
                            }
                        }

                        .pane-mkbh-view-group {

                            .pane-content {

                                .block-wrapper {

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

                                        .flex-column {
                                            border-top: 1px solid #f7931e;
                                            background-color: @light-orange;

                                            .view {
                                                .view-content {
                                                    .views-row {
                                                        &.views-row-last {
                                                            .views-field-title {
                                                                border-bottom: none;
                                                            }
                                                        }

                                                        .views-field-title {
                                                            border-bottom: 1px solid #ffad69;

                                                            a {
                                                                color: #1a1a1a;
                                                            }
                                                        }

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

                                                        .views-field-fb-comments {
                                                            color: #ffad69;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}