body {
	font-family: 'EB Garamond', serif;
	color: #555;
	margin: 0;
}
header {
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/ggbridge.jpg) bottom no-repeat;
  background-size: cover;
  text-align: right;
  color: #fff;
  height: 40vh;
}

#tagline h1, #tagline h3 {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

#logo {
  float: left;
}

#logo img {
  width: 3rem;
  height: auto;
	margin: 0.75rem 0.25rem;
}


#sign-up-form {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
}

#sign-up-form legend {
	margin: 4.25rem 30px 0px 30px;
	font-size: 0.9em;
}

#sign-up-form h3 {
	text-align: center;
}

#sign-up-form fieldset {
	border-width: 0px;
}

#sign-up-form div {
  margin: 5px 0;
  text-align: center;
}

#sign-up-form div label {
	margin-left: 7px;
	font-size: 0.7em;
	float: left;
}

#sign-up-form input {
	width: 98%;
	height: 20px;
	max-width: 200px;
	border-radius: 2px;
	display: inline-block;
	align: center;
}

#sign-up-form button {
	font-family: inherit;
	font-size: 1rem;
	margin-top: 20px;
	padding: 0.25rem;
	background-color: #1f9438;
	color: #fff;
	border-radius: 2px;
	border: none;
	width: 60%;
	max-width: 200px;
}

#button-div {
	text-align: center;
}

#sign-up-mobile {
	display: none;
}

.social-links {
  float: right;
}

.social-links ul {
  margin-right: 0.75rem;
}

.social-links li {
	display: inline-block;
  margin: 0 0.25rem;
}

.social-links img {
  width: 2rem;
  height: auto;
}

#tagline {
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  font-size: 2em;
}

/*********** Product info ***********/


.product-info {
    box-sizing: border-box;
    height: 60vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    padding-top: 1.25rem;
    font-size: 1.5rem;
}

.product-desc {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 50%;
    margin: auto;
}

.product-desc h3 {
	margin-top: 0;
	margin-bottom: 0;
}

.product-desc h5 {
  margin-top: 0;
	margin-bottom: 0;
}

.phone-demo {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 50%;
  margin: auto;
}

.phone-demo img {
		background-color: #fff;
    max-width: 100%;
    max-height: 505px;
    margin: auto;
}

/*********** About ***********/

.about {
    top: 30%;
}

.about-header {
  background-image: url('../images/about-us-logo.jpeg');
  background-position: center;
  text-align: center;
	font-size: 25px;
	z-index: -1;
}

.about-header h1 {
  position: absolute;
  bottom: 0;
  width: 100%;
	margin-bottom: 1rem;
}

.about {
    display: inline;
    list-style-type: none;
}

.article {
  list-style-type: none;
  text-align: center;
  margin: 10%;
}

.team {
  list-style-type: none;
  text-align: center;
  padding-left: 0;
  max-width: 18em;
  margin: 0 auto;
}

/*********** Footer ***********/

footer {
  background: #153243;
	width: 100%;
	height: 3rem;
  text-align: center;
  color: #fdfdfd;
  font-size: 1rem;
  box-sizing: border-box;
  padding-top: 1rem;
}

footer p {
  margin: 0 auto;
}
/**********End footer**********/

/************about*************/

.meet-the {
	text-align: center;
	font-size: 50px;
	margin-bottom: 0;
	margin-top: 20px;
	height: 50px;
	position: relative;
	top: 25px;
	right: 5px;
	font-family: 'Cantarell', sans-serif;
}

.team {
	text-align: center;
	font-size: 100px;
	font-family:'Oswald', sans-serif;
}

.bio-team, .bio-team2 {
	display: flex
}

.bio {
	width: 400px;
	margin-left:auto;
	margin-right: auto;
	padding: auto 4.3em
}

.bio-team img,.bio-team2 img {
  display: block;
  width:70%;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid black
}

.bio-team h4, .bio-team2 h4 {
  font-family: 'Oswald', sans-serif;
  margin-bottom:10px;
  text-align: center
}

.bio p {
	font-size: 1.2em;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
	text-align: center;
}

.company-mission {
  text-align: center;
  margin: 0 auto;
	font-size: 1.2em;
}
/***********End about*****************/

/*********** Media queries ***********/

@media
only screen and (max-width: 650px),
only screen and (max-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5) {

  body > * {
    text-align: center;
  }

	footer {
		padding: 0;
	}

  #tagline * {
    margin: 0 0.25rem;
  }

  #sign-up-mobile {
    display: inline-block;
    width: 85%;
    text-align: center;
    margin: 2rem 0;
  }

	#sign-up-mobile legend {
		margin: 0 auto;
	}

	#sign-up-mobile fieldset {
		padding: 1rem;
	}

	#sign-up-mobile input {
		height: 1.5rem;
		margin-bottom: 1rem;
		width: 65%;
		border-radius: 2px;
	}

	#sign-up-mobile button {
		background-color: #1f9438;
		color: #fdfdfd;
		width: 40%;
		font-family: inherit;
		font-size: 1rem;
		border-radius: 2px;
		border: none;
		padding: 0.25rem;
	}

  .product-info {
		font-size: inherit;
    padding: 0;
  }

  .phone-demo {
    display: none;
  }

  .product-desc {
		display: block;
    text-align: center;
    margin: auto 0;
    width: 100%;
  }

	.bio-team, .bio-team2{
	display: block;
	}

	.bio {
		display: block;
		width: 95%;
		margin: 0 auto;
	}
}

@media only screen and (max-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5)  {

	#tagline,
	.about-header {
	  font-size: 4.5rem;
	}

	.product-desc h3 {
		font-size: 6rem;
	}

	.product-desc h5,
	.company-mission h3,
	.bio h4,
	#sign-up-mobile h3 {
		font-size: 4rem;
	}

	.product-desc p,
	.company-mission p,
	.bio p,
	#sign-up-mobile label  {
		font-size: 3.7rem;
	}

	footer {
	  font-size: 2.5rem;
	}

	.meet-the {
		font-size: 4rem;
	}

	.team {
		font-size: 10rem;
	}

	#sign-up-mobile {
		width: 95%;
		margin: 2rem 0;
	}

	#sign-up-mobile input {
		height: 3rem;
		margin-bottom: 1rem;
		width: 65%;
		border-radius: 2px;
	}

	#sign-up-mobile button {
		background-color: #1f9438;
		color: #fdfdfd;
		width: 40%;
		font-family: inherit;
		font-size: 4rem;
		border-radius: 2px;
		border: none;
		padding: 0.25rem;
	}
}