.boostbox-popup-overlay {
    visibility: hidden;
    opacity: 0;
}

.boostbox-popup-overlay.active {
    visibility: visible;
    opacity: 1;
}

/** @todo This overlay needs to be customizable by the website admin */
.boostbox-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 9999;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

.boostbox-popup-content {
    box-sizing: border-box;
    grid-column: 2;
    position: absolute;
    transform: translate(-50%, -50%);
}

.boostbox-popup-content .wp-block-columns {
    margin: 0;
}

.boostbox-popup-content.center-left {
    position: absolute;
    transform: translate(0%,0%);
}

.boostbox-popup-content.center-center {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.boostbox-popup-content.center-right {
    position: absolute;
    transform: translate(0, 0);
    right: 0%;
}

.boostbox-popup-content.top-left {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0%,0%);
}

.boostbox-popup-content.top-center {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%,0%);
}

.boostbox-popup-content.top-right {
    position: absolute;
    transform: none;
    right: 0;
    top: 0;
}

.boostbox-popup-content.bottom-left {
    position: absolute;
    left: 0%;
    bottom: 0%;
    transform: none;
}

.boostbox-popup-content.bottom-center {
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0%);
}

.boostbox-popup-content.bottom-right {
    position: absolute;
    right: 0%;
    bottom: 0%;
    transform: none;
}

/** Animation - Slide down */

.boostbox-popup-content.slide-down {
    top: -50%;
    bottom: inherit;
    transition: all .5s ease-in-out;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-down {
    bottom: initial;
    top: 50%;
    left: 50%;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-down.center-left {
    transform: translate(0,-50%);
    left: 0;
    top: 50%;
    bottom: initial;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-down.center-right {
    transform: translate(0, -50%);
    left: initial;
    right: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-down.top-left {
    transform: translate(0, 0);
    top: 0;
    left: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-down.top-center {
    transform: translate(-50%, 0);
    top: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-down.top-right {
    transform: translate(0, 0);
    top: 0;
    left: initial;
    right: 0;
}

.boostbox-popup-overlay .boostbox-popup-content.slide-down.bottom-left,
.boostbox-popup-overlay .boostbox-popup-content.slide-down.bottom-center,
.boostbox-popup-overlay .boostbox-popup-content.slide-down.bottom-right {
    bottom: 100%;
    top: -100%;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-down.bottom-left {
    bottom: 0;
    top: initial;
    left: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-down.bottom-center {
    bottom: 0;
    top: initial;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-down.bottom-right {
    bottom: 0;
    top: initial;
    left: initial;
    right: 0;
}

/** Animation - Slide up */

.boostbox-popup-content.slide-up {
    bottom: -100%;
    top: 100%;
    transition: all .5s ease-in-out; /*make it smooth*/
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-up {
    bottom: initial;
    top: 50%;
    left: 50%;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-up.center-left {
    transform: translate(0,-50%);
    left:0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-up.center-right {
    transform: translate(0,-50%);
    left: initial;
    right: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-up.top-left {
    transform: translate(0,0);
    top: 0;
    left:0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-up.top-center {
    transform: translate(-50%,0%);
    top: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-up.top-right {
    transform: translate(0,0);
    top: 0;
    left: initial;
    right: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-up.bottom-left {
    transform: translate(0,0);
    bottom: 0;
    top: initial;
    left: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-up.bottom-center {
    transform: translate(-50%,0%);
    bottom: 0;
    top: initial;
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-up.bottom-right {
    transform: translate(0,0);
    bottom: 0;
    top: initial;
    left: initial;
    right: 0;
}

/** Animation - Slide left */

.boostbox-popup-content.slide-left {
    right: -50%;
    left: auto;
    transform: translate(0, -50%);
    transition: all .5s ease-in-out; /* make it smooth */
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-left {
    right: 50%;
    left: auto;
    transform: translate(50%, -50%);
}

.boostbox-popup-overlay .boostbox-popup-content.center-left.slide-left {
    transform: translate(200%,0);
}

.boostbox-popup-overlay.active .boostbox-popup-content.center-left.slide-left {
    right: auto;
    left: 0;
    transform: translate(0%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.center-right.slide-left {
    transform: translate(200%,0);
}

.boostbox-popup-overlay.active .boostbox-popup-content.center-right.slide-left {
    right: 0;
    left: auto;
    transform: translate(0%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.top-left.slide-left {
    transform: translate(200%,0);
    top: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.top-left.slide-left {
    right: auto;
    left: 0;
    transform: translate(0%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.top-center.slide-left {
    transform: translate(200%,0);
    top: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.top-center.slide-left {
    right: 0;
    left: auto;
    transform: translate(-50%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.top-right.slide-left {
    transform: translate(200%,0);
    top: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.top-right.slide-left {
    right: 0;
    left: auto;
    transform: translate(0%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.bottom-left.slide-left {
    transform: translate(200%,0);
    bottom: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.bottom-left.slide-left {
    right: auto;
    left: 0;
    transform: translate(0%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.bottom-center.slide-left {
    transform: translate(200%,0);
    bottom: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.bottom-center.slide-left {
    right: 0;
    left: auto;
    transform: translate(-50%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.bottom-right.slide-left {
    transform: translate(200%,0);
    bottom: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.bottom-right.slide-left {
    right: 0;
    left: auto;
    transform: translate(0%,0%);
}

/** Animation - Slide right */


.boostbox-popup-content.slide-right {
    left: -50%;
    right: auto;
    transform: translate(-50%, -50%);
    transition: all .5s ease-in-out; /* make it smooth */
}

.boostbox-popup-overlay.active .boostbox-popup-content.slide-right {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}

.boostbox-popup-overlay .boostbox-popup-content.center-left.slide-right {
    transform: translate(-200%,0);
}

.boostbox-popup-overlay.active .boostbox-popup-content.center-left.slide-right {
    left: 0;
    right: auto;
    transform: translate(0%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.center-right.slide-right {
    transform: translate(-200%,0);
}

.boostbox-popup-overlay.active .boostbox-popup-content.center-right.slide-right {
    right: 0;
    left: auto;
    transform: translate(0%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.top-left.slide-right {
    transform: translate(-200%,0);
    top: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.top-left.slide-right {
    right: auto;
    left: 0;
    transform: translate(0%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.top-center.slide-right {
    transform: translate(-200%,0);
    top: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.top-center.slide-right {
    left: 0;
    right: auto;
    transform: translate(50%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.top-right.slide-right {
    transform: translate(-200%,0);
    top: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.top-right.slide-right {
    right: 0;
    left: auto;
    transform: translate(0%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.bottom-left.slide-right {
    transform: translate(-200%,0);
    bottom: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.bottom-left.slide-right {
    right: auto;
    left: 0;
    transform: translate(0%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.bottom-center.slide-right {
    transform: translate(-200%,0);
    bottom: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.bottom-center.slide-right {
    right: 0;
    left: auto;
    transform: translate(-50%,0%);
}

.boostbox-popup-overlay .boostbox-popup-content.bottom-right.slide-right {
    transform: translate(-200%,0);
    bottom: 0;
}

.boostbox-popup-overlay.active .boostbox-popup-content.bottom-right.slide-right {
    right: 0;
    left: auto;
    transform: translate(0%,0%);
}

/** Animation - Fade in */

.boostbox-popup-content.fade-in {
    opacity: 0;
    transition: all .5s ease-in-out; /*make it smooth*/
}

.boostbox-popup-overlay.active .boostbox-popup-content.fade-in {
    opacity: 1;
}

/** Animations - Pop swirl */

@keyframes pop-swirl {
    0% {
        transform: translate(-50%,-50%) scale(0) rotate(360deg);
    }
    60% {
        transform: translate(-50%,-50%) scale(0.8) rotate(-10deg);
    }
    100% {
        transform: translate(-50%,-50%) scale(1) rotate(0deg);
    }
}

@keyframes pop-swirl-center-right {
    0% {
        transform: scale(0) rotate(360deg);
    }
    60% {
        transform: scale(0.8) rotate(-10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes pop-swirl-center-left {
    0% {
        transform: scale(0) rotate(360deg);
    }
    60% {
        transform: scale(0.8) rotate(-10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes pop-swirl-bottom-center {
    0% {
        transform: translate(-50%,-50%) scale(0) rotate(360deg);
    }
    60% {
        transform: translate(-50%,-50%) scale(0.8) rotate(-10deg);
    }
    100% {
        transform: translate(-50%,-50%) scale(1) rotate(0deg);
    }
}

@keyframes pop-swirl-bottom-right {
    0% {
        transform: scale(0) rotate(360deg);
    }
    60% {
        transform: scale(0.8) rotate(-10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes pop-swirl-bottom-left {
    0% {
        transform: scale(0) rotate(360deg);
    }
    60% {
        transform: scale(0.8) rotate(-10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.boostbox-popup-overlay.active .boostbox-popup-content.pop-swirl {
    -webkit-animation: pop-swirl .5s ease;
}

.boostbox-popup-overlay.active .boostbox-popup-content.pop-swirl-center-right {
    animation: pop-swirl-center-right .5s ease;
}

.boostbox-popup-overlay.active .boostbox-popup-content.pop-swirl-center-left {
    animation: pop-swirl-center-left .5s ease;
}

.boostbox-popup-overlay.active .boostbox-popup-content.pop-swirl-bottom-left {
    animation: pop-swirl-bottom-left .5s ease;
}

.boostbox-popup-overlay.active .boostbox-popup-content.pop-swirl-bottom-center {
    animation: pop-swirl-bottom-center .5s ease;
}

.boostbox-popup-overlay.active .boostbox-popup-content.pop-swirl-bottom-right {
    animation: pop-swirl-bottom-right .5s ease;
}

/** Animations - Anvil */

@keyframes anvil {
    0% {
      transform: translate(-50%, -50%) scale(5) rotate(0);
      opacity: 0;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0);
    }
    50% {
      transform: translate(-50%, -50%) scale(1) rotate(-0.2deg);
      opacity: 1;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);
    }
    75% {
      transform: translate(-50%, -50%) scale(1) rotate(0.2deg);
      opacity: 1;
      box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);
    }
    100% {
      transform: translate(-50%, -50%) scale(1) rotate(0);
      opacity: 1;
      box-shadow: 0 0 500px rgba(241, 241, 241, 0);
    }
}
  
@keyframes anvil-center-left {
    0% {
      transform: scale(1) rotate(0);
      opacity: 0;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0);
    }
    50% {
      transform: scale(1) rotate(-0.2deg);
      opacity: 1;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);
    }
    75% {
      transform: scale(1) rotate(0.2deg);
      opacity: 1;
      box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);
    }
    100% {
      transform: scale(1) rotate(0);
      opacity: 1;
      box-shadow: 0 0 500px rgba(241, 241, 241, 0);
    }
}

@keyframes anvil-center-right {
    0% {
      transform: scale(5) rotate(0);
      opacity: 0;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0);
    }
    50% {
      transform: scale(1) rotate(-0.2deg);
      opacity: 1;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);
    }
    75% {
      transform: scale(1) rotate(0.2deg);
      opacity: 1;
      box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);
    }
    100% {
      transform: scale(1) rotate(0);
      opacity: 1;
      box-shadow: 0 0 500px rgba(241, 241, 241, 0);
    }
}

@keyframes anvil-top-right {
    0% {
      transform: scale(5) rotate(0);
      opacity: 0;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0);
    }
    50% {
      transform: scale(1) rotate(-0.2deg);
      opacity: 1;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);
    }
    75% {
      transform: scale(1) rotate(0.2deg);
      opacity: 1;
      box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);
    }
    100% {
      transform: scale(1) rotate(0);
      opacity: 1;
      box-shadow: 0 0 500px rgba(241, 241, 241, 0);
    }
}

@keyframes anvil-top-center {
    0% {
      transform: translate(-50%, 0%) scale(5) rotate(0);
      opacity: 0;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0);
    }
    50% {
      transform: translate(-50%, 0%) scale(1) rotate(-0.2deg);
      opacity: 1;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);
    }
    75% {
      transform: translate(-50%, 0%) scale(1) rotate(0.2deg);
      opacity: 1;
      box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);
    }
    100% {
      transform: translate(-50%, 0%) scale(1) rotate(0);
      opacity: 1;
      box-shadow: 0 0 500px rgba(241, 241, 241, 0);
    }
}

@keyframes anvil-top-left {
    0% {
      transform: translate(0%, 0%) scale(5) rotate(0);
      opacity: 0;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0);
    }
    50% {
      transform: translate(0%, 0%) scale(1) rotate(-0.2deg);
      opacity: 1;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);
    }
    75% {
      transform: translate(0%, 0%) scale(1) rotate(0.2deg);
      opacity: 1;
      box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);
    }
    100% {
      transform: translate(0%, 0%) scale(1) rotate(0);
      opacity: 1;
      box-shadow: 0 0 500px rgba(241, 241, 241, 0);
    }
}

@keyframes anvil-bottom-left {
    0% {
      transform: scale(5) rotate(0);
      opacity: 0;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0);
    }
    50% {
      transform: scale(1) rotate(-0.2deg);
      opacity: 1;
      box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);
    }
    75% {
      transform: scale(1) rotate(0.2deg);
      opacity: 1;
      box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);
    }
    100% {
      transform: scale(1) rotate(0);
      opacity: 1;
      box-shadow: 0 0 500px rgba(241, 241, 241, 0);
    }
}

.boostbox-popup-overlay.active .boostbox-popup-content.anvil {
    animation: anvil 1s cubic-bezier(.38, .1, .36, .9) forwards;
}

.boostbox-popup-overlay.active .boostbox-popup-content.anvil.center-left {
    animation: anvil-center-left 1s cubic-bezier(.38, .1, .36, .9) forwards;
}

.boostbox-popup-overlay.active .boostbox-popup-content.anvil.center-right {
    animation: anvil-center-right 1s cubic-bezier(.38, .1, .36, .9) forwards;
}

.boostbox-popup-overlay.active .boostbox-popup-content.anvil.top-center {
    animation: anvil-top-center 1s cubic-bezier(.38, .1, .36, .9) forwards;
}

.boostbox-popup-overlay.active .boostbox-popup-content.anvil.top-right {
    animation: anvil-top-right 1s cubic-bezier(.38, .1, .36, .9) forwards;
}

.boostbox-popup-overlay.active .boostbox-popup-content.anvil.top-left {
    animation: anvil-top-left 1s cubic-bezier(.38, .1, .36, .9) forwards;
}

.boostbox-popup-overlay.active .boostbox-popup-content.anvil.bottom-left {
    animation: anvil-bottom-left 1s cubic-bezier(.38, .1, .36, .9) forwards;
}

.boostbox-popup-overlay.active .boostbox-popup-content.anvil.bottom-center {
    animation: anvil-bottom-center 1s cubic-bezier(.38, .1, .36, .9) forwards;
}

.boostbox-popup-overlay.active .boostbox-popup-content.anvil.bottom-right {
    animation: anvil-bottom-right 1s cubic-bezier(.38, .1, .36, .9) forwards;
}

/** Close */

.boostbox-popup-content .boostbox-close {
    background: 0 0;
    border-radius: 50%;
    border: 0;
    display: block;
    height: 34px;
    padding: 0;
    position: absolute;
    top: -36px;
    right: -6px;
    z-index: 999;
}

.boostbox-popup-content .boostbox-close.inside {
    top: 12px;
    right: 12px;
}

.boostbox-popup-content.top-left .boostbox-close,
.boostbox-popup-content.top-center .boostbox-close,
.boostbox-popup-content.top-right .boostbox-close {
    top: auto;
    bottom: -36px;
}
.boostbox-popup-content.top-left .boostbox-close.inside,
.boostbox-popup-content.top-center .boostbox-close.inside,
.boostbox-popup-content.top-right .boostbox-close.inside {
    top: auto;
    bottom: 12px;
    right: 12px;
}

.boostbox-popup-content .boostbox-close:hover {
    cursor: pointer;
}

/** @todo when creating custom blocks for people to use, 
    make sure to add custom classes to the wrappers so we can style 
    each form type accordingly */

/** Gravity Forms - field wrapper */
.boostbox-popup-content .gform_fields {
    list-style-type: none;
    margin: 0;
}

/** WPForms - label */
.wpforms-field-label,
.wpforms-field-sublabel.after {
    display: block;
}

.wpforms-field-label.wpforms-label-hide {
    display: none;
}

/** WPForms - input fields */
.wpforms-field-small,
.wpforms-field-medium,
.wpforms-field-large,
.wpforms-field-row-block.wpforms-one-half input {
    width: 100%;
}

.wpforms-field-container {
    margin: 6px 0;
}

.wpforms-field-row,
.wpforms-field.wpforms-field-name,
.wpforms-field.wpforms-field-email {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.wpforms-field-row-block.wpforms-one-half {
    flex-basis: 49%;
    margin: 6px 0;
}

.wpforms-field-sublabel.after.wpforms-sublabel-hide {
    display: none;
}

.wpforms-submit-container {
    margin: 12px 0 0 0;
}