/* TABLE OF CONTENTS *\

	1. GLOBAL STYLING - Body, text, paragraph, etc.
	2. LINKS - GLOBAL - Blog and footer have individual styles for some links
	3. NAV BAR - logo + main nav + mobile nav
	4. PAGE HEADERS - Page headers for sub pages + homepage hero image
	5. HOMEPAGE - Sections: About, Twittersphere, Innovation
	6. HOMEPAGE - Sections: Vote Compass, Meet the Team, Recent Posts at bottom of page
	7. ABOUT PAGE - Including custom header and team photos
	8. FOOTER - Inclding main footer + 'footerInfo', which is the bottom, darker portion.
	9. BLOG - Including main blog page, single post, and archive page
	10. FANCY FIXES - Currently only used for the 'learnMore' link on homepage.
\* ----------------- */




/* ----------------------------------------------------------------------------------------- *\
   1. GLOBAL STYLING - Body, text, paragraph, etc.
\* ----------------------------------------------------------------------------------------- */





body, html {
	height:100%;
    min-height:100%;
}

body {
	position: relative;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.overflow {overflow: hidden;} /* General Fix for large BG images - e.g. the plots on the VPL intro section */

h1 {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 400;}

h2, h3, h4, h5, h6 {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;}

h1 {font-size: 1.6em; line-height: 1.2em;}
h2 {font-size: 1.3em; margin-top: -0.05em; padding-bottom: 0.5em; line-height: 1.3em;}
h3 {font-size: 1.25em; padding-bottom: 0.5em; line-height: 1.25em;}
h4 {font-size: 1.25em; padding-bottom: 0.5em; line-height: 1.3em;}
h5 {font-size: 1.05em; padding-bottom: 0.5em; line-height: 1.3em;}
h6 {font-size: 0.85em; padding-bottom: 0.5em; line-height: 1.3em;}

p, .excerpt-holder {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 1em; line-height: 1.6em;}

p.aside {font-size: 0.77em; line-height: 1.5em; letter-spacing: .03em; font-style: italic;}

p.small {font-size: 0.77em; line-height: 1.5em; letter-spacing: .03em; font-style: normal;}

p.address {font-size: 0.0.95em; line-height: 1.2em; letter-spacing: .03em; font-style: normal; padding-top: 1em; padding-bottom: 1em;}

p.big {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 1.15em; line-height: 1.45em; letter-spacing: 0.007em; margin-top: 1em;}

p.cta {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 400; font-size: 1.15em; line-height: 1.35em; letter-spacing: 0.007em; margin-top: 1em;}

placeholder {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 1em; line-height: 1.6em;}

@media (min-width: 47em) {
	h1 {font-size: 2em; line-height: 1.2em;}
	h2 {font-size: 1.5em; margin-top: -0.05em; padding-bottom: 0.5em; line-height: 1.3em;}
	h3 {font-size: 1.25em; padding-bottom: 0.5em; line-height: 1.25em;}
}

@media (min-width: 63em) {
	h1 {font-size: 2.25em; line-height: 1.2em;}
	h2 {font-size: 1.6em; margin-top: -0.05em; padding-bottom: 0.5em; line-height: 1.3em;}
	h3 {font-size: 1.35em; padding-bottom: 0.5em; line-height: 1.25em;}

	p.big {font-size: 1.25em; line-height: 1.65em; letter-spacing: 0.007em; margin-top: 1em;}
	p.cta {font-size: 1.25em; line-height: 1.55em; letter-spacing: 0.007em; margin-top: 1em;}
}

@media (min-width: 75em) {
	h1 {font-size: 2.4em; line-height: 1.2em;}
	h2 {font-size: 1.75em; margin-top: -0.05em; padding-bottom: 0.5em; line-height: 1.2em;}
	h3 {font-size: 1.45em; padding-bottom: 0.5em; line-height: 1.25em;}

	p.big {font-size: 1.25em; line-height: 1.65em; letter-spacing: 0.007em; margin-top: 1em;}
	p.cta {font-size: 1.25em; line-height: 1.55em; letter-spacing: 0.007em; margin-top: 1em;}
}

ul, li {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }

strong {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 400;}

em {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-style: italic;}

i {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-style: italic;}

.btn {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 400;}


table {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 1em; line-height: 1.6em;}



/* ----------------------------------------------------------------------------------------- *\
   2. LINKS - GLOBAL - Blog and footer have individual styles for some links
\* ----------------------------------------------------------------------------------------- */





a {
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

a:link, a:visited {color: #042b3c;}
a:hover, a:focus {color: #157dab; text-decoration: none;}

/* Inline links for Article paragraphs and Sidebar */

article p a:link, .sidebar a:link, article p a:visited, .sidebar a:visited {font-weight: 400;}
article p a:hover, .sidebar a:link, article p a:focus, .sidebar a:focus {font-weight: 400;}

.btn {
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.btn-light {background-color: transparent; color: #ffffff;}

.btn-light:link, .btn-light:visited {
	color: #ffffff;
	background-color: transparent;
	border-color: #ffffff;
}

.btn-light:hover, .btn-light:focus {
	color: #666666;
	background-color: #b8edfb;
	border-color: #ffffff;
	margin-left: 6px;
}

.btn-dark {background-color: transparent; color: #000000;}

.btn-dark:link, .btn-dark:visited {
	color: #000000;
	background-color: transparent;
	border-color: #666666;
}

.btn-dark:hover, .btn-dark:focus {
	color: #666666;
	background-color: #b8edfb;
	border-color: #ffffff;
	margin-left: 6px;
}

.btn-red:link, .btn-red:visited {
	color: #ffffff;
	background-color: #A24D52;
	border: none;
}

.btn-red:hover, .btn-red:focus {
	color: #ffffff;
	background-color: #c36f74;
	border: none;
}

.btn-lg {
	font-size: 0.95em;
	padding: 13px 30px;
}

.read-more {
	width: 100%;
	font-size: 0.65em;
	text-transform: uppercase;
	margin-top: 2em;
	padding: 0.3em 0.5em 0.3em 1.5em;
	background-color: #eeeeee;
	color: #666666;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	font-weight: 400;
}

.read-more:link, .read-more:visited {
	color: #666666;
	background-color: #eeeeee;
}

.read-more:hover, .read-more:focus {
	color: #ffffff;
	background-color: #57a7c0;
}





/* ----------------------------------------------------------------------------------------- *\
   3. NAV BAR - logo + main nav + mobile nav
\* ----------------------------------------------------------------------------------------- */





header {background: transparent; position: relative; height: auto; z-index: 1005; padding-top: 2em;}

header {
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

header .container {overflow: hidden;}

.logo {
	float: left;
	color: #ffffff;
	width: 175px;
	height: 82.25px;
	position: relative;
	z-index: 1010;
}

.logo:hover img, .logo:focus img {margin-left: 5px;}

.logo img {
	width: 80%;
	height: auto;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

@media only screen and (max-width: 600px) {
	.logo img {
		width: 50%;
	}
}

.hamburger {
	display: none;
	position: relative;
	float: right;
	width: 30px;
	height: 24px;
	z-index: 1010;
	margin-right: 7px;
	margin-top: 10px;
}

.hamburger img {width: 100%; height: 100%;}

.mainNav {
	position: relative;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.mainNav ul {text-align: right; background-color: transparent; height: auto;}

.mainNav li {display: inline-block; color: #ffffff; padding-left: 1em; text-transform: uppercase;}

.mainNav li a:link, .mainNav li a:visited {
	width: auto;
	background-color: transparent;
	color: #ffffff;
	padding: 0;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.mainNav li a:hover, .mainNav li a:focus {background-color: transparent; color: #cccccc; text-decoration: none;}


/* Mobile Navigation */

@media (max-width: 600px) {
	.logo {margin-left: 7px;}

	.hamburger {display: block;}

	.mainNav {
		clear: both;
		position: absolute;
		z-index: 1005;
		top: 0px;
		bottom: auto;
		left: 0;
		right: 0;
		padding-top: 7em;
		padding-bottom: 1em;
		padding-left: 1em;
		padding-right: 1em;
		background-color: #0f445b;
	}

	.navClosed {top: -300px;}

	.mainNav ul {text-align: center; height: auto; padding: 0;}

	.mainNav li {display: block; color: #666666; background-color: transparent;}

	.mainNav a {display: block; margin-left: -7px; margin-bottom: 0.7em;}

	.mainNav li a:link, .mainNav li a:visited {
		background-color: #ffffff;
		color: #666666;
		padding: 0.6em 1em;
		width: 100%;
		font-size: 0.75em;
		font-weight: 400;
		border-bottom: 3px solid #dddddd;
	}

	.mainNav li a:hover, .mainNav li a:focus {color: #666666; background-color: #b8edfb;}

	.mainNav a.language:link, .mainNav a.language:visited {background-color: #dddddd; border-bottom: none;}

	.mainNav a.language:hover, .mainNav a.language:focus {background-color: #b8edfb; border-bottom: none;}
}


/* Medium and Desktop Nav Adjustments */

@media (min-width: 601px) {
	.mainNav li {display: inline-block; color: #ffffff; margin-top: -0.7em; padding-top: 1.5em; padding-left: 1.5em; font-weight: 400;}

	.mainNav li a:link, .mainNav li a:visited {
		font-size: 0.85em;
		border-bottom: 3px solid transparent;
		width: auto;
		background-color: transparent;
		color: #ffffff;
		padding: 0;
	}

	.mainNav li a:hover, .mainNav li a:focus {background-color: transparent; color: #ffffff; text-decoration: none; border-bottom: 3px solid #ffffff;}

	.mainNav a.language:link, .mainNav a.language:visited {
		background-color: #b8edfb;
		color: #666666;
		border-bottom: none;
		padding: 0.5em;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		margin-left: 20px;
	}

	.mainNav a.language:hover, .mainNav a.language:focus {background-color: #72d3ed; border-bottom: none; color: #ffffff;}

}





/* ----------------------------------------------------------------------------------------- *\
   4. PAGE HEADERS - Page headers for sub pages + homepage hero image
\* ----------------------------------------------------------------------------------------- */





/* Other Page Headers: About, Careers, etc.; */

.headerBG {color: #ffffff; display: block; position: relative; width: 100%; height: auto; margin-top: -115px;}

.headerBG .container {padding-top: 8em; padding-bottom: 2em;}

/*.headerBG h2 {margin-bottom: 1em;}*/

.headerBG h3 {margin-top: 1.25em; line-height: 1.5em;}

.headerBG p, .headerBG h3, .headerBG h2, .headerBG h3 {width: 100%;}

@media (min-width: 992px) {
	.headerBG p, .headerBG h3, .headerBG h2, .headerBG h3 {width: 80%;} /* Copy adjustment for line breaks */
}

.headerBG-privacy {background-color: #157dab; margin-bottom: 3em;}
.headerBG-about {background: url('images/headerBG_about.jpg') center center no-repeat; background-size: cover;}
.headerBG-careers {background: url('images/headerBG_careers.jpg') center center no-repeat; background-size: cover;}
.headerBG-archive {background-color: #157dab; margin-bottom: 0;}

.pageContentSpacer {margin-top: 3em;} /* Custom add in top spacing above page content */


/* Full Width Section Backgrounds */

.greyBanner {
	position: relative;
	overflow: hidden;
	padding-top: 4em;
	padding-bottom: 2em;
	background-color: #f4f4f4;
}

.whiteBanner {position: relative; overflow: hidden; padding-top: 4em; padding-bottom: 5em; background-color: #ffffff;}

.lightBlueBanner {position: relative; overflow: hidden; padding-top: 4em; padding-bottom: 5em; background-color: #e2f3fb;}

.darkBlueBanner {color: #ffffff; padding-top: 6em; padding-bottom: 6em; display: block; position: relative; width: 100%; height: auto; background-color: #157dab;}


/* Home Page Hero */

.heroTop {display: block; position: relative; min-width:100%; min-height:100%; color: #ffffff; margin-top: -115px;}

.heroImage { 	/* Use with .heroTop which is the fullScreen container */
    display: block;
    position: fixed;
    z-index: -1;
    min-width: 100%;
    min-height: 100%;
    background: transparent url('images/heroBG_large.jpg') center center no-repeat;
    background-size: cover;
}

@media (max-width: 450px) and (orientation: portrait) {
	.heroImage {
	    background: transparent url('images/heroBG_portrait.jpg') center center no-repeat;
	    background-size: cover;
	}
}

@media (min-width: 451px) and (orientation: portrait) {
	.heroImage {
	    background: transparent url('images/heroBG_portrait_large.jpg') center center no-repeat;
	    background-size: cover;
	}
}

.heroContent { /* Containing blog for introText and topNews */
	position: absolute;
	bottom: 0;
	width: 100%;
	font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif;
}

.introText {margin-bottom: 3em;}

.introText h1 {font-size: 1.2em; font-weight: 400; margin-bottom: 0.5em;}
.introText h2 {font-size: 0.9em; line-height: 1.4em; letter-spacing: 0.06em; margin-bottom: 0.5em;}

.introText a, .introText a:visited {color: #ffffff; cursor: pointer;}
.introText a:hover, .introText a:focus {color: #dddddd; cursor: pointer;}

.glyphicon {
	font-size: 1em;
	vertical-align: middle;
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

.scrollLink {font-size: 0.7em; padding-left: 1em; vertical-align: middle;}

@media (max-width: 599px) {.introText a {display: none;}}

@media (min-width: 600px) {
	.introText {margin-bottom: 7em;}
	.introText h1 {font-size: 1.9em; margin-bottom: 0.5em;}
	.introText h2  {font-size: 1.1em; line-height: 1.5em; letter-spacing: 0.04em; margin-bottom: 2em;}
	.glyphicon {font-size: 1.2em;}
	.scrollLink {font-size: 0.9em;}
}

@media (min-width: 600px) and (orientation: landscape) {
	.introText {margin-bottom: 2.5em;}
	.introText h1 {font-size: 1.6em; margin-bottom: 0.5em;}
	.introText h2 {font-size: 1.1em; line-height: 1.5em; letter-spacing: 0.04em; margin-bottom: 1em; width: 80%;}
}

@media (min-width: 500px) and (orientation: portrait) {
	.introText h2 {width: 85%;}
}

@media (min-width: 768px) and (orientation: portrait) {
	.introText {margin-bottom: 9.5em;}
	.introText h1 {font-size: 2.25em; margin-bottom: 0.3em;}
	.introText h2 {font-size: 1.4em; margin-bottom: 1.5em; width: 95%;}
	.glyphicon {font-size: 1.3em;}
	.scrollLink {font-size: 1em;}
}

@media (min-width: 992px) {
	.introText {margin-bottom: 4.5em;}
	.introText h1 {font-size: 2.25em; margin-bottom: 0.3em;}
	.introText h2 {font-size: 1.3em; width: 100%;}
}

@media (min-width: 1200px) {
	.introText {margin-bottom: 4.5em;}
	.introText h1 {font-size: 2.5em; margin-bottom: 0.5em;}
	.introText h2 {font-size: 1.2em; line-height: 1.4em; margin-bottom: 1.5em;}
	.glyphicon {font-size: 1.4em;}
	.scrollLink {font-size: 1.1em;}
}

.topNews {
	position: relative;
	bottom: 0;
	width: 100%;
	background-color: #ffffff;
}

.topNews a:link, .topNews a:visited {color: #042b3c;}
.topNews a:hover, .topNews a:focus {color: #157dab;}

.topNews p {color: #b15c00; font-weight: 400; font-size: 0.9em; margin: 0; padding-top: 0.5em; padding-bottom: 0.5em;}

.topNews span {display: block; font-size: 0.7em; margin-bottom: -0.3em;}

@media (min-width: 460px) {
	.topNews p {padding-top: 1em; padding-bottom: 1em;}
	.topNews span {display: block; font-size: 1em; margin-bottom: -0.3em;}
}

@media (min-width: 600px) {
	.topNews p {font-size: 1em;}
	.topNews span {display: inline; margin-bottom: 0em;}
}

@media (max-width: 599px) and (orientation: landscape) { /* Landscape specific - turn off learnMore and topNews */
	.topNews {display: none;}
}





/* ----------------------------------------------------------------------------------------- *\
   5. HOMEPAGE - Sections: About, Twittersphere, Innovation
\* ----------------------------------------------------------------------------------------- */





/* About Section */

.plots{
	background:  none,url('images/about_plots_bg.svg') no-repeat;
	background-size: 115% 115%;
	background-color: #f4f4f4;
	background-position: center center;
	padding-top: 5em;
}

@media (max-width: 40em) {
	.plots{
	background-size: 200%;
	background-position: center top;
	}
}

/* Spacing adjustments for intro to Vox Pop Labs (first section). Should not be used globally */

.greyBanner h2 {padding-bottom: 0.5em;}

.plots h2 {width: 100%;}

@media (min-width: 768px) {
	.plots h2 {width: 80%;}
}

.greyBanner .btn {margin-top: 1.25em;}


/* TwitterSphere Section */

.twitterSpacer {color: #ffffff; padding: 0 0px; display: block; position: relative; width: 100%; height: auto; background: url('images/twittersphere.jpg') center center no-repeat; background-size: cover;}

@media (max-width: 48em) and (orientation: portrait) {
	.twitterSpacer {color: #ffffff; padding: 0 0px; display: block; position: relative; width: 100%; height: auto; background: url('images/twittersphere_small.jpg') center center no-repeat; background-size: cover;}
}

.twitterSpacer {padding-top: 6em; padding-bottom: 6em;}


/* Innovation Section */

.innovation p {padding: 0.75em;}

@media (min-width: 768px) and (max-width: 991px) {  /* Line Break fix - prevent line breaks in this range */
	.innovation strong {font-size: 0.8em;}
}

.innovation h2 {margin-bottom: 0.75em;}

.innovation img {
	width: 80px;
	height: 80px;
	display: block;
	margin: 1.5em auto;
}





/* ----------------------------------------------------------------------------------------- *\
   6. HOMEPAGE - Sections: Vote Compass, Meet the Team, Recent Posts at bottom of page
\* ----------------------------------------------------------------------------------------- */





/* Subhead Width-fix for VoteCompass Section - due to long subhead - leads to awkward line-breaks */

#votecompass h1 {
	margin-bottom: 30px;
}

#votecompass h2 {
	width: 100%;
	font-size: 1.69em;
}

@media (min-width: 768px) {
	/*#votecompass h2 {width: 80%;}*/
}


.VCimage img {width: 100%; height: auto; padding-top: 4em;}

@media (min-width: 769px) and (max-width: 991px) {
	.VCimage img {
		padding-top: 0em;
		margin-top: -25px;
	}
}

@media (min-width: 992px) {
	.VCimage img {
		padding-top: 0em;
		margin-top: -25px;
	}
}


/* Media Partner Logos */

/* Media Partner Logos */

.mediaLogos__holder-desktop {
	display: none;
}

.mediaLogos__holder-mobile {
	display: block;
}

.mediaLogos__holder-desktop__inner {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.mediaLogos__holder-item {
	width: 25%;
}

.mediaLogos__holder-item-img {
	width: 100%;
	max-height: 100px;
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.mediaLogos__holder-desktop {
		display: block;
	}

	.mediaLogos__holder-mobile {
		display: none;
	}
}

.mediaLogos {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.mediaLogos hr {
	border-color: #ddd;
}

.mediaLogos p {
	margin-bottom: 1.5em;
}


.mediaLogos-slide-holder {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 150px;
}

.mediaLogos-holder-item {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mediaLogos-holder-item img {
	max-width: 100%;
	padding: .25em;
}

@media (min-width: 768px) {
	.mediaLogos-holder-item {
		padding: 1em;
	}
}


/* Vote Compass Quotations */

.quoteHighlight {width: 100%; padding-top: 0em; padding-bottom: 3em; background-color: #ffffff; margin-top: -0.5em;}

.quoteHighlight img {width: 50px; height: auto; padding-top: 2em; padding-bottom: 0;}     /* Quote styling */

@media (max-width: 48em) {
	.quoteHighlight img {width: 50px; height: auto; padding-top: 0em; padding-bottom: 0.4em;}
}

.quoteHighlight h2 {padding-top: 1em;}

.quoteHighlight .btn {margin-top: 2.5em;}

.quoteHighlight p {margin-top: 0em;}

.carousel {padding-bottom: 4em;}

.carousel-indicators {bottom: 0;}

.carousel-indicators .active {background-color: #A24D52;}

.carousel-indicators li {border: 1px solid #A24D52;}


/* Meet the Team Section */

.darkBlueBanner h1 {margin-top: -0.2em;}

.darkBlueBanner h2 {padding-bottom: 0.5em;}

.darkBlueBanner .btn {margin-top: 1.5em;}

.bcorp__holder .bcorp__logo-holder {
	text-align: center;
	margin-top: 40px;
}

.bcorp__holder .bcorp__logo {
	width: 150px;
}

@media (max-width: 48em) {
	.bcorp__holder .bcorp__logo {
		display: none;
	}
}

/* Recent Posts */

.recentNews h3 {padding-bottom: 0.8em;}

.recentNews p.small {color: #888888; text-transform: uppercase; margin-bottom: -0.9em;}

.recentNews .read-more {}

.recentNews .btn {margin-top: 1em;}





/* ----------------------------------------------------------------------------------------- *\
   7. ABOUT PAGE - Including custom header and team photos
\* ----------------------------------------------------------------------------------------- */





/* The Team Section */

.theTeam {padding-bottom: 4em;}

.theTeam h1 {font-size: 1.2em; font-weight: 300;}
.theTeam h2 {
	margin-top: 60px;
	margin-bottom: 30px;
	padding: 0;
	font-weight: 300;
}

.advisors-row {
	/*margin-top: 25px;*/
}

@media (max-width: 450px) and (orientation: portrait) {
	.advisors-row {
		margin-top: 50px;
	}
}

.profiles {
	width: 100%;
	/*margin-top: 2em;*/
}

.profiles img {
	height: auto;
	width: 100%;
	/*max-height: 226px;*/
}

.name { font-family: 'Lato', sans-serif; font-weight: 300; text-transform: uppercase; font-size: 0.83em; line-height: 1.2em; letter-spacing: 0.007em;}

.title { display: block; font-family: 'Lato', sans-serif; font-weight: 400; text-transform: none; font-size: 0.82em; line-height: 1.3em; letter-spacing: 0.007em; margin-top: 0.5em;}

.tab-content p {
	padding: 0 15px 0 0;
}

.tab-content hr {
	margin-right: 15px;
}


/* Image Columns + Hover effect for links */

.profilesLarge {
	/*display: flex;*/
	width: 90%;
	margin: 0 auto;
}

.profiles ul {
	display: flex;
}

.profiles li {
	width: 25%;
	padding: 10px;
	height: 100%;
	/*display: inline-block;
	vertical-align: top;*/
	background-color: #ffffff;
}

.profiles li.active {background-color: #ffffff;}

.profiles li a:link, .profiles li a:visited {
	/*margin-right: 22px;*/
	padding: 0;
	padding-top: 10px;
	border-top: 10px solid #ffffff;
	margin-bottom: 10px;
}

.profiles li a:hover, .profiles li a:focus {background-color: #ffffff; border-top: 10px solid #d88388;}

.profiles li.active a {background-color: #ffffff; border-top: 10px solid #157dab;}


/* Image opacity + hover + transition */

.profiles li a:link img, .profiles li a:visited img {
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
}

.profiles li a:hover img, .profiles li a:focus img {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}

.profiles li.active img {
	filter:alpha(opacity=100) !important;
	-moz-opacity:1 !important;
	-khtml-opacity: 1 !important;
	opacity: 1 !important;
}

.profiles img {
	margin-bottom: 15px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}


.profilesSmall {display: none;}


/* Separate bio treatments for small and medium screens */

@media (max-width: 480px) {
	.profilesLarge {
		display: none;
	}
} /* remove large profiles on Phone view <480px */

@media (min-width: 481px) and (max-width: 767px) {
	.profiles img {display: none;}
	.profiles ul {
		flex-direction: column;
		/*margin-left: -10px;
		margin-right: -40px;*/
	}
	.profiles li {
		width: 100%;
		text-align: left;
		background-color: #f4f4f4;
		margin-bottom: 10px;
		padding: 0;
	}
	.profiles li a:link, .profiles li a:visited {height: 10.5em; margin-right: 0; padding-left: 1em; padding-right: 1em; padding-bottom: 20px; border-top: 10px solid #f4f4f4;}
	.profiles li a:hover, .profiles li a:focus {border-top: 10px solid #d88388;}
	.profiles li.active a {border-top: 10px solid #157dab;}
	.title {margin-top: 1em;}
} /* Tablet */

@media (max-width: 480px) {
	.profilesSmall {display: block;}
	.profiles img {display: none;}

	.profiles ul {
		flex-direction: column;
		/*margin-left: -10px;
		margin-right: -40px;*/
	}

	.profiles li {
		display: block;
		width: 100%;
		text-align: center;
		background-color: #b8edfb;
		margin-bottom: 10px;
		padding: 0;
	}
	.profiles li p {
		background-color: #ffffff;
		padding: 1em 1em;
		border-top: 5px solid #6c4364;
		margin: 0;
	}
	.profiles li a:link, .profiles li a:visited {margin-top: 0.5em; height: auto; margin-right: 0; padding-left: 1em; padding-right: 1em; padding-bottom: 10px; border: none;}
	.profiles li a:hover, .profiles li a:focus {background-color: #f4f4f4; border: none;}
	.profiles li a.in {border-bottom: 5px solid #6c4364; border-top: none;}
	.title {margin-top: 0;}
} /* Phone */


/* Careers CTA */

.growingTeam {
	margin-top: 2.5em;
	margin-bottom: 2.5em;
}


/* Contact + Map */

.map {color: #ffffff; padding: 0 15px; display: block; position: relative; width: 100%; height: auto; background: url('images/mcmaster_map.jpg') center center no-repeat; background-size: cover;}

@media (orientation: portrait) {
	.map {background: url('images/mcmaster_map.jpg') center bottom no-repeat; background-size: cover;}
}

.map {padding-top: 2em; padding-bottom: 2.5em;}

.map h2 {padding-bottom: 0.5em;}


.contactIcon {
	color: #000000;
	padding: 2em;
	margin-top: 10em;
	margin-bottom: 1em;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.contactIcon img {
	width: auto;
	height: 38px;
	padding-top: 0.2em;
	padding-right: auto;
	margin-top: auto;
	margin-bottom: auto;
}

@media (max-width: 767px) {
	.contactIcon img {
		margin-top: 1.5em;
		margin-bottom: 0.5em;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.contactIcon img {
		padding-top: 0.2em;
		height: 30px;
	}
}

.contactIcon p {margin-bottom: -0.3em;}

.contactIcon .spacerFix {margin-top: 0.65em;} /* Add margin-top when this stacks for mobile - TO MAKE SURE PARAGRAPHS STACK WITH VERTICAL SPACING */

.contact-information__holder {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;

	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 1);

	color: #000000;
	padding: 30px 50px;
}

.contact-information__item {
	display: flex;
}

.contact-information__icon img {
	width: auto;
	height: 38px;
}

.contact-information__content {
	text-align: left;
	margin-left: 30px;
}

.contact-information__content p {
	margin-bottom: -0.3em;
}

.contact-information__content .spacerFix {
	margin-top: 0.65em;
}

@media (max-width: 767px) {
	.contact-information__holder {
		flex-direction: column;
	}

	.contact-information__item {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}



/* ----------------------------------------------------------------------------------------- *\
   8. FOOTER - Inclding main footer + 'footerInfo', which is the bottom, darker portion.
\* ----------------------------------------------------------------------------------------- */





footer { color: #ffffff; background-color: #033c55; padding-top: 2.5em;}

/* Sign Up Form */

footer h1 {font-size: 2em; font-weight: 300; margin-bottom: 0.6em;}

footer p {margin-bottom: 1em;}


.signupForm {
  margin-bottom: 4.5em;
  display: flex;
  justify-content: center;
}

.signup-email {padding-right: 0px;}

.signup-submit {padding-left: 0px;}

.signup-submit input {
	max-height: 46px;
}

.email {           /* BootStrap padding fix, used because of .form-control */
	font-size: 0.95em;
	padding: 0 0;
	height: 100%;
	max-height: 46px;
}

.email {padding: 14px;}

.email {
	border: none;
	-webkit-border-radius: 0px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius: 0px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-radius: 0px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

footer .btn {      /* BootStrap padding fix, used because of .form-control */
	padding: 0 0;
	height: 100%;
}

footer .btn {padding: 13px;} /* New padding after fix above */

footer .btn-red.btn-lg {
  background-color: #A24D52;
  border: none;
  color: #ffffff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: 0 auto;
  font-size: 24px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 10px;
}


@media (max-width: 767px) {
	.signup-email {padding-right: 15px;}

	.signup-submit {padding-left: 15px; margin-top: 1em;}

	.email {
		-webkit-border-radius: 5px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-bottomleft: 5px;
		border-radius: 5px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	footer .btn-red {
		-webkit-border-radius: 5px;
		-webkit-border-top-left-radius: 5empx;
		-webkit-border-bottom-left-radius: 5empx;
		-moz-border-radius: 5px;
		-moz-border-radius-topleft: 5empx;
		-moz-border-radius-bottomleft: 5empx;
		border-radius: 5px;
		border-top-left-radius: 5empx;
		border-bottom-left-radius: 5empx;
	}
}


/* Info Sub Footer */

.footerInfo {background-color: #022c3e; padding: 3em 0 1.5em 0; overflow: hidden;}

@media (max-width: 767px) {.footerInfo {text-align: center;}}

.footerInfo img {width: 125px; height: auto; margin-bottom: 2em;}

.footerInfo ul {margin: -0.3em 0 1.5em 0; padding: 0;}

.footerInfo li {list-style: none; padding-bottom: 0.3em;}

.footerInfo a:link, .footerInfo a:visited {color: #cccccc;}
.footerInfo a:hover, .footerInfo a:focus  {color: #c36f74;}

.legal {background-color: #022c3e; color: #cccccc; font-size: 0.85em; border-top: 1px solid #5b3754; padding: 1em 0 0 0;}





/* ----------------------------------------------------------------------------- *\
   9. BLOG - Including main blog page, single post, and archive page
\* ----------------------------------------------------------------------------- */



/* Global Blog Setup */

.read-more {
	display: block;
	margin-top: 10px;
}

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

.sidebar {
	display: none;
	border-left: 8px solid #b8edfb;
	padding-left: 15px;
	margin-left: 45px;
}

@media (min-width: 768px) {
	.sidebar {display: block;}
}

.sidebar h5 {margin: 0 0 0.5em 0;}
.sidebar p {margin-bottom: 0em;}


/* SINGLE PAGE */

.postBG {
	display: block;
	position: relative;
	min-width:100%;
	min-height: 15%;
	margin-top: -115px;
	margin-bottom: 0em;
	background-color: #157dab;
}

.postHeader {
	display:block;
  position:absolute;
  z-index:-1;
  width:100%;
  min-height:100%;
  background:url('images/heroBG_large.jpg');
  /* hiding all news images */
  display: none;
}

.titleBlock {
	color: #042b3c;
	position: absolute;
	bottom: 0;
	z-index: 0;
	width: 100%;
	height: auto;
	background: rgb(184, 237, 251);
	background: rgba(184, 237, 251, 0.7);
	padding-bottom: 0.5em;
	padding-top: 0.5em;
}

.titleBlock h1 {margin: 0;}


/* Desktop Top Story Excerpt */

.postBG p {
	display: none;
	margin-top: 0.5em;
}

@media (min-width: 768px) and (max-width: 991px) {
	.postBG p {font-size: 1.15em; line-height: 1.45em; letter-spacing: 0.007em; margin-top: 0.5em;}
}

@media (min-width: 992px) {
	.postBG p {font-size: 1.25em; line-height: 1.65em; letter-spacing: 0.007em; margin-top: 0.5em;}
}


/* Mobile Top Story Excerpt */

.mobileTitle {background: rgb(184, 237, 251); background: rgba(184, 237, 251, 0.7); margin-bottom: 1.5em;}

.mobileTitle h1 {margin-top: 1em; margin-bottom: 1em; color: #042b3c;}

.mobileExcerpt {
	font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	padding-bottom: 1.5em;
}

.titleBlock {display: none;}

@media (min-width: 600px) {
	.postBG {min-height: 45%; margin-bottom: 2.5em;}
	.titleBlock {padding-bottom: 2em; padding-top: 2em;}
	.mobileExcerpt {display: none;}
	.postBG p {display: block;}
	.titleBlock {display: block;}
	.mobileTitle {display: none;}
}


.mainStories {
	margin-bottom: 2.5em;
	border: 1px solid #b8edfb;
	border-bottom: none;
	background-color: #ffffff;
	padding: 1em 15px;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

@media (min-width: 768px) {
	.mainStories {
		border: 1px solid #b8edfb;
		padding: 1em 1.5em;
	}
}

.mainStories:hover, .mainStories:focus {background-color: #e3f8fd;}

.mainStories h2 {margin-top: 0.75em; margin-bottom: -0.3em;}

.mainStories p.small {margin-left: 0px;}

.mainStoryImage {position: relative; height: 200px; overflow: hidden; margin-bottom: 1.5em;}

/* Hiding all news images */
.mainStoryImage {display:none;}

.mainStoryImage a {
	position: absolute;
	top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

.mainStoryImage a:hover, .mainStoryImage a:focus {
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
}


/* Older news list at bottom of page */

.allNewsBG {border-top: 1px solid #cccccc; background-color: #e6f9fe; padding-bottom: 3em;}

.allNewsBG .btn {margin-top: 1.5em;}

.allNewsBG h3 {margin-bottom: 1em; margin-top: 2em;}

.oldNews {margin-bottom: 1.5em; border-bottom: 1px solid #dddddd; padding-bottom: 1em;}

.oldNews h3 {text-transform: none; font-weight: 300; padding-top: 0; margin-bottom: -0.5em; margin-top: 0.5em;}

.postBG .read-more, .mobileExcerpt .read-more {
	width: 15.5em;
	font-size: 0.65em;
	font-weight: 400;
	text-transform: uppercase;
	margin-top: 2em;
	padding: 0.5em 1.5em 0.5em 1.5em;
	background-color: transparent;
	color: #000000;
	border: 1px solid #666666;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.postBG .read-more:link, .postBG .read-more:visited, .mobileExcerpt .read-more:link, .mobileExcerpt .read-more:visited {
	color: #000000;
	background-color: transparent;
}

.postBG .read-more:hover, .postBG .read-more:focus, .mobileExcerpt .read-more:hover, .mobileExcerpt .read-more:focus {
	color: #666666;
	border-color: #ffffff;
	background-color: #b8edfb;
	margin-left: 6px;
}


/* Single Post Styling */

article {padding-top: 0em; padding-bottom: 0em;}

article p.small, .mobileExcerpt p.small {color: #b15c00; text-transform: uppercase; font-weight: 400; border-left: none; padding-left: none; margin-left: none;}

@media (min-width: 768px) {
	article p.small {border-left: 5px solid #b8edfb; padding-left: 10px; margin-left: -12px;}
}

blockquote {padding: 0 2em;}

blockquote p {font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-size: 1.15em; line-height: 1.45em; letter-spacing: 0.007em; margin-top: 1.25em;}

article img {
	width: 100%;
	height: auto;
	margin-top: 1.75em;
}

.wp-caption {
	width: 100% !important;
}

p.wp-caption-text {font-size: 0.77em; line-height: 1.5em; letter-spacing: .03em; font-style: italic; background-color: #f4f4f4; padding: 1em 1.5em; margin-bottom: 2em;}

figure {
	text-align: center;
	font-size: 0.85em;
}

figure figcaption {
	margin-top: 15px;
}

article iframe {margin-top: 1.5em; padding-bottom: 3.5em;}

article h3 {text-transform: uppercase; font-size: 1.2em; font-weight: 400; padding-top: 1em; margin-bottom: 0;}
article h4 {padding-top: 1em; margin-bottom: 0;}
article h5 {padding-top: 1em; margin-bottom: 0;}


/* Archive Page Pagination - Page uses all styles from OLDER NEWS section on Home.php */

.paginated {margin-top: 2.5em;}

.paginated a {
	width: 100%;
	font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
	font-size: 1em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.85em 2em 0.85em 2em;
	background-color: transparent;
	color: #666666;
	border: 1px solid #666666;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.paginated a:link, .paginated a:visited {
	color: #666666;
	background-color: transparent;
	border-color: #666666;
}

.paginated a:hover, .paginated:focus {
	color: #f3a0c8;
	background-color: transparent;
	border-color: #f3a0c8;
}

/* Float fixes for Bootstrap and Wordpress */

.newer {float: left;}
.older {float: right;}

@media (min-width: 768px) and (max-width: 991px){
	.newer {margin-left: 3em;}
	.older {margin-right: 3em;}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.newer {margin-left: 4em;}
	.older {margin-right: 4em;}
}

@media (min-width: 1200px) {
	.newer {margin-left: 5em;}
	.older {margin-right: 5em;}
}


/* DISQUS COMMENTS */

.commentSection {background-color: #f4f4f4; padding-top: 3em; padding-bottom: 3em; margin-top: 3em;}






/* ----------------------------------------------------------------------------- *\
   10. FANCY FIXES - Currently only used for the 'learnMore' link on homepage.
\* ----------------------------------------------------------------------------- */






.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
        -ms-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

@-webkit-keyframes bounce {
    0%, 100% {-webkit-transform: translateY(0);}
    50% {-webkit-transform: translateY(-4px);}

}

@-moz-keyframes bounce {
    0%, 100% {-moz-transform: translateY(0);}
    50% {-moz-transform: translateY(-4px);}

}

@-ms-keyframes bounce {
    0%, 100% {-ms-transform: translateY(0);}
    50% {-ms-transform: translateY(-4px);}

}

@-o-keyframes bounce {
    0%, 100% {-o-transform: translateY(0);}
    50% {-o-transform: translateY(-4px);}

}
@keyframes bounce {
    0%, 100% {transform: translateY(0);}
    50% {transform: translateY(-4px);}

}

.bounce {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -ms-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;
}

.posts-home header, .posts-show header {
	background-color: #157dab;
	padding-bottom: 10px;
}

.posts-home .postBG, .posts-show .postBG {
	margin-top: 0;
	background: none;
}

.posts-home .titleBlock, .posts-show .titleBlock {
	position: static;
}

@media only screen and (max-width: 600px) {
	.posts-home .postBG, .posts-show .postBG {
		display: none;
	}
}