html{
	box-sizing: border-box;
}

*, *:before, *:after{
	box-sizing: inherit;
}

body{
	font-family: sans-serif;
	margin: 0;
	background: linear-gradient(260deg, lightcoral 0%, lightblue 100%);
}

a {
	color: white;
	text-decoration: none;
	display: inline-block;
	letter-spacing: 2px;
	text-align: center;
	background: rgba(0, 0, 0, 0.2);
	padding: 20px 5px;
	width: 100%;
}

a:hover{
	background: rgba(0, 0, 0, 0.3);
}

.toggleNav { display: none; }

.flex-nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid black;
}

.flex-nav li{
	flex: 3;
}

.flex-nav .social{
	flex: 1;
}

.wrapper{
	margin: 0 auto;
	max-width: 1000px;
	padding: 50px;	
}

@media all and (max-width: 700px){
	.flex-nav ul {
		flex-wrap: wrap;
	}
	.flex-nav li {
		flex: 1 1 50%;
	}
}

@media all and (max-width: 500px) {
	.flex-nav ul { display: none;}
	.toggleNav { display: block; }

	.flex-nav li { flex-basis: 100%;}

	.wrapper{
		display: flex;
		flex-direction: column;
	}

	/*.wrapper > *{
		order: 999;
	}*/
	.flex-nav{ order: 1; }
	.top { order: 2;}
	.content { order: 3;}
	.signUp { order: 4;}
	.banner{ order: 5}
	footer { order: 6;}
}

.banner img{
	width: 100%;
}

section, footer{
	text-align: center;
	background: rgba(0, 0, 0, 0.2);
	color: white;
	padding: 20px;
	margin: 20px 0;
	font-weight: 300;
}

.fa{
	padding-right: 15px;
}