/* ============================== */
/*  Section - Common
/* ============================== */
section {
	max-width: 960px;
	margin:40px auto 60px;
	}
section header {
    margin-bottom: 20px;
	}
section header h2 {
    font: 30px/30px "FuturaBT-Medium", Arial;
    color: #008ab0;
    letter-spacing: 0;
    text-transform: uppercase;	
	}
section article h3 {
	height: auto;
	margin: 35px 0 0;
	font-size: 17px;
	line-height:17px;
	text-transform: uppercase;
	font-family: "FuturaBT-Medium";
	color: #636363; 
	}	
section article h3 em{
	font-size: 11px;
	}	
section article .content {
	position: relative;
	}
section article .content h4 {
    font: 14px/14px "FuturaBT-Bold", Arial;
	color: #666666;
	text-transform: uppercase;
	}
section article .content p {
    margin: 0px 0px 20px;
    font: 15px/21px "FuturaBT-Light", Arial;
	color: #464646;
	}
section article .content p span {
    text-transform: uppercase;
	}
section article .content p a {
	color: #2e9ebe;
	text-decoration: 
	}
section article .content .t_mentions{
	margin: 30px 0 0;
	font: 10px/12px "FuturaBT-Light", Arial;
	font-style: italic;
	}	
section article .content .b_link {
	font: 15px/15px "FuturaBT-Bold", Arial;
    text-transform: uppercase;
	color: #464646;
	transition:all .3s ease;
	-webkit-transition:all .3s ease;
	}
section article .content .b_link::after {
    content: '>';
	position: relative;
    top: -1px;
    display: inline-block;
    margin-left: 5px;
    color: #007298;
	}
section article .content .b_link:hover{
	color: #007298;
	}
.charity .video{
	position: relative;
	display: inline-block;
	}	
.charity .video::before{
	content:"";
	position:absolute;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	top:50%;
	left:50%;
	display:block;
	width:77px;
	height:76px;
	background: url("images/i_play.png") no-repeat scroll center top / 77px auto;
	opacity:0.5;
	transition:all .3s ease;
	-webkit-transition:all .3s ease;
	}	
.charity .video:hover:before{
	opacity:1;
	}	
	

@media screen and (max-width:960px){
	section{
		width: 100%;
		max-width: 960px;
		padding: 0 20px;
		}
}

@media screen and (max-width:767px){
	section{
		margin: 20px auto;
		padding: 0 20px;
		}
	section header h2{
		font: 22px/1em "FuturaBT-Bold", Arial;
		}		
}

.charity #Section_01, .charity #Section_02, .charity #Section_02{
    margin: 0px auto -200px auto;
    padding: 200px 0px 0px 0px;
	}
	
@media screen and (max-width: 960px){	
	.charity #Hero, .charity #Section_01, .charity #Section_02, .charity #Section_02{
		margin: 0px auto -100px auto;
		padding: 100px 20px 0px;
		}
}
	
@media screen and (max-width: 767px){	
	.charity #Hero, .charity #Section_01, .charity #Section_02, .charity #Section_02{
		}
}	

div.main{
	padding-top:0;
	}
.charity #Hero{
	height: auto;
	padding-top: 147px;
	margin: 0px auto -147px auto;
	background: #fff; 
	}	
.str_left{	
	position: relative;
	display: block;
	width: calc(100% - 480px);
	padding-right: 15px;
	}
.str_right{	
	position: relative;
	display: block;
	text-align: right;
	}
.charity article{
	box-sizing: border-box;
	}
.ctn_popin_video iframe{
	width:560px;
	height: 315px;
	}
.pg_landing .obj_popin .content {
    font-size: 0;
	}
	
@media screen and (max-width: 767px){	
	.ctn_popin_video{
		width:100%;
		max-width:560px;
		max-height:315px;
		}
	.ctn_popin_video iframe{
		width: 100%;
		height: auto;
		}
	.str_left{
		width: 100%;
		margin: 0 0 20px;
		padding: 0;
		float: none;
		}	
	.str_right{
		width: 100%;
		margin: 0 0 20px;
		text-align: left;
		float: none;
		}			
}
	
/* ============================== */
/*  Banner
/* ============================== */
.charity #Hero .banner {
	width: auto;
	max-width: 960px;
	height: auto;
	margin: 0px auto;
	padding: 0;
	}
.charity #Hero .banner .ctn_header ul li strong,
.charity #Hero .banner .ctn_header p strong {
	font-family: "FuturaBT-Medium";
	color: #008ab0;
	font-weight: normal;
	}	
.charity #Hero .banner .ctn_header .str_content{
	display: block;
	width: 100%;
	}
.charity #Hero .banner .ctn_header .str_content p{
	margin: 0 0 15px;
	font: 15px/21px "FuturaBT-Light", Arial;	
	color: #464646;
	}
.charity #Hero .banner .ctn_header .str_content ul{
	margin: 0 ;
	}	
.charity #Hero .banner .ctn_header .str_content ul li{
	padding: 0 0 20px;
	font: 15px/21px "FuturaBT-Light", Arial;	
	color: #464646;
	}	
.charity #Hero .banner .ctn_header .str_content ul li strong{
	font-size: 17px;
	text-transform: uppercase;
	}
.charity #Hero .banner .ctn_header .ctn_video{
	max-width: 480px;
	margin: 0 0 40px 40px;
	float: right;	
	}
.charity #Hero .banner .ctn_header .ctn_video img{
	width: 100%;
	}	
.charity #Hero .banner .ctn_header h1 {
	display: inline-block;
	padding: 0;	
	margin: 34px 0 18px;
	font: 61px/48px "FuturaBT-Light", Arial;
    letter-spacing: 1px;
	color: #22799f;
	text-transform: uppercase;
	}
.charity #Hero .banner .ctn_header h2{
	padding: 0 0 40px;
	font-size: 27px;
	line-height: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #22799f;
	}

@media screen and (max-width:960px){
	.charity #Hero{
		margin-bottom: -110px;
		padding: 110px 20px 0;
		}
	.charity #Hero .str_right img {
		width: 100%;
		max-width: 465px;
		}	
}

@media screen and (max-width:767px){
	.charity #Hero {
		height: auto;
		}
	.charity #Hero .banner{
		height: auto;
		margin: 0 0 50px;
		}		
	.charity #Hero .banner .ctn_header {
		position: relative;
		}
	.charity #Hero .banner .ctn_header .str_content {
		width: 100%;
		padding-right: 0;
		float: none;
		}
	.charity #Hero .banner .ctn_header .str_content p br{
		display: none;
		}	
	.charity #Hero .banner .ctn_header .str_right {
		width: 100%;
		text-align: left;
		float: none;
		}	
	.charity #Hero .banner .ctn_header h1 {
		display: block;
		margin: 0;
		font: 40px/40px "FuturaBT-Light", Arial;
		}
	.charity #Hero .banner .ctn_header h2 {
		margin:0 0 30px;
		padding: 0;
		font: 17px/28px "FuturaBT-Light", Arial;
		}
	.charity #Hero .banner .ctn_header h2 br{
		display: none;
		}
	.charity #Hero .banner .ctn_header .ctn_video{
		max-width: 480px;
		width: 100%;
		margin: 0 0 20px 0px;
		float: none;	
		}	
}


/* ============================== */
/*  Section_01
/* ============================== */
.charity #Section_01{
	position: relative;	
	}
.charity #Section_01 article{
	height: auto;	
	margin: 0 0 80px;
	padding: 0;
	}	
.charity #Section_01 .ctn_right{
	position: relative;
	float: right;
	margin: 0 0 40px 40px;
	}	
.charity #Section_01 .ctn_right figure{
	position: relative;
	display: block;
	text-align: center;
	max-width: 348px;
	}
.charity #Section_01 .ctn_right figure img{
	width: 100%;
	}	
.charity #Section_01 .ctn_table{
	width: 100%;
	margin: 60px 0 0;
	border: 1px solid #cccccc;
	}
.charity #Section_01 .ctn_table tr{		
	}
.charity #Section_01 .ctn_table td{
	height: 140px;
	padding: 10px;
	vertical-align: middle;
	border-bottom: 1px solid #cccccc;
	}	
.charity #Section_01 .ctn_table tr:last-child td{
	border: none;
	}	
.charity #Section_01 .ctn_table .txt{
	padding-left: 30px;
	width: calc(100% - 150px);
	}	
.charity #Section_01 .ctn_table .txt strong{
	font: 17px/21px "FuturaBT-Bold", Arial;
	color: #008ab0;
	}	
.charity #Section_01 .ctn_table .txt p{
	margin: 0;
	font: 15px/21px "FuturaBT-Light", Arial;
	}
.charity #Section_01 .ctn_table .txt p em{
	display: inline-block;
	padding-top: 10px;
	font: 15px/21px "FuturaBT-Bold", Arial;
	color: #666666;
	}	
.charity #Section_01 .ctn_table .picture{
	width: 140px;
	margin-left:10px;
	font-size: 0;
	}	
	
@media screen and (max-width:960px){
	.charity #Section_01{
		position: relative;
		padding: 110px 20px 0 20px;
		max-width: 100%;
		box-sizing: border-box;
		}
	.charity #Section_01 article{
		margin: 0 0 50px;
		padding: 40px 0;
		}	
	.charity #Section_01 .v_award{
		top: 20px;
		left: 0;
		}	
}

@media screen and (max-width:767px){
	.charity #Section_01{
		margin-top: 0;
		padding: 110px 20px 0 20px;
		}
	.charity #Section_01 article{
		height: auto;
		padding: 0;
		}
	.charity #Section_01 h2{
		width: 100%;
		text-align: left;
		}	
	.charity #Section_01 .ctn_right{
		float: none;
		margin: 0 0 20px;
		}		
	.charity #Section_01 .ctn_table{
		border: 0;
		}	
	.charity #Section_01 .ctn_table .txt {
		padding-left: 0;
		width: 50%;
		}	
	.charity #Section_01 .ctn_table .picture {
		width: 50%;
		margin-left: 0;
		padding-right: 0;
		padding-left: 0;
		text-align: right;
		}
	.charity #Section_01 .ctn_table .txt p{
		font: 14px/16px "FuturaBT-Light", Arial
		}	
	.charity #Section_01 .ctn_table .txt strong,
	.charity #Section_01 .ctn_table .txt p em{
		font: 14px/16px "FuturaBT-Bold", Arial;
		}	
}

/* ============================== */
/*  Section_02
/* ============================== */
.charity #Section_02{	
	margin-bottom: 100px;
	}
.charity #Section_02 header p{
	padding-top: 25px;
	font: 15px/21px "FuturaBT-Light", Arial;
	}
.charity #Section_02 header p strong{
	font: 24px/21px "FuturaBT-Medium", Arial;
	color: #008ab0;
	font-style: italic;
	}	
.charity #Section_02 header .b_gradient{
	height: 38px;
	line-height: 38px;
	padding: 0 35px;
	text-align: center;
	color: #fff;
	background: transparent url("images/f_btn-donate.gif") repeat-x left top;
	}	
.charity #Section_02 header .b_gradient:hover{	
	background: #2093b5 none;
	}
.charity #Section_02 article {
	margin: 0;
	padding: 0;
	border-bottom:1px solid #7f7f7f;
	}	
.charity #Section_02 article h3{
	position: relative;
	display: block;
	margin: 0;
	padding: 35px 0;
	}	
/*	
.charity #Section_02 article h3 a{	
	position: relative;
	display: block;
	padding: 35px 0;
	}
.charity #Section_02 article h3 a::after{		
	content:"";
	position: absolute;
	right: 0;
	width: 12px;
	height: 6px;
	margin-top: 6px;
	background: url("images/i_drop-down.gif") no-repeat scroll right bottom / 12px 12px;
	}	
.charity #Section_02 article h3 a.open::after{
	background: url("images/i_drop-down.gif") no-repeat scroll right top / 12px 12px;
	}	
*/	
.charity #Section_02 article .content{
	margin: 0 0 35px 0;		
	}
.charity #Section_02 article:last-child{
	border: none;	
	}
.charity #Section_02 .str_left{
	width: calc(100% - 280px);
	padding-right: 40px;
	box-sizing: border-box;
	}
	
@media screen and (max-width:960px){	
	
	.charity #Section_02{
		padding: 110px 20px 0 20px;
		max-width: 100%;
		box-sizing: border-box;
		}
}

@media screen and (max-width:767px){
	.charity #Section_02{	
		margin-bottom: 0;
		}
	.charity #Section_02 article h3{
		padding: 20px 15px 20px 0;
		}	
	/*	
	.charity #Section_02 article h3 a{
		padding: 20px 15px 20px 0;
		}	
	*/
	.charity #Section_02 header p {
		padding-top: 5px;
		}
	.charity #Section_02 header p strong {
		font: 20px/21px "FuturaBT-Medium", Arial;
		}		
		
}