/*
Theme Name: Tell Japan
Description: Theme for Tell Japan
Version: 1.0
*/

/*
	Corporate green: #00a79d;
	Darker green: #00655f;
	Light green: #e5f0ef;
	Contrast color: #4e434f;
	Neutral color: #524C47;

*/

  /**************************/
 /***   GENERAL STYLES   ***/
/**************************/

body {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.5;
	font-size: 18px;
	background: #FFF;
	font-weight: 300;
}

a, a:hover {
	text-decoration: none;
	color: #00a79d;
	font-weight: bold;
	transition: 500ms;
}
a:hover {color: #00655f;transition: 250ms;}

.section-lifeline a {color: #0ab14b;}
.section-counseling a {color: #3e7ec1;}
.section-fundraising a {color: #662c91;}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-family: Roboto Slab;
	margin-top: 20px;
	margin-bottom: 10px;
	line-height: 1.5;
}
h1 {font-size: 36px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 18px;}

p {margin: 0 0 10px 0;}

.tell-btn {
	background: white;
	display: inline-block;
	border-radius: 5px;
	padding: 5px 15px;
	text-transform: uppercase;
	font-size: 14px;
	color: #555;
	font-weight: bold;
	transition: 250ms;
}
.tell-btn.large {
	font-size: 20px;
	padding: 10px 20px;
}
a:hover .tell-btn,
.tell-btn:hover {
	color: black;
	box-shadow: 0 0 20px white;	
}
.tell-btn:after {
	content: " »";
}

.text-right {text-align: right;}

.alignleft {
	float: left;
	margin: 7px 24px 7px 0;
}
.alignright {
	float: right;
	margin: 7px 0 7px 24px;
}

/* For Japanese texts, different fonts to avoid bad antialiasing on Windows */
.lang-ja {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

  /**************************/
 /***   PAGE STRUCTURE   ***/
/**************************/


#website-header {
	display: block;
	padding: 10px;
}
#website-header .container {
}

.website-brand {
	display: inline-block;
	background: url(img/logo.png) top left no-repeat;
	background-size: contain;
	width: 30%;
	float: left;
	height: 70px;
	text-indent: -999px;
	overflow: hidden;
}
#website-header nav {
	display: block;
	float: right;
	width: 70%;
	font-family: Roboto Slab;
	text-align: right;
}
#website-header nav .extra a {
	font-size: 12px;
	background-color: #000;
	border-radius: 5px;
	display: inline-block;
	padding: 2px 5px 2px 20px;
	color: white;
	font-weight: normal;
	background-size: 12px;
	background-repeat: no-repeat;
	background-image: url(img/icon-directory.png);
	background-position: 5px;
}
#website-header nav .extra a.directory {background-color: #00a79d;}
#website-header nav .extra a.emergency {background-color: #ba1612;background-image: url(img/icon-phone.png);}
#website-header nav .extra a.donate    {display:none;background-color: #6d2d91;background-image: url(img/icon-donation.png);}
#website-header nav .extra a:hover {text-shadow: 0 0 8px black;}
#website-header nav .extra a.directory:hover {box-shadow: 0 0 10px #00a79d;}
#website-header nav .extra a.emergency:hover {box-shadow: 0 0 10px #ba1612;}
#website-header nav .extra a.donate:hover    {box-shadow: 0 0 10px #6d2d91;}
@media (min-width: 768px) {
	#website-header nav .extra a {
		font-size: 16px;
		background-size: 16px;
		background-position: 7px;
		padding: 3px 10px 3px 35px;
		margin-bottom: 5px;	
	}
	#website-header nav .extra a.donate {display: inline-block;}
}
	
#nav-toggle {
	float: right;
	width: 60px;
	height: 60px;
	opacity: .5;
	transition: .25s;
	margin-left: 10px;
}
#nav-toggle:hover,
#nav-toggle.active {
	opacity: 1;
}
#website-header nav ul {
	list-style-type: none;
	padding: 0;
}
#website-header nav>ul {
	list-style-type: none;
	margin: 0 0 0 0;
	position: absolute;
	right: 0;
	background-color: white;
	z-index: 10;
	top: 70px;
}
#website-header nav li {
	display: block;
	border-radius: 8px;
	transition: 500ms;
}

#website-header nav ul a {
	max-height: 0;
	overflow: hidden;
	padding: 0 10px;
	opacity: 0;
	font-size: 20px;
	display: block;
	color: #888;
	font-weight: normal;
}
#website-header nav.open ul a {
	max-height: 60px;
	padding: 5px 10px;
	opacity: 1;
}
#website-header nav ul li.more {
	position: relative;
}
#website-header nav ul li.more>a:after {
	display: inline-block;
	border: solid;
	border-color: #888 transparent;
	border-width: 5px 5px 0 5px;
	content: "";
	margin:  0 0 4px 5px;
	transition: 250ms;
}
#website-header nav ul ul {
	display: block;
	position: absolute;
	z-index: 5;
	right: 100px;
	text-align: left;
	margin-top: -5px;
	background-color: #EEE;
	border-radius: 8px;
	transition:  500ms;
	max-height: 0px;
	opacity: 0;
	overflow: hidden;
	min-width: 200px;
}
#website-header nav ul li.on ul,
#website-header nav ul li:hover ul {
	opacity: 1;
	max-height: 700px;
	padding-top: 5px; 
}
#website-header nav ul ul li.deeper a {
	padding-left: 30px;
}
#website-header nav ul ul li.deeper a:before {
	content: "- ";
}

@media (min-width: 768px) {
	.website-brand {
		width: 180px;
		height: 90px;
		position: absolute;
		bottom: 10px;
	}
	#website-header {
		height: 110px;
		background-color: white;
		transition: box-shadow 500ms;
		position: relative;
	}

	/* Fixed header transformation */
	.fixed-header #website-header {
		position: fixed;
		z-index: 10;
		top:0;
		width: 100%;
		height: 50px;
		padding: 5px;
		box-shadow: 0 0 8px rgba(0,0,0,.5);
	}
	body.fixed-header {padding-top: 110px;}	
	body.admin-bar.fixed-header #website-header {top: 32px;} /* Take into account the WordPress admin bar */
	body.fixed-header #website-header nav .extra {
		margin-top: -70px;
		padding-bottom: 20px;
	}
	body.fixed-header #website-header .website-brand {
		height: 40px;
		bottom: 5px;
	}	


	/* Hide mobile nav toggler */
	#nav-toggle {
		display: none;
	}
	#website-header nav .extra {
		padding-top: 15px;
	}
	#website-header nav {
		width: auto;
	}
	#website-header nav>ul {
		position: static;
		height: 40px;
	}

	#website-header nav>ul>li {
		display: inline-block;
		margin-right: -5px;
	}

	/* Reset links size */
	#website-header nav ul a {
		font-size: 16px;
		max-height: none;
		padding: 5px;
		opacity: 1;
	}

	/* Second level navigation */
	#website-header nav ul ul {
		border-radius: 0 8px 8px 8px;
		right: auto;
		min-width: 250px;
	}
	#website-header nav ul li.menu-item-more ul {
		min-width: 170px;
	}
	#website-header nav>ul>li:hover {
		background-color: #EEE;
		transition: 250ms;
	}
	#website-header nav ul li:hover>a,
	#website-header nav ul li.current>a {
		color: black;
	}
	#website-header nav ul li.more:hover>a:after,
	#website-header nav ul li.more.current>a:after {
		border-color: #000 transparent;
	}
	#website-header nav ul ul a {
		display: block;
		font-size: 16px !important;
	}
	#website-header nav ul ul a:hover {
		background-color: white;
	}

	#website-header nav ul li.menu-item-more ul {
		margin-left: -86px;
		border-radius: 8px 0 8px 8px;
	}
}

@media (min-width: 992px) {
	#website-header nav ul a {
		font-size: 20px;
		padding: 5px 10px;
	}
}



#website-content {

}

#website-content .container {
	background: white;
	min-height: 30em;
}
#website-footer {
	padding: 10px;
	font-size: 14px;
	clear: both;
	background: #333;
	color: #FFF;
}

/* Website footer navigation */
#website-footer .footer-nav ul {
	overflow: auto;
	list-style-type: none;
	background-color: transparent;
	margin: 0;
	padding: 0;
}

#website-footer .footer-nav>ul>li {
	float: left;
	width: 200px;
	margin: 10px;
	background: rgba(0,0,0,.2);
}
#website-footer .footer-nav a,
#website-footer .footer-nav .current a {
	display: block;
	font-size: 14px;
	color: #CCC;
	padding: 5px 5px 5px 15px;
	background-color: transparent;
}
#website-footer .footer-nav a:hover {
	background-color: black;
	color: #FFF;
}

#website-footer .footer-nav .more>a {
	font-size: 16px;
	padding-left: 10px;
}
/*
.footer-nav section {
	float: left;
	background: rgba(0,0,0,.2);
	margin: 10px;
	border-radius: 10px;
	padding-bottom: 10px;
}
.footer-nav section ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.footer-nav h3 {
	margin: 0;
}
.footer-nav h3 a {
	border-radius: 10px 10px 0 0;
	padding: 10px 20px;
}
.footer-nav a {
	color: white;
	opacity: .6;
	display: block;
	padding: 5px 20px;
	width: 250px;	
}
.footer-nav a:hover {
	opacity: 1;
	background: black;
}
.footer-nav .deeper a {
	padding-left: 40px;
}*/

  /***************************/
 /***   RANDOM ELEMENTS   ***/
/***************************/

.tell-btn.donate {
	width: 100%;
	text-align: center;
	background-color: rgba(0,0,0,.1);
}
.tell-btn.donate:hover {
	box-shadow: 0 0 10px rgba(0,0,0,.4);
}

.listing-pagination {
	clear: both;
	border-top: 1px solid rgba(0,0,0,.1);
}

  /*********************************/
 /***   GENERIC PAGE ELEMENTS   ***/
/*********************************/

.page-header {
	padding: 50px 0;
	text-align: center;
	position: relative;
	margin: 0;
	border-bottom: none;
}
.page-header .bg {
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	filter: brightness(.6);
	-webkit-filter: brightness(.6);
}
.page-header h1 {
	color: white;
	text-shadow: 2px 2px 0 black;
	font-size: 30px;
	font-family: Open sans;
	font-weight: 300;
	margin-bottom: 30px;
}


.page-section {
	margin-top: -40px;
	padding-bottom: 100px;
	background-color: #e5f0ef;
}
.page-section h2 {
	text-align: center;
	transform: translateY(-40px);
	font-size: 28px;
	color: white;
}
.page-section h2 span {
	background-color: #e5f0ef;
	padding: 10px 30px;
	display: inline-block;
	border-radius: 5px 5px 0 0;
	color: #888;
}
.page-section h2 a {
	font-weight: normal;
}

#page-intro {
	padding: 50px 0 100px 0;
}
#page-intro .logo {
	display: block ;
	width: 80%;
	max-width: 300px;
	margin: 0 auto 40px auto;
}
#page-intro .introduction-points {
	opacity: .6;
	font-weight: bold;
}
#page-intro .sandbox {
	text-align: center;
	padding-top: 20px;
}

.page-title {
	background: #00a79d;
	background: linear-gradient(to right, rgba(0,167,157,1) 30%, rgba(255,255,255,1) 100%);
	color: white;
	margin-bottom: 20px;
}
.section-counseling .page-title {
	background: #3e7ec1;
	background: linear-gradient(to right, #3e7ec1 30%, rgba(255,255,255,1) 100%);
}
.section-lifeline .page-title {
	background: #099940;
	background: linear-gradient(to right, #099940 30%, rgba(255,255,255,1) 100%);
}

.page-title h1 {
	margin: 20px 0;
}
.page-content h2,
.page-content h3,
.page-content h4 {
	opacity: .66;
}
.page-content h3 a:after {
	content: " »";
}
.page-content td,
.page-content th{
	padding: 5px;
	border: 1px solid rgba(0,0,0,.3);
	vertical-align: top;
}
.page-content table ul,
.page-content table ol {
	padding-left: 15px;
}
.news-image {
	float: left;
	margin: 0 10px 10px 0;
}

.extra-text {
	background: rgba(0,0,0,.05);
	padding: 10px;
	font-size: 14px;
	border: 5px solid #888;
	border-width: 5px 0;
	margin: 10px 0;
}

/* When a section is included in a page */
.section-in-page {
	padding-top: 100px;
}
.section-in-page h2 {
	padding-top: 60px;
	background: #00a79d;
	background: linear-gradient(to right, rgba(0,167,157,1) 30%, rgba(255,255,255,1) 100%);
	margin: 0;
}

.page-aside {
	padding:30px 0 80px 0;
}
.page-aside-item h2 {
	margin-top: 0;
}
.page-aside-item {
	background: #e5f0ef;
	padding: 30px;
}

.section-nav {
	font-size: 14px;
	list-style-type: none;
	background: rgba(0,0,0,.05);
	padding: 5px 0;
	margin:0 0 50px 0;
}
.section-nav .section-title,
.section-nav a {
	display: block;
	padding: 10px;
	font-size: 18px;
}
.section-nav .subpage a {
	padding-left: 20px;
	font-size: 16px;
}
.section-nav .section-title,
#website-header nav ul ul a.section-title {
	font-weight: bold !important;	
	padding: 20px 10px 0 10px !important;
	font-size: 18px !important;
}

.section-nav a:hover,
.section-nav .current a {background-color: white;}

/* Language switch buttons */
.language-button {
	display: block;
	background:rgba(0,0,0,.05);
	padding:10px;
	border-radius:8px;
}
.language-button:hover {
	background: rgba(0,0,0,.1);
}
.language-button div {
	font-size:12px;
	color:black;
	font-weight: normal;
}
/*.language-button span:before {
	content:"";
	background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KCQkJCQkJCQk8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiPgoJCQkJCQkJCTxyZWN0IGZpbGw9IiNmZmYiIGhlaWdodD0iNjAwIiB3aWR0aD0iOTAwIi8+CgkJCQkJCQkJPGNpcmNsZSBmaWxsPSIjYmMwMDJkIiBjeD0iNDUwIiBjeT0iMzAwIiByPSIxODAiLz4KCQkJCQkJCQk8L3N2Zz4=') center;
	width: 40px;
	height: 30px;
	background-size: cover;
	display: inline-block;
	float: left;
	border: 1px solid #CCC;
	margin-right: 5px;
}
.language-button.en span:before {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAzMCIgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIj4KCQkJCQkJCQk8Y2xpcFBhdGggaWQ9InQiPgoJCQkJCQkJCQk8cGF0aCBkPSJNMzAsMTUgaDMwIHYxNSB6IHYxNSBoLTMwIHogaC0zMCB2LTE1IHogdi0xNSBoMzAgeiIvPgoJCQkJCQkJCTwvY2xpcFBhdGg+CgkJCQkJCQkJPHBhdGggZD0iTTAsMCB2MzAgaDYwIHYtMzAgeiIgZmlsbD0iIzAwMjQ3ZCIvPgoJCQkJCQkJCTxwYXRoIGQ9Ik0wLDAgTDYwLDMwIE02MCwwIEwwLDMwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNiIvPgoJCQkJCQkJCTxwYXRoIGQ9Ik0wLDAgTDYwLDMwIE02MCwwIEwwLDMwIiBjbGlwLXBhdGg9InVybCgjdCkiIHN0cm9rZT0iI2NmMTQyYiIgc3Ryb2tlLXdpZHRoPSI0Ii8+CgkJCQkJCQkJPHBhdGggZD0iTTMwLDAgdjMwIE0wLDE1IGg2MCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEwIi8+CgkJCQkJCQkJPHBhdGggZD0iTTMwLDAgdjMwIE0wLDE1IGg2MCIgc3Ryb2tlPSIjY2YxNDJiIiBzdHJva2Utd2lkdGg9IjYiLz4KCQkJCQkJCQk8L3N2Zz4=');
}*/

  /******************************/
 /***   PEOPLE PAGE & LIST   ***/
/******************************/

.people-list h2,
.people-list .team-title {
	font-size: 30px;
	border-bottom: 1px solid rgba(0,0,0,.2);
	margin-bottom: 20px;
}
.people-list .people-item {
	font-size: 16px;
	margin: 10px -5px;
	padding:20px 10px 10px 20px;
	overflow: hidden;
	border-radius: 80px 10px 10px 10px;
	display: block;
	position: relative;
}
.people-list a.people-item:hover {
	background-color: rgba(0,0,0,.036);
	box-shadow: 0 0 10px rgba(0,0,0,.15);
}
.people-list .col-sm-6:nth-child(odd) {
	clear: both;
}
.people-list .people-item .desc {
	overflow: hidden;
}
.people-list .people-item h3 {
	margin: 0;
	font-size: 24px;
	color: black;
	font-weight: normal;
}
.people-list .people-item h4 {
	margin: 0;
	font-size: 18px;
	color: #888;
	font-weight: bold;
}
.people-list .people-item .intro {
	/*min-height: 75px;*/
}
.people-list .people-item .pic {
	width: 100px;
	height: 100px;
	margin: 0 20px 20px 0;
	float: left;
	background: url(img/default-profile.png) center no-repeat;
	background-size: cover;
	border-radius: 50%;
	transition: 250ms;
}
.people-list a.people-item:hover .pic {
	box-shadow: 0 0 20px rgba(0,0,0,.3);
}
.people-list .people-item .pic.anonymous {
	opacity: .5;
}
.people-list .people-item .pic.larger {
	width: 150px;
	height: 150px;
}
/*.people-list.board .people-item .desc {max-width: 600px;}*/
.people-list.board .people-item .pic:not(.larger) {
	margin-left: 50px;
}
.people-list.board .people-item .pic.anonymous {
	opacity: .1;
	border-radius: 0;
	background-image:url(img/icon-emblem.png);
}
.people-list .people-item .intro span,
.people-list .people-item .specs {
	color: black;
	font-weight: 300;
	
}
.people-list .people-item .specs em {
	color: #888;
	font-size: 12px;
	font-style: normal;
	font-weight: 700; 
	font-family: roboto slab;
	display: block;
	position: absolute;
	width: 130px;
	margin-left: -130px;
	padding: 4px 5px 0 0;
	text-align: right;
}

/* Compact people list */
.people-list.compact .people-item {
	max-height: 0px;
	padding-top: 0; padding-bottom: 0; padding-right: 5px;
	margin-top:  0; margin-bottom:  0; 
	transition: 500ms ease-out;
	overflow: hidden;
}
.people-list.compact.open .people-item {
	max-height: 500px;
	transition: 500ms ease-in;
	padding-top: 20px; padding-bottom: 20px;
	margin-top:  20px; margin-bottom:  20px;
}
.people-list.compact .people-item .pic {top:0;transition: 500ms ease-out;}
.people-list.compact.open .people-item .pic {top:20px;transition: 500ms ease-in;}

.people-list.compact .team-title {
	cursor: pointer;
	padding-left: 24px;
	position: relative;
}
.people-list.compact .team-title:before {
	content: "";
	display: block;
	position: absolute;
	top: 16px;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #444;
	transition: 250ms;
}
.people-list.compact.open .team-title:before {
	transform: rotate(90deg);
}

#page-people {
	margin-top: 50px;
}
#page-people .open-person h1 {
	margin: 0;
	line-height: 1;
}
#page-people .open-person h2 {
	color: #888;
	font-weight: bold;
	margin-top: 0;
	font-size: 20px;
}
#page-people .open-person .pic {
	width: 100%;
	padding-bottom: 100%;
	background: url(img/default-profile.png) center no-repeat;
	background-size: cover;
	float: left;
	border-radius: 50%;
	margin: 0 20px 20px 0;
	transition: 500ms;
}
#page-people .open-person .pic img {display:none;}
#page-people .open-person .pic.anonymous {opacity: .25;}

/* List of people on the side */
.people-sidelist h2 {
	margin: 0;
	color: #888;
	font-size: 24px;
}
.people-sidelist ul {
	list-style-type: none;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,.1);
}
.people-sidelist a {
	display: block;
	padding: 10px;
	border-bottom: 1px solid rgba(0,0,0,.1);
	background: rgba(0,0,0,.05);
	overflow: hidden;
	font-size: 14px;
}
.people-sidelist a:hover,
.people-sidelist a.active  {
	background: white;
}
.people-sidelist a h3 {
	margin: 0;
	font-size: 18px;
}
.people-sidelist a strong {
	display: block;
	color: #888;
	line-height: 1;
}
.people-sidelist a .pic {
	width: 50px;
	height: 50px;
	background: url(img/default-profile.png) center no-repeat;
	background-size: cover;
	float: left;
	border-radius: 50%;
	margin: 0 10px 0 0;
}
.people-sidelist a .pic.anonymous {
	opacity: .5;
}

  /*********************/
 /***   NEWS PAGE   ***/
/*********************/

.news-sidelist h2 {
	margin: 0;
	color: #888;
	font-size: 24px;
}
.news-sidelist ul {
	list-style-type: none;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,.1);
}
.news-sidelist a {
	display: block;
	overflow: hidden;
	padding: 10px;
	border-bottom: 1px solid rgba(0,0,0,.1);
	background-color: rgba(0,0,0,0.05);
}
.news-sidelist a:hover {
	background-color: white;
}
.news-sidelist a h3 {
	margin: 0 0 5px 0;
	font-size: 18px;
	line-height: 1.1;
}
.news-sidelist strong {
	display: block;
	font-size: 14px;
	font-weight: normal;
	color: #888;
}
.news-sidelist .pic img {
	width: 100px;
	margin: 0 10px 0 0;
	float: left;
}

  /********************/
 /***   SPONSORS   ***/
/********************/

#section-sponsors {
	background: #CCC;
	padding-bottom: 20px;
	text-align: center;
}
#section-sponsors a {
	display: inline-block;
	background: white;
	padding: 5px;
	border-radius: 10px;
	margin: 10px;
	vertical-align: top;
	filter: saturate(0);
	-webkit-filter: saturate(0);
	transition: 250ms;

}
#section-sponsors a:hover {
	filter: saturate(1);
	-webkit-filter: saturate(1);
	box-shadow: 0 0 10px rgba(0,0,0,.4);
}
#section-sponsors a img {
	height: 75px;
}

  /************************/
 /***   CONTACT PAGE   ***/
/************************/

.contact-forms .contact-form label {display: inline;}


  /**********************/
 /***   HEAD PAGES   ***/
/**********************/

.headpage-header .number {
	font-size: 30px;
	color: white;
	text-shadow: 2px 2px 0 black;
	margin-top: 0;
}
.headpage-header .tell-btn {margin-top: 30px;}
.headpage-header .number:before {
	content: "";
	width: 24px;
	height: 24px;
	margin-right: 12px;
	display: inline-block;
	background: url(img/icon-phone-2-white.png) left no-repeat;
	background-size: contain;
}
#headpage-services,
#headpage-services h2 span {
	background-color: #005e58;
	color: white;
}
#headpage-services {
	background: linear-gradient(to bottom, #005e58 0%,#009990 100%);
}
.section-counseling #headpage-services,
.section-counseling #headpage-services h2 span {
	background-color: #21466e;
}
.section-counseling #headpage-services {
	background: linear-gradient(to bottom, #21466e 0%,#346fae 100%);
}
.section-lifeline #headpage-services,
.section-lifeline #headpage-services h2 span {
	background-color: #099940;
}
.section-lifeline #headpage-services {
	background: linear-gradient(to bottom, #099940 0%,#06662a 100%);
}
#headpage-services {
	font-size: 16px;
}

#headpage-services .service-item>a {
	padding: 15px 30px;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 15px;
	text-align: center;
	margin-bottom: 30px;
	min-height: 250px;
	color: white;
	font-weight: normal;
	display: block;
	position: relative;
}
#headpage-services .service-item a:hover {
	background-color: rgba(0,0,0,.1);
	border-color: rgba(255,255,255,.5);
}
#headpage-services .service-item:nth-child(odd) {
	clear: both;
}
#headpage-services .service-item h3 {
	margin-top: 0;
	font-weight: 300;
	font-size: 30px;
}
#headpage-services .service-item p {
	opacity: .66;
	text-align: left;
	padding-left: 130px;
	min-height: 100px;
	background-repeat: no-repeat;
	background-size: auto 100px;
	background-position: left;
	transition: 250ms;
}
#headpage-services .service-item:hover p {
	opacity: 1;
}

/* Tweaks for resources page */

.resources-services #headpage-services .service-item {
	
}
.resources-services #headpage-services .service-item>a {
	min-height: auto;
	text-align: left;
	padding-left: 10px;
}
.resources-services #headpage-services .service-item:nth-child(odd) {
	clear: none;
}
.resources-services #headpage-services .service-item h3 {
	font-size: 18px;
	margin: 0;
}
.resources-services #headpage-services .service-item p {
	display: none;
}
.resources-services #headpage-services .tell-btn {
	display: none;
}

#headpage-team,
#headpage-team h2 span {
	background-color: #ccedeb;
	color: #444;
}
.section-counseling #headpage-team,
.section-counseling #headpage-team h2 span {
	background-color: #d8e5f3;
}
.section-lifeline #headpage-team,
.section-lifeline #headpage-team h2 span {
	background-color: #ceefdb;
}


#headpage-info,
#headpage-info h2 span {
	background-color: white;
}
#headpage-info .number h4 {
	/*width: 50%;
	float: left;*/
	font-size: 30px;
	color: #888;
}
#headpage-info .number h4:before {
	content: "";
	width: 24px;
	height: 24px;
	margin-right: 12px;
	display: inline-block;
	background: url(img/icon-phone-2-black.png) left no-repeat;
	background-size: contain;
	opacity: .5;
}
#headpage-info .link-group {
	font-size: 16px;
}
#headpage-info .link-group h3 {
	color: #888;
	border-bottom: 1px solid rgba(0,0,0,.2);
}
#headpage-info .link-group ul {
	list-style-type: none;
	padding-left: 20px; 
}
#headpage-info .link-group a:after {
	content: " »";
}
#headpage-info .map br {display: none;}
#headpage-info .map a {
	font-size: 10px;
	color: gray;
}

  /**************************/
 /***   RESOURCES PAGE   ***/
/**************************/

.resource-header {
	color: white;
	padding-bottom: 90px;
}
.resource-header p {
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
	font-size: 16px;
	max-width: 400px;
	margin: auto;
}
.resource-header .number {
	font-size: 20px;
	margin-bottom: 10px;
	font-family: roboto slab;
}
.resource-header .additional-numbers .number:before {
	height: 20px;width: 20px;margin-right: 10px;
	position: relative;
	top: 2px;
}
.resource-header .first-number .number:before {
	height: 28px;width: 28px;margin-right: 14px;
	position: relative;
	top: 4px;	
}
.resource-header .first-number {
	padding-bottom: 30px;
}
.resource-header .first-number .number {
	font-size: 28px;
}
.resource-header .first-number p {
	font-size: 18px;
}


  /***********************/
 /***   EVENTS PAGE   ***/
/***********************/

#page-event .event .flyer img {
	width: 100%;
}
#page-event .event .details .entry {
	clear: both;
	padding: 3px 0;
}
#page-event .event .details label {
	display: block;
	float: left;
	width: 30%;
	text-align: right;
	padding-right: 10px;	
	color: #888;
}
#page-event .event .details span {
	display: block;
	float: left;
	width: 70%;
}


  /***************************/
 /***   HOMEPAGE SLIDER   ***/
/***************************/

.homepage-header {
	height: 150px;
	background: currentColor;
	color: #FFF;
	background-size: cover;
	background-position: center;	
}
.homepage-header .slide-content {
	position: relative;
	height: 100%;
}
.homepage-header.flyer .slide-content .illustration {
	position: relative;
	width: 50%;
	margin: auto;
	float: left;
	height: 100%;
	background-size: cover;
	background-position: center;
}
.homepage-header.flyer .slide-content .illustration:before,
.homepage-header.flyer .slide-content .illustration:after {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	border-style: solid;
	border-color: transparent transparent transparent currentColor;
	border-width: 150px 0 0 50px;
}
.homepage-header.flyer .slide-content .illustration:after {
	border-color: transparent currentColor transparent transparent ;;
	border-width: 0 50px 150px 0 ;
	right: 0;
}
#header-slider {
	width: 100vw;
	height: 150px;
	overflow: hidden;
	position: relative;
}
#header-slider .slides {
	width: 800vw;
	height: 150px;
	transition: 750ms;
}
#header-slider .slide {
	float: left;
	width: 100vw;
	height: 150px;
}
#header-slider .controls {
	line-height: 0;
}
#header-slider .controls div {
	position: absolute;
	top: 30px;
	font-size: 100px;
	padding: 30px 0;
	cursor: pointer;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	text-shadow: -4px 0 white;
	opacity: .66;
	transition: 250ms;
}
#header-slider .controls div:hover {opacity: 1;}
#header-slider .controls .left {
	left: 5px;
}
#header-slider .controls .right {
	right: 5px;
	text-shadow: 4px 0 white;
}

/* Slides positions */
#header-slider[data-current-slide="0"] .slides {margin-left: 0vw;}
#header-slider[data-current-slide="1"] .slides {margin-left: -100vw;}
#header-slider[data-current-slide="2"] .slides {margin-left: -200vw;}
#header-slider[data-current-slide="3"] .slides {margin-left: -300vw;}
#header-slider[data-current-slide="4"] .slides {margin-left: -400vw;}
#header-slider[data-current-slide="5"] .slides {margin-left: -500vw;}
#header-slider[data-current-slide="6"] .slides {margin-left: -600vw;}


.homepage-header .slide-content .caption {
	font-size: 12px;
}
.homepage-header.flyer .slide-content .caption {
	float: left;
	width: 50%;
	color: white;
}
.homepage-header.hero .slide-content .caption {
	width: 75%;
	margin: auto;
}
.homepage-header .slide-content .caption h2 {
	margin-top: 10px;
	font-size: 14px;
}


#homepage-tagline {
	font-size: 24px;
	text-align: center;
	color: #888; 
	padding: 60px 0 120px 0;

}
#homepage-tagline p {
	max-width: 920px;
	display: inline-block;
}
@media (min-width: 500px) {
	#header-slider,
	#header-slider .slide,
	#header-slider .slides,
	.homepage-header {height: 250px;}
	.homepage-header.flyer .slide-content .illustration:before {border-width: 250px 0 0 75px;}
	.homepage-header.flyer .slide-content .illustration:after  {border-width: 0 75px 250px 0 ;}
	#header-slider .controls div {top: 80px;padding: 30px 5px;}
	#header-slider .controls .left {left: 5px;}
	#header-slider .controls .right {right: 5px;}
	.homepage-header.hero .slide-content .caption {width: 70%;}
	.homepage-header .slide-content .caption {
		font-size: 14px;
	}	
	.homepage-header .slide-content .caption h2 {
		margin-top: 30px;
		font-size: 20px;
	}
	.homepage-header.flyer .slide-content .tell-btn {
		margin: 20px 0 0 0;
	}	
}
@media (min-width: 768px) {
	#header-slider,
	#header-slider .slide,
	#header-slider .slides,
	.homepage-header {height: 350px;}
	.homepage-header.flyer .slide-content .illustration:before {border-width: 350px 0 0 100px;}
	.homepage-header.flyer .slide-content .illustration:after  {border-width: 0 100px 350px 0 ;}	
	#header-slider .controls div {top: 130px;padding: 30px;}
	.homepage-header.hero .slide-content .caption {width: 50%;}
	#header-slider .controls .left {left: 20px;}
	#header-slider .controls .right {right: 20px;}	
	.homepage-header .slide-content .caption {
		font-size: 16px;
	}
	.homepage-header.flyer .slide-content .caption {width: 33%;}
	.homepage-header.flyer .slide-content .illustration {width: 67%;}
	.homepage-header .slide-content .caption h2 {
		font-size: 30px;
		margin-top: 50px;
	}	
	#homepage-tagline {
		font-size: 30px;
		padding: 60px 60px 120px 60px;

	}
}

.hp-infographic {
	width: 100%;
	margin: 50px 0;
}


  /******************************/
 /***   ANIMATED HAMBURGER   ***/
/******************************/

	/* Shamelessly copy pasted from http://codepen.io/vitaldevteam/pen/fqcuz */

	#nav-toggle {
		position: relative;
		vertical-align: middle;
		height: 58px;
		cursor: pointer;
	}
	#nav-toggle span {
		position: relative;
		top: 24px;
		margin: 0 auto;
		-webkit-transition-duration: 0s;
		-webkit-transition-delay: 150ms;
	}
	#nav-toggle.active span {
		background-color: transparent;
		-webkit-transition-delay: 150ms;
	}
	#nav-toggle span:before,
	#nav-toggle span:after {
		position: absolute;
		content: '';
	}
	#nav-toggle span,
	#nav-toggle span:before,
	#nav-toggle span:after {
		display: block;
		width: 60px;
		height: 10px;
		background-color: #555;
		border-radius: 10px;
	}
	#nav-toggle span:before {
		margin-top: -20px;
		-webkit-transition-property: margin, -webkit-transform, color;
		-webkit-transition-duration: 150ms;
		-webkit-transition-delay: 150ms, 0;
	}
	#nav-toggle span:after {
		margin-top: 20px;
		-webkit-transition-property: margin, -webkit-transform, color;
		-webkit-transition-duration: 150ms;
		-webkit-transition-delay: 150ms, 0;
	}
	#nav-toggle.active span:before {
		margin-top: 0;
		background-color: #000;
		-webkit-transition-delay: 0, 150ms;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#nav-toggle.active span:after {
		margin-top: 0;
		background-color: #000;
		-webkit-transition-delay: 0, 150ms;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

  /***************************/
 /***   HOMEPAGE BLOCKS   ***/
/***************************/

#homepage-how-we-help {
	padding-bottom: 30px;
}
#homepage-how-we-help,
#homepage-how-we-help h2 span {
	background-color: #00a79d;
	color: white;
}

#homepage-how-we-help .help-item {
	text-align: center;
	margin: 0 auto 20px auto;
	max-width: 400px;

}
#homepage-how-we-help .illustration {
	display: inline-block;
	width: 200px;
	height: 200px;
	background-size: cover;
	background-position: center;
	border-radius: 15px;
}
@media (min-width: 960px) {
	#homepage-how-we-help .illustration {
		width: 222px;
		height: 222px;
	}
}

#homepage-infographic {
	padding: 20px 0 70px 0;
	text-align: center;
}

#homepage-how-you-can-help .help-item {
	margin-bottom: 20px;
	/*clear: both;*/
	overflow: hidden;
}
#homepage-how-you-can-help .side {
	width: 40%;
	float: left;
}
#homepage-how-you-can-help .content {
	width: 60%;
	padding-left: 20px;
	float: left;
}


#homepage-how-you-can-help .illustration {
	display: inline-block;
	width: 100%;
	padding-bottom: 100%;
	background-size: cover;
	background-position: center;
	border-radius: 15px;
	float: left;
}
#homepage-how-you-can-help .btn {
	background: #00a79d;
	display: inline-block;
	border-radius: 5px;
	padding: 5px 15px;
	font-size: 16px;
	font-weight: bold;
	font-family: Roboto Slab;
	color: white;
	transition: 250ms;
	margin: 10% 0 5% 0;
}
#homepage-how-you-can-help .btn:after {
	content: " »";
}
#homepage-how-you-can-help .btn:hover {
	box-shadow: 0 0 15px rgba(0,0,0,.7);
	text-shadow: 0 0 10px rgba(255,255,255,.7);	
}
#homepage-how-you-can-help .btn.alt {
	background: #6d2d91;
}
#homepage-how-you-can-help p {
	float: left;
	font-size: 14px;	
}
@media (min-width: 500px) {
	#homepage-how-you-can-help .btn {
		font-size: 18px;
		padding: 5px 15px;
	}
	#homepage-how-you-can-help p {
		float: left;
		font-size: 20px;	
	}
}
@media (min-width: 992px) {
	#homepage-how-you-can-help .btn {
		font-size: 30px;
		padding: 5px 25px;
	}
}
@media (min-width: 1200px) {
	#homepage-how-you-can-help .btn {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	#homepage-how-you-can-help .help-item:nth-child(odd) .side,
	#homepage-how-you-can-help .help-item:nth-child(odd) .content {
		float: right;
		text-align: right;
	}
	#homepage-how-you-can-help .help-item:nth-child(odd) .content {
		padding-left: 0;
		padding-right: 20px;
	}
}
@media (min-width: 768px) {
	#homepage-how-you-can-help .help-item:nth-child(n+3) .side,
	#homepage-how-you-can-help .help-item:nth-child(n+3) .content {
		float: right;
		text-align: right;
	}
	#homepage-how-you-can-help .help-item:nth-child(n+3) .content {
		padding-left: 0;
		padding-right: 20px;
	}
}



#homepage-news {
	background: linear-gradient(to bottom, rgba(255,255,255,1) 80%, rgba(229,240,239,1) 100%);
}
#homepage-news h2 span {
	background-color: #FFF;
}
.news-list .news-item {
	display: block;
	color: black;
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 30px;
	overflow: hidden;
}
.news-list .news-item:nth-child(odd) {
	clear: both;
}
.news-list .news-item h3 {
	margin: 0;
	color: #00a79d;
}
.news-list .news-item .date {
	display: block;
	color: #888;
	font-size: 12px;
	margin: 0 0 10px 0;
}
.news-list .news-item img {
	max-width: 320px;
}
.news-list .news-item p {
	margin: 0 50px 0 0;
}

.news-list .news-item p strong {
	font-weight: 700;
	color: #00a79d;;
}
@media (min-width: 768px) {
	.news-list .news-item img {
		max-width: 150px;
		float: left;
	}
	.news-list .news-item.with-pic p {
		margin-left: 170px;
	}
	.news-list .news-item {
		width: 50%;
		float: left;
		clear: none;
	}	
}

#homepage-events {
	background: linear-gradient(to bottom, rgba(255,255,255,1) 80%, rgba(229,240,239,1) 100%);
}
#homepage-events h2 span {
	background-color: #FFF;
}
.events-list .event {
	border-bottom: 1px solid rgba(0,0,0,0.2);
	overflow: hidden;
	padding: 20px;
	font-size: 14px;
}
.events-list .event:first-child {
	border-top: 1px solid rgba(0,0,0,0.2);
}
.events-list .event h3 {
	margin: 0;
}
.events-list .event h3 a {
	font-weight: normal
}
.events-list .event .flyer img {
	width: 100%;
}
.events-list .event .details .entry {
	clear: both;
	padding: 3px 0;
}
.events-list .event .details label {
	display: block;
	float: left;
	width: 30%;
	text-align: right;
	padding-right: 10px;	
	color: #888;
	
}
.events-list .event .details span {
	display: block;
	float: left;
	width: 70%;
}
.events-list .event .flyer {
	width: 30%;
	float: left;
}
.events-list .event h3 {font-size: 18px;}
.events-list .event .text,
.events-list .event .details {
	width: 70%;
	float: left;
	padding: 0 0 0 20px;
}
@media (min-width: 768px) {
	.events-list .event h3 {font-size: 24px;}
	.events-list .event .flyer {
		width: 15%;
	}
	.events-list .event .text {
		width: 55%;
		padding: 0 40px 0 20px;
	}
	.events-list .event .details {
		width: 30%;
	}	
}
@media (min-width: 992px) {
	.events-list .event .text {
		padding: 0 60px 0 50px;
	}
}



#homepage-resources {
	background: white;
	font-size: 14px;
}
.page-template-page-resources #homepage-resources {
	padding-bottom: 0;
}
#homepage-resources h2 span {
	background-color: #FFF;
}
#homepage-resources h3 {
	border-bottom: 1px solid rgba(0,0,0,0.4);
	color: #888;
	font-size: 30px;
}
#homepage-resources .resources-bloc {
	padding: 0 30px;
}
#homepage-resources .mental-health a {
	display: block;
	padding: 10px 70px 10px 10px;
	color: black;
	font-weight: normal;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	position: relative;
}
#homepage-resources .mental-health a:last-child {
	border-bottom: none;
}
#homepage-resources .mental-health a:hover {
	background: rgba(0,0,0,0.025);
}
#homepage-resources .mental-health a:before {
	display: block;
	position: absolute;
	right: 10px;
	top: 30px;
	opacity: .25;
	content: "";
	background: url(img/icon-arrow.png) no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	transition: 250ms;
}
#homepage-resources .mental-health a:hover:before {
	opacity: .5;
}
#homepage-resources .mental-health a h4 {
	font-size: 20px;
	font-weight: bold;
	color: #00a79d;
	margin: 0 0 5px 0;
}
#homepage-resources .mental-health a h4:after {
	content: " »";
}
#homepage-resources .mental-health a:hover h4 {
	color: #00655f;
}
#homepage-resources .emergency {
	background-color: #FEE;
	padding-bottom: 10px;
	border-radius: 10px;
}
#homepage-resources .emergency h3 {
	color: #F00;
}
#homepage-resources .emergency h4 {
	color: #F00;
	margin: 0;
	padding-top: 10px;
}
#homepage-resources .directoy .topic {
	display: block;
	padding: 10px 10px 10px 70px;
	color: black;
	font-weight: normal;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	position: relative;
}
#homepage-resources .directoy .topic:last-child {
	border-bottom: none;
}
#homepage-resources .directoy .topic:before {
	display: block;
	position: absolute;
	left: 10px;
	top: 30px;
	opacity: .25;
	content: "";
	background: url(img/icon-hand.png) no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	transition: 250ms;
}
#homepage-resources .directoy .topic h4 {
	font-size: 20px;
	font-weight: bold;
	color: #888;
	margin: 0;
}
#homepage-resources .directoy .topic.mainlink:before {
	display: none;
}
#homepage-resources .directoy .topic.mainlink a {
	font-size: 18px;
}
#homepage-resources .directoy a {
	font-weight: normal;
}

#homepage-social {
	text-align: center;
	padding-bottom: 10px;
}
#homepage-social h2 {
	margin-bottom: -30px;
}



/* STIGMA LINK */
#website-header nav .extra a#stigma {
	background: transparent url(http://i.imgur.com/zo71OsI.png) center no-repeat;
    background-size: contain;
    /* text-indent: -500px; */
    /* overflow: hidden; */
    color: transparent;
    height: 35px;
    width: 165px;
    margin: 0 10px 0 0;
    display: none;
}
#website-header nav .extra a#stigma:hover {text-shadow: 0px 0px 12px #F8F;}

@media (min-width: 990px) {
	#website-header nav .extra a#stigma {
		display: inline-block;
	}
}