/* Phase 1: a site with no responsive or fluid elements */

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
	font-family: Arial, Geneva, sans-serif;
	background-color: #B1D3EE;
	font-size: 100%;
}
h1,h2,h3,h4,h5,h6 {
	font-family: 'Cabin Condensed', sans-serif;
}
a {
	color: #2772B0;
}
.wrapper {
	width: 97%;
	max-width: 1200px;
	margin: 0 auto;
	float: none;
	background-color: #fff;
}
header {
	background: url(../img/boston-1200.jpg) no-repeat;
	width: 100%;
	height: 218px;
	font-family: 'Cabin Condensed', sans-serif; 
	color: #fff;
}
header h1 {
	padding: 0.5em;
	margin: 0;
}
header h1 a{
	color: #fff;
	text-decoration: none;
}
nav {
	background-color: #ED8F00;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: auto;
}
nav ul li {
	font-family: 'Cabin Condensed', sans-serif;
}
nav ul a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	padding: 1em;
	float: left;
}
nav ul a:hover {
	color: #a16100;
}
main {
	overflow: auto;
	padding-right: 3em;
	background-color: #EFECCA;
}
main h2 {
	font-size: 3em;
	padding-top: 1em;
}
main p {
	font-size: 1.5em;
	font-family: 'Cabin Condensed', sans-serif;
}
/* div {
	float: left;
	width: 20.5%;
	margin-left: 2.5em;
} */
div img {
	width: 100%;
	max-width: 100%;
}
main img {
	float: left;
	margin-right: 1.875em;
	width: 100%;
	max-width: 400px;
}
footer {
	clear: both;
	padding: 2em 0;
	margin: 3em 0;
	color: #999;
	text-align: center;
}

/* grid system */

/* row class will clear floats from previous row */
.row:before, 
.row:after {
    content:"";
    display: table;
    clear:both;
}
[class*='col-'] {
	float: left;
	margin-left: 3.33333%;
	min-height: 1px;
}
.col-1,
.col-1-2,
.col-1-4 {
	width: 20.83333%;
}
.col-2 {
	width: 44.99999%;
}
.col-3 {
	width: 69.16665%;
}
.col-4 {
	width: 96.66666%;
}

/* media queries — final code 

/* Mobile Landscape Screen Sizes */
@media only screen and (min-width: 480px) and (max-width: 767px)  {
 .col-1,
 .col-2,
 .col-1-2 {
	width: 44.9999999%;
}
.col-3,
.col-4,
.col-1-4 {
	width: 96.66666%;
}

}
 

/* Mobile Portrait Screen Sizes */
@media only screen and (max-width: 479px) {
  [class*=‘col’] {
	margin-left: 0;
}
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-1-2,
  .col-1-4  {
	width: 96.66666%;
}
}
/* adjust "discover" box for smaller width */
@media only screen and (min-width: 702px) and (max-width: 866px)  {
main h2 {
	font-size: 2.5em;
	padding-top: 0em;
}
main p {
	font-size: 1.5em;
	font-family: 'Cabin Condensed', sans-serif;
}
}
/* adjust "discover" box again and change nav layout */
@media only screen and (max-width: 701px)  {
main {
	padding: 0 3.333333%; /* aligns with boxes underneath */
}
main h2 {
	font-size: 2em;
	padding-top: 0em;
}
main p {
	font-size: 1.2em;
	font-family: 'Cabin Condensed', sans-serif;
}
main img {
	float: none;
	margin: 0;
	width: 100%;
	max-width: 400px;
}
nav ul a {
	display: block;
	float: none;
	padding-left:3.333333%;
}
/* splits nav into 2 columns
http://stackoverflow.com/questions/13104818/simple-2-column-navigation-with-css-and-a-single-list */
nav li:nth-child(even) {
  width: 50%;
  float: right; 
}
nav li:nth-child(odd) {
  width: 50%;
  float: left;
}
}