div.stickyBox {
    text-decoration: none;
    font-size: 70%;
    color: #000;
    /*background:#ffc;*/
    display: block;
    max-width: 300px;
    /*height:10em;
  width:10em;*/
    margin: 20px;
    padding: 1em;
    /* Firefox */
    -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
    -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    -moz-transition: -moz-transform .15s linear;
    -o-transition: -o-transform .15s linear;
    -webkit-transition: -webkit-transform .15s linear;
    transition: -ms-transform .15s linear;
}


div.stickyBox h3 {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}

div.stickyBox1 {
    -o-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    position: relative;
    top: 5px;
}

div.stickyBox2 {
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    position: relative;
    top: -5px;
}


div.stickyBox3 {
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    position: relative;
    top: -10px;
}

div.stickyBox:hover, div.stickyBox:focus {
    font-size: 100%;
    -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    -ms-transform: scale(1.25);
    position: absolute;
    z-index: 5;
}

.pin {
    background-color: #aaa;
    display: block;
    height: 32px;
    width: 2px;
    position: absolute;
    left: 50%;
    top: -16px;
    z-index: 1;
}

.pin:after {
    background-color: #A31;
    background-image: radial-gradient(25% 25%, circle, hsla(0, 0%, 100%, .3), hsla(0, 0%, 0%, .3));
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .1), inset 3px 3px 3px hsla(0, 0%, 100%, .2), inset -3px -3px 3px hsla(0, 0%, 0%, .2), 23px 20px 3px hsla(0, 0%, 0%, .15);
    content: '';
    height: 12px;
    left: -5px;
    position: absolute;
    top: -10px;
    width: 12px;
}

.pin:before {
    background-color: hsla(0, 0%, 0%, 0.1);
    box-shadow: 0 0 .25em hsla(0, 0%, 0%, .1);
    content: '';
    height: 24px;
    width: 2px;
    left: 0;
    position: absolute;
    top: 8px;
    -moz-transform: rotate(57.5deg);
    -webkit-transform: rotate(57.5deg);
    -o-transform: rotate(57.5deg);
    -ms-transform: rotate(57.5deg);
    transform: rotate(57.5deg);
    -moz-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

div.stickyBox:hover > .pin {
    display: none;
}


@media (min-width: 768px ) {
    .row {
        position: relative;
    }

}