@charset "UTF-8";

:root {
  --color-white: #ffffff;
  --color-primary: #1C0D82;
  --color-primary-light: #D0CCE8;
  --color-primary-light-2: #f6f4fa;
  --color-primary-dark: #0E0741;
  --color-secondary: #5BE798;
  --color-secondary-light: #98F5C1;
  --color-secondary-light-2: #C4FBDC;
  --color-secondary-dark: #296278;
  --color-tertiary: #FFDE00;
  --color-tertiary-light: #FFF9AA;
  --color-tertiary-dark: #DFC200;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
}

body {
  background-color: var(--color-white);
  color: rgba(73, 82, 87, 1);
  font-family: Cabin, Arial, sans-serif;
  font-size: .8rem; /* 100 * 20 * 16px */
  font-weight: var(--font-weight-normal);
  line-height: 1.625;
  color: var(--color-primary-dark);
  -webkit-font-smoothing: antialiased;
}

/* ===============================================================
 Headings
================================================================*/


h1, h2, h3, h4, h5, h6 {
  font-family: 'Cabin', Arial, sans-serif;
  font-weight: var(--font-weight-normal);
  margin-top: 0;
}

h1 {
  font-size: 2.75rem; /*55px*/
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.page__title {
  margin: 0;
  text-align: center;
  font-size: 1.75rem; /*35px*/
  line-height: 1.01;
  font-weight: var(--font-weight-bold);
}

.header__bottom .page__title {
  padding: 0 1.5rem; /* leave space for the contact icons */
}

@media (min-width: 481px) {
  .header__bottom .page__title {
    padding: 0;
  }
}

@media (min-width: 768px) {
  .page__title {
    font-size: 2.25rem; /*45px*/
  }
}

@media (min-width: 60em) {
  .page__title {
    font-size: 2.75rem; /*55px*/
  }
}

h2,
.md-typeset h1,
.page__subtitle {
  font-size: 1.5rem; /*30px*/
  line-height: 1.2;
  font-weight: var(--font-weight-normal);
  color: var(--color-primary);
}

.md-typeset h1,
.page__subtitle {
  margin-bottom: .7rem;
}

/* since our default H2 is basically the same styling as H1 inside the articles
   we need to make some changes and make the H2 in text look somewhat
   in the middle of the default H2/H1 and the H3
*/
.md-typeset h2 {
  font-size: 1.2rem; /*25px*/
  line-height: 1.4;
  margin: 2rem 0 .8rem 0;
  /* font-weight: var(--font-weight-bold); */
}

h3,
.page__subtitle--content,
.md-typeset h3 {
  font-size: 1rem; /*20px*/
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}

.md-typeset h3 {
  color: var(--color-secondary-dark);
}

/* a subtitle on an article which also has a H1 */
.page__subtitle--content {
  font-weight: var(--font-weight-normal);
}

h4 {
  font-size: .9rem; /*18*/
  font-weight: var(--font-weight-bold);
}

.md-typeset h4 {
  font-size: .8rem;
  font-weight: var(--font-weight-bold);
}

/* ===============================================================
 Text tags
================================================================*/

a,
a:visited {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

a:hover,
a:active,
a:focus {
  color: var(--color-primary-light);
  text-decoration: none;
}

p:last-child {
  margin-bottom: 0;
}

/* ===============================================================
 Tables
================================================================*/

.table {
  width: 100%;
  table-layout: fixed;
}

.table th,
.table th a {
  color: #78868e;
  font-size: 13px;
  font-weight: 300;
  text-align: left;
}

[dir="rtl"] .table th, [dir="rtl"]
.table th a {
  text-align: right;
}

.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}


.table td {
  display: block;
}

/* ===============================================================
 Custom Icons
================================================================*/

.icon {
  display: inline-block;
  background: url('../../assets/images/sprite-icons.svg') no-repeat;
  background-size: 4rem 3.6rem; /* w x h: 80 72*/
}


/* ===============================================================
 Helper classes
================================================================*/

.hidden {
  position: absolute !important;
  display: block !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden !important;
  height: 1rem !important;
  width: 1rem !important;
  word-wrap: normal !important;
}
.hidden.focusable:focus {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 10010 !important;
  display: block !important;
  clip: auto !important;
  overflow: visible !important;
  height: auto !important;
  width: auto !important;
  background: #fff;
}

/* ===============================================================
 content typeset
================================================================*/

.md-typeset {
  line-height: 1.625; /*26px if font size is 16px*/
}

/* links */

.md-typeset a,
.md-typeset a:visited {
  color: var(--color-secondary-dark);
}

.md-typeset a:hover,
.md-typeset a:active {
  color: var(--color-primary-light);
}

/* code */

.md-typeset code {
  font-size: .7rem;
  background-color: var(--color-primary-light-2);
}

.md-typeset pre code {
  font-size: .65rem;
}

/* lists */

.md-content li > ul {
  list-style: circle;
}

/* Admonitions */

.md-typeset .admonition,
.md-typeset details {
  font-size: .8rem;
}

.md-typeset .admonition-title:before,
.md-typeset summary:before {
  margin-top: 1px; /* realign icons, after font size change */
}


/* ===============================================================
 Text styling
================================================================*/

.highlight {
  font-family: monospace;
  font-weight: 100;
  font-size: 1.1em;
  letter-spacing: 1px;
}

.page-header-description .highlight {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  padding: 0 2px;
  border-radius: 3px;
  color: var(--color-primary-dark);
  font-weight: bold;
  background-color: var(--color-secondary-light-2);
}


/*****************************************************************
 Tablet & bigger 
*****************************************************************/

@media (min-width: 768px) {

  /* Tables */

  .table {
    table-layout: auto;
  }

  .table tr {
    display: table-row;
  }

  .table td {
    display: table-cell;
  }

  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

/*****************************************************************
 Desktop & bigger 
*****************************************************************/

/* 945px */
@media screen and (min-width: 60em) {

  /* tables */

  .table td, .table th {
    padding: 20px 30px;
  }

}

/*****************************************************************
 xl
*****************************************************************/

/* 1585px */
@media (min-width: 100em) {

  html {
    font-size: 125%;
  }

}