* {
  box-sizing: border-box;
}

@media (width >= 992px) { /* laptop and larger screens*/

.container {
		display: grid;
		grid-template-columns: repeat(12, [col-start] 1fr);
		grid-template-areas:
		"space space space space space space space space space space space space"
		"menu menu menu menu menu menu menu menu menu menu menu menu"
		"header header header header header header header header header header header header"
		"title title title title title title title title title title title title"
		"up_content1 up_content1 up_content1 up_content1 up_content2 up_content2 up_content2 up_content2 up_content3 up_content3 up_content3 up_content3"
		"bd_content bd_content bd_content bd_content bd_content bd_content bd_content bd_content bd_content bd_content bd_content bd_content"
		"yl_search yl_search yl_search pk_search pk_search pk_search bl_search bl_search bl_search wi_search wi_search wi_search"
		"lw_content lw_content lw_content lw_content lw_content lw_content lw_content lw_content lw_content lw_content lw_content lw_content"
		"footer footer footer footer footer footer footer footer footer footer footer footer";
		column-gap: 1px;
		background-image: url(PhotoGray_bg_c-1.jpg);
		row-gap: 20px;
		position: relative;
		top: 0px;
		max-width: 53%;
		min-width: 0%;
		margin: auto;
	}
	.space{
		display: none;
/*		grid-area: space;
		grid-column: span 2;
		background-image: url(PhotoGray_bg_c-1.jpg);
		height: 20px;
		max-width: 100%;*/
	}
	.menu{
		grid-area: menu;
		grid-column: col-start / span 12;
		background-image: url(PhotoGray_nav_bg.jpg);
		border: solid 1px #999;
	}	

	.header{
		grid-area: header;
		grid-column: col-start / span 12;
	}
	.title{
		grid-area: title;
		grid-column: col-start / span 12;
	}
	.up_content1{
		grid-area: up_content1;
		grid-column: col-start / span 4;
	}
	.up_content1 a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.up_content1 a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.up_content1 a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}
	.up_content2{
		grid-area: up_content2;
		grid-column: col-start 5 / span 4;
	}
	.up_content2 a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.up_content2 a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.up_content2 a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}
	.up_content3{
		grid-area: up_content3;
		grid-column: col-start 9 /span 4;
	}
	.up_content3 a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.up_content3 a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.up_content3 a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}
	.bd_content{
		grid-area: bd_content;
		grid-column: col-start / span 12;
	}
	.yl_search{
		grid-area: yl_search;
		grid-column: col-start / span 3;
		align-content: center;
	}
	.pk_search{
		grid-area: yl_search;
		grid-column: col-start 4 / span 3;
		align-content: center;
	}
	.bl_search{
		grid-area: yl_search;
		grid-column: col-start 7 / span 3;
		align-content: center;
	}
	.wi_search{
		grid-area: yl_search;
		grid-column: col-start 10 / span 3;
		align-content: center;
	}
	
	.lw_content {
	  grid-area: lw_content;
	  grid-column: col-start / span 12;
	}
	.lw_content a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.lw_content a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.lw_content a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}

	.footer {
	  grid-area: footer;
	  grid-column: col-start / span 12;
	}
	  /* for a fixed horizontal nav bar menu as George had it*/
	.navigation #myLinks {
		display: inline-block;
		position: relative;
	}
	.navigation {
		line-height: 30px;
		margin-top: 2px;
		margin-bottom: 2px;
		text-align: center;
}
	.navigation a:link{
		color: rgb(203, 203, 203);
		font-family: Futura, 'Trebuchet MS', sans-serif;
		text-transform: uppercase;
		font-size: 14px;
		text-decoration: none;
		text-align: center;
		padding: 0px 10px 0px 10px;
		display: inline-block;
	}
		.navigation a:visited{ /* overrides default lnk styling*/
		color: rgb(203, 203, 203);
		text-decoration: none;
	}
	.navigation a:hover{
		color: rgb(189, 37, 44);
		text-decoration: none;
	}

	/* Style the active link (or home/logo) */
/*	.active {
		color: black;
	}*/
/* Style the hamburger menu */
	.navigation a.icon {
		display: none;
		background: transparent;
		position: absolute;
		right: 0px;
		top: 0px;
	}
	
	.copyright{
		position: relative;
		top: 10px;
		margin: auto;
		padding: 2% 2% 0% 2%;
	}
}
@media (576px < width < 992px) { /* intermediate screens including cell phones on landscape*/

.container {
		display: grid;
		grid-template-columns: repeat(12, [col-start] 1fr);
		grid-template-areas:
		"space space space space space space space space space space space space"
		"menu menu menu menu menu menu menu menu menu menu menu menu"
		"header header header header header header header header header header header header"
		"title title title title title title title title title title title title"
		"up_content1 up_content1 up_content1 up_content1 up_content2 up_content2 up_content2 up_content2 up_content3 up_content3 up_content3 up_content3"
		"bd_content bd_content bd_content bd_content bd_content bd_content bd_content bd_content bd_content bd_content bd_content bd_content"
		"yl_search yl_search yl_search pk_search pk_search pk_search bl_search bl_search bl_search wi_search wi_search wi_search "
		"lw_content lw_content lw_content lw_content lw_content lw_content lw_content lw_content lw_content lw_content lw_content lw_content"
		"footer footer footer footer footer footer footer footer footer footer footer footer";
		column-gap: 1px;
		background-image: url(PhotoGray_bg_c-1.jpg);
		row-gap: 20px;
		position: relative;
		top: 0px;
		max-width: 100%;
		min-width: 0%;
		margin: auto;
	}
	.space{
		display: none;
/*		grid-area: space;
		grid-column: span 2;
		background-image: url(PhotoGray_bg_c-1.jpg);
		height: 20px;
		max-width: 100%;*/
	}
	.menu{
		grid-area: menu;
		grid-column: span 12;
		background-image: url(PhotoGray_nav_bg.jpg);
		border: solid 1px #999;
	}	

	.header{
		grid-area: header;
		grid-column: span 12;
	}
	.title{
		grid-area: title;
		grid-column: span 12;
	}
	.up_content1{
		grid-area: up_content1;
		grid-column: col-start / span 4;
	}
	.up_content1 a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.up_content1 a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.up_content1 a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}	
	.up_content2{
		grid-area: up_content2;
		grid-column: col-start 5 / span 4;
	}
	.up_content2 a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.up_content2 a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.up_content2 a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}
	.up_content3{
		grid-area: up_content3;
		grid-column: col-start 9 /span 4;
	}
	.up_content3 a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.up_content3 a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.up_content3 a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}
	.bd_content{
		grid-area: bd_content;
		grid-column: span 12;
	}
	.yl_search{
		grid-area: yl_search;
		grid-column: col-start / span 3;
		align-content: center;
	}
	.pk_search{
		grid-area: yl_search;
		grid-column: col-start 4 / span 3;
		align-content: center;
	}
	.bl_search{
		grid-area: yl_search;
		grid-column: col-start 7 / span 3;
		align-content: center;
	}
	.wi_search{
		grid-area: yl_search;
		grid-column: col-start 10 / span 3;
		align-content: center;
	}
	
	.lw_content {
	  grid-area: lw_content;
	  grid-column: span 12;
	}
	.lw_content a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.lw_content a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.lw_content a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}
	.footer {
	  grid-area: footer;
	  grid-column: span 12;
	}
	  /* for a fixed horizontal nav bar menu as George had it*/
	.navigation #myLinks {
		display: inline-block;
		position: relative;
	}
	.navigation {
		line-height: 30px;
		margin-top: 2px;
		margin-bottom: 2px;
		text-align: center;
}
	.navigation a:link{
		color: rgb(203, 203, 203);
		font-family: Futura, 'Trebuchet MS', sans-serif;
		text-transform: uppercase;
		font-size: 14px;
		text-decoration: none;
		text-align: center;
		padding: 0px 10px 0px 10px;
		display: inline-block;
	}
	.navigation a:visited{ /* overrides default lnk styling*/
		color: rgb(203, 203, 203);
		text-decoration: none;
	}	
	.navigation a:hover{
		color: rgb(189, 37, 44);
		text-decoration: none;
	}

	/* Style the active link (or home/logo) */
/*	.active {
		color: black;
	}*/
/* Style the hamburger menu */
	.navigation a.icon {
		display: none;
		background: transparent;
		position: absolute;
		right: 0px;
		top: 0px;
	}
	
	.copyright{
		position: relative;
		top: 10px;
		margin: auto;
		padding: 2% 2% 0% 2%;
	}
}
@media (width <= 576px) { /*phone screens as portrait*/

	.container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
		"space space space space space space"
		"menu menu menu menu menu menu"
		"header header header header header header"
		"title title title title title title"
		"up_content1 up_content1 up_content1 up_content1 up_content1 up_content1 "
		"up_content2 up_content2 up_content2 up_content2 up_content2 up_content2"
		"up_content3 up_content3 up_content3 up_content3 up_content3 up_content3"
		"bd_content bd_content bd_content bd_content bd_content bd_content"
		"yl_search yl_search yl_search pk_search pk_search pk_search"
		"bl_search bl_search bl_search wi_search wi_search wi_search"
		"lw_content lw_content lw_content lw_content lw_content lw_content "
		"footer footer footer footer footer footer";
		max-width: 90%;
		background-image: url(PhotoGray_bg_c-1.jpg);
		margin: auto;
		column-gap: 2px;
		row-gap: 20px;
	}
	.space{
		display: none;
	}
	.menu{
		grid-area: menu;
		grid-column: span 6;
		position: absolute;
		top: 0px;
		right: 0px;
	}
	.header{
		grid-area: header;
		grid-column: span 6;
		z-index: 0;
	}
	.title{
		grid-area: title;
		grid-column: span 6;
		z-index: 0;
	}
	.up_content1{
		grid-area: up_content1;
		grid-column: span 6;
	}
	.up_content1 a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.up_content1 a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.up_content1 a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}
	.up_content2{
		grid-area: up_content2;
		grid-column: span 6;
	}
	.up_content2 a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.up_content2 a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.up_content2 a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}
	.up_content3{
		grid-area: up_content3;
		grid-column: span 6;
	}
	.up_content3 a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.up_content3 a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.up_content3 a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}
	.bd_content{
		grid-area: bd_content;
		grid-column: span 6;
	}
	.yl_search{
		grid-area: yl_search;
		grid-column: 1 / span 3;
		padding: 0% 0% 0% 10%;
	}
	.pk_search{
		grid-area: pk_search;
		grid-column: 4 / span 3;
		padding: 0% 10% 0% 0%;
	}
	.bl_search{
		grid-area: bl_search;
		grid-column: 1 / span 3;
		padding: 0% 0% 0% 10%;
	}
	.wi_search{
		grid-area: wi_search;
		grid-column: 4 / span 3;
		padding: 0% 10% 0% 0%;
	}
	
	.lw_content {
	  grid-area: lw_content;
	  grid-column: span 6;
	}
	.lw_content a:link{
		color: rgb(203, 203, 203);
		text-decoration: none;
	}

	.lw_content a:visited {
		color: rgb(121, 121, 124);
		text-decoration: none;
	}
	.lw_content a:hover {
		color: rgb(189, 37, 44);
		text-decoration: none;
	}
	.footer {
	  grid-area: footer;
	  grid-column: span 6;
	}
	  /* for a vertical mobile hamburger menu*/
/* Hide the links inside the navigation menu (except for logo/home) */
	.navigation #myLinks {
		display: none;
	}
	.navigation {
		overflow: visible;
		background: rgb(100, 100, 100); /*the background for the links when displayed*/
		max-width: 25%;
		position: relative;
		z-index: 1;
		float: right; /*together, these lines make a right side, narrow menu*/
	}

/* Style navigation menu links */
	.navigation a:link{
		padding: 5px 5px; /*top and bottom then right and left*/
		text-decoration: none;
		font-family: Futura, 'Trebuchet MS', sans-serif;
		color: rgb(203, 203, 203);
		float: left;
		font-size: 14px;
		line-height: 15px;
		z-index: 1;
/*		display: block;*/
	}
	.navigation a:visited{ /* overrides default lnk styling*/
		color: rgb(203, 203, 203);
		text-decoration: none;
	}	
	.navigation a:hover{
		color: rgb(189, 37, 44);
		text-decoration: none;
	}

	/* Style the active link (or home/logo) */
/*	.active {
		background: transparent;
		color: rgb(189, 37, 44);
	}*/

/* Style the hamburger menu */
	.navigation a.icon {
		background: transparent;
		display: block;
		position: absolute;
		right: 0px;
		top: 0px;
	}
	.copyright{
		position: relative;
		top: 10px;
		margin: auto;
		padding: 2% 2% 0% 2%;
	}
}

.copyright_style {
	color: rgb(255, 255, 255);
    font-family: 'Futura-MediumItalic', 'Futura', 'Trebuchet MS', sans-serif;
    font-size: 12px;
    font-stretch: normal;
    font-style: italic;
    font-variant: normal;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 16px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}
.paragraph_style {/* Wildflowers of New Mexico Title Text*/
    color: rgb(255, 255, 255);
    font-family: 'Papyrus';
    font-size: 30px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 56px;
    margin-bottom: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.paragraph_style_1 {/* Family Names*/
    color: rgb(255, 255, 255);
    font-family: 'Verdana', sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 18px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: left;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}
.paragraph_style_3 {/* main page title*/
    color: rgb(255, 255, 255);
    font-family: 'Skia-Regular', 'Skia', 'Trebuchet MS', sans-serif;
    font-size: 24px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 29px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}
.paragraph_style_4 {
    color: rgb(255, 255, 255);
    font-family: 'Verdana', sans-serif;
    font-size: 18px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 22px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}

.paragraph_style_6 {
    color: rgb(255, 255, 255);
    font-family: 'Futura-Medium', 'Futura', 'Trebuchet MS', sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 15px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}
.paragraph_style_10 {
    color: rgb(255, 255, 255);
    font-family: 'Skia-Regular', 'Skia', 'Trebuchet MS', sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 17px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
}
a:link {
    color: rgb(203, 203, 203);
    text-decoration: none;
}
a:visited {
    color: rgb(203, 203, 203);
    text-decoration: none;
}
a:hover {
    color: rgb(189, 37, 44);
    text-decoration: none;
}
a:active {
	color: rgb(255, 255, 255);
	text-decoration: none;
}
.spacer {
    font-size: 1px;
    line-height: 1px;
}