/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* colors */
  --background-color: white;
  --light-color: #f8f8f8;
  --dark-color: #505050;
  --text-color: #131313;
  --link-color: #3b63fb;
  --link-hover-color: #1d3ecf;

  /* fonts */
  --body-font-family: "CircularStd", "Circular Std", "Circular-Std-Book", sans-serif;
  --heading-font-family: Sugo-Pro-Display, sans-serif;

  /* body sizes */
  --body-font-size-m: 16px;
  --body-font-size-s: 13.3px;
  --body-font-size-xs: 10.7px;

  /* heading sizes */
  --heading-font-size-xxl: 55px;
  --heading-font-size-xl: 44px;
  --heading-font-size-l: 34px;
  --heading-font-size-m: 27px;
  --heading-font-size-s: 24px;
  --heading-font-size-xs: 22px;

  /* nav height */
  --nav-height: 64px;
}


/* fallback fonts */
@font-face {
  font-family: roboto-condensed-fallback;
  size-adjust: 88.82%;
  src: local('Arial');
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 99.529%;
  src: local('Arial');
}

@media (width >=900px) {
  :root {
    /* body sizes */
    --body-font-size-m: 16px;
    --body-font-size-s: 13.3px;
    --body-font-size-xs: 10.7px;

    /* heading sizes */
    --heading-font-size-xxl: 45px;
    --heading-font-size-xl: 36px;
    --heading-font-size-l: 28px;
    --heading-font-size-m: 22px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 20px;
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6,
.primaryh1,
.primaryh2,
.primaryh3 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 400;
  scroll-margin: 40px;
}

h1,
.primaryh1 {
  font-size: 64px;
  line-height: 77px;
}

h2,
.primaryh2 {
  font-size: 42.7px;
  line-height: 53px;
}

h3,
.primaryh3 {
  font-size: 32px;
  line-height: 41px;
}

h4 {
  font-size: var(--heading-font-size-m);
}

h5 {
  font-size: var(--heading-font-size-s);
}

h6 {
  font-size: var(--heading-font-size-xs);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

/* main>div {
  margin: 40px 16px;
} */

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word;
  position: relative;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* buttons */
a.button:any-link,
button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: 12px 0;
  border: 2px solid transparent;
  border-radius: 2.4em;
  padding: 0.5em 1.2em;
  font-family: var(--body-font-family);
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background-color: var(--link-color);
  color: var(--background-color);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.button:hover,
a.button:focus,
button:hover,
button:focus {
  background-color: var(--link-hover-color);
  cursor: pointer;
}

button:disabled,
button:disabled:hover {
  background-color: var(--light-color);
  cursor: unset;
}

a.button.secondary,
button.secondary {
  background-color: unset;
  border: 2px solid currentcolor;
  color: var(--text-color);
}

main img {
  max-width: 100%;
  max-height: 500px;
  min-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.icon {
  min-height:18px;
  max-height: none;
  position: relative;
  display: inline-block !important;
  height: 24px !important;
  width: 24px !important;
}

.icon img {
  height: 100%;
  width: 100%;
}
.card-image img,
.switchable-card-media img
{
  min-height: unset; /* or 'initial' / 'auto' */
  max-height: none;
}


@media(width<767px){
  .icon {
  height: 18px !important;
  width: 18px !important;
}
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 40px 0;
}

a.button.primary,
button.button.primary {
  border-radius: 4px;
  padding: 8px 16px;
  min-width: 160px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  font-family: "CircularStd", "Circular Std", "Circular-Std-Book", sans-serif !important;
  transform: translateY(0px) !important;
  top: 0px !important;
}

a.button.secondary,
button.button.secondary {
  border-radius: 4px;
  padding: 8px 16px;
  min-width: 160px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 18px;
  font-family: "CircularStd", "Circular Std", "Circular-Std-Book", sans-serif !important;
  border: 2px solid transparent;
  font-style: normal !important;
  transform: translateY(0px) !important;
  top: 0px !important;
}

a.button.primary:hover,
a.button.secondary:hover {
  text-decoration: none;
}

a.button {
  margin: 12px 0;
}

/* Purple Rain */
.dark-purple-theme a.button.primary,
.dark-purple-theme button.button.primary {
  border: none;
  background: linear-gradient(90deg, #E83F40 0%, #E50F7C 52%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
}

.dark-purple-theme a.button.primary:hover,
.dark-purple-theme button.button.primary:hover,
.dark-purple-theme a.button.primary:focus,
.dark-purple-theme button.button.primary:focus {
  background: linear-gradient(90deg, #ED5657 0%, #E8348C 52%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.dark-purple-theme a.button.primary:active,
.dark-purple-theme button.button.primary:active {
  background: linear-gradient(90deg, #C72F35 0%, #C10C64 52%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25) inset;
}

.dark-purple-theme a.button.primary:disabled,
.dark-purple-theme button.button.primary:disabled {
  background: linear-gradient(90deg, #F3F3F3 0%, #D9D9D9 52%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.dark-purple-theme a.button.secondary,
.dark-purple-theme button.button.secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #F3F3F3 !important;
}

.dark-purple-theme a.button.secondary:hover,
.dark-purple-theme button.button.secondary:hover,
.dark-purple-theme a.button.secondary:focus,
.dark-purple-theme button.button.secondary:focus {
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.40);
}

.dark-purple-theme a.button.secondary:active,
.dark-purple-theme button.button.secondary:active {
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.20);
  box-shadow: 0 16px 12px 0 rgba(26, 26, 26, 0.10) inset;
}

.dark-purple-theme a.button.secondary:disabled,
.dark-purple-theme button.button.secondary:disabled {
  background: linear-gradient(90deg, #F3F3F3 0%, #D9D9D9 52%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/* Midnight Blue */
.dark-midnight-theme a.button.primary,
.dark-midnight-theme button.button.primary {
  border: none;
  background: linear-gradient(90deg, #E83F40 0%, #E50F7C 52%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
}

.dark-midnight-theme a.button.primary:hover,
.dark-midnight-theme button.button.primary:hover,
.dark-midnight-theme a.button.primary:focus,
.dark-midnight-theme button.button.primary:focus {
  background: linear-gradient(90deg, #ED5657 0%, #E8348C 52%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.dark-midnight-theme a.button.primary:active,
.dark-midnight-theme button.button.primary:active {
  background: linear-gradient(90deg, #C72F35 0%, #C10C64 52%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25) inset;
}

.dark-midnight-theme a.button.primary:disabled,
.dark-midnight-theme button.button.primary:disabled {
  background: linear-gradient(90deg, #F3F3F3 0%, #D9D9D9 52%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.dark-midnight-theme a.button.secondary,
.dark-midnight-theme button.button.secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #F3F3F3 !important;
}

.dark-midnight-theme a.button.secondary:hover,
.dark-midnight-theme button.button.secondary:hover,
.dark-midnight-theme a.button.secondary:focus,
.dark-midnight-theme button.button.secondary:focus {
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.40);
}

.dark-midnight-theme a.button.secondary:active,
.dark-midnight-theme button.button.secondary:active {
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.20);
  box-shadow: 0 16px 12px 0 rgba(26, 26, 26, 0.10) inset;
}

.dark-midnight-theme a.button.secondary:disabled,
.dark-midnight-theme button.button.secondary:disabled {
  background: linear-gradient(90deg, #F3F3F3 0%, #D9D9D9 52%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/* Light Theme */
.light-grey-theme a.button.primary,
.light-grey-theme button.button.primary {
  border: none;
  background: linear-gradient(90deg, #300C46 0%, #2D2E83 100%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
}

.light-grey-theme a.button.primary:hover,
.light-grey-theme button.button.primary:hover,
.light-grey-theme a.button.primary:focus,
.light-grey-theme button.button.primary:focus {
  background: linear-gradient(90deg, #3A1056 0%, #3C3FAA 100%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.light-grey-theme a.button.primary:active,
.light-grey-theme button.button.primary:active {
  background: linear-gradient(90deg, #26093A 0%, #24266A 52%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25) inset;
}

.light-grey-theme a.button.primary:disabled,
.light-grey-theme button.button.primary:disabled {
  background: linear-gradient(90deg, #F3F3F3 0%, #D9D9D9 52%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.light-grey-theme a.button.secondary,
.light-grey-theme button.button.secondary {
  border: none;
  background: linear-gradient(90deg, #FF9B00 0%, #FFE000 100%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  color: #300C4B !important;
}

.light-grey-theme a.button.secondary:hover,
.light-grey-theme button.button.secondary:hover,
.light-grey-theme a.button.secondary:focus,
.light-grey-theme button.button.secondary:focus {
  background: linear-gradient(90deg, #FFAA28 0%, #FFF050 100%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.light-grey-theme a.button.secondary:active,
.light-grey-theme button.button.secondary:active {
  background: linear-gradient(90deg, #E68C00 0%, #F0C828 52%);
  box-shadow: 0 4px 4px 0 rgba(142, 86, 0, 0.25) inset;
}

.light-grey-theme a.button.secondary:disabled,
.light-grey-theme button.button.secondary:disabled {
  background: linear-gradient(90deg, #F3F3F3 0%, #D9D9D9 52%);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

a.button.primary:hover,
a.button.secondary:hover,
a.button.secondary:focus-visible,
a.button.secondary:focus-visible {
  transform: translateY(0px) !important;
  top: 0 !important;
}

@media (max-width:767px) {
  /* main {
    padding-top: 78px;
  } */

  a.button.primary,
  button.button.primary {
    height: 34px;
  }

  a.button.secondary,
  button.button.secondary {
    height: 34px;
  }
}

/* custom typescale stytles */
.bodycopyxlarge {
  font-size: 21.3px;
  line-height: 24px;
}

.bodycopylarge {
  font-size: 18.7px;
  line-height: 22px;
}

.bodycopy {
  font-size: 16px;
  line-height: 20px;
}

.bodycopysmall {
  font-size: 13.3px;
  line-height: 18px;
}

.microdiscloures {
  font-size: 10.7px;
  line-height: 16px;
}

.microdiscloures,
.bodycopysmall,
.bodycopy,
.bodycopylarge,
.bodycopyxlarge {
  font-family: "CircularStd", "Circular Std", "Circular-Std-Book", sans-serif !important;
}

em a {
  font-style: italic;
  color: var(--link-color);
  font-size: var(--body-font-size-m);
  font-weight: 100;
}

.col-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  margin: 0;
  padding: 0;
  gap:32px;
  align-items: center;
}

.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  margin: 0;
  padding: 0;
  gap:32px;
  align-items: center;
}

.col-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  margin: 0;
  padding: 0;
  gap:32px;
  align-items: center;
}

/* Mobile Screens  */
@media screen and (max-width: 480px) {

  .col-4,
  .col-3,
  .col-2 {
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(1, 1fr);
  }

  .flip-mobile {
    display: flex;
    flex-direction: column-reverse;
  }

}

/* Tablet Screens */
@media (481px <=width <=850px) {

  .col-4,
  .col-3 {
    gap: 16px !important;
  }
} 
 .col-2>div,
.col-3>div,
.col-4>div {
  margin: 0 !important;
  padding: 0 !important;
} 

.section.has-background {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.section.has-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--section-background);
  background-size: cover;
  background-position: center;
  opacity: var(--background-opacity,5%);
  z-index: -1;
}

.col-2 img,
.col-3 img,
.col-4 img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-position: center;
  display: block;
}
.col-2 .primary-image-block > div > div picture img,
.col-2 .primary-image-block > div > div picture img,
.col-2 .primary-image-block > div > div picture img{
  object-fit: contain;
}
a span.link-text {
  display: inline-flex;
  transition: transform 0.3s ease;
}

a span:hover {
  transform: translateY(-8%);
  text-decoration: underline;
}

em a span:hover,
li em a span:hover {
  transform: translateY(-2%);
  text-decoration: underline;
}

li a span:hover {
  transform: translateY(-5%);
  text-decoration: underline;
}
main .section {
  padding-top: 40px;
  padding-right: 80px;
  padding-left: 80px;
  padding-bottom: 40px;
}
@media(1600px<=width <1900px){
  main .section{
  padding-right: 160px;
  padding-left: 160px;
}
  nav#nav {
    padding-left: 160px;
    padding-right: 160px;
}
}
@media(1900px<=width){
  main .section {
  padding-right: 320px;
  padding-left: 320px;
}
  nav#nav {
    padding-left: 320px;
    padding-right: 320px;
}
}
main{
  margin-top:110px ;
}
@media (481px <=width <1024px){
  main .section {
  padding-right: 32px;
  padding-left: 32px;
  }
}
@media (width <481px){
  main .section {
  padding-right: 16px;
  padding-left: 16px;
  }
  main{
  margin-top:78px !important ;
}
}

.text-center {
  text-align: center;
}

.tokens {
  padding-left: 0!important;
  padding-right: 0!important;
  gap:0!important;
}
.tokens .primary-image-block > div > div picture {
  display: block;
}
.tokens img {
  aspect-ratio: auto;
}