main
{
	margin-top: 0;
}

.page-header
{
	background-color: transparent;
	transition: background-color 0.2s ease;
}

.page-header.scrolled
{
	background-color:var(--darkblue);
}

/* Hero*/
.hero
{
	background-image: url('../../images/top-bg-xs.webp');
	background-size: cover;
	color:var(--white);
}

.hero__picture
{
	margin-top: 100px;
}

.hero__meta
{
	position: relative;
	margin-top: calc(2* var(--vu));
	margin-bottom: calc(2 * var(--vu));
	text-transform: uppercase;
	font-size: 12px;
}

.hero__text A{
    color: var(--white);
}

.hero__subtext
{
	margin-top: calc(1 * var(--vu));
}

.hero__meta strong
{
	color:var(--blue);
}

.hero_big-round-button
{
	transition: transform 0.2s ease;
	filter: drop-shadow(0px 4px 9px rgba(255, 255, 255, 0.5));
}

.hero_big-round-button:hover
{
	transform: scale(1.05);
}

.hero_rotate-text
{
	animation: rotate 20s linear infinite;
	transform-origin: center;
}

@media (max-width: 990px)
{
	.hero_big-round-button
	{
		margin-top: calc(2 * var(--vu));
	}
	
	.hero__button
	{
		text-align: center;
	}
}

@media (min-width: 990px)
{
	.hero
	{
		height: calc(37 * var(--vu));
		background-image: url('../../images/top-bg-lg.webp');
	}
	
	.hero__picture
	{
		grid-column: 2 / span 9;
		margin-top: 125px;
	}
	
	.hero__meta
	{
		font-size: 17px;
		margin-top: calc(3 * var(--vu));
		margin-bottom: calc(4 * var(--vu));
	}
	
	.hero__text
	{
		width: 70%;
		margin: 0 auto;
	}
	
	.hero__subtext
	{
		margin-top: calc(2 * var(--vu));
	}
	
	.hero__button
	{
		position: absolute;
		right: 0;
		top: -160px;
	}
	
	.hero_big-round-button
	{
		width: 185px;
		height: 185px;
	}
}

/*about*/
.about
{
	padding-top: calc(4 * var(--vu));
	padding-bottom: calc(4 * var(--vu));
}

@media (min-width: 990px)
{
	.about__text
	{
		font-size: 18px;
	}
}

/*quote*/
.quote
{
	background-image: url('../../images/quote-bg.webp');
	background-size: 100% 400px;
	background-repeat: no-repeat;
	color:var(--white);
	text-align: center;
	font-family:var(--second-font);
	font-size: 34px;
	line-height: 1;
	letter-spacing: -2px;
	padding-top: calc(3 * var(--vu));
	padding-bottom: calc(3 * var(--vu));
}

@media (min-width: 990px)
{
	.quote
	{
		font-size: 50px;
		background-size: cover;
	}
}

/*button*/
.button
{
	padding-top: calc(4 * var(--vu));
	padding-bottom: calc(4 * var(--vu));
}

.button__text
{
	text-align: center;
	font-weight: bold;
}

@media (max-width: 990px)
{
	.button__text
	{
		margin-bottom: 10px;
	}
	
	.button__element
	{
		margin-bottom: 10px;
	}
	
	.button__element .btn
	{
		width: 84%;
		margin: 0 auto;
	}
}

@media (min-width: 990px)
{
	.button__text
	{
		text-align: right;
		display: grid;
		align-items: center;
	}
}