pre, code, tt {
	white-space: normal;
}

a {
	color: #cc0000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;	
}

img {
	max-width: 100%;
	height: auto;
}

.wrap {
	margin: 0 auto;
	max-width: 1200px;
	padding: 1em 2vw;
}

.flex {
	display: flex;
	flex-flow: row wrap;
}
.flex > * {
	flex: 1 100%;
}

header {
	margin: 1em;
	text-align: center;
}
header.flex {	
	justify-content: space-between;
	align-items: center;
}

.nav {
	margin-top: 1em;
}

main {
	margin: 1em;
	margin-top: 0;
}

aside {
	margin: 1em;
	min-width: 320px;
}
aside.flex {
	align-content: flex-start;
}

aside.flex > * {
	margin: 0.5em;
	flex: 1 auto;
}


aside .certificates {
	width: 100%;
}



aside .certificates .flex > * {
	flex: 1 auto;
}
aside .cert {
	cursor: pointer;
	height: 10em;
}

aside ul {
    padding-left: 1em;
}

footer {
	margin: 4em auto 2em;
}
footer .community {
	margin-top: 1em;
}

footer .community img {
	padding: 0 1em;
	
}

@media only screen and (min-width: 320px) {
}

@media only screen and (min-width: 576px) {
}

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

@media only screen and (min-width: 992px) {
}

@media only screen and (min-width: 1200px) {
}

/* ------------------- */
@media only screen and (max-width: 480px) {
}

@media only screen and (min-width: 800px) {
	
	header #logo {
		text-align: left;
	}
	header .form {
		text-align: right;
	}
	header.flex > * {
		flex: 1 auto;
	}
	aside.flex > * {
		margin: auto;
	}
	aside .certificates .flex {	
		flex-direction: column;
	}
	
	/**/
	header {
		flex: 1 100%;
		order: 1;
	}
	aside.aside-left {
		flex: 1;
		order: 2;
	}
	main.main {
		flex: 3;
		order: 3;
	}
	footer {
		flex: 1 100%;
		order: 4;
	}
}

/************************************************/
.lnr {
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
  font-size: 1em;
  vertical-align: -0.1em;
}

.gitter {color: #FF0064; fill: #FF0064; }
.slack {color: #56B68B;}
.facebook { color: #3B5998;}
.twitter {color: #1DA1F2;}
.rss {color: #FFA500;}