:root{
    --primary:      #81B200;
    --secondary:    #002F81;
    --white:        #FFFFFF;
    --gray:         #D6D6D6;
    --darkgray:     #565656;
    --lightgray:    #F5F5F5;
    --black:        #353535;
    --primaryDark:  #4B6700;
    --blue:         #0068FF;
    --lightblue:    #29A9E0;
    --success:      #00CE61;
    --error:        #e10000;
    
    --primary_values:       129, 178, 0;
    --secondary_values:     0, 47, 129;
    --white_values:         255, 255, 255;
    --gray_values:          214, 214, 214;
    --lightgray_values:     245, 245, 245;
    --black_values:         53, 53, 53;
    --primaryDark_values:   75, 103, 0;
    --blue_values:          0, 104, 255;
    --lightblue_values:     41, 169, 224;
    --success_values:       0, 207, 96;
    --error_values:         225, 0, 0;

}

*, *::after{
    font-family: MontserratFont;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    list-style: none;
}

/* REPETITIVE STYLES CLASSES*/
.auto-margin        { margin: auto; }
.auto-vmargin       { margin: auto 0; }
.auto-hmargin       { margin: 0 auto; }
.auto-margin-top    { margin-top: auto; }
.hide-overflow      { overflow: hidden; }
.hide-overflow-x    { overflow-x : hidden; }
.hide-overflow-y    { overflow-y: hidden; }

.main-padding       {
  padding-top:    var(--paddingTop, var(--paddingVertical, 1rem));
  padding-bottom: var(--paddingBottom, var(--paddingVertical, 1rem));
  padding-left:  clamp(1rem, 10vw, 15rem);
  padding-right: clamp(1rem, 10vw, 15rem);
  --positionXValue: clamp(1rem, 10vw, 15rem);
}
/* .main-padding       {padding: var(--paddingVertical, 1rem) clamp(1rem, 10vw, 15rem); --positionXValue: clamp(1rem, 10vw, 15rem)} */
.all-container-width, .all-width{width: 100%;}

/* TEST STYLES */
.border         {border: 1px solid var(--color, red)}
.border.black   { --color: black }
.border.red     { --color: red }
.border.blue    { --color: blue }
.border.green   { --color: green }

/* EFFECTS */
.shadow   { filter: drop-shadow(0.125rem 0rem 0.125rem rgba(var(--black_values), 0.9)); }
.rounded  { border-radius: 100%; overflow: hidden;}
.bg-image { background: var(--bgURL, linear-gradient(var(--primary), var(--primary))); background-repeat: var(--bgRepeat, no-repeat); background-size: var(--bgSize, cover); background-position: var(--bgPosition, center center); }

/* ELEMENTS */
.spinner  {animation: rotate 1s infinite linear; border: var(--borderWidth, 0.25rem) solid var(--color, var(--secondary)); width: var(--size, 5rem); height: var(--size, 5rem); border-radius: 50%; position: relative; display: none; justify-content: center; align-items: center;}
.spinner::before {
  content: "";
  position: absolute;
  right: -1%;
  transform: translateX(50%);
	border-left: calc(var(--borderWidth, 0.25rem) * 3) solid transparent;
	border-right: calc(var(--borderWidth, 0.25rem) * 3) solid transparent;
	border-top: calc(var(--borderWidth, 0.25rem) * 5) solid var(--color, var(--secondary));
}
.spinner::after {
  content: "";
  position: absolute;
  left: -1%;
  transform: translateX(-50%);
	border-left: calc(var(--borderWidth, 0.25rem) * 3) solid transparent;
	border-right: calc(var(--borderWidth, 0.25rem) * 3) solid transparent;
	border-bottom: calc(var(--borderWidth, 0.25rem) * 5) solid var(--color, var(--secondary));
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}




/* TEXT */
.big-text           { font-size: clamp(1.3rem,1.6vw, 1.5rem); font-weight: 200; color: var(--fontColor, var(--white)) }
/* .big-text           { font-size: 1.5rem; font-weight: 200; color: var(--fontColor, var(--white)) } */
.big-text > span    { font-weight: 500; color: var(--spanColor, inherit); }

.paragraph          { font-size: 1rem; font-weight: 200; color: var(--fontColor, var(--white)) }
.smallparagraph     { font-size: 0.875rem; font-weight: 200; color: var(--fontColor, var(--white)) }
.paragraph > span   { font-weight: 400; color: var(--spanColor, inherit); }
.paragraph b        { font-weight: 600; color: var(--boldColor, inherit); }

.heading-1          { font-size: 2.5rem; font-weight: 600; color: var(--fontColor, var(--white)); line-height: 100% }
.heading-1 > span   { font-weight: 600; color: var(--spanColor, inherit);  }

.heading-2          { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300; color: var(--fontColor, var(--white)); line-height: 100% }
/* .heading-2          { font-size: 3rem; font-weight: 300; color: var(--fontColor, var(--white)); line-height: 100% } */
.heading-2 > span   { font-weight: 700; color: var(--spanColor, inherit);  }

.heading-3          { font-size: 2.5rem; font-weight: 300; color: var(--fontColor, var(--white)); line-height: 100% }
.heading-3 > span   { font-weight: 600; color: var(--spanColor, inherit);  }
.heading-4          { font-size: 1.5rem; font-weight: 300; color: var(--fontColor, var(--white)); line-height: 100% }

.title              { font-size: 2rem; font-weight: 300; color: var(--fontColor, red) }
.title > span       { font-size: 2rem; font-weight: 600; color: var(--spanColor, red) }
.subtitle           { font-size: 2rem; font-weight: 600; color: var(--fontColor, red) }
.subheading         { font-size: 1.25rem; font-weight: 300; color: var(--fontColor, red) }
.caption            { font-size: 0.875rem; font-weight: 300; color: var(--fontColor, var(--white)) }
.link               { font-size: 2rem }
.details            { font-size: 0.875rem; font-weight: 500; color: var(--fontColor, var(--white)) }
.details > span     { font-weight: 700; color: var(--spanColor, inherit);  }
.smallest           { font-size: 0.725rem; font-weight: 300; color: var(--fontColor, var(--white)) }
.boldsmallest       { font-size: 0.725rem; font-weight: 500; color: var(--fontColor, var(--white)); }

.text-center { text-align: center }
.text-left   { text-align: left }
.text-right  { text-align: right }
.text-justify{ text-align: justify; }

.first-letter-uc{display: inline-block;}
.first-letter-uc::first-letter{text-transform: uppercase;}

.cap        { text-transform: capitalize; }
.uc         { text-transform: uppercase; }
.italic     { font-style: italic; }
.normal     { font-style: normal; }



/* BUTTONS */
.button {
    width: auto;
    height: auto;
    padding: var(--buttonPadding, 0.5rem 1rem);
    background-color: var(--buttonColor, transparent);
    border: var(--buttonBorderWidth, 1px) solid var(--buttonBorderColor, red);
    border-radius: var(--buttonBorderRadius, 2rem);
    font-size: var(--buttonFontSize, 0.875rem);
    font-weight: var(--buttonFontWeight, 500);
    color: var(--buttonFontColor, var(--primary));
    text-align: center;
    white-space: nowrap;
}

.button.primary {
    --buttonColor: var(--primary);
    --buttonBorderColor: var(--primary);
    --buttonFontColor: var(--white);
}

.button.secondary {
    --buttonColor: var(--secondary);
    --buttonBorderColor: var(--secondary);
    --buttonFontColor: var(--white);
}

.button.outline {
    --buttonColor: transparent;
}


.button.outline.white {
    --buttonBorderColor: var(--white);
    --buttonFontColor: var(--white);
}

.button.outline.blue {
    --buttonBorderColor: var(--secondary);
    --buttonFontColor: var(--secondary);
}

.button.size-2 {--buttonBorderRadius: 0.875rem; }

/* POSITIONS */
.absolute   { position: absolute }
.relative   { position: relative }
.fixed      { position: fixed }
.sticky     { position: sticky; position: -webkit-sticky; top: 0;}

/* LAYERS */
.layer-1{ z-index: 1 }
.layer-2{ z-index: 3 }
.layer-3{ z-index: 5 }

/* FLEX LAYOUT CLASSES */
.flex   { display: flex }

.row        { flex-direction: row }
.col        { flex-direction: column }
.row-reverse{ flex-direction: row-reverse }
.col-reverse{ flex-direction: column-reverse }

.grow   { flex-grow: 1 }
.wrap   { flex-wrap: wrap }

.row.gap        { column-gap: var(--gap, 0rem) }
.col.gap        { row-gap: var(--gap, 0rem) }
.col-reverse.gap{ row-gap: var(--gap, 0rem) }

.wrap.gap   { gap: var(--rowgap, 0rem) var(--colgap, 0rem)}

.row.left   { justify-content: flex-start }
.row.center { justify-content: center }
.row.right  { justify-content: flex-end }
.row.between{ justify-content: space-between }
.row.around { justify-content: space-around }
.row.evenly { justify-content: space-evenly }

.row.top        { align-items: flex-start }
.row.middle     { align-items: center }
.row.bottom     { align-items: flex-end }
.row.baseline   { align-items: baseline }
.row.stretch    { align-items: stretch }

.row.wrap.top       { align-content: flex-start }
.row.wrap.middle    { align-content: center }
.row.wrap.bottom    { align-content: flex-end }
.row.wrap.baseline  { align-content: baseline }
.row.wrap.stretch   { align-content: stretch }
.row.wrap.between   { align-content: space-between }
.row.wrap.around    { align-content: space-around }
.row.wrap.evenly    { align-content: space-evenly }

.col.left   { align-items: flex-start }
.col.center { align-items: center }
.col.right  { align-items: flex-end }

.col.top    { justify-content: flex-start }
.col.middle { justify-content: center }
.col.bottom { justify-content: flex-end }

.col-reverse.left   { align-items: flex-start }
.col-reverse.center { align-items: center }
.col-reverse.right  { align-items: flex-end }

.col-reverse.top    { justify-content: flex-start }
.col-reverse.middle { justify-content: center }
.col-reverse.bottom { justify-content: flex-end }

.align-self-start   { align-self: flex-start }
.align-self-end     { align-self: flex-end }
.align-self-center  { align-self: center }
.align-self-stretch { align-self: stretch }