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

	.topnavbutton {
		font-size: 0.8em;
		width: 22%;
		margin-left: 3%;
	}
	.bottomnav {
		font-size: 0.8em;
	}
	.footer p {
		font-size: 0.8em;
	}

}

@media (min-width: 670px) {
	.mobilenavbutton,
	.mobiletopnavbuttonscontain,
	.mobiletopnavbutton,
	.mobilefacebookbutton
	 {
		display: none;
	}

}

@media (max-width: 670px) {

	.pagecontain {
		width: 100%;
	}

	.navcontain {
		width: 100%;
		display: block;
		border-bottom: 1px solid #E6E6E6;
	}
	.topnav {
		width: 60%;
		height: 92px;
		display: inline-block;
		vertical-align: top;
	}
	.topnavlogo {
		width: 100%;
		height: 92px;
		display: block;
		vertical-align: top;
	}
	.topnavlogo a {
		width: 100%;
		line-height: 92px;
		display: block;
	}
	.topnavlogo a img { 
		/* putting the anchor tag inside a div and setting the display to block allows us to make the img display inline-block so that the vertical align work */
		width: auto;
		height: 52px;
		display: block;
		margin: 20px auto;
	}
	.topnavbuttonscontain {
		width: 100%;
		display: none;
		height: auto;
	}

	.bottomnav {
		width: 80%;
		height: 70px;
		display: none;
		border-top: solid 1px #E6E6E6;
		border-bottom: solid 1px #E6E6E6;
		font-family: 'Lato', sans-serif;
		font-size: 1em;
		font-weight: 400;
		color: #4D4C4D;
		padding-top: 10px;
		padding-bottom: 10px;
		vertical-align: top;
	}
	.bottomnavtextleft,
	.bottomnavtextright {
		line-height: 35px;
		display: block;
	}
	.bottomnavtextleft {
		width: 100%;
		text-align: center;
	}
	.bottomnavtextright {
		width: 100%;
		text-align: center;
	}

	.mobilenavbutton {
		width: 20%;
		height: 92px;
		display: inline-block;
		background-color: #E6E6E6;
		vertical-align: top;
	}
	.mobilenavbutton img {
		height: 50px;
		display: block;
		margin: 0 auto;
		padding: 21px 0;
	}
	.mobiletopnavbuttonscontain {
		width: 100%;
		display: none;
		height: auto;
		background-color: #E6E6E6;
		padding-top: 20px;
		padding-bottom: 5px;
	}
	.mobiletopnavbutton {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 15px;
		line-height: 60px;
		display: block;
		text-align: center;
		font-family: 'Lato', sans-serif;
		text-transform: lowercase;
		letter-spacing: 1px;
		font-size: 1.2em;
		font-weight: 700;
		color: white;
		border: none;
		text-decoration: none;
		vertical-align: top;
		background: #323232;
	}
	.mobilefacebookbutton {
		display: inline-block;
		width: 20%;
		border: none;
		background-color: #3b559f;
		vertical-align: top;
	}
	.mobilefacebookbutton img {
		display: block;
		height: 52px;
		padding: 20px 0;
		max-width: 100%;
		margin: 0 auto;
	}

	.contentcontain {
		padding: 10px 0;
	}

	.footer {
		width: 100%;
		height: auto;
		display: block;
		text-align: center;
		vertical-align: bottom;
		border: 1px solid #E6E6E6;
		background-color: #E6E6E6;
		border-left: none;
		border-right: none;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.footer p {
		width: 100%;
		font-family: 'Lato', sans-serif;
		font-size: 1em;
		font-weight: 400;
		color: #4D4C4D;
	}

}

@media (max-width: 670px) {
	.topnavlogo a img { 
		/* putting the anchor tag inside a div and setting the display to block allows us to make the img display inline-block so that the vertical align work */
		width: auto;
		height: 42px;
		display: block;
		margin: 25px auto;
	}
}