/* THEME SETTINGS */


:root {


  /* Typography */

  --ixn-type-primary:             Helvetica, Arial, sans-serif; /* Used in headlines */
  --ixn-type-secondary:           Helvetica, Arial, sans-serif;  /* Body text  */

  --ixn-font-size-mini:           10pt;           /* Text xsmall */
  --ixn-letter-spacing-mini:      0.2pt;
  --ixn-line-height-mini:         1.4;  

  --ixn-font-size-body:           13pt;           /* Body text */
  --ixn-letter-spacing-body:      0.1pt;
  --ixn-line-height-body:         21pt;
  --ixn-font-body:                var(--ixn-font-size-body)/var(--ixn-line-height-body) var(--ixn-type-primary);

  --ixn-font-size-large:          19pt;           /* Body text */
  --ixn-letter-spacing-large:     0pt;
  --ixn-line-height-large:        29pt;
  --ixn-font-large:               var(--ixn-font-size-large)/var(--ixn-line-height-large) var(--ixn-type-primary);

  --ixn-font-size-h3:             19pt;           /* H3 */
  --ixn-letter-spacing-h3:        0pt;
  --ixn-line-height-h3:           29pt;
  --ixn-font-h3:                  var(--ixn-font-size-h3)/var(--ixn-line-height-h3) var(--ixn-type-primary);

  --ixn-font-size-h2:             25pt;           /* H2 */
  --ixn-letter-spacing-h2:        0pt;
  --ixn-line-height-h2:           35pt;
  --ixn-font-h2:                  var(--ixn-font-size-h2)/var(--ixn-line-height-h2) var(--ixn-type-primary);

  --ixn-font-size-h1:             39pt;           /* H1 */
  --ixn-letter-spacing-h1:        0pt;
  --ixn-line-height-h1:           55pt;
  --ixn-font-h1:                  var(--ixn-font-size-h1)/var(--ixn-line-height-h1) var(--ixn-type-primary);


  /* Icons */

  --ixn-icon-size-sm:             14pt;
  --ixn-icon-size-md:             21pt;
  --ixn-icon-size-lg:             24pt;



  /* Colors */

  --ixn-color-primary:            #211B16;        /* <-- Brown */
  --ixn-color-primary--tint-90:   #37322d;        /* <-- Brown Tint 90% */
  --ixn-color-primary--tint-80:   #4d4945;        /* <-- Brown Tint 80% */
  --ixn-color-primary--tint-70:   #645f5c;        /* <-- Brown Tint 70% */
  --ixn-color-primary--tint-60:   #7a7673;        /* <-- Brown Tint 60% */
  --ixn-color-primary--tint-50:   #908d8b;        /* <-- Brown Tint 50% */
  --ixn-color-primary--tint-40:   #a6a4a2;        /* <-- Brown Tint 40% */
  --ixn-color-primary--tint-30:   #bcbbb9;        /* <-- Brown Tint 30% */
  --ixn-color-primary--tint-20:   #d3d1d0;        /* <-- Brown Tint 20% */
  --ixn-color-primary--tint-10:   #e9e8e8;        /* <-- Brown Tint 10% */

  --ixn-color-secondary:            #00ffff;        /* <-- Blue */
  --ixn-color-secondary--tint-90:   #1affff;        /* <-- Blue Tint 90% */
  --ixn-color-secondary--tint-80:   #33ffff;        /* <-- Blue Tint 80% */
  --ixn-color-secondary--tint-70:   #4dffff;        /* <-- Blue Tint 70% */
  --ixn-color-secondary--tint-60:   #66ffff;        /* <-- Blue Tint 60% */
  --ixn-color-secondary--tint-50:   #80ffff;        /* <-- Blue Tint 50% */
  --ixn-color-secondary--tint-40:   #99ffff;        /* <-- Blue Tint 40% */
  --ixn-color-secondary--tint-30:   #B3FFFF;        /* <-- Blue Tint 30% */
  --ixn-color-secondary--tint-20:   #ccffff;        /* <-- Blue Tint 20% */
  --ixn-color-secondary--tint-10:   #e6ffff;        /* <-- Blue Tint 10% */

  /* Used with .alert class */
  --ixn-color-red:                 #f50087;        /* red */
  --ixn-color-red--tint-10:        #fee6f3;        /* red Tint 10 */
  --ixn-color-red--tint-140:       #930051;        /* red Tint 140 */

  --ixn-color-green:                #68ff68;        /* Green */
  --ixn-color-green--tint-10:       #f0fff0;        /* Green Tint 10 */
  --ixn-color-green--tint-140:      #3e993e;        /* Green Tint 140 */

  --ixn-color-blue:                 #00ffff;        /* blue */
  --ixn-color-blue--tint-10:        #e6ffff;        /* blue Tint 10 */
  --ixn-color-blue--tint-40:        #99ffff;        /* blue Tint 40 */
  --ixn-color-blue--tint-140:       #009999;        /* blue Tint 140 */

  --ixn-color-orange:               #ff5800;        /* orange */
  --ixn-color-orange--tint-10:      #ffeee6;        /* orange Tint 10 */
  --ixn-color-orange--tint-140:     #993500;        /* orange Tint 140 */

  --ixn-color-white:              #FFFFFF;          /* <-- White */


  /* Borders */

  --ixn-border-primary:           1px solid var(--ixn-color-primary--tint-20);
  --ixn-border-secondary:         2px solid var(--ixn-color-primary--tint-30);
  --ixn-border-radius:            0px;


  /* Transitions */

  --ixn-transtion-hover:          color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;


  /**
  * REQUIRED AS IS
  */

  /* Spacing */

  --ixn-space-xxxsm:            3px;          /* space standards */
  --ixn-space-xxsm:             6px;          
  --ixn-space-xsm:              12px;          
  --ixn-space-sm:               24px;          
  --ixn-space-md:               48px;          
  --ixn-space-lg:               96px;
  --ixn-space-xlg:              192px; 

  --ixn-image-width-sm:         275px;  
  --ixn-image-width-thumbnail-small:         160px;   /* Used for css class u--img-rounded */


  /* Containers */

}




/* FONTS */


/** 
 * Icons
 * Keep same class names for theme to apply icons
*/

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?at4pgy');
  src:  url('../fonts/icomoon.eot?at4pgy#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?at4pgy') format('truetype'),
    url('../fonts/icomoon.woff?at4pgy') format('woff'),
    url('../fonts/icomoon.svg?at4pgy#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: var(--ixn-icon-size-md);

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


   [class^="icon-"]:before, [class*=" icon-"]:before {
      position: relative;
      top: 7px;
      margin-left: 4px;
   }

   
.icon-more:before {
  content: "\e900";
}
.icon-right:before {
  content: "\e901";
}
.icon-left:before {
  content: "\e902";
}
.icon-tiktok:before {
  content: "\e903";
}
.icon-facebook-squared:before {
  content: "\e904";
}
.icon-spotify:before {
  content: "\e905";
}
.icon-instagram:before {
  content: "\e906";
}
.icon-pinterest:before {
  content: "\e907";
}
.icon-up:before {
  content: "\e908";
}
.icon-down:before {
  content: "\e909";
}
.icon-twitter:before {
  content: "\e90a";
}
.icon-facebook:before {
  content: "\e90b";
}
.icon-close:before {
  content: "\e90c";
}
.icon-search:before {
  content: "\e90d";
}
.icon-menu:before {
  content: "\e90e";
}



/* Icon options */

.icon-twitter:before {
  font-size: 25pt;
  top:  7px;
}

.icon--small {
  font-size:  11pt !important;
  line-height: 1;
}

  .icon--small:before, .icon--small:before {
      position: relative;
      top: 2px;
      margin-left: 0px;
  }