/********* CSS RESETS **********/

img {
	max-width:100%;
}

h1, h2, h3, p, ul, ol {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

/*********** Body ***********/

body {
	font-family: 'Crimson Text', serif;
	font-weight: 300;
	color: black;
}

#container {
		margin: auto;
}

header {
	padding-bottom:20px;
}

p {
	font-size: 1.2em;
}

h1, h2 {
	color: #2c3e6d;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
}

/*********** Header Nav **********/

header nav ul {
	display: flex;
	border-top-style: solid;
	border-color: #CC1600;
	margin-top: 20px;
	margin-bottom: 40px;
}

header nav ul li {
	width: 100%;
	border-right-style: solid;
	text-align: center;	
	border-color: #CC1600;
}

header nav ul li:last-of-type {
	border-right-style: none;
}

header nav ul li a {
	line-height: 2em;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	color: black;	
}

/*********** Header below Nav **********/

header h1 {
	padding-left: 40px;
}

.writers {
	text-transform: lowercase;
	color: black;
	font-family: 'Crimson-Text', serif;
	font-weight: 400;
	font-size: 40px;
}

.large {
	font-size: 60px;
	text-transform: uppercase;
}

img {
	display: block;
	margin: auto;
	padding: 0;
}

header .cta {
	text-align: right;
	font-size: 30px;
	text-transform: lowercase;
	padding-right: 40px;
}

/********** New-Box *********/
.new-box {
	background-color: #eeeeee;
	padding: 20px 0 10px 0;
}

.new-box h1 {
	padding-left: 15px;
	font-weight: 400;
	padding-bottom: 20px;
	
}

.new-box article {
	border-left: solid;
	border-color: #CC1600;
	border-width: 5px;
	margin-left: 10px;
	margin-bottom: 20px;
	padding-left: 10px;
	
}

.new-box h2 {
	color: #666666;
	font-weight: 400;
}

.new-box p {
	font-family: 'Crimson-Text', serif;
	font-style: italic;
}

/********** New-box links ***********/

.new-box a {
	color: #CC1600;
}

.new-box a:before {
	content: "{ ";
	color: black;
}

.new-box a:after {
	content: " }";
	color: black;
}


/********* Blockquote *********/

blockquote {
	font-family: 'Crimson-Text', serif;
	padding: 20px 0 20px 0;
	font-size: 1.2em;
}

#quote {
	font-family: 'Crimson-Text', serif;
	font-size: 1.2em;
	padding-top: 20px;
}

/********* Middle *********/

#middle article {
	border-top: solid;
	margin: 20px 40px 20px 40px;
	padding: 10px 0px 20px 0px;
}

#middle h2 {
	text-transform: uppercase;
}

#middle .cta {
	padding-top: 20px;
}

#middle p {
	padding-top: 20px;
}

/*********** Middle Links *********/

.cta  {
	font-family: 'Crimson-Text', serif;
	font-size: 1.3em;
}

.cta a {
	color: #CC1600;
}

.cta:before {
	content: "{ ";
	color: black;
}

.cta:after {
	content: " }";
	color: black;
}

/*********** Footer Nav ************/

#bottom {
	background-color: #630B00;
	color: #c9cad1;
	font-family: 'Crimson-Text', serif;
	font-weight: 300px;
	padding-bottom: 40px;
	padding-left: 20px;
}

#bottom h1 {
	color: #c9cad1;
	text-transform: uppercase;
	line-height: .75;
}

.writers-footer {
	font-family: 'Crimson-Text', serif;
	text-transform: lowercase;
	font-weight: 400;
	font-size: 25px;

}

.footer-layout {
	display: flex;
	padding: 20px 10px 0px 0;
}

.footer-layout nav {
	padding: 0 40px 20px 40px;
}

.footer-layout nav li {
	padding-bottom: 5px;
}

.footer-layout nav li a {
	padding-bottom: 5px;
	text-transform: uppercase;
	color: #c9cad1;
	font-family: 'Oswald', sans-serif;
}

footer span {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
}

footer p {
	padding-bottom: 20px;
}

footer h3 {
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	padding-top: 10px;
	text-transform: uppercase;
}

.social {
	display: flex;
	font-size: 1.3em;
}

.social li {
	padding-right: 10px;
	padding-top: 10px;
}


.social li a i {
	color: #c9cad1;
}


/************* 600px ***************/
@media only screen and (min-width: 600px) {
	
	header {
		display: grid;
	}
	
	header h1 {
		order: 1;
		padding-top: 20px;
	}
	
	header img {
		order: 2;
		background: url("images/pen.png");
	}
	
	header p {
		order: 3;
	}
	
	header nav {
		order: 4;
	}
	
	#top {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	
	.new-box {
		order: 2;
	}
	
	#middle {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	
	#middle article:last-child {
		grid-column: 1 / 3;
	}

	#bottom {
		display: flex;
	}
	
	#bottom article p {
		padding-top: 20px;
		padding-right: 20px;
	}
/************* 960px ***************/
@media only screen and (min-width: 960px) {
	
	#container {
		width: 960px;
	}
	
	#middle {
		display: flex;
		
	}