/* STYLES FOR RESPONSIVE DESIGN */

/* Breakpoint at browser width of 700px */


@media only screen and (max-width: 700px) {

	h1 {font-size: 60px;
		}

	h3 {padding: 50px 15px 0px 15px;
		}


	/* IDs -------------------------- */

	#email-address {display: none;
					}

	#email-address-mobile {display: block;
							}

	#footer-contact {margin-bottom: 50px;
						}

	#footer-container {padding: 10% 10%;
						}

	#google-maps-container {height: fit-content;
							}

	#google-maps-embed {float: unset;
						width: 100%;
						height: 400px;
						margin: auto;
						}

	#header {background: #fff;
				}

	#map-text {padding-left: 10px;
				}

	#services-list {margin-left: -10px;
					}

	#social-icon-container {padding-top: 35px;
							float: unset;
							margin: auto;
							}

	#top-logo {display: none;
				}

	#top-logo-mobile {max-height: 160px;
						width: 100%;
						display: block;
						}

	


	/* CLASSES ----------------------- */

	.copyright-text {margin-top: 40px;
						}			

	.homepage-button {font-size: 16px;
						margin: auto;
						}

	.homepage-callout {margin: 0px 10%;
						padding-top: 30%;
						}

	.homepage-callout-right {float: unset;
								}

	#index-image-02 > div > a > .homepage-button {float: unset!important;
													}

	.nav-item {padding: 10px 20px;
				font-size: 15px;
				}

	.product-logo {max-width: 150px;
					}

	#index-image-02 > div > .text-right {text-align: unset;
											}

}



/* Adjustments for exrta-small screens: less than 400px */

@media only screen and (max-width: 400px) {


	h3 {font-size: 35px;
			line-height: 35px;
			padding-top: 40px;
			}


	/* IDs -------------------------- */

	#email-address-mobile {font-size: 30px;
							}

	#services-list {font-size: 18px;
					margin-left: -15px;
					}


	/* CLASSES ----------------------- */	

	.copyright-text {padding: 0px 20px
						}

	.homepage-callout {margin: 0px;
						}

	.homepage-callout > h1 {margin: 0px 20px;
								}

	.homepage-callout > h2 {margin: 20px 20px 0px 20px;
								}

	.nav-item {padding: 10px 10px;
				font-size: 14px;
				}

	.product-logo {max-width: 120px;
					}

	.section-headline {font-size: 46px;
						line-height: 40px;
						padding: 30px 20px;
						overflow-x: hidden;
						}

	.standard-copy {font-size: 14px;
					padding: 30px 25px;
					}

}