/*@font-face {
  font-family: "Poppins";
  src: local(''),
       url('fonts/Poppins-Regular.woff2') format('woff2');
  unicode-range: U+000-5FF; 
  font-display: swap;
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Poppins";
  src: local(''),
       url('fonts/Poppins-SemiBold.woff2') format('woff2');
  unicode-range: U+000-5FF; 
  font-display: swap;
  font-style: normal;
  font-weight: bold;
}*/


@font-face {
  font-family: "icons-google";
  src: local(''),
      url('fonts/icons-google.woff2') format('woff2');
  font-weight: 100 1000;
}


@font-face {
  font-family: "icons-fa";
  src: local(''),
      url('fonts/fa-regular-400.woff2') format('woff2');
  font-weight: 100 1000;
}

@font-face {
  font-family: "icons-fa-brands";
  src: local(''),
      url('fonts/fa-brands-400.woff2') format('woff2');
  font-weight: 100 1000;
}


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


/* PRIMITIVES TOKEN  */ 
:root{
   /*  COLORS
  ----------------------------------------------------*/
  --opa-color-1 : transparent;
  --opa-color-2 : #DEDC00;
  --opa-color-3 : #1A1C18;
    

  /*  ANIMATIONS EASES
  ----------------------------------------------------*/
    --opa-ease-elastic : cubic-bezier(.5, -0.5, 0.5, 1.5);
    --opa-ease-elasticIn : cubic-bezier(0.34, 1.56, 0.64, 1);
    --opa-ease-elasticOut : cubic-bezier(.36,0, .66, -0.56);
    --opa-ease-expo : cubic-bezier(0.87, 0, 0.13, 1);
    --opa-ease-back : cubic-bezier(0.68, -0.6, 0.32, 1.6);

  /*  APPEARANCE
  ----------------------------------------------------*/
    --opa-border : 1px solid black;

}


/* COMPONENTS TOKEN */ 
:root {
      /*--opa-title-anim-hover : heightIn,heightOut;*/
      
      /* animation scroll */ 
      --opa-title-anim--scroll : skewIn;
      --opa-title-anim-duration--scroll : 200;
      --opa-title-anim-delay--scroll : 100;


      --opa-media-anim--scroll : skewIn;
      --opa-media-anim-duration--scroll : 300;
      --opa-media-anim-delay--scroll : 0;

      --opa-badge-anim--scroll : skewIn;
      --opa-badge-anim-duration--scroll : 300;
      --opa-badge-anim-delay--scroll : 0;


  
  /* -------------------------------------------------------------------------------------------------------- 
    CONTENTS 
  -------------------------------------------------------------------------------------------------------- */
      
     
      /* TITLES //////////////////////////////////////////////////////////////////////////////////// */
      
        --opa-title-fontfamily : "WorkSans";
        --opa-title-fontweight : bold;
        --opa-title-lineheight : 110%;
        --opa-title-fontcolor : red;
        --opa-title-textstroke : none;
        --opa-title-textshadow : none;
        --opa-title-texttransform : none;
        
        --opa-title-xs : calc(16px + .3vw);
        --opa-title-s : calc(16px + .5vw);
        /*--opa-title-rms : calc(24px + .5vw);*/
        --opa-title-m : calc(24px + 1.4vw);
        --opa-title-l : calc(24px + 2vw);
        --opa-title-xl : calc(24px + 3vw);
        --opa-title-xxl : calc(24px + 4vw);
        --opa-title-rgiant : calc(80px + 4vw);

        /*--opa-title-xxl : 72px;
        --opa-title-xl : 64px;
        --opa-title-l : 40px;
        --opa-title-m : 32px;
        --opa-title-s : 24px;
        --opa-title-xs : 16px;*/


        /*--opa-title-rxs : calc(16px + .3vw);;
          --opa-title-rs : calc(16px + .5vw);;
          --opa-title-rms : calc(24px + .5vw);
          --opa-title-rm : calc(24px + 1.4vw);
          --opa-title-rl : calc(24px + 2vw);
          --opa-title-rxl : calc(24px + 3vw);
          --opa-title-rxxl : calc(24px + 4vw);
          --opa-title-rgiant : calc(80px + 4vw);*/

      /* TEXTS //////////////////////////////////////////////////////////////////////////////////// */
        --opa-text-fontfamily : "Poppins";
        --opa-text-fontweight : normal;
        --opa-text-fontcolor : var(--opa-onsurface-color);
        --opa-text-lineheight : 150%;
        --opa-text-xxl : 40px;
        --opa-text-xl : 32px;
        --opa-text-l : 24px;
        --opa-text-m : 16px;
        --opa-text-s : 14px;
        --opa-text-xs : 12px;

      /* BADGE //////////////////////////////////////////////////////////////////////////////////// */
        
        --opa-badge-textcolor : var(--opa-contents-onsurface-color);
        --opa-badge-padding : 1px 8px;
        --opa-badge-fontsize : var(--opa-text-xs, 12px);
        --opa-badge-fontweight : bold;
        --opa-badge-fontfamily : var(--opa-text-fontfamily, sans-serif);
        --opa-badge-texttransform : none;
        
        --opa-badge-borderradius : 0px;
        --opa-badge-borderwidth : 0px;
        --opa-badge-borderstyle : solid;
        --opa-badge-bordercolor : --opa-contents-border-color;

      /* ICON //////////////////////////////////////////////////////////////////////////////////// */
        --opa-icon-color : black;
        --opa-icon-size-xxl : 54px;
        --opa-icon-size-xl : 48px;
        --opa-icon-size-l : 32px;
        --opa-icon-size-m : 24px;
        --opa-icon-size-s : 20px;
        --opa-icon-size-xs : 16px;
        --opa-icon-size-xxs : 12px;

      /* MEDIA //////////////////////////////////////////////////////////////////////////////////// */
        --opa-media-background : #00000025;
        --opa-media-border : none;
        --opa-media-radius : none;
        --opa-media-overflow : hidden;
        --opa-media-ratio : 3/2;
        --opa-media-display : flex;

      /* SEPARATOR //////////////////////////////////////////////////////////////////////////////////// */
        --opa-separator-color : black;
        --opa-separator-stroke : 1px;
        

      /* STACK //////////////////////////////////////////////////////////////////////////////////// */
        --opa-stack-padding : 24px;

  /* -------------------------------------------------------------------------------------------------------- 
    CONTROLS 
  -------------------------------------------------------------------------------------------------------- */
       /* FIELD //////////////////////////////////////////////////////////////////////////////////// */
       --opa-field-background : #f8f7f2;
       --opa-field-fontsize : 16px;
       --opa-field-fontcolor : black;
       --opa-field-fontfamily : var(--opa-text-fontfamily);
       --opa-field-border-width : 0px 0px 1px 0px;
       --opa-field-border-style : solid;
       --opa-field-border-style : black;

       --opa-field-outline--focus : 1px solid green;
       --opa-field-label--focus : green;

   
      /*  BUTTON //////////////////////////////////////////////////////////////////////////////////// */
        
        /* medium */
        --opa-button-medium-background : transparent;
        --opa-button-size : 48px;
        --opa-button-medium-width: auto;
        --opa-button-medium-height: var(--opa-button-size);
        --opa-button-medium-padding: 0px;
        --opa-button-medium-transform : none;
        --opa-button-medium-fontcolor: black ;
        --opa-button-medium-fontsize: var(--opa-text-m);
        --opa-button-medium-fontweight: bold;
        --opa-button-medium-fontfamily: var(--opa-text-fontfamily);
        --opa-button-medium-textransform: none;        
        --opa-button-medium-borderwidth : 0px 0px 0px 0px;
        --opa-button-medium-borderstyle : solid;
        --opa-button-medium-bordercolor : black;
        --opa-button-medium-borderradius : 0px;
        --opa-button-medium-boxshadow: none;
        --opa-button-medium-cursor: pointer ;
        --opa-button-medium-transition : .2s all;

        --opa-button-medium-background--hover : rgba(0,0,0,0);



        /* bold */
        --opa-button-bold-background : red;
        --opa-button-size : 48px;
        --opa-button-bold-width: auto;
        --opa-button-bold-height: var(--opa-button-size);
        --opa-button-bold-padding: 0px;
        --opa-button-bold-transform : none;
        --opa-button-bold-fontcolor: black ;
        --opa-button-bold-fontsize: var(--opa-text-m);
        --opa-button-bold-fontweight: bold;
        --opa-button-bold-fontfamily: var(--opa-text-fontfamily);
        --opa-button-bold-textransform: none;        
        --opa-button-bold-borderwidth : 0px 0px 0px 0px;
        --opa-button-bold-borderstyle : solid;
        --opa-button-bold-bordercolor : black;
        --opa-button-bold-borderradius : 0px;
        --opa-button-bold-boxshadow: none;
        --opa-button-bold-cursor: pointer ;
        --opa-button-bold-transition : .2s all;


        /* light */
        --opa-button-light-background : transparent;
        --opa-button-size : 48px;
        --opa-button-light-width: auto;
        --opa-button-light-height: var(--opa-button-size);
        --opa-button-light-padding: 0px;
        --opa-button-light-transform : none;
        --opa-button-light-fontcolor: black ;
        --opa-button-light-fontsize: var(--opa-text-m);
        --opa-button-light-fontweight: bold;
        --opa-button-light-fontfamily: var(--opa-text-fontfamily);
        --opa-button-light-textransform: none;        
        --opa-button-light-borderwidth : 0px 0px 1px 0px;
        --opa-button-light-borderstyle : solid;
        --opa-button-light-bordercolor : black;
        --opa-button-light-borderradius : 0px;
        --opa-button-light-boxshadow: none;
        --opa-button-light-cursor: pointer ;
        --opa-button-light-transition : .2s all;


      /*  BUTTON ICON //////////////////////////////////////////////////////////////////////////////////// */ 
        
        /* medium */
        --opa-buttonicon-medium-background : var(--opa-color-1);
        --opa-buttonicon-medium-width : var(--opa-button-size);
        --opa-buttonicon-medium-height : var(--opa-button-size);
        --opa-buttonicon-medium-padding : 0;
        --opa-buttonicon-medium-transform  : var(--opa-button-transform);
        --opa-buttonicon-medium-color  : var(--opa-button-fontcolor );
        --opa-buttonicon-medium-borderwidth  : 0px ; 
        --opa-buttonicon-medium-borderstyle  : solid;
        --opa-buttonicon-medium-bordercolor  : var(--opa-button-bordercolor) ;
        --opa-buttonicon-medium-borderradius : 300px;
        --opa-buttonicon-medium-boxshadow : var(--opa-button-boxshadow);
        --opa-buttonicon-medium-cursor: pointer ;
        --opa-buttonicon-medium-transition : var(--opa-button-medium-transition); 

        --opa-buttonicon-medium-background--hover : rgba(0,0,0,.1); 

        /* bold */
        --opa-buttonicon-bold-background : orange;
        --opa-buttonicon-bold-width : var(--opa-button-size);
        --opa-buttonicon-bold-height : var(--opa-button-size);
        --opa-buttonicon-bold-padding : 0;
        --opa-buttonicon-bold-transform  : var(--opa-button-transform);
        --opa-buttonicon-bold-color  : var(--opa-button-fontcolor );
        --opa-buttonicon-bold-borderwidth  : 0px ; 
        --opa-buttonicon-bold-borderstyle  : solid;
        --opa-buttonicon-bold-bordercolor  : var(--opa-button-bordercolor) ;
        --opa-buttonicon-bold-borderradius : 300px;
        --opa-buttonicon-bold-boxshadow : var(--opa-button-boxshadow);
        --opa-buttonicon-bold-cursor: pointer ;
        --opa-buttonicon-bold-transition : var(--opa-button-transition);

        /* light */
        --opa-buttonicon-light-background : orange;
        --opa-buttonicon-light-width : var(--opa-button-size);
        --opa-buttonicon-light-height : var(--opa-button-size);
        --opa-buttonicon-light-padding : 0;
        --opa-buttonicon-light-transform  : var(--opa-button-transform);
        --opa-buttonicon-light-color  : var(--opa-button-fontcolor );
        --opa-buttonicon-light-borderwidth  : 0px ; 
        --opa-buttonicon-light-borderstyle  : solid;
        --opa-buttonicon-light-bordercolor  : var(--opa-button-bordercolor) ;
        --opa-buttonicon-light-borderradius : 300px;
        --opa-buttonicon-light-boxshadow : var(--opa-button-boxshadow);
        --opa-buttonicon-light-cursor: pointer ;
        --opa-buttonicon-light-transition : var(--opa-button-transition);

      
      /* LINK //////////////////////////////////////////////////////////////////////////////////// */
        --opa-link-background : transparent;
        --opa-link-fontcolor : black;
        --opa-link-fontfamily : var(--opa-text-fontfamily,sans-serif);
        --opa-link-padding : .5em; 
        --opa-link-cursor : pointer;
        --opa-link-transition : .2s all;
        --opa-link-borderradius : 0px;
        --opa-link-borderwidth : 0px;
        --opa-link-borderstyle : solid;
        --opa-link-bordercolor : black;
        --opa-link-xxl : var(--opa-text-xxl);
        --opa-link-xl : var(--opa-text-xl);
        --opa-link-l : var(--opa-text-l);
        --opa-link-m : var(--opa-text-m);
        --opa-link-s : var(--opa-text-s);
        --opa-link-xs : var(--opa-text-xs);
        --opa-link-background--hover : rgba(0,0,0,0.1);
        --opa-link-fontcolor--hover : black;
        --opa-link-background--selected : rgba(0,0,0,0.3);
        --opa-link-fontcolor--selected : black;

      
      /* LINK MENU //////////////////////////////////////////////////////////////////////////////////// */
        --opa-linkmenu-background : transparent ;
        --opa-linkmenu-height : auto;
        --opa-linkmenu-width : auto;
        --opa-linkmenu-padding : 0px ;
        --opa-linkmenu-fontfamily : var(--opa-text-fontfamily, sans-serif) ;
        --opa-linkmenu-fontsize : var(--opa-text-m, 16px) ;
        --opa-linkmenu-fontcolor : black;
        --opa-linkmenu-cursor : pointer ;
        
        --opa-linkmenu-background--hover : rgba(0,0,0,0.1);
        --opa-linkmenu-fontcolor--hover : black;
        --opa-linkmenu-background--selected : rgba(0,0,0,0.3);
        --opa-linkmenu-fontcolor--selected : black;

  
  /* -------------------------------------------------------------------------------------------------------- 
    DIALOGS 
  -------------------------------------------------------------------------------------------------------- */
    /* MENU //////////////////////////////////////////////////////////////////////////////////// */
      --opa-menu-background : #e0e0e0;
      --opa-menu-maxwidth : 300px;
      --opa-menu-maxheight : 218px;
      --opa-menu-width : fit-content;
      --opa-menu-height : fit-content;
      --opa-menu-borderwidth : 0px;
      --opa-menu-borderstyle : solid;
      --opa-menu-bordercolor : black;
      --opa-menu-borderradius : 0px;
      --opa-menu-boxshadow : none;

    /* DRAWER //////////////////////////////////////////////////////////////////////////////////// */
      --opa-drawer-boxshadow : none;
      --opa-drawer-center-maxwidth : 800px;
      --opa-drawer-center-maxheight : 400px;
      --opa-drawer-topbottom-maxwidth : 100vw;
      --opa-drawer-topbottom-maxheight : 360px;
      --opa-drawer-leftright-maxwidth : 360px;
      --opa-drawer-leftright-maxheight : 100vh;
      --opa-drawer-borderwidth : 0px;
      --opa-drawer-borderstyle : solid;
      --opa-drawer-bordercolor : black;
      --opa-drawer-borderradius : 0px;


  /* -------------------------------------------------------------------------------------------------------- 
    LISTS 
  -------------------------------------------------------------------------------------------------------- */

  /* -------------------------------------------------------------------------------------------------------- 
    SECTIONS 
  -------------------------------------------------------------------------------------------------------- */
      --opa-surface-color : pink;
      --opa-section-background : var(--opa-surface-color);
      
  
      --opa-section-gap-xs--mobile : 8px ;
      --opa-section-gap-s--mobile : 8px;
      --opa-section-gap-m--mobile : 16px ;
      --opa-section-gap-l--mobile : 16px;
      --opa-section-gap-xl--mobile : 24px;
      --opa-section-gap-xxl--mobile : 24px;
  
      --opa-section-gap-xs : 8px ;
      --opa-section-gap-s : 16px;
      --opa-section-gap-m : 24px ;
      --opa-section-gap-l : 32px;
      --opa-section-gap-xl : 40px;
      --opa-section-gap-xxl : 54px;

      --opa-section-margin--mobile : 16px;
      --opa-section-margin : 16px;

      --opa-section-spacer--mobile : 40px;
      --opa-section-spacer : 80px;

      --opa-navbar-height : 80px;
      --opa-navbar-background : var(--opa-color-1);

  
}


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

body{
  background-color: var(--opa-color-1);
}


.transparent {
  --opa-surface-color : transparent;
  --opa-spacer-background : var(--opa-surface-color);
}

.theme-1{
  
  /* SEMANTIC TOKENS */ 
  --opa-surface-color : var(--opa-color-1);
  
  --opa-contents-surface-color : transparent;
  --opa-contents-onsurface-color : var(--opa-color-3);

  --opa-contents-surface-bold-color : var(--opa-color-2);
  --opa-contents-onsurface-bold-color : var(--opa-color-3);
  
  --opa-controls-surface-color : var(--opa-color-1);
  --opa-controls-surface-bold-color : #DFDDD3;
  --opa-controls-onsurface-bold-color : var(--opa-color-3);


  /* APPLY TOKENS  */ 

  /* section */
  --opa-section-background : var(--opa-surface-color);
  --opa-title-fontcolor : red;
  --opa-text-fontcolor : var(--opa-onsurface-color);
  
  /* badge */
  --opa-badge-background :  var(--opa-contents-surface-bold-color);
  --opa-badge-fontcolor : var(--opa-contents-onsurface-bold-color);

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

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

.theme-2{
  --opa-surface-color : pink;
  --opa-onsurface-color : blue;
  
  --opa-contents-surface-color : transparent;
  --opa-contents-onsurface-color : blue;

  --opa-contents-surface-bold-color : red;
  --opa-contents-onsurface-bold-color : blue;


  /* TOKEN APPLICATION */ 

  /* section */
  --opa-section-background : var(--opa-surface-color);
  --opa-title-fontcolor : var(--opa-onsurface-color);
  --opa-text-fontcolor : var(--opa-onsurface-color);
  
  /* badge */
  --opa-badge-background :  var(--opa-contents-surface-bold-color);
  --opa-badge-fontcolor : var(--opa-contents-onsurface-bold-color);

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

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

  /* spacer */
  --opa-spacer-background : var(--opa-surface-color);


}




/*opa-row,
opa-grid,
opa-slider{
  --opa-section-background : var(--opa-surface-color);
  --opa-title-fontcolor : var(--opa-onsurface-color);
  --opa-text-fontcolor : var(--opa-onsurface-color);
  
  --opa-badge-background :  var(--opa-contents-surface-bold-color);
  --opa-badge-fontcolor : var(--opa-contents-onsurface-bold-color);

  --opa-button-background : var(--opa-controls-surface-color);
  --opa-buttonicon-background : var(--opa-controls-surface-color);
  
  --opa-button-background--hover : var(--opa-controls-surface-bold-color);
  --opa-button-fontcolor--hover : var(  --opa-controls-onsurface-bold-color );
  --opa-button-bordercolor--hover : var(  --opa-controls-onsurface-bold-color );

  --opa-buttonicon-background--hover : var(--opa-controls-surface-bold-color);
  --opa-buttonicon-fontcolor--hover : var(  --opa-controls-onsurface-bold-color );
  
  --opa-drawer-background : var(--opa-surface-color);

}

opa-spacer{
  --opa-spacer-background : var(--opa-surface-color);
}*/