img {max-width: 100%;}



/* Main Queries for mobile */
@media screen and (min-width: 20em) and (max-width: 667px){
	/* Header */
	#header{ width: 100%; height: 70px; background: #1a1a1a;  position:}
	#header h1 {left: 10px; width: 9em;}
	#header nav {right: 10px;}
	.top-nav {border-bottom: 3px solid #328aa0;}
	.sub-nav, .desktop-nav {display: none;}
	
	/* Mobile navigation */
	.mobile-login, .mobile-join {display: block; position: absolute; top: 18px; height: 30px; width: 70px; font-size: 14px; line-height: 30px; text-transform: uppercase; color: white; text-align: center;}
	.mobile-login {border: 2px solid white; right: 80px;}
	.mobile-join {border: 2px solid #328aa0; background: #328aa0; right: 0;}

	/* Hero */
	#hero {height: auto;}
	#hero h2 {font-size: 3em;}
	#hero p {font-size: 1.25em;}
	
	/* Section and Titles */
	#main {padding: 35px 0;}
	#content {width: 96%; max-width: 640px; float: none;}
	.page-title {width: 100%;}
	.page-title h2 {font-size: 16px;}
	.page-title h2:before, .page-title h2:after {display: none;}
	.page-title h3 {font-size: 38px;}
	#page-content {width: 100%; max-width: 660px;}

	/* Categories Page Specific */
	#category-contents li {margin-bottom: 40px; vertical-align: top;}
	.thumbnail {width: 28.125%; max-width: 90px; height: 70px; margin-right: 3.125%;}
	.story-info {width: 68.75%; float: left;}
	.couple-name {font-size: 17px;}
	.match-info { height: auto;}
	.match-date i {display: none;}
	.location, .match-date {font-size: 13px;}
	.location:after {display: none;}
	p.summary {display: none;}

	.pagination {font-size: 14px;}

	/* Stories Page Specific */
	.story-photo {display: block; float: none;}
	.story-navigation {width: 100%;}
	.go-back {text-align: center;}
	
	/* Hidden Views */
	.form-area, #sidebar, #footer {display: none;}

	/* Mobile Footer */
	#mobile-footer {display: block; background: #333; padding: 2em 0; color: white; text-align: center;}
	#mobile-footer a {color: white; text-decoration: none;}
	#mobile-footer li {display: inline-block; margin: 0 1em 1em 0;}
	#mobile-footer p {margin-top: 1em;}

	/*Mobile Join Now Button */
	.mobile-button {display: block; width: 210px; height: 40px; line-height: 40px; color: white; background: #3188a3; text-align: center; text-decoration: none; font-size: 19px; padding-top: 2px; margin: 30px auto;}
}


/* Category Layout Shift for mid-sized mobile screens */
	@media screen and (min-width: 640px) and (max-width: 667px){
		#category-contents li {display: inline-block; width: 49.5%;}
	}

/* Stories page Layout shift for image and couple info 480-667px */
	@media screen and (min-width: 480px) and (max-width: 667px) {
		.story-photo, .couples-info {display: inline-block; vertical-align: top;}
		.story-photo {width: 35%;}
		.couples-info {width: 59%;}
		.story-date i {display: none;}
	}

/* Main Page category layout shifts */
	@media screen and (min-width: 320px) and (max-width: 667px){
		div.image {margin: 0 auto 8px; }
		#category-list li {float: none; margin: 0 0 40px 0; font-size: 14px;}
	}
	@media screen and (min-width: 320px) and (max-width: 567px){
		#category-list li {display: inline-block; width: 49%;}

	}

	@media screen and (min-width: 568px) and (max-width: 667px){
		#category-list li {display: inline-block; width: 32%; margin-right: 1%;}
		#category-list li:nth-of-type(3n){margin-right: 0;}
	}
/* Queries for large mobile screens but not quite desktop */
@media screen and (min-width: 668px){
	/* Turn off Mobile Navigation */
	.mobile-nav, .mobile-button {display: none;}
	/* Turn off Sidebar */
	#sidebar {display: none;}

	/* Turn on footer */
	#footer {display: block;}

	/* Shift Match Date + Location to side-by-side */
	.location, .match-date {display: inline-block;}
	.match-date {padding-left: 0;}
	.match-info {position: relative; bottom: 8px; padding-left: 145px;}
}

/* Query for Content area to center align between views */
@media screen and (min-width: 668px) and (max-width: 959px){
	#content { float: none; margin: 0 auto;}
}

/* Hero text size adjustments post-portrait phones */
@media screen and (min-width: 480px){
	#hero h2 {font-size: 3.25em; margin-bottom: .25em;}
}

@media screen and (min-width: 640px){
	#hero h2 {font-size: 4em; margin-bottom: .35em;}
	#hero p {font-size: 1.5em; padding-top: 0;}
}

/* Desktop / Original Layout Queries */
@media screen and (min-width: 960px) {
	/* Turn Sidebar on */
	#sidebar {display: block;}
	#hero h2 {font-size: 70px; margin-bottom: 0;}

	/*Adjust the container to fit both */
	.container {width: 100%; padding: 0 10px;}

	/* Add Hover effect to let us know button */
	.let-us-know:hover {background: #f8ae37; color: white;}
}

@media screen and (max-width: 640px) {
	.desktop-nav {
		display:none;
	}
	.headerLogo {
		margin:20px 0 0 15px;
		width:120px;
	}
}