.callout-card
{
    background: white;
    border: 1px solid #333;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    margin: 1rem 0;
    overflow: hidden;
}

.callout-card .card-label {
    border-color: transparent #333 transparent transparent;
    border-color: rgba(255, 255, 255, 0) #333333 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); }

.callout-card.primary
{
    border-color: #CE2121;
}

.callout-card.primary .card-label {
      border-color: transparent #CE2121 transparent transparent;
      border-color: rgba(255, 255, 255, 0) #CE2121 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); }

.callout-card.secondary
{
    border-color: #FBCB09;
}

.callout-card.secondary .card-label {
      border-color: transparent #FBCB09 transparent transparent;
      border-color: rgba(255, 255, 255, 0) #FBCB09 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); }

.callout-card.tertiary
{
    border-color: #0BCC59;
}

.callout-card.tertiary .card-label {
      border-color: transparent #0BCC59 transparent transparent;
      border-color: rgba(255, 255, 255, 0) #0BCC59 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); }

.callout-card.info
{
    border-color: #89c4f4;
}

.callout-card.info .card-label {
      border-color: transparent #89c4f4 transparent transparent;
      border-color: rgba(255, 255, 255, 0) #89c4f4 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); }

.callout-card.alert
{
    border-color: #f22613;
}

.callout-card.alert .card-label {
      border-color: transparent #f22613 transparent transparent;
      border-color: rgba(255, 255, 255, 0) #f22613 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); }

.callout-card.success
{
    border-color: #87d37c;
}

.callout-card.success .card-label {
      border-color: transparent #87d37c transparent transparent;
      border-color: rgba(255, 255, 255, 0) #87d37c rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); }

.callout-card.warning
{
    border-color: #f89406;
}

.callout-card.warning .card-label {
      border-color: transparent #f89406 transparent transparent;
      border-color: rgba(255, 255, 255, 0) #f89406 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); }

.callout-card .card-label
{
    border-style: solid;
    border-width: 0 70px 40px 0;
    float: right;
    height: 0px;
    width: 0px;
    transform: rotate(360deg);
}

.callout-card .callout-card-content
{
    padding: 0.5rem 1.5rem 0.875rem;
}

.callout-card.radius
{
    border-radius: 0.6rem;
}

.callout-card .label-text
{
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    position: relative;
    right: -40px;
    top: 2px;
    white-space: nowrap;
    transform: rotate(30deg);
}

.tab-bar
{
    background-color: #CE2121;
}

.off-canvas-list
{
    color: #555555;
    background-color: #efefef;
}

.left-off-canvas-menu
{
    background-color: #efefef;
}

ul.off-canvas-list li a
{
    border-bottom: 1px solid #BA1E1E;
    color: #fefefe;
    display: block;
    padding: 0.66667rem;
    transition: background 300ms ease;
    background-color: rgb(206,33,33);
    border-top: 1px solid #ececec;
}

ul.off-canvas-list li a:hover
{
    background: #a2a2a2;
}

ul.off-canvas-list li a:active
{
    background: #848484;
}

.footer-bar
{
    color: #fefefe;
    background-color: #ce2121;
    font-size: 0.8em;
    font-weight: lighter;
    position: relative;
}

.footer-bar h5
{
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #f2f2f2;
    font-weight: bold;
}

.footer-bar row
{
}

.footer-bar p, .footer-bar ul li
{
    color: #cccccc;
    font-size: 0.8rem;
}

.footer-bar ul li a
{
    text-decoration: none;
    color: white;
}

.footer-bar ul li.social
{
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #2f2f2f;
    border-radius: 5px;
    color: #ffffff;
    background-color: #999;
    padding-left: 1em;
    padding-top: 0.25em;;
    padding-bottom: 0.25em;
    margin-bottom: 5px;
}