@charset "UTF-8";
/* BREAKPOINTS */
/* RESET */
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%; }

img {
  max-width: 100%; }

body, html, ul, menu {
  padding: 0;
  margin: 0; }

/* LAYOUT */
html {
  font-size: 16px; }
  @media screen and (max-width: 1280px) {
    html {
      font-size: 14px; } }
  @media screen and (max-width: 768px) {
    html {
      font-size: 12px; } }

#page-header {
  margin: 1.6rem 0 0 0; }

#language-combo {
  position: absolute;
  right: 1rem;
  top: 0.3rem; }

main {
  padding-left: 0.25rem;
  padding-right: 0.25rem; }

#models-overview {
  padding: 1rem;
  columns: 20rem;
  column-gap: 3rem; }
  @media screen and (max-width: 550px) {
    #models-overview {
      padding: 0.25rem; } }

section {
  display: inline-block;
  width: 100%;
  margin-bottom: 1rem; }
  @media screen and (max-width: 550px) {
    section {
      width: initial; } }

footer {
  padding: 2rem 0; }
  footer .footer-container {
    display: table;
    max-width: 1400px;
    margin: 0 auto; }
  footer .footer-row {
    display: table-row; }
  footer .column {
    padding: 1rem;
    display: table-cell;
    width: 33%; }

.model-detail {
  display: block;
  width: 1400px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto; }
  .model-detail .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem; }
  .model-detail .column {
    padding: 0 1rem; }
    .model-detail .column img {
      display: block; }
  .model-detail #col-explanation {
    flex: 1 1 15rem; }
  .model-detail #col-form {
    flex: 0 0 22rem; }
  .model-detail #col-preview {
    flex: 1 1 15rem; }
  .model-detail #col-nqf {
    flex: 0 0 360px; }

#preview {
  margin: 0; }

/* TYPOGRAPHY */
html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; }

p {
  line-height: 1.5; }

h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0; }

#intro header > p {
  font-size: 1.5rem;
  margin-top: 0; }

h2 {
  font-weight: 200;
  margin-bottom: 0.5em;
  margin-top: 0;
  font-size: 1.5rem;
  letter-spacing: 0.01em; }

h3 {
  font-size: 1rem; }

#description b, .description b {
  font-weight: bold; }

/* STYLING */
#page-header {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  text-align: center;
  background-image: url("../images/pexels-pixabay-40799-v3.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid black; }
  #page-header h1 {
    font-size: 5rem;
    font-weight: 700; }
  #page-header #logo {
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.2em; }
  #page-header a {
    color: white;
    text-decoration: none; }

@media screen and (max-width: 768px) {
  #page-header h1 {
    font-size: 10vw; } }
#language-combo {
  z-index: 400; }
  #language-combo a span {
    position: relative;
    top: -2px; }

#toggle-language {
  display: none; }

#show-lang-menu {
  position: absolute;
  right: 0;
  width: 17em;
  text-align: right;
  line-height: 1rem; }
  #show-lang-menu svg {
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
    margin: 0 5px;
    padding: 0; }
    #show-lang-menu svg + svg {
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3); }

#language {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
  display: none;
  background-color: white;
  padding-top: 2em;
  width: 17em;
  margin-right: -1em;
  margin-top: -4px; }
  #toggle-language:checked ~ #language {
    display: block; }
  #language ul {
    list-style: none;
    padding: 1em 0; }
  #language li {
    padding: 0.25em 0; }
    #language li:hover {
      background-color: #ddd; }
  #language a {
    text-decoration: none; }
  #language svg {
    display: inline-block;
    text-align: center;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
    border-radius: 0.25rem;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
    margin-left: 1em; }
  #language .langcode {
    display: inline-block;
    width: 4em;
    color: #555;
    text-transform: uppercase;
    font-weight: bolder;
    text-align: center; }
  #language .nativelangname {
    display: inline-block;
    width: 8em;
    color: #333; }

#texterify {
  padding: 5px;
  font-size: 80%;
  color: #444;
  text-align: center; }
  #texterify p {
    margin: 0.25em 0; }

#logo-texterify {
  max-width: 200px; }

#menu-text-pages > ul {
  padding: 0;
  list-style: none inside none;
  display: table;
  width: 100%;
  max-width: 1200px;
  margin: 1em auto 0 auto; }
  #menu-text-pages > ul > li {
    position: relative;
    display: table-cell; }
    @media screen and (max-width: 550px) {
      #menu-text-pages > ul > li {
        display: inline-block; } }
    #menu-text-pages > ul > li ul {
      list-style: initial;
      padding-left: 2em; }
#menu-text-pages .text-menu-link {
  color: white;
  cursor: pointer;
  display: inline-block;
  padding-top: 1em;
  padding-bottom: 0.5em;
  font-weight: 400; }
  @media screen and (max-width: 550px) {
    #menu-text-pages .text-menu-link {
      line-height: 4rem;
      padding-left: 1rem;
      padding-right: 1rem; } }
  #menu-text-pages .text-menu-link.active {
    text-decoration: underline; }
#menu-text-pages .text-page {
  position: absolute;
  top: 3.5rem;
  z-index: 200;
  overflow: visible;
  padding: 2rem;
  text-align: left;
  width: 30em;
  max-width: calc(100vw - 4rem);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }
  #menu-text-pages .text-page:before, #menu-text-pages .text-page:after {
    content: "\0a";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid; }
    @media screen and (max-width: 550px) {
      #menu-text-pages .text-page:before, #menu-text-pages .text-page:after {
        display: none; } }
  #menu-text-pages .text-page:before {
    top: -1.1rem;
    left: 0.7rem;
    border-width: 0 1.1rem 1.1rem 1.1rem;
    border-color: transparent transparent white transparent; }
  #menu-text-pages .text-page:after {
    top: -0.75rem;
    left: 1rem;
    border-width: 0 0.8rem 0.8rem 0.8rem;
    border-color: transparent transparent whitesmoke transparent;
    margin-bottom: -1px; }
  #menu-text-pages .text-page.text-page-item-no-4:before, #menu-text-pages .text-page.text-page-item-no-5:before, #menu-text-pages .text-page.text-page-item-no-6:before {
    left: calc(50% - 1rem); }
  #menu-text-pages .text-page.text-page-item-no-4:after, #menu-text-pages .text-page.text-page-item-no-5:after, #menu-text-pages .text-page.text-page-item-no-6:after {
    left: calc(50% - 0.65rem); }
  #menu-text-pages .text-page.text-page-item-no-7:before, #menu-text-pages .text-page.text-page-item-no-8:before {
    left: initial;
    right: 0.7rem; }
  #menu-text-pages .text-page.text-page-item-no-7:after, #menu-text-pages .text-page.text-page-item-no-8:after {
    left: initial;
    right: 1rem; }

#logo {
  height: 3rem;
  vertical-align: middle; }

#icon-menu {
  text-align: center;
  font-size: 3rem; }
  #icon-menu > svg {
    display: none; }
  #icon-menu ul {
    display: block;
    padding: 0;
    list-style: none; }
  #icon-menu li {
    display: inline-block;
    padding: 0.1em 0.1em; }
  #icon-menu svg {
    width: 2rem;
    opacity: 0.65;
    font-size: 10px; }
  #icon-menu a {
    position: relative;
    transition: background-color 300ms;
    color: black;
    text-decoration: none;
    font-size: 2rem; }
    #icon-menu a:hover img {
      opacity: 1; }
    #icon-menu a:after {
      display: none;
      background-color: #f8f8f8;
      font-size: 1rem;
      content: attr(data-title);
      position: absolute;
      width: 7em;
      top: 3em;
      left: -2em;
      padding: 4px;
      z-index: 100;
      border-radius: 4px; }
    #icon-menu a:hover:after {
      display: block; }

#models-overview section, #col-nqf section, .model-detail section {
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
  background-color: white; }
  #models-overview section.nqf, #col-nqf section.nqf, .model-detail section.nqf {
    padding: 0;
    text-align: center;
    position: relative;
    outline: 1px solid #ccc;
    overflow: hidden;
    background-color: #f3f3f3; }
    #models-overview section.nqf:before, #col-nqf section.nqf:before, .model-detail section.nqf:before {
      display: block;
      content: "advertisement";
      font-size: 0.75rem; }
    #models-overview section.nqf iframe, #col-nqf section.nqf iframe, .model-detail section.nqf iframe {
      overflow: hidden;
      border: none;
      margin: 0 auto;
      width: 360px;
      height: 640px; }

#col-nqf .nqf {
  width: 360px;
  max-width: 100%; }
  #col-nqf .nqf iframe {
    max-width: 100%;
    border: none; }

main > .model-detail > .nqf {
  border: initial;
  background-color: initial;
  box-shadow: initial;
  outline: none; }
  main > .model-detail > .nqf:before {
    display: none; }
  main > .model-detail > .nqf iframe {
    width: 728px !important;
    height: 90px !important; }

#coffeee {
  padding: 1rem;
  background-color: #F0F0F0;
  font-size: 90%; }

.placeholder {
  display: block;
  padding: 0;
  background-color: gainsboro;
  background-size: contain;
  background-repeat: no-repeat; }

.to-detail {
  transition: filter 300ms;
  border-bottom: 1px solid transparent; }
  .to-detail img {
    width: 100%; }
  .to-detail:hover {
    filter: brightness(1.1) saturate(0.9);
    border-bottom-color: #1572B2; }

footer {
  background-color: #444;
  color: white; }
  footer a {
    color: #63BBE9; }
    footer a:hover {
      color: #1086BF; }
  footer .follow ul {
    display: block; }
  footer .follow li {
    display: inline-block; }
  footer .follow a span {
    display: none; }
  footer .follow svg {
    height: 2em; }

figure svg #page {
  fill: none;
  stroke: silver; }
figure svg .tiles {
  fill: none;
  stroke: #ccc; }
figure svg path {
  fill: none; }
figure svg .cut path {
  stroke-width: 4px;
  stroke: deeppink; }
figure svg .fold {
  stroke: deepskyblue; }
figure svg .valley {
  stroke: darkcyan; }
figure svg .construction {
  stroke: silver;
  stroke-dash-array: 5 5; }
figure svg .mountain {
  stroke: #666; }
figure svg .registration path {
  fill: black;
  stroke: none; }

#col-gallery {
  padding-left: 0; }
  #col-gallery a {
    text-decoration: none; }
  #col-gallery img {
    display: inline-block;
    max-width: 90vw;
    vertical-align: middle;
    margin-right: 1rem;
    box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.1); }
  #col-gallery a:hover img {
    box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.2); }

/* FORMS */
fieldset {
  border: none;
  padding: 0;
  margin-bottom: 1rem; }

legend {
  font-weight: 600; }

.form-row {
  margin: 1em 0;
  position: relative; }
  .model-detail .form-row {
    width: 20em;
    max-width: 100%; }
  .form-row > label {
    display: inline-block;
    width: 14em; }
  .form-row.type-select label {
    width: 8em; }
  #models-overview .form-row > label {
    width: 10em; }
  .form-row.type-angle:after {
    content: "º";
    margin-left: 0.25em; }
  .form-row.type-percentage:after {
    content: "%";
    margin-left: 0.25em; }

input {
  width: 3em;
  text-align: center;
  display: inline-block; }
  input:invalid {
    border: 2px solid crimson;
    background-color: #f6c4ce; }

.radio-buttons-wrapper {
  display: inline-block;
  width: 20em;
  vertical-align: top;
  max-width: 100%; }

.radio-button {
  display: block; }
  .radio-button input {
    width: initial; }
    .radio-button input:disabled + label {
      color: #ccc; }

#btn-submit:disabled {
  background-color: #bbbbbb; }

label {
  position: relative;
  display: inline-block; }
  label[data-title]::before {
    display: none;
    position: absolute;
    background: #F0F0F0;
    border-radius: .4rem;
    content: attr(data-title);
    width: 14rem;
    bottom: 1.5rem;
    color: #333333;
    padding: 0.4rem;
    left: 1rem;
    font-size: 0.9rem;
    font-weight: bolder;
    filter: drop-shadow(0px 0px 2px #808080); }
  label[data-title]::after {
    display: none;
    content: '';
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    width: 0;
    height: 0;
    border: 1rem solid transparent;
    border-top-color: #F0F0F0;
    border-bottom: 0;
    margin-left: -1rem;
    margin-bottom: -1rem; }
  label[data-title]:hover::before, label[data-title]:hover::after {
    display: block; }

button {
  border: 0;
  border-radius: 0.25em;
  background-color: #1086BF;
  color: white;
  font-weight: 600;
  display: block;
  margin: 0 auto;
  padding: 0.5em 1em;
  font-size: 120%; }
  button:hover {
    background-color: #0c6590; }

select {
  width: 11em; }

form a {
  color: #1086Bf;
  font-weight: 600;
  margin-bottom: 0.5em; }

/* SHARE */
#share {
  position: absolute;
  left: 0px;
  top: 0rem;
  padding-left: 10px; }
  @media screen and (max-width: 550px) {
    #share input + #social-share-wrapper {
      display: none; } }
  @media screen and (max-width: 550px) {
    #share #social-share-wrapper {
      background-color: rgba(0, 0, 0, 0.8);
      position: absolute;
      left: 0;
      width: 100vw;
      padding: 1rem; }
      #share #social-share-wrapper a {
        width: 3rem;
        padding: 1rem; } }
  #share label {
    display: none; }
    @media screen and (max-width: 550px) {
      #share label {
        display: inline-block; } }
  #share input {
    display: none;
    width: 2rem; }
    #share input:checked + #social-share-wrapper {
      display: inline-block; }
  #share a, #share label {
    padding: 4px;
    width: 1.2rem;
    max-height: 1.2rem;
    text-decoration: none;
    color: #888;
    position: relative;
    font-size: 12px; }
  #share a {
    display: inline-block; }
    @media screen and (max-width: 550px) {
      #share a {
        color: white; } }
    #share a:hover.vk {
      color: #4a76a8; }
    #share a:hover.odnoklassniki {
      color: #F4731C; }
    #share a:hover.weibo {
      color: #e6162d; }
    #share a:hover.qq {
      color: #FECE00; }
    #share a:hover.hatena {
      color: #00a4de; }
    #share a:hover.digg {
      color: #000000; }
    #share a:hover.email {
      color: teal; }
    #share a:hover.facebook {
      color: #3b5998; }
    #share a:hover.linkedin {
      color: #007bb5; }
    #share a:hover.pinterest {
      color: #bd081c; }
    #share a:hover.reddit {
      color: #ff5700; }
    #share a:hover.twitter {
      color: #1da1f2; }
    #share a:hover.whatsapp {
      color: #25D366; }
    #share a:after {
      content: attr(data-title);
      display: none;
      position: absolute;
      height: 2em;
      line-height: 2em;
      padding: 0 1em;
      font-weight: 400;
      color: black;
      top: 3em;
      background-color: rgba(255, 255, 255, 0.85);
      word-break: keep-all; }
    #share a:hover:after {
      display: initial; }
  #share svg {
    width: 100%; }

/* TEXT MENU */
.text-page {
  background-color: whitesmoke;
  border: 3px solid white; }
  @media screen and (max-width: 550px) {
    .text-page {
      background-color: rgba(245, 245, 245, 0.93); } }

#menu-text-pages .text-page-content {
  font-size: 1rem;
  margin: 0 auto;
  color: black;
  font-weight: 300; }
  #menu-text-pages .text-page-content h2, #menu-text-pages .text-page-content h3 {
    font-weight: bold;
    color: #333; }
  #menu-text-pages .text-page-content h3 {
    font-size: 1.125rem; }
  #menu-text-pages .text-page-content a {
    color: #1086BF;
    border-bottom: 1px dotted #888; }
  #menu-text-pages .text-page-content blockquote {
    border: 1px solid grey;
    padding: 0.5em;
    margin: 0; }
  #menu-text-pages .text-page-content ol {
    list-style-position: outside;
    padding-left: 1em;
    line-height: 1.35; }
  #menu-text-pages .text-page-content li {
    margin-bottom: 1em; }
  #menu-text-pages .text-page-content label {
    display: block; }
  #menu-text-pages .text-page-content strong {
    font-weight: 600; }

#page-contact label {
  display: block;
  padding: initial; }
#page-contact input, #page-contact textarea {
  display: block;
  width: 100%;
  margin-bottom: 1em;
  text-align: left;
  background-color: #dedede;
  color: #1572B2;
  font-weight: 600;
  padding: 0.25em; }
#page-contact input {
  border: none; }
#page-contact textarea {
  height: 15em;
  border: none; }

#page-help h3 {
  margin-bottom: 0; }
  #page-help h3 + p {
    margin-top: 0; }

#page-follow-me ul {
  display: flex;
  padding: 0 !important;
  list-style: none inside none;
  justify-content: space-between; }
#page-follow-me li {
  display: block;
  padding: 0;
  margin: 0;
  text-align: center; }
#page-follow-me a {
  border: none !important;
  margin-bottom: 1em; }
  #page-follow-me a:hover svg {
    color: #1572B2 !important; }
#page-follow-me svg {
  display: inline-block; }
#page-follow-me span {
  display: block;
  margin-bottom: 0.5em; }

/* TEXT(-ONLY) PAGES */
.proze {
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
  padding: 2em;
  border-radius: 0.25em;
  font-size: 1.125rem;
  width: 40em;
  margin: 0 auto 2rem auto;
  max-width: 95%; }
  .proze ul {
    padding-left: 2em; }
  .proze blockquote {
    border: 1px solid black;
    margin: 0;
    padding: 1rem; }

.pinterest-anchor {
  margin-left: 10px;
  margin-top: 10px;
  position: absolute;
  z-index: 42;
  width: 40px;
  height: 40px; }

.pinterest-hidden {
  filter: saturate(0) brightness(3);
  opacity: 0.5; }

.pinterest-anchor:hover {
  filter: saturate(1) brightness(1);
  opacity: 1; }

.pinterest-logo {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bd081c'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  height: 100%;
  width: 100%; }

#wait {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: center; }

#done small {
  display: block;
  font-size: 0.8rem; }

#dialogue {
  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
  width: 728px;
  padding: 1rem;
  background-color: white;
  border-radius: 0.5rem; }

#dialogue-text {
  font-weight: 300;
  padding-bottom: 1.5rem;
  position: relative;
  padding-top: 1rem;
  font-size: 1.5rem; }
  #dialogue-text p {
    text-align: center;
    color: #555; }

#dialogue-close {
  position: absolute;
  right: 0;
  cursor: pointer;
  top: -0.5em; }

/*# sourceMappingURL=style.css.map */