html,body{
	margin:0;padding:0;
	font-family: "Microsoft JhengHei", "微軟正黑體","Calibri",Helvetica,sans-serif;
	font-size:14px;
	line-height:18px;
	height:100%;
	
}

body{
	    position: relative;
}
a{
	color: #337ab7;
}
a:focus, a:hover{
	color: #337ab7;
	opacity:0.8;
}
a:hover{
	text-decoration:none;
}
.row, .container{
	margin:0px;
	padding:0px;
}



.col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1,
.col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, 
.col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1,
.col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1{
	padding:0px;
}

.container{
	margin:auto;
	max-width: 100%;
	
}
@media(max-width:767px){
	.container{
		margin:auto;
		max-width: 450px;
	}
}
input{
	outline:none;
}



/*header*/	
	header{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100px;
		z-index:1000;
	}
	@media(min-width:768px){
		header{
			height:160px;
		}
	}
	@media(max-width:767px){
		/*header{
			height:100%;
		}*/
	}
	
	header .logo{
		float:left;
		padding:10px;
		height:100px;
	}
	header .logo img{
		height:100%;
	}
	@media(min-width:768px){
		header .logo{
			padding:20px;
			height:160px;
		}
		header .logo img{
			height:100%;
		}
		
		
		
		
	}
	.headerpadding{
		padding-top:120px;
	}
	
	@media(min-width:768px){
		.headerpadding{
			padding-top:150px;
		}
	}
	
	
	
	
	
	header #header_search{
		line-height:45px;
		float: left;
		margin-right: 20px;
	}
	#header_search_input{
		height:35px;
		margin-top:7.5px;
		border-radius:40px;
		background-image:url('../images/general/icon_search.png');
		background-position:10px center;
		background-repeat:no-repeat;
		border:none;
		/* width:30px; */
		padding-left:30px;
		background-color:transparent;
		box-shadow:none;

		border:1px solid #EEE;
		width:150px;
		background-color:#FFF;
	}
	#header_search_input:focus{
		
	}
	@media(min-width:992px){
		#header_search_input{
			width:180px;
		}
	}
	@media(min-width:1200px){
		#header_search_input{
			width:200px;
		}
	}
	
	
	header .top_header{
		padding:10px;
	}
	header .top_header .header_media_icon_item{
		line-height:45px;
		float: left;
		margin-right: 20px;
		width:30px;
		height:30px;
	}
	header .top_header .header_lang_icon_item:hover{
		opacity:0.8;
	}
	header .top_header .header_lang_icon_item{
		line-height: 30px;
		cursor:pointer;
		float: left;
		margin-right: 10px;
		margin-top:7.5px;
		width:30px;
		height:30px;
		text-align:center;
	}
	header .top_header .header_lang_icon_item.active{
		color: #FFF;
		border-radius:50%;
		background-color: #644b3c;
	}
	
	
	header .page_header{
		padding:10px;
	}
	header .nav_menu_item{
		
		padding:5px 3vmin;
		float:left;
		
		color:#644b3c;
		position:relative;
	}
	
	header .nav_menu_item a{
		color:#644b3c;
		font-weight:bold;
	}
	header .nav_menu_item.active>a{
		border-bottom:4px solid #644b3c;
		padding: 5px 15px;
	}
	header .nav_menu_item:last-child{
		
	}
	header .nav_menu_item:hover{
		cursor:pointer;
		opacity:0.9;
		
	}

	header .nav_menu_item .submenu {
		opacity:0;
		position: absolute;
		width: 120%;
		
		top: 120%;
		border: none;
		left: -10%;
		

		transition:all 300ms ease;
	}
	header .nav_menu_item:hover .submenu {
		opacity:1;
	}
	header .nav_menu_item .submenu a {
		display: block;
		padding: 10px;
		text-align: center;
		font-weight: bold;
		color:#333;
		background-color: #FFF;
	}
	header .nav_menu_item .submenu a:hover{
		background-color:#dcdcdc;
	}
	header .nav_menu_item .submenu a:first-child{
		border-top-left-radius:10px;
		border-top-right-radius:10px;
		
	}
	header .nav_menu_item .submenu a:last-child{
		border-bottom-left-radius:10px;
		border-bottom-right-radius:10px;
	}


	.mobile-nav-menu{
		margin:10px 0px;
	}
	.mobile-nav-menu-btn{
		float:left;
		width:25px;
		margin:20px 20px 20px 10px;
	}
	.mobile-nav-menu-btn>div{
		border-bottom:2.25px solid #333;
		margin-bottom:6px;
	}
	
	.mobile-nav-menu-btn>div:last-child{
		margin-bottom:0px;
	}

	.mobile-donate-btn{
		float:left;
		width:35px;
		margin:12px 10px 12px 10px;
	}


	
/*header*/

/*homepage*/

	.flexslider.homepage_banner.bannerSlider{
		min-height:200px;
	}

	@media(min-width:768px){
		.flexslider.homepage_banner.bannerSlider{
			margin-bottom:20px;
			min-height:400px;
		}
		.flexslider.information_banner.infoSlider{
			margin-bottom:20px;
		}
	}
	
	#homepage_takeActionContainer{
		max-width:360px;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:20px;
	}
	@media(min-width:768px){
		#homepage_takeActionContainer{
			max-width:750px;
		}
	}
	
	.takeAction_item{
		text-align:center;
		height:calc( 360px / 2); 
		padding:20px 10px;
		opacity:1;
		cursor:pointer;
	}
	
	@media(min-width:768px){
		.takeAction_item{
			opacity:0.85;
		}
		.takeAction_item:hover{
			opacity:1;
		}
		.takeAction_item :hover .image,
		.takeAction_item :hover .title{
			transform:scale(1.1);
		}
		.takeAction_item{
			height:calc( 750px / 4); 
			
			padding:calc( ((750px / 4) - 130px) / 2 ) 0px calc( ((750px / 4) - 130px) / 2 ) 0px;
		}
	}
	/* 
	 and (max-width:991px)
	@media(min-width:992px) and (max-width:1199px){
		
		.takeAction_item{
			height:calc( 970px / 4); 
			padding:calc( ((970px / 4) - 130px) / 2 ) 0px calc( ((970px / 4) - 130px) / 2 ) 0px;
		}
	}
	
	@media(min-width:1200px){
		
		.takeAction_item{
			height:calc( 1000px / 4); 
			padding:calc( ((1000px / 4) - 130px) / 2 ) 0px calc( ((1000px / 4) - 130px) / 2 ) 0px;
		}
	} */
	
	.takeAction_item .banner-subtitle{
		color:#FFF;
		font-size:20px;
		font-weight:bold;
	}
	.takeAction_item .image{
		margin-bottom:10px;
	}
	.takeAction_item .image img{
		width:100%;
		max-width:100px;
		
	}
	
	#takeAction_donate{
		background-color:#58a333;
	}
	#takeAction_beavolunteer{
		background-color:#76b82a;
	}
	#takeAction_partner{
		background-color:#644b3c;
	}
	#takeAction_email{
		background-color:#a56a46;
	}
	
	
	#homepage_news{
		background-color:#f3f3f7;
		background-image:url(../images/general/homepage_news_bottom.png);
		background-position:bottom;
		background-size:100%;
		background-repeat:no-repeat;
		padding-top:45px;
		padding-bottom:120px;
	
	}
	
	@media(max-width:767px){
		#homepage_news .container{
			max-width:365px;
			margin-left:auto;
			margin-right:auto;
		}
	}
	
	@media(min-width:768px){
		#homepage_news .container{
			max-width:1000px;
			margin-left:auto;
			margin-right:auto;
		}
	}
	
	
	#homepage_news .page-title{
		margin-bottom:15px;
	}
	
	@media(min-width:768px){
		#homepage_news>.container>.content>div:first-child {
			padding-right: 10px;
		}
		#homepage_news>.container>.content>div:last-child{
			padding-left:10px;
		}
	}
	
	
	#homepage_news .article_items_big .article-item .image{
		height:0px;
		padding-bottom:76.7%;
	}
	#homepage_news .article_items_small .article-item .image{
		height:0px;
		padding-bottom:81.15%;
	}
	@media(min-width:768px){
		#homepage_news .article_items_small>div:first-child .article-item{
			margin-right:10px;
			width:calc(100% - 10px);
		}
		#homepage_news .article_items_small>div:last-child .article-item{
			margin-left:10px;
			width:calc(100% - 10px);
		}
	}
	
	#homepage_news .btnContainer{
		margin:40px 0px;text-align:center;
	}
	
	
	#homepage_projects{
		padding-top:45px;
		padding-bottom:80px;
	}
	@media(min-width:768px){
		#homepage_projects .container{
			max-width:1000px;
			margin-left:auto;
			margin-right:auto;
		}
	}
	
	#homepage_projects .page-title{
		margin-bottom:15px;
	}
	#homepage_projects .project-item {
		margin-bottom:20px;
	}
	
	
	#homepage_projects .project-item{
		display:block;
		margin-bottom:20px;
		cursor:pointer;
	}
	#homepage_projects .project-item img{
		width:100%;
	}
/*homepage*/


/*global*/
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #3b1b06;
}
.form-control::-moz-placeholder { /* Firefox 19+ */
  color: #3b1b06;
}
.form-control:-ms-input-placeholder { /* IE 10+ */
  color: #3b1b06;
}
.form-control:-moz-placeholder { /* Firefox 18- */
  color: #3b1b06;
}

.form-control{

	background: none;
    border-radius: 4px;
    border-color: #3b1b06;
}



.fancybox-enabled body {
    overflow: visible;
    height: 100%;
}
[data-fancybox]{
	outline:none;
}


.pageContentWrapper{
	background:#f4f3f9;
	padding-bottom:60px;
}

@media(min-width:768px){
	.pageContentWrapper{
		
		padding-bottom:80px;
	}	
	
	.pageContentWrapper>.container{
		 max-width:1000px;
		 
	}
}
.transitionAll{
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.imageAsBackground{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
.sectionWrapper{
	padding:0px 10px;
}

@media(min-width:768px){
	.sectionWrapper{
		padding:0px 0px;
		
	}
}


.button{
	padding:8px 30px;
	min-width:160px;
	text-align:center;
	display:inline-block;
	color:#FFF;
	background-color:#644b3c;
	border:1px solid #644b3c;
	font-weight:bold;
	background-image:url(../images/general/btn_arrow.png);
	background-position: 90% center;
	background-repeat:no-repeat;
	font-size:16px;
	cursor:pointer;
}

.button.long{
	width:100%;
}
.button.tall{
	padding-top: 12.5px;
	padding-bottom: 12.5px;
}
.button.noBg{
	background-color:transparent;
	color:#644b3c;
}
.button.white{
	background-color:#FFF;
	border-color:#FFF;
	color:#644b3c;
}

.button.blue{
	background-color:#0175c2;
	border-color:#0175c2;
	color:#FFF;
}

.button.red{
	background-color:#e63357;
	border-color:#e63357;
	color:#FFF;
}

.button.yellow{
	background-color:#ffc40c;
	border-color:#ffc40c;
	color:#FFF;
}
.button.green{
	background-color:#76b82a;
	border-color:#76b82a;
	color:#FFF;
}
.button.no_arrow{
	background-image: none;
}


.button.rounded{
	border-radius:4px;
}
.button:hover{
	opacity:0.8;
}


.section-title-hr{
	background-image:url(../images/general/hr-line.png);
	background-repeat:no-repeat;
	max-width:300px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 25px;
	margin-top: 0px;
	border:none;
	height:42px;
	background-position: center;
}
.section-title-hr.blue,
.section-title-hr.medic{
	background-image:url(../images/general/hr-line-blue.png);
}

.section-title-hr.green,
.section-title-hr.education{
	background-image:url(../images/general/hr-line-green.png);
}

.section-title-hr.red,
.section-title-hr.policy{
	background-image:url(../images/general/hr-line-red.png);
}

.section-title-hr.yellow,
.section-title-hr.promo{
	background-image:url(../images/general/hr-line-yellow.png);
}
.flexslider{
	border:none;
}
.flex-direction-nav a{width:15px;height:29px;}
@media(min-width:768px){
	.flex-direction-nav a{width:20px;height:38px;}
}

.flex-direction-nav a img{width:100%;}
.flex-direction-nav a.flex-next:before,
.flex-direction-nav a.flex-prev:before{content:""!important}
.flex-control-nav,
.flex-direction-nav,
.slides,
.slides>li{z-index:100}
.flex-control-paging li a.flex-active{
	background-color:#DDD;
	border:1px solid #DDD;
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
.flex-control-paging li a{
	background-color:transparent;
	border:1px solid #DDD;
	-webkit-box-shadow: inset 0 0 3px rgba(255,255,255,.3);
    -moz-box-shadow: inset 0 0 3px rgba(255,255,255,.3);
    -o-box-shadow: inset 0 0 3px rgba(255,255,255,.3);
    box-shadow: inset 0 0 3px rgba(255,255,255,.3);
}
.flex-control-paging li a:hover {
    background: #EEE;
    background: rgba(255,255,255,.9);
}

@media(min-width:768px){
	.flex-control-nav{
		bottom:20px;
	}
}
.flex-control-paging li a {
    width: 14px;
    height: 14px;
}

.flex-direction-nav .flex-prev{
	left:5px;
}
.flex-direction-nav .flex-next{
	right:5px;
}

.flexslider.bannerSlider .banner_bg{
	width:100%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	height:0px;
	padding-bottom:calc(100% * (720 / 1600) );
}

.flexslider.bannerSlider .banner_bg_m{
	width:100%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	height:75vh;
}

/* banner slider*/
.bannerSlider_item{
	position:relative;
}

.bannerSlider_item .content{
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	
}
.bannerSlider_item .content>div{
	height:100%;
	width:100%;
	display:table;
}
.bannerSlider_item .content>div>div{
	height:100%;
	width:100%;
	display:table-cell;
	vertical-align:bottom;
	padding:4%;
}

.bannerSlider_item .content .title{
	color:#FFF;
	
}

.bannerSlider_item .content .desc{
	color:#FFF;
	margin-bottom:3vmin;
}
/* banner slider*/

/* info Slider */
	@media(min-width:768px){
		
		#infoSliderContainer{
			max-width:1000px;
		}
	}
	
	
	.infoSlider_item{
		position:relative;
		overflow:hidden;
	
	}
	
	.infoSlider_item .image img{
		padding:2px /*prevent the photo being out of the white area*/
	}
	
	.infoSlider_item:hover .image{
		transform:scale(1.1);
	}
	.infoSlider_item .content{
		position:absolute;
		width:100%;
		height:80px;
		left:0px;
		bottom:0px;
		background-color:rgba(255,255,255,0.8);
	}
	.infoSlider_item .content>div{
		height:100%;
		width:100%;
		display:table;
	}
	.infoSlider_item .content>div>div{
		height:100%;
		width:100%;
		display:table-cell;
		vertical-align: middle;
		padding: 15px;
	}
	.infoSlider_item .content .category{
		font-weight:bold;
	}
	.infoSlider_item .content .title{
		font-weight:bold;
	}
	.infoSlider_item .content .btnContainer{
		position: absolute;
		right: 0;
		top: 22px;
		right: 10px;
	}
	
	

/* info slider*/
/* article-item*/

	.article-item{
		margin-bottom:20px;
		
		position:relative;
		
	}
	/*
	.article-item:after{
		content:" ";
		width:36px;
		height:36px;
		position:absolute;
		right:0px;
		bottom:0px;
		display:block;
		background-image:url(../images/general/btn_arrow.png);
		background-position: 90% center;
		background-repeat:no-repeat;
		
	    
	}
	.article-item.educationLabel:after{
		border-right: 20px solid #76b82a;
		border-bottom: 20px solid #76b82a;
		border-top: 20px solid transparent;
		border-left: 20px solid transparent;
	}
	*/
	
	.article-item .moreBtn{
		display:block; 
		cursor:pointer;
		background-position: right bottom;
		background-repeat:no-repeat;
		background-size:40px 40px;
		
		height: 40px;
		width: 40px;
		position: absolute;
		right: 0px;
		bottom: 0px;
		
	}
	.article-item.education .moreBtn{
		background-image:url(../images/general/label_education.png);
	}
	.article-item.medic .moreBtn{
		background-image:url(../images/general/label_medic.png);
	}
	.article-item.policy .moreBtn{
		background-image:url(../images/general/label_policy.png);
	}
	.article-item.promo .moreBtn{
		background-image:url(../images/general/label_promo.png);
	}
	
	.article-item .content{
		height:80px;
		background-color: rgba(255,255,255,0.8);
		width:100%;
		display:table;
	}
	.article-item .content>div{
		display:table-cell;
		vertical-align:middle;
		width:100%;
		height:100%;
		padding:10px 20px;
	}
	.article-item .title{
		font-weight:bold;
		/* text-align:center; */
	}
	
	.videoOverlay{
		position:relative;
	}
	
	.videoOverlay:after{
		content: " ";
		width:100%;
		height:100%;
		background-color:rgba(0,0,0,0.5);
		position:absolute;
		top:0px;
		left:0px;
		
		background-image: url('../images/general/overlay_playbtn.png');
		background-position:center;
		background-size:50px 50px;
		background-repeat:no-repeat;
		-webkit-transition: all 300ms ease-in-out;
		-moz-transition: all 300ms ease-in-out;
		-o-transition: all 300ms ease-in-out;
		transition: all 300ms ease-in-out;
		cursor:pointer;
	}
	.videoOverlay:hover:after{
		background-size:60px 60px;
	}
	
	
	@media(min-width:768px){
		.article-item-container:nth-child(3n+1){
			padding-right: calc(20px / 3 * 2);
			padding-left: 	0px;
		}
		
		.article-item-container:nth-child(3n+2){
			padding-right: calc(20px / 3 * 1);
			padding-left:  calc(20px / 3 * 1);
		}
		
		.article-item-container:nth-child(3n+3){
			padding-right: 0px;
			padding-left: 	 calc(20px / 3 * 2);
		}
	}
	.article-item.listing{
		background-color:#FFF;
	}
	
	.article-item.listing .image{
		padding-bottom:75%;
	}
	.article-item.listing .title{
		height:80px;
		padding:20px 20px 0px 20px;
	}
	.article-item.listing .title a {
		color: #333;
	}
	.article-item.listing .subtitle{
		font-weight:100;
		padding:0px;
	}
	.article-item.listing .caption{
		height:80px;
		padding:20px 20px;
		/* text-align:center; */
	}
	
	.article-item.listing .moreBtn{
		background-size: 50px 50px;
		height: 50px;
		width: 50px;
	}
	@media(min-width:768px){
		.article-item.listing .moreBtn{
			background-size: 60px 60px;
			height: 60px;
			width: 60px;
		}	
	}
	
	@media(min-width:768px){
		.article-listing{
		
		}	
	}
	.article-listing .btnContainer{
		margin:20px 0px 40px 0px;
		text-align:center;
	}
	
	
	.article-listing .section-title{
		color:#0175c2;
	}
	
	
	
/* article-item*/
/*volunteer*/
	.volunteer-form-detail{
		background-color:#FFF;
		padding: 15px 20px 15px 20px;
	}
	
	.form-item-row{
		padding:0px 0px;
		margin-bottom:10px;
	}
	@media(max-width:767px){
		.form-item-row>div:not(.errorMsg){
			padding:0px 0px;
		}
	}
	@media(min-width:768px){
		.form-item-row{
			border-top:2px dashed #0175c2;
			margin-bottom:0px;
		}
		.form-item-row>div{
			padding:20px 40px;
		}
		.form-item-row>div:first-child,
		.form-item-row .colorBg{
			background-color:#fef9e6;
		}
	}
	
	.form-item-row>div.noBg{
		background-color:transparent;
	}


	.form-item-row .inputLabel{
		
		display: block;
		font-weight:bold;
		margin:0px;
		outline:none;
		cursor:pointer;
	}

	.errorMsg, .inputLabel.errorMsg{
		color:red;
		font-size:12px;
		display:none;
	}

	@media(min-width:768px){
		.form-item-row .inputLabel{
			line-height:34px;  /**/
			text-align:left;
		}

		.errorMsg{
			color:red;
			
		}
		.errorMsg.noTopPadding{
			padding-top: 0px;
		}
	}

	.form-control[type="checkbox"]{
		-webkit-appearance: none;
		width: 15px;
		height: 15px;
		vertical-align: middle;
		
		border-radius: 100%;
		display: inline-block;
		margin: 0px 10px 0px 0px;
		outline:none;
		cursor:pointer;
	}
	.form-control[type="checkbox"]:focus {
		outline: none;	
		border-color:#644b3c;
	}
	
	.form-control[type="checkbox"]:checked{
		border-width:5px;
	}
	
	table.volunteer_timeslot{
		border:none;
		
	}
	table.volunteer_timeslot td, 
	table.volunteer_timeslot th{
		text-align:center;
		vertical-align:middle;
	}
	.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
		vertical-align:middle;
	}
	table.volunteer_timeslot td label{
		display:block;
		cursor:pointer;
	}

/*volunteer*/
/* content */

	.page-content-item{
		margin-bottom:20px;
	}

	.page-content-item-title{
		margin-bottom:40px;
		border-left:8px solid #CCC;
		padding-left:20px;
		padding:15px 20px 15px 20px;;
		background-color:#FFF;
		color:#0175c1;
		border-color:#0175c1;
	}
	
	.page-content-item-title .subtitle{
		display:inline-block;
		font-size:15px;
	}
	
	@media(min-width:768px){
				
		.page-content-item-title .subtitle{
			margin-left:20px;
		}
	}
	
	
	.page-content-item.promo .page-content-item-title{
		color:#ffc40c;
		border-color:#ffc40c;
	}
	
	.page-content-item.medic .page-content-item-title{
		color:#0175c1;
		border-color:#0175c1;
	}
	
	.page-content-item.policy .page-content-item-title{
		color:#e63357;
		border-color:#e63357;
	}
	
	.page-content-item.education .page-content-item-title{
		color:#76b82a;
		border-color:#76b82a;
	}
	

	
	.page-content-item.promo .page-content-item-detail a{
		color:#ffc40c;
	}

	
	.page-content-item.medic .page-content-item-detail a{
		color:#0175c1;
	}

	
	.page-content-item.policy .page-content-item-detail a{
		color:#e63357;
	}

	.page-content-item.education .page-content-item-detail a{
		color:#76b82a;
	}
	
	.page-content-item-detail{
		
		color:#644b3c;
		text-align:justify;
		margin-bottom:40px;
	}
		
	.page-content-item-detail img{
		max-width:100%;
		margin-left:auto;
		margin-right:auto;
		margin-top:0px;
		margin-bottom:0px;
		
	}
	@media(min-width:768px){
		.page-content-item-detail img{
			
		}
	}
	
	.page-content-item-detail .right_padding{
		padding:0px;
	}
	@media(min-width:768px){
		.page-content-item-detail .right_padding{
			padding-right:20px;
		}
	}

	.page-content-item-detail .left_padding{
		padding:0px;
	}
	@media(min-width:768px){
		.page-content-item-detail .left_padding{
			padding-left:20px;
		}
	}
	
	.page-content-item-detail .bottom_margin{
		margin-bottom:20px;
	}
	@media(min-width:768px){
		.page-content-item-detail .bottom_margin{
			margin-bottom:20px;
		}
	}


/* content */



/* donation method list*/
	.donation-method-list{
		margin-bottom:20px;
	}
	.donation-method-list .image{
		background-color:#FFF;
		position:relative;
	}
	
	
	.overlayText{
		position:absolute;
		bottom:0px;
		width:100%;
		height:auto;
		color:#FFF;
		font-weight:bold;
		/*change font-size:18px;*/
		font-size:16px;
		text-align:center;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&0+1,0.2+24,0.85+100 */
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 1%, rgba(0,0,0,0.2) 24%, rgba(0,0,0,0.85) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 1%,rgba(0,0,0,0.2) 24%,rgba(0,0,0,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0,0,0,0) 1%,rgba(0,0,0,0.2) 24%,rgba(0,0,0,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000',GradientType=0 ); /* IE6-9 */
		padding:16px 0px;
	}
	
	
	@media(min-width:768px){

		.donation-method-list .image.left .overlayText {
			width: calc(100% - 20px / 3 * 2);
			left: 0px;
		}


		.donation-method-list .image.right .overlayText {
			width: calc(100% - 20px / 3 * 2);
			left: calc(20px / 3 * 2);
		}

		.donation-method-list .image.mid .overlayText {
			width: calc(100% - 20px / 3 * 2);
			left: calc(20px / 3 * 1);
		}
	}
	
	@media(min-width:768px){
		.donation-method-list .image.left{
			padding-right:calc(20px / 3 * 2);
			background:transparent;
		}
		.donation-method-list .image.mid{
			padding-right:calc(20px / 3);
			padding-left:calc(20px / 3);
			
			background:transparent;
		}
		.donation-method-list .image.right{
			padding-left:calc(20px / 3 * 2);
			background:transparent;
		}
	}
	.payment-method{
		
	}

	.other_donation_item{
		margin-bottom:20px;
	}
	.other_donation_item:nth-child(2n+1){
		padding-left: 0px;
		padding-right:calc(20px / 2);
	}

	.other_donation_item:nth-child(2n+2){
		padding-left: calc(20px / 2);
		padding-right:0px;
	}
	@media(min-width:768px){
		.other_donation_item:nth-child(4n+1){
			padding-left: 0px;
			padding-right:calc(20px / 3 * 2);
		}

		.other_donation_item:nth-child(4n+2){
			padding-left: calc(20px / 3 );
			padding-right:calc(20px / 2);
		}
		.other_donation_item:nth-child(4n+3){
			padding-left: calc(20px / 2);
			padding-right:calc(20px / 3);
		}

		.other_donation_item:nth-child(4n+4){
			padding-left:calc(20px / 3 * 2);
			padding-right: 0px;
		}
	}
/* donation method list*/

/* footer */
	footer#footer{
		background-color:#fffbe8;
		position:relative;
		color:#3b1b06;
		padding:40px 20px; 
	}
	@media(min-width:768px){
		footer#footer {
			margin-top:160px;
			padding:40px; 
		}
	}
	@media(min-width:768px){
		footer .container{
			/*max-width:750px;*/
		}
	}
	footer .container>div{
		margin-bottom:20px;
	}
	footer #footer_img{
		position:absolute;
		bottom:100%;
		left:0px;
	}
	
	.backToTopBtn{
		position:absolute;
		bottom: calc(100% - 20px);
		left: calc(50% - 20px);
		width:40px;
		height:40px;
		cursor:pointer;
	}
	
	.backToTopBtn:hover{
		transform:scale(1.1);
		opacity:0.8;
	}
	
	.footer_menu a{
		display:inline-block;
		margin-right:10px;
		color:#3b1b06;

		text-align:center;
		
	}
	.footer_menu:last-child a{
		margin-right:0px;
	}
	
	#subscribeEmailInput{
		background:none;
		border-radius:4px;
		border-color:#3b1b06;
		margin-bottom:8px;
	}
	#subscribeEmailInput + .button{
		border-radius:4px;
	}
	
	.footer_media_icon_item{
		float:left;
		margin-right:20px;
	}
	.footer_media_icon_item img{
		width:100%;
	}
	@media(min-width:768px){
		.footer_logos{
			position:absolute;
			bottom:0px;
			right:0px;
		}
	}
	
/* footer */


/*font-size*/
	.banner-title{
		font-size: 20px;
		line-height: 24px;
	}
	@media(min-width:450px){
		.banner-title{
			font-size: 22px;
			line-height: 32px;
		}
	}
	@media(min-width:768px){
		.banner-title{
			font-size: 36px;
			line-height: 45px;
		}
	}
	
	.banner-subtitle{
		font-size: 15px;
		line-height: 18px;
	}
	@media(min-width:450px){
		.banner-subtitle{
			font-size: 18px;
			line-height: 24px;
		}
	}
	@media(min-width:768px){
		.banner-subtitle{
			font-size: 20px;
			line-height: 24px;
		}
	}
	
	
	.banner-desc{
		font-size: 14px;
		line-height: 16px;
	}
	@media(min-width:450px){
		.banner-desc{
			font-size: 15px;
			line-height: 20px;
	
		}
	}
	@media(min-width:768px){
		.banner-desc{
			font-size: 16px;
			line-height: 20px;
		}
	}
	
	
	.section-title{
		padding-top:45px;
		
		
		font-weight:bold;
		text-align:center;
		
		font-size: 28px;
		line-height: 28px;
		letter-spacing:1px;
		
	}
	
	.section-title.blue,
	.section-title.medic{
		color:#0175c1;
	}

	.section-title.green,
	.section-title.education{
		color:#76b82a;
	}

	.section-title.red,
	.section-title.policy{
		color:#e63357;
	}

	.section-title.yellow,
	.section-title.promo{
		color:#ffc40c;
	}
	

	.section-subtitle{

		text-align:center;
		
		font-size: 20px;
		line-height: 28px;
		letter-spacing:1px;
		margin-bottom:20px;
	}
	
	
	@media(min-width:450px){
		.section-title{
			font-size: 30px;
			line-height:  30px;
		}
	}
	@media(min-width:768px){
		.section-title{
			/*change font-size: 30px;*/
			font-size: 23px;
			line-height:  30px;
			letter-spacing:2px;
		}
	}
	

	.page-content-item-title{
		font-weight:bold;
		
		font-size: 20px;
		line-height: 26px;
		letter-spacing:1px;
		
	}
	@media(min-width:450px){
		.page-content-item-title{
			font-size: 22px;
			line-height:  28px;
		}
	}
	@media(min-width:768px){
		.page-content-item-title{
			font-size: 20px;
			line-height: 24px;
			letter-spacing:2px;
		}
	}
	
	
	.page-title{
		font-weight:bold;
		text-align:center;
		
		font-size: 32px;
		line-height: 60px;
		letter-spacing:1px;
	}
	@media(min-width:450px){
		.page-title{
			font-size: 35px;
			line-height: 70px;
		}
	}
	@media(min-width:768px){
		.page-title{
			font-size: 36px;
			line-height: 80px;
			letter-spacing:2px;
		}
	}
	
	
	
	.article-item.listing .title{
		
		font-size: 16px;
		line-height: 24px;
	}
	@media(min-width:450px){
		.article-item.listing .title{
			font-size: 22px;
			line-height: 32px;
		}
	}
	
	@media(min-width:768px){
		.article-item.listing .title{
			font-size: 16px;
			line-height: 24px;
			
		}
	}
	
	
	.article-item.listing .subtitle{
		font-size: 15px;
		line-height: 20px;
		
	}
	
	.page-content-item-detail{
		line-height:25px;
		font-size:14px;
		letter-spacing:0.75px;
		color:#644b3c
	}
	@media(min-width:768px){
		.page-content-item-detail{
		
			letter-spacing:1px;
			
		}
	}
	
	
/*font-size*/

/*breadcrumb*/
	.breadcrumb{
		background:transparent;
		padding-top:20px;
		padding-bottom:20px;
		padding-left:0px;
		padding-right:0px;
		margin-bottom: 0px;
	}
	@media(min-width:768px){
		.breadcrumb{
			padding-left:0px;
			padding-right:0px;
			
		}
	}
	.breadcrumb>.active{
		color:#000;
	}
	.breadcrumb>li:not(.active) a{
		color:#337ab7;
	}
	
	.breadcrumb>li+li:before {
		padding: 0 5px;
		color: #000;
		content: ">";
	}
/*breadcrumb*/



#mobile_menu{
	left:0px;
	width:100%;
	position:fixed;
	top:-100%;
	background-color:#5b3f31;
	z-index:10000;
    transition: all 400ms ease;
	max-height: 90vh;
    overflow: scroll;
}
#mobile_menu.active{
	top:0px;
}
#mobile_menu .top_category_menu{
	cursor:pointer;
	display:block;
	position:relative;
}

.header-img{
	position:absolute;right:20px;
}

#mobile_menu .top_category_menu.active{
	background-color:#83533c;

}
#mobile_menu .top_category_menu.active + .sub_menu .font-normal{
	background-color:#684736;
}


#mobile_menu .sub_menu { 
   padding:0px !important;
   display:none;
}

.font-normal a{
	color:#fff;
}

#mobile_menu .menu_container{
	padding:50px 0px;
}

#mobile_menu .content{ 
   text-align:center;
}


#mobile_menu .menu_container>a{
	color:#FFF;
	width: 100%;
	text-align:center;
	padding:18px;
	font-size:16px;
	font-weight:bold;
}
#mobile_menu .menu_container>a:hover{
	opacity:0.8;
}

#mobile_menu .logo{
	position:absolute;
	top:10px;
	left:10px;
}

#mobile_menu .closeBtn{
	position:absolute;
	top: 20px;
	right:20px;
	cursor:pointer;
}
#mobile_menu .search_mobile{
	display:inline-block;
	width:120px;
	
	
	position: relative;
	
}
#mobile_menu .search_mobile::before{
	content: " ";
	width:18px;
	height:18px;
	background-image:url(../images/icon_search.png);
	background-position:left center;
	background-repeat:no-repeat;
	background-size: 18px 18px;
	display:block;
	position:absolute;
	right:100%;
}
#mobile_menu .search_mobile>input{
	background-color:transparent;
	position:relative;
	border:none;
	padding:0px 10px 0px 10px;
	width:100%;
	color:#FFF;
	text-align: center;
	
}
#mobile_menu .header_lang_icon_item,
#mobile_menu .header_media_icon_item{
	display:inline-block;
	padding:5px;
	margin:5px 5px;
}
#mobile_menu .header_lang_icon_item a{

	display:block;
	width:30px;
	height:30px;
	text-align:center;
	color:#FFF;
	line-height:30px;
}
#mobile_menu .header_lang_icon_item.active a{
	background-color:#FFF;
	color:#5b3f31;
	font-weight:bold;
	border-radius:100%;
}

#header_botton_icons{
	text-align: center;
    width: 100%;
}

.report_item{
	margin-bottom:30px;
}
.report_item .image{
	text-align:center;
	margin-bottom:15px;
}
.report_item .image img{
	width:100px;
}


.report_item .name{
	text-align:center;

}
.report_item .name a{
	
	color:#644b3c;
}


.left-padding{
		padding-right:0px;
}
.right-padding{
		padding-left:0px;
}
.icon_item{
	     float: none;
         margin-right: 20px;
		 display:inline-block;
		 width:35px;
}
.col-lg-12.col-md-12.col-sm-12.col-xs-12.center-icon{
	text-align:center;
	margin-top:30px;
}
@media(min-width:768px){
	.report_item .name{
		height:40px;
	}
    .left-padding{
		padding-right:10px;
	}
	.right-padding{
		padding-left:10px;
	}
	.icon_item{
	     float: left;
         margin-right: 20px;
    }
}
div.font-normal{
	color: #FFF;
    display: block;
    text-align: center;
    padding:15px 0px;
    font-size: 16px;
	font-weight:normal;
}



div.form-input-name{
	padding-left:5px;
	padding-bottom:5px;
}



.row-margin{
		margin-top:30px;
}
.send_button{
		padding: 8px 10px;
		min-width: 160px;
		text-align: center;
		display: inline-block;
		color: #FFF;
		background-color: #75b916;
		border: 1px solid #75b916;
		font-weight: bold;
		background-image: url(../images/general/btn_arrow.png);
		background-position: 90% center;
		background-repeat: no-repeat;
		font-size: 16px;
		cursor: pointer;

}
	
.error_msg{
		color:red;
		padding-left:5px;
		padding-top:0px;
		font-size:12px;
		display:block;
		opacity:0;
		margin-bottom:5px;
}

a.sub-title-a{
	color:#fff;
	display: block;
    height: inherit;
	
}
a.sub-title-a:hover{
	color:#fff;
	display:inline-block;
}


.position-icon{
	height: 30px;
    background-image: url('../images/menu_down_icon.png');
    background-repeat: no-repeat;
    background-position:center right;
    transition: all 300ms ease;
    transform: rotate(0deg);
}
 
/*.header-img.active{
	background-image: url('../images/menu_down_icon.png');
	transition: all 300ms ease;
    transform: rotate(180deg);
}*/

.sub_menu a{
	cursor:pointer;
}
 
.top_category_menu.active img{
	background-image: url('../images/menu_down_icon.png');
	transition: all 300ms ease;
    transform: rotate(180deg);
}


.fullwidth-input{
	width:100%;
}

.donation_table{
	margin:auto;
	width:360px;
	
}			

.donation_table input,
.donation_table select{
	margin-bottom:15px;
	width:100%;
	padding:5px;
}
.donation_button{
	text-align:center;
	
	max-width:360px;
}
.donation_button input[type='image']{
	width:100%;
	max-width:200px;
}


#header_ani_m{

	padding-bottom:  calc(100% * 174 / 768);
	display: table;
	width:100%;
	background-image:url('../images/header_m_odd.png');
	background-size: 4200% 100%;
	animation: header-play 3s steps(42) infinite;

}
@keyframes  header-play {
	from	{ background-position:    0px; }
	to		{ background-position: -4200%; }
}


@media(min-width:768px){
	
	#header_ani{

		padding-bottom:  calc(100% * 174 / 1730);
		display: table;
		width:100%;
		background-image:url('../images/header_odd.png');
		background-size: 4200% 100%;
		animation: header-play 3s steps(42) infinite;

	}

}

	
	
	
/*to be changed*/
/*.header_lang_icon_item{
	display:none !important;
}*/