@charset "utf-8";
/* CSS Document */

	#content-body {
		grid-template-columns: 99%; /* images do not resize properly inside fr grid template areas especially in a single column layout */
		/* hiding the last row by making the height 0 is not working so use it */
		grid-template-rows: auto 300px auto 360px auto auto 320px;
		grid-template-areas:
			"content-main"
			"blank-1"
			"benefits-main"
			"blank-2"
			"highlights"
			"sidebar"
			"deco_custom-1"
			;
			gap: 0px;
	}	

	#layout_content-main {
		padding-bottom: 60px;
	}	

	#layout_content-highlights {
		padding-top: 60px;
	}
	
	
	@media (min-width: 660px) {
		#content-body {
			grid-template-columns: 1fr .6fr;
			grid-template-rows: auto 360px auto 400px auto;
			grid-template-areas:
				"content-main	content-main"
				"blank-1 		blank-1"
				"benefits-main 	blank-2"
				"deco_custom-1	blank-2"
				"highlights 	sidebar"
				;
			gap: 0px;
		}
		
		#layout_content-main {
			margin-bottom: 80px;
		}

		#layout_content-highlights { /* add more space above - cannot be achieved with template rows */
			padding-top: 100px;
		}		
		
	}	

	
	@media (min-width: 780px) {
		#content-body {
			grid-template-columns: .6fr 1.4fr .2fr 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"deco_custom-1	content-main 	content-main 	blank-1"
				"blank-2		benefits-main 	benefits-main 	sidebar"
				"highlights 	highlights 		highlights 		sidebar"
				;
			gap: 0px;
		}
		
		#layout_content-main {
			margin: 0px;
		}
			
	}
	
	@media (min-width: 900px) {
		#content-body {
			grid-template-columns: 1.2fr 1.2fr 1fr .6fr 1.3fr;
			grid-template-rows: auto;
			grid-template-areas:
				"deco_custom-1	content-main 	content-main 	content-main 	blank-1"
				"blank-2		benefits-main 	benefits-main 	sidebar 		sidebar"
				"highlights 	highlights 		highlights 		sidebar 		sidebar"
				;
		}
	}