/*
Theme Name: Focus Responsive
Based on original Focus theme
Responsive additions only
*/

/* =========================================
   RESET
========================================= */

@import url(css/font.css);

*,
*::before,
*::after {
	box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym,
address, big, cite, code, del,
dfn, em, img, ins, kbd, q,
samp, small, strike, strong,
sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul,
li, fieldset, form, label,
legend, table, caption, tbody,
tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

/* =========================================
   BASE TYPOGRAPHY
========================================= */

body {
	background:#f1f1f1;
	color:#222;
	font-size:14px;
	line-height:24px;
	font-family:'DTL Argo WST', Arial, Helvetica, sans-serif;
}

p { margin-bottom:18px; }

strong { font-weight:bold; }

em, i { font-style:italic; }

pre {
	font-family:"Courier 10 Pitch", Courier, monospace;
}

code {
	font-family:Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

/* =========================================
   STRUCTURE
========================================= */

#wrapper {
	width:940px;
	margin:20px auto;
	padding:0 20px;
	background:#f1f1f1;
}

#access .menu-header,
div.menu,
#colophon,
#branding,
#main {
	margin:0 auto;
	width:940px;
}

/* =========================================
   HEADER
========================================= */

#header {
	padding:30px 0 0;
}

#site-title {
	float:left;
	font-size:48px;
	line-height:54px;
	margin:0 0 18px;
	width:450px;
}

#site-title a {
	color:#CC0033;
	font-weight:bold;
	text-decoration:none;
}

#site-description {
	float:right;
	font-size:16px;
	font-style:italic;
	color:#003366;
	width:220px;
	margin-bottom:18px;
}

/* =========================================
   BRANDING IMAGE
========================================= */

#branding img {
	border-top:4px solid #000;
	border-bottom:1px solid #000;
	display:block;
	max-width:100%;
	height:auto;
}

/* =========================================
   MENU
========================================= */

#access {
	background:#000;
	display:block;
	float:left;
	width:940px;
}

#access .menu-header,
div.menu {
	font-size:14px;
	margin-left:12px;
	width:928px;
}

#access ul {
	list-style:none;
	margin:0;
}

#access li {
	float:left;
	position:relative;
}

#access a {
	color:#aaa;
	display:block;
	line-height:38px;
	padding:0 10px;
	text-decoration:none;
}

#access li:hover > a {
	background:#333;
	color:#fff;
}

#access ul ul {
	display:none;
	position:absolute;
	top:38px;
	left:0;
	width:180px;
	background:#333;
	z-index:99999;
}

#access li:hover > ul {
	display:block;
}

/* =========================================
   MAIN LAYOUT
========================================= */

#main {
	clear:both;
	overflow:hidden;
	padding:40px 0 0;
}

#container {
	float:left;
	margin:0 -240px 0 0;
	width:100%;
}

#content {
	margin:0 280px 0 20px;
	margin-bottom:36px;
	color:#333;
	font-size:16px;
	line-height:24px;
}

#primary,
#secondary {
	float:right;
	width:220px;
	overflow:hidden;
}

#secondary {
	clear:right;
}

/* =========================================
   CONTENT SPACING
========================================= */

#content p,
#content ul,
#content ol,
#content dd,
#content pre,
#content hr {
	margin-bottom:24px;
}

/* =========================================
   HEADINGS
========================================= */

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	color:#000;
	line-height:1.5em;
	margin:0 0 20px;
}

#content .entry-title {
	color:#003366;
	font-size:16px;
	font-weight:bold;
	line-height:1.3em;
	margin-bottom:0;
}

/* =========================================
   ENTRY CONTENT
========================================= */

.entry-content {
	clear:both;
	padding:12px 0 0;
}

/* =========================================
   MEDIA (CLEAN SYSTEM)
========================================= */

#content img,
#content video {
	max-width:100%;
	height:auto;
	display:block;
}

/* alignment helpers */
#content .alignleft,
#content img.alignleft {
	float:left;
	margin-right:24px;
	margin-top:4px;
}

#content .alignright,
#content img.alignright {
	float:right;
	margin-left:24px;
	margin-top:4px;
}

#content .aligncenter,
#content img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/* =========================================
   CAPTIONS
========================================= */

#content .wp-caption {
	background:#f1f1f1;
	line-height:18px;
	margin-bottom:20px;
	padding:4px;
	text-align:center;
	max-width:100%;
}

#content .wp-caption img,
#content .wp-caption video {
	margin:0;
}

.wp-caption {
	margin:0 auto 20px;
}

/* =========================================
   WIDGETS
========================================= */

.widget-area ul {
	list-style:none;
	margin-left:0;
}

.widget-area ul ul {
	list-style:square;
	margin-left:1.3em;
}

.widget-container {
	margin:0 0 18px;
}

.widget-title {
	color:#003366;
	font-size:16px;
	font-weight:bold;
}

/* =========================================
   FOOTER
========================================= */

#footer {
	clear:both;
	margin-bottom:20px;
}

#colophon {
	border-top:4px solid #000;
	margin-top:-4px;
	overflow:hidden;
	padding:18px 0;
}

#site-info {
	float:left;
	font-size:14px;
	font-weight:bold;
	width:700px;
}

#site-info a {
	color:#CC0033;
	text-decoration:none;
}

/* =========================================
   LINKS
========================================= */

a:link { color:#0066cc; }
a:visited { color:#743399; }
a:hover, a:active { color:#ff4b33; }

/* =========================================
   RESPONSIVE
========================================= */

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

	#wrapper {
		width:100%;
		max-width:940px;
		margin:20px auto;
		padding:0 20px;
	}

	#access,
	#access .menu-header,
	div.menu,
	#branding,
	#main,
	#colophon {
		width:100%;
	}

	#container {
		float:none;
		width:100%;
		margin:0;
	}

	#content {
		margin:0;
		width:100%;
	}

	#primary,
	#secondary {
		float:none;
		width:100%;
		margin-top:30px;
	}
}

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

	#wrapper {
		padding:0 12px;
	}

	#site-title {
		float:none;
		width:auto;
		text-align:center;
		font-size:36px;
		line-height:44px;
	}

	#site-description {
		float:none;
		width:auto;
		text-align:center;
	}

	#access li {
		float:none;
	}

	#access a {
		line-height:24px;
		padding:8px 10px;
	}

	#access ul ul {
		position:static;
		width:auto;
	}
}

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

	body {
		font-size:14px;
	}

	#site-title {
		font-size:30px;
		line-height:38px;
	}

	#content {
		font-size:15px;
		line-height:23px;
	}
}
/* Mobile menu */
#access ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    gap: 2px 8px;
    padding: 8px 0;
}

#access li {
	float: none;
	margin: 0;
}

#access a {
	display: block;
	line-height: 1.2;
	padding: 4px 8px;
}


#access ul ul {
    position: static;
    width: auto;
}

#access ul ul a {
    width: auto;
}