.flip-form-wrapper-outer {
  margin: 20px 0 40px;
  width: calc(100% + 120px);
  margin-left: -60px;
}

@media only screen and (max-width: 900px) {
  .flip-form-wrapper-outer {
    width: calc(100vw - 60px);
    margin-left: calc((((100vw - 100%) / 2) * -1) + 30px);
  }
}

/* Change form to be 100% width of content area */
@media only screen and (max-width: 780px) {
  .flip-form-wrapper-outer {
    width: 100%;
    margin-left: 0;
  }
}

.flip-form-wrapper-outer .flip-form-form-wrapper,
.flip-form-wrapper-outer .flip-form-cover-outer,
.flip-form-wrapper-outer .flip-form-cover-inner {
  width: 100%;
}

.flip-form-wrapper-outer .flip-form-cover-inner {
  cursor: pointer;
}

.flip-form-wrapper-outer .flip-form-form-wrapper {
  background: #fff;
  position: relative;
}

.flip-form-wrapper-outer .flip-form-form-wrapper,
.flip-form-wrapper-outer .flip-form-cover-outer {
  box-shadow: rgba(23, 40, 94, 0.08) 0px 4px 24px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flip-form-wrapper-outer .flip-form-cover-outer {
  display: flex;
}

.flip-form-wrapper-outer,
.flip-form-wrapper-outer .flip-form-form-wrapper,
.flip-form-wrapper-outer .flip-form-cover-outer {
  min-height: 600px; /* This ensures we have enough space for our cover image setup */
}

@media only screen and (max-width: 760px) {
  .flip-form-wrapper-outer .flip-form-cover-outer {
    justify-content: flex-start;
  }
}

.flip-form-wrapper-outer .flip-form-cover-inner,
.flip-form-wrapper-outer .flip-form-cover-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flip-form-wrapper-outer .flip-form-cover-body,
.flip-form-wrapper-outer .flip-form-form-wrapper {
  padding: 60px;
}

@media only screen and (max-width: 550px) {
  .flip-form-wrapper-outer .flip-form-cover-body,
  .flip-form-wrapper-outer .flip-form-form-wrapper {
    padding: 60px 30px;
  }
}

.flip-form-wrapper-outer .flip-form-cover-body {
  align-items: flex-start;
  justify-content: center;
  padding-right: 0;
  overflow: hidden;
  position: relative;
  padding: 46px 60px 60px;
}

@media only screen and (max-width: 760px) {
  .flip-form-wrapper-outer .flip-form-cover-body {
    padding: 60px 60px 0;
    align-items: center;
    justify-content: flex-start;
  }
}

@media only screen and (max-width: 550px) {
  .flip-form-wrapper-outer .flip-form-cover-body {
    padding: 60px 30px 0;
  }
}

.flip-form-wrapper-outer .flip-form-form-wrapper form {
    max-width: 720px;
}

.flip-form-wrapper-outer .form-flip-submit-wrapper,
.flip-form-wrapper-outer .hs-richtext,
.flip-form-wrapper-outer .hs-richtext * {
  text-align: left;
}

.flip-form-wrapper-outer .flip-form-cover-body h2 {
  color: #fff;
  padding: 0 0 20px;
  text-align: left;
  width: 100%;
  max-width: 400px;
}

@media only screen and (max-width: 760px) {
  .flip-form-wrapper-outer .flip-form-cover-body h2 {
    text-align: center;
  }
}

.flip-form-wrapper-outer .flip-form-cover-body p {
    padding: 0 0 30px;
    margin-bottom: 0;
    text-align: left;
    font-weight: 200;
    font-size: 18px;
    color: #fff;
    width: 100%;
    max-width: 273px;
}

@media only screen and (max-width: 760px) {
  .flip-form-wrapper-outer .flip-form-cover-body p {
    text-align: center;
    max-width: 100%;
  }
}

.flip-form-wrapper-outer .flip-form-cover-body .gradient-button {
  margin: 0;
  min-height: 64px;
}

@media only screen and (max-width: 760px) {
  .flip-form-wrapper-outer .flip-form-cover-body .gradient-button {
    align-self: center;
    margin-bottom: 12px;
  }
}

.flip-form-cover-image {
  pointer-events: none;
}

/* All Images */

.flip-form-wrapper-outer .flip-form-cover-body .flip-form-cover-image::before,
.flip-form-wrapper-outer .flip-form-cover-body .flip-form-cover-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-position: center;
  background-size: 100%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

/* Printer Image */
.flip-form-wrapper-outer .flip-form-cover-body .printer-image {
  width: 772px;
  height: 824px;
  position: absolute;
  left: 275px;
  bottom: -364px;
}

@media only screen and (max-width: 760px) {
  .flip-form-wrapper-outer .flip-form-cover-body .printer-image {
    margin: auto 0 0;
    width: 700px;
    height: 420px;
    position: relative;
    top: 0;
    left: 0;
  }

  .flip-form-wrapper-outer .flip-form-cover-body .printer-image::before {
    background-position: center top;
  }
}

@media only screen and (max-width: 550px) {
  .flip-form-wrapper-outer .flip-form-cover-body .printer-image {
    width: 580px;
    height: 370px;
  }
}

@media only screen and (max-width: 480px) {
  .flip-form-wrapper-outer .flip-form-cover-body .printer-image {
    width: 520px;
    height: 340px;
  }
}

@media only screen and (max-width: 420px) {
  .flip-form-wrapper-outer .flip-form-cover-body .printer-image {
    width: 460px;
    height: 310px;
  }
}

@media only screen and (max-width: 375px) {
  .flip-form-wrapper-outer .flip-form-cover-body .printer-image {
    width: 440px;
    height: 290px;
  }
}
/* End Printer Image */

/* Newsletter Image */
.flip-form-wrapper-outer .flip-form-cover-body .newsletter-image {
  background-repeat: no-repeat;
  width: 540px;
  height: 658px;
  position: absolute;
  right: -8%;
  top: 50%;
  margin: -325px 0 0;
}

@media only screen and (max-width: 820px) {
  .flip-form-wrapper-outer .flip-form-cover-body .newsletter-image {
    right: -13%;
  }
}

@media only screen and (max-width: 760px) {
  .flip-form-wrapper-outer .flip-form-cover-body .newsletter-image {
    width: 600px;
    height: 731px;
    margin: -60px 0 0;
    position: relative;
    top: 0;
    left: 0;
    right: inherit;
  }

  .flip-form-wrapper-outer .flip-form-cover-body .newsletter-image::before {
    background-position: center top;
  }
}
/* End Newsletter Image */

/* Demo Image */
.flip-form-wrapper-outer[data-cover-image-name="demo-image"] .flip-form-cover-body h2 {
    max-width: 340px;
}

.flip-form-wrapper-outer .flip-form-cover-body .demo-image {
  background-image: url(https://s3.us-east-2.amazonaws.com/cdn.plumbs.com/uploads/2024/06/10140743/watch_a_demo_cover_laptop_blank_desktop.png);
  top: 50%;
  background-repeat: no-repeat;
  background-size: 490px;
  width: 490px;
  height: 624px;
  position: absolute;
  left: 350px;
  margin-top: -312px;
}

.flip-form-wrapper-outer .flip-form-cover-body .demo-image::before {
  background-image: url(https://s3.us-east-2.amazonaws.com/cdn.plumbs.com/uploads/2024/06/10140751/watch_a_demo_cover_laptop_screen_desktop.png);
}

.flip-form-wrapper-outer .flip-form-cover-body .demo-image::after {
  background-image: url(https://s3.us-east-2.amazonaws.com/cdn.plumbs.com/uploads/2024/06/10131048/watch_a_demo_cover_desktop_button_left.png);
}

@media only screen and (max-width: 760px) {
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image {
    margin: auto 0 0;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    background-image: url(https://s3.us-east-2.amazonaws.com/cdn.plumbs.com/uploads/2024/06/10140746/watch_a_demo_cover_laptop_blank_mobile.png);
    background-position: center center;
  }

  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::before {
    background-image: url(https://s3.us-east-2.amazonaws.com/cdn.plumbs.com/uploads/2024/06/10140756/watch_a_demo_cover_laptop_screen_mobile.png);
  }

  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::after {
    background-image: url(https://s3.us-east-2.amazonaws.com/cdn.plumbs.com/uploads/2024/06/10131056/watch_a_demo_cover_mobile_button_top.png);
  }

  .flip-form-wrapper-outer .flip-form-cover-body .demo-image,
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::before,
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::after {
    background-size: 80%;
  }
}

@media only screen and (max-width: 700px) {
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image,
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::before,
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::after {
    background-size: 90%;
  }
}

@media only screen and (max-width: 600px) {
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image,
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::before,
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::after {
    background-size: 105%;
    background-position: 50px center;
  }

  .flip-form-wrapper-outer .flip-form-cover-body .demo-image {
    width: calc(100% + 120px);
  }

  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::before,
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::after {
    width: 100%;
  }

  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::before,
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::after {
    background-position: 50px center;
  }

  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::after {
    background-image: url(https://s3.us-east-2.amazonaws.com/cdn.plumbs.com/uploads/2024/07/03114642/watch_a_demo_cover_desktop_button_left.png);
  }

}

@media only screen and (max-width: 430px) {
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image,
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::before,
  .flip-form-wrapper-outer .flip-form-cover-body .demo-image::after {
    background-size: 120%;
  }
}

/* End Demo Image */

.flip-form-wrapper-outer.show-visual .flip-form-form-wrapper .close {
  cursor: pointer;
  position: absolute;
  top: 23px; /* Positions it in the middle of the 60px padding */
  right: 23px; /* Positions it in the middle of the 60px padding */
  display: block;
  width: 15px;
  height: 15px;
  text-indent: -9999px;
  transition: all 250ms;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none"><path d="M13.3698 13.8278L1.70312 2.16113M13.3698 2.16113L1.70312 13.8278" stroke="%230590D5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.flip-form-wrapper-outer .flip-form-form-wrapper .close:hover {

  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none"><path d="M13.3698 13.8278L1.70312 2.16113M13.3698 2.16113L1.70312 13.8278" stroke="%230A2447" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

@media only screen and (max-width: 760px) {
  .flip-form-wrapper-outer .super-dark-gradient-grain-fallback {
    background: radial-gradient(234.57% 168.64% at 52.22% -66.25%, #214595 0%, #0A2447 60%, #212B3F 75%, #0D1115 100%);
    background-size: auto;
    background-repeat: repeat;
    background-position: center;

  }

  .flip-form-wrapper-outer .blend-yes .super-dark-gradient-grain {
    background: url(https://cdn.brief.vet/plumbs/marketing-site/images/grain/noise_seamless_125.png), radial-gradient(234.57% 168.64% at 52.22% -66.25%, #214595 0%, #0A2447 60%, #212B3F 75%, #0D1115 100%);
    background-size: 200px, auto;
    background-repeat: repeat;
    background-position: center;
    background-blend-mode: overlay;
  }
}

/* Cover flip effect */

.flip-form-wrapper-outer {
  perspective: 4000px;
}

.flip-form-wrapper-outer .flip-form-wrapper-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over .flip-form-wrapper-outer*/
/* .flip-form-wrapper-outer:focus .flip-form-wrapper-inner { */
.flip-form-wrapper-outer.show-visual .flip-form-wrapper-flip,
.flip-form-wrapper-outer:not(.show-visual) .flip-form-wrapper-inner {
  transform: rotateY(180deg);
}

.flip-form-wrapper-outer .flip-form-wrapper-flip.no-flip-animation {
  transition: none;
}

/* Position the front and back side */
.flip-form-wrapper-outer .flip-form-cover-outer,
.flip-form-wrapper-outer .flip-form-form-wrapper {
  position: absolute;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the back side */
.flip-form-wrapper-outer .flip-form-form-wrapper {
  transform: rotateY(180deg);
}

/* Change hard heights to auto heigh after form is successfully submitted */
.flip-form-wrapper-outer.flip-form-submitted,
.flip-form-wrapper-outer.flip-form-submitted .flip-form-form-wrapper {
  height: auto !important;
  min-height: auto;
  position: inherit;
}

/* Video in form responses */
.flip-form-wrapper-outer .flip-form-wrapper-inner > .jwplayer {
  display: none;
}

.flip-form-wrapper-outer .submitted-message > .jwplayer {
  margin-bottom: 25px;
}

/***** Adjustments to styles for when flip forms are used on a 2 column layout *****/

/* Zero out the padding */
.fake-column-2-container .flip-form-wrapper-outer .flip-form-form-wrapper {
  padding: 0;
}

/* Reset the width */
.fake-column-2-container .flip-form-wrapper-outer {
    width: 100%;
    margin: 0;
}

/* Reset the height */
.fake-column-2-container .flip-form-wrapper-outer,
.fake-column-2-container .flip-form-wrapper-outer .flip-form-form-wrapper,
.fake-column-2-container .flip-form-wrapper-outer .flip-form-cover-outer {
    min-height: auto;
}

/* Remove the shadow and border radius */
.fake-column-2-container .flip-form-wrapper-outer .flip-form-form-wrapper,
.fake-column-2-container .flip-form-wrapper-outer .flip-form-cover-outer {
  box-shadow: none;
  border-radius: 0;
}