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

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

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

body{
	font-family: sans;
	margin: 0;
	background: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}

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

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

.toggleNav { display: none; }

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

.flex-nav li{
    flex: 3;
  } 

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

@media all and (max-width: 1000px) {
    .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;}
}


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