/*
 Plugin Name:  RP Alert Banner
*/

#rp-alert-banner-wrapper { position: relative; height: 100px; width: 100%; padding: 100px 0 0 0; }
.rp-alert-banner { display: block; position: relative; height: auto; min-height: 80px; padding: 30px 20px; width: 100%; line-height: 1.25; text-align: center; z-index:99; }
.rp-alert-banner-offset { margin-top: 80px; }

.rp-alert-banner-default { background-color: #fbfbfb; color: #333; }
.rp-alert-banner-default:hover { color: inherit; text-decoration: none; }
.rp-alert-banner-default .rp-alert-banner-header { color: #00a2c2; }

.rp-alert-banner-transparent { background-color: transparent; color: #333; }
.rp-alert-banner-transparent:hover { color: inherit; text-decoration: none; }
.rp-alert-banner-transparent .rp-alert-banner-header { color: #00a2c2; }

.rp-alert-banner-blue { background-color: #00a2c2; color: #fff; }
.rp-alert-banner-blue a { color: #fff; text-decoration: underline; }
/* .rp-alert-banner-blue:hover { background-color: #fff; color: #11A9CD; text-decoration: none; } */
/* .rp-alert-banner-blue:hover a { color: #11A9CD; } */
.rp-alert-banner-blue:hover { filter: brightness(80%); text-decoration: none; }



.rp-alert-banner-red { background-color: #dc3545; color: #fff; }
.rp-alert-banner-red:hover { background-color: #fff; color: #dc3545; text-decoration: none; }

.rp-alert-banner-black { background-color: #000000; color: #fff; }
.rp-alert-banner-black:hover { background-color: #333333; color: #ffffff; text-decoration: none; }

.rp-alert-banner-yellow { background-color: #ffc107; color: #000 }
.rp-alert-banner-yellow:hover { background-color: #b28b15; color: #000; text-decoration: none; }

.rp-alert-banner-green { background-color: #28a745; color: #fff; }
.rp-alert-banner-green:hover { background-color: #fff; color: #28a745; text-decoration: none; }

.rp-alert-banner-header { font-size: 40px; font-weight: bold; letter-spacing: 2px; }
.rp-alert-banner-subhead { font-size: 18px; letter-spacing: 2px; }
.rp-alert-banner-cta { display: inline-block; font-size: 14px; padding: 10px 0 0 0; }
.rp-alert-banner-cta::after { font-weight: 100; content: "\2911"; margin: 0 0 0 5px; color: #666; }
//.rp-alert-banner-cta::after { font-family: "Font Awesome 5 Free"; font-weight: 200; content: "\f061"; margin: 0 0 0 5px; color: #666; }
.rp-alert-banner-cta:hover::after { color: #11A9CD; }


@media all and (max-width: 639px) {
  #rp-alert-banner-wrapper { position: relative; height: 100px; width: 100%; padding: 60px 0 0 0; }  
  .rp-alert-banner { position: relative; font-size: 2.75vw; line-height: 1;  }
}