/* =============================================
    Audi Iframe layout style
================================================*/

/* Hide mobile container */
.container__mobile {
  display: none;
}

/* Fonts */
@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-Italic.woff2') format('woff2'),
    url('../fonts/Cupra-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-ExtraLight.woff2') format('woff2'),
    url('../fonts/Cupra-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-Regular.woff2') format('woff2'),
    url('../fonts/Cupra-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-MediumItalic.woff2') format('woff2'),
    url('../fonts/Cupra-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-ExtraBoldItalic.woff2') format('woff2'),
    url('../fonts/Cupra-ExtraBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-LightItalic.woff2') format('woff2'),
    url('../fonts/Cupra-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra Book';
  src:
    url('../fonts/Cupra-Book.woff2') format('woff2'),
    url('../fonts/Cupra-Book.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-BoldItalic.woff2') format('woff2'),
    url('../fonts/Cupra-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra Book';
  src:
    url('../fonts/Cupra-BookItalic.woff2') format('woff2'),
    url('../fonts/Cupra-BookItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-Light.woff2') format('woff2'),
    url('../fonts/Cupra-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-Medium.woff2') format('woff2'),
    url('../fonts/Cupra-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-ExtraLightItalic.woff2') format('woff2'),
    url('../fonts/Cupra-ExtraLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-Bold.woff2') format('woff2'),
    url('../fonts/Cupra-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cupra';
  src:
    url('../fonts/Cupra-ExtraBold.woff2') format('woff2'),
    url('../fonts/Cupra-ExtraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

html {
  background: #f5f5f5;
  padding: 20px;
}

h1 {
  font-family: 'Cupra', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.75rem;
  margin: 0;
  margin: 30px 0 0;
  color: #000000;
}

h3 {
  font-family: 'Cupra', Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 2.125rem;
  margin: 36px 0 34px;
}

p {
  font-family: 'Cupra', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 2.125rem;
  margin-top: 24px;
  padding: 0;
}

body {
  margin: 0;
  color: #2e2e2e;
}

/* Containers */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.container__desktop--form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

#legal_text_consent_container {
  margin-top: 44px;
}

/* Form */
form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.form__content {
  padding: 0 25px;
  margin-bottom: 30px;
}

.dropdown_row {
  margin-bottom: 24px;
}

.radiobutton_row {
  margin-bottom: 34px;
}

.information_input_row {
  margin-bottom: 34px;
}

.form__footer {
  display: flex;
  flex-direction: row-reverse;
  padding: 0 25px;
  margin: 14px 0 0;
}

.introduction {
  margin-bottom: 34px;
}

.radiobutton_space {
  margin-top: 40px;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

.fw {
  width: 100%;
}

.hw {
  width: 49%;
}

#gdpr_text_consent_form_container p {
  padding-bottom: 15px;
}

#gdpr_text_consent_form_container {
  border-top: 1px solid #d7d7d7;
  margin-top: 35px;
  padding-top: 30px;
  font-size: 12px;
  line-height: 20px;
}

.gdpr__text a {
  color: #333333;
  font-weight: 700;
}

.legal_checkbox__label {
  max-width: 450px;
}

.legal_checkbox__input + label:before {
  background-color: #f5f5f5;
}

/* ---------------------------------------------------- */
/* Thank You page styling */
/* ---------------------------------------------------- */

.submitted {
  text-align: center;
}

.submitted a {
  color: #2e2e2e;
  text-decoration: underline;
}

/* Medias */

/* Mobile ------------------------------- */
@media only screen and (max-width: 640px) {
  .submitted {
    padding: 0 25px;
  }
}