* {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Work Sans', sans-serif;
  background: white;
}

body.fontLoaded {
  font-family: 'Work Sans', 'Saira SemiCondensed', sans-serif;
}

p {
  margin: 0;
}

#container {
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.footer {
  padding: 0 1rem 1rem;
  text-align: center;
  background-color: white;
}

/* 
 * New slider
 */

.carousel > ul {
  position: static !important;
  margin-top: 1rem !important;
}

.carousel > ul > li {
  margin: 0.5rem !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  transition: 0.2s all ease-in-out;
  border: 2px;
  background-color: #cdcdcc !important;
  position: relative;
  font-weight: 500;
}

.carousel > ul > li:hover {
  cursor: pointer;
}

html.no-touchevents .carousel > ul > li:not(.active):hover {
  background-color: black !important;
}

.carousel > ul > li.active {
  background: #00b7ff !important;
  border: 2px solid #00007c;
  position: relative;
}

.carousel > ul > li:not(:last-of-type)::before {
  content: '';

  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(0, -50%);
  width: 2rem;
  height: 1px;
  background: #cdcdcc;
}

.carousel > ul > li:not(:last-of-type).active::after {
  color: #00007c;
  position: absolute;

  top: 0;
  content: ' \2192';
  left: 100%;
  transform: translate(0, -3px);
}

.carousel > ul > li:only-child {
  display: none;
}

.carousel .slides {
  height: 100% !important;
}

.carousel .slides > div {
  display: flex !important;
  justify-content: space-between !important;
  padding: 0;
}

.carousel .slides > div > div {
  float: none !important;
  flex: 0 0 auto !important;
}

video:focus {
  outline: 2px solid black;
}

a:focus,
button:focus {
  outline: 0;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #c5003e;
}