:root {
  --primary: #0C3B8F;
  --primaryLight: #3d62a5;
  --secondary: #FD7E14;
  --secondaryLight: #ffd675;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4E4B66;
  --bodyTextColorWhite: #F7F7F7;
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  --sectionPadding: clamp(3.75em, 7.82vw, 6.25em) 1rem;
  --accessible: #fd7e14;
}

body{font-family:"Roboto","Arial",sans-serif;margin:0;padding:0}

*,*:before,*:after{box-sizing:border-box}

.cs-topper{font-size:var(--topperFontSize);line-height:1.2em;text-transform:uppercase;text-align:inherit;letter-spacing:.1em;font-weight:700;color:var(--primary);margin-bottom:0.25rem;display:block}

.cs-title{font-size:var(--headerFontSize);font-weight:900;line-height:1.2em;text-align:inherit;max-width:43.75rem;margin:0 0 1rem 0;color:var(--headerColor);position:relative}

.cs-text{font-size:var(--bodyFontSize);line-height:1.5em;text-align:inherit;width:100%;max-width:40.625rem;margin:0;color:var(--bodyTextColor)}

.cs-button-solid{position:relative;z-index:1;transition:color .3s}
.cs-button-solid::before{content:"";position:absolute;display:block;height:100%;width:0%;background:#000;opacity:1;top:0;left:0;z-index:-1;border-radius:inherit;transition:width .3s}
.cs-button-solid:hover::before{width:100%}
.cs-button-solid:hover{color:#fff}

.cs-credit-link{font-weight:700;color:var(--secondary);text-decoration:none;transition:color .3s}
.cs-credit-link:hover{text-decoration:underline}

body { font-family: 'Roboto', Arial, sans-serif; }



main :is(.cs-button-solid, .cs-button-transparent):not(.cs-btn-custom) { overflow: visible; position: relative; }
main :is(.cs-button-solid, .cs-button-transparent):not(.cs-btn-custom)::before {
  content: ""; position: absolute; display: none;
  width: 140%; height: 100%; left: -20%; top: -75%; z-index: 2;
  background-color: transparent !important;
  background-repeat: no-repeat; transition: all ease-in-out 0.5s;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, transparent 20%, var(--primary) 20%, transparent 30%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--primary) 15%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
main :is(.cs-button-solid, .cs-button-transparent):not(.cs-btn-custom)::after {
  content: ""; position: absolute; display: none;
  width: 140%; height: 100%; left: -20%; bottom: -75%; z-index: 2;
  background-color: transparent !important;
  background-repeat: no-repeat; transition: all ease-in-out 0.5s;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--primary) 15%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
main :is(.cs-button-solid, .cs-button-transparent):not(.cs-btn-custom).pb-animate::before { display: block; animation: pbBubbleTop 0.75s ease-in-out forwards; }
main :is(.cs-button-solid, .cs-button-transparent):not(.cs-btn-custom).pb-animate::after { display: block; animation: pbBubbleBottom 0.75s ease-in-out forwards; }
@keyframes pbBubbleTop {
  0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; }
  50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; }
  100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
}
@keyframes pbBubbleBottom {
  0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; }
  50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; }
  100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
}