:root {
	--color-primary: #fd5c4c;
	--color-gradient-start: #fe506c;
	--color-gradient-stop: #fc6a2a;
}

body {
	font-family: 'europa', sans-serif;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.7em;
	color: #808291;
}

.h1, h1,
.h2, h2,
.h3, h3,
.h4, h4,
.h5, h5,
.h6, h6 {
	font-family: 'europa', sans-serif;
	font-weight: 700;
	color: #000;
}

.h1,
h1 {
	font-size: 60px;
	line-height: 1.2em;
}

.h2,
h2 {
	font-size: 28px;
	line-height: 1.2em;
}

.h3,
h3 {
	font-size: 24px;
	line-height: 1.2em;
}

.h4,
h4 {
	font-family: 'Libre Baskerville', serif;
	font-size: 20px;
	line-height: 1.2em;
	font-weight: 400;
}

.h5,
h5 {
	font-size: 18px;
	line-height: 1.2em;
	font-weight: 300;
}

.h6,
h6 {
	font-size: 16px;
	line-height: 1.2em;
	font-weight: 400;
	color: var(--color-primary);
}


.main-nav {
	
	> li {
	
		> a {
			font-size: 16px;
			text-transform: uppercase;
			letter-spacing: 0.025em;
			color: #000;

		}
		&.is-active > a,
		&.current-menu-item > a,
		&:hover > a,
		> a:hover {
			color: var(--color-primary);
		}
	}
}

.main-header {

	.header-module {
		
		p {
			font-size: 16px;
			letter-spacing: 0.025em;
			color: #000;
		}
		.btn {
			font-size:12px;
			font-weight:700;
			letter-spacing:0.1em;
		}
	}
}

.btn {
	font-size: 14px;
	line-height: 2em;

	&:hover {
		
		svg {
	
			stop {
				stop-color: var(--color-gradient-start);
			}
		}
	}
	.btn-gradient-bg-hover {
		background: linear-gradient(to right, var(--color-gradient-start) 0%, var(--color-gradient-start) 100%);
	}
}
.btn-naked {
	color: #000;

	&:hover {
		color: var(--color-primary);
	}
}

.fancy-title {

	h2 {
		font-weight: 300;
		letter-spacing: -0.025em;
	}
}

.main-footer {
	border-top: 1px solid #e5e8ec;
	color: #808291;
	
	a:not(.btn) {
		color: #808291;

			&:hover {
				color: #000;
			}
	}
}

@media screen and ( min-width: 768px ) {

	.fancy-title {
		
		h2 {
			font-size: 60px;
		}
	}
}