@Theme Name: 2022 St. Jude Runs
@Description: This site was built by Central States Media. For more information about the site or this custom WordPress theme, you can contact Central States Media at: info@centralstatesmedia.com or call us at: 309-693-2345.
@Author: Central States Media
@Author URI: http://www.centralstatesmedia.com/
@Version: 1.0
@Date: January, 2022
@charset "utf-8";
/* CSS Document */

/* --- COLOR VARIATIONS --- */
:root{
	--red: #e51937;
	--drkred: #840000;
	--ltgrey: #f6f6f6;
	--grey: #e4e4e4;
	--drkgrey: #232323;
	--shadow: rgba(35,35,35,.7);
	--headshadow:  rgba(35,35,35,.8);
}

/* *//*FLEX WIDTH*/

* {box-sizing: border-box; font-family: open-sans;}

body {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 16px;
}

/* --- FONT STYLING --- */

h1 {font-size: 2.25em; text-transform: uppercase;}
h1 strong {color:var(--red);}
h1::after {
content: "";
display: block;
height: 4px;
width: 75px;
background-color: var(--drkred);
margin-top: 5px;
}
h1.home::after {background-color: var(--drkgrey) !important;}
h2 {font-size: 2em; font-weight: 700; text-transform: uppercase;}
h2 strong {font-weight: 700;}
h3 {font-size: 1.5em; color: var(--red); text-transform: uppercase;}
h4 {font-size: 1.3em; font-weight: 400;}
h5 {font-size: 1.2em;}
h6 {font-size: 1.1em; font-weight: 400;}
p {font-size: 1em;}

/* --- LINK & BUTTON STYLING --- */
.pum-theme-default-theme .pum-content a{color:white !important;}
.pum-theme-default-theme .pum-content a:hover{color:black !important;}
.pum-theme-default-theme .pum-content a.button{border-color:white;text-decoration:none !important;}
.pum-theme-default-theme .pum-content a.button:hover{color:var(--drkgrey) !important;border-color: var(--drkgrey);background:none !important;}
.button, .drk-button, .lt-button, input[type=button], a.wp-block-button__link {
	padding: 10px 20px;
	margin: 0;
	border: solid 3px;
	text-align: center;
	border-radius: 10px;
	display: inline-block;
}

.run-info{
	display: grid;
	/*grid-template: 80px 1fr 120px / 10.5% 1fr 1fr 1fr 10.5%;*/
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 4.5%;
	text-align: center;
}
p.run-miles{background-color:var(--red);line-height:1em;font-size:1.5em;color:#fff;text-align: center;padding:10px;}
p.run-miles strong{font-size:2em;}

.run-links{ background:#f6f6f6;padding:15px;
	grid-template-columns:max-content max-content max-content;grid-column-gap:2%;
	justify-content: center;
	display:grid;}
.run-totals{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;column-gap:2%;row-gap:15px;text-align:center;}
@media only screen and (max-width: 1000px) {
	.run-totals{grid-template-columns:1fr 1fr 1fr;}
}
@media only screen and (max-width: 768px) {
	.run-totals{grid-template-columns:1fr 1fr;}
}
@media only screen and (max-width: 400px) {
	.run-totals{grid-template-columns:1fr;column-gap:0;}
}
p.run-button{padding:0 !important;background-color:var(--red);}
p.run-button a, .run-totals a.run-button{display:block;background-color:var(--red);color:#fff;text-decoration:none;text-transform:uppercase;padding:20px 10px 40px;position:relative;}
p.run-button a:after,
.run-totals a.run-button:after{
	content:"";
	border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
 transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
position:absolute;bottom:20px;left:50%;}
p.run-button:hover, .run-totals a.run-button:hover {background-color:var(--drkgrey) !important;}
p.run-button:hover a:after, .run-totals a.run-button:hover:after{padding:4px;}

a.wp-block-button__link{
	border-radius:10px;
	background-color:var(--white);
border-color: var(--red); color: var(--drkgrey) !important;}
a.wp-block-button__link:hover{border-color: var(--drkred); background-color: var(--drkred); color: white !important; transition: 1s;}

/* *//*RED OUTLINED BUTTON STYLING--*/

.button {border-color: var(--red); color: var(--drkgrey) !important;}
.button:hover {border-color: var(--drkred); background-color: var(--drkred); color: white !important; transition: 1s;}

/* *//*GREY OUTLINED BUTTON STYLING--*/

.drk-button {border-color: var(--drkgrey); color: var(--drkgrey) !important;}
.drk-button, .drk-button:link, .drk-button:visited, .drk-button:active {color: var(--drkgrey) !important;}
.drk-button:hover {background-color: var(--drkgrey); color: white !important; transition: 1s;}

/* *//*WHITE OUTLINED BUTTON STYLING--*/

.lt-button {border-color: white;}
.lt-button, .lt-button:link, .lt-button:visited, .lt-button:active {color: white !important;}
.lt-button:hover {background-color: var(--drkred); color: white !important; transition: 1s;}

/* *//*BUTTON OVERLAY --> Stylizes images into interactive buttons-*/

.button-overlay {
	width: 100%;
	height: 100%;
	z-index: 1;
	position: absolute;
	top: 0px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--shadow) 100%);
}

/* *//* GENERAL LINK STYLING */

a {text-decoration: none; color: var(--red);}
a:link, a:visited, a:active {color: var(--red);}
a:hover {color: var(--drkgrey); transition: 1s;}

/* --- HR STYLING --- */

hr {
	border: none !important;
	width: 100%;
	height: 4px;
	background-color: var(--grey);
	margin: 15px 0px;
}

.shadow-bar::after {
	content: "";
	display: block;
	width: 250px;
	height: 25px;
	background: url("img/divider.svg") no-repeat center;
	background-size: contain;
	margin: 15px auto;
}

hr.shadow-bar {
	background-color: transparent;
	height: 15px;
}

/* --- LIST STYLING --- */

/* //*BULLETED LIST STYLING */

ul li {list-style-type: none; line-height: 1.4;}
ul:is(.coblocks-gallery, .wp-block-social-links) li:before{display:none !important;content:"";}
ul li::before {
	content:"•";
	color: var(--drkred);
	font-size: 1.6em;
	vertical-align: middle;
	padding-right: 5px;
}

/* *//*ORDERED LIST STYLING */

ol li {list-style: none; line-height: 1.4; counter-increment: li;}
ol li::before {
	content:counter(li)".";
	color: var(--drkred);
	padding-right: 5px;
	text-align: right;
	font-weight: 600;
}
	

/* --- ACCORDION STYLING --- */

.accordion {
	width: 100%;
	height: auto;
	border: solid 2px var(--grey);
	margin-bottom: 15px;
	margin-top: 15px;
}

.accordion .title {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding: 15px;
	background-color: var(--grey);
	font-weight: 400;
	font-size: 1.4em;
}

.accordion .title strong {font-weight: 700;}

/* --- SOCIAL STYLING -> stylizes basic formatting of all social elements */

.socials {grid-area: 2/4/span 1/span 1; margin: auto;}
.social-icon {display: inline-block; width: 30px; height: 30px; margin-top: -30px;}
/* .social-icon:last-of-type {padding: 0px;} */


.instagram {background: url("img/icons/instagram.svg") no-repeat center;}
.facebook {background: url("img/icons/facebook.svg") no-repeat center;}
.tiktok {background: url("img/icons/tik-tok.svg") no-repeat center / contain;}
.teams {background: url("img/icons/teams.svg") no-repeat center;}

/* --- HEADER STYLING --- */

header {
	position: fixed;
	top: 0;
	z-index: 1000;
	width: 100%;
	height: auto;
	padding: 10px 5%;
	background: linear-gradient(to bottom, var(--headshadow) 0%, rgba(0, 0, 0, 0) 100%);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	flex-wrap:wrap;
}
header .alert{background:var(--red);padding:5px 5%;color:white;width:100%;text-align:center;}
#header-logo {
	background: url("img/sjr-red.svg") no-repeat center;
	background-size: contain;
	height: 60px;
	width: 7.5%;
	display: block;
	margin-top: 10px;
}

#header-logo:hover {transition: .5s; opacity: .75;}

/* *//*NAVIGATION STYLING*/

nav {height: auto; width: 80%; color: white; margin: 0px 50px;}
nav li::before {display: none !important;}

/* *//*STYLING 1ST LEVEL*/

nav ul {
	list-style: none;
	color: white;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	height: 100%;
}

nav ul li {position: relative;}

nav ul li a {
	display: block;
	padding: 0px 15px 15px 15px;
	text-align: center;
	width: auto;
	color: white !important;
	font-weight: 700;
	text-transform: uppercase;
}

nav ul li a:hover {color: var(--red) !important; transition: 1s; position: relative;}

/* *//*STYLING 2ND LEVEL*/

nav ul ul{
	display:none;
	position: absolute;
	left: -5%;
	background: rgba(255,255,255, .75);
	box-shadow: 0 0 5px 0 var(--shadow);
	width:110%;
	padding: 0px;
	height: auto;
}

nav ul ul li a {padding: 10px 5px !important; background-color: transparent;}
nav ul ul li a:hover {background: rgba(255,255,255, .5);transition: 1s !important; color: var(--drkred) !important;}
nav ul ul li:last-of-type::after {display: none;}

nav ul ul li::after {
	content: "";
	display: block;
	width: 40%;
	height: 3px;
	background-color: var(--drkred);
	position: relative;
	left: 30%;
}

nav ul ul li:hover::after {width: 60%; left: 20%; transition: 1s;}

nav ul ul li a {margin: auto; text-transform: capitalize; color: var(--drkgrey) !important;}

/* *//*SHOW SUBMENU WHEN PARENT IS HOVERED*/

nav ul li:hover > ul {display: block;}

/* *//*HOVER ELEMENTS OF SUBMENUS*/

nav li:hover > a,d
nav a:focus {color:var(--red) !important;}

/* *//*STYLING CURRENT RENDERED PAGE*/

nav .current-menu-item > a,
nav .current-menu-ancestor > a,
nav .current_page_item > a,
nav .current_page_ancestor > a {
}

/* *//* HAMBURGER MENU STYLING */

#m-menu:hover, #menu-content .close:hover {opacity: .75; transition: 1s;}
#menu-wrap {display: none; z-index: 2000;}
#menu-content .close {color: white; font-weight: 600; text-transform: uppercase; position: absolute; right: 5%; top: 5%; font-size: 1.5em;}

#m-menu {
	display: block;
	height: 35px;
	width: 2.5%;
	background: url("img/icons/menu.svg") no-repeat center;
	background-size: contain;
	align-self: center;
	min-width: 25px;
	margin-top: 20px;
}

#menu-wrap {
	display: none;
	position: absolute;
	z-index: 10000 !important;
	background-color: rgba(0, 0, 0, .55);
	width: 100%;
	height: 100vh;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
}

#menu-content {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background-color: var(--drkgrey);
	padding: 50px 5%;
	z-index: 10000 !important;
	box-shadow: 0px 0px 10px 3px var(--shadow);
	width: 63%;
	overflow-y: scroll;
}

/* *//* HAMBURGER MENU (OPEN) STYLING*/

#menu-content ul {padding-top: 50px; margin-right: 33%; position: relative;}
#menu-content ul li {padding: 15px 0px; text-align: left; border-bottom: 3px solid rgba(0, 0, 0, .55);}
#menu-content ul li:hover {border-bottom: 3px solid var(--drkred); transition: 1s;}
#menu-content ul li a {color: white; font-size: 1.25em; font-weight: 600; text-transform: uppercase; text-decoration: none;}

/* *//* HAMBURGER SUB-MENU STYLING*/

#menu-content ul ul {
	padding-top: 10px;
	display:none;
	position: relative;
	left:-20px;
}

#menu-content ul li:hover > ul {display: block;}
#menu-content li::before {display: none;}
#menu-content ul ul li {color: white; font-size: 1.em; font-weight: 400; text-transform: uppercase; padding: 5px 0px;}
#menu-content ul ul li:hover {color: var(--red);}
#menu-content ul ul li, #menu-content ul ul li:hover {border-bottom: none;}

#menu-content li:hover > a,d
#menu-content a:focus {color: var(--red);}

/* *//* HAMBURGER SOCIAL STYLING*/

#menu-content .socials {position: relative; left: 4%; padding-top: 10px;}
#menu-content .socials h6 {color: white;}
#menu-content .social-icon {background-color: var(--drkred); border: 5px solid var(--drkred); border-radius: 5px; margin-right: 15px;}
#menu-content .social-icon:hover {background-color: var(--drkgrey); border-color: var(--drkgrey); outline: solid 3px white; transition: .75s; }

/* --- EVENT POPOUT STYLING --- */

.sticky {position: fixed; top: 225px;}

.popout {
	width: 80px;
	position: fixed;
	height: auto;
	top: 450px;
	right: 0px;
	z-index: 100;
}

.popout .date-wrap {
	background-color: var(--drkred);
	width: 100%;
	height: auto;
	padding: 20px 10px;
	text-align: center;
	color: white;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

.cal-icon {
	position: block;
	height: 45px;
	width: 45px;
	background: url("img/icons/calendar.svg") no-repeat center;
	background-size: contain;
	margin: auto;
	margin-bottom: 20px;
}

.date {
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
}

.date strong {font-size: 1.9em;}

.icon-wrap {
	display: block;
	width: 100%;
	height: 30px;
	margin-top: 15px;
	background-color: var(--drkgrey);
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 5px 0px;
	border: 0px solid var(--drkgrey);
}

.icon-wrap a {
	display: block;
	width: 100%;
	height: 20px;
	margin: 0px auto;
	background-size: contain;
	padding: 0px;
}

.icon-wrap:hover {background-color: var(--red); transition: 1s;}
.icon-wrap .facebook {background: url("img/icons/facebook.svg") no-repeat center;}
.icon-wrap .instagram {background: url("img/icons/instagram.svg") no-repeat center;}
.icon-wrap .tiktok {background: url("img/icons/tik-tok.svg") no-repeat center / contain;}
.icon-wrap .teams {background: url("img/icons/teams.svg") no-repeat center;}

/* --- HOMEPAGE STYLING --- */

/* *//*SLIDER*/

#slider {filter: drop-shadow(0px 5px 8px var(--shadow));}
#slider, #slider img {width: 100%; height: 600px;}
#slider img {object-fit: cover; object-position: center; border-bottom: 15px solid var(--red);}

/* *//*MAIN CONTENT*/

main {width: 100%; height: auto;}

/* *//*INTRODUCTION CONTENT*/

#intro-wrap {
	width: 100%;
	display: grid;
	grid-template: 50px 1fr 50px / 5% 1fr 1fr 5%;
	grid-column-gap: 5%;
}

#intro {grid-area: 2 / 2 / span 1 / span 1;}
#intro-wrap #total-wrap {grid-area: 2 / 3 / span 1 / span 1; position: relative;}
#intro-wrap .gallery {box-shadow: 0px 0px 10px 3px var(--shadow);}
#intro-wrap .gallery, #intro-wrap .gallery img {width: 100%; height: 500px;}
#intro-wrap .gallery img {object-fit: cover; object-position: center;}

/* *//* GALLERY STYLING */

/*.gallery::before {
	content: "<";
	color: white;
	font-weight: 600;
	font-size: 2.25em;
	display: block;
	position: absolute;
	top: 38%;
	left: 20px;
	filter: drop-shadow(0px 5px 8px var(--shadow));
}*

/*.gallery::after {
	content: ">";
	color: white;
	font-weight: 600;
	font-size: 2.25em;
	display: block;
	position: absolute;
	top: 38%;
	right: 20px;
	filter: drop-shadow(0px 5px 8px var(--shadow));
}
*/
#total-banner {
	position: absolute;
	background-color: var(--drkgrey);
	width: 95%;
	height: 50px;
	top: 450px;
	right: 0;
	color: white;
	padding: 30px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#total-banner #total {
	font-size: 1.5em;
	display: inline-block;
	font-weight: 700;
	padding-right: 15px;
}

#total-banner #year-total {
	display: inline-block;
	font-weight: 700;
	font-size: .9em;
	padding-left: 15px;
	border-left: 3.5px solid white;
}

/* *//* CALLOUT BANNER STYLING */

#callouts {
	background-color: var(--ltgrey);
	display: grid;
	grid-template: 80px 1fr 120px / 10.5% 1fr 1fr 1fr 10.5%;
	grid-column-gap: 4.5%;
}
	
#callouts a, #callouts a:link, #callouts a:visited, #callouts a:active {color: black !important;}
#callouts a:hover {color: var(--red) !important;}

.callout-item:hover .img-wrap, .callout-item:hover .img-wrap img, .callout-item:hover .button-overlay {border-radius: 20px; transition: 1s;}

.callout-item:hover .button-overlay {background-color: rgba(0,0,0, .35); transition: 1s;}
.callout-item h4 {text-align: center; padding-top: 0px;}

#run-callout {grid-area: 2 / 2 / span 1 / span 1;}
#support-callout {grid-area: 2 / 3 / span 1 / span 1;}
#resources-callout {grid-area: 2 / 4 / span 1 / span 1;}

/* *//* SPONSOR BANNER STYLING */

#sponsor-wrap, #sponsor-wrap .sponsor-bg {height: 350px;}

#sponsor-wrap {
	background-color: var(--drkgrey);
	display: grid;
	grid-template: 35px auto auto 65px / 7.5% 80% 7.5%;
	grid-column-gap: 2.5%;
	width: 100%;
	position: relative;
}

.sponsor-bg {
	position: absolute;
	z-index: 1;
	width: 100%;
	object-fit: cover;
	object-position: center;
	opacity: .75;
}

/*#sponsor-wrap::before {
	content: "<";
	color: white;
	font-weight: 600;
	font-size: 2.25em;
	display: block;
	position: absolute;
	top: 55%;
	left: 7.5%;;
	z-index: 10;
}*/

/*#sponsor-wrap::after {
	content: ">";
	color: white;
	font-weight: 600;
	font-size: 2.25em;
	display: block;
	position: absolute;
	top: 55%;
	right: 7.5%;
	filter: drop-shadow(0px 5px 8px var(--shadow));
	z-index: 10;
}*/
#sponsor-wrap .sponsor-logos{
	display:grid;
	position:relative;
	z-index:2;
	grid-area: 3/2/span 1/span 1;
}
#sponsor-wrap .sponsor-logos img{
	width:80%;height:150px;
	object-fit:contain;
	object-position:center;
	display:block;
	margin:0 auto;
}
#sponsor-wrap .sponsor-logos a:hover img{opacity:0.7;}
#sponsor-wrap h2 {
	/*grid-area: 2/3/span 1/span 2;*/
	grid-area: 2/2/span 1/span 1;
	text-align: center;
	color: white;
	padding-bottom: 0px;
	margin-bottom: 0px;
	z-index:2;
	psotion: relative;
}

#sponsor-wrap h2::after {
	content: "";
	display: flex;
	width: 350px;
	border-bottom: solid 4px var(--red);
	margin: auto;
	padding-top: 10px;
}

.sponsor-img, .sponsor-img img {width: 100%; height: 75px; z-index:2;}
.sponsor-img img {object-fit: contain; object-position: center; filter: drop-shadow(0px 5px 8px var(--shadow));}
.sponsor-img img:hover {opacity: .65; transition: .5s; cursor: pointer;}

/*#sponsor-one {grid-area: 3/2/span 1/ span 1; width: 100%; height: auto;}
#sponsor-two {grid-area: 3/3/span 1/ span 1; width: 100%; height: auto;}
#sponsor-three {grid-area: 3/4/span 1/ span 1; width: 100%; height: auto;}
#sponsor-four {grid-area: 3/5/span 1/ span 1; width: 100%; height: auto;}*/


/********    NEWS ARCHIVE       *********/
.news-archive{}
.news-item{display:grid;grid-template-columns:1fr 2fr; grid-column-gap:5%;margin:40px 0;align-items:center;text-align:left;}

/* *//* IMPACT BANNER STYLING */

#impact-wrap {
	display: grid;
	grid-template: 80px auto 1fr auto 120px / 10% 72% 10%;
	grid-column-gap: 4%;
}

#impact-wrap h2 {grid-area: 2 / 2 / span 1 / span 1; text-align: center; margin-bottom: 30px;}
#impact-wrap h4 {text-align: center; margin-top; 0px; padding-top: 0px; }
#impact-wrap .impact-posts{
	grid-area:3/2/span 1 / span 1;
	display:grid;
	grid-template:auto / 1fr 1fr 1fr;
	grid-column-gap: 4.5%;
}
#impact-wrap .impact-button{
	grid-area: 5/2/span 1/span 1;
	text-align:center;
}
.img-wrap {position: relative;}
.img-wrap, .img-wrap img {width: 100%;}
.img-wrap img {object-fit: cover; object-position: center; box-shadow: 0px 0px 10px 3px var(--shadow);height:300px;}

#impact-wrap .button {grid-area: 4 / 3 / span 1 / span 1;}
#impact-one {grid-area: 3 / 2 / span 1 / span 1;}
#impact-two {grid-area: 3 / 3 / span 1 / span 1;}
#impact-three {grid-area: 3 / 4 / span 1 / span 1;}

.impact-item:hover .img-wrap, .impact-item:hover .img-wrap img, .impact-item:hover .button-overlay {border-radius: 20px; transition: 1s;}
.impact-item:hover .button-overlay {background-color: rgba(0,0,0, .35); transition: 1s;}

/* *//* FOOTER STYLING */

footer {
	display: grid;
	grid-template: 125px 1fr 125px / 7.5% 1fr 1fr 1fr 7.5%;
	grid-column-gap: 2.5%;
	background-color: var(--ltgrey);
	vertical-align: middle;
}

#footer-logo {
	display: block;
	width: 150px;
	height: 100px;
	background: url("img/logo-stjuderuns-red.svg") no-repeat center;
	background-size: contain;
	grid-area: 2/2/span 1/span 1;
	margin: auto;
}

#footer-logo:hover {height: 110px; width: 170px; opacity: .75; transition: 1s;}

.copyright-wrap {grid-area: 2/3/span 1/span 1; text-align: center;}
.copyright {font-size: .85em;}

footer h6 {margin-top: -15px;}
footer .social-icon {background-color: var(--drkred); border: 5px solid var(--drkred); border-radius: 5px;}
footer .social-icon:hover {background-color: var(--drkgrey); border: 5px solid var(--drkgrey); border-radius: 5px; transition: 1s;}

/* --- INSIDE PAGE STYLING --- */
	
/* *//*FEATURED IMAGE*/

#feature-img {filter: drop-shadow(0px 5px 8px var(--shadow));}
#feature-img, #feature-img img {width: 100%; height: 350px;}
#feature-img img {object-fit: cover; object-position: center; border-bottom: 15px solid var(--red);}

/* *//*MAIN CONTENT STRUCTURING*/

.grid {
	display: grid;
	grid-template: 1fr auto / 7.5% 1fr 3fr 7.5%;
	grid-column-gap: 2.5%;
	margin: 75px 0px;
}

/* *//*SIDEBAR STYLING*/

.sidebar {
	display: grid;
	grid-area: 1 / 2 / span 1 / span 1;
	grid-template: 1fr 1fr 1fr auto / 1fr;
	grid-row-gap: 30px;
	height: auto;
	width: 100%;
	max-height: 725px;
}

.sidebar-item, .sidebar-item img {width: 100%; height: 200px;}
.sidebar-item img {object-fit: cover; object-position: center;}
.sidebar-item {position: relative; box-shadow: 0px 0px 10px 3px var(--shadow);}
.sidebar-item h4 {position: absolute; z-index: 100; bottom: -15px; width: 100%; color: white; text-align: center; padding: 0px 10px;}
.sidebar-item:hover h4 {color: var(--red); transition: 1s;}

#sidebar-one {grid-area: 1 / 1 / span 1/ span 1;}
#sidebar-two {grid-area: 2 / 1 / span 1/ span 1;}
#sidebar-three {grid-area: 3 / 1 / span 1/ span 1;}

.sidebar-item:hover, .sidebar-item:hover img, .sidebar-item:hover .button-overlay {border-radius: 20px; transition: 1s;}
.sidebar-item:hover .button-overlay {background-color: rgba(0,0,0, .35); transition: 1s;}

/* *//*WODRPESS CONTENT STYLING*/

.wp-content {
	grid-area: 1 / 3 / span 2 / span 1;
	height: auto;
	width: 100%;
	padding-left: 75px;
	position: relative;
}

.wp-content::before {
	content: "";
	display: block;
	position: absolute;
	width: 25px;
	height: 98%;
	left: 0px;
	top: 0px;
	background: url("img/divider-vertical.svg") no-repeat center;
	background-size: contain !important;
}
.wp-content img{display: block;max-width: 100%;height:auto;}
.wp-content iframe{max-width: 100%;}
.form-holder {
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}

/* --- INSIDE PAGE - FULL WIDTH TEMPLATE --- */
.full-width .grid {
	grid-template: 1fr auto / 7.5% 1fr 7.5%;
}
.full-width .wp-content {
	grid-area: 1 / 2 / span 2 / span 1;
}
.full-width .wp-content::before {
	content: none;
}
.full-width h1{text-align:center;}
.full-width h1:after{margin:5px auto;}

/****************
PAGINATION STYLES
*****************/
.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
 
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#666 !important;
background: #d5d5d5;
}
 
.pagination a:hover{
color:#fff !important;
background: #000;
}
.pagination span{background:#666;color:#fff !important;}
.pagination .current{
padding:6px 9px 5px 9px;
background: #000;
color:#fff !important;
}

/* --- MEDIA QUERIES --- */
	
/* *//* LARGE DEVICES (1200PX - 992PX) */

@media only screen and (max-width: 1200px) {
	
	body {font-size: 14px;}
	
	/* --- HEADER STYLING --- */
	
	#header-logo {height: 50px; width: 20%; display: block;}

	/* *//*NAV STYLING*/

	nav {height: auto; width: 70%;margin:0 20px;}
	nav ul li a{padding: 10px 5px; min-width: 100px;}

	/* --- EVENT POPOUT STYLING --- */
	
	.popout {width: 10%;}
	
	/* --- SLIDER & FEATURED IMAGE STYLING --- */
	
	#slider, #slider img {width: 100%; height: 450px;}
	#feature-img, #feature-img img {width: 100%; height: 250px;}
	
	/* --- IMAGE BUTTON STYLING --- */

	.img-wrap, .img-wrap img {height: 200px;}
	
	/* --- HOMEPAGE STYLING --- */
	
	#intro-wrap {grid-template: 50px 1fr 50px / 7.5% 1fr 1fr 7.5%;}
	#intro-wrap .gallery, #intro-wrap .gallery img {width: 100%; height: 300px;}

	#callouts {grid-template: 25px 1fr 75px / 10% 1fr 1fr 1fr 10%;}
	#impact-wrap .impact-posts{grid-column-gap:6%;}
	
	#sponsor-wrap {grid-template: 35px auto auto 65px / 10% 75% 10%;}
	#sponsor-wrap, #sponsor-wrap .sponsor-bg {height: 275px;}
	
	/*#impact-wrap {grid-template: 25px auto 1fr auto 75px / 10% 1fr 1fr 1fr 10%;}*/
	
	footer {grid-template: 125px 1fr 125px / 10% 1fr 1fr 1fr 10%;}
	/* --- NEWS --- */
	.news-item{grid-template-columns:1fr 1fr;}
	/* --- INSIDE PAGE STYLING --- */

	.grid {grid-template: 1fr auto / 10% 1fr 3fr 10%;}

	.sidebar {max-height: 575px;}
	.sidebar-item, .sidebar-item img {height: 150px;}

	.wp-content {padding-left: 50px;}
}

/* *//* LAPTOPS (992PX - 768PX) */

@media only screen and (max-width: 1000px) {
	
	/* --- FONT STYLING --- */
	
	h1::after {margin: 10px auto;}
	
	/* --- NAV STYLING --- */
	
	nav ul, nav {display: none;}
	#header-logo {width: 70%;background-position:left;}
	#m-menu {width: 20%;}
	
	/* --- HAMBURGER STYLING --- */

	#menu-content {width: 100%;}
	#menu-content ul {padding-top: 50px; margin: 0px 20% 0px 5%; position: relative;}
	#menu-content ul li {padding: 20px 0px; text-align: left; border-bottom: 3px solid rgba(0, 0, 0, .55);}
	#menu-content .socials {left: 10%;}
	
	/* --- POPOUT STYLING --- */
	
	.popout {width: 25%; position: absolute; top: 150px;}
	.popout .date-wrap {display: grid; grid-template: 1fr / 1fr 1fr;}
	.cal-icon {grid-area: 1 / 1 / span 1 / span 1; height: 50px; width: 50px;}
	.date {grid-area: 1 / 2 / span 1 / span 1;}
	.icon-wrap {display: none;}
	
	/* --- SOCIAL STYLING --- */
	
	.socials {grid-area: 3/ 2 /span 1/span 1;}
	
	/* --- SLIDER & FEATURED IMAGE STYLING --- */
	
	#slider, #slider img {width: 100%; height: 275px;}
	#feature-img, #feature-img img {width: 100%; height: 250px;}
	
	/* --- IMAGE BUTTON STYLING --- */

	.img-wrap, .img-wrap img {height: 300px;}
	
	/* HOMEPAGE STYLING --- */

	main {width: 100%; height: auto;}

	#intro-wrap {grid-template: 50px 1fr auto / 1fr; grid-column-gap: 0%;}
	#intro {grid-area: 2 / 1 / span 1 / span 1; padding: 20px 10% 50px 10%; text-align: center;}
	#intro-wrap #total-wrap {grid-area: 3 / 1 / span 1 / span 1;}
	#intro-wrap .gallery, #intro-wrap .gallery img {width: 100%; height: 425px;}
	
	#total-banner {width: 100%;}

	#callouts {
		grid-template: 50px 1fr 1fr 1fr 50px / 12.5% 1fr 12.5%;
		grid-column-gap: 2.5%;
		grid-row-gap: 25px;
	}

	#run-callout {grid-area: 2 / 2 / span 1 / span 1;}
	#support-callout {grid-area: 3 / 2 / span 1 / span 1;}
	#resources-callout {grid-area: 4 / 2 / span 1 / span 1;}

	#sponsor-wrap, #sponsor-wrap .sponsor-bg {height: 350px;}
	#sponsor-wrap {
		grid-template: 25px auto auto 25px / 12.5% 1fr 12.5%;
		grid-column-gap: 2.5%;
		grid-row-gap: 25px;
	}
	
	#sponsor-wrap::before{top: 68%; left: 15%;}
	#sponsor-wrap::after {top: 68%; right: 15%;}
	/*#sponsor-wrap h2 {grid-area: 2/2/span 1/span 1;}*/
	#sponsor-wrap h2::after {width: 275px;}
	/*.sponsor-img, .sponsor-img img {height: 100px;}*/

	/*nsor-one {grid-area: 3/2/span 1/ span 1; width: 100%; height: auto;}
	#sponsor-two, #sponsor-three, #sponsor-four {display: none;}*/
	#impact-wrap .impact-posts{grid-template: auto/1fr;}
	/*#impact-wrap {
		grid-template:80px auto 1fr auto 120px / 10% 72% 10%;
		grid-column-gap: 2.5%;
		grid-row-gap: 25px;
	}

	#impact-wrap h2 {grid-area: 2 / 2 / span 1 / span 1;}
	#impact-wrap .button {grid-area: 6 / 2 / span 1 / span 1;}*/

	/*#impact-one {grid-area: 3 / 2 / span 1 / span 1;}
	#impact-two {grid-area: 4 / 2 / span 1 / span 1;}
	#impact-three {grid-area: 5 / 2 / span 1 / span 1;}*/
	
	/* --- FOOTER STYLING --- */

	footer {grid-template: 50px auto auto auto 50px / 25% 1fr 25%;grid-row-gap: 35px;}

	#footer-logo:hover {height: 100px; width: 170px; opacity: .75; transition: 1s;}
	#footer-logo {grid-area: 2/ 2 /span 1/span 1;}
	.copyright-wrap {grid-area: 4/ 2 /span 1/span 1;}
	
	/* INSIDE PAGE STYLING */
	
	#feature-img, #feature-img img {width: 100%; height: 250px;}
	
	.grid {
		grid-template: 1fr / 1fr;
		grid-column-gap: 0%;
		grid-row-gap: 0px;
		margin: 0px;
	}
	
	.sidebar {
		display: none;
	}
	
	.wp-content {grid-area: 1 / 1 / span 1 / span 1; padding: 50px 5%; text-align: center;}
	.wp-content::before {display: none;}
	.accordion {text-align: left !important;}
}

/* popup styling */ 
.pum-container.theme-632 {
    max-width: 500px!important;
    width: 90%!important;
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%, -50%)!important;
}
.pum-container.pum-responsive.pum-responsive-medium {
    margin-left: inherit!important;
}
.pum-container .pum-content>:last-child, .pum-form__message:last-child {
    margin-bottom: inherit!important;
}

/* end popup styling */

/* map template styling */
#page-wrap.map .wp-content {
    position: relative;
    padding: 40px;
}

.wpgmza_sl_main_div {
    width: 100%!important;
    display: flex!important;
    justify-content: space-between!important;
    align-items: center!important;
    align-content: stretch;
    margin-top: 30px!important;
}
.wpgmza_sl_query_div {
    height: auto!important;
    display: flex!important;
    justify-content: flex-start!important;
    flex-flow: column nowrap;
    flex: 2;
    margin: 0 10px 0 0;
}
.wpgmza_sl_radius_div {
    display: flex!important;
    height: auto!important;
    margin: 0 10px 0 0!important;
    clear: none!important;
    flex-flow:column nowrap;
}
.wpgmza_sl_query_innerdiv1 {
    float: left!important;
    display: block!important;
    width: auto!important;
    clear: left!important;
    text-transform: uppercase!important;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
}
.wpgmza_sl_radius_innerdiv1 {
    text-transform: uppercase!important;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
}
.wpgmza_sl_radius_innerdiv2 {
    width: 100%!important;
    position: relative;
}
.wpgmza_sl_radius_innerdiv2::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: #e51937 transparent transparent transparent;
}
.wpgmza_sl_query_innerdiv2 {
    width: 100%!important;
}
.wpgmza_sl_query_innerdiv2 input {
    width: 100%!important;
}
.wpgmza_markerbox a {
    color:#fff!important;
}
.wpgmza_markerbox a:hover {
    color:#fff!important;
}
#addressInput_1 {
    padding: 15px;
    background-color: #f1f1f1;
    border: none!important;
}
#radiusSelect_1 {
    padding: 13px;
    background-color: #f1f1f1;
    border: none!important;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
    font-weight: 700!important;
    font-family: "Open Sans", sans-serif;
    position: relative;
    width: 100%;
}
#addressInput_1::placeholder {
    color: #000!important;
    opacity: 1;
    text-transform: uppercase;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
}
#radiusSelect_1 option {
    color: #000!important;
    opacity: 1;
    text-transform: uppercase;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
}
input.wpgmza_sl_search_button_1 {
    margin: 0 5px 0 0!important;
    align-self: end;
    background: #e51937!important;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
    border-radius: 0!important;
}
input.wpgmza_sl_search_button_1:hover {
    background: #fdbc46!important;
}
input.wpgmza_sl_reset_button_1 {
    margin:0 0 0 5px!important;
    align-self: end;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
    border-radius: 0!important;
}
p.wpgmza_infowindow_link {
    margin: 10px 2px!important;
}
a.wpgmza_infowindow_link {
    padding: 5px!important;
    background: #e51937!important;
    color: #fff!important;
    text-transform: uppercase!important;
    text-align: center!important;
    transition: 0.2s all ease;
    font-weight: 700!important;
    border-radius: 3px!important;
}
a.wpgmza_infowindow_link:hover {
    background: #fdbc46!important;
}
.wpgmza_markerbox a {
    color: #fff!important;
}
.wpgmza_markerbox {
    text-align: center!important;
}
p.wpgmza_infowindow_description a {
    color: #e51937!important;
}
p.wpgmza_infowindow_description a:hover {
    color: #fdbc46!important;
}
p.wpgmza_infowindow_title {
    font-size: 1.5em!important;
    text-transform: uppercase!important;
    color: #e51937!important;
}
p.wpgmza_infowindow_address {
    font-weight: 700!important;
}


/* *//* TABLETS (768PX - 576PX) */

@media only screen and (max-width: 800px) {
	
	/* POPOUT STYLING*/
	
	.popout {width: 50%; position: absolute; top: 150px;}
	
	/* --- IMAGE BUTTON STYLING --- */

	.img-wrap, .img-wrap img {height: 250px;}

	/*HOMEPAGE STYLING*/

	/*.sponsor-img, .sponsor-img img {height: 50px;}*/
	/*#sponsor-wrap, #sponsor-wrap .sponsor-bg {height: 275px;}*/
	/*#sponsor-wrap::before{top: 64%; left: 15%;}
	#sponsor-wrap::after {top: 64%; right: 15%;}*/

	/*#impact-wrap {
		grid-template: 50px auto 1fr 1fr 1fr auto 50px / 12.5% 1fr 12.5%;
		grid-column-gap: 2.5%;
		grid-row-gap: 25px;
	}*/

	/*#impact-wrap h2 {grid-area: 2 / 2 / span 1 / span 1;}
	#impact-wrap .button {grid-area: 6 / 2 / span 1 / span 1;}*/
	/*#impact-one {grid-area: 3 / 2 / span 1 / span 1;}
	#impact-two {grid-area: 4 / 2 / span 1 / span 1;}
	#impact-three {grid-area: 5 / 2 / span 1 / span 1;}*/

	footer {
		grid-template: 50px auto auto auto 50px / 12.5% 1fr 12.5%;
		grid-column-gap: 2.5%;
		grid-row-gap: 35px;
	}

	#footer-logo {grid-area: 2/2/span 1/span 1;}
	.copyright-wrap {grid-area: 4/2/span 1/span 1;}
	footer.socials {grid-area: 3/2/span 1/span 1;}
}

/* *//* PHONES (576PX - 0PX) */

@media only screen and (max-width: 576px) {
	
	/* --- NEWS --- */
	.news-item{grid-template-columns:1fr;}
}