@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url(/data/fonts/roboto-300.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(/data/fonts/roboto-500.ttf) format('truetype');
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
[onClick] {
  cursor: pointer;
}
html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14px;
}
a {
  color: #2274b4;
}
b {
  font-weight: 400;
}
h1,
h2,
h3 {
  font-weight: 400;
}
.language-label-missing {
  background: #f0f;
  color: #fff;
}
.main.name {
  font-size: 1.2em;
  margin-bottom: 8px;
  font-weight: 500;
  color: #2274b4;
}
#layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 64px 32px 1fr min-content;
  grid-template-areas: "header" "menu" "site" "footer";
}
#header {
  grid-area: header;
  z-index: 4000;
  position: relative;
  height: 100%;
  align-items: center;
  background: #f5f5f5;
}
#header .logo {
  display: grid;
  align-items: center;
  height: 100%;
  padding-left: 32px;
}
#header .language {
  display: grid;
  position: absolute;
  top: 0;
  right: 16px;
  align-items: center;
  height: 100%;
}
#footer {
  grid-area: footer;
  padding: 8px 16px;
  background-color: #515151;
  color: #999;
  font-weight: 400;
}
#menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, min-content));
  grid-gap: 32px;
  align-items: center;
  grid-area: menu;
  background-color: #2274b4;
  border-top: 2px solid #1b5d90;
  border-bottom: 2px solid #1b5d90;
  padding-left: 16px;
}
#menu .item {
  display: inline-block;
  color: #fff;
  white-space: nowrap;
}
#menu .item.selected {
  font-weight: 500;
}
#menu.offer-locked {
  border-top: 2px solid #902c2c;
  border-bottom: 2px solid #902c2c;
  background: #ce4c4c;
}
#menu.offer-locked #offer-locked-label {
  display: block;
}
#menu #offer-locked-label {
  display: none;
  position: absolute;
  left: calc(50% - 64px);
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}
.shadow-right {
  grid-area: shadow-right;
  z-index: 800;
  border-left: 1px solid #fff;
  box-shadow: 6px 8px 9px -4px rgba(0, 0, 0, 0.75);
}
.shadow-left {
  display: none;
  grid-area: shadow-left;
  z-index: 800;
  border-right: 1px solid #fff;
  box-shadow: -6px 8px 9px -4px rgba(0, 0, 0, 0.75);
}