@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");

body {
	font-family: "Lato", sans-serif;
	box-sizing: border-box;
	padding-top: 75px;
	margin: 0;
	box-sizing: border-box;
	padding: 75px 0 0 0;

}

h2 {
	padding: 20px;
	box-sizing: border-box;
	max-width: 1500px;
	margin: auto;
	display: inline-block;
	width: 100%;
}

h1 {
	text-align: center;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 75px;
	background: #000000;
	z-index: 10;
}

header h1 {
	margin: 0;
}

.shields {
	padding: 20px;
	box-sizing: border-box;
	max-width: 1500px;
	margin: auto;
}

button {
	appearance: none;
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
	transition: background .5s ease, color .5s ease;
	border: none;
	background: #ffd800;
	border-radius: 30px;
	text-transform: uppercase;
	box-sizing: border-box;
	padding: 15px 40px;
	font-weight: 400;
	font-size: 13px;
	cursor: pointer;

	&:hover {
		color: #ffffff;
		background: #222222;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
	}
}

header section {
	max-width: 1500px;
	height: 35px;
	margin: auto;
	padding: 20px;
	background: #ffd800;
}

header section a {
	float: right;
	padding: 3px 0;
}

:global(.center) {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

:global(.slider-content) {
	color: white;

	&:before {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
		bottom: 0;
		left: 0;
	}
}

.page {
	width: 100%;
	max-width: 1000px;
	margin: auto;
	margin-bottom: 100px;
}
