@font-face {
	font-family: "Audi Type Variable";
	src: url("font/AudiTypeVF_4.04.ttf") format("truetype");
}

html, body {
	margin: 0;
	padding: 0;
	font-size: 16px;
	overflow-x: hidden;
}

p, a {
	text-decoration: none;
	margin: 0;
	font-family: 'Audi Type Variable', sans-serif;
}

.ex-bold {
	font-variation-settings: "wght" 700, "wdth" 130;
}

.ex-normal {
	font-variation-settings: "wght" 400, "wdth" 130;
}

.bold {
	font-variation-settings: "wght" 700, "wdth" 100;
}

.normal {
	font-variation-settings: "wght" 400, "wdth" 100;
}

.underline {
	text-decoration: underline;
}

.black {
	color: #212121;
}

.white {
	color: #ffffff;
}

.container {
	max-width: 1440px;
	margin: 0 auto;
	font-family: 'Audi Type Variable', sans-serif;
}

#menu .flex {
	background: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent);
	border-top: 5px solid #ff3423;
	align-items: center;
	padding: 20px 0;
}

#menu .flex .item1 {
	display: flex;
	align-items: center;
	position: relative;
}

#menu .flex .item1:before {
	content: "";
	background-color: #ff3423;
	width: 120px;
	height: 100%;
	position: absolute;
}

#menu .flex .item1 a {
	display: block;
	position: relative;
	z-index: 1;
	padding: 5px 0 5px 44px;
}

#footer {
	position: relative;
	background-color: #000;
	color: #fff;
	padding: 30px 0;
}

#footer .flex1 {
	display: flex;
	align-items: center;
}

#footer .logo {
	margin-left: 30px;
	margin-right: 80px;
	max-width: 225px;
}

#footer .logo:before {
	content: "";
	position: absolute;
	background-color: #ff3423;
	height: 50px;
	width: 150px;
	margin-right: -75px;
	top: 26px;
	left: -75px;
}

#footer .logo img {
	position: relative;
	z-index: 1;
	width: 100%;
}

#footer .mid {
	position: relative;
	justify-self: center;
}

#footer .spec {
	display: flex;
	text-transform: uppercase;
	align-items: center;
}

#footer .spec .item1 {
	margin-right: 15px;
}

.main {
	height: 650px;
	background-image: url("images/main_audi.png");
	font-family: 'Audi Type Variable', sans-serif;
	background-size: auto 101%;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #ffffff;
	box-sizing: border-box;
	padding: 40px;
	margin-bottom: 7.5rem;
	position: relative;
}

.slide-up {
	-webkit-animation: slide-up 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
	animation: slide-up 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.main__header {
	font-size: 4.5rem;
}

.main__header > div {
	cursor: default;
	overflow: hidden;
}

.main__header > div:nth-child(2) > p {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
	font-size: 3rem;
}

.main__header > div:nth-child(3) > p {
	-webkit-animation-delay: 0.15s;
	animation-delay: 0.15s;
	font-size: 3rem;
}

.trend {
	box-sizing: border-box;
	padding: 0 40px;
	margin-bottom: 7.5rem;
	display: grid;
	grid-template-columns: 3fr 5fr;
	grid-gap: 20px;
}

.trend__header {
	font-size: 1.8rem;
	color: #212121;
	align-self: end;
	padding-right: 10px;
}

.trend__img {
	width: 100%;
}

.trend__img img {
	width: 100%;
}

.start {
	height: 600px;
	background-image: url("images/3_audi.png");
	background-size: auto 101%;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
	color: #ffffff;
	box-sizing: border-box;
	padding: 40px;
	margin-bottom: 7.5rem;
}

.start__header {
	font-size: 1.5rem;
	width: 80%;
}

.start__link {
	color: #ffffff;
}

.company {
	display: grid;
	grid-template-columns: 1fr 3fr 4fr;
	grid-gap: 20px;
	margin-bottom: 7.5rem;
	box-sizing: border-box;
	padding: 0 40px;
}

.company__info {
	grid-column: 2;
	color: #212121;
}

.company__info .number {
	font-size: 2.5rem;
	text-align: right;
	position: relative;
	margin-bottom: .5rem;
}

.company__info .number::before {
	display: flex;
	content: "";
	width: 82%;
	position: absolute;
	top: 45%;
	left: 0;
	border: 1px solid #212121;
}

.company__info .header {
	font-size: 1.5rem;
	margin-bottom: 2rem;
}

.company__info .description {
	font-size: 1.25rem;
}

.company__slider {
	overflow: hidden;
	height: 338px;
	align-self: end;
	display: flex;
	align-items: flex-end;
}

.swiper {
	padding-top: 64px !important;
}

.swiper-button-next,
.swiper-button-prev {
	top: 24px !important;
	color: #212121 !important;
	width: 20px !important;
	height: 20px !important;
	padding: 12px !important;
	border: 1px solid #212121;
}

.swiper-button-next:after,
.swiper-button-prev:after {
	font-size: 1.25rem !important;
}

.swiper-button-next {
	right: 0 !important;
}

.swiper-button-prev {
	left: unset !important;
	right: 64px !important;
}

.swiper-slide img {
	width: 100%;
}

.travel {
	height: 720px;
	background-image: url("images/4_audi-1.png");
	background-size: 101%;
	background-repeat: no-repeat;
	animation: bg-change 8s infinite;
	margin-bottom: 7.5rem;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	box-sizing: border-box;
	padding: 0 40px;
}

.travel__info {
	background-color: rgba(255, 255, 255, .8);
	box-sizing: border-box;
	padding: 40px 24px;
	align-self: center;
	grid-column: 1 / 5;
}

.travel__info .number {
	font-size: 2.5rem;
	text-align: left;
	position: relative;
	margin-bottom: .5rem;
}

.travel__info .number::after {
	display: flex;
	content: "";
	width: 82%;
	position: absolute;
	top: 45%;
	right: 0;
	border: 1px solid #212121;
}

.travel__info .header {
	font-size: 1.5rem;
	margin-bottom: 2rem;
	width: 80%;
}

.travel__info .description {
	font-size: 1.25rem;
}

.speed {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 20px;
	box-sizing: border-box;
	padding: 0 40px;
	margin-bottom: 7.5rem;
}

.speed__num {
	grid-column: 1/6;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.speed__num .number {
	font-size: 2.5rem;
	text-align: right;
	position: relative;
	margin-bottom: .5rem;
}

.speed__num .number::before {
	display: flex;
	content: "";
	width: 82%;
	position: absolute;
	top: 45%;
	left: 0;
	border: 1px solid #212121;
}

.speed__num img {
	width: 100%;
}

.speed__info {
	grid-column: 6 / 9;
}

.speed__info .header {
	font-size: 1.5rem;
	margin-bottom: 2rem;
}

.speed__info .description {
	font-size: 1.25rem;
	margin-bottom: 24px;
}

.speed__info .title {
	font-size: 1.5rem;
}

.speed__img {
	align-self: end;
}

.romantic {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 20px;
	margin-bottom: 7.5rem;
	box-sizing: border-box;
	padding-right: 40px;
}

.romantic__info {
	grid-column: 1 / 5;
	background-image: url(images/red-bg.png);
	box-sizing: border-box;
	padding: 40px 0 40px 40px;
	color: #ffffff;
}

.romantic__info .number {
	font-size: 2.5rem;
	text-align: left;
	position: relative;
	margin-bottom: .5rem;
}

.romantic__info .number::before {
	display: flex;
	content: "";
	width: 82%;
	position: absolute;
	top: 45%;
	right: 0;
	border: 1px solid #ffffff;
}

.romantic__info .header {
	font-size: 1.5rem;
	margin-bottom: 2rem;
	margin-right: 4rem;
}

.romantic__info .text {
	font-size: 1.25rem;
	margin-bottom: 2rem;
	margin-right: 8rem;
}

.romantic__info .text:last-child {
	margin-bottom: 0;
}

.romantic__info .img {
	margin-bottom: 2rem;
}

.romantic__info .link {
	display: flex;
	justify-content: end;
	padding-right: 24px;
}

.romantic__info .link .button {
	color: #ffffff;
	border-color: #ffffff;
}

.romantic__town {
	grid-column: 5 / 9;
}

.romantic__town .img {
	margin-left: -100px;
	height: 30rem;
	margin-top: 12rem;
	margin-bottom: 3.5rem;
}

.romantic__info .img img,
.romantic__town .img img {
	width: 100%;
}

.romantic__town .text {
	font-size: 1.25rem;
	margin-bottom: 2rem;
}

.romantic__town .text:last-child {
	margin-bottom: 0;
}

.romantic__town .title {
	font-size: 1.5rem;
	margin-right: 2rem;
}

.defeat {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 20px;
	margin-bottom: 7.5rem;
	box-sizing: border-box;
	padding: 0 40px;
	background-image: url(images/kizh-bg.png);
	background-size: 56%;
	background-repeat: no-repeat;
	background-position: 80px bottom;
}

.defeat__title {
	grid-column: 2 / 5;
	display: flex;
	flex-direction: column;
}

.defeat__title .number {
	font-size: 2.5rem;
	text-align: right;
	position: relative;
	margin-bottom: .5rem;
	margin-right: 20px;
}

.defeat__title .number::before {
	display: flex;
	content: "";
	width: 82%;
	position: absolute;
	top: 45%;
	left: 0;
	border: 1px solid #212121;
}

.defeat__title .header {
	font-size: 1.5rem;
	margin-bottom: 2rem;
}

.defeat__text {
	grid-column: 2 / 6;
	font-size: 1.25rem;
}

.defeat__text p {
	margin-bottom: 1rem;
}

.defeat__img {
	grid-column: 6 / 9;
}

.defeat__img img {
	width: 100%;
}

.defeat .title {
	grid-column: 5 / 9;
	font-size: 1.5rem;
	margin-bottom: 4rem;
}

.fairytale {
	height: 720px;
	background-image: url("images/9_audi-1.png");
	background-size: 101%;
	background-repeat: no-repeat;
	animation: bg-change-2 8s infinite;
	margin-bottom: 7.5rem;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 20px;
	box-sizing: border-box;
	padding: 0 40px;
}

.fairytale__info {
	background-color: rgba(0, 0, 0, .6);
	box-sizing: border-box;
	padding: 40px 24px;
	align-self: center;
	grid-column: 1 / 5;
	color: #ffffff;
}

.fairytale__info .number {
	font-size: 2.5rem;
	text-align: left;
	position: relative;
	margin-bottom: .5rem;
}

.fairytale__info .number::after {
	display: flex;
	content: "";
	width: 82%;
	position: absolute;
	top: 45%;
	right: 0;
	border: 1px solid #ffffff;
}

.fairytale__info .header {
	font-size: 1.5rem;
	margin-bottom: 2rem;
	width: 80%;
}

.fairytale__info .description {
	font-size: 1.25rem;
	padding-right: 1rem;
}

.art {
	height: 720px;
	box-sizing: border-box;
	padding: 0 40px;
	margin-bottom: 7.5rem;
	background-image: url("images/art.png");
	background-size: auto 101%;
	background-position: right;
	background-repeat: no-repeat;
	display: grid;
	grid-template-columns: 1fr 3fr 4fr;
}

.art__description {
	font-size: 1.5rem;
	grid-column: 2;
}

.train {
	height: 510px;
	background-image: url("images/train.png");
	background-size: auto 101%;
	background-position: left;
	background-repeat: no-repeat;
	display: grid;
	grid-template-columns: 3fr 4fr 1fr;
	grid-gap: 20px;
	color: #ffffff;
	box-sizing: border-box;
	padding: 0 40px;
	margin-bottom: 7.5rem;
}

.train__description {
	align-self: center;
	font-size: 1.5rem;
}

.home {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 20px;
	box-sizing: border-box;
	padding: 0 40px;
	margin-bottom: 7.5rem;
}

.home__title {
	grid-column: 1 / 7;
	display: flex;
	justify-content: end;
	align-items: end;
}

.home__title .number {
	font-size: 2.5rem;
	text-align: right;
	position: relative;
	margin-right: 20px;
	width: 74%;
}

.home__title .number::before {
	display: flex;
	content: "";
	width: 82%;
	position: absolute;
	top: 45%;
	left: 0;
	border: 1px solid #212121;
}

.home__title .header {
	font-size: 1.5rem;
}

.home__rest {
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.home__rest .text {
	font-size: 1.5rem;
}

.home__rest .button {
	align-self: end;
}

.home__img {
	grid-column: 4 / 7;
	background-image: url("images/7_audi-1.png");
	background-size: cover;
	background-position: center;
}

.home__img:hover {
	background-image: url("images/7_audi-2.png");
	background-size: cover;
	background-position: center;
}

.home__text {
	grid-column: 7 / 9;
	font-size: 1.25rem;
}

.holiday {
	height: 480px;
	background-image: url("images/holiday.png");
	background-size: auto 101%;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}

.holiday__wish {
	font-size: 3rem;
	margin-bottom: 40px;
	font-variation-settings: "wght" 700, "wdth" 130;
}

.button {
	color: #212121;
	font-variation-settings: "wght" 700, "wdth" 105;
	border: 1px solid #212121;
	height: 48px;
	padding: 0 32px;
	max-width: 240px;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 0 rgba(225, 225, 225, 0.5);
	-webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	-moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	transition: all 300ms ease-in-out;
}

.button-circle {
	color: #ffffff;
	font-variation-settings: "wght" 700, "wdth" 105;
	border: 1px solid #ffffff;
	border-radius: 100px;
	width: 140px;
	height: 140px;
	display: flex;
	align-items: center;
	text-align: center;
	box-shadow: 0 0 0 0 rgba(225, 225, 225, 0.5);
	-webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	-moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
	transition: all 300ms ease-in-out;
}

.button-circle.black {
	color: #212121;
	border: 1px solid #212121;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
}

.button:hover,
.button-circle:hover {
	background: rgba(225, 225, 225, 0.08);
}

.button:hover,
.button-circle.black:hover {
	background: rgba(0, 0, 0, 0.16);
}

.main .button-circle {
	position: absolute;
	top: 60px;
	right: 140px;
}

/* Animation */

@keyframes pulsing {
	to {
		box-shadow: 0 0 0 24px rgba(232, 76, 61, 0);
	}
}

@keyframes slide-up {
	0% {
		transform: translateY(150px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes bg-change {
	0% {
		background-image: url('images/4_audi-1.png');
	}
	50% {
		background-image: url('images/4_audi-2.png');
	}
	100% {
		background-image: url('images/4_audi-1.png');
	}
}

@keyframes bg-change-2 {
	0% {
		background-image: url('images/9_audi-1.png');
	}
	50% {
		background-image: url('images/9_audi-2.png');
	}
	100% {
		background-image: url('images/9_audi-1.png');
	}
}


/* Mobile */

@media screen and (max-width: 500px) {
	.holiday {
		background-size: cover;
	}

	.main {
		height: 500px;
		padding: 24px;
		background-size: cover;
		background-position: 26% center;
		margin-bottom: 40px;
	}

	.main__header,
	.main__header > div > p {
		font-size: 1.5rem !important;
	}

	.main .button-circle {
		width: 120px;
		height: 120px;
		top: 190px;
		right: unset;
		color: #ffffff;
		border: 1px solid #ffffff;
		box-shadow: 0 0 0 0 rgba(225, 225, 225, 0.5);
		font-size: .875rem;
	}

	.trend {
		padding: 0 24px;
		grid-template-columns: 1fr;
		margin-bottom: 40px;
	}

	.trend__header {
		font-size: 1.5rem;
		padding: 0;
	}

	.start {
		height: 500px;
		padding: 24px;
		background-size: cover;
		background-position: 20% center;
		margin-bottom: 40px;
		flex-direction: column-reverse;
		align-items: unset;
	}

	.start__header {
		width: 100%;
		font-size: 1rem;
		margin-top: 24px;
	}

	.company,
	.speed,
	.home,
	.romantic,
	.defeat {
		grid-template-columns: 1fr;
		padding: 0 24px;
		margin-bottom: 40px;
	}

	.home,
	.romantic,
	.defeat {
		grid-gap: 0;
	}

	.company__info,
	.speed__num,
	.speed__info,
	.home__title,
	.home__img,
	.home__rest,
	.home__text,
	.romantic__info,
	.romantic__town,
	.defeat__title,
	.defeat__text,
	.defeat__img,
	.defeat .title {
		grid-column: unset;
	}

	.company__info .number,
	.travel__info .number,
	.speed__num .number,
	.home__title .number,
	.fairytale__info .number,
	.romantic__info .number,
	.defeat__title .number {
		font-size: 1.5rem;
	}

	.company__info .number::before,
	.travel__info .number::before,
	.speed__num .number:before,
	.home__title .number:before,
	.fairytale__info .number::before,
	.defeat__title .number::before,
	.romantic__info .number::before {
		width: 72%;
	}

	.company__info .header,
	.travel__info .header,
	.speed__info .header,
	.home__title .header,
	.romantic__info .header,
	.defeat__title .header,
	.fairytale__info .header {
		font-size: 1rem;
		margin-bottom: 1rem;
		margin-right: 0;
		width: 100%;
	}

	.company__info .description,
	.travel__info .description,
	.speed__info .description,
	.romantic__info .text,
	.romantic__town .text,
	.defeat__text,
	.fairytale__info .description {
		font-size: .875rem;
	}

	.romantic__info .text {
		margin-right: 0;
	}

	.romantic__info .link {
		width: 100%;
		margin: 0;
	}

	.romantic__info .link .button {
		width: 100%;
	}

	.romantic__town .img {
		height: auto;
		margin: 2rem 0 1rem;
	}

	.speed__info .title,
	.romantic__town .title,
	.home__text {
		font-size: 1rem;
	}

	.defeat {
		background: none;
	}

	.defeat .title {
		font-size: 1rem;
		margin-top: 1rem;
		margin-bottom: 0;
	}

	.home__img {
		height: 320px;
	}

	.home__text {
		margin-top: 1rem;
	}

	.home__rest {
		box-sizing: border-box;
	}

	.home__rest .text {
		font-size: 1rem;
		margin-bottom: 16px;
	}

	.home__rest .button {
		width: 100%;
		padding: 0;
		margin-bottom: 2rem;
		box-sizing: border-box;
		max-width: unset;
	}

	.home__title {
		width: 100%;
		flex-direction: column;
		align-items: unset;
	}

	.home__title .number {
		width: unset;
	}

	.company__slider {
		height: auto;
	}

	.romantic {
		background-size: 100%;
	}

	.romantic__info {
		padding: 24px;
	}

	.travel,
	.fairytale {
		height: auto;
		background-size: cover;
		background-position: center;
		grid-template-columns: 1fr;
		padding: 24px;
		margin-bottom: 40px;
	}

	.travel__info,
	.fairytale__info {
		padding: 24px;
	}

	.art {
		height: 480px;
		grid-template-columns: 1fr;
		background-size: 100%;
		background-position: right bottom;
		padding: 0 24px;
		margin-bottom: 40px;
	}

	.art__description {
		font-size: 1rem;
		margin-right: 1rem;
	}

	.train {
		height: 300px;
		background-size: cover;
		background-position: -40px center;
		grid-template-columns: 8fr 1fr;
		padding: 0 24px;
		margin-bottom: 40px;
	}

	.train__description {
		font-size: 1rem;
	}

	.holiday__wish {
		font-size: 1.75rem;
		text-align: center;
	}

	#menu .flex .item1 a {
		max-width: 230px;
		padding: 5px 0 5px 30px;
	}

	#menu .flex .item1 a img {
		width: 100%;
	}

	#footer .flex1 {
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
	}

	#footer .logo {
		margin-left: 30px;
		margin-right: 15px;
		max-width: 225px;
	}

	#footer .copy, #footer .mid {
		margin-top: 10px;
		font-size: 12px;
	}

	#footer .logo:before {
		display: none;
	}
}