/* HTML & BODY */
html, body {
	position: relative;
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-size: 21px;
}

body {
	box-sizing: border-box;
	font-family: "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: rgb(255, 255, 255);
	background-color: rgb(244, 244, 244);
}

/* ELEMENTS */
h1, h2, h3, h4 {
	max-width: 90%;
	text-align: center;
	margin: 1rem auto;
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.15rem;

}

p {
	font-size: 1rem;
}

a {
	color: royalblue;
}

a:hover {
	color: whitesmoke;
}

a:active {
	color: darkcyan;
}

.button {
	font-family: "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	min-width: 120px;
	min-height: 40px;
	border: none;
	color: white;
	background-color: rgb(33, 67, 131);
	font-size: 0.75rem;
	font-weight: bold;
	border-radius: 1px;
	transition: background-color 100ms;
}

button:hover {
	background-color: rgb(64, 107, 186) !important;
	cursor: pointer;
}

/* HEADING DASH */
.dash {
	display: table;
	white-space: nowrap;
	overflow: hidden;
}

.dash::before, .dash::after {
	border-top: 2px solid rgb(255, 255, 255);
	content: '';
	display: table-cell;
	position: relative;
	top: 0.75em;
	/* width: 30%; */
	/* width: 200px; */
	width: 20vw;
}

.dash::before {
	right: 15%;
}

.dash::after {
	left: 15%;
}

/* SPACING */
.content {
	min-width: 280px;
	max-width: 1200px;
	margin: auto;
	overflow: hidden;
	padding: 25px 0px;
}

.contentNoClip {
	min-width: 280px;
	max-width: 1200px;
	margin: auto;
	overflow: hidden;
	overflow: visible;
}

.content__section {
	padding: 1vw 0;
}

.content__text {
	text-align: justify;
	margin: auto;
	max-width: 75%;
}

.content__padding {
	max-width: 100%;
	margin: auto;
}

/* BREAKPOINTS */

/* Content */
@media (max-width: 1200px) {
	.content__padding {
		max-width: 90%;
		margin: auto;
	}
}


/* Large Screens */
@media (min-width: 992px) {

	html {
		font-size: 21px;
	}


}

/* Laptops */
@media (max-width: 992px) and (min-width: 768px) {

	html {
		font-size: 20px;
	}


}

/* Tablets */
@media (max-width: 768px) and (min-width: 576px) {

	html {
		font-size: 19px;
	}

	.content {
		padding: 15px 0px;
	}

	.content__text {
		max-width: 85%;
	}
}

/* Phones */
@media (max-width: 576px) {

	html {
		font-size: 18px;
	}

	h1 {
		font-size: 2.5rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.15rem;
	}

	h4 {
		font-size: 1rem;
	}

	.content {
		padding: 15px 0px;
	}

	.content__text {
		text-align: left;
		max-width: 90%;
	}
}

/* Fallback for background-attachment:fixed to scroll because it is not supported on iOS mobile */
@media only screen and (hover: none) and (pointer: coarse) {
	.background {
		background-attachment: scroll !important;
	}
}