/*@import goes on top*/
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');*/


:root {
  --x-size:calc(32px + 0.1vw);
  --l-size:calc(27px + 0.1vw);
  --m-size:calc(22px + 0.1vw);
  --n-size:calc(16px + 0.1vw);
  --s-size:calc(13px + 0.1vw);
  --t-size:calc(11px + 0.1vw);
  --f-size:calc(8px + 0.2vw);

  --finger-size:calc(24px + 0.6vw);g

  --chosen-height:calc(20px + 0.5vw);  
  --chosen-font-size:calc(14px + 0.5vw);  
  --linkColor:#5270AD;  
  --linkColorHover:#204d74;
  --p-default:#585b72;
  --p-selected:#1873DF;
  --p-black:#484848;
  --p-blue:#4E689E;/*#4E689E #2E3F8D; #5F86A9; */
  --p-blueDark:#204d74;
  --p-blueHover:#5270AD;
  --p-blue1:#70B0E3;
  --p-red:#E37070;
  --p-green:#70E3B0;
  --p-gray:#888888;
  --p-gold: #BD864C;  
}
*{position:relative;font-family: Montserrat;letter-spacing:0.25px;} /*z-index would not take effect when position is static */
body {
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

}
@media screen and (max-device-width: 480px){
  body{-webkit-text-size-adjust: 100%;} /*fix: mobile safari make fonts bigger for no reason on horizontal*/
}


@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}  

html{scroll-behavior: smooth;box-sizing: border-box;/*force padding to inside div border*/} 
*, *:before, *:after {box-sizing: inherit; /*force padding to inside div border*/}
* {-webkit-tap-highlight-color: rgba(0,0,0,0);} /*fix iPhone flickering a gray background when click*/
body{min-height:fit-content;color:var(--p-black);padding:0px;margin:0px;font-family:open sans;font-size:var(--n-size);} /*I took out  it was causing to modal Iframe have a scroll bar*/
a:link,a:visited,a:hover,a:active {color:#484848;}
#waitMask {display:none;position:fixed;z-index:10000;top:0;left:0;height:100%;width:100%;background:rgba(250,250,250,.6) url('img/loading.gif') 50% 50% no-repeat;background-size: 50px 50px;pointer-events:auto}
table{width:100%;border-spacing:0px;border-collapse:collapse;padding:0px;}
td,th{vertical-align:top;}
td.ellipsis{white-space:nowrap;overflow:hidden;text-overflow: ellipsis;width: 100%;max-width:0;}
blockquote {margin: 7px 0px 0px 0px;}

/*Input Select boxes*/
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{/* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none;margin: 0; /* <-- Apparently some margin are still there even though it's hidden */}
::placeholder{color:#BBBBBB;}
/*hide the spinners from numeric input boxes*/
input[type=number]{ -moz-appearance:textfield; /* Firefox */}
input,textarea,select{width:100%;border:1px solid #DDDDDD;font-family:open sans;outline:0;font-size:var(--n-size);padding:4px 4px 4px 6px;color:var(--p-black);-webkit-appearance:none;border-radius:5px;box-shadow:none;}
input[type=text] {
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}






.goOption{xcolor:#666666;}
.goFont{font-size:var(--n-size);}
.goHead{color:var(--p-blue);}
.goUl{color:var(--p-blue);}
/*.goPlaceHolder{color:var(--p-blue);};*/


.centered {position:fixed;top:50%;left:25%;right:25%;}
.goUnselectable{-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;}
.noSelect{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.readOnly{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0px;background-color:#F4F4F4;border-radius:5px;spellcheck:false;pointer-events:none;} 
.button{margin-top:5px;font-size:var(--n-size);}
.link{cursor:pointer;text-decoration:underline;padding-left:6px;padding-right:6px;color:var(--linkColor);white-space:nowrap;}
.link:hover{background-color:#F0F0F0;}        
.linkHover {cursor:pointer;}
.linkHover:hover {text-decoration:underline;}
.valueBg{font-size:var(--n-size);background-color:#F4F4F4;padding:2px 4px 2px 4px;width:100%;} 
.uLink {color:var(--linkColor);font-weight:600;text-decoration:underline;cursor:pointer;}
.uLink:hover {color:var(--linkColorHover);}

.bottomLine{border-bottom:1px solid #DDD;}
.topLine{border-top:1px solid #DDD;}
.banner{border-top:2px solid #DDD;border-bottom:2px solid #DDD;padding-top:5px;padding-bottom:5px;}
@media print {.noPrint{display:none;}}

/*Buttons*/
.buttonPrimary {
    background-color:var(--p-blue);
    border:1px solid var(--p-blue);
    color:#FFF;;
    font-size:var(--s-size);
    border-radius: 6px;
    padding:6px 12px 6px 12px;
    -webkit-appearance: none;
    outline:none;cursor:pointer;
}
.buttonPrimary:hover {background-color:var(--p-blueHover)}

.buttonSecondary {
    background-color:#FFFFFF;
    border:1px solid var(--p-blue);
    color:color:var(--p-blue);
    font-size:var(--s-size);
    border-radius: 6px;
    padding:6px 12px 6px 12px;
    -webkit-appearance: none;
    outline:none;cursor:pointer;
}
.buttonSecondary:hover {background-color:#EEEEEE;}

.buttonSecondary:disabled,
.buttonSecondary[disabled],
.buttonPrimary:disabled,
.buttonPrimary[disabled]{
  border: 1px solid #BBBBBB;
  background-color: #F0F0F0;
  color: #BBBBBB;
  cursor: not-allowed;
}

.goDialog{
  width:90%;
  max-width:500px;

}

/*CHECKBOX AND RADIOBOXES*/
.cssCheckboxContainer {display: block;position: relative;padding-left: 28px;cursor: pointer;font-size: 18px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
/* Hide the browser's default checkbox */
.cssCheckboxContainer input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
/* Create a custom checkbox */
.cssCheckbox {position: absolute;top:0;left:0;height: 20px;width: 20px;background-color: #eee;border:solid 2px #2196F3;}
/* On mouse-over, add a grey background color */
.cssCheckboxContainer:hover input ~ .cssCheckbox{background-color: #ccc;}
/* When the checkbox is checked, add a blue background */
.cssCheckboxContainer input:checked ~ .cssCheckbox{background-color: #2196F3;}
/* Create the cssCheckbox/indicator (hidden when not checked) */
.cssCheckbox:after{content:"";position:absolute;display:none;}
/* Show the cssCheckbox when checked */
.cssCheckboxContainer input:checked ~ .cssCheckbox:after{display: block;}
/* Style the cssCheckbox/indicator */
.cssCheckboxContainer .cssCheckbox:after{left:6px;top:2px;width:5px;height:10px;border:solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.cssRadioContainer {display: block;position:relative;padding-left:35px;margin-bottom:12px;cursor: pointer;font-size: 18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select: none;user-select: none;}
/* Hide the browser's default radio button */
.cssRadioContainer input {position: absolute;opacity:0;cursor: pointer;}
/* Create a custom radio button */
.cssRadio {position: absolute;top:0;left:0;height:25px;width: 25px;background-color:#eee;border-radius:50%;}
/* On mouse-over, add a grey background color */
.cssRadioContainer:hover input ~ .cssRadio{background-color: #ccc;}
/* When the radio button is checked, add a blue background */
.cssRadioContainer input:checked ~ .cssRadio {background-color:#2196F3;}
/* Create the indicator (the dot/circle - hidden when not checked) */
.cssRadio:after {content: "";position:absolute;display: none;}
/* Show the indicator (dot/circle) when checked */
.cssRadioContainer input:checked ~ .cssRadio:after{display: block;}
/* Style the indicator (dot/circle) */
.cssRadioContainer .cssRadio:after{top:9px;left:9px;width:8px;height:8px;border-radius:50%;background: white;}

/*Rounded table*/
.roundedTable {
  border-collapse: separate;
  border-spacing: 0;
}

.roundedTable tr td {
  border-right: 2px solid var(--linkColor);
  border-bottom: 2px solid var(--linkColor);
  padding: 5px;
}
.roundedTable tr td:first-child {
  border-left: 2px solid var(--linkColor);
}
.roundedTable tr td {
  background: #fff;
  border-top: 2px solid var(--linkColor);
  text-align: left;
}

/* top-left border-radius */
.roundedTable tr:first-child td:first-child {
  border-top-left-radius: 9px;
}

/* top-right border-radius */
.roundedTable tr:first-child td:last-child {
  border-top-right-radius: 9px;
}

/* bottom-left border-radius */
.roundedTable tr:last-child td:first-child {
  border-bottom-left-radius: 9px;
}

/* bottom-right border-radius */
.roundedTable tr:last-child td:last-child {
  border-bottom-right-radius: 9px;
}

/*menu*/
.menuButton{width:400px;padding:5px 10px 5px 10px;font-size:var(--s-size);text-decoration:none;color:#333333;background-color:#FFFFFF;border-bottom:1px solid #EEE;cursor:pointer;}
.menuButton:hover{background-color:#F8F8F8;text-decoration:none;}




/*Autocomplete:*/
.autocomplete {
    position: relative;
    display: inline-block;
}


.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    font-size: 14px;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    box-shadow:0 6px 12px rgba(0,0,0,0.175);
}
.autocomplete-items div {
  padding:2px 4px 2px 6px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #2E3F8D;
  color: #FFFFFF;
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}


/* xTOOLTIP */
.xTooltip {
  position: relative;
  width:fit-content;
  cursor:pointer;
  text-decoration:underline;
}

/*.xTooltip:hover .xTooltip-content{opacity: 1;}*/

.xTooltip .xTooltip-content {

  background: #333333;
  box-shadow: 0 5px 25px 5px rgba(205, 210, 214, 0.8);
  box-sizing: border-box;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1px;
  min-width: 145px;
  padding: 1em;
  position: absolute;
  /*opacity: 0;*/
  display:none;
  transition: all 0.3s ease;
  border-radius:6px;
  z-index:999;
  /*pointer-events: none;*/

}
.xTooltip .xTooltip-content::after {
  background: #333333;
  content: "";
  height: 10px;
  position: absolute;
  transform: rotate(45deg);
  width: 10px;
}

.xTooltip.top .xTooltip-content {
  bottom: calc(100% + 1em);
  left: 50%;
  transform: translateX(-50%);
}
.xTooltip.top .xTooltip-content::after {
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
}
/*  */
.xTooltip.bottom .xTooltip-content {
  top: calc(100% + 1em);
  left: 100px;
  transform: translateX(-50%);
}
.xTooltip.bottom .xTooltip-content::after {
  top: -5px;
}

.xTooltip.right .xTooltip-content {
  left: calc(100% + 1.5em);
  top: 50%;
  transform: translateY(-50%);
}
.xTooltip.right .xTooltip-content::after {
  left: -5px;
  margin-top: -5px;
  top: 50%;
}

.xTooltip.left .xTooltip-content {
  right: calc(100% + 1.5em);
  top: 50%;
  transform: translateY(-50%);
}
.xTooltip.left .xTooltip-content::after {
  right: -5px;
  margin-top: -5px;
  top: 50%;
}
/* CSS LEFT MENU */
.left-menu * {
  padding: 0;
  margin: 0;
}

.left-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align:left;
  font-size:14px;
}

.left-menu li {
  padding: 10px;
  position: relative;
}

.left-menu li:hover {
  background: #DDDDDD; /*hovered bg color*/
  /*z-index:1000;vdisallows to opening of adjacent other menus*/
}

.left-menu .left-nested-menu,
.left-menu .left-nested-submenu {
  display: block;
  position: absolute;
  background-color: #F0F0F0; /*menu bg color*/
  width: fit-content;
  white-space:nowrap;
  top: 0px;
  left: 0px;
  border-radius:8px;
  z-index:1;          /*disallows to opening of adjacent other menus*/
}

.left-menu .left-nested-category .left-nested-menu
{
  width:auto;
  white-space:nowrap;
  /*z-index:1000*/;
}

.left-menu .left-nested-category:hover .left-nested-menu,
.left-menu .left-nested-subcategory:hover .left-nested-submenu {
  display: block;
  /*z-index:1000*/;
}

.left-menu .left-nested-submenu {
  top: 0;
  display: none;
  left: 100%;
  width:auto;
  background-color: #E8E8E8; /*menu bg color*/
  white-space:nowrap;
}

.left-menu li
{
  cursor:pointer;
  border-radius:8px;
}




/* CSS RIGHT MENU */
.right-menu * {
  padding: 0;
  margin: 0;
}

.right-menu  {
  align-items: center;
}
.right-menu strong {
  margin-right: 5px;
  margin-right: auto;
}

.right-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align:left;
  font-size:14px;
}

.right-menu li {
  padding: 5px;
  position: relative;
}

.right-menu li:hover {
  background: #DDDDDD; /*hovered bg color*/
  z-index:2;          /*disallows to opening of adjacent other menus*/  
}

.right-menu .right-nested-menu,
.right-menu .right-nested-submenu {
  display: none;
  position: absolute;
  background-color: #F0F0F0; /*menu bg color*/
  width: 150px;
  top: 0x;
  right:31px;
  border-radius:8px;
  z-index:1;          /*disallows to opening of adjacent other menus*/  
}

.right-menu .right-nested-category .right-nested-menu
{
  width:auto;
  white-space:nowrap;
  top: 0px;
}


.right-menu .right-nested-category:hover .right-nested-menu,
.right-menu .right-nested-subcategory:hover .right-nested-submenu {
  display: block;
}

.right-menu .right-nested-submenu {
  top: 0;
  right: 100%;
  width:auto;
  white-space:nowrap;
}

.right-menu li
{
  cursor:pointer;
  border-radius:8px;
}


.itemOption  {display:inline-block;padding:5px;min-width:50px;text-align:center;margin:0px 10px 5px 0px;border:2px solid #AAAAAA;color:#AAAAAA;border-radius:6px;width:fit-content;cursor:pointer;font-size:14px;}
.itemSelected{display:inline-block;padding:5px;margin:0px 10px 0px 0px;border:2px solid #D20595;color:#D20595;border-radius:6px;width:fit-content;cursor:pointer;}

.icyBg{background:rgba(255,255,255,0.88);box-shadow: 1px 2px 4px rgba(0,0,0,0.3);}

.shadow{-webkit-box-shadow: 0px 3px 11px -2px rgba(0,0,0,0.77); box-shadow: 0px 3px 11px -2px rgba(0,0,0,0.77);border-radius:8px;margin-bottom:15px;}
.shadowLight{-webkit-box-shadow: 10px 10px 21px -2px rgba(0,0,0,0.33); box-shadow: 10px 10px 21px -2px rgba(0,0,0,0.33);border-radius:8px;margin-bottom:15px;} /* offset-x | offset-y | blur-radius | spread-radius | color */
.boxShadow {-moz-box-shadow:1px 1px 4px 1px #ccc;-webkit-box-shadow:1px 1px 4px 1px #DDD;box-shadow:1px 1px 4px 1px #BBB;border: 0px solid #EEE;border-style: solid;-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;outline:none;}
.btnAddToCart{
  border-radius: 1rem;
  line-height: 1.5;
  font-size: 13px; 
  border-width: 1px;
  padding: .5rem 1rem .5rem 1rem;
  background-color: #67D04e;
  border-color: #331359;
  color: white;
  width:fit-content;
  white-space:nowrap;
}

/*TOOLTIP*/
.ttl {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #565656;
  cursor:pointer;
}

.ttl .ttlText {
  width: 220px;
  margin-left: -20px;  
  visibility: hidden;  
  background-color:#565656;
  color:#FFFFFF;
  text-align: left;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 150%;
}

.ttl .ttlText::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 5%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #565656 transparent;
}

.ttl:hover .ttlText {
  visibility: visible;
}

.ttm {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #565656;
  cursor:pointer;
}

.ttm .ttmText {
  width: 220px;
  margin-left: -120px;
  visibility: hidden;
  background-color: #565656;
  color:#FFFFFF;
  text-align: left;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 150%;
}

.ttm .ttmText::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #565656 transparent;
}

.ttm:hover .ttmText {
  visibility: visible;
}

.ttr {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #565656;
  cursor:pointer;
}

.ttr .ttrText {
  width: 220px;
  margin-left: -195px;  
  visibility: hidden;	
  background-color: #565656;
  color:#FFFFFF;
  text-align: left;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
}

.ttr .ttrText::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 9%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #565656 transparent;
}

.ttr:hover .ttrText {
  visibility: visible;
}
/*TOGGLE*/
.toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;

  appearance: none;
  width: 50px;
  height: 24px;
  display: inline-block;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  outline: none;
  border: none;
  cursor: pointer;
  background-color: #707070;
  transition: background-color ease 0.3s;
}

.toggle:before {
  content: "on off";
  display: block;
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  background: #fff;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  font: 10px/28px Helvetica;
  text-transform: uppercase;
  line-height: 2em;
  font-weight: bold;
  text-indent: -22px;
  word-spacing: 27px;
  color: #fff;
  text-shadow: -1px -1px rgba(0,0,0,0.15);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

.toggle:checked {
  background-color: #4CD964;
}

.toggle:checked:before {
  left: 28px;
}


@font-face { font-family: EuphoriaScript; 
  src: url('/font/EuphoriaScript-Regular.ttf'); } 


/* FONTS archivo-narrow-regular - latin https://google-webfonts-helper.herokuapp.com/fonts/archivo-narrow?subsets=latin */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400;
  src: local('Archivo Narrow Regular'), local('ArchivoNarrow-Regular'),
       url('/font/archivo-narrow-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/font/archivo-narrow-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../font/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../font/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../font/open-sans-v34-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../font/open-sans-v34-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v17-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/font/raleway-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/font/raleway-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/font/raleway-v17-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/font/raleway-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/font/raleway-v17-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('/font/raleway-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/font/raleway-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/font/raleway-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/font/raleway-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/font/raleway-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/font/raleway-v17-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-500 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('/font/raleway-v17-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/font/raleway-v17-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/font/raleway-v17-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/font/raleway-v17-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/font/raleway-v17-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/font/raleway-v17-latin-500.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* montserrat */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('/font/Montserrat-100.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/font/Montserrat-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/font/Montserrat-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600; /* Assuming 'SemiBold' is closer to '600' weight */
  src: url('/font/Montserrat-SemiBold.woff2') format('woff2');
}

/* AvenirNextLTPro */
@font-face {
  font-family: 'AvenirNextLTPro';
  font-style: normal;
  font-weight: 400;
  src: url('/font/AvenirNextLTPro-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'AvenirNextLTPro';
  font-style: normal;
  font-weight: 600;
  src: url('/font/AvenirNextLTPro-Demi.woff2') format('woff2');
}