/*
Theme Name: New Jersey Healthy Communities Network 2018
Author: Amber Leigh Turner of January Creative LLC
Author URI: januarycreative.com
Description: Custom theme for New Jersey Healthy Communities Network - Hooper-Williams Communications
Version: 0.1 (June 2018)
*/


/* ============================ DEV - DEV GRID ============================ */

#devwrapper {
	width: 100%;
	position: fixed;
	opacity: 0.05;
}

#devgrid {
	display: grid;
	grid-template-columns: repeat(6, [col-start] 1fr);
	grid-column-gap: 24px;
	width: 90%;
	max-width: 1600px;
	margin: 0 auto;
}

#devgrid div {
	background-color: black;
	height: 1000000000px;
}


/* ============================ RESETS ============================ */
/* Basic CSS resets so that all browsers start on a mostly level playing field */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, s, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body { line-height: 1; }

ol, 
ul { 
	list-style: none;
}

blockquote, 
q { 
	quotes: none;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


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

/* apply a natural box layout model to all elements - allows for proper use of padding and margins relative to width and height */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;  
	box-sizing: border-box;
}


/* ============================ TYPOGRAPHY ============================ */
/* CSS for headings, paragraphs, links, blockquotes, lists, forms, buttons. */

body { 
	font-family: 'Roboto', sans-serif;
	color: #808080;
	font-size: 18px;
	line-height: 1.4;			/* May need to adjust */
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { 
	font-weight: 700;
	margin-bottom: 0.5em;
}

h1 { 
	font-size: 2.67em;
	color: #00A3E5;									/* NJHCN Blue */
}

h2 { 
	font-size: 2.33em;
	color: #88CC01; 								/* NJHCN Green */
}

h3 { 
	font-size: 2.00em;
	color: #00A3E5;									/* NJHCN Blue */
}

h4 { 
	font-size: 1.78em;
	color: #88CC01; 								/* NJHCN Green */
}

h5 {
	font-size: 1.33em;
	color: #00A3E5;									/* NJHCN Blue */
}

h6 { 
	font-size: 1.17em;
	color: #88CC01; 								/* NJHCN Green */
}

h6.minisubheader {
	color: #00A3E5;									/* NJHCN Blue */
	font-style: italic;
	text-transform: uppercase;
	margin-bottom: 16px;
	font-weight: 400;
}

p { 
	font-size: 1em;
	line-height: 1.4;
	margin-bottom: 1em;
}

p.large { 
	font-size: 1.33em;
	margin-bottom: 1.33em;
}

p.small {
	font-size: 0.78em;
	margin-bottom: 0.78em;
}

em { font-style: italic; }

strong { font-weight: 700; }

a { color: #00A3E5; 								/* NJHCN Blue */ }

a:hover { color: #88CC01; 							/* NJHCN Green */ }

button,
a.button,
button[type="submit"],
input[type="submit"] {
	background-color: #88CC01;						/* NJHCN Green */
	color: #FFFFFF;
	text-decoration: none;
	padding: 8px 32px;
	font-size: 1.17em;
	text-align: center;
	font-weight: 700;
}

blockquote {
	
}

ul,ol {
	margin-top: 1em;
	margin-bottom: 1.5em;
	padding-left: 1.1em;
}

li {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	list-style-type: disc;
}

img {
	
}

img.alignright,
img.alignleft {
	display: block;
}

img.attachment-post-thumbnail {
	display: block;
    margin: 0 auto;
    margin-bottom: 40px;
}

fieldset {
	
}

input {
	border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    padding: 8px; 
    font-size: 1em;
}

strong.search-excerpt { 
	background-color:yellow;
	color:blue;
}


/* ============================ REPEATABLE DESIGN CLASSES ============================ */
/* Design elements that are used on several pages, that should be kept consistent. */

.alignleft { float: left; }

.alignright { float: right; }

.socialicons a { 
	text-align: center;
	margin: 0px 4px;
	cursor: pointer;
}

.separator.contentwidth { margin: 80px auto; }

.separator img { 
	grid-column: span 6;
	width: 100%;
    height: auto;
}

.breadcrumb { margin-bottom: 40px; }

.breadcrumb ul#breadcrumbs {
	margin: 0;
	padding: 0;
}

.breadcrumb ul#breadcrumbs li { 
	display: inline;
	font-size: 0.9em;
	list-style-type: none;
	font-style: italic
}

div.articlelist {
	display: grid;
	grid-template-columns: repeat(4, [col-start] 1fr);
	grid-column-gap: 24px;
	margin-bottom: 40px;
}

div.articlelist > h3 {
	grid-column: span 4;
}

.card {
	grid-column: span 2;
	margin-bottom: 40px;
}

.card img { 
	width: 100%;
	margin-bottom: 16px;
}

.card p.small { text-transform: uppercase; }

.card p span:after { content: " | "; }

.card p span:last-child:after { content: ""; }

.card a { text-decoration: none; }

.prevnext { grid-column: span 4; }


/* ========= Website Elements ========== */

#searchform fieldset {
	width: 50%;
    float: right;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}

#maincontent #searchform fieldset { float: left; }

#searchform fieldset input[type="text"] {
	border: none;
    width: 90%;
    float: left;
    padding: 5px 8px;
    text-align: center;
    font-size: 0.8em;
}

#searchform fieldset button[type="submit"] {
	font-size: 18px;
	border: none;
	color: #00A3E5;									/* NJHCN Blue */
	padding: 2px 8px;
    background-color: transparent;
}

#pagetitle {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 40px auto;
}

#pagetitle .contentwidth h1,
#pagetitle .contentwidth h2 {
	padding: 80px 0px;
	grid-column: span 6;
	color: #FFFFFF;
	font-size: 3.33em;
	margin-bottom: 0;
}



/* ============================ PAGE STRUCTURE ============================ */
/* High level page elements: containers, page content, sidebars */

.contentwidth {
	display: grid;
	grid-template-columns: repeat(6, [col-start] 1fr);
	grid-column-gap: 24px;
	width: 90%;
	max-width: 1600px;
	margin: 24px auto;
}

/*.contentwidth > * { border: 1px solid red; }*/ /* For Testing Only */

#maincontent { grid-column: span 4; }

ul#sidebar { 
	grid-column: span 2;
	margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

ul#sidebar > li { 
	list-style: none;
	background-color: #F8F8F8;
	padding: 24px;
	margin-bottom: 40px;
	margin-top: 0;
}

ul#sidebar > li ul {
	margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

ul#sidebar > li ul li { 
	list-style: none;
	margin-top: 1em;
	margin-bottom: 1em;
}

ul#sidebar > li ul li a { color: #808080; }

ul#sidebar > li #searchform fieldset {
	width: 100%;
	float: none;
	margin-top: 16px;
}



/* ========== Header ========== */

#preheader { 
	background-color: #F8F8F8;						/* Extremely Light Gray */
	padding: 16px 0px;
}

#preheader .contentwidth { margin: 0px auto; }

#preheader .contentwidth > * { grid-column: span 3; }

#preheader .contentwidth > p { 
	font-weight: 300;
	margin-bottom: 0;
}

#preheader .contentwidth form#searchform { text-align: right; }

#headermain #headerlogo { grid-column: span 1; }

#headermain #headerlogo img {
	width: 100%;
	max-width: 300px;
}

#headermain #headerdetails { 
	grid-column: span 5;
	text-align: right;
	position: relative; 							/* Mainly for the navigation to sit at the bottom */
}


/* Navigation */

#headermain nav#mainnav {
	grid-column: 2 / 8;
    text-align: right;
    margin-top: -40px;
}

#headermain nav#mainnav ul {
	margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

#headermain nav#mainnav ul li {
	display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
    position: relative;
}

#headermain nav#mainnav ul li a {
	padding: 8px 16px;
	color: #00A3E5; 								/* NJHCN Blue */
	text-decoration: none;
}

#headermain nav#mainnav ul li:last-child a { margin-right: -16px; }

#headermain nav#mainnav ul li:hover a,
#headermain nav#mainnav ul li.current_page_item a,
#headermain nav#mainnav ul li.current-menu-parent a,
#headermain nav#mainnav ul li.current-post-ancestor a,
#headermain nav#mainnav ul li.current-menu-parent a,
#headermain nav#mainnav ul li.current-menu-item a {
	background-color: #88CC01; 						/* NJHCN Green */
	color: #FFFFFF;
}

#headermain nav#mainnav ul li > a:after { content: ' ▾'; }

#headermain nav#mainnav ul li > a:only-child:after { content: ''; }

#headermain nav#mainnav ul ul.sub-menu { 
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #F8F8F8;
	padding: 0;
	text-align: left;
	border-top: 2px solid #F8F8F8;
	z-index: 100000000000000000;
}

#headermain nav#mainnav ul li:hover ul.sub-menu { 
	display: block;
	width:  250px;
	border: 1px solid #cccccc;
}

#headermain nav#mainnav ul li ul.sub-menu li { 
	width: 100%;
	border-bottom: 1px solid #CCCCCC;
}

#headermain nav#mainnav ul li ul.sub-menu li:last-child { border: none; }

#headermain nav#mainnav ul li ul.sub-menu li a {
	background-color: transparent;
	color: #808080;
	text-transform: none;
	font-size: 0.6em;
	font-weight: 400;
	padding: 8px 24px;
	margin-right: 0;
	display: block;
}

#headermain nav#mainnav ul li ul.sub-menu li:hover {
	background-color: #88CC01; 						/* NJHCN Green */
	color: #FFFFFF;
	width: 100%;
}

#headermain nav#mainnav ul li ul.sub-menu li:hover a { color: #FFFFFF; }


/* ========== Footer ==========*/


footer {
	background-image: url(_img/footerbackground-compressor.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

footer .contentwidth { padding: 40px 0; }

footer .contentwidth > div { 
	grid-column: span 2;
	color: #FFFFFF;
}

footer .footerinfo h3 a,
footer .footerinfo h5 {
	color: #FFFFFF;
	text-decoration: none;
}

footer .footerinfo h5 { 
	font-weight: 400;
	margin-top: 16px;
}

footer .footernav h5,
footer .footersocial h5 { 
	color: #FFFFFF;
}

footer .footernav ul {
	margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

footer .footernav ul li { 
	padding: 4px 0px;
	list-style-type: none;
}

footer .footernav a { 
	color: #FFFFFF;
	text-transform: uppercase;
	padding: 12px 0px;
}

footer .footersocial .socialicons { margin: 24px 0px; }

footer .footersocial .socialicons a { 
	color: rgba(255,255,255,0.7);
	margin: 0px 16px;
}

footer .footersocial .socialicons a:first-child { margin-left: 0; }

footer .footersocial .socialicons a:last-child { margin-right: 0; }

footer .footersocial .socialicons a:hover { color: #FFFFFF; }

#copyright p {
	grid-column: span 6;
	text-align: center;
}


/* ============================ PAGE-SPECIFIC STYLES ============================ */

/* ========== Home Page ========== */

.unslider { position: relative;	/* Used to place arrows */ }

.unslider .slider { height: 60vh; }

.unslider .slider li {
	height: 60vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.unslider-arrow {
	top: 50%;
	z-index: 10 !important;
	width: 40px;
	height: 40px;
	background-image: url(_img/arrow.png);
	background-size: cover;
	background-repeat: no-repeat;
	opacity: .5;
}

.unslider-arrow:hover { opacity: .8; }

.unslider-arrow.next { background-position: right center; }

.unslider nav.unslider-nav {
	position: absolute;
    bottom: 5%;
    margin: 0 auto;
    width: 100%;
}

.slidecontent {
	text-align: center;
	color: #FFFFFF;
	padding: 0px 300px 0px 200px;
	width: 50%;
    float: right;
    background-color: rgba(0,163,229,0.8);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: polygon( 20vh 0, 100% 0%, 100% 100%, 0% 100%);
}

/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.unslider-active .slidecontent {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
}

.slidecontent h2 {
	color: #FFFFFF;
	margin-bottom: 24px;
}

.slidecontent p {
	text-transform: uppercase;
	color: #FFFFFF;
}

.slidecontent .button {
	background-color: transparent;
	border: 1px solid #FFFFFF;
    margin: 0 auto;
}

#granteelist {
	background-color: #F8F8F8;
	border: 1px solid #DDDDDD;
    margin-top: -32px;
    z-index: 10;
    padding: 16px;
    position: relative;
}

#granteelist h6,
#granteelist h6 a { 
	color: #88CC01; 							/* NJHCN Green */
	margin-bottom: 0;
}

.granteeticker { grid-column: span 5; }

.granteeticker.slick-slider { margin-bottom: 0; }

#homeintro { margin: 80px auto; }

#homeintro > * { 
	text-align: center !important;				/* !important is to override WYSIWYG editor styles hopefully */
	grid-column: span 6;
}

#homeintro h1 { 
	color: #808080;								/* Dark Gray */
	font-size: 2em;							/* Mimics H3 */
}

#homeintro h4 { 
	margin-bottom: 60px;
	font-style: italic;
}

#homeblogs h2 { 
	grid-column: span 6;
	text-align: center;
}

#homeblogs > div { 
	grid-column: span 6;
	width: 100%;
	margin: 0;
	margin-top: 40px;
}

#homeblogs > a {
	grid-column: span 6;
    margin: 0 auto;
    text-align: center;
    margin-top: 24px;
}

#homefunders h3 { 
	grid-column: span 6;
	text-align: center;
}	

#homefunders ul {
	grid-column: span 6;
    width: 100%;
    padding: 0;
}

#homefunders ul li { list-style-type: none; }

#homefunders ul li a {
	display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

#homefunders ul li img { width: 100%; }

/* Grantee Login Page */

.swpm-forgot-pass-link,
.swpm-join-us-link {
	display: none;
}

.swpm-login-submit { margin-top: 16px; }

/* Grantee Article Submission */

body.page-template-page-granteesubmission .acf-fields > .acf-field { padding: 32px 0px; }

body.page-template-page-granteesubmission .wp-editor-tabs { display: none; }

body.page-template-page-granteesubmission .media-modal .media-router>a:last-child,
body.page-template-page-granteesubmission .media-modal .media-frame-menu { 
	display: none;
}

body.page-template-page-granteesubmission .media-modal .media-modal-close { width: 190px; }

/* In The News Archive */

body.post-type-archive-inthenews ul { 
	margin: 0;
	padding: 0;
}

body.post-type-archive-inthenews li { 
	list-style-type: none;
	margin-top: 1em;
	margin-bottom: 1em;
}

body.post-type-archive-inthenews #maincontent li h5 { margin-bottom: 0; }


/* Single.php Article Pages */

body.single .granteeeditnotice {
	background-color: #ff8181;
    padding: 16px;
    margin-bottom: 40px;
}

body.single .granteeeditnotice h5 {
	color: #FFFFFF;
	text-align: center;
}

body.single .granteeeditnotice p {
	text-align: center;
	color: #FFFFFF;
	margin-bottom: 0;
	font-weight: 700;
	font-size: 1.25em;
}

body.single #maincontent h1 { margin-bottom: 0; }

body.single #maincontent .metadata { margin: 24px 0px; }

body.single #maincontent .metadata p a { text-decoration: none; }

body.single #maincontent .metadata p span:after { content: " | "; }

body.single #maincontent .metadata p span:last-child:after { content: ""; }

body.single #maincontent img { 
	margin-bottom: 40px;
	width: 100%;
	height: auto;
}

body.single #maincontent .aboutthegrantee {
	margin: 40px 0px;
	background-color: #F8F8F8;
	overflow: hidden;
	background-image: url(http://www.njhcn.org/wp-content/themes/njhcn2018/_img/greenslantbg-compressor.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

body.single #maincontent .aboutthegrantee > div:first-child {
	width: 40%;
	float: left;
    padding: 16px;
}

body.single #maincontent .aboutthegrantee > div:first-child h6 a {
	color: #FFFFFF;
	margin-bottom: 0;
	text-decoration: none;
}

body.single #maincontent .aboutthegrantee > div:first-child h6 a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

body.single #maincontent .aboutthegrantee > div:first-child p {
	color: #FFFFFF;
	text-transform: uppercase;
}

body.single #maincontent .aboutthegrantee > div:last-child {
	width: 56%;
	float: right;
}

body.single #maincontent .aboutthegrantee > div:last-child p {
	margin-bottom: 0;
	padding: 48px 16px 16px 40px;
}

body.single #maincontent .extraarticleinfo p span:after { content: ", "; }

body.single #maincontent .extraarticleinfo p span:last-child:after { content: ""; }

body.single .granteeedit {
	margin-top: 40px;
	border-top: 1px solid #cccccc;
	padding-top: 40px;
}

/* Search Results Page search.php */

body.search-results #maincontent > ul { 
	margin: 0;
	padding: 0;
}

body.search-results #maincontent > ul li {
	list-style: none;
	margin-top: 40px;
	margin-bottom: 40px;
}


/* ============================ RESPONSIVE MEDIA QUERIES ============================ */


@media screen and (max-width: 1800px) {
	
	/* Home Page */
	.slidecontent { padding: 0px 200px 0px 200px; }
}

@media screen and (max-width: 1750px) {
	
	/* Footer */ 
	footer .footersocial .socialicons a { margin: 0px 8px; }
}

@media screen and (max-width: 1700px) {
	
	/* Home Page */
	.unslider .slider,
	.unslider .slider li { 
		height: 50vh;
	}
		
	.slidecontent { 
		padding: 0px 100px 0px 200px;
		width: 55%;
	}
}

@media screen and (max-width: 1550px) {
	
	/* Header */
	#searchform fieldset input[type="text"] { width: 85%; }
	
	/* Footer */
	footer .footersocial .socialicons a { 
		font-size: 1.75em;
		margin: 0;
		margin-right: 8px;
	}
}

@media screen and (max-width: 1400px) {
	
	/* Typography */
	
	body { font-size: 16px; }
	
	/* Header */
	#headermain #headerdetails {
		display: flex;
	    flex-direction: column;
	    justify-content: center;
	}
	
	#headermain nav#mainnav {
		grid-column: span 6;
		text-align: center;
		margin-top: 40px;
	}
	
	/* Home Page */
	.unslider .slider, 
	.unslider .slider li {
    	height: 40vh;
    }
}

@media screen and (max-width: 1350px) {
	/* Grid Column Shift - 6 down to 4 */
	
	#devgrid,
	.contentwidth { 
		grid-template-columns: repeat(4, [col-start] 1fr);
	}
	
	/* Website Elements */
	#maincontent { grid-column: span 3; }
	
	ul#sidebar { grid-column: span 1; }
	
	ul#sidebar #searchform fieldset input[type="text"] { width: 80%; }
	
	/* Header */
	#preheader .contentwidth > * { grid-column: span 2; }
	
	#headermain #headerlogo { max-width: 230px; }
	
	/* Footer */
	footer .contentwidth > div { grid-column: span 1; }
	
	footer .footersocial {
		grid-column: span 2 !important;
		padding-left: 180px;
	}
	
	/* Home Page */
	.slidecontent h2 { font-size: 2em; }
	
	#granteelist { margin-top: -44px; }
	
	#granteelist > * { 
		grid-column: span 4;
		text-align: center;
	}
	
	#homefunders ul.contentwidth { grid-template-columns: repeat(3, [col-start] 1fr); }
}

@media screen and (max-width: 1200px) {
	
	/* Header */
	#searchform fieldset { width: 80%; }
	
	/* Footer */
	footer .footersocial .socialicons a { margin-top: 16px; }
	
}

@media screen and (max-width: 1150px) {
	
	/* Home Page */
	.unslider .slider, 
	.unslider .slider li { 
		height: 30vh;
	}
	
	.slidecontent h2 { font-size: 1.5em; }
}

@media screen and (max-width: 1075px) {
	
	/* Website Elements */
	ul#sidebar #searchform fieldset input[type="text"] { width: 77%; }
}

@media screen and (max-width: 1050px) {
	
	/* Home Page */
	.slidecontent { width: 65%; }
}

@media screen and (max-width: 1000px) {
	/* Grid Column Shift - 4 down to 2 */
	
	#devgrid,
	.contentwidth { 
		grid-template-columns: repeat(2, [col-start] 1fr);
	}
	
	/* Typography */
	body { font-size: 14px; }
	
	/* Repeating Elements */
	.card { grid-column: span 1; }
		
	/* Website Elements */	
	#maincontent { grid-column: span 2; }
	
	ul#sidebar { 
		grid-column: span 2;
		margin-top: 40px;
	}
	
	/* Website Elements */
	ul#sidebar #searchform fieldset input[type="text"] { width: 95%; }
	
	/* Header */
	#preheader .contentwidth > * { grid-column: span 1; }
	
	#searchform fieldset { width: 100%; }
	
	/* Footer */
	footer .footerinfo {
		grid-column: span 2 !important;
	    padding-bottom: 40px;
	    border-bottom: 1px solid white;
	    margin-bottom: 40px;
	    text-align: center;
	}
	
	footer .footersocial { 
		padding-left: 0;
		grid-column: span 1 !important;
	}
	
	/* Grantee Blog */
	body.category-grantee-blog div.articlelist .card { grid-column: span 2; }
}

@media screen and (max-width: 900px) {
	/* Menu shift */
	
	/* Header */
	#headermain nav#mainnav ul > li {
	    margin-top: 0.5em;
	    margin-bottom: 0.5em;
	    width: 100%;
    }
    
    #headermain nav#mainnav ul li:last-child a { margin-right: 0; }
    
    #headermain nav#mainnav ul li:hover ul.sub-menu {
    	width: 100%;
		text-align: center;
		position: relative;
		margin-top: 16px;
		border-left: none;
		border-right: none;
		background-color: transparent;
	}
	
	#headermain nav#mainnav ul li ul.sub-menu li { 
		border-bottom: none; 
		margin-top: 0;
		margin-bottom: 0;
	}
	
	#headermain nav#mainnav ul li ul.sub-menu li a { font-size: 0.8em; }
}

@media screen and (max-width: 850px) {
	
	/* Website Elements */
	ul#sidebar #searchform fieldset input[type="text"] { width: 92%; }
}

@media screen and (max-width: 800px) {
	
	/* Home Page */
	.slidecontent { width: 75%; }
}

@media screen and (max-width: 675px) {
	
	/* Typography */
	body { font-size: 14px; }
	
	/* Home Page */
	.slidecontent { width: 85%; }
}

@media screen and (max-width: 600px) {
	
	/* Header */
	#preheader .contentwidth > p {
		grid-column: span 2;
		text-align: center;
	}
	
	#preheader .contentwidth > form {
		grid-column: span 2;
		margin-top: 16px;
	}
	
	#headermain #headerlogo { 
		grid-column: span 2;
		order: 2;
		margin: 0 auto;
	}
	
	#headermain #headerdetails {
		grid-column: span 2;
		order: 1;
		text-align: center;
		margin-bottom: 16px;
	}
	
	#headermain nav#mainnav {
		grid-column: span 2;
		order: 3;
	}
	
	/* Home */
	.slidecontent { 
		width: 150%; 
		padding: 0 50px 0px 59vw;
	}
	
	/* Grantee Blog */
	body.category-grantee-blog div.articlelist .card { grid-column: span 4; }
}

@media screen and (max-width: 575px) {
/* Grid Column Shift - 2 down to 1 */
	
	#devgrid,
	.contentwidth { 
		grid-template-columns: repeat(1, [col-start] 1fr);
	}
	
	/* Website Elements */
	#maincontent,
	ul#sidebar { 
		grid-column: span 1;
	}
	
	/* Footer */
	footer .contentwidth > div { grid-column: span 1 !important; }
	
	footer .contentwidth .footernav { 
		text-align: center;
		border-bottom: 1px solid white;
		padding-bottom: 40px;
		margin-bottom: 40px;
	}
	
	footer .contentwidth .footersocial { text-align: center; }
	
	/* Home Page */
	#homefunders ul.contentwidth { grid-template-columns: repeat(2, [col-start] 1fr); }
	
}

@media screen and (max-width: 550px) {
	
	/* Website Elements */
	ul#sidebar #searchform fieldset input[type="text"] { width: 90%; }
	
	/* Home Page */
	.slidecontent { padding: 0 70px 0px 63vw; }
}

@media screen and (max-width: 500px) {
	
	/* Home Page */
	.slidecontent { 
		width: 160%;
		padding: 0 70px 0px 73vw;
	}
}

@media screen and (max-width: 450px) {
	
	/* Website Elements */
	ul#sidebar #searchform fieldset input[type="text"] { width: 87%; }
	
	/* Home Page */
	.slidecontent { 
		width: 170%;
		padding: 0 70px 0px 85vw;
	}
}