.searchBar {
    padding: 15px;
    border-radius: 20px;
    background-color: lightgray;
}

.searchBar input,
.searchBar select {
    padding: 10px 5px 10px 20px;
    border: 2px solid #2b5336;
    border-radius: 25px;
    width: 250px;
    font-size: 12px;
    color: #999;
    background-color: white;
    height: 48px;
}

#houseNA{
    font-size: 10px !important;
}

.searchBar button {
    border: 2px solid #2b5336;
    border-radius: 100%;
    width: 48px;
    height: 48px;
    color: #F5F5F5;
    margin-left: 10px;
    background-color: #69866f;
    /*display: inline-flex;
    flex-direction: column;*/
    justify-content: center !important;
    align-items: center;
    font-size: 16px;
    color: white;
    font-weight: bold;
    text-decoration: none;

}

.searchBar button:hover {
    opacity: 1 !important;
    background-color: #2b5336;
}



.searchBar input:focus {
    outline: none !important;
}


.marker {
    position: relative;
    border: 2px solid white !important;
}



.marker::before,
.marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.marker::before {
    width: 32px;
    height: 32px;
    background-color: red;
    border-radius: 50% 50% 50% 0;
}

.marker::after {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: black;
}

.house {
    position: absolute;
    cursor: pointer;
}


#p1 {
    top: 2%;
    left: 86%;
}

#p2 {
    top: 18.5%;
    left: 87.5%;
}

#p3 {
    top: 9.5%;
    left: 78%;
}

#p4 {
    top: 23.5%;
    left: 80%;
}



#p5 {
    top: 29%;
    left: 76.5%;
}

#p6 {
    top: 30%;
    left: 69.5%;
}

#p7 {
    top: 31%;
    left: 63.5%;
}

#p8 {
    top: 32.5%;
    left: 56.20%;
}

#p9 {
    top: 11%;
    left: 69.5%;
}



#p10 {
    top: 12%;
    left: 60.5%;
}



#p11 {
    top: 15.3%;
    left: 51.5%;
}

#p12 {
    top: 22%;
    left: 48%;
}


#p16 {
    top: 55%;
    left: 35.5%;
}

#p17 {
    top: 41.5%;
    left: 47%;
}

#p18 {
    top: 60%;
    left: 37.75%;
}

#p26 {
    top: 63%;
    left: 6%;
}

#p27 {
    top: 44.25%;
    left: 33.5%;
}

#p28 {
    top: 63%;
    left: 49.50%;
}

#p29 {
    top: 50%;
    left: 33.5%;
}

#p30 {
    top: 58%;
    left: 49.50%;
}

#p31 {
    top: 53.5%;
    left: 49.50%;
}

#p32 {
    top: 48.8%;
    left: 49.50%;
}

#p33 {
    top: 44.8%;
    left: 48.75%;
}


.mLeft:hover {
    animation: dirLeft 2s ease-in-out infinite;
}

.mRight:hover {
    animation: dirRight 2s ease-in-out infinite;
}

.mTop:hover {
    animation: dirTop 2s ease-in-out infinite;
}

.mBottom:hover {
    animation: dirBottom 2s ease-in-out infinite;
}


.mRight .marker::before {
    border-radius: 50% 50% 0% 50%;
}

.mLeft .marker::before {
    border-radius: 0 50% 50% 50%;
}

.mTop .marker::before {
    border-radius: 50% 0 50% 50%;
}

.mBottom .marker::before {
    border-radius: 50% 50% 50% 0;
}

.mCottages .marker::before {
    background-color: #fbe498 !important;
    border: 2px solid #FFFF33;
}

.mWooland .marker::before {
    background-color: #37ae50 !important;
    border: 2px solid #0FFF50;
}

.mWoolandDog .marker::before {
    background-color: #99cd4e !important;
    border: 2px solid #0FFF50;
}

.mCreekside .marker::before {
    background-color: #35b2f2 !important;
    border: 2px solid #00FFFF;
}

.mLakeside .marker::before {
    background-color: #bcdee8 !important;
    border: 2px solid #00FFFF;
}

.markerNA .marker::before {
    background-color: #DDD !important;
    border: 2px solid #666;
}


.markerNA::after {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #999;
}

.markerNA{
    opacity: 0.3 !important;
}

@keyframes dirRight {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10px, 0);
    }
}

@keyframes dirLeft {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-10px, 0);
    }
}

@keyframes dirBottom {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, 10px);
    }
}

@keyframes dirTop {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, -10px);
    }
}

#pop-up {
    position: absolute !important;
}

.otherMarker {
    position: absolute;
    height: 12px;
    width: 12px;
    background-color: red;
    border-radius: 50%;
    cursor: pointer;
}




/************************* */
@media only screen and (min-width:390px) {
    .marker::before {
        width: 14px;
        height: 14px;
    }

    .marker::after {
        width: 4px;
        height: 4px;
    }

    .otherMarker {
        height: 6px;
        width: 6px;
    }
}


@media only screen and (min-width:992px) {
    .marker::before {
        width: 32px;
        height: 32px;
    }

    .marker::after {
        width: 10px;
        height: 10px;
    }

    .otherMarker {
        height: 12px;
        width: 12px;
    }
}