.block-side-by-side {
  padding-top: 100px;
  padding-bottom: var(--spacing-3);
  position: relative;
  background: #F7F7F7;
}
@media screen and (max-width: 767px) {
  .block-side-by-side {
    padding-left: 0;
    padding-right: 0;
  }
}
.block-side-by-side .container {
  position: relative;
  z-index: 2;
}
.block-side-by-side .row-headline.alt {
  font-size: 34px;
  margin-bottom: 30px;
  padding-top: var(--spacing-3);
  position: relative;
  z-index: 3;
}
.block-side-by-side .image {
  margin-bottom: var(--spacing-3);
  position: relative;
  z-index: 1;
}
.block-side-by-side .image img {
  box-shadow: 0px 14px 15px 12px rgba(90, 100, 100, 0.1);
  height: auto;
  position: relative;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .block-side-by-side .image.is-tablet-frame::after {
    background: url("../../images/block-side-by-side-tablet-frame.png") no-repeat center center;
    background-size: contain;
    border-radius: 5.5%;
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
    content: "";
    display: block;
    padding-top: 82%;
    position: absolute;
    left: -1rem;
    right: -1rem;
    top: -1.1rem;
    z-index: 10;
  }
}
.block-side-by-side .title {
  color: #d2d2d2;
  display: block;
  font-size: 0.875rem;
  margin-bottom: 1.5em;
  text-align: center;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
  .block-side-by-side .scroll-notice {
    display: none;
  }
}
.block-side-by-side .left,
.block-side-by-side .right {
  display: block;
}
@media screen and (max-width: 767px) {
  .block-side-by-side .left .image,
  .block-side-by-side .right .image {
    border-bottom: 1px solid rgba(210, 210, 210, 0.5);
    height: 100%;
    margin: 1rem auto 2rem auto;
    max-height: 100vw;
    max-width: 37.5rem;
    overflow: scroll;
  }
  .block-side-by-side .left .image:after,
  .block-side-by-side .right .image:after {
    background: rgba(255, 255, 255, 0.3);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}
.block-side-by-side .left:hover .scroll-notice, .block-side-by-side .left:focus .scroll-notice,
.block-side-by-side .right:hover .scroll-notice,
.block-side-by-side .right:focus .scroll-notice {
  opacity: 0;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .block-side-by-side .left {
    padding-right: var(--spacing-3);
  }
}
@media screen and (min-width: 768px) {
  .block-side-by-side .right {
    padding-left: var(--spacing-3);
    margin-top: 5rem;
  }
}
.block-side-by-side .stripe-bkgnd {
  top: 0;
}
.block-side-by-side .stripe-bkgnd-top {
  height: 575px;
  margin-bottom: 100px;
  max-height: 575px;
  min-height: 18.75rem;
  position: relative;
  overflow: visible;
}
@media screen and (max-width: 767px) {
  .block-side-by-side .stripe-bkgnd-top {
    margin-left: -30px;
    margin-right: -30px;
  }
}
.block-side-by-side .stripe-bkgnd-top .top-image {
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  height: 100%;
  margin: 0 auto;
  max-width: 1170px;
  position: relative;
  width: 100%;
  z-index: 15;
}
@media screen and (max-width: 767px) {
  .block-side-by-side .stripe-bkgnd-top .top-image {
    background-size: cover;
    margin-top: 3.75rem;
  }
}
.block-side-by-side .stripe-bkgnd-top .stripe-bkgnd {
  background: linear-gradient(to right, #09f 0%, #0077c7 100%);
  height: 100%;
  max-height: 37.5rem;
  min-height: 18.75rem;
  position: relative;
  top: 0;
  width: 100%;
}
.block-side-by-side .stripe-bkgnd-top .stripe-bkgnd::before, .block-side-by-side .stripe-bkgnd-top .stripe-bkgnd::after {
  background-color: transparent;
  border-color: transparent transparent #fff transparent;
  border-style: solid;
  border-width: 0 0 150px 100vw;
  bottom: 0;
  content: "";
  display: block;
  height: 0;
  left: 0;
  position: absolute;
  transform: skewY(0deg);
  width: 0;
  z-index: 10;
}
.block-side-by-side .stripe-bkgnd-top .stripe-bkgnd::before {
  border-color: #fff transparent transparent transparent;
  border-width: 150px 100vw 0 0;
  bottom: auto;
  top: 0;
}
@media screen and (max-width: 767px) {
  .block-side-by-side .stripe-bkgnd-top .stripe-bkgnd::before {
    top: -10.625rem;
  }
}
.block-side-by-side .stripe-bkgnd-top .stripe-bkgnd::after {
  z-index: 25;
}
@media screen and (max-width: 767px) {
  .block-side-by-side .stripe-bkgnd-top .stripe-bkgnd::after {
    bottom: -10.625rem;
  }
}
.block-side-by-side .nostripe-bkgnd-top {
  height: 40vw;
  margin-bottom: 100px;
  max-height: 37.5rem;
  min-height: 18.75rem;
  overflow: visible;
  position: relative;
}
.block-side-by-side .nostripe-bkgnd-top .top-image {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 100%;
  margin: 0 auto;
  max-width: 1170px;
  position: relative;
  width: 100%;
  z-index: 2;
}
.block-side-by-side .nostripe-bkgnd-top .nostripe-bkgnd {
  height: 40vw;
  max-height: 37.5rem;
  min-height: 18.75rem;
  top: 0;
}
.block-side-by-side .stripe-bkgnd_full_pc {
  top: -0.75rem;
}

.acf-block-preview .block-side-by-side .scroll-notice {
  display: none;
}
.acf-block-preview .block-side-by-side .row {
  display: flex;
}
.acf-block-preview .block-side-by-side .left,
.acf-block-preview .block-side-by-side .right {
  width: 48%;
}
.acf-block-preview .block-side-by-side .left {
  margin-right: auto;
}
.acf-block-preview .block-side-by-side .right {
  margin-left: auto;
}

.postid-2107 .block-side-by-side:nth-of-type(1),
.postid-1802 .block-side-by-side:nth-of-type(1),
.postid-1378 .block-side-by-side:nth-of-type(1) {
  display: none;
}

.postid-2057 > div > main > .project-branding > .block-side-by-side:nth-of-type(1),
.postid-3018 > div > main > .project-branding > .block-side-by-side,
.postid-1407 > div > main > .project-branding > .block-side-by-side,
.postid-2187 > div > main > .project-branding > .block-side-by-side,
.postid-1330 > div > main > .project-branding > .block-side-by-side,
.postid-1573 > div > main > .project-branding > .block-side-by-side,
.postid-1279 > div > main > .project-branding > .block-side-by-side,
.postid-2581 > div > main > .project-branding > .block-side-by-side,
.postid-3012 > div > main > .project-branding > .block-side-by-side,
.postid-6056 > div > main > .project-branding > .block-side-by-side,
.postid-6081 > div > main > .project-branding > .block-side-by-side,
.postid-6136 > div > main > .project-branding > .block-side-by-side,
.postid-6172 > div > main > .project-branding > .block-side-by-side,
.postid-6331 > div > main > section:nth-of-type(4) > .block-side-by-side,
.postid-6331 > div > main > section:nth-of-type(5) > .block-side-by-side,
.postid-6331 > div > main > .project-branding:nth-of-type(2) > .block-side-by-side,
.postid-6247 > div > main > .project-branding > .block-side-by-side,
.postid-1722 > div > main > section:nth-of-type(4) > .block-side-by-side,
.postid-1218 > div > main > .project-branding > .block-side-by-side:nth-of-type(1),
.postid-1218 > div > main > .project-branding > .block-side-by-side:nth-of-type(2),
.postid-1931 > div > main > .project-branding > .block-side-by-side {
  display: none;
}

.postid-2550 .block-side-by-side:nth-of-type(1),
.postid-2550 .block-side-by-side:nth-of-type(2) {
  display: none;
}

.postid-1802 .block-side-by-side > .container {
  padding-top: 50px;
}

.postid-2057 > div > main > .project-branding > .block-side-by-side:nth-of-type(3) {
  padding-top: 0;
}/*# sourceMappingURL=block-side-by-side.css.map */