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


/* TOKENS ------------------------------------------ */ 

:root{ 

  /*  COLORS ---------------------*/
  --opa-color-1-xbold : #48813A;
  --opa-color-1-bold : #97d187;
  --opa-color-1-medium : #bdffab;
  --opa-color-1-light : #DDF1D8;
  --opa-color-1-xlight : #E8F8E4;
  
  --opa-color-2-xbold : #363533;
  --opa-color-2-bold : #D0CFCC;
  --opa-color-2-medium : #E0DFDD;
  --opa-color-2-light : #EEECE8;
  --opa-color-2-xlight : #F6F5F2;



  --opa-controls-surface-high : #386A1E;
  --opa-controls-onsurface-high : #ffffff;
  --opa-controls-surface : #D7E8CC;
  --opa-controls-onsurface : #1b1d1a;
  --opa-controls-surface-low : #EEF7E8;
  --opa-controls-onsurface-low : #1b1d1a;
  --opa-controls-accent : #B8F397;
  --opa-controls-onaccent : #1b1d1a;
  --opa-controls-outline: #74796D;
  
  --opa-container-onsurface : #1b1d1a;
  --opa-container-surface-high : #D5DBC6;
  --opa-container-surface : #ECEFE5;
  --opa-container-surface-low : #F8FBF0;
  --opa-container-outline: #74796D;
  --opa-container-accent : #D7E8CC;

  --opa-contents-surface : #d0d7c1;
  --opa-contents-radius : 8px;

}


:root{
  --opa-button-size : 48px;
  --opa-pill-size : 32px;
  --opa-pill-radius : 300px;
}



/* TEXT & TITLE ------------------------------------------ */ 

opa-title{
  --opa-title-fontfamily : "Poppins";
  --opa-title-xs : calc(16px + .3vw);
  --opa-title-s : calc(16px + .5vw);
  --opa-title-m : calc(24px + 1vw);
  --opa-title-l : calc(24px + 2vw);
  --opa-title-xl : calc(24px + 3vw);
  --opa-title-xxl : calc(24px + 4vw);
  --opa-title-giant : calc(80px + 4vw);
}


opa-title::part(element){
  font-weight: bold;
  font-family: serif;
}


opa-text {
  --opa-text-xxl : 32px;
  --opa-text-xl : 24px;
  --opa-text-l : 18px;
  --opa-text-m : 16px;
  --opa-text-s : 14px;
  --opa-text-xs : 12px;
}



/* MEDIAS ------------------------------------------*/ 
opa-image::part(element),
opa-video::part(element),
opa-video-embed::part(element){
  background-color: var(--opa-contents-surface);
  border-radius: var(--opa-contents-radius);
}

opa-image::part(image){
  opacity: 0;
}

opa-image::part(image-loaded){
    transition: 1s all;
    opacity: 1;
} 





/* BUTTONS ------------------------------------------ */ 

opa-button::part(element){
  height: var(--opa-button-size);
  padding: 0 24px;
  border-radius: 300px;
}

opa-button[icon]::part(element){
  height: var(--opa-button-size);
  width : var(--opa-button-size);
  padding: 0;
}

opa-button.primary::part(element) {
  background-color: var(--opa-controls-surface-high);
  border: 1px solid var(--opa-controls-surface-high);
  color: var(--opa-controls-onsurface-high);
}

opa-button.secondary::part(element) {
  background-color: transparent;
  color : var(--opa-controls-onsurface-low);
  border: 1px solid var(--opa-controls-outline);
}

opa-button.tertiary::part(element) {
  background-color: transparent;
  border: 1px solid transparent;
}


/* BUTTONS HOVER ------------------------------------------* */ 
opa-button:hover::part(element) {
  background-color: rgb(223, 223, 223);
  border: 1px solid rgb(187, 187, 187);
}

opa-button.primary:hover::part(element) {
  background-color: rgb(50, 50, 50);
  border: 1px solid rgb(50, 50, 50);
}


/* PILLS ------------------------------------------*/ 
opa-pill::part(element){
  height: var(--opa-pill-size, 32px);
  padding: 0 16px;
  border-radius: var(--opa-pill-radius, 300px);
}

opa-pill[icon]::part(element){
  height: var(--opa-pill-size, 32px);
  width: var(--opa-pill-size, 32px);
  padding: 0;
}


opa-pill.primary::part(element) {
  background-color: #505050;
  border: 1px solid #505050;
  color: white;
}

opa-pill.secondary::part(element) {
  background-color: transparent;
  border: 1px solid black;
}

opa-pill.tertiary::part(element) {
  background-color: transparent;
  border: 1px solid rgb(187, 187, 187);
}


/* PILLS STATES ------------------------------------------*/
opa-pill:hover::part(element) {
  background-color: rgb(223, 223, 223);
  border: 1px solid rgb(187, 187, 187);
}

opa-pill[state="selected"]::part(element) {
  background-color: black;
  border: 1px solid black;
  color: white;
}

opa-pill.primary:hover::part(element) {
  background-color: rgb(50, 50, 50);
  border: 1px solid rgb(50, 50, 50);
}




/* LINK ------------------------------------------*/ 
opa-link::part(element){
  height: auto;
  padding: 0 4px;
}

opa-link:hover::part(element){
  /*color : blue;*/
}

/* CONTAINER ------------------------------------------*/



opa-container.primary::part(element){
  background-color: var(--opa-container-surface-high);
  color : var(--opa-container-onsurface-high);
  border-radius: var(--opa-contents-radius);
}

opa-container.secondary::part(element){
  background-color: var(--opa-container-surface);
  color : var(--opa-container-onsurface);
  border-radius: var(--opa-contents-radius);
}

opa-container.tertiary::part(element){
  background-color: var(--opa-container-surface-low);
  color : var(--opa-container-onsurface-low);
  border-radius: var(--opa-contents-radius);
}

/* FIELD ------------------------------------------*/ 

opa-field::part(input){
  background-color: red;
  border-radius : 300px;
  height: var(--opa-button-size);
}

opa-field::part(label){
  color : green;
  font-size : 22px;
  padding-bottom: 16px;
}

opa-field.focused::part(input){
  border: 8px solid orange;
  
}


/* /////// LAYOUT - THEMING /////////*/

.theme-1{

}

.theme-2{

  /* section */
  --opa-section-background : var(--opa-color-2-xlight);

  /* text */
  --opa-title-fontcolor : black;
  --opa-text-fontcolor : var(--opa-color-2-xbold);

  /* badge */
  --opa-badge-background :  transparent;
  --opa-badge-fontcolor : black;

  /* button icon */
  --opa-buttonicon-background--hover : var(--opa-controls-surface-bold-color);
  --opa-buttonicon-fontcolor--hover : var(  --opa-controls-onsurface-bold-color );
 
}

.theme-3{

  /* section */
  --opa-section-background : var(--opa-color-1-xlight);

  /* text */
  --opa-title-fontcolor : black;
  --opa-text-fontcolor : var(--opa-color-3);

  /* badge */
  --opa-badge-background :  transparent;
  --opa-badge-fontcolor : black;

  /* button icon */
  --opa-buttonicon-background--hover : var(--opa-controls-surface-bold-color);
  --opa-buttonicon-fontcolor--hover : var(  --opa-controls-onsurface-bold-color );
 
}


.opa-filtered-element {
  transition: .3s all;
}

.opa-filtered-element.is-disable{
  opacity: 0;
  transform: scale(0) skew(10deg);
}


:root{
  --opa-inlinelink-color : red;
  --opa-inlinelink-textdecoration : none;
  --opa-inlinelink-cursor : pointer;
  --opa-inlinelink-background : linear-gradient(to right, transparent 0%, rgba(255, 255, 0, 1) 0%);
  --opa-inlinelink-background-size : 200% 100%;
  --opa-inlinelink-background-repeat : no-repeat;
  --opa-inlinelink-background-transition : background-position 0.3s ease;
 
  --opa-inlinelink-background-position--hover : 100% 0;
  --opa-inlinelink-color--hover : green;
  --opa-inlinelink-textde-decoration--hover : underline;

}