@media only screen and (max-width:1300px) {
/* NOT CHANGING IMAGE ????-why? */
	#yellowbanner {
	background-image: url(../images/homebackground_yellow_1300.jpg);
	height: 6em;
	background-repeat: no-repeat;
	background-size: 100%;
	margin-bottom: 2em;
}


@media only screen and (max-width:969px) {
	
	#yellowbanner {
	background-image: url(../images/homebackground_yellow_1300.jpg);
	height: 6em;
	background-repeat: no-repeat;
	background-size: 100%;
	margin-bottom: 2em;
}
	
/* settings for hamburger menu */
	.mobile-nav{
		float: right
	}

	.menu-btn {
		padding: 1em;
	}

/* changes hamburger menu bars */
	.menu-btn span{
		background-color: #b1b3b6;
		padding: .2em .1em;
		margin: .3em;
		width: 2.5em; 
	}
	/* lime green:#a7ad2e; purple: #a74595, #9d6892 */

	.responsive-menu{
		background-color: white;
	}

	.responsive-menu ul li{
		list-style: none;
		text-transform: uppercase;
		line-height: 1.7em;
		font-size: .9em;
		padding-left: 2em;
	}
/* end settings for hamburger menu */



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

	#yellowbanner {
	background-image: url(../images/homebackground_yellow_1300.jpg);
	height: 6em;
	background-repeat: no-repeat;
	background-size: 100%;
	margin-bottom: 2em;
}

	/* UNIVERSAL CHANGES */
	/* put CSS properties in alphabetical order-DONE */

/* settings for hamburger menu */
	.mobile-nav {
		float: right
	}

	.menu-btn {
		padding: 1em;
	}

/* changes hamburger menu bars */
	.menu-btn span{
		background-color: #b1b3b6;
		padding: .2em .1em;
		margin: .3em;
		width: 2.5em; 
	}
	/* lime green:#a7ad2e; purple: #a74595, #9d6892 */

	.responsive-menu{
		background-color: white;
	}

	.responsive-menu ul li{
		list-style: none;
		text-transform: uppercase;
		line-height: 1.7em;
		font-size: .9em;
		padding-left: 2em;
	}
/* end settings for hamburger menu */

	figure {
		float: left;
		padding: 3em;
		width: 50%;
	}

	figure img {
		width:100%;	
	}
	/* it's 100 percent of parent, which is 50% of Div*/


	h1 { /* ?? */
		color: #c7c8ca;
		font-size: 3em;
		font-weight: 700;
		padding: 0em 0em 0em 0em;
 		margin-bottom: .3em;
 		line-height: .9em ;
	}

	/* CORRECT ???-this code is for turning off nav menu and adds 
	hamburder menu and vice versa ??? */
	nav {
		display: none;

	}

	.mobile-nav{
	display: block;
	}

	/* switch of menu type-END*/

	/* ADJUST SIZE*/

	#yellowbannerattop { 
		width: 100%;
		padding-top: 0;
		padding-bottom: 2em;
	}

.wrapper{ 
		margin: 0 auto;
	} 

}

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

	/* UNIVERSAL CHANGES */
	/* put CSS properties in alphabetical order-DONE */

#yellowbanner {
	background-image: url(../images/homebackground_yellow_750.jpg);
	height: 6em;
	background-repeat: no-repeat;
	background-size: 100%;
	margin-bottom: 2em;
}

/* settings for hamburger menu */
	.mobile-nav {
		float: right
	}

	.menu-btn {
		padding: 1em;
	}

/* changes hamburger menu bars */
	.menu-btn span{
		background-color: #b1b3b6;
		padding: .2em .1em;
		margin: .3em;
		width: 2.5em; 
	}
	/* lime green:#a7ad2e; purple: #a74595, #9d6892 */

	.responsive-menu{
		background-color: white;
	}

	.responsive-menu ul li{
		list-style: none;
		text-transform: uppercase;
		line-height: 1.7em;
		font-size: .9em;
		padding-left: 2em;
	}
/* end settings for hamburger menu */

	figure {
		float: left;
		padding: 3em;
		width: 50%;
	}

	figure img {
		width:100%;	
	}
	/* it's 100 percent of parent, which is 50% of Div*/


	h1 { /* ?? */
		color: #c7c8ca;
		font-size: 3em;
		font-weight: 700;
		padding: 0em 0em 0em 0em;
 		margin-bottom: .3em;
 		line-height: .9em ;
	}

	/* CORRECT ???-this code is for turning off nav menu and adds 
	hamburder menu and vice versa ??? */
	nav {
		display: none;

	}

	.mobile-nav{
	display: block;
	}

	/* switch of menu type-END*/


	/* ADJUST SIZE*/

	#yellowbannerattop { 
		width: 100%;
		padding-top: 0;
		padding-bottom: 2em;
	}
	.wrapper{ 
		margin: 0 auto;
	} 
}



@media only screen and (max-width:600px) {
	/* UNIVERSAL CHANGES */
	/* make nav bar a hamburger menu */

	/* settings for hamburger menu */
	.mobile-nav{
		float: right
	}

	.menu-btn {
		padding: 1em;
	}

/* changes hamburger menu bars */
	.menu-btn span{
		background-color: #b1b3b6;
		padding: .2em .1em;
		margin: .3em;
		width: 2.5em; 
	}
	/* lime green:#a7ad2e; purple: #a74595, #9d6892 */

	.responsive-menu {
		background-color: white;
	}

	.responsive-menu ul li{
		list-style: none;
		text-transform: uppercase;
		line-height: 1.7em;
		font-size: .9em;
		padding-left: 2em;
	}
/* end settings for hamburger menu */

	body {
		font-size: 16px;
	}

	figure {
		float: none; 
		padding: 1.5em;
		width: 100%;
	}

	figure img {
		width:100%;	
	}
	/* it's 100 percent of parent, which is 100% of Div*/


	h1 { /* ??? */
		color: #c7c8ca;
		font-size: 3em;
		font-weight: 700;
		margin-bottom: .3em;
		padding-right: .2em;
		line-height: .9em ;
	}

	/* CORRECT ???-this code is for turning off nav menu and adds 
	hamburder menu and vice versa ??? */
	nav {
		display: none;

	}

	/* is the size of the logo causing spacing issues
	when site is viewed on mobile phone-YES-this fixed problem */
	 header img {
 		margin-left: 2em;
 		width: 175px; 
 	}

	.mobile-nav{
	display: block;
	}

	/* switch of menu type-END*/

	/* ADJUST SIZE*/

	#yellowbannerattop { 
		width: 100%;
		padding-top: 0;
		padding-bottom: 2em;
	}

	.wrapper{ 
		margin: 0 auto;
		max-width: 800px; /* or 960px; 1200px standard */

	} 

	@media only screen and (max-width:400px) {
	/* UNIVERSAL CHANGES */
	/* make nav bar a hamburger menu */
	
	h1 { /* ??? */
		color: #c7c8ca;
		font-size: 2.5em;
		font-weight: 700;
		margin-bottom: .3em;
		padding-right: .2em;
		line-height: .9em ;
	}

/* fix h3 display on mobile */
	h3 {
	color: #58595b;
	font-family: 'Source Sans Pro', Helvetica, sans-serif;
	font-size: .8em;
	font-weight: 400;
	margin-left: 1em;
	margin-right: 1em;
	padding-bottom: 1em;

} /* ??? */