/*
========================================================================================/
CUSTOMIZED CSS for foundation.css classes
========================================================================================/
*/

/*
========================================================================================/
TYPEFACES
========================================================================================/
*/


/* For Headings, Buttons, Footer Text */

@import url(http://fonts.googleapis.com/css?family=Averia+Libre:400,300,700italic,700,400italic);

/* For Body Content */

@import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic);

/*


/*
========================================================================================/

FULL WIDTH FIX:

This fix allows full screen width rather than the more narrow approximate 60%
or 70% of a high resolution screen such as a MacBook Pro. I am indebted for
this solution to a Stack Overflow Article:

http://stackoverflow.com/questions/28172215/full-screen-layout-with-foundation-for-sites

=========================================================================================/
*/

.full-row-width {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: initial;
}

.row.shift-left {
	margin-left: 0;
	width: 100%;
}

body {
	background-color: rgba(190, 6, 164, 0.02);			/* Action Racket Magenta 2% */
	font-family: 'Merriweather', 'Times New Roman', serif;
	margin-left: 1%;
	margin-right: 1%;
}

figure figcaption {
	font-family: 'Averia Libre', 'Trebuchet MS', cursive;
	font-weight: 300;
	width: 95%;
	line-height: 1.15rem;
}

figure img {
	margin-bottom: 0.75%;
}

figure#joanie {
	margin-left: -0.75%;
}

figure#lois figcaption {
	width: 75%;
}

figure#heRan {
	margin-top: -1.25rem;
}

img,
video {
	max-width: 100%;									/* Assures fluid media adjusting to mobile platforms. */
}

object {
	pointer-events: none;
	display: block;										/* Assures that SVG items may act as links */
}

article {
	padding-left: 2%;
	padding-right: 2%;
	margin-top: 3%;
}

/*
==============================================================================/
SPECIAL STYLING FOR UPCOMING EVENTS
==============================================================================/
*/

article#events,
article#ourStory {
	background-color: rgba(17, 164, 32, 0.04);			/* Action Racket Green 4% */
	margin-bottom: 1%;
}

article p.text-center {
	color: rgba(1, 37, 149, 0.65);						/* Action Racket Blue 65% */
	font-weight: 700;
}

/*
==============================================================================/
END SPECIAL STYLING FOR UPCOMING EVENTS
==============================================================================/
*/


/*
==============================================================================/
SPECIAL STYLING FOR HOME PAGE MISSION STATEMENT
==============================================================================/
*/

article#ourMission {
	border-bottom: groove 2px #c0c0c0;
	font-style: italic;
	position: relative;
	transform: translateY(-15%);
}
	
/*
==============================================================================/
END SPECIAL STYLING FOR MISSION STATEMENT
==============================================================================/
*/


/*
==============================================================================/
SPECIAL STYLING FOR "OUR STORY" SEGMENT--WE ARE
=============================================================================/
*/

article#ourStory {
	border: dotted 2px #c0c0c0;							/* Silver dotted border */
	margin-bottom: 1%;
}

/*
==============================================================================/
END SPECIAL STYLING FOR "OUR STORY"
==============================================================================/
*/


.title {
	font-weight: 700;
	font-style: italic;
}

.date {
	color: rgba(1, 37, 149, 0.65);						/* Action Racket Blue 65% */
}

a#close {
	margin-top: 25%;
	margin-bottom: 15%;
}

/*  HEADER STYLES  */

header#page-header {
    height: 20%;
    background: #ecf0f1;
}

header#page-header > div.row {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#logo {
	margin-top: 2%;
	width: 50%;
	height: 46%;
}

.button-group {
	margin-top: 15.5%;
	margin-left: -38%;
}

/*
========================================================================================/
HEADING STYLES
========================================================================================/
*/

/* Default Heading Styles */

h1, h2, h3,
h4, h5, h6	{
	font-family: 'Averia Libre', 'Trebuchet MS', cursive;
	font-weight: 700;
}

h1 {
	margin-top: 1.25rem;
	margin-bottom: 1rem;
	color: #012595;									/* Action Racket Blue */
}

h2, h3 {
font-weight: 400;
color: rgba(1, 37, 149, 0.65);						/* Action Racket Blue 65% */

}


/*
========================================================================================/
NAVIGATION STYLES
========================================================================================/
*/

button, .button {
	background-color: rgba(1, 37, 149, 0.25);			/* Action Racket Blue 25% */
	font-family: 'Averia Libre', 'Trebuchet MS', cursive;
	font-weight: 400;
}

button:hover, button:focus,
.button:hover, .button:focus	{
	background-color: rgba(1, 37, 149, 0.85);			/* Action Racket Blue 85% */
	font-weight: 700;
}

button:active, .button:active {
	background-color: #11a420;
}

button.activeGroup, .button.activeGroup {
	background-color: #11a240;						 	/* Action Racket Green */
	font-weight: 700;
}

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

footer p {
	font-family: 'Averia Libre', 'Trebuchet MS', cursive;
	font-weight: 300;
	font-size: 13px;
	text-align: center;
}


/*
========================================================================================/
COLLAPSIBLE ARTICLES
=======================================================================================/
*/

.grow {
 height: 20rem;
 transition: height ease 0.65s;
 -webkit-transition: height ease 0.65s;
 overflow: hidden;
}

.grow#ourStory {
	height: 16rem;
}

.grow#loisBio {
	height: 74.5%;
}

.grow#joanieBio {
	height: 81%;
}

.grow:hover {
	height: 100%;
	cursor: pointer;
}

.grow:hover p.text-center {
	visibility: hidden;
	line-height: 0;
}

.grow:hover#events {
	height: 153%;
}

.grow:hover#ourStory {
	height: 94%;
}

.grow:hover#loisBio {
	height: 125%;
}

.grow:hover#joanieBio {
	height: 135%;
}

/*
==========================================================================================/
END COLLAPSIBLE ARTICLES
=========================================================================================/
*/


/*
========================================================================================/
STYLING FOR Meet the Directors SECTION
========================================================================================/
*/

#directors h3 {
	margin-top: -0.5rem;
}

/*
==========================================================================================/
END Meet the Directors SECTION
=========================================================================================/
*/


/*
========================================================================================/
STYLING FOR What We Do: Workshops SECTION
========================================================================================/
*/

#wsHead {
	margin-top: -0.5%;
}

#workshops {
	margin-top: -40%;
	margin-bottom: -30%;
}

/*
==========================================================================================/
END What We Do: Workshops
=========================================================================================/
*/

/*
========================================================================================/
STYLING FOR Position of Photo Content in What We Do: Performances Section
========================================================================================/
*/

.sectionPullUp {
	margin-top: -33%;
}


.sectionPullUp#smallRow {
	margin-top: -5%;
}

#smallRow figure.large-4 {
	margin-right: -0.5%;
	margin-left: -0.5%;
}

.pageHead-pushDown {
	margin-top: 1%;
}

/*
========================================================================================/
MAILER FORM Styling
========================================================================================/
*/

p.error, p.success {
	font-weight: bold;
	padding: 10px;
	border: 1px solid;
}

p.error {
	background: #ffc0c0;
	color: #900;
}

p.success {
	background: #b3ff69;
	color: #4fa000;
}

form {
	width: 65%;
	margin-left: 20%;
	padding: 2%;
	border: groove 2px #c0c0c0;
}

form label {
	font-family: 'Averia Libre', 'Trebuchet MS', cursive;
	font-weight: 700;
	color: #012595;										/* Action Racket Blue */
}

p#send {
	margin-top: -5%;
}

p#jenMail {
	margin-left: 20%;
}

input[type='submit'] {
	cursor: pointer;
}