/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
.block-editor-block-list__block .block-editor-url-input input[type=text],
.block-editor-url-input input[type=text],
.components-popover .block-editor-url-input input[type=text] {
  width: 100% !important;
  max-width: 300px; }

.dashicons-va-block {
  background-image: url("images/va-logo.png");
  background-size: cover; }

.va-banner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  min-height: 400px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%; }

.entry-content .va-banner {
  max-width: 100vw;
  width: auto;
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2); }

.va-banner-content {
  width: 40%;
  background-color: #000;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex-pack: end;
      justify-content: flex-end;
  color: #fff;
  z-index: 1; }

.va-banner-content h1 {
  margin-bottom: 35px;
  white-space: pre-line; }

.va-banner-content > div {
  width: 100%;
  padding: 75px 40px;
  max-width: 550px; }

.va-banner-content:after {
  position: absolute;
  height: 100%;
  width: 150px;
  content: '';
  top: 0;
  left: 100%;
  background-size: 100% 100%;
  background-image: url("images/bg-addition-black.png"); }

.va-banner-image {
  width: 60%;
  background-size: cover;
  position: relative; }

.va-banner-overlay .va-banner-image:after {
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  width: 200px;
  background-size: 100% 100%;
  content: '';
  background-image: url("images/bg-addition2-black.png"); }

/*
.va-banner-red
.va-banner-green
.va-banner-pink
.va-banner-yellow
.va-banner-darkgreen
.va-banner-maroon*/
/*Setting Background Colours*/
.va-banner-red .va-banner-content {
  background-color: #F05655;
  color: #0A0203; }

.va-banner-green .va-banner-content {
  background-color: #00A651; }

.va-banner-pink .va-banner-content {
  background-color: #F6B0CF;
  color: #0A0203; }

.va-banner-yellow .va-banner-content {
  background-color: #FFEF00;
  color: #0A0203; }

.va-banner-darkgreen .va-banner-content {
  background-color: #006B3B; }

.va-banner-maroon .va-banner-content {
  background-color: #7D174C; }

/*Setting Content Overlay*/
.va-banner-red .va-banner-content:after {
  background-image: url("images/bg-addition-red.png"); }

.va-banner-green .va-banner-content:after {
  background-image: url("images/bg-addition-green.png"); }

.va-banner-pink .va-banner-content:after {
  background-image: url("images/bg-addition-pink.png"); }

.va-banner-yellow .va-banner-content:after {
  background-image: url("images/bg-addition-yellow.png"); }

.va-banner-darkgreen .va-banner-content:after {
  background-image: url("images/bg-addition-darkgreen.png"); }

.va-banner-maroon .va-banner-content:after {
  background-image: url("images/bg-addition-maroon.png"); }

/*Setting Image Overlay*/
.va-banner-red.va-banner-overlay .va-banner-image:after {
  background-image: url("images/bg-addition2-red.png"); }

.va-banner-green.va-banner-overlay .va-banner-image:after {
  background-image: url("images/bg-addition2-green.png"); }

.va-banner-pink.va-banner-overlay .va-banner-image:after {
  background-image: url("images/bg-addition2-pink.png"); }

.va-banner-yellow.va-banner-overlay .va-banner-image:after {
  background-image: url("images/bg-addition2-yellow.png"); }

.va-banner-darkgreen.va-banner-overlay .va-banner-image:after {
  background-image: url("images/bg-addition2-darkgreen.png"); }

.va-banner-maroon.va-banner-overlay .va-banner-image:after {
  background-image: url("images/bg-addition2-maroon.png"); }

/*Setting Content Text Color*/
.va-banner.va-banner-text-black .va-banner-content {
  color: #0A0203; }

.va-banner.va-banner-text-red .va-banner-content {
  color: #F05655; }

.va-banner.va-banner-text-white .va-banner-content {
  color: #fff; }

.va-banner.va-banner-text-green .va-banner-content {
  color: #00A651; }

.va-banner.va-banner-text-pink .va-banner-content {
  color: #F6B0CF; }

.va-banner.va-banner-text-yellow .va-banner-content {
  color: #FFEF00; }

.va-banner.va-banner-text-darkgreen .va-banner-content {
  color: #006B3B; }

.va-banner.va-banner-text-maroon .va-banner-content {
  color: #7D174C; }

@media all and (max-width: 768px) {
  .va-banner-overlay .va-banner-image:after {
    display: none; }
  .va-banner-content {
    width: 100%; }
  .va-banner-content > div {
    padding: 50px 30px 25px;
    min-height: 200px; }
  .va-banner-content:after {
    position: absolute;
    height: 250px;
    width: 100%;
    content: '';
    top: 100%;
    left: 0;
    background-size: 100% 100%;
    background-image: url("images/bg-mobile-black.png"); }
  .va-banner-image {
    width: 100%;
    height: 350px;
    background-position: center; }
  .va-banner-content {
    -ms-flex-pack: start;
        justify-content: flex-start; }
  /*Setting Content Overlay*/
  .va-banner-red .va-banner-content:after {
    background-image: url("images/bg-mobile-red.png"); }
  .va-banner-green .va-banner-content:after {
    background-image: url("images/bg-mobile-green.png"); }
  .va-banner-pink .va-banner-content:after {
    background-image: url("images/bg-mobile-pink.png"); }
  .va-banner-yellow .va-banner-content:after {
    background-image: url("images/bg-mobile-yellow.png"); }
  .va-banner-darkgreen .va-banner-content:after {
    background-image: url("images/bg-mobile-darkgreen.png"); }
  .va-banner-maroon .va-banner-content:after {
    background-image: url("images/bg-mobile-maroon.png"); } }