@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
/* Global Styles
********************************************************************* */

body {
	margin: 0px;
	padding: 0px;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #395162;
}

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }

.column, .columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

.column, .columns {
  margin-left: 4%; }

.column:first-child, .columns:first-child {
  margin-left: 0; }

.one.column, .one.columns {
  width: 4.66667%; }

.two.columns {
  width: 13.33333%; }

.three.columns {
  width: 22%; }

.four.columns {
  width: 30.66667%; }

.five.columns {
  width: 39.33333%; }

.six.columns {
  width: 48%; }

.seven.columns {
  width: 56.66667%; }

.eight.columns {
  width: 65.33333%; }

.nine.columns {
  width: 74%; }

.ten.columns {
  width: 82.66667%; }

.eleven.columns {
  width: 91.33333%; }

.twelve.columns {
  width: 100%;
  margin-left: 0; }

.one-third.column {
  width: 30.66667%; }

.two-thirds.column {
  width: 65.33333%; }

.one-half.column {
  width: 48%; }

.offset-by-one.column, .offset-by-one.columns {
  margin-left: 8.66667%; }

.offset-by-two.column, .offset-by-two.columns {
  margin-left: 17.33333%; }

.offset-by-three.column, .offset-by-three.columns {
  margin-left: 26%; }

.offset-by-four.column, .offset-by-four.columns {
  margin-left: 34.66667%; }

.offset-by-five.column, .offset-by-five.columns {
  margin-left: 43.33333%; }

.offset-by-six.column, .offset-by-six.columns {
  margin-left: 52%; }

.offset-by-seven.column, .offset-by-seven.columns {
  margin-left: 60.66667%; }

.offset-by-eight.column, .offset-by-eight.columns {
  margin-left: 69.33333%; }

.offset-by-nine.column, .offset-by-nine.columns {
  margin-left: 78%; }

.offset-by-ten.column, .offset-by-ten.columns {
  margin-left: 86.66667%; }

.offset-by-eleven.column, .offset-by-eleven.columns {
  margin-left: 95.33333%; }

.offset-by-one-third.column, .offset-by-one-third.columns {
  margin-left: 34.66667%; }

.offset-by-two-thirds.column, .offset-by-two-thirds.columns {
  margin-left: 69.33333%; }

.offset-by-one-half.column, .offset-by-one-half.columns {
  margin-left: 52%; }

.container:after, .row:after, .u-cf {
  content: "";
  display: table;
  clear: both; }

@media (max-width: 550px) {
  .column, .columns {
    margin-left: 0; }
  .container {
    width: 80%; }
  article {
    padding: 3rem 0; }
  .one.column, .one.columns {
    width: 100%; }
  .two.columns {
    width: 100%; }
  .three.columns {
    width: 100%; }
  .four.columns {
    width: 100%; }
  .five.columns {
    width: 100%; }
  .six.columns {
    width: 100%; }
  .seven.columns {
    width: 100%; }
  .eight.columns {
    width: 100%; }
  .nine.columns {
    width: 100%; }
  .ten.columns {
    width: 100%; }
  .eleven.columns {
    width: 100%; }
  .twelve.columns {
    width: 100%;
    margin-left: 0; }
  .one-third.column {
    width: 100%; }
  .two-thirds.column {
    width: 100%; }
  .one-half.column {
    width: 100%; } }

a {
	color: #FFFFFF;
}
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
/* Typography
********************************************************************* */

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	margin: 0;
}
h1 {
	font-size: 44px;
}
/* Header Section
********************************************************************* */

header {
	background: #0469A7;
	min-height: 800px;
	padding: 0px 0 50px 0;
	box-sizing: border-box;
	background-image: url(bg.jpg);
	background-size: cover;
}
header h1 {
	font-size: 66px;
	color: #193142;
	padding-top: 70px;
	font-weight: 600;
}
header h2 {
	color: #395162;
}
header p {
	color: #395162;
}
.hero {
	margin-top: 80px;
}
.appstorebutton {
	display: inline-block;
	max-height: 50px;
	width: auto;
	padding-top: 40px;
	padding-right: 10px;
}
.phone {
	max-width: 270px;
	height: auto;
	float: right;
}
.logo {
	position: absolute;
	left: 20px;
	top: 20px;
	max-width: 100px;
	height: auto;
}
.h1-contact {
	font-weight: 800;
}
.main_nav {
	top: 0px;
	max-height: 50px;
	z-index: 999;
	width: 100%;
	padding-top: 10px;
	overflow: hidden;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	padding-bottom: 6px;
}
.socialIcons {
	color: #FFFFFF;
	font-size: 28px;
}

@media only screen and (max-width: 766px) {
.main_nav {
	padding-top: 10px;
}
}
.open-nav {
	max-height: 300px !important;
}
nav {
	width: 100%;
	margin-top: 5px;
}

@media only screen and (max-width: 766px) {
nav {
	width: 100%;
}
}
nav ul {
	list-style: none;
	overflow: hidden;
	text-align: right;
	padding: 0;
}

@media only screen and (max-width: 766px) {
nav ul {
	padding-top: 0px;
	margin-bottom: 22px;
	text-align: right;
	width: 100%;
}
}
nav ul li {
	display: inline-block;
	margin-left: 35px;
	line-height: 1.5;
	letter-spacing: 1px;
}

@media only screen and (max-width: 766px) {
nav ul li {
	width: 100%;
	padding: 7px 0;
	margin: 0;
}
nav ul li:first-child {
	margin-top: 70px;
}
}
nav ul a {
	text-transform: uppercase;
	font-size: 15px;
	text-decoration: none;
	color: #395162;
	font-weight: 600;
}
nav ul a:hover {
	color: #fff;
}
.mobile-toggle {
	display: none;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 30px;
}

@media only screen and (max-width: 766px) {
.mobile-toggle {
	display: block;
}
}
.mobile-toggle span {
	width: 30px;
	height: 4px;
	margin-bottom: 6px;
	background: #ffffff;
	display: block;
}
/* About Section
********************************************************************* */

#mission {
	background: #F6F6F6;
	padding: 80px 0 80px 0;
	min-height: 400px;
}
/* Features Section
********************************************************************* */

#spot {
	padding: 80px 0 80px 0;
	min-height: 400px;
}
.phoneFeature {
	max-width: 230px;
	height: auto;
	display: block;
	margin: 0 auto;
}
#spot h2 {
	padding-top: 20px;
}
/* Contact Section
********************************************************************* */

#contact {
	background: #AFF2B4;
	padding: 80px 0 80px 0;
	min-height: 400px;
}
form {
	box-sizing: border-box;
	margin-top: 50px;
}
textarea {
	float: left;
	width: 90%;
	max-width: 90%;
	border: none;
	margin: 0.5rem 0;
	padding: 0.7rem;
	border-radius: 1rem;
	background: #ffffff;
	color: #395162;
	font-size: 16px;
	font-family: "DM Sans", sans-serif;
}
input {
	float: left;
	width: 43%;
	max-width: 43%;
	border: none;
	margin: 0.5rem 0.5rem 0.5rem 0;
	padding: 0.7rem;
	border-radius: 1rem;
	background: #ffffff;
	color: #395162;
	font-size: 16px;
	font-family: "DM Sans", sans-serif;
}
input[type=submit], textarea[type=submit] {
	background: #395162;
	color: #fff;
	width: 100%;
  	max-width: 20%;
  	border-radius: 0.5rem;
}
input::placeholder, textarea::placeholder {
 color: #c1c1c1;
}
input.error, textarea.error {
	background: #AD4747;
	color: #fff;
}
input.error::placeholder, textarea.error::placeholder {
 color: black;
}
textarea {
	height: 10rem;
}
/* Footer Section
********************************************************************* */

footer {
	background-color: #395162;
	padding: 50px 0 50px 0;
}
footer p {
	color: #FFFFFF;
	text-align: right;
}
.footer-link {
	text-align: left;
}
.footer-link a {
	text-decoration: none;
}
.footer-link a:hover {
	text-decoration: underline;
}
.icon {
	font-size: 48px;
}

/* Media Queries
********************************************************************* */

@media only screen and (max-width: 766px) {
header h1 {
	font-size: 46px;
	padding-top: 10px;
}
.hero {
	margin-top: 40px;
}
.appstorebutton {
	padding-top: 0px;
}
.logo {
	max-width: 70px;
}
}

@media only screen and (max-width: 550px) {
.mobile-toggle {
	right: 0px;
	top: 20px;
}
 .phone {
	display: none;
}
}

/* Contact Form */