@charset "UTF-8";

/* Font */
  @font-face {
    font-family: 'AudiType';
    src: url('https://assets.one.audi/assets/fonts/AudiTypeVF.woff2') format('woff2-variations');
    font-display: swap;
    font-style: normal;
    font-stretch: 100% 130%;
  }

  @font-face {
      font-family: 'AudiType';
      font-style: normal;
      font-weight: 400 700;
      font-stretch: 100% 130%;
      src: url('https://assets.one.audi/assets/fonts/AudiTypeVF_Lat.woff2') format('woff2-variations');
      font-display: swap;
      unicode-range: U+0000,U+000D,U+0020-007E,U+00A0-0137,U+0139-017E,U+018F,U+0192,U+01C1,U+0218-021B,U+0237,U+0259,U+02C6-02C7,U+02D8-02DD,U+0312,U+0315,U+0326,U+03BC,U+0E3F,U+1E80-1E85,U+1E9E,U+1EF2-1EF3,U+2013-2015,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2070,U+2074-2079,U+2080-2089,U+20A1,U+20A4,U+20A6,U+20A8-20AE,U+20B1-20B2,U+20B4-20B5,U+20BD,U+2113,U+2116-2117,U+2122,U+2126,U+212E,U+2153-215E,U+2190-2193,U+2196-2199,U+2202,U+2206,U+220F,U+2211-2212,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+2300,U+25AA,U+25AF,U+25BA,U+25C0,U+25C6,U+25CA,U+2BA4-2BA7,U+5143,U+5186,U+F8FF,U+FB00-FB04,U+E001-E003,U+F62F-F639;
  }

  @font-face {
      font-weight: 400 700;
      font-family: 'AudiType';
      font-style: normal;
      font-stretch: 100% 130%;
      src: url('https://assets.one.audi/assets/fonts/AudiTypeVF_Cyr.woff2') format('woff2-variations');
      font-display: swap;
      unicode-range: U+0400-045F,U+0472-0473,U+0490-0493,U+0496-049D,U+04A0-04A3,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C1-04C2,U+04D8-04D9,U+04E2-04E3,U+04E8-04E9,U+04EE-04EF;
  }

  @font-face {
      font-weight: 400 700;
      font-family: 'AudiType';
      font-style: normal;
      font-stretch: 100% 130%;
      src: url('https://assets.one.audi/assets/fonts/AudiTypeVF_Grk.woff2') format('woff2-variations');
      font-display: swap;
      unicode-range: U+0384-0386,U+0388-038A,U+038C,U+038E-03A1,U+03A3-03CE,U+0E3F;
  }


/* Grid */
.db-wrapper {
    font-family: AudiType, sans-serif; 
    letter-spacing: 0px;
    font-weight: 400;
    font-stretch: 105%;
}


/* Variables */
.db-wrapper {
    --db-accent: #657081; 
    --db-accent-hover: #2c343f; 
    --db-accent2: #181D25; 
    --db-accent2-hover: #2c343f; 
    --db-accent3: #f50537; /* Red */
    --db-accent3-hover: #2c343f; 
	--db-gradient: linear-gradient(rgb(77, 87, 102) 0%, rgb(64, 74, 89) 100%); /* Gradient */
	--db-dark-gradient: linear-gradient(rgb(35, 42, 52) 0%, rgb(24, 29, 37) 100%); /* Darker Gradient */
    --db-black: #101319;
    --db-white: #FCFCFD;
    --db-dark: #2c343f;
    --db-gray: #f3f3f3;
}


/* Accent Colors */
.db-accent {
	color: var(--db-accent) !important;
}
.db-link-accent {
	text-decoration: none !important;
	color: var(--db-accent) !important;
}
.db-link-accent:hover {
	color: var(--db-accent-hover) !important;
	text-decoration: underline !important;
	text-underline-offset: 8px;
}


.db-accent2 {
	color: var(--db-accent2) !important;
}
.db-link-accent2 {
	text-decoration: none !important;
	color: var(--db-accent2) !important;
}
.db-link-accent2:hover {
	color: var(--db-accent2-hover) !important;
	text-decoration: underline !important;
	text-underline-offset: 8px;
}


.db-link-white {
	text-decoration: none !important;
	color: var(--db-white) !important;
}
.db-link-white:hover {
	color: rgba(252, 252, 253, 0.7) !important;
	text-decoration: underline !important;
	text-underline-offset: 8px;
}


/* Background Colors */
.db-bg-accent {
    background-color: var(--db-accent); /*  */
}
.db-bg-accent2 {
    background-color: var(--db-accent2); /*  */
}
.db-bg-dark {
    background-color: var(--db-black);
}
.db-bg-gray {
    background-color: var(--db-gray);
}
.db-bg-gradient {
    background-image: linear-gradient(rgb(77, 87, 102) 0%, rgb(64, 74, 89) 100%);
}
.db-bg-dark-gradient {
    background-image: linear-gradient(rgb(35, 42, 52) 0%, rgb(24, 29, 37) 100%);
}

 
/* Button 1 */
.db-button-primary {
	background-color: var(--db-accent);
	color: var(--db-white) !important;
    font-family: AudiType, sans-serif !important;
    font-weight: 400 !important;
	font-stretch: 105%;
    letter-spacing: 0px;
	border: 1px solid var(--db-accent);
	border-radius: 50px;
  	padding: 12px 24px;
	text-align: center;
	text-decoration: none !important;
	display: inline-block;
	font-size: .875rem;
	line-height: 20px;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s;
	cursor: pointer;
	min-width: 200px;
	min-height: 48px;
}
.db-button-primary:hover {
	background-color: var(--db-accent-hover);
	color: var(--db-white) !important;
	border: 1px solid var(--db-accent);
}


/* Button 2 */
.db-button2-primary {
	background-color: var(--db-accent2);
	color: var(--db-white) !important;
    font-family: AudiType, sans-serif !important;
    font-weight: 400 !important;
	font-stretch: 105%;
	letter-spacing: 0px;
	border: 1px solid var(--db-accent);
	border-radius: 50px;
  	padding: 12px 24px;
	text-align: center;
	text-decoration: none !important;
	display: inline-block;
	font-size: .875rem;
	line-height: 20px;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s;
	cursor: pointer;
	min-width: 200px;
	min-height: 48px;
}
.db-button2-primary:hover {
    background-color: var(--db-accent2-hover);
	color: var(--db-white) !important;
	border: 1px solid var(--db-accent);
}

/* Button 3 - Red */
.db-button3-primary {
	background-color: var(--db-accent3);
	color: var(--db-white) !important;
    font-family: AudiType, sans-serif !important;
    font-weight: 400 !important;
	font-stretch: 105%;
	letter-spacing: 0px;
	border: 1px solid var(--db-accent3);
	border-radius: 50px;
  	padding: 12px 24px;
	text-align: center;
	text-decoration: none !important;
	display: inline-block;
	font-size: .875rem;
	line-height: 20px;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s;
	cursor: pointer;
	min-width: 200px;
	min-height: 48px;
}
.db-button3-primary:hover {
    background-color: var(--db-accent3-hover);
	color: var(--db-white) !important;
	border: 1px solid var(--db-accent3-hover);
}

/* Button 4 - Black*/
.db-button4-primary {
	background-color: var(--db-black);
	color: var(--db-white) !important;
    font-family: AudiType, sans-serif !important;
    font-weight: 400 !important;
	font-stretch: 105%;
	letter-spacing: 0px;
	border: 1px solid var(--db-black);
	border-radius: 50px;
  	padding: 12px 24px;
	text-align: center;
	text-decoration: none !important;
	display: inline-block;
	font-size: .875rem;
	line-height: 20px;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s;
	cursor: pointer;
	min-width: 200px;
	min-height: 48px;
}
.db-button4-primary:hover {
    background-color: var(--db-accent-hover);
	color: var(--db-white) !important;
	border: 1px solid var(--db-accent-hover);
}

.db-button4 {
	background-color: var(--db-white);
	color: var(--db-black) !important;
    font-family: AudiType, sans-serif !important;
    font-weight: 400 !important;
	font-stretch: 105%;
	letter-spacing: 0px;
	border: 1px solid var(--db-black);
	border-radius: 50px;
  	padding: 12px 24px;
	text-align: center;
	text-decoration: none !important;
	display: inline-block;
	font-size: .875rem;
	line-height: 20px;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s;
	cursor: pointer;
	min-width: 200px;
	min-height: 48px;
}
.db-button4:hover {
    background-color: var(--db-gray);
	color: var(--db-black) !important;
	border: 1px solid var(--db-accent-hover);
}