/********************************** Ribbons **************************************/


/* Ribbon Button #1 */
.ribbon-content div h2{
    line-height:1.5em;
    padding-bottom:0px;
    color:#ffffff;
    background-color:#000000;
}
a.ribbon-content{
    font-size:20px;
    letter-spacing:-0.3px;
    display:block;
    pointer-events:none!important;
    cursor:default!important;
    border:0px!important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.2)!important;
    /*max-width:500px;*/
    margin-left:auto;
    margin-right:auto;
    background-color:#000000;
    color:#ffffff!important;
    font-weight:600!important;
    text-align:center;
}
a.ribbon-content:hover {
    padding:5.4px 18px!important;
    opacity:1!important;
    background-color:#ef5223!important;
}
div.ribbon {
 font-size: 16px !important;
 /* This ribbon2 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 ribbon2 elements */
 /*width: 35%;*/
 position: relative;
 /*background: #ef5223;*/
 letter-spacing:4px!important;
 text-transform:uppercase;
 color: #000000!important;
 text-align: center;
 padding: 0em; /* Adjust to suit */
 margin: 0.5em auto 0.5em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon2 'graphics' take up 24px themselves so we double it. */
}
div.ribbon:hover {
     padding: 0em!important; /* Adjust to suit */
     /*background-color:#ef5223!important;*/
}
div.ribbon:before, div.ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #000000;
 z-index: -1!important;
 opacity:1;
}
div.ribbon-content div h2:before, div.ribbon-content div h2:after{
    opacity:1;
    font-size:16px!important;
    margin-left:0px;
}
.ribbon-content div h2{
    padding-left:5px;
    padding-right:5px;
}
div.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent!important;
}
div.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent!important;
}
div.ribbon div.ribbon-content div h2:before, div.ribbon div.ribbon-content div h2:after {
 content: ""!important;
 position: absolute!important;
 display: block!important;
 border-style: solid!important;
 border-color: #242424 transparent transparent transparent!important;
 bottom: -1em!important;
}
div.ribbon div.ribbon-content div h2:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
div.ribbon div.ribbon-content div h2:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

/* Ribbon Button #2 */
a.ribbon2-content{
    font-size:20px;
    letter-spacing:-0.3px;
    display:block;
    pointer-events:none!important;
    cursor:default!important;
    border:0px!important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.2)!important;
    /*max-width:500px;*/
    margin-left:auto;
    margin-right:auto;
    color:#ffffff!important;
    font-weight:600!important;
    text-align:center;
}
a.ribbon2-content:hover {
    padding:5.4px 18px!important;
    opacity:1!important;
    background-color:#ef5223!important;
}
div.ribbon2 {
 font-size: 16px !important;
 /* This ribbon2 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 ribbon2 elements */
 /*width: 35%;*/
 position: relative;
 /*background: #ef5223;*/
 letter-spacing:4px!important;
 text-transform:uppercase;
 color: #ffffff!important;
 text-align: center;
 padding: 0em; /* Adjust to suit */
 margin: 0.5em auto 0.5em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon2 'graphics' take up 24px themselves so we double it. */
}
div.ribbon2:hover {
     padding: 0em!important; /* Adjust to suit */
     /*background-color:#ef5223!important;*/
}
div.ribbon2:before, div.ribbon2:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #D8351B;
 z-index: -1!important;
 opacity:1;
}
a.ribbon2-content:before, a.ribbon2-content:after{
    opacity:1;
    font-size:16px!important;
    margin-left:0px;
}
div.ribbon2:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent!important;
}
div.ribbon2:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent!important;
}
div.ribbon2 a.ribbon2-content:before, div.ribbon2 a.ribbon2-content:after {
 content: ""!important;
 position: absolute!important;
 display: block!important;
 border-style: solid!important;
 border-color: #242424 transparent transparent transparent!important;
 bottom: -1em!important;
}
div.ribbon2 a.ribbon2-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
div.ribbon2 a.ribbon2-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

/* Ribbon Button #3 */

a.ribbon3-content{
    display:block;
    border:0px!important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.2)!important;
    /*max-width:500px;*/
    margin-left:auto;
    margin-right:auto;
    background-color:black;
    color:#ffffff!important;
    text-align:center;
}
a.ribbon3-content:hover {
    padding:5.4px 18px!important;
    opacity:0.7;
}
div.ribbon3 {
 font-size: 16px !important;
 /* This ribbon3 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 ribbon3 elements */
 width: 35%;
 position: relative;
 color:#ffffff!important;
 background: #000000;
 letter-spacing:4px!important;
 padding: 0em; /* Adjust to suit */
 margin: 0.2em auto 1em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon3 'graphics' take up 24px themselves so we double it. */
}
div.ribbon3:hover {
     padding: 0em!important; /* Adjust to suit */
}
div.ribbon3:before, div.ribbon3:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #262626;
 z-index: -1!important;
 opacity:1;
}
a.ribbon3-content:before, a.ribbon3-content:after{
    opacity:1;
    font-size:16px!important;
    margin-left:0px;
}
div.ribbon3:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
div.ribbon3:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
div.ribbon3 a.ribbon3-content:before, div.ribbon3 a.ribbon3-content:after {
 content: ""!important;
 position: absolute!important;
 display: block!important;
 border-style: solid!important;
 border-color: #4B4B4B transparent transparent transparent!important;
 bottom: -1em!important;
 /* #C0301C */
}
div.ribbon3 a.ribbon3-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
div.ribbon3 a.ribbon3-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}
.non-semantic-protector { position: relative; z-index: 1; }

/* Ribbon Button #1 Styles */

/*.ribbon{
    padding-left:2em!important;
    padding-right:2em!important;
    border-right: 0px!important;
    border-left: 0px!important;
    border-radius: 0px;
    box-shadow: none;
    border:0px!important;
    color:white!important;
    font-weight:600;
    text-transform:uppercase;
    height:42px!important;
    background-color:#ef5223!important;
    -webkit-filter: drop-shadow( 0 6px 0px -2px #ebeced);
	-webkit-filter: drop-shadow(0 6px 2px rgba(217,217,217,1));
}

.ribbon:before, .ribbon:after {
    content: ""!important;
    position: absolute!important;
    display: block!important;
    bottom: 0em!important;
    border: 1.5em solid #ef5223!important;
    z-index: -1!important;
    opacity:1!important;
    font-size:14px!important;
}
.ribbon:before {
 left: -1em!important;
 margin-left:-1em!important;
 border-right-width: 1.5em!important;
 border-left-color: transparent!important;
 border-left-width:10px!important;
}
.ribbon:after {
 right: -1em!important;
 margin-right:-1em!important;
 border-left-width: 1.5em!important;
 border-right-color: transparent!important;
 border-right-width:10px!important;
}*/


@media (max-width:980px) {
    div.ribbon1, div.ribbon2, div.ribbon3{
        width:80%;
    }
    div.ribbon1 a, div.ribbon2 a, div.ribbon3 a{
        font-size:16px;
        letter-spacing:2px!important;
    }
}