.map-circle {
    background: red;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border:1px solid darkred;
}

/*
.map-pin1 {
    width: 20px;
    height: 30px;
    background-color: #f00;
    border-radius: 50% 50% 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.map-pin1::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    top: 25%;
    left: 25%;
    border-radius: 50%;
}
*/

.map-pin {
    top: -10px;
    width: 6px;
    height: 6px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.map-pin:after {
    height: 8px;
    width: 2px;
    content:'';
    background: #666;
    display: block;
    position: absolute;
    z-index: -1;
    left: 5px;
    top: 100%;
    -webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.1), inset 1px 0 rgba(255,255,255,.3);
    -moz-box-shadow: 0 1px 2px 1px rgba(0,0,0,.1), inset 1px 0 rgba(255,255,255,.3);
    box-shadow: 0 1px 2px 1px rgba(0,0,0,.1), inset 1px 0 rgba(255,255,255,.3);
}

.map-pin-red {
    background-color: #f33;
    background-image: -webkit-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
    background-image: -moz-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
    background-image: -ms-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
    background-image: -o-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
    background-image: linear-gradient(to bottom, rgba(100,0,0,0), rgba(255,90,90,1));
    box-shadow: 0 0 0 1px #c00, inset 0 1px 1px rgba(255,255,255,.6), 0 2px 2px rgba(0,0,0,.4);
}

.map-pin-blue {
    background-color: #3333cc;
    background-image: -webkit-linear-gradient(top, rgba(0,100,0,0), rgba(100,100,255,1));
    background-image: -moz-linear-gradient(top, rgba(0,100,0,0), rgba(100,100,255,1));
    background-image: -ms-linear-gradient(top, rgba(0,100,0,0), rgba(100,100,255,1));
    background-image: -o-linear-gradient(top, rgba(0,100,0,0), rgba(100,100,255,1));
    background-image: linear-gradient(to bottom, rgba(0,100,0,0), rgba(100,100,255,1));
    box-shadow: 0 0 0 1px #88c, inset 0 1px 1px rgba(255,255,255,.6), 0 2px 2px rgba(0,0,0,.4);
}

.map-pin-orange {
    background-color: #ff9900;
    background-image: -webkit-linear-gradient(top, rgba(100,0,0,0), rgba(176, 106, 0,1));
    background-image: -moz-linear-gradient(top, rgba(100,0,0,0), rgba(176, 106, 0,1));
    background-image: -ms-linear-gradient(top, rgba(100,0,0,0), rgba(176, 106, 0,1));
    background-image: -o-linear-gradient(top, rgba(100,0,0,0), rgba(176, 106, 0,1));
    background-image: linear-gradient(to bottom, rgba(100,0,0,0), rgba(176, 106, 0,1));
    box-shadow: 0 0 0 1px #c90, inset 0 1px 1px rgba(255,255,255,.6), 0 2px 2px rgba(0,0,0,.4);
}

.map-pin3 {
    margin-top: 40px;
    background: transparent;
    border-radius: 14px 14px 14px 0;
    width: 8px;
    height: 8px;
    border: 6px solid #f33;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: -1px 1px 2px rgba(0,0,0,.2);
    box-shadow: -1px 1px 2px rgba(0,0,0,.2);
}