/*-------------------------public---------------------------*/
.feature-note {
    display: inline-block;
    height: 115px;
    position: absolute;
    color: #58B848;
    transition: all 300ms linear 0s;
    z-index: 10;
}
.feature-note .indicator {
    margin-top: 67px;
    width: 192px;
    transition: all 300ms linear 0s;
}
.feature-note .indicator .plus-icon {
    height: 49px;
    width: 49px;
    border-radius: 100%;
    padding: 8px;
    position: relative;
    transition: all 300ms linear 0s;
    transition-duration: 150ms;
}
.feature-note .indicator .plus-icon:after {
    content: '';
    height: 2px;
    display: block;
    background: #58B848;
    margin-top: -17px;
    transition: all 300ms linear 0s;
    transition-duration: 150ms;
    width: 0;
}
.feature-note .indicator .plus-icon:before {
    content: '';
    width: 49px;
    height: 49px;
    position: absolute;
    top: 0;
    left: 0;
    border: 4px solid #58B848;
    border-radius: 100%;
    -webkit-animation: doublePulse 1.5s ease infinite;
    animation: doublePulse 1.5s ease infinite;
    z-index: 0;
}
@keyframes doublePulse {
0% {
    -webkit-transform: scale(.6);
    transform: scale(.6);
    opacity: 1;
}
100% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}
}
.feature-note .indicator .plus-icon .plus {
    background: #58B848;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    width: 100%;
    line-height: 31px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: all 300ms linear 0s;
}
.feature-note .feature-name {
    text-transform: uppercase;
    width: 200px;
    height: 91px;
    font-weight: bold;
    line-height: 20px;
    position: relative;
    letter-spacing: .2px;
}
.feature-note .feature-name:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    position: absolute;
    top: 43px;
    left: calc(50% - 4px);
    transition: all 300ms linear 0s;
}
.feature-note .feature-name:after {
    content: '';
    display: block;
    width: 2px;
    height: 40px;
    position: absolute;
    top:50px;
    left: calc(50% - 1px);
    transition: all 300ms linear 0s;
}
.feature-note.right.top {
    top: 1%;
    right: 2%;
}
.feature-note.left.top {
    top: 1%;
    left: 25%;
}
.feature-note.left.bottom{
    bottom: 10%;
    left: 25%;
}
.feature-note.right.bottom{
    bottom: 10%;
    right: 1%;
}
/*--------------------------------------------------------*/

/*------------------------initial--------------------------*/

.feature-note .feature-name:after {
    background: #58B848;
}
.feature-note .feature-name:before {
    background: #58B848;
}
.feature-note.show-cont .indicator .plus-icon:after {
    width: 100px;
}
@media (max-width: 576px) {
    .feature-note.show-cont .indicator .plus-icon:after {
        width: 100px;
    }
}
.feature-note.show-cont .feature-name {
    width: 200px;
    font-size: 13px;
    text-align: center;
    transition: -webkit-transform 150ms ease 150ms;
    transition: transform 150ms ease 150ms;
    transition: transform 150ms ease 150ms,-webkit-transform 150ms ease 150ms;
}
/*---------------------------------------------------------*/


/*---------------feature-note.right.top----------------------*/
.feature-note.right.top .feature-name {
    top: -101%;
    float: left;
    margin-left: 118px;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}
.feature-note.show-cont.right.top .feature-name {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

/*-------------------------------------------------------------*/

/*---------------feature-note.left.top----------------------*/
.feature-note.left.top .feature-name {
    top: -101%;
    float: left;
    margin-left: -164px;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}
.feature-note.left.top .indicator .plus-icon:after {
   float: right;
}
.feature-note.show-cont.left.top .feature-name {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}
/*-------------------------------------------------------------*/


/*---------------feature-note.right.bottom----------------------*/
.feature-note.right.bottom .feature-name {
    top: -101%;
    float: left;
    margin-left: 105px;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}
.feature-note.show-cont.right.bottom .feature-name {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

/*-------------------------------------------------------------*/

/*---------------feature-note.left.bottom----------------------*/
.feature-note.left.bottom .feature-name {
    top: -101%;
    float: left;
    margin-left: -165px;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}
.feature-note.left.bottom .indicator .plus-icon:after {
    float: right;
}
.feature-note.show-cont.left.bottom .feature-name {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}
/*-------------------------------------------------------------*/