*:not(:defined) { opacity: 0; } /* Prevent FOUC on loading */ 



[effect-scroll] {
  transition : transform .3s;
}

.slide-out-top {
  transform: translateY(-100%);
}

.animScrollInBottom .stagger > *:nth-child(2) { transition-delay: calc(var(--opa-stagger, 0.1s)); }
.animScrollInBottom .stagger > *:nth-child(3) { transition-delay: calc(var(--opa-stagger, 0.2s)); }
.animScrollInBottom .stagger > *:nth-child(4) { transition-delay: calc(var(--opa-stagger, 0.3s)); }
.animScrollInBottom .stagger > *:nth-child(5) { transition-delay: calc(var(--opa-stagger, 0.4s)); }
.animScrollInBottom .stagger > *:nth-child(6) { transition-delay: calc(var(--opa-stagger, 0.5s)); }
.animScrollInBottom .stagger > *:nth-child(7) { transition-delay: calc(var(--opa-stagger, 0.6s)); }
.animScrollInBottom .stagger > *:nth-child(8) { transition-delay: calc(var(--opa-stagger, 0.7s)); }
.animScrollInBottom .stagger > *:nth-child(9) { transition-delay: calc(var(--opa-stagger, 0.8s)); }
.stagger-delay-01 { --opa-stagger: 0.1s; }
.stagger-delay-02 { --opa-stagger: 0.2s; }
.stagger-delay-03 { --opa-stagger: 0.3s; }
.stagger-delay-04 { --opa-stagger: 0.4s; }
.stagger-delay-05 { --opa-stagger: 0.5s; }
:root{
  
  --el-color-neutral-xlight : #f3f3f3;
  --el-color-neutral-light : #C2C2C2;
  --el-color-neutral: #808080;
  --el-color-neutral-dark: #414141;
  --el-color-purple : #4D1EB2;
  --el-color-purple-dark : #3A1687;
  --el-color-purple-xlight : #F8F5FF;
  --el-color-purple-light : #f1edfb;
  --el-color-red : #FF0000;
  
  --el-color-light: white;
  --el-color-dark: var(--el-color-purple-dark);
  
  --el-button-size : 48px;
  --el-media-background : gray;
  
  --el-text-family : General Sans;
  
}


el-badge::part(element){
  padding: 0;
  display: inline-block;
  line-height: 100%;
  background-color: transparent;
  text-transform: uppercase;
  color: var(--fdw-color-purple-dark);
  font-size: 12px;
  position: relative;
  letter-spacing: .2em;
  font-weight : normal;
  
}

el-badge::part(icon-before),
el-badge::part(icon-after){
  height: 20px;
  width: auto;
}

el-badge[variant="upper"]::part(element){
  padding: 0;
  display: inline-block;
  line-height: 100%;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 10px;
  position: relative;
  letter-spacing: .2em;
  font-weight : bold;
  
}

el-badge::part(icon-before),
el-badge::part(icon-after){
  height: 20px;
  width: auto;
}

el-badge[variant="pill"]::part(element){
  padding : 4px 6px;
  background : transparent;
  border-radius : 300px;
  border : 1px solid var(--fdw-color-neutral-light);
  color : var(--fdw-color-purple-dark);
  font-size : 12px; 
  letter-spacing: 0;
  text-transform : none;
}

el-badge[variant="chips"]::part(element){
  padding : 4px 6px;
  background : var(--fdw-color-neutral-light);
  border : none;
  color : var(--fdw-color-neutral-dark);
  font-size : 12px; 
  letter-spacing: 0;
  text-transform : none;
}

el-button::part(element){
  border-radius: 300px;
  padding: 0 24px;
  will-change: transform;
  font-size: 14px;
  font-weight: 400;
  background : transparent;
  justify-content : start;
  gap : 8px;
  height : var(--el-button-size);
  color : var(--el-button-text-color);
  border-color : var(--el-button-border-color);
}

el-button svg{
  width: 16px;
  height: 16px;
}


el-button[icon-button]::part(element){
  height: var(--el-button-size);
  width : var(--el-button-size);
  padding: 0;
  justify-content : center;
}

el-button[icon-button] svg{
  width: 24px;
  height: 24px;
}



el-button[state="selected"]::part(icon-after){
   transform : rotate(180deg);
}


el-button[variant="primary"]::part(element){
  background : var(--el-color-purple-dark);
  border-color : var(--el-color-purple-dark);
  color : var(--el-color-light);
  
}

el-button[variant="primary"]:hover::part(element),
el-button[variant="primary"][aria-pressed="true"]::part(element) {
   opacity : .8;
}


el-button[variant="secondary"]::part(element){
  background : transparent;
  color : var(--el-color-dark);
  border : 1px solid var(--el-color-neutral-light);
}

el-button[variant="secondary"]:hover::part(element),
el-button[variant="secondary"][aria-pressed="true"]::part(element){
  background : var(--el-color-dark);
  color : var(--el-color-light);
  border : 1px solid var(--el-color-dark);
}




el-button[variant="tertiary"]::part(element){
  background : transparent;
  border : none;
  padding : 0px;
  border-radius : 0;
}

el-button[variant="tertiary"][href]:hover::part(element){
  transform : translateX(2%);
  --opa-button-text-color : var(--fdw-color-purple-dark);
}

el-button[variant="tertiary"][aria-pressed="true"]::part(element){
  background : transparent;
  border-bottom : 1px solid var(--opa-button-color-border, var(--fdw-color-purple-dark) );
  
}

el-button[variant="link"]::part(element){
  background : transparent;
  border : none;
  color : var(--fdw-color-purple-dark);
  padding : 0px;
  font-size : 24px;
}

el-button[variant="link"][href]:hover::part(element){
  transform : translateX(2%);
}

el-button[variant="link"][state="selected"]::part(element){
  background : var(--fdw-color-purple-light);
  --opa-text-color : var(--fdw-color-purple-dark)
}

el-button[variant="link2"]::part(element){
  background : transparent;
  border : none;
  color : var(--fdw-color-purple-dark);
  padding : 0px;
  font-size : 20px;
}

el-button[variant="link2"]:hover::part(element){
  transform : translateX(2%);
}

el-button[variant="link2"][state="selected"]::part(element){
  background : var(--fdw-color-purple-light);
  --opa-text-color : var(--fdw-color-purple-dark)
}

el-button[variant="pill"]::part(element){
  background : transparent;
  color : var(--el-color-dark);
  border : 1px solid var(--el-color-neutral-light);
  height : 28px;
  font-size : 14px;
  padding : 0 12px;
}

el-button[variant="pill"]:hover::part(element),
el-button[variant="pill"][aria-pressed="true"]::part(element){
  background : var(--el-color-dark);
  color : var(--el-color-light);
  border : 1px solid var(--el-color-dark);
}

el-frame {
  color : var(--opa-text-color);
  margin : 0!important;
}



el-frame[href]:hover el-image::part(element){
  /*--opa-text-color : var(--fdw-color-purple);*/
  /*transform : scale(.99)*/
  /*background-color : var(--fdw-color-purple-xlight);*/
  opacity : .4;
  transition : .3s opacity;
}




el-frame[variant="white"]{
  background-color : white;
  --opa-text-color : var(--fdw-color-neutral);
}



el-frame[variant="purple"]{
  background-color : var(--el-color-purple);
  --opa-text-color : var(--el-color-light);
  --opa-heading-color : var(--el-color-light);
}



el-frame[variant="red"]{
  background-color : var(--el-color-red);
  --opa-text-color : white;
  --opa-heading-color : white;
  --fdw-textlink-color : white;
  --opa-button-border-color : white;
  --opa-button-text-color : white;
}



el-frame[variant="purple-light"]{
  background-color : var(--fdw-color-purple-light);
}

el-frame[variant="purple-xlight"]{
  background-color : var(--el-color-purple-xlight);
}

el-frame[variant="white-text"]{
  --opa-text-color : white;
  --opa-heading-color : white;
}


el-frame[variant="neutral-light"], el-grid[variant="neutral-light"]{
  background-color : var(--el-color-neutral-xlight);
}

opa-container[variant="outlined"]{
  border : 1px solid var(--fdw-color-neutral-light);
}

/*el-frame[variant='container-xl']{
  max-width : 1360px;
}*/




el-frame[variant='container-l']{
  max-width : 1200px;
}

el-frame[variant='container-m']{
  max-width : 1024px;
}

el-frame[variant='container-s']{
  max-width : 900px;
}

el-frame[variant='container-xs']{
  max-width : 800px;
}

el-frame[variant='container-xxs']{
  max-width : 640px;
}

el-frame[variant='modal']{
  background : rgba(0,0,0,.7);
}

[variant*="heading"] > * {
  /*font-family : Work Sans;*/
  font-family : General Sans;
  line-height : 120%;
  color : var(--el-color-purple-dark);
  font-weight: 500;
}

[variant*="heading"] a{
  text-decoration : none;
}

[variant=heading-xs] > * { 
  font-size: clamp(18px, 2.1vw, 20px);
}

[variant=heading-xs] > * { 
  font-size: clamp(24px, 2.1vw, 32px);
}

[variant=heading-s] > * { 
  font-size: clamp(32px, 2.5vw, 40px);
}

[variant=heading-m] > * { 
  font-size: clamp(32px, 3.5vw, 56px); 
}

[variant=heading-l] > * { 
  font-size: clamp(48px, 5vw, 80px);
  
}

[variant=heading-xl] > * { 
  font-size: clamp(48px, 5vw, 120px);
}

[variant=heading-xxl] > * { font-size: 160px;}

.el-input::part(input){
  border-radius : 0px;
  background : transparent;
}

.el-input::part(input-element),
.el-input::part(label){
  font-family : var(--el-text-family, sans-serif);
  font-weight : 400;
  color : var(--el-color-dark);
}

.el-input::part(label){
  opacity : .4;
}

.el-input[checked]::part(box){
  background-color : var(--el-color-purple-dark);
}


.el-icon{
  color : var(--el-color-purple-dark);
}

el-image,
el-image-compare,
el-video,
el-embed{
  background-color: var(--el-color-purple);
  transition : opacity .3s;
}

el-image::part(image),
el-video::part(image),
el-embed::part(image) {
  opacity: 0;
}

el-image::part(image-loaded),
el-video::part(image-loaded),
el-embed::part(image-loaded){
  background-color: var(--el-color-purple);
  transition: 1s all;
  opacity: 1; 
} 



el-separator::part(element){
  background-color : var(--el-color-neutral-light);
}

[variant*="text"] > * {
  font-family : var(--el-text-family);
  font-weight : 500;
  line-height : 160%;
  color : var(--el-color-purple-dark);
  font-weight: 400;
}

el-text a {
  text-decoration : underline;
  color : var(--el-color-purple-dark);
  
}

el-text:hover a{
  opacity : .7;
}

[variant=text-xxs] > * { 
  font-size: 9px;
}

[variant=text-xs] > * { 
  font-size: 12px;
}

[variant=text-s] > * { 
  font-size: 14px;
}

[variant=text-m] > * { 
  font-size: 18px;
}

[variant=text-l] > * { 
  font-size: 24px;
}

[variant=text-xl] > * { 
  font-size: 32px;
}

[variant=text-xxl] > * { 
  font-size: 48px;
}

[variant='text-overtitle'] > * { 
  font-size: 12px;
  text-transform : uppercase;
  
}

[variant='text-overtitle-light'] > * { 
  font-size: 10px;
  text-transform : uppercase;
  font-weight : 500;
}

el-text[variant='special-link'] a {
  text-decoration : none;
  color : var(--el-color-purple-dark);
  
}


[enter-anim="fade-in-bottom"]{
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[enter-anim="fade-in-bottom"][data-enter="from"] {
    opacity: 0;
    transform: translateY(6%);
    
}

[enter-anim="fade-in-bottom"][data-enter="to"] {
    opacity: 1;
    transform: translateY(0);
    
}

[enter-anim="fade-in-bottom-1"]{
  transition: opacity 0.6s ease, transform 0.6s ease;
  
}

[enter-anim="fade-in-bottom-1"][data-enter="from"] {
    opacity: 0;
    transform: translateY(6%);
    
}

[enter-anim="fade-in-bottom-1"][data-enter="to"] {
    opacity: 1;
    transform: translateY(0);
    
}


[enter-anim="fade-in-right"]{
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[enter-anim="fade-in-right"][data-enter="from"] {
    opacity: 0;
    transform: translateX(100%);
    
}

[enter-anim="fade-in-right"][data-enter="to"] {
    opacity: 1;
    transform: translateX(0);
    
}


[enter-anim="fade-in-right-1"]{
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay : .3s;
}

[enter-anim="fade-in-right-1"][data-enter="from"] {
    opacity: 0;
    transform: translateX(2%);
    
}

[enter-anim="fade-in-right-1"][data-enter="to"] {
    opacity: 1;
    transform: translateX(0);
    
}

[enter-anim="modal-backdrop"]{
  transition: background 0.6s ease;
}

[enter-anim="modal-backdrop"][data-enter="from"] {
    background : rgba(0,0,0,0);
    
}

[enter-anim="modal-backdrop"][data-enter="to"] {
    background : rgba(0,0,0,.8);
    
}

[scroll-down-anim="nav-scroll-anim"]{
  transition : transform .3s;
}

[scroll-down-anim="nav-scroll-anim"][data-scroll="down"] {
   transform : translateY(-100%);
}

[scroll-down-anim="nav-scroll-anim"][data-scroll="up"] {
   transform : translateY(0);
}

[enter-anim="modal-drawer-right"]{
  transition: transform 0.4s ease;
}

[enter-anim="modal-drawer-right"][data-enter="from"] {
    opacity: 0;
    transform: translateX(100%);
    
}

[enter-anim="modal-drawer-right"][data-enter="to"] {
    opacity: 1;
    transform: translateX(0);
    
}


[enter-anim="fade-in-bottom"]{
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[enter-anim="fade-in-bottom"][data-enter="from"] {
    opacity: 0;
    transform: translateY(4%);
    
}

[enter-anim="fade-in-bottom"][data-enter="to"] {
    opacity: 1;
    transform: translateY(0);
    
}