@charset "utf-8";
/* CSS Document */
@media (max-width:1920px) {
@import url ("layout.css");
}

@media (min-width:1366px) and (max-width:1919px) {
.stories {
    padding: 100px 100px;
}	
}




@media (min-width:1025px) and (max-width:1365px) {
.volunteering ul li {
    width: 18%;
}
.explore {
    padding: 100px 15% 80px;
}
.stories ul li {
    width: 23%;
}
}




@media (min-width:769px) and (max-width:1024px) {
.stories {
    padding: 100px 100px;
}	
.stories ul li {
    margin: 11px 11px 25px;
    width: 45%;
}
.stories ul li img {
    border-radius: 5px;
    width: 80%;
}
.explore {
    padding: 100px 5% 80px;
}
.culture {
    padding: 100px 0;
}
.culture_box ul li {
    clear: both;
    margin: 50px;
}
.volunteering {
    padding: 100px;
}
.volunteering ul li {
    width: 23%;
}
.wel_msg {
    width: 100%;
}
.wel_left {
    text-align: center;
    width: 100%;
}
.wel_left img {
    float: none;
    margin-right: 0;
}
.wel_right {
    float: right;
    width: 98%;
	padding:0 1%;
}
.banner_heading {
    color: #fff;
    float: left;
    font-family: "Raleway-Bold";
    font-size: 21px;
    line-height: 27px;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 3px #000;
    top: 25%;
    width: 100%;
}
.bounce img {
	max-width:100%;
}
.logo {
    color: #008aff;
    float: left;
    font-family: "Raleway-Bold";
    font-size: 21px;
    left: 61px;
    position: absolute;
    text-shadow: 1px 1px 3px #000;
    top: 21px;
}
.search_bg {
    background: #fff none repeat scroll 0 0;
    border-radius: 3px;
    height: 30px;
    position: absolute;
    right: 8%;
    top: 83px;
    width: 270px;
}
.foo {
	text-align:center;
}
}





@media (min-width:481px) and (max-width:768px) {
.stories {
    padding: 100px 0px;
}	
.stories ul li {
    margin: 11px 11px 25px;
    width: 45%;
}
.stories ul li img {
    border-radius: 5px;
    width: 80%;
}
.explore {
    padding: 100px 2% 80px;
}
.explore ul li {
    height: 400px;
    width: 48%;
}
.explore_img {
    float: left;
    width: 100%;
}
.explore_matter {
    float: right;
    width: 100%;
}
.explore_matter h3 {
    padding: 13px 0 0;
}
.explore p {
    padding: 0;
    min-height: 0;
}
.explore button {
    margin-left: 0;
}
.culture {
    padding: 100px 0;
}
.culture_box ul li {
    clear: both;
    margin: 50px;
}
.volunteering {
    padding: 100px 0;
}
.volunteering ul li {
    margin: 6px;
    width: 31%;
}
.wel_msg {
    width: 100%;
}
.wel_left {
    text-align: center;
    width: 100%;
}
.wel_left img {
    float: none;
    margin-right: 0;
}
.wel_right {
    float: right;
    width: 98%;
	padding:0 1%;
}
.banner_bg img {
    
}
.banner_heading {
    color: #fff;
    float: left;
    font-family: "Raleway-Bold";
    font-size: 21px;
    line-height: 27px;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 3px #000;
    top: 25%;
    width: 100%;
}
.bounce img {
	max-width:100%;
}
.logo {
    color: #008aff;
    float: left;
    font-family: "Raleway-Bold";
    font-size: 21px;
    left: 61px;
    position: absolute;
    text-shadow: 1px 1px 3px #000;
    top: 21px;
}
.search_bg {
    background: #fff none repeat scroll 0 0;
    border-radius: 3px;
    height: 30px;
    position: absolute;
    right: 8%;
    top: 83px;
    width: 270px;
}
.foo {
	text-align:center;
}
}










@media (min-width:320px) and (max-width:480px) {
.stories {
    padding: 100px 0px;
}	
.stories ul li {
    margin:11px 11px 25px 11px;
    width: 93%;
}
.stories ul li img {
    border-radius: 5px;
    width: 80%;
}
.explore {
    padding: 100px 2% 80px;
}
.explore ul li {
    width: 100%;
}
.explore_img {
    float: left;
    width: 100%;
}
.explore_matter {
    float: right;
    width: 100%;
}
.explore_matter h3 {
    padding: 13px 0 0;
}
.explore p {
    padding: 0;
    min-height: 0;
}
.explore button {
    margin-left: 0;
}
.culture {
    padding: 100px 0;
}
.culture_box ul li {
    clear: both;
    margin: 50px;
}
.volunteering {
    padding: 100px 0;
}
.volunteering ul li {
    margin: 8px;
    width: 45%;
}
.wel_msg {
    width: 100%;
}
.wel_left {
    text-align: center;
    width: 100%;
}
.wel_left img {
    float: none;
    margin-right: 0;
}
.wel_right {
    float: right;
    width: 98%;
	padding:0 1%;
}
.banner_bg img {
   
}
.banner_heading {
    color: #fff;
    float: left;
    font-family: "Raleway-Bold";
    font-size: 21px;
    line-height: 27px;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 3px #000;
    top: 25%;
    width: 100%;
}
.bounce img {
	max-width:100%;
}
.logo {
    color: #008aff;
    float: left;
    font-family: "Raleway-Bold";
    font-size: 21px;
    left: 61px;
    position: absolute;
    text-shadow: 1px 1px 3px #000;
    top: 21px;
}
.search_bg {
    background: #fff none repeat scroll 0 0;
    border-radius: 3px;
    height: 30px;
    position: absolute;
    right: 8%;
    top: 83px;
    width: 270px;
}
.foo {
	text-align:center;
}
}