/*******************************************************************************************************************************************
 *******************************************************************************************************************************************

 ######  ##     ## ########  ######## ########  ######## ##       ##       #### ########   ######  ######## 
##    ## ##     ## ##     ## ##       ##     ## ##       ##       ##        ##  ##     ## ##    ## ##       
##       ##     ## ##     ## ##       ##     ## ##       ##       ##        ##  ##     ## ##       ##       
 ######  ##     ## ########  ######   ########  ######   ##       ##        ##  ########   ######  ######   
      ## ##     ## ##        ##       ##   ##   ##       ##       ##        ##  ##              ## ##       
##    ## ##     ## ##        ##       ##    ##  ##       ##       ##        ##  ##        ##    ## ##       
 ######   #######  ##        ######## ##     ## ######## ######## ######## #### ##         ######  ######## 

*******************************************************************************************************************************************
**************************** see http://www.dev.equideow.com/doc/bow for more details *****************************************************
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

.superellipse {
    display: inline-block;
    background: none;
    position: relative;
    height: 52px;
    width: 52px;
}
.superellipse__content{
    position: relative;
    z-index: 2;
    display: block;
    padding: 10px;
    transition: all .15s;
}
.superellipse__background{
    position: absolute;
    display: block;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    fill: rgba(0, 0, 0, .5);
    stroke: #fff;
    stroke-width: 4px;
}
.superellipse:hover .superellipse__background{
    fill: rgba(55, 101, 154, 0.9);
}
.superellipse:active .superellipse__content{
    transform: scale(.95);
}