@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900&display=swap');

html {
	font-family: "Roboto", "Arial", sans-serif;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@media screen and (max-width: 1200px) {
	html {
		font-size: 16px;
	}
}

.container, .footer, .content-top, .component, .content-bottom {
	margin: 0px;
}

div {
	margin: 20px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 900;
}

h1 {
	font-size: 3em; // 45pt = 60px
}

h2 {
	font-size: 2.25em; // 34pt = 45px
}

h3 {
	font-size: 1.65em; // 25pt = 33px
	padding-top: 20px;
}

h4 {
	font-size: 1.5em;
}

a:hover {
	cursor: pointer;
}

@media screen and (max-width: 1200px) {
	.container, .top, .footer, .content {
		margin-left: 5px;
		margin-right: 5px;
	}

	h1 {
		font-size: 3em;
	}

	h2 {
		font-size: 2em;
	}

	h3 {
		font-size: 1.5em;
	}

	h4 {
		font-size: 1.2em;
	}

	div, p {
		font-size: 1em;
	}
}
