@font-face {
  font-family: 'Muli-Light';
  font-weight: lighter;
  src: url('../fonts/Muli-Light.ttf');
}

@font-face {
  font-family: 'Muli-Italic';
  font-style: italic;
  src: url('../fonts/Muli-Italic.ttf');
}

@font-face {
  font-family: 'Muli-LightItalic';
  font-weight: lighter;
  font-style: italic;
  src: url('../fonts/Muli-LightItalic.ttf');
}

@font-face {
  font-family: 'Muli-Regular';
  src: url('../fonts/Muli-Regular.ttf');
}

@font-face {
  font-family: 'AbrilFatface-Regular';
  src: url('../fonts/AbrilFatface-Regular.ttf');
}

.header {
  width: 100vw;
  height: 100px;
  border-bottom: 1.5px solid var(--blackDisable);
}

.header > .title {
  margin: 10px auto 10px 0;
  border-left: 12px solid var(--ykkprimary);
  padding-left: 10px;
  font-weight: bold;
  font-size: xx-large;
  position: absolute;
  font-family: 'AbrilFatface-Regular', "Times New Roman", Times, serif;
}

.header > .logo {
  position: absolute;
  margin: 10px 0 10px 0;
  height: 60px;
  left: 50vw;
  transform: translateX(-50%);
}

.header > .logo > img {
  height: 100%;
}

.header > .actions {
  position: absolute;
  right: 0;
  margin: 10px 10px 10px auto;
  height: 60px;
  display: inline-flex;
}

#dropdownUser > span > img {
  height: 50px;
}

.user-settings {
  right: 0;
  display: block;
}

.user-settings .dropdown-toggle::after {
  transform: translateY(5px);
}

.flag-icon {
  font-size: 30px;
  width: 30px;
  padding: 10px 0 10px 0;
}

body {
  font-family: 'Muli-Light', Arial, Helvetica, sans-serif;
}

label {
  font-weight: bold;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100vw;
  z-index: 100;
}

.footer-text {
  position: absolute;
  left: 50px;
}

h5.title {
  font-size: 3em;
  margin-bottom: 20px;
  font-family: 'AbrilFatface-Regular', "Times New Roman", Times, serif;
}


:root {
  --ykkprimary: #f4850c;
  --blackDisable: rgba(0,0,0,0.2);
  --highlight: rgba(244,133,12,0.5);
}