/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.spg_content .product_container {
 	display: flex;
	flex-direction: column;
 	grid-gap: 16px;
}

.spg_content .product_image {
	max-width: 100%;
}

.spg_content .product_image_container {
	text-align: center;
}

.spg_content .product_image_container p {
	margin: 0;
}

.spg_content .product_text_container h2 {
	display: none;
}
	
.go-left {
	width: 100%;
	padding: 0 1em;	
}

.go-left h2 {
	text-align: left;
}

.go-left .product_image_container {
	text-align: center;
}
 
.go-right {
	width: 100%;
	padding: 0 1em;			
}

@media only screen and (min-width: 1024px) {
	.spg_content .product_container {
	   flex-direction: row;
	   margin-bottom: 4rem;
   	}

	.spg_content .product_container:nth-child(odd) {
		flex-direction: row-reverse;
	}

	.spg_content .product_image_container {
	   width: 40%;
	   flex: 0 0 auto;
	}

	.spg_content .product_image_container h2 {
		display: none;
	}

	.spg_content .product_text_container h2 {
		display: block;
		margin: 0;
		/*font-size: 2.5rem;*/
        /*line-height: 1;*/
    	color: #02344F;
        font-family: "Montserrat", Sans-serif;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.6em;
	}

	.spg_content .product_text_container p {
		/*font-size: 1.2rem;*/
		/*line-height: 130%;*/
        color: #000000;
        font-family: "Montserrat", Sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.6em;
	}	
}

@media only screen and (min-width: 768px) {
	.row p, .row span, .row .address {
		font-size: 110%
	}
	
	.go-left {
		/*
		width: 50%;
		float: left;
		*/
		width: 60%;
    	margin: 0 auto;
	}

	.go-left h2 {
		text-align: center;
	}
	
	.go-left .product_image_container {
		/*text-align: left;*/
	}
	
	.go-right {
		width: 50%;
		float: right;
	}
}

.form-success {
	padding: 1em 0;
	margin-bottom: 1em;
	font-size: 90%;
	text-align: center;
	border: 1px solid #666666;
	background-color: #eeffdd;
}
	
.form-error {
	padding: 1em 0;
	margin-bottom: 1em;
	font-size: 90%;
	text-align: center;
	border: 1px solid #666666;
	background-color: #ffeeed;
}

.contact {
	padding: 0 0 0.5em 0;
}

.contact.header {
	padding: 0;
	text-align: center;
}

.contact textarea {
	height: 6em;
}

.contact input, .contact textarea {
	width: 100%;	
}

#google_map {
	width: 100%; 
	height: 400px
}

.address {
	padding-bottom: 0.4em;
}

.address strong {
	width: 10em;
	display: inline-block;
}

#locations_table {
	width: 100%;
	border: 0;
}

#locations_table tr:nth-of-type(odd) {
    background-color: #eef1fb;
}

#locations_table tr:nth-of-type(even) {
    background-color: #ffffff;
}

#locations_table td {
	width: 50%;
	border: 0;
}

#locations_table td:nth-of-type(odd) {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

#locations_table td:nth-of-type(even) {
    border-bottom: 1px solid #ddd;
}

#locations_table thead td:first-child {
	border: 0;
	background-color: #ffffff;
}

#locations_table h2 {
	color: #333333;
	margin-top: 22px;
    margin-bottom: 22px;
}

#locations_table img {
	height: 50px;
}

#locations_table h4 {
	color: #333333;
	font-weight: bold;
}