*: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-primary : #104D62;
 --el-color-light : white;
 --el-color-neutral-50 : #F6EFEA;
 --el-color-neutral-100 : #EBE5E1;

}


body{
  position: relative;
  padding: 0;
  margin: 0;
}




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

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









el-badge::part(element){
  height: 16px;
  border-radius: 300px;
  line-height: 100%;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
  position: relative;
  letter-spacing: .1em;
  padding: 0px 10px;
  color : var(--el-color-primary);
}


el-badge span{ margin-top: 2px; }

opa-badge[variant="primary"]::part(element){
  background-color: rgb(0, 0, 0);
  color: white;
}

opa-badge[variant="secondary"]::part(element){
  background-color: rgb(206, 206, 206);
  color: var(--opa-titlecolor);
}

opa-badge[variant="tertiary"]::part(element){
  background-color: transparent;
  padding: 0;
}

el-button {
  --el-height : 48px;
  --el-padding : 0 24px;
  --el-border-radius: 300px;
  --el-text-transform : uppercase;
  --el-letter-spacing : .1em;
  --el-font-weight : 500;
  --el-font-size : 11px;
  --el-transition: all .3s ease;
  --el-font-family : Poppins;
}

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



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

el-button[variant="primary"] {
  --el-background : var(--el-color-primary);
  --el-color: var(--el-color-light);
}

el-button[variant="primary"]:hover {
  /*filter: brightness(1.5);
  transform: scale(.98);*/
}

el-button[variant="primary"][state="selected"]{
  /*filter: brightness(1.5);*/
}

el-button[variant="secondary"]::part(element) {
  border: 1px solid #9ca29f;
  background-color: transparent;
  color: var(--el-color-primary);
}

el-button[variant="secondary"]:hover::part(element){
  filter: brightness(.9);
  transform: scale(.98);
}


el-button[variant="secondary"][state="selected"] {
  --el-background : var(--el-color-primary);
  --el-color : var(--el-color-light);
  --el-border : 1px solild var(--el-color-primary);
}

el-button[variant="tertiary"] {
  --el-background : transparent;
  --el-color: var(--el-color-primary);
}

opa-button[variant="tertiary"]:hover::part(element) {
  background-color: #d3d3d3;
  
}

opa-button[variant="link"]::part(element){
  cursor: pointer;
  background-color: transparent;
  height: auto;
  padding: 0;
  text-transform: none;
  color: black;
  border: none;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: normal;
}

opa-button[variant="link"][state="selected"]::part(element),
opa-button[variant="link"]:hover::part(element){
  background-color: transparent;
  text-decoration: underline;
}

opa-button[variant="special"]::part(element){
  border-radius: 300px;
  padding: 0 24px;
  height : var(--opa-button-size);
  font-weight: bold;
  will-change: transform;
  font-size: 14px;
  background : blue;
  color : var(--opa-text-color);
  justify-content : start;
  transition : all .3s;
}

opa-button[variant="special"][href]:hover::part(element){
  transform : translate(1%, -1%);
  box-shadow : -4px 6px 0px black;
  filter: brightness(1.02);
  

}



el-button[variant="chip"] {
  --el-border: 1px solid #9ca29f;
  --el-background: transparent;
  --el-color: var(--el-color-primary);
  --el-height : 24px;
  --el-padding : 0 16px;
}

el-button[variant="chip"][state="selected"] {
  --el-background : var(--el-color-primary);
  --el-color : var(--el-color-light);
  --el-border : 1px solild var(--el-color-primary);
}

el-frame[variant='color-light']{
  background : var(--el-color-light);
  border-radius : var(--el-radius, 20px);
  overflow : hidden;
}

el-frame[variant='color-1']{
  background : var(--el-color-neutral-50);
  border-radius : var(--el-radius, 20px);
  overflow : hidden;
}

el-frame[variant='color-2']{
  background : #F3DAFF;
  border-radius : var(--el-radius, 20px);
  overflow : hidden;
}

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

el-frame[variant='modal-backdrop']{
  background : black;
  opacity : .8;
}

el-input-text::part(input) {
  border-radius : 4px;

}

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

el-image,
el-image-compare::part(element),
el-video::part(element),
el-embed::part(element){
  background-color: var(--el-color-neutral-100);
  transition : opacity .3s;
  border-radius : var(--el-radius, 20px);
}

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){
  transition: 1s all;
  opacity: 1; 
} 

el-image.hover-hide{
  transition : .2s opacity;
  opacity : 0;
}

el-image.hover-hide:hover{
  opacity : 1;

}



el-image[variant='no-radius'] {
  border-radius : 0px;
}

el-image[variant='transparent']{
  border-radius : 0px;
  background-color: transparent;
  
}

el-image[variant='carreau'] {
  border-radius : 0px;
  box-shadow : 10px 10px 30px rgba(0,0,0,.1);
}

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

[variant*="heading"] > * {
  font-family : Poppins;
  font-weight : 500;
  line-height : 120%;
  color : var(--el-color-primary);
}

[variant*="text"] > * {
  font-family : Poppins;
  font-weight : 300;
  line-height : 160%;
  color : var(--el-color-primary);
}



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

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

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

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

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

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

[variant=text-quote] > * { 
  font-size: clamp(18px, 2.1vw, 24px);
}

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

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

[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(56px, 5vw, 80px);
  
}

[variant=heading-xl] > * { 
  font-size: 120px;
}

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