:root {
  --content-spacing-horizontal: 4vw;
  --content-spacing-vertical: 2vw;
  --color-pink: #EF24DC;
  --color-purple: #9B31CF;
  --color-purple-light: #ab3ae2;
  --color-purple-dark: #9B31CF;
  --color-blue: #4D4EA1;
  --color-blue-light: #4e4f9d;
  --color-blue-dark: #343179;
  --font-size-default: 16px;
  --font-size-huge: 5.6rem;
  --font-size-xxxxlarge: 4.6rem;
  --font-size-xxxlarge: 3.2rem;
  --font-size-xxlarge: 2.8rem;
  --font-size-xlarge: 1.4rem;
  --font-size-large: 1.2rem;
  --font-size-medium: 1rem;
  --font-size-normal: 1rem;
  --font-size-small: .9rem;
  --font-size-xsmall: .65rem;
  --font-size-huge-em: 5.6em;
  --font-size-xxxxlarge-em: 4.6em;
  --font-size-xxxlarge-em: 3.2em;
  --font-size-xxlarge-em: 2.8em;
  --font-size-xlarge-em: 1.4em;
  --font-size-large-em: 1.2em;
  --font-size-medium-em: 1em;
  --font-size-small-em: .8em;
  --font-size-xsmall-em: .65em;
}

.desktop { display:unset; }
.mobile { display:none; }
.columns { display:flex; }
.columns .column { width:50%; background-size:cover; background-position:center; }
.Columns { display:flex; }
.Columns .Column { width:50%; background-size:cover; background-position:center; }

.Cta { width:fit-content; }
.Cta:hover button { background-color:var(--color-blue); color:revert; }
.buttons { display:flex; }
.buttons .Cta { margin-right:1em; width:fit-content; }
.buttons .Cta:hover button { background-color:var(--color-blue); color:white; }
.buttons .Cta:last-of-type button { border-top-right-radius:1.25vw; border-bottom-right-radius:1.25vw; }

.Infographic {
  margin-top:5vw; margin-bottom:5vw; padding:2vw 4vw;
  background:
    url(/wp-content/themes/repdata-theme/assets/images/background-dark-top-right.webp) top/contain no-repeat,
    url(/wp-content/themes/repdata-theme/assets/images/background-dark-bottom-left.webp) bottom/contain no-repeat;
  background-color: rgba(0, 0, 0, 0); }
.Infographic ul li { margin-bottom:2rem; }
.Infographic ul li h3 { /*display:inline; margin-bottom:1rem;*/ font-size:var(--font-size-xlarge); font-weight:500; line-height:1; }
.Infographic ul.Icons li { position:relative; list-style:none; padding-left:2vw; }
.Infographic ul.Icons li::before {
  position:absolute; left:-2vw; background-position:0; background-repeat:no-repeat; background-size:65%; content:"";
  display:inline-block; width:5vw; height:5vw; }

.Infographic .Bottom { position:relative; margin-top:4vw; height:45vw; height:unset; justify-content:space-between; }
.Infographic .Bottom .wp-block-column { z-index:1; }
.Infographic .Bottom .Background { position:absolute; z-index:0; top:0; left:25%; width:50%; aspect-ratio:1; }
.Infographic .Bottom .Background .Holder { margin:auto; aspect-ratio:1/1; /*width:45%;*/ width:100%; }
.Infographic .Bottom .Background .Holder figure { position:absolute; margin:auto; width:auto!important; height:100%; transition:all 500ms linear; }
.Infographic .Bottom .Background .Holder figure img { width:100%; object-fit:contain!important; }
.Infographic .Bottom .background .holder figure img.middle-1 { transition:all 1500ms linear;  }

#Trust { width:100%; }
#Trust h2 {
  font-size: var(--font-size-xxlarge);
  text-transform: none;
  font-weight: 500;
  line-height: 1.2em;
  margin:1em auto;
}

.QuoteBox {
  margin:0 auto; padding-bottom:2vw; width:76%; border:1px solid var(--color-pink); border-radius:1.5vw;
  text-align:center; color:white; box-shadow: 0 .5em 1em 0 rgba(205, 40, 215, 25%); }

.Banner.Text {
  margin:0 auto; padding:1em 2em; width:76%; border:1px solid var(--color-pink); border-radius:1.5vw;
  font-size:var(--font-size-xlarge); font-weight:300; font-style:italic;
  text-align:center; color:white; box-shadow:0 .5em 1em 0 rgba(205, 40, 215, 25%); }

.LeadGen { margin-bottom:5em!important; }
.LeadGen form { display:flex; flex-direction:column; font-size:large; }
.LeadGen form .field { margin-bottom:1em; }
.LeadGen form label { margin-bottom:.1em; font-size:inherit; font-weight:bold; }
.LeadGen form input { /*margin-bottom:1em;*/ padding:.25em .5em!important; border:.2rem solid var(--color-purple-dark); border-radius:.25em; }
.LeadGen form textarea { /*margin-bottom:.5rem;*/ padding:.25em .5em; border:.2rem solid var(--color-purple-dark); border-radius:.25em; height:10em; }
.LeadGen input[type='submit'] {
  all:unset;
  margin:1em 1em 1em 0; padding:.5vw 1vw!important; border:.2vw solid var(--color-pink)!important; border-radius:0!important; width:fit-content;
  font-size:inherit; font-weight:500; text-transform:uppercase;
  color:revert;
}
.LeadGen input[type='submit']:hover { cursor:pointer; background-color:var(--color-blue-dark); color:white; }
.LeadGen form .grecaptcha-badge { visibility: hidden; height:0!important; }
.LeadGen form .hs-error-msgs { color: red; font-size: small; }
.LeadGen form .field.hs-recaptcha { margin:0; }
.LeadGen .Attribution { font-size:small; color:gray; }

@media (min-width: 1441px) {
  :root { }
  .Infographic { padding:2.5vw calc((100vw - (1440px - 115.2px)) / 2); }
}

@media (min-width: 768px) and (max-width: 1440px) {
  :root { }
}

@media (max-width: 767px) {
  :root { }
  .Infographic .Bottom .wp-block-column:first-of-type { order:2;  }
  .Infographic .Bottom .wp-block-column:last-of-type { order:3;  }
  .Infographic .Bottom .Background { order:1; position:unset; aspect-ratio:1.25;  }
  /* .Infographic .Bottom .Background .Holder figure { position:unset; } */
  .Infographic .Bottom .Background .Holder { aspect-ratio:1.25; }
  .Infographic .Bottom .Background .Holder figure { width:100%; height:unset; aspect-ratio:1.25; }
  .Infographic .Bottom .Background .Holder figure img { width:100%; height:unset; aspect-ratio:1.25; }
  .Infographic ul.Icons li::before { left:0; width:12.5vw; }
  .Infographic ul.Icons li { padding-left:10vw; }
  .LeadGen input[type='submit'] { padding:.25em 1em!important; border:.75vw solid var(--color-pink)!important; font-weight:800; color:black; }
}

.PocketProtector .Label { width: fit-content; background-color:gray; color:yellow; border-radius:.25em; padding:.25em; font-weight:bold; }
#wpadminbar {
  position: fixed !important;
  top: 0 !important;
}
