/*
	Linear by TEMPLATED
    templated.co @templatedco
    Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

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

	#topics {
		column-count: 1;
	}

	body,
	input,
	textarea,
	select {
		line-height: 1.75em;
		font-size: 10.5pt;
		letter-spacing: 0;
	}

	body {
		padding-top: 44px;
	}

	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1em;
		font-size: 1.5em;
	}

	section,
	article {
		clear: both;
		margin: 2em 0 2em 0 !important;
	}

	section> :first-child,
	article> :first-child {
		margin-top: 0 !important;
	}

	section:first-child,
	article:first-child {
		margin-top: 0 !important;
	}

	.container {
		padding: 0em 1em;
	}

	hr {
		margin: 3em 0 0 0;
		padding: 3em 0 0 0;
	}

	header {
		margin-bottom: 1.6em;
	}

	header h2 {
		font-size: 2em;
	}

	header .byline {
		font-size: 1.2em;
	}

	.button {
		display: block;
		width: 100%;
		text-align: center;
	}

	/*********************************************************************************/
	/* UI                                                                            */
	/*********************************************************************************/

	#titleBar {
		background: #161616;
	}

	#titleBar .title a {
		display: block;
		color: #fff;
		text-align: center;
		line-height: 44px;
		font-weight: 300;
		text-decoration: none;
	}

	#titleBar .tag {
		display: none;
	}

	#titleBar .toggle {
		position: absolute;
		left: 0;
		top: 0;
		width: 80px;
		height: 60px;
	}

	#titleBar .toggle:after {
		content: '';
		display: block;
		width: 20px;
		height: 12px;
		position: absolute;
		left: 10px;
		top: 15px;
		background: url('images/toggle.svg') 0px 0px no-repeat;
		opacity: 0.5;
	}

	#titleBar .toggle:active:after {
		opacity: 0.75;
	}

	#navPanel {
		background: #1f1f1f;
	}

	#navPanel .link {
		display: block;
		color: #888;
		text-decoration: none;
		height: 44px;
		line-height: 44px;
		border-top: solid 1px;
		border-color: rgba(255, 255, 255, .05);
		padding: 0 1em 0 1em;
		letter-spacing: 1px;
	}

	#navPanel .link:first-child {
		border-top: 0;
	}

	#navPanel .link.depth-0 {
		color: #fff;
	}

	#navPanel .indent-1 {
		display: inline-block;
		width: 1em;
	}

	#navPanel .indent-2 {
		display: inline-block;
		width: 2em;
	}

	#navPanel .indent-3 {
		display: inline-block;
		width: 3em;
	}

	#navPanel .indent-4 {
		display: inline-block;
		width: 4em;
	}

	#navPanel .indent-5 {
		display: inline-block;
		width: 5em;
	}

	#navPanel .depth-0 {
		color: #fff;
	}

	/*********************************************************************************/
	/* Header                                                                        */
	/*********************************************************************************/

	#header {
		height: 10em;
		padding: 0 !important;
		background-position: center center;
		background-attachment: scroll;
	}

	/*********************************************************************************/
	/* Logo                                                                          */
	/*********************************************************************************/

	#logo {
		display: none;
	}

	#nav {
		display: none;
	}


	/*********************************************************************************/
	/* Main                                                                          */
	/*********************************************************************************/

	#main {
		padding: 4em 0em 2em 0em;
	}

	.homepage #content header h2 {
		padding: 0.70em 0em;
		font-size: 1.4em;
	}

	#sidebar h2 {
		font-size: 1.8em;
	}

	/*********************************************************************************/
	/* Footer                                                                        */
	/*********************************************************************************/

	#footer {
		padding: 4em 0em 2em 0em;
	}

	/*********************************************************************************/
	/* Featured                                                                      */
	/*********************************************************************************/

	#featured {
		padding: 4em 0em 3em 0em;
	}

	#featured h3 {
		padding: 1.5em 0em;
		font-size: 1.4em;
	}

	/*********************************************************************************/
	/* Welcome                                                                       */
	/*********************************************************************************/

	#welcome {
		padding: 4em 0em 3em 0em;
	}


}