/* THEME SETTINGS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {


  /* Typography */

  --ixn-type-primary:             "Roboto", sans-serif; /* Used in headlines */
  --ixn-type-secondary:           "Roboto", 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:            #000000;        /* Black */
  --ixn-color-primary--tint-90:   #1a1a1a;        /* Black Tint 90% */
  --ixn-color-primary--tint-80:   #333333;        /* Black Tint 80% */
  --ixn-color-primary--tint-70:   #4d4d4d;        /* Black Tint 70% */
  --ixn-color-primary--tint-60:   #666666;        /* Black Tint 60% */
  --ixn-color-primary--tint-50:   #808080;        /* Black Tint 50% */
  --ixn-color-primary--tint-40:   #999999;        /* Black Tint 40% */
  --ixn-color-primary--tint-30:   #b3b3b3;        /* Black Tint 30% */
  --ixn-color-primary--tint-20:   #cccccc;        /* Black Tint 20% */
  --ixn-color-primary--tint-10:   #e6e6e6;        /* Black Tint 10% */

  --ixn-color-secondary:            #eb2027;        /* Rojo */
  --ixn-color-secondary--tint-90:   #ed363d;        /* Rojo Tint 90% */
  --ixn-color-secondary--tint-80:   #ef4d52;        /* Rojo Tint 80% */
  --ixn-color-secondary--tint-70:   #f16368;        /* Rojo Tint 70% */
  --ixn-color-secondary--tint-60:   #f3797d;        /* Rojo Tint 60% */
  --ixn-color-secondary--tint-50:   #f59093;        /* Rojo Tint 50% */
  --ixn-color-secondary--tint-40:   #f7a6a9;        /* Rojo Tint 40% */
  --ixn-color-secondary--tint-30:   #f9bcbe;        /* Rojo Tint 30% */
  --ixn-color-secondary--tint-20:   #fbd2d4;        /* Rojo Tint 20% */
  --ixn-color-secondary--tint-10:   #fde9e9;        /* Rojo Tint 10% */

  --ixn-color-gray-light:       #BCC4C9;
  --ixn-color-gray-dark:       #627681;
  

  /* Used with .alert class */
  --ixn-color-red:                 #EB2027;        /* red */
  --ixn-color-red--tint-10:        #F9BDBF;        /* red Tint 10 */
  --ixn-color-red--tint-140:       #EB2027;        /* red Tint 140 */

  --ixn-color-green:               #00AEAC;        /* Green */
  --ixn-color-green--tint-10:      #B3E7E7;        /* Green Tint 10 */
  --ixn-color-green--tint-140:     #00AEAC;        /* Green Tint 140 */

  --ixn-color-blue:                #1E3A4B;        /* blue */
  --ixn-color-blue--tint-10:       #BCC4C9;        /* blue Tint 10 */
  --ixn-color-blue--tint-140:      #1E3A4B        /* blue Tint 140 */

  --ixn-color-orange:              #F1A430;        /* orange */
  --ixn-color-orange--tint-10:     #FBE4C1;        /* orange Tint 10 */
  --ixn-color-orange--tint-140:    #F1A430;        /* orange Tint 140 */

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


  /* Borders */

  --ixn-border-primary:           1px solid var(--ixn-color-gray-light);
  --ixn-border-secondary:         2px solid var(--ixn-color-gray-light);
  --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('https://staging-ixinet.ixids.com/wp-content/themes/ixpan-theme/assets/fonts/icomoon.eot?at4pgy');
  src:  url('https://staging-ixinet.ixids.com/wp-content/themes/ixpan-theme/assets/fonts/icomoon.eot?at4pgy#iefix') format('embedded-opentype'),
    url('https://staging-ixinet.ixids.com/wp-content/themes/ixpan-theme/assets/fonts/icomoon.ttf?at4pgy') format('truetype'),
    url('https://staging-ixinet.ixids.com/wp-content/themes/ixpan-theme/assets/fonts/icomoon.woff?at4pgy') format('woff'),
    url('https://staging-ixinet.ixids.com/wp-content/themes/ixpan-theme/assets/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;
  }