/*
 * Variables
 */
 :root
  {
	  --ci-col1: #152b40;
	  --ci-col1-dark: #152b40;
	  --ci-col2: #f6c31c; /* f8f664 */
	  --ci-col2-dark: #f6c31c;
	  --ci-col3: #d9ebf4;
	  --ci-col3-dark: #3065b5;
  }






/*
 * Extra Heights
 */
.uk-height-xlarge {
	height: 600px;
}
.uk-height-2xlarge {
  height: 750px;
}
.uk-height-max-xlarge {
  max-height: 600px;
}
.uk-height-max-2xlarge {
  max-height: 750px;
}

/* Phone portrait and bigger */
@media (min-height: 640px) {
  /* Pixel */
  .uk-height-small\@s {
    height: 150px;
  }
  .uk-height-medium\@s {
    height: 300px;
  }
  .uk-width-large\@s {
    height: 450px;
  }
  .uk-width-xlarge\@s {
    height: 600px;
  }
  .uk-width-2xlarge\@s {
    height: 750px;
  }
}
/* Tablet portrait and bigger */
@media (min-height: 960px) {
  /* Pixel */
  .uk-height-small\@m {
    height: 150px;
  }
  .uk-height-medium\@m {
    height: 300px;
  }
  .uk-width-large\@m {
    height: 450px;
  }
  .uk-width-xlarge\@m {
    height: 600px;
  }
  .uk-width-2xlarge\@m {
    height: 750px;
  }
}
/* Desktop and bigger */
@media (min-height: 1200px) {
  /* Pixel */
  .uk-height-small\@l {
    height: 150px;
  }
  .uk-height-medium\@l {
    height: 300px;
  }
  .uk-width-large\@l {
    height: 450px;
  }
  .uk-width-xlarge\@l {
    height: 600px;
  }
  .uk-width-2xlarge\@l {
    height: 750px;
  }
}
/* Large screen and bigger */
@media (min-height: 1600px) {
  /* Pixel */
  .uk-height-small\@xl {
    height: 150px;
  }
  .uk-height-medium\@xl {
    height: 300px;
  }
  .uk-width-large\@xl {
    height: 450px;
  }
  .uk-width-xlarge\@xl {
    height: 600px;
  }
  .uk-width-2xlarge\@xl {
    height: 750px;
  }
}




/*
* Visible height
*/
@media (max-height: 639px) {
    .uk-visible-height\@s {
      display: none !important;
    }
  }
  @media (max-height: 959px) {
    .uk-visible-height\@m {
      display: none !important;
    }
  }
  @media (max-height: 1199px) {
    .uk-visible-height\@l {
      display: none !important;
    }
  }
  @media (max-height: 1599px) {
    .uk-visible-height\@xl {
      display: none !important;
    }
  }

  /* Phone landscape and bigger */
@media (min-height: 640px) {
    .uk-hidden-height\@s {
      display: none !important;
    }
  }
  /* Tablet landscape and bigger */
  @media (min-height: 960px) {
    .uk-hidden-height\@m {
      display: none !important;
    }
  }
  /* Desktop and bigger */
  @media (min-height: 1200px) {
    .uk-hidden-height\@l {
      display: none !important;
    }
  }
  /* Large screen and bigger */
  @media (min-height: 1600px) {
    .uk-hidden-height\@xl {
      display: none !important;
    }
  }
  
  
  .debugging {
    border: 1px dashed orange;

    background-image: linear-gradient(to bottom, rgba(240, 240, 240, .5) 0%, rgba(240, 240, 240, .5) 100%),
                      linear-gradient(to bottom, rgba(120, 240, 120, .2) 0%, rgba(120, 240, 120, .2) 100%);
    background-clip: content-box, padding-box;
  }
  
  


  .uk-border-rounded-small {
    border-radius: 2px;
  }
  

/* Selection Color */
  ::-moz-selection {
	color: white;
	background: var(--ci-col2);
  }
  
  ::selection {
	color: white;
	background: var(--ci-col2);
  }


/* Progress bar color */
  .uk-progress::-webkit-progress-value {
    background-color: var(--ci-col2);
    transition: width 0.6s ease;
  }
  .uk-progress::-moz-progress-bar {
    background-color: var(--ci-col2);
    /* 1 */
    transition: width 0.6s ease;
  }


.ci-active {
  color: var(--ci-col2) !important;
  transition: all .4s;
}
.ci-active:hover {
  color: var(--ci-col2-dark) !important;
}


/* List */
.ci-list-primary > ::before {
  color: var(--ci-col1) !important;
}
.ci-list-secondary > ::before {
  color: var(--ci-col2) !important;
}



/*
 * Overlay Secondary
 */
.ci-overlay-primary {
	/* background: rgba(42, 108, 102, 0.85); */
  background: rgba(27, 37, 80, 0.4);
}

.ci-overlay-default {
	/* background: rgba(253, 253, 253, 0.95); */
  background: rgba(199, 196, 214, 0.35);
}


/* Form Focus Color */
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  outline: none;
  background-color: #fff;
  color: #666;
  border-color: var(--ci-col1) !important;
}



  
  /* Text Color */
  .ci-color-primary
  {
	  color: var(--ci-col1) !important;
  }
  .ci-color-primary-dark
  {
	  color: var(--ci-col1-dark) !important;
  }
  .ci-color-secondary
  {
	  color: var(--ci-col2) !important;
  }
  .ci-color-secondary-dark
  {
	  color: var(--ci-col2-dark) !important;
  }
  .ci-color-accent
  {
	  color: var(--ci-col3) !important;
  }
  .ci-color-accent-dark
  {
	  color: var(--ci-col3-dark) !important;
  }
  
  /* Background Color */
  .ci-background-primary
  {
	  background-color: var(--ci-col1) !important;
  }
  .ci-background-primary-dark
  {
	  background-color: var(--ci-col1-dark) !important;
  }
  .ci-background-secondary
  {
	  background-color: var(--ci-col2) !important;
  }
  .ci-background-secondary-dark
  {
	  background-color: var(--ci-col2-dark) !important;
  }
  .ci-background-accent
  {
	  background-color: var(--ci-col3) !important;
  }
  .ci-background-accent-dark
  {
	  background-color: var(--ci-col3-dark) !important;
  }
  
  
  a,
  .uk-link
  {
	  color: var(--ci-col1);
  }
  a:hover,
  .uk-link:hover,
  .uk-link-toggle:hover .uk-link,
  .uk-link-toggle:focus .uk-link
  {
	  color: var(--ci-col1);
  }
  a.uk-link-heading:hover,
  .uk-link-heading a:hover,
  .uk-link-toggle:hover .uk-link-heading {
  color: var(--ci-col1);
  text-decoration: none;
}
  
  .uk-notification {
	  border: 1px solid #ddd;
	  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
  }
  
  /* ========================================================================
	 Component: Button
   ========================================================================== */
  /*
   * 1. Remove margins in Chrome, Safari and Opera.
   * 2. Remove borders for `button`.
   * 3. Address `overflow` set to `hidden` in IE.
   * 4. Correct `font` properties and `color` not being inherited for `button`.
   * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 6. Remove default style for `input type="submit"`in iOS.
   * 7. Style
   * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
   *    Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
   * 9. Align text if button has a width
   * 10. Required for `a`.
   */
   .ci-button {
	  /* 1 */
	  margin: 0;
	  /* 2 */
	  border: none;
	  /* 3 */
	  overflow: visible;
	  /* 4 */
	  font: inherit;
	  color: inherit;
	  /* 5 */
	  text-transform: none;
	  /* 6 */
	  -webkit-appearance: none;
	  border-radius: 0;
	  /* 7 */
	  display: inline-block;
	  box-sizing: border-box;
	  padding: 0 30px;
	  vertical-align: middle;
	  font-size: 0.875rem;
	  /* 8 */
	  line-height: 38px;
	  /* 9 */
	  text-align: center;
	  /* 10 */
	  text-decoration: none;
	  text-transform: uppercase;
	  transition: 0.1s ease-in-out;
	  transition-property: color, background-color, border-color, filter;
	}
	.ci-button:not(:disabled) {
	  cursor: pointer;
	}
	/*
	 * Remove the inner border and padding in Firefox.
	 */
	.ci-button::-moz-focus-inner {
	  border: 0;
	  padding: 0;
	}
	/* Hover */
	.ci-button:hover {
	  /* 9 */
	  text-decoration: none;
	}
	/* Focus */
	.ci-button:focus {
	  outline: none;
	}
  
  /*
   *
   */
   .uk-button-link {
	  /* 1 */
	  padding: 0;
	  line-height: 1.5;
	  background: none;
	  /* 2 */
	  color: var(--ci-col3-dark);
	}
	/* Hover + Focus */
	.uk-button-link:hover,
	.uk-button-link:focus {
	  color: var(--ci-col2);
	  text-decoration: underline;
	}
	/* Disabled */
	.uk-button-link:disabled {
	  color: #999;
	  text-decoration: none;
	}
  
  /*
   * Default
   */
  .ci-button-default {
	  background-color: transparent;
	  color: #333;
	  border: 1px solid #e5e5e5;
	}
	/* Hover + Focus */
	.ci-button-default:hover,
	.ci-button-default:focus {
	  background-color: transparent;
	  color: #333;
	  border-color: #b2b2b2;
	}
	/* OnClick + Active */
	.ci-button-default:active {
	  background-color: transparent;
	  color: #333;
	  border-color: #999999;
	}
  
  /*
   * Outline
   */
  .ci-button-outline {
	  background-color: transparent;
	  border-bottom: 1px solid currentColor !important;
	}
	/* Hover + Focus */
	.ci-button-outline:hover,
	.ci-button-outline:focus {
	  background-color: transparent;
	  border-bottom: 1px solid currentColor !important;
	}
	/* OnClick + Active */
	.ci-button-outline:active {
	  background-color: transparent;
	  border-bottom: 1px solid currentColor !important;
	}
  
  /*
   * Primary
   */
  .ci-button-primary {
	  background-color: var(--ci-col1);
	  color: #fff;
	  border: 1px solid transparent;
  }
  /* Hover + Focus */
  .ci-button-primary:hover:not(:disabled),
  .ci-button-primary:focus:not(:disabled) {
	  /* background-color: var(--ci-col1); */
	  filter: brightness(0.95);
	  color: #fff;
  }
  /* OnClick + Active */
  .ci-button-primary:active:not(:disabled) {
    /* background-color: var(--ci-col1); */
	  filter: brightness(0.9);
	  color: #fff;
  }

  /*
   * Primary Stroke
   */
   .ci-button-primary-stroke {
	background-color: transparent;
	color: var(--ci-col1);
	border: 1px solid var(--ci-col1);
  }
  /* Hover + Focus */
  .ci-button-primary-stroke:hover:not(:disabled),
  .ci-button-primary-stroke:focus:not(:disabled) {
	background-color: transparent;
	color: var(--ci-col1);
	filter: brightness(0.84);
  }
  /* OnClick + Active */
  .ci-button-primary-stroke:active:not(:disabled) {
	background-color: transparent;
	color: var(--ci-col1);
	filter: brightness(0.84);
  }

  /*
   * Primary dark
   */
   .ci-button-primary-dark {
	background-color: var(--ci-col1-dark);
	color: #fff;
	border: 1px solid transparent;
	}
	/* Hover + Focus */
	.ci-button-primary-dark:hover:not(:disabled),
	.ci-button-primary-dark:focus:not(:disabled) {
		/* background-color: var(--ci-col1-dark); */
		filter: brightness(0.92);
		color: #fff;
	}
	/* OnClick + Active */
	.ci-button-primary-dark:active:not(:disabled) {
		filter: brightness(0.84);
		color: #fff;
	}

	 /*
   * Primary dark Stroke
   */
   .ci-button-primary-dark-stroke {
	background-color: transparent;
	color: var(--ci-col1-dark);
	border: 1px solid var(--ci-col1-dark);
  }
  /* Hover + Focus */
  .ci-button-primary-dark-stroke:hover:not(:disabled),
  .ci-button-primary-dark-stroke:focus:not(:disabled) {
	background-color: transparent;
	color: var(--ci-col1-dark);
	filter: brightness(0.84);
  }
  /* OnClick + Active */
  .ci-button-primary-dark-stroke:active:not(:disabled) {
	background-color: transparent;
	color: var(--ci-col1-dark);
	filter: brightness(0.84);
  }



  
  /*
   * Secondary
   */
   .ci-button-secondary {
	  background-color: var(--ci-col2);
	  color: #fff;
	  border: 1px solid transparent;
  }
  /* Hover + Focus */
  .ci-button-secondary:hover:not(:disabled),
  .ci-button-secondary:focus:not(:disabled) {
	  /* background-color: var(--ci-col1-dark); */
	  filter: brightness(0.92);
	  color: #fff;
  }
  /* OnClick + Active */
  .ci-button-secondary:active:not(:disabled) {
	  filter: brightness(0.84);
	  color: #fff;
  }

    /*
   * Secondary Stroke
   */
   .ci-button-secondary-stroke {
	background-color: transparent;
	color: var(--ci-col2);
	border: 1px solid var(--ci-col2);
  }
  /* Hover + Focus */
  .ci-button-secondary-stroke:hover:not(:disabled),
  .ci-button-secondary-stroke:focus:not(:disabled) {
	background-color: transparent;
	color: var(--ci-col2);
	filter: brightness(0.92);
  }
  /* OnClick + Active */
  .ci-button-secondary-stroke:active:not(:disabled) {
	background-color: transparent;
	color: var(--ci-col2);
	filter: brightness(0.84);
  }
  
  /*
   * Secondary dark
   */
   .ci-button-secondary-dark {
	  background-color: var(--ci-col2-dark);
	  color: #222;
	  border: 1px solid transparent;
  }
  /* Hover + Focus */
  .ci-button-secondary-dark:hover:not(:disabled),
  .ci-button-secondary-dark:focus:not(:disabled) {
	  /* background-color: var(--ci-col1-dark); */
	  filter: brightness(0.92);
	  color: #222;
  }
  /* OnClick + Active */
  .ci-button-secondary-dark:active:not(:disabled) {
	  filter: brightness(0.84);
	  color: #222;
  }

   /*
   * Secondary dark Stroke
   */
   .ci-button-secondary-dark-stroke {
	background-color: transparent;
	color: var(--ci-col2-dark);
	border: 1px solid var(--ci-col2-dark);
  }
  /* Hover + Focus */
  .ci-button-secondary-dark-stroke:hover:not(:disabled),
  .ci-button-secondary-dark-stroke:focus:not(:disabled) {
	background-color: transparent;
	color: var(--ci-col2);
	filter: brightness(0.92);
  }
  /* OnClick + Active */
  .ci-button-secondary-dark-stroke:active:not(:disabled) {
	background-color: transparent;
	color: var(--ci-col2);
	filter: brightness(0.84);
  }
  
  
  /*
   * Accent
   */
   .ci-button-accent {
    background-color: var(--ci-col3);
    color: #222;
    border: 1px solid transparent;
}
/* Hover + Focus */
.ci-button-accent:hover:not(:disabled),
.ci-button-accent:focus:not(:disabled) {
    /* background-color: var(--ci-col1-dark); */
    filter: brightness(0.92);
    color: #222;
}
/* OnClick + Active */
.ci-button-accent:active:not(:disabled) {
    filter: brightness(0.84);
    color: #222;
}

  /*
 * Accent Stroke
 */
 .ci-button-accent-stroke {
  background-color: transparent;
  color: var(--ci-col3);
  border: 1px solid var(--ci-col3);
}
/* Hover + Focus */
.ci-button-accent-stroke:hover:not(:disabled),
.ci-button-accent-stroke:focus:not(:disabled) {
  background-color: transparent;
  color: var(--ci-col3);
  filter: brightness(0.92);
}
/* OnClick + Active */
.ci-button-accent-stroke:active:not(:disabled) {
  background-color: transparent;
  color: var(--ci-col3);
  filter: brightness(0.84);
}

/*
 * Accent dark
 */
 .ci-button-accent-dark {
    background-color: var(--ci-col3-dark);
    color: #fff;
    border: 1px solid transparent;
}
/* Hover + Focus */
.ci-button-accent-dark:hover:not(:disabled),
.ci-button-accent-dark:focus:not(:disabled) {
    /* background-color: var(--ci-col1-dark); */
    filter: brightness(0.92);
    color: #fff;
}
/* OnClick + Active */
.ci-button-accent-dark:active:not(:disabled) {
    filter: brightness(0.84);
    color: #fff;
}

 /*
 * Accent dark Stroke
 */
 .ci-button-accent-dark-stroke {
  background-color: transparent;
  color: var(--ci-col3-dark);
  border: 1px solid var(--ci-col3-dark);
}
/* Hover + Focus */
.ci-button-accent-dark-stroke:hover:not(:disabled),
.ci-button-accent-dark-stroke:focus:not(:disabled) {
  background-color: transparent;
  color: var(--ci-col3);
  filter: brightness(0.84);
}
/* OnClick + Active */
.ci-button-accent-dark-stroke:active:not(:disabled) {
  background-color: transparent;
  color: var(--ci-col3);
  filter: brightness(0.84);
}

/* Preserve button colors */
.uk-light .ci-button-primary:not(.uk-preserve-color),
.uk-light .ci-button-primary-dark:not(.uk-preserve-color),
.uk-light .ci-button-secondary:not(.uk-preserve-color),
.uk-light .ci-button-secondary-dark:not(.uk-preserve-color),
.uk-light .ci-button-accent:not(.uk-preserve-color),
.uk-light .ci-button-accent-dark:not(.uk-preserve-color) {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}

/*
 * Disabled
 * The same for all style modifiers
 */
 .ci-button-primary:disabled,
 .ci-button-primary-dark:disabled,
 .ci-button-secondary:disabled,
 .ci-button-secondary-dark:disabled,
 .ci-button-accent:disabled,
 .ci-button-accent-dark:disabled {
   background-color: #e5e5e5;
   color: #999;
   border-color: #e5e5e5;
 }

 .ci-button-primary-stroke:disabled,
 .ci-button-primary-dark-stroke:disabled,
 .ci-button-secondary-stroke:disabled,
 .ci-button-secondary-dark-stroke:disabled,
 .ci-button-accent-stroke:disabled,
 .ci-button-accent-dark-stroke:disabled {
   background-color: transparent;
   color: #999;
   border-color: #e5e5e5;
 }