@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,700|Roboto:700|Source+Sans+Pro:300,600&display=swap');
body, html {
	background-color: #fafafa;
	width:100%;
	height: 100%;
	margin:0;
	position: relative;
	font-family: "Source Sans Pro", sans-serif;
}


header {
	background-color: #ffd300;
	height:50px;
	border-bottom: 1px solid #aaa;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding:10px;
}

header img {	
	height:33px;
}

h1 {
    max-width: 1000px;
    margin:1em auto;
    padding:0 40px;
    box-sizing: border-box;
}

.doc {
    max-width: 1000px;
    margin:0 auto;
    background-color: #fff;
    padding:20px 40px;
    box-sizing: border-box;
}

footer {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #172A3B;
	min-height: 20vh;
	padding:5vh 10vw;
	color:#eee;
	font-size: 18px;
}

footer:after {
	font-family: "Roboto Mono",monospace;
	position: absolute;
	bottom:5px;
	left:0;
	right:0;
	font-size:14px;
	content:'- 30 -';
	text-align: center;
	opacity: 0.5;
}

footer a {
	color:#eee;
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
	color:#fff;
}

footer img {
	height: 32px;
}

footer div {
	margin:0 2px;
	max-width:20%;
}

footer .socials {
	display: flex;
	flex-direction: row;
}

footer .socials a {
	display: block;
	margin:0 10px;
}

footer small {
	position: absolute;
	bottom:2vh;
	left: 11vw;
	font-size: 14px;
}

footer hr {
	border:none;
	border-top:1px dotted #eee;
}

footer .coming {
	background-color: #00AEFF;
	font-size:12px;
	text-transform: uppercase;
	font-weight: bold;
	padding:5px;
	display: block;
	width: fit-content;
	color: #172A3B;
	letter-spacing: 1px;
}

@media (max-width: 1000px) {

	.doc {
		overflow-x: hidden;
	}

	footer {
		flex-direction: column;
	}

	footer div {
		max-width: initial;
		margin:20px 0;
	}

	footer small {
		bottom:2em;
	}
}