/*
Theme Name: 	Brittany Fund
*/

/* ---------------------------------------------------------------------------------------------------------- 
Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
@import "css/reset.css";

body{
	width:100%;
	overflow:hidden;
}

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#009fbb; color:#333; }
::selection 		{ background:#009fbb; color:#333; }

*{
	box-sizing:border-box;
}

/* ---------------------------------------------------------------------------------------------------------- 
Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ 
	font-family: 'AvenirLT-Light', sans-serif;
	font-weight: 300; 
	font-style: normal;
	font-size: 20px;
	line-height: 29px;
	-webkit-font-smoothing:antialiased;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

h1{

}

h1,h2,h3, h1 a, h2 a, h3 a{
	color:#76265d; /*PURPLE*/
}

a{
	color:#76265d;
}

h1, h1 a{
	float:left;
	font-family:'AvenirLT-Heavy', sans-serif;
	font-size:39px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

h2{
	font-family:'AvenirLT-Roman' sans-serif;;
	border-bottom: 2px solid;
	margin-bottom: 20px;
	margin-top: 30px;
	font-size: 24px;
	padding-bottom:5px;
	clear:both;
}

h3{
	text-align: left;
	margin: 10px 0;
}

a{
	text-decoration: none;
}


.navigation ul li a{
	color:white;
	font-family: 'AvenirLT-Medium', sans-serif;
	font-size: 24px; 
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 70px;
}

input[type="text"], textarea.styled{
	color:#76265d;
	font-size:22px;
	line-height: 29px;
	font-family: 'AvenirLT-Roman', sans-serif;
}
input[type="submit"]{
	font-family: 'AvenirLT-Black', sans-serif;
	text-transform:uppercase;
	color:white;
}

/* ---------------------------------------------------------------------------------------------------------- 
CLEARS AND DISPLAYS AND COOL STUFF LIKE THAT -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.clearFix, .clearfix{
	clear:both;
}

.tableDisplay{
	display:table;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.tableCellDisplay{
	width:100%;
	height:100%;
	display:table-cell;
	top:0;
	left:0;
	vertical-align: middle;
	text-align: center;
}

/* ---------------------------------------------------------------------------------------------------------- 
BOXES and HEADERS and FOOTERS -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
body{
	background-color: #e3eaef;
}

header{
	width:100%;
	clear:both;
}

header .container{
	padding: 0 25px;
}

.banner{
	background-color: white;
	overflow: hidden;
	padding:10px 0;
	height:90px;
}
.banner h1{
	margin-top: 21px;
}
.navigation{
	background-color: #009fbb; /*LIGHT BLUE*/
	height:70px;
	width:100%;
	padding-top: 2px;
}

.mainNav {
	display: flex;
}

.navigation ul li{
	display:inline-block;
}

.container{
	width:100%;
	max-width:980px;
	margin: 0 auto;
}

.homeLink{
	float:right;
	display:block;
	width:161px;
	text-align: left;
	font-size: 12px;
	text-decoration: none;
	line-height: 15px;
	color: #616161;
}

.mainContent{
	width:100%;
	max-width:980px;
	padding:20px 25px 25px; 
	margin:0 auto;
	background-color: white;
	overflow: hidden;
}

.actionPanel{
	position:absolute;
	left:602px;
	top:-2px;
	background-color:#76265d; /*PURPLE*/
	font-size: 25px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color:white;
	font-family: 'AvenirLT-Black', sans-serif;
	height:73px;
	padding:23px 30px;
	border-bottom-left-radius: 35px;
	border-top-left-radius: 35px;
	z-index: 10;
	width:100%;
}
.actionPanel .donateButton{
	background-color: blue;
	padding:15px 12px 12px;
	border-radius: 5px;
	margin-left: 19px;
}
.actionPanel a{
	color:white;
}

/* ---------------------------------------------------------------------------------------------------------- 
SLIDESHOW -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.slideshowHolder{
	width:100%;
	max-width: 1280px;
	margin: 0 auto;
}

.slideshow{
	width:100%;
	max-width:1280px;
	margin:0 auto;
	padding-bottom:32.5%;
	overflow: hidden;	
}
.slides li{
	display:none;
	opacity:0;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.slides li:first-child{
	display:block;
	opacity:1;
}

.slide a{
	width:100%;
	height:100%;
	display: block;
}

.slideTitle{
	width:100%;
	position: absolute;
	top:0;
	left:0;
	background-color: #009fbb;
	background-color: rgba(0,159,187,0.6);
	display: none;
}

.slideTitle .container{
	padding: 0 25px;
}

.slideTitle span{
	font-size: 28px;
	color: #76265d;
	font-family: 'AvenirLT-Black', sans-serif;
	line-height: 70px;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------------------------------------- 
BLOG -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
article.blogPost{
	overflow: hidden;
	text-align: right;
}

article.blogPost.video{
	text-align: left;
}

article p{
	margin-bottom: 25px;
}

.blogPost h2{
	text-align: left;
}

.blogContent{
	width:100%;
	max-width: 650px;
	display: inline-block;
}

.blogContent p{
	text-align: left;
}

.imageContainer{
	float:left;
	width:100%;
	max-width:90px;
	margin: 0 20px 20px 0;
}

.imageCaption{
	font-style: italic;
	color:#76265d; /*PURPLE*/
	text-align: left;
}

.imageContainerInner{
	width:370px;
	display:inline-block;
	float:right;
}

.imageContainer img{
	width:100%;
	height:auto;
}

.videoBox{
	width:100%;
	height:0;
	position:relative;
	padding-bottom: 56.25%;
}
.videoBox iframe{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}

/*SHARE PROGRESS*/
.sp_tw_large, .sp_fb_large{
	margin-top: 20px;
	margin-bottom: 20px;
}

.sp_tw_large{
	float:left;
	margin-right: 20px;
}

.loadLink{
	cursor:pointer;
}
.bottomLink{
	float:right;
	font-family: 'Sentinel';
	font-weight: 700;
}
/* ---------------------------------------------------------------------------------------------------------- 
PAGES -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.wp-caption{
	float:right;
	max-width:370px;
	color:#76265d; /*PURPLE*/
	font-style: italic;
	margin:20px;
}
.wp-caption img{
	width:100%;
	height:auto;
}


.storyCol{
	float:left;
	width:50%;
}
.storyCol.leftCol{
	padding-right:20px;
	margin-bottom: 30px;
}

.emailBanner {
	width: 100%;
	background-color: #76265d;
	text-align: center;
	padding: 14px 0;
	transition: all .3s;
}

a.emailButton{
  background-color: #76265d;
  padding: 14px 12px 12px;
  border-radius: 5px;
  color: white;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  border: 2px solid white;
}

a.emailButton:hover {
	background-color: white;
	color: #76265d;
}


.storyQuoteArea{
	width:100%;
	position: relative;
	margin:20px 0;
	background-color: black;
	clear:both;
}
.storyQuoteArea img{
	width:100%;
	opacity: 0.6;
}
.storyQuoteArea span{
	position: absolute;
	bottom:20px;
	padding:0 20px;
	z-index: 5;
	color: white;
	font-family: 'Sentinel A', 'Sentinel B';
	font-weight: 300; 
	font-style: italic;
	font-size: 34px;
	line-height: 39px;
	display:block;
}
/* ---------------------------------------------------------------------------------------------------------- 
FORMS, ACTION ALERTS -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
form{
	margin-top: 60px;
}

.form40, .form60{
	float:left;
}
.form40{
	width:40%;
	padding-right: 25px;
}
.form60{
	width:60%;
}

.form40 input[type="text"], select{
	width:100%;
}

input[type="text"], select{
	background-color: #f3f6f8;
	border:2px solid #ccd3d7;
	margin-bottom: 20px;
	padding:10px 0 5px 10px;
}

textarea{
	width:100%;
	resize:none;
	padding:10px;
	margin-bottom: 20px;
}

input[type="submit"], .submitButton{
	border:0;
	border-radius: 7px;
	float:right;
	background-color: #403f38;
	padding:10px 25px 5px;
	margin:20px 0;
	clear:both;
}

.formError{
	display:none;
	color:red;
}


/* VIDEO GRID */
.video-grid {
	display: flex;
	flex-wrap: wrap;
}
.video-grid_video-item {
	width: 100%;
	padding: 16px;
}

@media(min-width:768px) {
	.video-grid_video-item {
		width: 33%;
	}
}

.video-grid_video-item a {
	display: block;
	width: 100%;
}

.video-grid_video-item img {
	width: 100%;
	display: block;
}

/* ---------------------------------------------------------------------------------------------------------- 
SHARE IMAGES -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */


.shareImageBox{
	background-color: #76265d;
	width:50%;
	max-width:455px;
	padding:20px;
	margin-bottom: 20px;
	float:left;
}

.shareImageRow{
	clear:both;
}
.shareImageRow.topRow{
	margin-top: 30px;
}

.shareImageBox.left{
	margin-right:20px;
}
.shareImageBox a{
	display:block;
	line-height: 0;
	position:relative;
	text-decoration: none;
}
.shareImageBox a .hover{
	width:100%;
	height:100%;
	position:absolute;
	background-color: #009fbb;
	background-color: rgba(0,159,187,0.7);
	opacity:0;
	transition: opacity 0.3s;
}
.shareImageBox a:hover .hover{
	opacity:1;
}
span.hoverText{
	color:white;
	font-size:26px;
	font-family: 'AvenirLT-Heavy',sans-serif;
}

.shareImageBox img{
	width:100%;
}




/*LIGHTBOX*/
.lightBox{
	position: fixed;
	top: 0;
	left:0;
	background-color: rgba(118,38,93,0.7);
	width: 100%;
	height: 100%;
	opacity:0;
	display:none;
	z-index:1000;
}

.tableDisplay{
	display:table;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.tableCellDisplay{
	width:100%;
	height:100%;
	display:table-cell;
	top:0;
	left:0;
	vertical-align: middle;
	text-align: center;
}

.lightbox.tableDisplay{
	position:fixed;
}

.lightBox .tableCellDisplay{
	overflow-y:auto;
	position:fixed;
}
.card{
	width:100%;
	max-width:600px;
	margin:0 auto;
	padding:20px;
	background-color: #f9fafa;
	overflow: hidden;
	margin-top: 10%;
}

.card h2{
	margin-top:10px;
	margin-bottom:20px;
}

.lightboxText{
	width:0%;
	float:left;
	text-align: left;
}

#card-form{
	width:100%;
	float:left;
}

.submitButton{
	color:white;
	font-weight: bold;
}

#card-form .submitButton{
	float:none!important;
}

.lbImage{
	width:100%;
	margin-bottom: 20px;
}

#card-form input[type="text"], #card-form textarea{
	width:80%;
}

#card-form textarea{
	resize:none;
	margin-bottom: 20px;
}

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

#card-form input[type="submit"]{
	margin-bottom:20px;
}

#close-card{
	cursor:pointer;
	float:right;
	font-size:20px;
	font-weight: bold;
}



/* ---------------------------------------------------------------------------------------------------------- 
FOOTER -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
footer{
	clear:both;
	margin:30px 0 50px;
}
/* ---------------------------------------------------------------------------------------------------------- 
MEDIA QUERIES -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
@media (max-width: 1000px){ /*SMALL DESKTOP AND TABLET LANDSCARE*/
	/*BLOG AND BLOG iMAGES*/
	.imageContainer{
		max-width: none;
		float:none;
	}
	.imageContainerInner{
		float:none;
		width:auto;
		max-width: 100%;
		margin:0 auto;
	}
	article.blogPost{
		text-align: left;
	}
	.shareImageBox{
		float:none;
		width:100%;
		max-width: 500px;
	}
}
@media (max-width: 768px){ /*TABLET PORTRAIT AND MOBILE*/
	.form40, .form60{
		width:100%;
	}
	.form40{
		padding-right: 0;
	}
	.storyCol{
		float:none;
		width:100%;
	}
	.storyCol.leftCol{
		padding-right:0;
		margin-bottom: 0;
	}
	.storyQuoteArea{
		display: none;
	}

	.navigation{
		height:auto;
		margin-bottom: 70px;
	}
	.navigation ul li{
		width:100%;
		text-align: center;
	}
	.actionPanel{
		width:100%;
		position:absolute;
		top:100%;
		left:0;
		border-radius: 0;
		text-align: center;
	}
}

@media (max-width: 1000px) and (min-width:933px){
	.actionPanel{
		left:536px;
	}
}


@media (min-width: 769px) {
	.mainNav {
		width: 450px;
		justify-content: end;
	}
	.mainNav li {
		margin-right: 40px;
	}
}

@media (max-width: 932px) and (min-width:769px){
	.actionPanel{
		left:463px;
	}
	.navigation ul li a{
		font-size:19px;
	}
	
}

@media (max-width: 932px){
	h1, h1 a{
		font-size: 20px;
	}
	.actionPanel a{
		font-size: 19px;
	}
}

@media (min-width: 933px) {
	.mainNav {
		width: 590px;
	}
}

@media (max-width:600px){
	.slideshowHolder{
		display:none;
	}
	.homeLink{
		float:none;
	}
	.banner{
		height:auto;
	}
	.actionPanel .donateButton{
		padding:0;
		background-color: transparent;
	}
	img.cclogo{
		display:block;
		width:80px;
	}
	.wp-caption{
		float:left;
		max-width:100%;
		margin-left:0;
	}
}