@font-face {
    font-family: 'Frutiger Neue LT BD';
    src: url('../fonts/FrutigerNeueLT-Bd.eot');
    src: url('../fonts/FrutigerNeueLT-Bd.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FrutigerNeueLT-Bd.woff2') format('woff2'),
        url('../fonts/FrutigerNeueLT-Bd.woff') format('woff'),
        url('../fonts/FrutigerNeueLT-Bd.ttf') format('truetype'),
        url('../fonts/FrutigerNeueLT-Bd.svg#FrutigerNeueLT-Bd') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Frutiger Neue LT';
    src: url('../fonts/FrutigerNeueLT.eot');
    src: url('../fonts/FrutigerNeueLT.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FrutigerNeueLT.woff2') format('woff2'),
        url('../fonts/FrutigerNeueLT.woff') format('woff'),
        url('../fonts/FrutigerNeueLT.ttf') format('truetype'),
        url('../fonts/FrutigerNeueLT.svg#FrutigerNeueLT') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
  background-image: url("../images/bg-striped.png");
  background-repeat: repeat;
  font-family: 'Frutiger Neue LT', sans-serif;
}

hr {
  position: relative;
  width: 100%;
  border-top: 1px solid #BBB;
}

p {
  margin-bottom: 0;
}

span {
  margin-left: 5px;
  color: #007BFF;
}

h1, h2, h3 {
  font-family: 'Futiger Neue LT BD', sans-serif;
}

.language-container {
  float: right;
  padding: 4%;
}

.language-link {
  font-size: 1.5rem;
}

.container-main {
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding: 0;
  margin-top: 0;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.6);
}

.container {
  padding: 10% 4%;
}

.title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 5%;
}

.feature-image {
  position: relative;
  width: 100%;
  height: 100%;
}

.viewer-3d {
  position: relative;
  width: 100%;
  height: 100%;
}

.task-list {
  padding-left: 1.5rem;
}

.arbutton {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.container-button {
  margin-top: 3%;
}

.container-instructions {
  padding-top: 5%;
  margin: 3% 0;
}

.container-footer {
  margin-top: 3%;
}

.container-footer h3 {
  font-size: 1.25rem;
}

.qr-code {
  display: block;
  margin: auto;
  margin-top: 20%;
  width: 95%;
}

@media (max-width: 990px) {
  .container-main {
    width: 100%;
  }

  .container-description {
    margin-top: 5%;
  }

  .container-button {
    margin-top: 0;
  }

  .viewer-3d {
    height: 400px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .container-main {
    width: 992px;
  }
}

@media (min-width: 1200px) {
  .container-main {
    width: 1170px;
  }
}