/* bevel size, left offset and color settings next 3 lines */ 
.bvc { left: -15px }
.bevel, .content { border-width: 15px }
.bevel, .content { /*border-color: inherit;*/ border-style:solid; }

.bvc {
    width: 90%; /* width of overall box, variable or fixed */ 
    margin: 0 auto;
    position: relative;
    margin-bottom: 15px;
}

.bvc:hover > .br, .bvc:hover > .tr {

    border-color: #006666;
    border-right-color: transparent;
    animation: colorChangeBrdrR 150ms;

}

.bvc:hover > .bl, .bvc:hover > .tl {

    border-color: #006666;
    border-left-color: transparent;
    animation: colorChangeBrdrL 150ms;

}


div.bvc:hover > div.content {

    background-color: #006666;
    border-left-color: #006666;
    border-right-color: #006666;
    animation: colorChangeBg 150ms;
}

@keyframes colorChangeBrdrR {
    from {
        border-color: #99CCCC;
        border-right-color: transparent;
    }
    to   {
        border-color: #006666;
        border-right-color: transparent;
    }
  }


  @keyframes colorChangeBrdrL {
    from {
        border-color: #99CCCC;
        border-left-color: transparent;
    }
    to   {
        border-color: #006666;
        border-left-color: transparent;
    }
  }

@keyframes colorChangeBg {
    from {
        background-color: #99CCCC;
        border-left-color: #99CCCC;
        border-right-color: #99CCCC;
    }
    to   {
        background-color: #006666;
        border-left-color: #006666;
        border-right-color: #006666;
    }
  }



.bvc .tr, .bvc .tl, .bvc .br, .bvc .bl { height: 0px; width: 100%; }
.bvc .tr, .bvc .tl { border-top: 0; }
.bvc .br, .bvc .bl { border-bottom: 0; }
.bvc .tr, .bvc .br { border-right-color: transparent; }
.bvc .tl, .bvc .bl { border-left-color: transparent; }
.no_bevel { height: 0px; width: 100%; border-bottom: 0; }

.content {
    /*background: inherit; /*url(http://placehold.it/2000x200/efefef) no-repeat;*/
    width: 100%;
    border-top: 0;
    border-bottom: 0;
}


.bvc h2 {
    margin-bottom: 10px; 
    color: white;        
}