.pushable {
/*    background: hsl(340deg 100% 32%);*/
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
}

.front {
    display: block;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 1.25rem;
    /*background: hsl(345deg 100% 47%);*/
    color: white;
    transform: translateY(-6px);
}

.pushable:active .front {
    transform: translateY(-2px);
}
.circular-btn {
    display: block;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    border: 1px solid red;
}
.round-button {
    width: 50px;
}

.round-button-circle {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 50%;
    cursor:pointer;
   /* overflow: hidden;*/
   /* background: #cb2b24;*/
   background-color: #ae0d3d;
    box-shadow: 0 0 9px #3c3a3a;
   
}

.recovery-leaf-color {
  /*  background: #3A5F0B;*/
  background-color: #006d7c;
}
.tab-leaf-color {
    background-color: #FF9200;
}

#risk-round-button:hover {
    /*  border-radius: 5px;
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;*/
    /*margin-left: 10px;*/
    margin-top: -45px;
    filter: brightness(1.3);
    width: 163px;
    height: 123px;
    filter: brightness(1.3);
    -moz-border-radius: 100px 0px;
    -webkit-border-radius: 100px 0px;
    border-radius: 100px 0px;
    border: 1px solid #e81152;
    transform: rotate( 30deg );
}
#recovery-round-button:hover {
    width: 163px;
    height: 123px;
    filter: brightness(1.3);
    -moz-border-radius: 100px 0px;
    -webkit-border-radius: 100px 0px;
    border-radius: 100px 0px;
    border: 1px solid #0091a5;
    transform: rotate( 66deg );
}
#tab-round-button:hover {
    margin-top: -73px;
    width: 163px;
    height: 123px;
    filter: brightness(1.3);
    -moz-border-radius: 100px 0px;
    -webkit-border-radius: 100px 0px;
    border-radius: 100px 0px;
    border: 1px solid #FF9200;
    
}
.display-on-hover {
    visibility: hidden;
}
.round-button-circle:hover .display-on-hover {
    visibility: visible;
    margin-top: -25px;
    transform: rotate( -30deg );
}
#recovery-round-button:hover .display-on-hover {
    visibility: visible;
    margin-top: -23px;
    transform: rotate( -30deg );
}
#tab-round-button:hover .display-on-hover {
    visibility: visible;
    margin-top: -23px;
    
}

.round-button-circle:hover .inner-icon{
    display:none;
}
.round-button-circle:hover .round-button a {
    display: block;
    float: left;
    width: 100%;
    padding-top: 50%;
    padding-bottom: 50%;
     line-height: 1em; 
    margin-top: 3.5em;
    text-align: center;
    color: #e2eaf3;
    width: 100px;
    height: 100px;
    background-color: #A0DE21;
    -moz-border-radius: 100px 0px;
    -webkit-border-radius: 100px 0px;
    border-radius: 100px 0px;
}



    
    /*.display-on-hover :hover {
    visibility: visible;
    -webkit-transform: rotate( -90deg );
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate( -90deg );
    content: "test";
}*/
    .inner-icon {
    /*  font-size: 1.4em;*/
}
.round-button a {
    display: block;
    float: left;
    width: 100%;
    padding-top: 50%;
    padding-bottom: 50%;
    line-height: 1em;
    margin-top: -0.5em;
    text-align: center;
    color: #e2eaf3;

    font-size: 1.2em;
    
    text-decoration: none;
}