/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/* ====================== Mobile and Up ========================== */
/*--------------------*/
/*      HOME PAGE    */
/*--------------------*/
.main-mission {
    font-size: 30px;
    text-align: center;
    font-family: 'Rajdhani';
    font-weight: 400;
}

td.td-class-wbil .card-picture {
    height: 100%;
    width: 20vw;
}
/*--------- wbil updates end -----------*/
.bg-donate-banner {
	background-image: url(/woodbury/wow/images/wow-footer.png);
	background-position: top;
	background-size: cover;
	margin-top: -279px;
	padding-bottom: 60px;
	padding-top: 120px;
	text-align: center;
}


/* ------------ End General Background and Seperator Styles --------------- */

/* SHOW/HIDE */

.expandCard-container h1, .expandCard-container h2, .expandCard-container h3, .expandCard-container h4, .expandCard-container p, .expandCard-container a {
	font-family: 'Raleway', sans-serif;
}

.expandCard-content:focus,
.button:focus {
	outline: none !important;
}

.expandCard-content img {
	transform: rotate(-5deg); 
	margin: 10px 40px 20px 10px !important;
}


/*-- ALL PAGE HEADERS --*/

.header-about, .header-events, .header-mentors, .header-donate {
	background-position: left bottom;
} 





/*End mobile and up styles*/
/* ====================== Mobile  ========================== */
@media only screen and (max-width: 768px) {
	td.td-class-wbil .card-picture {
    height: auto;
    width: 100%;
	}
		tr.tr-class-wbil {
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: center;
    flex-direction: column;
		}
	
/* ===== WBIL end  ======= */	
	
	.expandCard-short-desc {
		height: 200px;
	}

	.row .expandCard {
		margin-bottom: 10px;
	}

	.expandCard-minHeight {
		min-height: 900px;
	}
	.expandCard-container {
		flex-direction: column;
	}
	.expandCard {
		min-width: 30%;
		max-width: 30.65%;
		margin: 10px;
	}

	.expandCard .expand-title {
		background-position: center !important;
	}

	.expandCard.active {
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
		max-height: 3500px;
		max-width: 100%;
		transition: .5s all ease-in-out, .5s max-width ease-in-out .5s;
		position: relative;
		top: unset;
		left: unset;
		right: unset;
		z-index: 1;
		border-radius: 4px;
	}
	.expandCard.inactive {
		transition: .5s all .5s, .5s opacity ease-in-out 0s, .5s max-height ease-in-out 0s;
	}

	.expandableCard {
		max-width: 22%;	
	}
	.animate-expand {
		width: 100%;
		max-width: 100%;
	}
	
	img.listing-post-thumbnail {
		margin-top: -85px;
	}

	h2.listing-post-title {
		padding-left: 29.5%;
		padding-bottom: 0;
		margin-bottom: -40px;
	}

	.post-date {
		padding-left: 27%;
		padding-top: 35px;
		padding-bottom: 0;
	}
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Tablet (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 996px) and (max-width: 1100px){
	tr.tr-class-wbil {
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: center;
    flex-direction: row;
}
	td.td-class-wbil .card-picture {
    height: 100%;
    width: 20vw;
}
	
	/*-- ALL PAGE HEADERS --*/

.header-about, .header-events, .header-mentors, .header-donate {
	background-position: center;
} 

	.expandCard-short-desc {
		height: 150px;
	}

	.expandCard-container {
		display: flex;
		flex-wrap: wrap;
	}

	.expandCard.inactive {
		min-width: 0;
		max-width: 0;
	}
	.expandCard {
		margin: 10px;
	}
	.expand .expandCard-content {
		max-height: 1500px;	
	}

		.expandCard#kathryn .expand-title, .expandCard#donna .expand-title, .expandCard#missy .expand-title, .expandCard#lindsey .expand-title, .expandCard#anne .expand-title, .expandCard#amy .expand-title {
	background-position: center top;
}
	
	h2.listing-post-title {
		padding-left: 34%;
		padding-bottom: 0;
		margin-bottom: -40px;
	}

	.post-date {
		padding:0;
		padding-top: 90px;
	}

	.blog-button {
		width: auto;
		margin-left: 20px;
	}

}
/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	.header-about h1, .header-mentors h1, .header-events h1, .header-donate h1 {
		padding-left: 8%;
	}

	.header-about, .header-mentors, .header-events, .header-donate {
		background-size: cover;
	}

	.content-wrap .content-box-links a {
		padding: 10px 10px 10px 20px;
	}
	.button.ready:hover {
		border: none;
		background-color: #4BA222;
		color: #000;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
		transition: 0.2s;
	}

	.section4 h2 {
		text-align: right !important;
	}

	.section4 a {
		text-align: left !important;
	}

	.banner-donate-wow div.donate-text {
		text-align: right !important;
	}

	.banner-donate-wow div.donate-button {
		text-align: left !important;
	}

}/*end media query*/
/*End desktop only styles*/

/* ====================== XL Screens Only (Overrides Mobile and Tablet and Desktop Styles) ========================== */
@media only screen and (min-width: 1200px) {
	.header-about h1, .header-mentors h1, .header-events h1, .header-donate h1 {
		margin-left: 14%;
	}



}/*end media query*/ 
/*End extra-large-screen styles*/
/*END OF DOCUMENT*/