@charset "UTF-8";
/* CSS Document */
/*stops: 768,992,1200*/
/*wfsu colors
 $wfsu-teal: #009BBA;
 $wfsu-lgreen: #48A973;
 $wfsu-dgreen: #405927;
 $wfsu-charcoal: #312c2c;
 $wfsu-purple: #4E3261;
 $wfsu-garnet: #782F40;
 $wfsu-yellow: #e9c31e;
 $wfsu-coral: #B8584C;

/*20% colors
 $wfsu-teal20: #007c95;
 $wfsu-lgreen20: #3a875c;
 $wfsu-yellow20: #ba9c18;
*/

@media (max-width:375px){
		h1.section-title {
		line-height: 26px!important;
		line-height: 2.6rem!important;
	}
	.storySource .storySourceName {
		display:block;
		line-height:18px;
		line-height:1.8rem;
	}
	.storyTimeStamp {
		margin-bottom: 12px;
		display:block;
	}
	.cal-date {
		font-size:12px;
		line-height: 15px;
		font-size:1.2rem;
		line-height: 1.5rem;
	}
	aside.dfp {
		position:relative;
		left:-15px;
	}
	#fw-feed-items {
		max-width: 320px;
	}
}
main {
	/*padding-top:215px;*/
}
/*navigation*/
a {cursor: pointer!important;}

ul.mg-container {padding-left:0;margin-bottom: -10px;}
.mega-buttons i {display: block;}
.mega-buttons {text-align: center; }
.mega-buttons ul li {
	display: inline-block; 
	background-color: #000;
	border-radius: 18px;
	margin:5px;
	overflow: hidden;
	max-width: 50px;
    max-height: 50px;
}
.mega-buttons a {
	display: table-cell;
    vertical-align: middle; 
    text-align: center;
    text-decoration: none;
	height:50px;
	width:50px;
	padding: 0;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	font-size: 1.4rem;
	text-transform: uppercase;
	border-radius: inherit;
	/*hover*/
	cursor: pointer;
	transition-property: color,background-color,border-color;
	transition-duration: .3s;
	transition-timing-function: ease-out;
}
.mega-buttons ul li:first-child a {
	background:  #48A973;
}
.mega-buttons ul li:nth-child(2) a {
	background:  #009BBA;
}
.mega-buttons ul li:nth-child(3) a {
	background:  #e9c31e;
}
.mega-buttons ul li:nth-child(4) a {
	background:  #A154A0;
}
.mega-buttons ul li:first-child a:hover {
background: #3a875c;
}
.mega-buttons ul li:nth-child(2) a:hover {
background-color: #007c95;
}
.mega-buttons ul li:nth-child(3) a:hover {
background-color: #ba9c18;
}
.mega-buttons ul li:nth-child(4) a:hover {
background-color: #A154A0;
}
.kidsimg{
    position: relative;
    width: 100%;
    height: 100%;
}
.kidsimg img {
    width: 100%;
    vertical-align: top;
}
.kidsimg:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.2);
    opacity: 0;
    transition: all .3s;
    -webkit-transition: all .3s;
}
.kidsimg:hover:after {
	opacity: 1;
}

.new-featured-box {
	margin-top:40px;
}

/**/
	.full-width-img {
		padding:0;
	}
	.full-width-img h2 {
		margin-top:8px;
		line-height: 40px;
		line-height: 4.0rem;
		font-weight: 700;
	}

.leadStory {
    border-bottom: 1px solid #ccc;
	margin-bottom: 30px;
}
.sideStory { 
	display: -ms-flexbox;
  	display: -moz-flex;
  	display: -webkit-flex;
  	display: flex;
	flex-direction: row;
	/*align-items: flex-start;*/
	justify-content: space-between;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}
.sideStoryButton {   
	padding-right: 15px;
    min-width: 47px;
	padding-top:6px;
}
i.playwfsu {
	display: block!important; 
	font-size:3rem!important;
	color: #333!important;
}

.sideStoryButton span {
	color:#999;
	font-size: 12px; font-size: 1.2rem;
	padding-left:3px;
}
.sideStoryButton a:hover:first-child {
	text-decoration: none;
}
.sideStoryCard {
	flex: 1;
    padding-right: 10px;
}
/*.sideStory > a:last-of-type  {
	-webkit-flex-basis: 200px!important;
	flex-basis: 200px!important;
    height: auto;
}
this was for layout that didn't have .recStoryImgContainer div
*/
.storySource {
	line-height: 18px!important;
	line-height: 1.8rem!important;
}

.storySourceName {
	color: #009BBA;
	font-size:75%;
	text-transform: uppercase;
}
.storyTitle a {
	font-family: "Benton Sans", Arial, sans-serif !important;
	color:#312c2c !important;
	font-size: 20px; font-size: 2.0rem;
	font-weight: 400;	
}
.storyTitle {
	
	line-height: 23px!important;
	line-height: 2.3rem!important;
}
.storyTitle a:hover {
	color:#3687c6 !important;
	text-decoration: none;
}

.storyTimeStamp {
	color: #999;
	font-size: 75%;
	text-transform: uppercase;
}
.storyTime {
	display:block;
}

.storyTime.fa-2x {
	font-size:.5rem!important;
}
.storyFeedImg {
	margin: 0;
    padding: 0;
    width: 110px;
    height: 100px;
    overflow: hidden;
}

.displayBig {
	display:none;
}
.squareStoryImgLink {
	display:block;
	width: 100%; 
	height: 100%;
}

.height100.new-featured-box a {color: inherit; }
.height100.new-featured-box a:hover {text-decoration: none;}

/*animated heart on button*/
@keyframes navpulse {
  0% { transform: scale(.92); }
  50% { transform: scale(1.0); }
  100% { transform: scale(.92); }
}
/* Resets */
.buttonword a { 
    text-decoration: none;
    font: 12px/1 Verdana;
    color: #000;
    display: block; }
.buttonword a:hover { text-decoration: underline; }
.buttonword { 
    list-style: none;
    margin: 0;
    padding: 0; }
.buttonword li { margin: 0; padding: 0; }

/* Top-level menu */
.buttonword  > li { 
    float: left;
    position: relative; }
.buttonword > li > a { 
    display: block;}
.buttonword > li:first-child a { border: 0; }

/* Dropdown Menu */
.buttonword  { 
    position: absolute;
   /* background: #ccc; */
    width: 100%;
    margin: 0;
    padding: 0;
    display: none; }
.buttonword  li { 
    text-align: center;
    width: 100%;
	background: transparent;
}
.buttonword  a { padding: 10px 0; }
.mega-buttons ul li:hover ul { display: block; }
.buttonword li {
	overflow: visible!important;
	background-color: transparent!important; 
	position: relative;    
	top: -8px; 
	left: -4px;
}
.buttonword > li.donate { 
	left: -6px;
}
.buttonword > li.education { 
	left: -15px;
}
.buttonword > li > a {
	color: #fff; 
	background-color: transparent!important;
}
.buttonword li a:hover {
	text-decoration: none;
}
.NAVheart {
	stroke: none; 
	fill: #f74b35; 
	shape-rendering:geometricPrecision;
	animation-name: navpulse;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-delay: 1s;
	animation-iteration-count: 10;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
}

/***************
****************
****************
****************
***************/





@media (min-width:768px){
main {
	padding-top:185px;
}	
ul.mg-container {
	padding-right: 5px;
	margin-bottom: 10px;    
	text-align: right;
    position: absolute;
    width: 100%;
    right: 0;
    top: -17px;}
	
.storySource {
	line-height: 26px!important;
	line-height: 2.6rem!important;
}
/*reverse story images to rectangle from square*/
.storyFeedImg {
	background-image: none!important;
    width:  100%;
    height: auto;
    overflow: auto;
}
.recStoryImgContainer  {
	-webkit-flex-basis: 200px!important;
	flex-basis: 200px!important;
    height: auto;
}
.squareStoryImgLink {
	display:none;
}
.displayBig {
	display:inherit;
}
.leadStory {
    border-bottom:none;
	margin-bottom: 0;
}
.new-featured-box {
	border:1px solid #ccc;
	border-bottom: 2px solid #ccc;
	margin-bottom:20px;
	margin-top:0;
}

.height100 {
	height:100%!important;
	background: #fff;
}

.headline-height {
	min-height: 75px;
}
/***flex equal height columns****/
.row.is-flex {
display: flex;
flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
	display: flex;
	flex-direction: column;
}
/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand. 
* Use a preprocesser with autoprefixing.
*/
.row.is-flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
/***end flex equal height columns****/

.adjust-margins {
	padding-right:0!important;
	padding-left:30px!important;
}

}
@media (min-width:992px){
	
	ul.mg-container {
		top: -10px;
	}
	h1.section-title {
		line-height: 26px!important;
		line-height: 2.6rem!important;
	}
	.storySource .storySourceName {
		display:block;
		line-height:18px;
		line-height:1.8rem;
	}
	.storyTimeStamp {
		margin-bottom: 12px;
		display:block;
	}
}
@media (min-width:1200px){
	
	ul.mg-container {
		top: -12px;
	}
	h1.section-title {

		line-height: 33px!important;
		line-height: 3.3rem!important;
	}
	.storySource .storySourceName {
		display:inline;
		line-height:26px;
		line-height:2.6rem;
	}
	.storyTimeStamp {
		margin-bottom: inherit;
		display:inline;
	}
}