/* RIBBON Code */
.ribbon {
 font-size: 16px !important;
 /* 
 This ribbon is based on a 16px font side and a 24px 
 vertical rhythm. I've used em's to position each element 
 for scalability. If you want to use a different font 
 size you may have to play with the position of the 
 ribbon elements 
 */
 /*z-index: 1;*/
 width: 100%;
    
 position: relative;
 /* background: #83D4F7; red #D75050  EA9090 040202 FA9F9F EB9797 F78383  this currently is a flat blue        */
 color: #040202; /* #fff - white                */
 text-align: center;
 padding: 1em 2em; /* Adjust to suit  #ba89b6; (ln 9) #986794; (ln 20) */
 margin: 1em auto 1em; 
 /* 
 Based on 24px vertical rhythm. 48px bottom margin - normally
 24 but the ribbon 'graphics' take up 24px themselves so we double it. 
 */
}


.capital {
 background: url(../images/ribbon/capitalLandscape.jpg);
 background-size: 1120px 49px;
}

 /* These are the ends of the ribbons */
/*.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid white; 
 z-index: -1;
}*/

.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
 background: #95A6AD;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
background: #95A6AD;
}
/* Also associated with purple section */
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #ffffff transparent transparent transparent;  /* The value was #804f7c */
 bottom: -1em;

}

/*Purple sections*/
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;

}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
 
}