/* prettier-ignore */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: 'Inter', sans-serif;
}
/* HTML5 display-role reset for older browsers */
/* prettier-ignore */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  min-height: 100%;
  line-height: 1;
  font-family: 'Inter', sans-serif !important;
}
/* prettier-ignore */
ol, ul {
  list-style: none;
}

.ck ul {
  list-style: disc;
  margin-left: 15px;
}

.ck ol {
  list-style-type: decimal;
  margin-left: 15px;
}

/* prettier-ignore */
blockquote, q {
  quotes: none;
}
/* prettier-ignore */
:not(.ck) blockquote:before, :not(.ck) blockquote:after,
:not(.ck) q:before, :not(.ck) q:after {
  content: '';
  content: none;
}

:not(.ck) table {
  border-collapse: collapse;
  border-spacing: 0;
}

html,
body {
  height: 100%;
}

/*------------------------------------*\
  VARIABLES
\*------------------------------------*/

:root {
  /* Colors */

  --primary900: hsl(229, 95%, 25%);
  --primary800: hsl(223, 82%, 35%);
  --primary700: hsl(221, 71%, 48%);
  --primary600: hsl(220, 82%, 57%);
  --primary500: hsl(219, 90%, 67%);
  --primary400: hsl(218, 92%, 77%);
  --primary300: hsl(217, 95%, 83%);
  --primary200: hsl(216, 100%, 93%);
  --primary100: hsl(216, 100%, 97%);

  --blue900: hsl(229, 95%, 25%);
  --blue800: hsl(223, 82%, 35%);
  --blue700: hsl(221, 71%, 48%);
  --blue600: rgb(55, 115, 235);
  --blue500: hsl(219, 90%, 67%);
  --blue400: hsl(218, 92%, 77%);
  --blue300: hsl(217, 95%, 83%);
  --blue200: hsl(216, 100%, 93%);
  --blue100: hsl(216, 100%, 97%);

  --cgrey900: hsl(229, 22%, 10%);
  --cgrey800: hsl(210, 16%, 20%);
  --cgrey700: hsl(224, 12%, 30%);
  --cgrey600: hsl(221, 11%, 44%);
  --cgrey500: hsl(215, 8%, 58%);
  --cgrey400: hsl(218, 11%, 71%);
  --cgrey300: hsl(210, 15%, 84%);
  --cgrey200: hsl(214, 17%, 92%);
  --cgrey100: rgb(243, 245, 247);

  --green900: hsl(132, 89%, 14%);
  --green800: hsl(136, 83%, 21%);
  --green700: hsl(137, 78%, 28%);
  --green600: hsl(138, 74%, 36%);
  --green500: hsl(139, 71%, 44%);
  --green400: hsl(141, 72%, 63%);
  --green300: hsl(142, 80%, 76%);
  --green200: hsl(143, 87%, 88%);
  --green100: hsl(144, 100%, 96%);

  --aqua900: hsl(198, 88%, 23%);
  --aqua800: hsl(195, 85%, 29%);
  --aqua700: hsl(191, 81%, 35%);
  --aqua600: hsl(188, 74%, 45%);
  --aqua500: hsl(184, 70%, 60%);
  --aqua400: hsl(181, 74%, 67%);
  --aqua300: hsl(178, 81%, 78%);
  --aqua200: hsl(175, 90%, 88%);
  --aqua100: hsl(171, 100%, 96%);

  --violet900: hsl(274, 83%, 25%);
  --violet800: hsl(277, 72%, 35%);
  --violet700: hsl(280, 71%, 45%);
  --violet600: hsl(284, 64%, 57%);
  --violet500: hsl(287, 63%, 66%);
  --violet400: hsl(290, 70%, 78%);
  --violet300: hsl(293, 82%, 89%);
  --violet200: hsl(298, 92%, 95%);
  --violet100: hsl(300, 100%, 98%);

  --ocra900: hsl(19, 69%, 28%);
  --ocra800: hsl(25, 71%, 34%);
  --ocra700: hsl(28, 73%, 48%);
  --ocra600: hsl(35, 79%, 53%);
  --ocra500: hsl(38, 89%, 62%);
  --ocra400: hsl(43, 91%, 71%);
  --ocra300: hsl(46, 91%, 79%);
  --ocra200: hsl(49, 92%, 86%);
  --ocra100: hsl(51, 91%, 96%);

  --red900: hsl(0, 63%, 30%);
  --red800: hsl(0, 66%, 38%);
  --red700: hsl(0, 68%, 47%);
  --red600: hsl(0, 77%, 56%);
  --red500: hsl(0, 87%, 65%);
  --red400: hsl(0, 90%, 72%);
  --red300: hsl(0, 94%, 81%);
  --red200: hsl(0, 96%, 90%);
  --red100: hsl(0, 100%, 97%);

  --trans-white: rgba(255, 255, 255, 0.8);

  /* Space & sizing system */
  --s-3: 4px;
  --s-2: 8px;
  --s-1: 12px;
  --s-0: 0px;
  --s1: 16px;
  --s2: 24px;
  --s3: 32px;
  --s4: 48px;
  --s5: 64px;
  --s6: 96px;
  --s7: 128px;
  --s8: 192px;
  --s9: 256px;
  --s10: 384px;
  --s11: 512px;
  --s12: 640px;
  --s13: 768px;

  --n-3: -4px;
  --n-2: -8px;
  --n-1: -12px;
  --n1: -16px;
  --n2: -24px;
  --n3: -32px;
  --n4: -48px;
  --n5: -64px;
  --n6: -96px;
  --n7: -128px;
  --n8: -192px;
  --n9: -256px;
  --n10: -384px;
  --n11: -512px;
  --n12: -640px;
  --n13: -768px;

  /* Type scale */
  --t-2: 12px;
  --t-1: 14px;
  --t1: 16px;
  --t2: 18px;
  --t3: 20px;
  --t4: 24px;
  --t5: 30px;
  --t6: 36px;
  --t7: 48px;
  --t8: 60px;
  --t9: 72px;

  /* Line height */
  --lh-2: 21px;
  --lh-1: 23px;
  --lh1: 26px;
  --lh2: 28px;
  --lh3: 30px;
  --lh4: 35px;
  --lh5: 42px;
  --lh6: 46px;
  --lh7: 54px;
  --lh8: 66px;
  --lh9: 72px;

  /* Letter spacing */
  --ls-1: 0.7px;
  --ls1: 1.1px;
  --ls2: 1.5px;

  /* Shadows */

  --sh-1a: 0 1px 2px hsla(0, 0%, 0%, 0.05);
  --sh-1b: 0 1px 1px hsla(0, 0%, 0%, 0.2);
  --sh-1: var(--sh0a), var(--sh0b);
  --sh1a: 0 1px 3px hsla(0, 0%, 0%, 0.096);
  --sh1b: 0 1px 2px hsla(0, 0%, 0%, 0.192);
  --sh1: var(--sh1a), var(--sh1b);
  --sh2a: 0 3px 6px hsla(0, 0%, 0%, 0.12);
  --sh2b: 0 2px 4px hsla(0, 0%, 0%, 0.096);
  --sh2: var(--sh2a), var(--sh2b);
  --sh3a: 0 10px 20px hsla(0, 0%, 0%, 0.12);
  --sh3b: 0 3px 6px hsla(0, 0%, 0%, 0.08);
  --sh3: var(--sh3a), var(--sh3b);
  --sh4a: 0 15px 25px hsla(0, 0%, 0%, 0.12);
  --sh4b: 0 5px 10px hsla(0, 0%, 0%, 0.04);
  --sh4: var(--sh4a), var(--sh4b);
  --sh5: 0 20px 40px hsla(0, 0%, 0%, 0.2);

  /* Outline */
  --outline: 3px solid var(--primary500);
  --outline-offset: 5px;

  /* Animation duration */
  --tran-1: 100ms;
  --tran1: 250ms;
  --tran2: 500ms;
  --tran3: 750ms;

  /* Bottom border */
  --bottom-border: inset 0 -4px 0px -2px var(--primary700);
}

/*------------------------------------*\
  MAIN
\*------------------------------------*/

main {
  min-height: 100vh;
}

/*------------------------------------*\
  FORM
\*------------------------------------*/

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: var(--cgrey100) !important;
  opacity: 0.7 !important;
}

/*------------------------------------*\
  FONTS
\*------------------------------------*/

@font-face {
  font-family: 'Basier Circle';
  src: url('../fonts/basier-circle-regular.woff2') format('woff2'),
    url('../fonts/basier-circle-regular.woff') format('woff'),
    url('../fonts/basier-circle-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Basier Circle';
  src: url('../fonts/basier-circle-regular-italic.ttf') format('woff2'),
    url('../fonts/basier-circle-regular-italic.ttf') format('woff'),
    url('../fonts/basier-circle-regular-italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Basier Circle';
  src: url('../fonts/basier-circle-bold.ttf') format('woff2'),
    url('../fonts/basier-circle-bold.ttf') format('woff'),
    url('../fonts/basier-circle-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Basier Circle';
  src: url('../fonts/basier-circle-bold-italic.ttf') format('woff2'),
    url('../fonts/basier-circle-bold-italic.ttf') format('woff'),
    url('../fonts/basier-circle-bold-italic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

/*------------------------------------*\
  ANIMATIONS
\*------------------------------------*/

@keyframes leftBorderHover {
  from {
    box-shadow: inherit;
  }
  to {
    box-shadow: var(--left-border);
  }
}

@keyframes bottomBorderHover {
  from {
    box-shadow: inherit;
  }
  to {
    box-shadow: var(--bottom-border);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--primary100);
  }
  70% {
    box-shadow: 0 0 0 0.5rem rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes startle {
  25% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  75% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/*------------------------------------*\
  BASE
\*------------------------------------*/

body {
  background: var(--cgrey100);
  color: var(--cgrey900);
  font-family: 'Basier Circle', sans-serif;
  font-size: var(--t1);
}

body.nb--fixed {
  overflow: hidden;
}

.nb-body-with-background {
  background: var(--cgrey100);
}

/*------------------------------------*\
  LINKS
\*------------------------------------*/

body a {
  color: var(--primary700);
  cursor: pointer;
  text-decoration: none;
}

body a:hover {
  color: inherit;
}

body a:focus {
  color: var(--primary600);
}

button a {
  color: inherit;
}

button a:hover {
  text-decoration: none;
}

h1 a,
h2 a,
h3 a {
  color: inherit;
}

.nb-a-with-arrow:after {
  content: '';
  display: inline-block;
  vertical-align: text-bottom;
  transform: translateY(var(--n-3));
  height: 0.7em;
  width: 0.7em;
  margin-left: var(--s-3);
  background: url(../images/right-arrow-blue.svg) center center no-repeat;
}

.nb--alumni .nb-a-with-arrow:after {
  background-image: url(../images/right-arrow-red.svg);
}

/*------------------------------------*\
  FORM
\*------------------------------------*/

input {
  border: 1px solid;

  background: #fff;

  font-family: inherit;
  font-size: inherit;
}

select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--cgrey700);
}

input[type='submit'] {
  cursor: pointer;
}

input[type='number'] {
  outline: none;

  transition: box-shadow 0.2s;
}

input[type='number']:focus {
  box-shadow: 0 0 0 2px var(--primary200);
}

input[type='range'] {
  height: 4px;

  background-color: var(--cgrey100);

  border-radius: 4px;
  border: none;
  outline: none;

  -webkit-appearance: none;
  appearance: none;
}

input[type='range']::-webkit-slider-thumb {
  position: relative;
  width: 1rem;
  height: 1rem;
  box-sizing: border-box;

  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 10px 0 var(--cgrey200);

  background: var(--primary700);

  cursor: pointer;
  -webkit-appearance: none;
}

input[type='range']::-moz-range-thumb {
  position: relative;
  width: 1rem;
  height: 1rem;
  box-sizing: border-box;

  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 10px 0 var(--cgrey200);

  background: var(--primary700);

  cursor: pointer;
  -webkit-appearance: none;
}

/*------------------------------------*\
  OTHER
\*------------------------------------*/

button {
  border: 1px solid;
  outline: 0;

  font-size: 1em;
  font-family: inherit;

  cursor: pointer;
}

ul {
  list-style-type: none;
}

img {
  user-select: none;
  -webkit-user-drag: none;
}

sup {
  font-size: x-small;
  vertical-align: super;
}