/* General */
.paragraph {
  position: relative;
}

/* Data Overlay */
.paragraph[data-overlay]:before {
  position: absolute;
  content: '';
  background: #000000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

[data-overlay="1"]:before {
  opacity: 0.1;
}
[data-overlay="2"]:before {
  opacity: 0.2;
}
[data-overlay="3"]:before {
  opacity: 0.3;
}
[data-overlay="4"]:before {
  opacity: 0.4;
}
[data-overlay="5"]:before {
  opacity: 0.5;
}
[data-overlay="6"]:before {
  opacity: 0.6;
}
[data-overlay="7"]:before {
  opacity: 0.7;
}
[data-overlay="8"]:before {
  opacity: 0.8;
}
[data-overlay="9"]:before {
  opacity: 0.9;
}
[data-overlay="10"]:before {
  opacity: 1;
}
[data-overlay="0"]:before {
  opacity: 0;
}

/* Video Background */
#video-background {
  position: absolute;
  width: 100%;
  z-index: -1;
}

.paragraph--type--video-background,
.paragraph--type--video-background p {
  color: #fff;
}

.paragraph.paragraph--type--video-background > .paragraph__column {
    width: 100%;
    display: flex;
    height: 100%;
    align-items: center;
    float: unset;
}

.paragraph--type--video-background .field--name-field-content {
  padding-left: 15px !important;
  padding-right: 15px !important;
  z-index: 4;
}

.background-image-holder {
  position: absolute;
  height: 100%
  width: 100%;
  z-index: -2;
}

@media (max-width: 1023px) {
  #video-background {
    display:none;
  }
}

@media (min-width: 1024px) {
  .background-image-holder img {
    display: none;
  }
}

/* Masthead */
@media (max-width: 1023px) {
  .paragraph--type--masthead {
    display: none;
  }
}

@media (min-width: 1024px) {
  .paragraph--type--masthead {
    display: block;
  }  
}

.paragraph--type--masthead .bg-image {
  background-size: cover !important;
      display: flex;
    justify-content: center;
    align-items: center;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4
.text-white p,
.paragraph--type--masthead p {
  color: #fff;
}

/* Mobile Masthead */
@media (max-width: 1023px) {
  .paragraph--type--mobile-masthead {
    display: block;
  }
}

@media (min-width: 1024px) {
  .paragraph--type--mobile-masthead {
    display: none;
  }  
}

.paragraph--type--mobile-masthead .bg-image {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4
.text-white p {
  color: #fff;
}

/* Blank */
@media (max-width: 1023px) {
  .paragraph--type--bp-blank .paragraph__column {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}