@charset "UTF-8";

html,
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: Helvetica, "sans-serif";
}

/* DEFAULT TAGS */

h1 {
	font-size: 50px;
	font-weight: 500;
	font-style: normal;
	margin: 20px 0px;
}

h2 {
	font-size: 40px;
	font-weight: 500;
	font-style: normal;
	margin: 20px 0px;
}

h3 {
	font-size: 30px;
	font-weight: 500;
	font-style: normal;
	margin: 20px 0px;
}

h4 {
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
}

p {
	line-height: 1.5;
	font-size: 20px;
	font-weight: 500;
	font-style: normal;
	margin: 20px 0px;
	color: rgba(50,50,50,1.00);
}

header {
	background-color: #FFFFFF;
}

footer {
	background-color: #303030;
	color: #FFFFFF;
	padding: 80px 20px;
}

aside {
	width: 15%;
	padding: 20px;
	background-color: grey;
	float: left;
	height: 100vh;
}

/* NAVIGATION & LOGO */

.banner {
	background-color: #008CFF;
	padding: 6px 20px;
	color: #FFFFFF;
	text-align: center;
}

.banner p {
	margin: 0px;
	font-size: 1.5em;
	font-weight: 450;
}

.main-header {
	padding: 20px;
}

.desktop-menu {
	display: none;
	padding-top: 10px;
}

.desktop-menu ul {
	list-style-type: none;
	float: right;
}

.desktop-menu ul li {
    font-size: 2em;
    text-align: center;
    padding: 4px;
    display: block;
	font-weight: 400;
}

.desktop-menu ul li a {
	text-decoration: none;
	color: #000000;
}

.desktop-menu ul li a:hover {
	color: rgba(255,128,0,1.00);
}

.mobile-menu.close .top{
	transform: rotate(45deg);
	top: 41.43%;
}

.mobile-menu.close .middle, .mobile-menu.close .bottom {
	transform: rotate(-45deg);
	top: 41.43%;
}

.expand {
	display: block;
	float: left;
}

.display-none {
	display: none;
}

.nav-col {
	float: right;
}

.nav-col.exp {
	position: fixed;
	top: 0;
	right: 0;
	background-color: white;
	width: 50%;
	height: 100%;
	padding: 20px;
}

.mobile-menu {
	float: right;
	width: 35px;
	height: 35px;
	position: relative;
	margin-top: 7px;
}

.menu-line {
	position: absolute;
	background-color: black;
	height: 6px;
	width: 100%;
	border-radius: 10px;
	transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}

.top {
	top: 0%;
}

.middle {
	top: 41.43%;
}

.bottom {
	bottom: 0%;
}

.style-logo {
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	float: left;
	display: block;
}

/* Above the Fold */
.atf-row {
	background-image: url("images/Flower (edit)@0,5x.png");
	background-position: center;
	background-size: cover;
}

.atf-col {
	text-align: center;
	color: white;
	padding: 100px 25px;
	width: 100%;
	display: block;
}

.atf-col h1 {
	font-size: 40px;
	padding-bottom: 50px;
}

.redirect-row {
	margin: 0px;
	padding: 0px;
}

.redirect-col {
	margin: 0px 10%;
	background-color: white;
	width: 80%;
	height: 100px;
	position: relative;
	top: -50px;
	border-bottom: 4px solid #1255B3;
	box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
	display: inline-block;
}

.redirect-col p {
	display: none;
}

.redirect-button {
	text-decoration: none;
	font-size: 20px;
	font-weight: 400;
	color: #FFFFFF;
	background-color: rgba(255,102,0,1.00);
	margin: 32px auto;
	padding: 8px;
	width: 80%;
	text-align: center;
	display: block;
	border-radius: 100px;
}

/* CALL TO ACTION */

.cta-row {
	background-image: url("images/truck_crop1.jpg");
	background-size: cover;
	background-position: 0% 50%;
	background-origin: padding-box;
	text-align: center;
	padding: 12%;
	color: white;
}

.cta-col {
	padding: 40px 60px 10px 60px;
	background-color: white;
	border-radius: 20px;
	text-align: center;
	color: black;
	display: inline-block;
	float: left;
}

/* CALLOUTS */

.single-col {
	text-align: center;

}

.callout {
	padding: 40px;
	text-align: center;
}

.callout img {
	height: 130px;
}

/* Hook */

.hook-row {

}

.hook-card {
	margin: 15px;
	padding: 50px;
	border-bottom: 4px solid #1255B3;
	box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
}

.hook-card h3 {
	color: rgba(255, 102, 0, 1.0);
}

/* Why */

.why-row {
	height: 600px;
}

.why-col {
	width: 100%;
	display: inline-block;
}

.why-text {
	padding: 25px 50px 150px;
 	text-align: left;
}

.why-text p {
}

.why-img {
	height: 200px;
	width: 100%;
	background-size: cover;
	background-image: url("images/Backyard 1 (edit).png");
	background-position: center;
	box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
	display: inline-block;
}

/* How */

.how-row {
	height: 600px;
}

.how-col {
	width: 100%;
	display: inline-block;
}

.how-text {
	padding: 25px 50px 150px;
	text-align: left;
}

.how-img {
	height: 200px;
	width: 100%;
	background-image: url("images/IMG_3087 EDIT 2.png");
	background-position: center;
	background-size: cover;
	box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
	display: inline-block;
}

/* What */

.specialty-row {
	margin: 50px;
	box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
}

.specialty {
	width: 50%;
	padding: 50px;
	text-align: left;
	display: inline-block;
}

.specialty-col {
	width: 50%;
	float: left;
	display: inline-block;
}

.specialty-img {
	width: 80%;
	height: 100%;
	min-height: 200px;
	margin: 50px auto;
	background-image: url("images/IMG_4872.JPG");
	background-position: center;
	background-size: cover;
}

.what-heading {
	padding: 50px 0px 0px 0px;
}

.service-card {
	margin: 50px 50px 100px 50px;
	padding: 50px 50px 0px 50px;
	border-bottom: 4px solid #1255B3;
	box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
}

.service-card h3 {
	color: rgba(255, 102, 0, 1.0);
}

.what-button {
	text-decoration: none;
	font-size: 20px;
	font-weight: 400;
	color: #FFFFFF;
	background-color: rgba(255,102,0,1.00);
	padding: 8px;
	margin: 50px auto;
	width: 100%;
	text-align: center;
	display: block;
	border-radius: 100px;
}

/* TESTIMONIAL */

.testimonial {
	background-image: linear-gradient(#00C9FF 0%, #00AAFF 25%, #008CFF 50%, #006EFF 75%, #005CFF 100%);
	text-align: center;
	color: #FFFFFF;
	padding: 5%;
	min-height: 150px;
	border-bottom-style: solid;
	border-bottom-color: rgba(255,102,0,1.00);
	border-bottom-width: 6px;
}

.testimonial-quote {
    font-size: 30px;
	font-weight: 500;
	font-style: italic;
}

.testimonial-name {
	font-size: 20px;
}

.ourstory-img {
	background-image: url("images/IMG_1269.jpeg");
}

.service {
	text-align: center;
	padding: 20px 20px 20px 20px;
}

.service a {
	text-decoration: none;
	color: #000000;
}

.service:hover {
	background-color: #F9F9F9;
	text-decoration: underline;
}

.service-heading {
	text-align: center;
}

.service img {
	height: 100px;
}

.services-image {
	background-image: url("images/Backyard 2 (edit).png");
	background-size: cover;
	background-position: center;
	height: 500px;
}

.page-header {
	text-align: center;
	color: white;
	background-image: linear-gradient(#00C9FF 0%, #00AAFF 25%, #008CFF 50%, #006EFF 75%, #005CFF 100%);
	padding: 20px 20px 40px 20px;
	border-bottom-style: solid;
	border-bottom-color: rgba(255,102,0,1.00);
	border-bottom-width: 6px;
}

.page-title {
	display: inline-block;
}

.page-title h1{
	font-size: 37px;
	color: #008CFF;
	margin: 0px 12px;
}

.inverse-page-header {
	text-align: center;
	color: #005CFF;
	padding: 20px 20px 40px 20px;
	border-top-style: solid;
	border-top-color: #005CFF;
	border-top-width: 6px;
}

.services-cta p {
	width: 40%;
	display: inline-block;
}

.info-col {
	text-align: center;
	padding: 5%;
}

.info-col p {
	color: #3F3F3F;
}

.grounds-img {
	background-image: url("images/IMG_3087 EDIT 2.png");
	background-position: center;
	background-size: cover;
	height: 500px;
}

.tree-img {
	background-image: url("images/IMG_3087 EDIT 2.png");
	background-position: center;
	background-size: cover;
	height: 500px;
}


.button {
	text-decoration: none;
	font-size: 20px;
	font-weight: 400;
	color: #FFFFFF;
	background-color: rgba(255,102,0,1.00);
	padding: 8px;
	margin: 50px 0px;
	width: 300px;
	text-align: center;
	display: block;
	border-radius: 100px;
}

.button-centered {
	text-decoration: none;
	font-size: 20px;
	font-weight: 400;
	color: #FFFFFF;
	background-color: rgba(255,102,0,1.00);
	padding: 8px;
	margin: 20px auto;
	width: 80%;
	text-align: center;
	display: block;
	border-radius: 100px;
}

.standalone-button {
	text-align: center;
	padding: 0px 0px 60px 0px;
}

.service-icon {
	text-align: center;
	padding: 40px;
}

.service-icon:hover {
	background-color: #008CFF;
}

.service-icon img {
	width: 120px;
}

.service-icon a {
	text-decoration: none;
	color: black;
}

.services h3{
	font-size: 30px;
}

.mini-bar {
	width: 15%;
	height: 3px;
	background-color: #008CFF;
}

.services-col {
	padding: 40px;
	width: 33.33%;
	margin: 0px auto;
}

.spring-bg {
	background-image: url("images/IMG_1269.jpeg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	margin: 40px 0px;
}

.spring-info-box {
	float: right;
	background-color: white;
	width: 80%;
	margin: 50px 25px 50px 0px;
	padding: 20px 20px 40px 20px;
	
}

.img-col-right {
	float: right;
	width: 60%;
	
}

.spring-img {
	background-image: url("images/IMG_1269.jpeg");
	background-size: cover;
	background-position: center;
	height: 500px;
}

.summer-img {
	background-image: url("images/IMG_1269.jpeg");
	background-size: cover;
	background-position: center;
	height: 500px;
}

.autumn-img {
	background-image: url("images/Backyard 2 (edit).png");
	background-size: cover;
	background-position: center;
	height: 500px;
}

.info-box-link {
	color: #000000;
}

.info-box-light {
	padding: 20px;
	height: 500px;
	background-color: #F9F9F9;
	position: relative;
}

.info-box-light p {
	width: 80%;
}

.info-box-light a {
	text-decoration: none;
	color: black;
}

.info-box-img {
	background-size: cover;
	background-position: center;
	height: 500px;
}

.info-box-arrow {
	position: absolute;
	bottom: 0;
}

.info-box-arrow img {
	height: 25px;
	margin: 20px 10px;
}

.spring {
	background-image: linear-gradient(#B9E500 0%, #97E500 25%, #81E500 50%, #6BE500 75%, #5AE500 100%);
}

.summer {
	background-image: linear-gradient(#FFFF00 0%, #FFF200 25%, #FFE000 50%, #FFCE00 75%, #FFBC00 100%);
}

.autumn {
	background-color: #F9F9F9;
}

.quadruple-column {
	width: 100%;
	display: inline-block;
	float: left;
}

.site-map-col {
	width: 50%;
	float: left;
	display: inline-block;
	text-align: center;
	margin-bottom: 20px;
}

.site-map-col h4 {
	padding: 0px 0px 10px 0px;
}

.site-map-col ul {
	list-style-type: none;
}

.site-map-col ul li a {
	text-decoration: none;
	color: #DCDCDC;
	font-size: 16px;
	font-weight: 200;
}

.double-column {
	width: 100%;
}

/* CONTACT */

.index-contact-form {
	width: 100%;
	padding: 80px;
}

.index-contact-form-bg {
	background-image: linear-gradient(#00C9FF 0%, #00AAFF 25%, #008CFF 50%, #006EFF 75%, #005CFF 100%);
}

.index-contact-form h2 {
	margin: 0px 0px 12px 0px;
	text-align: center;
	color: #FFFFFF;
}

#idx-fname {
	background-color: none;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin: 6px 0px;
}

#idx-lname {
	background-color: none;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin: 6px 0px;
}

#idx-phone {
	background-color: none;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin: 6px 0px;
}

#idx-email {
	background-color: none;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin: 6px 0px;
}

#idx-address {
	background-color: none;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin: 6px 0px;
}

#idx-request {
	background-color: none;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 100%;
	height: 100px;
	padding: 6px;
	margin: 6px 0px;
}

#idx-p {
	font-size: 18px;
	margin: 6px 0px;
	float: left;
}

#idx-contact {
	background-color: #FFFFFF;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin: 6px 0px;
	float: left;
}

#idx-reset {
	background-color: #C5C5C5;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 40%;
	padding: 6px;
	margin: 6px 0px;
	float: left;
}

#idx-submit {
	background-color: rgba(255,102,0,1.00);
	border: none;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin: 6px 0px 0px 0px;
}

.contact-form {
	margin: auto;
	max-width: 500px;
	width: 100%;
	margin-bottom: 150px;
 }

.contact-form h2 {
	margin: 0px 0px 20px 0px;
}

.contact-form form p {
	font-size: 18px;
	display: inline-block;
	margin: 6px;
	width: 250px;
}


#fname {
	border: none;
	border-left: solid;
	border-bottom: solid;
	border-width: 2px;
	border-color: #008CFF;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin-bottom: 20px;
	display: inline-block;
	float: left;
}

#lname {
	background-color: none;
	border: none;
	border-left: solid;
	border-bottom: solid;
	border-width: 2px;
	border-color: #008CFF;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin-bottom: 20px;
	display: inline-block;
	float: left;
}

#phone {
	background-color: none;
	border: none;
	border-left: solid;
	border-bottom: solid;
	border-width: 2px;
	border-color: #008CFF;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin-bottom: 20px;
	display: inline-block;
	float: left;
}

#email {
	background-color: none;
	border: none;
	border-left: solid;
	border-bottom: solid;
	border-width: 2px;
	border-color: #008CFF;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin-bottom: 20px;
	display: inline-block;
	float: left;
}

#address {
	background-color: none;
	border: none;
	border-left: solid;
	border-bottom: solid;
	border-width: 2px;
	border-color: #008CFF;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin-bottom: 20px;
	display: inline-block;
	float: left;
}

#request {
	background-color: none;
	border: none;
	border-left: solid;
	border-bottom: solid;
	border-width: 2px;
	border-color: #008CFF;
	font-size: 18px;
	color: #000000;
	width: 100%;
	height: 100px;
	padding: 6px;
	margin-bottom: 20px;
	display: inline-block;
	float: left;
}

#contact {
	margin-bottom: 20px;
	padding: 6px;
	width: 33.33%;
	float: right;
}

.input-tel {
	background-color: #F9F9F9;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 40%;
	padding: 6px;
	margin: 6px;
}

.input-email {
	background-color: #F9F9F9;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 40%;
	padding: 6px;
	margin: 6px;
}

.input-address {
	background-color: #F9F9F9;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin: 6px;
}

.input-textarea {
	background-color: #F9F9F9;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 80%;
	height: 72px;
	padding: 6px;
	margin: 6px;
}

.input-contact {
	background-color: #F9F9F9;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 40%;
	padding: 6px;
	margin: 6px;
}

.input-reset {
	background-color: #C5C5C5;
	border: none;
	font-size: 18px;
	color: #000000;
	width: 250px;
	padding: 6px;
	margin: 6px;
}

.input-submit {
	background-color: rgba(255,102,0,1.00);
	border: none;
	font-size: 18px;
	color: #000000;
	width: 100%;
	padding: 6px;
}

.contact-sub-header {
	text-align: center;
	padding: 40px;
}

.contact-sub-header p {
	font-size: 24px;
}

/* EMAIL SIGN UP */

.email-sign-up {
	width: 100%;
	float: left;
}

.email-sign-up p {
	margin: 0px;
	
}

#input-email-footer {
	background-color: #303030;
	border: solid;
	border-color: #008CFF;
	border-width: 2px;
	font-size: 18px;
	color: #FFFFFF;
	width: 300px;
	padding: 6px;
}

#input-submit-footer {
	background-image: url("images/Arrow-White-01.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #303030;
	border: none;
	padding: 15px;
	font-size: 18px;
	margin-left: 6px;
}

.copyright {
	text-align: center;
	margin-top: 80px;
}

.copyright p {
	font-size: 16px;
}

/* OUR STORY TIMELINE */

.event-col-left {
	width: 50%;
	float: left;
	padding: 0px 10px;
}

.event-col-right {
	width: 50%;
	float: right;
	padding: 0px 10px;
}

.center-col {
	width: 50px;
	margin: 0px auto;
}

.dot {
	border: solid;
	border-color: black;
	border-width: 2px;
	border-radius: 10px;
	width: 20px;
	height: 20px;
	margin: 20px auto;
}

.line {
	background-color: black;
	width: 2px;
	height: 100px;
	margin: 0 auto;
}

.address-heading {
	font-weight: 450;
	margin-bottom: -15px;
}

.event-col {
	width: 80%;
	margin: 0 auto;
}

.event-date {
	margin: -10px 20px;
	font-size: 16px;
	color: rgba(255,102,0,1.00);
}

.year {
	text-align: center;
}

.serv-button {
	text-decoration: none;
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	color: #FFFFFF;
	background-color: rgba(255,102,0,1.00);
	padding: 6px 15%;
	margin: 20px;
	display: block;
}

/* SERVICE DYNAMIC PAGE */

.service-image {
	background-image: url("images/Backyard 2 (edit).png");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 500px;
}

.triple-column {
	width: 100%;
	float: left;
}

.quintuple-column {
	width: 20%;
	display: inline-block;
	float: left;
}

.serv-icon {
	width: 15%;
	margin: 2%;
	float: left;
}

.service-section {
	
}

.serv-sect-heading {
	margin: auto 0px;
	font-size: 40px;
}

.all_services_cta {
	background-image: url("images/IMG_1269.jpeg");
	background-size: cover;
	background-position: top;
	text-align: center;
	padding: 11% 20px;
	color: white;
}

.service_list {
	width: 100%;
	text-align: left;
	margin: 0px 20px;
}

.service_list tr td h2 {
	font-size: 20px;
	margin: 2px 0px;
}

.service_list tr td img {
	width: 30px;
}

/* User Log In --> */

.log-in-row {
	height: 100vh;
	position: relative;
}

.log-in {
	width: 400px;
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#usr-email {
	border: none;
	font-size: 20px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin-bottom: 10px
	
}

#usr-pwd {
	border: none;
	font-size: 20px;
	color: #000000;
	width: 100%;
	padding: 6px;
	margin-bottom: 10px;
}

#usr-submit {
	background-color: rgba(255,102,0,1.00);
	border: none;
	font-size: 20px;
	color: #000000;
	width: 100%;
	padding: 6px;
}

/* <-- User Log In */

/* Contact --> */

.contact-bg {
	background-image: url("images/Wavey BG-01.png");
	background-position: bottom;
	background-size: cover;
}

.contact-col {
	width: 50%;
	float: right;
	padding: 40px;
}

.contact-info {
	width: 50%;
	float: left;
	padding: 40px;
}

.contact-info h2 {
	margin: 0px 0px 20px 0px;
}

/* <-- Contact */

.border {
	background-image: linear-gradient(#00C9FF 0%, #00AAFF 25%, #008CFF 50%, #006EFF 75%, #005CFF 100%);
	padding: 0px, 0px, 2px, 2px;
	width: 100%;
}

/* Service As Needed Section */

.layered-col-row {
	height: 90vh;
	background-size: cover;
	background-position: center;
}

.san-img {
	background-image: url("images/Path (edit).png")
}

.layered-col-right {
	background-color: #008CFF;
	width: 50%;
	float: right;
}

.layered-col-heading {
	background-color: rgba(255,102,0,1.00);
	color: #FFFFFF;
	padding: 6px 24px;
	margin: 0px;
	margin-top: 48px;
	margin-bottom: 24px;
	position: relative;
	transform: translateX(-33.33%);
	font-size: 40px;
	font-weight: 600;
	display: inline-block;
}
.layered-col-sub-heading {
	text-align: left;
	margin: 24px 24px 24px 48px; 
	color: #FFFFFF;
}

.layered-col-body {
	width: 66.66%;
	margin: 24px 24px 48px 48px;
	color: #FFFFFF;
}

/* Signup Page */

.signup-row {
	height: 100vh;
	padding: 10%;
	background-image: linear-gradient(#FFBC00, #FF0C00);
}

.signup-col {
	margin: 0px auto;
	padding: 5%;
	text-align: center;
	background-color: white;
}

.signup-col h1 {
	margin: 0px;
	padding-bottom: 50px;
}

.su-form label {
	font-size: 16px;
}

.input-field {
	width: 100%;
	font-size: 20px;
	margin-bottom: 20px;
	padding: 4px;
	border: none;
	border-bottom: solid grey;
	border-bottom-width: 2px;
	border-radius: 0px;
}

.input-field:hover {
	border-bottom: solid #00C9FF;
}


.input-field:focus {
	border-bottom: solid #008CFF;
}

.input-field:valid {
	border-bottom: solid #FF6600;
}

.submit {
	width: 100%;
	font-size: 20px;
	color: white;
	margin-top: 40px;
	padding: 6px 100px;
	border: none;
	border-radius: 0px;
	background-image: linear-gradient(90deg, #FF0C00 0%, #FFBC00 100%);
	text-decoration: none;
}

/* Login Page */

.login-col {
	margin: 5%;
}

/* Management Portal */

.full-page-form-col {
	margin: 20px;
}

.full-page-form-col form fieldset {
	padding: 2%;
	margin-bottom: 5%;
}

.content-row {
	padding: 50px;
	width: 85%;
	float: right;
}

::placeholder {
	color: grey;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 	color: grey;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: grey;
}

.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}

/* Tablet View */

@media only screen and (min-width: 768px) {
	
	.cta-col {
		text-align: left;
	}
	
	.banner {
		background-color: #008CFF;
		padding: 6px 20px;
		text-align: right;
		color: #FFFFFF;
	}
	
	.banner p {
		margin: 0px;
		font-size: 14px;
		font-weight: 450;
	}
	
	.desktop-menu {
		display: block;
	}
	
	.desktop-menu ul {
		list-style-type: none;
		float: right;
	}
	
	.desktop-menu ul li {
		text-decoration: none;
		font-size: 18px;
		color: #000000;
		text-align: center;
		padding: 4px;
		display: inline-block;
	}
	
	.mobile-menu {
		display: none;
	}
	
	.redirect-col {
		margin: 0px auto;
		background-color: white;
		width: 75%;
		height: 100px;
		position: relative;
		top: -50px;
		border-bottom: 4px solid #1255B3;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
		display: block;
	}

	.redirect-col p {
		float: left;
		line-height: 1;
		font-size: 30px;
		font-weight: 500;
		font-style: normal;
		margin: 35px 50px;
		color: black;
		display: block;
	}

	.redirect-button {
		float: right;
		text-decoration: none;
		font-size: 20px;
		font-weight: 400;
		color: #FFFFFF;
		background-color: rgba(255,102,0,1.00);
		margin: 32px 50px;
		padding: 8px;
		width: 200px;
		text-align: center;
		display: block;
		border-radius: 100px;
	}
	
	.hook-card {
		margin: 50px 100px 100px 100px;
		padding: 50px;
		border-bottom: 4px solid #1255B3;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
	}
	
	/* Why */

	.why-row {
		height: 600px;
	}

	.why-col {
		width: 50%;
		height: 100%;
		position: relative;
		display: inline-block;
	}

	.why-text {
		padding: 150px;
		position: absolute;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.why-text p {
	}

	.why-img {
		height: 100%;
		width: 50%;
		background-size: cover;
		background-image: url("images/Backyard 1 (edit).png");
		background-position: center;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
		display: inline-block;
		float: right;
	}

	/* How */

	.how-row {
		height: 600px;
	}

	.how-col {
		width: 50%;
		height: 100%;
		position: relative;
		display: inline-block;
		float: right;
	}

	.how-text {
		padding: 150px;
		position: absolute;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.how-img {
		background-image: url("images/IMG_3087 EDIT 2.png");
		background-position: center;
		background-size: cover;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
		height: 100%;
		width: 50%;
		display: inline-block;
	}
	
	/* What */
	
	.specialty-row {
		margin: 50px;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
	}

	.specialty {
		width: 50%;
		padding: 50px;
		text-align: left;
		display: inline-block;
	}

	.specialty-col {
		width: 50%;
		float: left;
		display: inline-block;
	}

	.specialty-img {
		width: 80%;
		height: 100%;
		min-height: 200px;
		margin: 50px auto;
		background-image: url("images/IMG_4872.JPG");
		background-position: center;
		background-size: cover;
	}
	
	.service-card {
		margin: 50px 50px 100px 50px;
		padding: 50px 50px 0px 50px;
		border-bottom: 4px solid #1255B3;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
		min-height: 650px;
	}

	.double-column {
		width: 50%;
		display: inline-block;
		float: left;
	}
	
	.double-column-left {
		width: 50%;
		display: inline-block;
		float: right;
	}
	
	.quadruple-column {
		width: 50%;
		display: inline-block;
		float: left;
	}
	
	.index-contact-form {
		width: 50%;
		padding: 80px;
		margin: 5% auto;
	}
	
	.index-contact-form-bg {
	}
	
	#idx-contact {
		background-color: #F9F9F9;
		border: none;
		font-size: 18px;
		color: #000000;
		width: 30%;
		padding: 6px;
		margin: 6px 0px;
		float: right;
	}
	
	.event-col {
		width: 65%;
		margin: 0 auto;
	}
	
	.site-map-col {
		width: 12%;
		display: inline-block;
		text-align: left;
	}
	
	.email-sign-up {
		width: auto;
		float: right;
	}
	
/* Why */
	
	.col {
	
	}
	
	footer {
		padding: 80px 80px 20px 80px;
	}
	
/* What */
	
	.icon {
		width: 200px;
	}
	
	/* Signup Page */

	.signup-row {
		
	}

	.signup-col {
		width: 50%;
		position: absolute;
  		top: 50%;
  		left: 50%;
  		transform: translate(-50%, -50%);
		
	}

	.input-field {
		width: 100%;
		margin-bottom: 20px;
		padding: 4px;
	}
	
	/* Login Page */

	.login-col {
		margin: 0px auto;
		width: 33%;
		position: absolute;
  		top: 50%;
  		left: 50%;
  		transform: translate(-50%, -50%);
	}
	
	.full-page-form-col {
		margin: 5%;
	}
}

/* Desktop View */

@media (min-width: 1200px) {
	
	.atf-col {
		text-align: center;
		color: white;
		padding: 250px 200px;
		width: 100%;
		display: block;
	}

	.atf-col h1 {
		font-size: 70px;
	}
	
	.button-centered {
		text-decoration: none;
		font-size: 20px;
		font-weight: 400;
		color: #FFFFFF;
		background-color: rgba(255,102,0,1.00);
		padding: 8px;
		margin: 50px auto;
		width: 300px;
		text-align: center;
		display: block;
		border-radius: 100px;
	}
	
	.redirect-col {
		margin: 0px auto;
		background-color: white;
		width: 60%;
		height: 100px;
		position: relative;
		top: -50px;
		border-bottom: 4px solid #1255B3;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
		display: block;
	}

	.redirect-col p {
		float: left;
		line-height: 1;
		font-size: 30px;
		font-weight: 500;
		font-style: normal;
		margin: 35px 50px;
		color: black;
		display: block;
	}

	.redirect-button {
		float: right;
		text-decoration: none;
		font-size: 20px;
		font-weight: 400;
		color: #FFFFFF;
		background-color: rgba(255,102,0,1.00);
		margin: 32px 50px;
		padding: 8px;
		width: 200px;
		text-align: center;
		display: block;
		border-radius: 100px;
	}
	
	.hook-card {
		margin: 2% 4% 4% 4%;
		padding: 50px;
		border-bottom: 4px solid #1255B3;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
	}
	
	/* Why */

	.why-row {
		height: 600px;
	}

	.why-col {
		padding: 0px;
		margin: 0px;
		width: 50%;
		height: 100%;
		position: relative;
		display: inline-block;
	}

	.why-text {
		padding: 0px;
		margin: 0px auto;
		width: 500px;
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.why-text p {
	}

	.why-img {
		height: 100%;
		width: 50%;
		background-size: cover;
		background-image: url("images/Backyard 1 (edit).png");
		background-position: center;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
		display: inline-block;
		float: right;
	}

	/* How */

	.how-row {
		height: 600px;
	}

	.how-col {
		padding: 0px;
		margin: 0px;
		width: 50%;
		height: 100%;
		position: relative;
		display: inline-block;
		float: right;
	}

	.how-text {
		padding: 0px;
		margin: 0px auto;
		width: 500px;
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.how-img {
		background-image: url("images/IMG_3087 EDIT 2.png");
		background-position: center;
		background-size: cover;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
		height: 100%;
		width: 50%;
		display: inline-block;
	}
	
	.service-card {
		margin: 50px;
		padding: 60px;
		border-bottom: 4px solid #1255B3;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
		min-height: 650px;
		position: relative;
	}
	
	.service-card p {
		max-width: 300px;
	}
	
	.service-card a {
		position: absolute;
		bottom: 50px;
		margin: 0px auto;
		width: 250px;
	}
	
	.triple-column {
		width: 33.33%;
		display: inline-block;
		margin: 0px auto;
	}
	
	.event-col {
		width: 50%;
		margin: 0 auto;
	}
	
	.quadruple-column {
		width: 25%;
		display: inline-block;
		float: left;
	}
	
	.signup-col {
		width: 33%;
	}
	
	/* What */
	
	.specialty-row {
		margin: 50px;
		box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
	}

	.specialty {
		padding: 50px;
		margin: 0px;
		width: 500px;
		position: absolute;
		left: 0;
		right: 0;
		top: 200px;
		-ms-transform: translateY(-200px);
		transform: translateY(-200px);
	}

	.specialty-col {
		width: 50%;
		float: left;
		position: relative;
		display: inline-block;
	}

	.specialty-img {
		width: 80%;
		height: 400px;
		margin: 50px;
		background-image: url("images/IMG_4872.JPG");
		background-position: center;
		background-size: cover;
		float: right;
	}
}