﻿
.bh-sl-container {
    position: relative;
    width: 100%;
    /* Avoid issues with Google Maps and CSS frameworks */
}

.bh-sl-form-container {
    display: flex;
    flex-wrap:wrap;
    width: 100%;
    margin: 0;
    background: rgba(84, 141, 103, 1);
    padding:25px 20px 25px 30px;
    box-sizing:border-box;
}
    .bh-sl-form-container .zoekForm, .bh-sl-form-container .zoekForm  .veld{
        position: relative;
        width:100%;
    }
    .bh-sl-form-container .zoekForm .box {
        background: rgba(255, 255, 255, 1);
        border-radius: 22px 22px 22px 0px;
        -moz-border-radius: 22px 22px 22px 0px;
        -webkit-border-radius: 22px 22px 22px 0px;
        border: 0;
        font-size: 17px;
        height: 50px;
        padding: 0 30px;
        line-height: 50px;
        font-family: 'ProximaNova-RegularIt';
        width: 100%;
        box-sizing: border-box;
        color: rgb(128, 128, 128);
    }

        .bh-sl-form-container .zoekForm .box::placeholder {
            color: rgb(144,144,144) !important;
        }

    .bh-sl-form-container .zoekForm .button {
        position: absolute;
        top: 0;
        right: 0;
        height: 50px;
        width: 50px;
        cursor:pointer;
    }

        .bh-sl-form-container .zoekForm .button button {
            background: none;
            cursor: pointer;
            border: 0;
            font-size: 17px;
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            color: rgba(84, 141, 103, 1);
        }
.bh-sl-container .bh-sl-map-container {
    position: relative;
    display: flex;
    flex-wrap:wrap;
    width: 100%;
}

.bh-sl-container .bh-sl-loc-list {
    width: 330px;
    height: 730px;
    padding: 0;
    box-sizing: border-box;
}
    .bh-sl-container .bh-sl-loc-list ul {
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow:auto;
        height:calc(100% - 130px);
    }

        .bh-sl-container .bh-sl-loc-list ul li {
            /* Adding this to prevent moving li elements when adding the list-focus class*/
            box-sizing: border-box;
            cursor: pointer;
            width: 100%;
            line-height:23px;
            padding:0 30px;
            margin:10px 0 20px;
        }

    .bh-sl-container .bh-sl-loc-list .list-details {
        width: 100%;
    }
        .bh-sl-container .bh-sl-loc-list .list-details .loc-name span {
            font-family: 'ProximaNova-Bold';
            color: rgba(84, 141, 103, 1);
        }
        .bh-sl-container .bh-sl-loc-list .list-details .loc-description{
            font-size:15px;
            color:rgb(144,144,144);
        }
        .bh-sl-container .bh-sl-loc-list .list-details .list-content {
            font-size: 17px;
            padding: 5px 0;
            transition: ease-in-out color 0.3s;
            color: rgb(0,0,0);
        }

            .bh-sl-container .bh-sl-loc-list .list-details .list-content:hover {

            }

    .bh-sl-container .bh-sl-loc-list .list-focus .list-content {

    }

.bh-sl-container .bh-sl-map {
    float: left;
    height: 730px;
    width: calc(100% - 330px);
}

.infoBox img.locationMarker {
    position: absolute;
    left: -2px;
    top: -8px;
    width: 31px;
    margin: 0 !important;
    opacity: 1 !important;
}

    .infoBox img.locationMarker:hover {
        opacity: 1 !important;
    }

.boxContent {
    padding: 50px 20px 25px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    border-radius: 17px;
    -moz-border-radius: 17px;
    -webkit-border-radius: 17px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000000');
    color: rgb(61,61,63);
    height: 295px;
    width: 270px;
}

    .boxContent .loc-name {
        font-size: 19px;
        font-family: 'ProximaNova-Bold';
        color: rgba(84, 141, 103, 1);
    }
    .boxContent .loc-description {
        font-size: 15px;
        color: rgb(144,144,144);
        margin-bottom:30px;
    }
        .boxContent .loc-adres {
    font-size: 15px;
}
        .boxContent .loc-adres strong {
            font-weight: normal;
            font-family: 'OpenSans-Bold';
        }
        .infoBox img {
    margin: 20px 20px 0 0 !important;
    transition: ease-in-out opacity 0.3s;
}

            .infoBox img.activeMarker {
                position: absolute;
                left: -44px;
                top: 15px;
                height: 45px;
            }
    .infoBox .buttonSet {
    width: calc(100% + 20px);
    margin: 30px 0 0;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

}
@media (max-width: 1000px) {
    .bh-sl-container .bh-sl-loc-list {
        width: 270px;
    }
    .bh-sl-container .bh-sl-loc-list, .bh-sl-container .bh-sl-map {
        height: 475px;
    }
    .bh-sl-container .bh-sl-map {
        width:calc(100% - 270px);
    }
    }
@media (max-width: 750px) {
    .bh-sl-container .bh-sl-loc-list, .bh-sl-container .bh-sl-map {
        height: 475px;
    }
        .bh-sl-container .bh-sl-loc-list{
            height:auto;
            max-height:475px;
        }
        .bh-sl-container .bh-sl-loc-list, .bh-sl-container .bh-sl-map {
            width: 100%;
        }
        .bh-sl-container .bh-sl-loc-list ul{
            display:none;
        }
}