@charset "utf-8";
/* CSS Document */


@font-face {
    font-family: 'steelfishregular';
    src: url('../fonts/steelfish_rg-webfont.eot');
    src: url('../fonts/steelfish_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/steelfish_rg-webfont.woff2') format('woff2'),
         url('../fonts/steelfish_rg-webfont.woff') format('woff'),
         url('../fonts/steelfish_rg-webfont.ttf') format('truetype'),
         url('../fonts/steelfish_rg-webfont.svg#steelfishregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bebasregular';
    src: url('../fonts/bebas__-webfont.eot');
    src: url('../fonts/bebas__-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas__-webfont.woff2') format('woff2'),
         url('../fonts/bebas__-webfont.woff') format('woff'),
         url('../fonts/bebas__-webfont.ttf') format('truetype'),
         url('../fonts/bebas__-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'libel_suitregular';
    src: url('../fonts/libelsuit-webfont.eot');
    src: url('../fonts/libelsuit-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/libelsuit-webfont.woff2') format('woff2'),
         url('../fonts/libelsuit-webfont.woff') format('woff'),
         url('../fonts/libelsuit-webfont.ttf') format('truetype'),
         url('../fonts/libelsuit-webfont.svg#libel_suitregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'ITCAvantGardeStd-Demi';
	src: url('../fonts/ITCAvantGardeStd-Demi.eot');
	src: local('☺'), 
	url('../fonts/ITCAvantGardeStd-Demi.woff') format('woff'), 
	url('../fonts//ITCAvantGardeStd-Demi.ttf') format('truetype'), 
	url('../fonts//ITCAvantGardeStd-Demi.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'bankgothic_md_btmedium';
    src: url('../fonts/bankgothic_md_bt_medium-webfont.eot');
    src: url('../fonts/bankgothic_md_bt_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bankgothic_md_bt_medium-webfont.woff2') format('woff2'),
         url('../fonts/bankgothic_md_bt_medium-webfont.woff') format('woff'),
         url('../fonts/bankgothic_md_bt_medium-webfont.ttf') format('truetype'),
         url('../fonts/bankgothic_md_bt_medium-webfont.svg#bankgothic_md_btmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

*{margin:0; padding:0; box-sizing: border-box;}

body{ background:#FFF; color:#333333; font:normal 14px "Century Gothic", "trebuchet MS", arial;}
header,section,article,figure,aside,footer,nav{ display:block;}
.clr{ clear:both;}
ul{ list-style:none;margin:0px; padding:0px;  }
figure,img,iframe,video{ max-width:100%; vertical-align:bottom;}
a{text-decoration:none; }
p{margin:5px 0 20px 0; }
textarea{ resize:none;}
.fleft{ float:left;}
.fright{ float:right;}

.aligner{margin:0px auto;max-width:1078px; position:relative;}





header{}
.topbar{ background:#347fbd url(../images/topbg.png); padding:7px 0;}
.mainheader{ background:#e5e5e5 url(../images/header-bg.png) no-repeat center top; padding:3px 0;}
.social{ float:right;}
.social ul li{ float:left; margin:0px 3px;}

.logo{ float:left;}


.navigation{ float:right;font-family: 'libel_suitregular';font-size:21px;padding:105px 0 0 0; text-transform:uppercase;}
#pull{ display:none;}
.sujit-nav{}
.sujit-nav ul li{ float:left; position:relative;}
.sujit-nav ul li a{color:#000000;display:block;padding:8px 15px;}
.sujit-nav ul li a:hover,.sujit-nav ul li:hover a,.sujit-nav ul li.active a,.sujit-nav ul li.current-menu-item a,.sujit-nav ul li.current-menu-parent>a{ background:url(../images/menu-active.png) no-repeat center bottom;}

.sujit-nav ul li ul{ display:none;}
/*.sujit-nav ul li:hover ul{ display:block;}*/

.sujit-nav ul li ul{ left:0;position:absolute; top:48px; width:280px; z-index:999999;}
.sujit-nav ul li ul li{ background:#69b1db; display:block; width:280px;}
.sujit-nav ul li ul li a{ display:block;color:#FFF;}
.sujit-nav ul li ul li a:hover,.sujit-nav ul li ul li.active a,.sujit-nav ul li ul li.current_page_item a{ background:#2b87bd;}

.banner{}
.banner img{ width:100%; height:auto !important;}

.content{ padding:35px 0; min-height:350px;}

h1{color:#69b1db;font-family: 'steelfishregular'; font-size:62px; font-weight:normal; text-transform:uppercase;}
h1 span{color:#89b70a;}
h3{ color:#0c0c0c;font:bold 16px "Century Gothic", "trebuchet MS", arial;}
h4{color:#2a2a2a;font-family: 'ITCAvantGardeStd-Demi'; font-size:17px; font-weight:normal;}

.more a{color:#a3c93a;font-family: 'ITCAvantGardeStd-Demi';}
.more a:hover{color:#347fbd;}

.homeboxes{font-size:13.5px;padding:40px 0 0 0;}
.homeboxes ul li{ float:left; width:32%;}
.homeboxes ul li:nth-child(2){ margin:0px 1%; width:34%;}

.mybox{}
.icon-holder{ float:left; width:21%;}
.box-detail{ float:right;width:79%;}

.intro{ min-height:90px;}
.mybox a{color:#3596a5; font-weight:bold;}
.mybox a:hover{color:#000;}


.contributionbar{ background:#519bce url(../images/topbg.png); padding:15px 0;}
.contribution_txt{ float:left;}
.donation_icon{ float:left; padding:0 15px 0 0;}
.donation_text{color:#FFF; float:left;}
.donation_text h4{color:#FFF;font-family: 'bankgothic_md_btmedium';font-size:25px; font-weight:normal;}
.donation_text h2{font-family: 'steelfishregular';font-size:50px; font-weight:normal;}
.donation_btn{ float:right; padding:20px 0 0  0;}
.donation_btn a{color:#3080b4;display:block;font-family: 'steelfishregular'; font-size:30px; min-width:200px; padding:7px 0; text-align:center; -webkit-border-radius:10px;border-radius:10px;
background: #aea0ac;
background: -moz-linear-gradient(45deg, #aea0ac 0%, #eaeef1 44%, #b9b5be 100%);
background: -webkit-linear-gradient(45deg, #aea0ac 0%,#eaeef1 44%,#b9b5be 100%);
background: linear-gradient(45deg, #aea0ac 0%,#eaeef1 44%,#b9b5be 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aea0ac', endColorstr='#b9b5be',GradientType=1 );}
.donation_btn a:hover{color:#a3c93a;}

.missionbox{ background-repeat:no-repeat; background-size:100% auto;}
.mission_data{ background:rgba(163,201,58,0.9);color:#2b2b2b;font-size:16px; margin-left:40%; max-width:550px; min-height:415px;padding:45px;  }
.mission_data h3{color:#FFF;font-family: 'ITCAvantGardeStd-Demi'; font-size:36px;}
.mission_data a{ background:#3596a5; color:#FFF; display:block;font-family: 'ITCAvantGardeStd-Demi'; font-size:17px; max-width:200px; padding:10px 0; text-align:center; -webkit-border-radius:10px;border-radius:10px;}
.mission_data a:hover{ background:#000;}

footer{ background:#bebebe;border-top:3px solid #FFF; color:#0c0c0c;font:normal 11px Arial, Helvetica, sans-serif; padding:40px 0 70px 0; text-align:center; }
.footermenu{ display:block; text-transform:uppercase; font-size:12.5px;}
.footermenu ul li{ display:inline-block;}
.footermenu ul li a{ color:#000000; display:block; padding:10px 15px;}
.copyright{}
.webmaster{ display:inline-block;}
.webmaster a{color:#0c0c0c;}
.webmaster a:hover{color:#000; text-decoration:underline;}

.internal{}
.internal h1{color:#000; margin:0 0 20px 0; text-decoration:underline; }

.staffbox{ background-repeat:no-repeat; background-size:100% auto;}
.staffdetail{ background:rgba(139,139,139,0.9);float:right; padding:65px 0; text-align:center; width:40%;}
.staffcontent{ max-width:400px;}
.staffdetail h1,.staffdetail a h1{color:#FFF;}
.readmore{ background:#a3c93a;color:#FFF; display:inline-block; font-family: 'ITCAvantGardeStd-Demi'; font-size:16px; max-width:150px; padding:10px 0;width:100%; -webkit-border-radius:8px;border-radius:8px;}
.readmore:hover{ background:#0380da;}


.stafflist{}
.stafflist ul li{ float:left; margin:0 1% 60px 0; width:32%;}

.directors{}
.directors ul li{ float:left; margin:0 1% 40px 0; width:19%;}


.housing_projects{ background:url(../images/icon-buiding.png) no-repeat left center; padding:0 0 0 70px; min-height:100px;}

.project{ display:block; margin:0 0 20px 0;}
.project_name{float:left; width:25%;}
.project_area{float:left; width:30%;}
.project_year{float:left; width:10%;}
.project_capacity{float:left; width:35%;}


.program_img{ float:left; width:30%;}
.program_detail{ float:right; width:68%;}
.program_detail h3{ margin:30px 0 0 0;}
.program_detail ul li{ background:url(../images/dot.png) no-repeat left 5px; padding:0 0 0 15px;}
.program_detail ul li ul{ margin:0 0 0 20px;}

.bottombanner{}
.bottombanner img{ width:100%; height:auto !important;}
.bottombanner iframe{ width:100% !important;}

.donors{}
.donors ul li{ float:left; margin:0 3% 30px 3%; text-align:center; width:27%;}
.donors ul li a{ display:inline-block; margin:10px 0 0 0;}

.donationbar{  color:#000; font-size:15px; padding:25px 0;text-align:center;}
.donationbar h2{ color:#FFF; font-size:25px; }
.donationbar p{ margin:15px 0;}
.organization{color:#333333; font-size:16px;}


.contact_address{ float:left; width:45%;}
.address{ padding:20px 0 0 0;}

.contact_form{float:right;width:45%;}
.contact_form ul li{ margin:0 0 15px 0;}
.formlabel{float:left; width:20%;}
.biglabel{ padding:40px 0 0 0;}
.formfield{float:right; width:78%;}
.txtboxx{ background:#d0d0d0; border:1px solid #454545; padding:2px 5px; width:100%;}
.smt_btn{ background:#399ddf; border:none; cursor:pointer; color:#FFF;display:inline-block; font-size:16px; padding:6px 10px; }
.smt_btn:hover{ background:#0d7fcb;}


.application_form{font:normal 15px "Century Gothic", "trebuchet MS", arial;}
.box{width:100%; padding:10px 0}
.box1{width:100%; padding:10px 15px; float:left;}
.box2{width:50%; padding:10px 15px; float:left;}
.boxx2 {width:48%; padding:10px 0px;}
.application_form input[type='text'],.application_form input[type='email'],.application_form input[type='date'],.application_form textarea,.selectboxx{ background:#FFF; border:1px solid #454545;font:normal 16px "Century Gothic", "trebuchet MS", arial; padding:5px 5px; width:100%;}
.seperator{border-bottom:1px dashed #6e6e6e; clear:both; display:block; height:5px; margin:20px 0; width:100%;}
.application_form h3{font:bold 20px "Century Gothic", "trebuchet MS", arial;margin:5px 0 0 0; padding:0; text-transform:uppercase;}
.application_form h4{font:bold 17px "Century Gothic", "trebuchet MS", arial;margin:5px 0 0 0; padding:0;}
.checkbox_holder{ padding:0 0 15px 0;}
.checkbox_holder .wpcf7-list-item{display:block; padding:5px 0; font-weight:bold;}


@media screen and (max-width:1207px) {
	.missionbox{ background-size:auto;}
	.staffbox{ background-size:auto;}
	.staffcontent{ max-width:100%;}
}
@media screen and (max-width:1080px) {
	.aligner{ margin:0px 10px;}
}
@media screen and (max-width:1020px) {
	.sujit-nav ul li a{ padding:8px 10px;}
}
@media screen and (max-width:960px) {
	.logo{width:100%;}
	.navigation{ padding:10px 0 0 0; width:100%;}
	.mission_data{ width:58%;}
	.staffdetail{ width:60%;}
	
	.program_img{width:40%;}
	.program_detail{width:58%;}
}

@media screen and (max-width:700px) {
	.homeboxes ul li{ width:100%;}
	.homeboxes ul li:nth-child(2){ margin:15px 0;width:100%;}
	.icon-holder{text-align:center; width:100%; }
	.box-detail{ width:100%;}
	.box-detail h4{text-align:center;}
	.intro{ min-height:inherit; padding:10px 0;}
	
	.contribution_txt,.donation_text,.donation_icon{text-align:center; width:100%; }
	.donation_icon{ padding:0 0 5px 0;}
	.donation_btn{ padding:10px 0; text-align:center; width:100%; }
	.donation_btn a{ display:inline-block;}
	
	.stafflist ul li{ margin:0 1% 50px 1%; width:48%;}
	.directors ul li{ margin:0 1% 30px 1%; width:48%;}
	
	.project{}
	.project_name{ width:100%;}
	.project_area{ width:40%;}
	.project_year{  width:15%;}
	.project_capacity{ width:45%;}
	
	.donors ul li{ width:30%; margin:0 1.5% 30px 1.5%;}
	
	.contact_address{width:100%;}
	.contact_form{ width:100%;}
	
}
@media screen and (max-width:600px) {
	.mission_data{  margin:0 1%; padding:20px; max-width:100%;width:98%;}
	.staffdetail{margin:0 1%; width:98%;}
	.footermenu ul li a{ padding:3px 6px;}
	.copyright{ line-height:20px; padding:10px 0 0 0;}
	
	.project{}
	.project_name,.project_area,.project_year,.project_capacity{ width:100%;}
	
	.donors ul li{ width:48%; margin:0 1% 30px 1%;}
	
	.program_img{text-align:center; width:100%;}
	.program_detail{ padding:10px 0 0 0; width:100%;}
	
	.box1,.box2,.boxx2 {width:100%; padding:10px 0px;}
}

@media screen and (max-width:460px) {

	.stafflist ul li{ margin:0 0 30px 0; width:100%;}
	.directors ul li{ margin:0 0 20px 0; width:100%;}
	
	h1{font-size:40px}
	
	.donors ul li{ width:100%; margin:0 0 30px 0;}
	
	.formlabel,.formfield{ width:100%;}
	.biglabel{ padding:0;}
	
	.donation_text h2{font-size:40px;}
}


/*responsive ment*/
@media screen and (max-width:720px) {
	#pull{ border-bottom:1px solid rgba(0,0,0,0.7); color:#FFF;display:block;line-height:30px; padding:10px 10px;  position:relative; text-align:left; width:100%; }
	#pull::after{ display:block; position:absolute; right:10px; top:15px; background:url(../images/select-icons.png); height:23px; width:23px; content:'';}
	.sujit-nav{ margin:0px; background:#347fbd url(../images/topbg.png) repeat scroll center top;}
	.sujit-nav ul{ display:none; padding:0 0 10px 0;}
	.sujit-nav ul li{ display:block; width:100%; margin:0px; padding:0px 5px;}
	.sujit-nav ul li a{padding:7px 10px 4px 10px; text-align:left; border-bottom:1px dashed rgba(255, 255,255, 0.4);-webkit-border-radius:0px;border-radius:0px;}
	.sujit-nav ul li:last-child a{ border-bottom:none;}
	.sujit-nav ul li.hassub::after{ display:block; position:absolute; right:10px; top:15px; background:url(../images/dropdown.png); height:18px; width:18px; content:'';}
	.sujit-nav ul li a:hover, .sujit-nav ul li.active a{background:rgba(0,109,193,0.8);}
	.sujit-nav ul li:hover ul,.sujit-nav ul li ul{ display:block; position:relative; top:auto; left:auto; width:100%; }
	.sujit-nav ul li ul li{ padding:0; width:100%;}
	.sujit-nav ul li ul li a{ width:100%;}
	
}