/*Mobile: 375px
Desktop: 1440px

Primary
Pink: hsl(322, 100%, 66%) -> #FF52BF
Neutral
Very Dark Cyan: hsl(192, 100%, 9%) -> #002D38
Very Pale Blue: hsl(207, 100%, 98%) -> #F5FAFF
Typography
Headings
Family: Poppins
Weights: 700
Body
Family: Open Sans
Weights: 400, 600, 700*/

/* Normalize */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
	margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  background-color: #fff;
  color: #002D38;
}
header {
	display: flex;
	margin: 80px 5% 10% 5%;
  align-items: center;
  align-self: center;
  justify-content: space-between;
}
main { display: flex; flex-wrap: wrap; justify-content: center; }
h1, h2 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	color: #002D38;	
}
h1 { font-size: 5rem; }
h2 { font-size: 2.75rem; }
h3, h4, h5, h6 {
	font-family: 'Open Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}
p {	font-size: 1.25rem; } 
.btn, .btn-outline {
	border-radius: 50px;
	border: none;
	outline: none;
	-webkit-box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.2);
	box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.2);
	font-weight: 700;
	text-decoration: none;
}
.btn {
	padding: 4% 20%;
	background-color: #FF52BF;
	border: 1px solid #FF52BF;
	color: #fff;
	font-size: 1rem;
}
.btn:hover { 
	background: #EB0098;
	border: 1px solid #FF52BF;
	background-color: #fff;
	color: #FF52BF;
}
.btn:active {
	border: 1px solid #EB0098;
	color: #EB0098;
  box-shadow: 5px 2px 12px 0px rgba(0,0,0,0.1);
  transform: translateY(2px);
  font-weight: 700;
}
.btn-outline {
	padding: 10px 30px;
	border: 1px solid #FF52BF;
	background-color: transparent;
	color: #FF52BF;
	font-size: 1rem;
	font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
}
.btn-outline:hover { border: 1px solid #EB0098; color: #EB0098; }
.btn-outline:active {
	border: 1px solid #EB0098;
	color: #EB0098;
  box-shadow: 5px 2px 12px 0px rgba(0,0,0,0.1);
  transform: translateY(2px);
  font-weight: 700;
}
.intro, .cta { text-align: center; }
.intro h2, .cta h2 { margin: 35px; }
.intro p, .cta p { margin: 0 27% 5% 27%; }
.cover img { width:100%; padding: 5% 17%; }
.fade {
	opacity: 1;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}
.numbers {
	display: flex;
	justify-content: space-around;
	width: 100%;
}
.numbers h1 {	margin: 0; }
.numbers img { width: 24%; }
.content, footer {
	display: flex;
	flex-wrap: wrap;
}
.full-width { width: 100%; }
.grow, .users { background-color: #F5FAFF; }
.info-columns {
  display: flex;
  align-items: center;
  padding: 5% 10%;
}
.column { flex: 50%; }
.column p { font-size: 1rem; }
.pad-right { margin-right: 5% }
.pad-left { margin-left: 5%;  }
.footer {
	display: flex;
	justify-content: space-around;
	width: 100%;
	background-color: #01262F;
	color: #fff;
	margin:0;
}
.footer-columns {
  align-items: flex-start;
  justify-content: space-between;
  padding: 5% 5%;
}
.footer-columns p {
	padding: 0 35% 0 0;
	font-size: 1rem;
}
.footer-columns p.pad {padding: 0 30% 8% 0;}
.footer-columns h2 img {
	padding-right: 10px;
}
footer h2 { color: #fff; }
footer h3 { padding: 15px 0; }
.contact img { width: 3%; }
ul { list-style: none; }
.contact li { margin: 25px 0; }
.social li {
	display: inline-block;
	font-size: 30px;
	padding: 20px 15px 0 0;
}
.contact li:hover, .social li:hover{ color: #FF52BF; }
input[type=email] {
  flex: 75%;
  padding: 12px;
  margin-right: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input[type=submit] {
	flex: 25%;
  background-color: #FF52BF;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
	text-decoration: none;
	font-size: 1rem;
	border: 1px solid transparent;
}
input[type=submit]:hover {
	border: 1px solid #FF52BF;
	background-color: #fff;
	color: #FF52BF;
}
div form { display: flex; align-content: stretch; }

/* Responsive layout - when the screen is less than 376 wide, change divider images */
@media screen and (min-width: 376px) {
  .growTop {
  	background-image: url("images/bg-section-top-desktop-1.svg");
	  width: 100%;
	  height: 165px;
		background-repeat: round;
	}
	.growBtm {
  	background-image: url("images/bg-section-bottom-desktop-1.svg");
  	width: 100%;
	  height: 139px;
		background-repeat: round;
	}
	.usersTop {
  	background-image: url("images/bg-section-top-desktop-2.svg");
	  width: 100%;
	  height: 156px;
		background-repeat: round;
	}
	.usersBtm {
  	background-image: url("images/bg-section-bottom-desktop-2.svg");
	  width: 100%;
	  height: 139px;
		background-repeat: round;
	}
	.footerTop {
  	background-image: url("images/bg-footer-top-desktop.svg");
	  width: 100%;
	  height: 158px;
	  margin-top: 5%;
		background-repeat: round;
	}
}
@media screen and (max-width: 375px) {
	.growTop {
		background-image: url("images/bg-section-top-mobile-1.svg");
		height: 112px;
		width: 100%;
		background-repeat: round;
	  }
	  .growBtm {
		background-image: url("images/bg-section-bottom-mobile-1.svg");
		height: 52px;
		width: 100%;
		background-repeat: round;
	  }
	  .usersTop {
		background-image: url("images/bg-section-top-mobile-2.svg");
		height: 103px;
		width: 100%;
		background-repeat: round;
	  }
	  .usersBtm {
		background-image: url("images/bg-section-bottom-mobile-2.svg");
		height: 101px;
		width: 100%;
		background-repeat: round;
	  }
	  .footerTop {
	  background: url("images/bg-footer-top-mobile.svg");
	  height: 52px;
	  width: 100%;
	  margin-top: 5%;
		background-repeat: round;
	}
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	body { font-size: 0.8rem; width: 100%;}
	header { margin: 40px 5% 20% 5%; }
	header img { width: 35%; }
	h1 { font-size: 4rem; }
	h2 { font-size: 1.6rem; }
	h3, h4, h5, h6 { font-size: 1.2rem; }
	p {	font-size: 1rem; }
	section, .flow { flex-direction: column; }
	.grow, .users { flex-direction: column-reverse; }
	.content .column { text-align: center; }
	.column img { margin: 10% 0 20% 0; }
	.numbers { width: auto; justify-content: center; }
	.numbers div { margin-bottom: 25%; }
	.intro p, .cta p { margin: 10% 10% 15% 10%; line-height: 150%; }
	.cover img { margin-bottom: 15%; }
	.btn, .btn-outline {
		-webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.2);
		box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.2);
	}
	.btn { padding: 4% 10%; font-size: 0.8rem; }
	.btn-outline { padding: 5px 20px; font-size: 0.8rem; }
	.footer { flex-direction: column-reverse; }
	.footer-columns p.pad, .footer-columns p { padding: 0; }
	div.column.pad-left { margin-left: 0; }
	form { flex-wrap: wrap; justify-content: flex-end;}
	input[type=email] { flex: 100%; margin: 10% 0 5% 0;	}
	input[type=submit] { flex: 0; font-size: 0.8rem; }
	.footer-columns img { margin: 0; height: 20px; width: auto;}
	.footer .column { text-align: left; }
	.footer .column li { font-size: 0.9rem; }
	.footer .column .social li { font-size: 30px; }
}