@import url("bootstrap.css");
@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
@import url("jquery.mmenu.all.css");
@import url("jquery.mmenu.toggles.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css");
@import url("style.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css");
@import url("banner.css");

body {
	background-color: #F2F2F2;
}

#header {
/*	background-image: url(../images/header_bg.jpg);  */
    background-repeat: round;
    background-size: inherit;
    width: 100%;
}
.volunteer_nav .navbar-collapse .navbar-nav > li {
	/*margin-top: 30px;
    width: 190px;*/
    padding-left: 15px;
}
.volunteer_nav .navbar-collapse .navbar-nav > li > button {
    border: 1px solid #D6A32B;
    background-color: #fff;
    padding: 5px 25px;
    color: #FF3B3B;
    border-radius: 12px;
    transform: translateY(-6px);
    letter-spacing: .8px;
}
@media screen and (max-width: 1319px) and (min-width: 1200px)
{
	#logoimg {
		margin-left: 0%;
        width: 300px;
    }
}
@media screen and (min-width: 1320px)
{
	.volunteer_nav {
		right: 8%;
	}
    #logoimg {
        margin-left: 4%;
    }
}
@media screen and (max-width: 1199px)
{
	.volunteer_nav {
		right: 1%;
	}
}
@media screen and (min-width: 768px) and (max-width: 1199px)
{
	#logoimg {
		width: 200px;
	}
}

footer {
	/*background-image: url(../images/footer_bg.jpg);  */
    background-repeat: round;
    background-size: cover;
    color: #464646;
}
footer .box {
    width: fit-content;
    display: block;
    margin: auto;
    margin-bottom: 20px;
}
@media screen and (max-width: 991px)
{
    footer .box {
        width: 100%;
    }
    footer .item {
        padding: 0px;
    }
}

footer .item {
    margin-bottom: 20px;
}
footer .item p {
    text-align: left;
    margin-bottom: 8px;
}
footer .item p.title {
    font-weight: bold;
    font-size: 18px;
    text-align: left;
}
footer table tr td p {
	text-align: left;
    margin-bottom: 8px;
}
footer table tr td p.title {
	font-weight: bold;
    font-size: 18px;
    text-align: left;
}
footer table tr td p.copyright {
	margin-top: 12px;
    font-size: 13px;
}
#content {
	padding-bottom: 2%;
	padding-top: 30px;
}
#content .pagetitle {
    text-align: center;
    font-size: 32px;
    margin: 15px auto;
}

.imgbox_1_1 {
	position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    right: 0;
    background-position: center;
}
.imgbox_4_3 {
	position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    right: 0;
    background-position: center;
}
#content .group .box {
	margin-bottom: 40px;
}
#content .group .box .item {
	background-color: #fff;
	border-radius: 0 0 15px 15px;
    margin: 10px auto;
    box-shadow: 3px 5px 8px #c3c3c3;
}
#content .group .box .item .typeTag {
    position: absolute;
    top: 10px;
    color: #fff;
    left: 0;
    z-index: 9;
    width: 3em;
    text-align: center;
    padding: 5px;
    box-shadow: 2px 2px 5px #151515;
    font-size: 16px;
}
#content .group .box .item .typeTag0 {
    background-color: #607d8b;
}
#content .group .box .item .typeTag1 {
    background-color: #795548;
}
#content .group .box .item .title {
	font-size: 18px;
    text-align: left;
    margin: 8px auto;
    color: #232323;
    width: 90%;
    margin: 12px auto;
}
#content .group .box .item .title i {
	color: #FFBC21;
    margin-right: 5px;
}
#content .group .box .item .brief {
	word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: normal;
    height: 7.5em;
    font-size: 14px;
    color: #232323;
    line-height: 25px;
    margin-bottom: 15px;
    width: 90%;
    margin: 5px auto;
}
#content .group .box .item .donate {
	background-color: #FFBC21;
    width: 100%;
    border: none;
    padding: 12px;
    border-radius: 0 0 15px 15px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding-top: 20px;
    outline: none;
}
#content .group .box .item .donate:hover {
	background-color: #f3ae0e;
	color: #fff;
}
#content .group .box .item .donate img {
    width: 45px;
    transform: translateY(-4px);
    margin: 0 8px;
}

.cart_btn {
	position: absolute;
    right: 8px;
    bottom: 0;
    top: 0;
    height: fit-content;
    margin: auto;
    width: fit-content;
    font-size: 22px;
    background-color: transparent;
    border: none;
    color: #fff;
    outline: none;
}
@media screen and (max-width: 767px)
{
    .cart_btn i {
        transform: translateX(-10px);
    }
}
.cart_btn span {
	position: absolute;
    text-align: center;
    font-size: 12px;
    color: #FF3B3B;
    background-color: #fff;
    width: 18px;
    height: 18px;
    right: 0;
    border-radius: 100%;
    top: -8px;
}
.projectinfo {
	margin: 20px auto;
}
.projectinfo .title {
	font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
}
.projectinfo .brief {
	font-size: 18px;
    line-height: 42px;
}
@media screen and (max-width: 1199px)
{
	.projectinfo .brief {
		font-size: 16px;
    	line-height: 32px;
	}
}

.projectcontent {

}
.projectcontent .title {
	font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    text-indent: 20px;
}
.projectcontent .title:before {
	content: "";
    width: 10px;
    height: 30px;
    background-color: #FFBC21;
    position: absolute;
    border-radius: 10px;
    left: 15px;
}
.projectcontent .project_list {
	list-style: none;
	width: 100%;
}
.projectcontent .project_list li {
	float: left;
    border-bottom: 1px solid #cecece;
    width: 100%;
    padding-top: 15px;
}
.projectcontent .project_list input[type="checkbox"] {
	float: left;
}
.projectcontent .project_list p {
	float: left;
}
.projectcontent input[name='project_price'] {
	width: 6em;
    margin: 0 8px;
}
.projectcontent #donate_thisbtn {
    width: 100%;
    display: block;
    margin: 40px auto;
    max-width: 100%;
    background-color: #CC5200;
    color: #fff;
    border: none;
    box-shadow: 2px 2px 12px #9c9c9c;
    font-size: 18px;
    padding: 0px;
    float: left;
    line-height: 60px;
}
.projectcontent #donate_thisbtn:hover {
    box-shadow: none;
    background-color: #b94a00;
}
.projectcontent #donate_nowbtn {
    width: 100%;
    display: block;
    margin: 40px auto;
    max-width: 100%;
    background-color: #ffaf0c;
    color: #fff;
    border: none;
    box-shadow: 2px 2px 12px #9c9c9c;
    font-size: 18px;
    padding: 0px;
    float: left;
    line-height: 60px;
}
.projectcontent #donate_nowbtn:hover {
    box-shadow: none;
    background-color: #de9500;
}
.projectcontent #donate_elsebtn {
    width: 100%;
    display: block;
    margin: 40px auto;
    max-width: 100%;
    background-color: #848484;
    color: #fff;
    border: none;
    box-shadow: 2px 2px 12px #9c9c9c;
    font-size: 18px;
    padding: 0px;
    float: left;
    line-height: 60px;
}
.projectcontent #donate_elsebtn:hover {
    box-shadow: none;
    background-color: #5d5d5d;
}
.projectcontent #donate_thisbtn img,
.projectcontent #donate_nowbtn img,
.projectcontent #donate_elsebtn img {
    width: 40px;
    margin: 5px 8px;
    transform: translateY(-2px);
}
@media screen and (max-width: 991px)
{
    .projectcontent #donate_thisbtn,
    .projectcontent #donate_nowbtn,
    .projectcontent #donate_elsebtn {
        margin: 10px auto;
    }
    .projectcontent #donate_nowbtn {
        margin-top: 30px;
    }
    .projectcontent #donate_elsebtn {
        margin-bottom: 30px;
    }
}
.projectcontent .info {
	background-color: #fff;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 50px;
}
.projectcontent .info > div {
	display: block;
	margin: 5% auto;
	float: initial;
}
@media screen and (max-width: 991px)
{
	.projectcontent .info > div {
		margin: 15px auto;
	}
}
.projectcontent .info > div iframe,
.projectcontent .info > div img {
	max-width: 100% !important;
	height: auto;
}

.container-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 500;
}

/* Hide the browser's default checkbox */
.container-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.container-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
	background-color: #fff;
    border: 1px solid #707070;
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover input[type="checkbox"] ~ .checkmark {
    background-color: #efefef;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input[type="checkbox"]:checked ~ .checkmark {
    background-color: #2196F3;
    border-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.container-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-checkbox input[type="checkbox"]:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* The container */
.container-radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.container-radio .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-radio:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container-radio input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.container-radio .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-radio input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container-radio .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}



/*form styles*/
#msform {
	width: 90%;
	margin: 50px auto;
	text-align: center;
	position: relative;
}
#msform fieldset {
	background: transparent;
    border: none;
    box-shadow: none;
    padding: 0px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 auto;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}
#msform fieldset .cartInfo {

}
#msform fieldset .cartInfo table.projectList {
	width: 100%;
}
#msform fieldset .cartInfo table.projectList tr {
	
}
#msform fieldset .cartInfo table.projectList tr th {
	background-color: #EFB942;
    color: #fff;
    padding: 10px;
    border-right: 1px solid #fff;
    word-break: keep-all;
}
#msform fieldset .cartInfo table.projectList tr th {
    border-right: none;
}
#msform fieldset .cartInfo table.projectList tr td {
	border-bottom: 1px solid #c7c7c8;
	padding: 10px 5px;
}
#msform fieldset .cartInfo table.projectList tr td:first-child {
	text-align: left;
}
#msform fieldset .cartInfo table.projectList tr td:nth-child(3),
#msform fieldset .cartInfo table.projectList tr td:nth-child(5) {
	color: #CC5200;
}
#msform fieldset .cartInfo table.projectList tr td span {
	display: inline-block;
}
#msform fieldset .cartInfo table.projectList tr td input {
	text-align: center;
	padding: 5px 0px;
    width: 5em;
    /*padding-left: 15px;*/
	border: 1px solid #c7c7c8;
    border-radius: 0px;
}
#msform fieldset .cartInfo table.projectList tr td a {
	color: #969696;
	font-size: 18px;
}
#msform fieldset .cartInfo table.projectList tr td a:hover,
#msform fieldset .cartInfo table.projectList tr td a:focus {
	color: #808080;
}

#msform fieldset .cartInfo table.addDonator {
	width: 100%;
	margin-bottom: 20px;
}
#msform fieldset .cartInfo table.addDonator tr {
	
}
#msform fieldset .cartInfo table.addDonator tr th {
	background-color: #EFB942;
    color: #fff;
    padding: 10px;
    border-right: 1px solid #fff;
    word-break: keep-all;
}
#msform fieldset .cartInfo table.addDonator tr th {
    border-right: none;
    text-align: center;
}
#msform fieldset .cartInfo table.addDonator tr th button.addMember {
	background-color: #7C8D91;
    border: none;
    border-left: 5px solid #f2f2f2;
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    padding: 5px 15px;
    outline: none;
}
#msform fieldset .cartInfo table.addDonator tr td {
	border-bottom: 1px solid #c7c7c8;
	padding: 10px 5px;
}
#msform fieldset .cartInfo table.addDonator tr:nth-last-child(2) td,
#msform fieldset .cartInfo table.addDonator tr:last-child td {
	border-bottom: none;
}
#msform fieldset .cartInfo table.addDonator tr td .donators {

}
#msform fieldset .cartInfo table.addDonator tr td .donators .leftbox {
	text-align: left;
    text-indent: 4px;
    margin-top: 8px;
    margin-bottom: 20px;
}
#msform fieldset .cartInfo table.addDonator tr td .donators .rightbox {
	text-align: left;
    text-indent: 4px;
    margin-top: 8px;
    margin-bottom: 20px;
}
#msform fieldset .cartInfo table.addDonator tr td .donators .leftbox > label,
#msform fieldset .cartInfo table.addDonator tr td .donators .rightbox > label {
	font-size: 15px;
	font-weight: 500;
}
#msform fieldset .cartInfo table.addDonator tr td .donators .leftbox #twzipcode > div {
	width: 30%;
	float: left;
	margin-right: 1%;
	outline: none;
}
#msform fieldset .cartInfo table.addDonator tr td .donators .leftbox #twzipcode select,
#msform fieldset .cartInfo table.addDonator tr td .donators .leftbox #twzipcode input {
	text-align: center;
	outline: none;
}
#msform fieldset .cartInfo table.addDonator tr td .donators input,
#msform fieldset .cartInfo table.addDonator tr td .donators select {
	width: 100%;
    padding: 8px 12px;
    border: 1px solid #c7c7c8;
    border-radius: 10px;
	outline: none;
}

 
#msform fieldset .cartInfo table.addDonator tr td .donators select {
	width: 100%;
    padding: 8px 12px;
    border: 1px solid #c7c7c8;
    border-radius: 10px;
	outline: none;
}

table.confirmDonator {
	width: 100%;
	margin-bottom: 6%;
	margin-top: 2%;
}
table.confirmDonator tr th {
	background-color: #777777;
    color: #fff;
    padding: 10px;
    border-right: 1px solid #fff;
    word-break: keep-all;
}
table.confirmDonator tr th {
    border-right: none;
    text-align: center;
}
table.confirmDonator tr td {
	border-bottom: none;
    /*padding: 0px 5px;*/
}
table.confirmDonator tr:first-child td {
    padding-top: 20px;
}
table.confirmDonator tr:last-child td {
	border-bottom: none;
}
table.confirmDonator tr td .checklist {

}
table.confirmDonator tr td .checklist .leftbox {
	width: 150px;
    background-color: #777;
    color: #fff;
    border: 0px solid #f2f2f2;
    float: left;
    padding: 12px 10px 8px;
    border-bottom: 1px solid #c7c7c8;
    margin-right: 8px;
}
table.confirmDonator tr td .checklist .leftbox label {
	color: #fff;
}
table.confirmDonator tr td .checklist .rightbox {
	background-color: #fff;
    width: calc(100% - 158px);
    float: left;
    border: .2px solid #c7c7c8;
    padding: 12px 10px 8px;
    text-align: left;
    border-bottom: none;
}
table.confirmDonator tr:last-child td .checklist .rightbox {
    border-bottom: .2px solid #c7c7c8;
}
table.confirmDonator tr td .checklist label {
	font-weight: 500;
	color: #232323;
}

#msform fieldset .cartInfo table.selectPayType {
	width: 100%;
	margin-bottom: 6%;
	margin-top: 2%;
}
#msform fieldset .cartInfo table.selectPayType tr th {
	background-color: #EFB942;
    color: #fff;
    padding: 10px;
    border-right: 1px solid #fff;
    word-break: keep-all;
}
#msform fieldset .cartInfo table.selectPayType tr th {
    border-right: none;
    text-align: center;
}
#msform fieldset .cartInfo table.selectPayType tr td {
	background-color: #fff;
    padding: 25px 15px 20px;
}
#msform fieldset .cartInfo table.selectPayType tr td .container-radio p {
	text-align: left;
    font-size: 18px;
    float: left;
    font-weight: bold;
    color: #232323;
    margin-bottom: 0px;
    width: 100%;
}
#msform fieldset .cartInfo table.selectPayType tr td .container-radio p.tip {
	font-size: 14px;
    color: #9B9494;
    font-weight: 500;
    float: left;
    margin-bottom: 15px;
}

@media screen and (max-width: 767px)
{
	#msform fieldset .cartInfo {
	    padding: 0px;
	}
	#msform fieldset .cartInfo table.addDonator tr th {
		text-align: left;
	}
	#msform fieldset .cartInfo table.confirmDonator tr td .checklist .leftbox {
		width: 80px;
	}
	#msform fieldset .cartInfo table.confirmDonator tr td .checklist .rightbox {
		width: calc(100% - 88px);
	}
}

#msform fieldset .keepornotbox .title {
	font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-left: 15px;
    transform: translateY(5px);
}
#msform fieldset .keepornotbox .title:before {
	content: "";
    width: 7px;
    height: 24px;
    background-color: #FFBC21;
    position: absolute;
    border-radius: 10px;
    left: 0px;
    top: -2px;
}
#msform fieldset .keepornotbox button.keep {
	width: 100%;
    background-color: #22ADCA;
    padding: 10px;
    border: none;
    color: #fff;
    font-size: 16px;
    margin: 5px auto;
}
#msform fieldset .keepornotbox button.next {
	width: 100%;
    background-color: #CC5200;
    padding: 10px;
    border: none;
    color: #fff;
    font-size: 16px;
    margin: 5px auto;
}
#msform fieldset .keepornotbox .buttons {
	width: 400px;
    margin: auto;
    max-width: 100%;
    margin-top: 20px;
}
#msform fieldset .keepornotbox .buttons button.previous {
	width: 100%;
    background-color: #777777;
    padding: 10px;
    border: none;
    color: #fff;
    font-size: 16px;
    margin: 5px auto;
}
#msform fieldset .keepornotbox .buttons.next {
	width: 100%;
    background-color: #CC5200;
    padding: 10px;
    border: none;
    color: #fff;
    font-size: 16px;
    margin: 5px auto;
}
@media screen and (max-width: 991px)
{
	#msform fieldset .keepornotbox > div > div {
		padding: 0px;
	}
}

@media only screen and (max-width: 549px) {
    
    /* Force table to not be like tables anymore */
	#msform fieldset .cartInfo table.projectList, 
	#msform fieldset .cartInfo thead, 
	#msform fieldset .cartInfo tbody, 
	#msform fieldset .cartInfo th, 
	#msform fieldset .cartInfo td, 
	#msform fieldset .cartInfo tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#msform fieldset .cartInfo table.projectList thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#msform fieldset .cartInfo table.projectList tr {
		border: 1px solid #efefef;
		border-bottom: 20px solid #f2f2f2;
	}
 
	#msform fieldset .cartInfo table.projectList tr td { 
		border: none;
	    padding: 0px;
	    border-bottom: 1px solid #eee;
	    position: relative;
	    padding-left: calc(6em + 8px);
	    white-space: normal;
	    text-align: left;
	    height: 50px;
	    line-height: 50px;
	    background-color: #fff;
	}
 
	#msform fieldset .cartInfo table.projectList tr td:before { 
		position: absolute;
	    top: 0;
	    left: 8px;
	    width: 6em;
	    padding-right: 10px;
	    white-space: nowrap;
	    text-align: left;
	    font-weight: bold;
	    color: #fff;
	    z-index: 9;
	}
	#msform fieldset .cartInfo table.projectList tr td:after { 
		content: "";
	    background-color: #efb942;
	    position: absolute;
	    width: 6em;
	    height: 49px;
	    top: 0;
	    left: 0;
	}
 
	/*
	Label the data
	*/
	#msform fieldset .cartInfo table.projectList tr td:before { content: attr(data-title); }

	#msform fieldset .cartInfo table.projectList tr td input {
    	text-align: center;
	    width: 5em;
	    /* padding-left: 15px; */
	    border: 1px solid #c7c7c8;
	    border-radius: 0px;
	    height: 30px;
	    margin: 10px 0px;
        line-height: 30px;
	}
	#msform fieldset .cartInfo table.projectList tr td a {
	    color: #969696;
	    font-size: 18px;
	    display: inline-block;
	    margin: 16px auto;
	}
}

.totalbox {
	background-color: #fff;
    margin: 20px auto;
    padding: 10px;
}
.totalbox p.tiptitle {
	text-align: right;
    color: #ACACAC;
    font-size: 13px;
}
.totalbox p.title {
	color: #484848;
    text-align: right;
    font-size: 22px;
    font-weight: bold;
}
.totalbox p.title span {
	color: #CC5200;
    font-size: 36px;
    padding-left: 5px;
    font-family: sans-serif;
    font-weight: 500;
}
@media screen and (max-width: 767px)
{
	#msform fieldset .cartInfo table.projectList tr:not(:first-child) td input {
		width: 3.5em;
	}
}

/*inputs
#msform input, #msform textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}*/
/*buttons*/
#msform .action-button {
	width: 100px;
	background: #67d5bf;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #;
}
/*headings*/
.fs-title {
	font-size: 16px;
	text-transform: uppercase;
	color: #63a2cb;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 14px;
	color: #666;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin: 0 auto;
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
	width: 40%;
	display:block;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	width: 50%;
	float: left;
	position: relative;
}

#payform  button.next {
    width: 20%;
    background-color: #CC5200;
    padding: 10px;
    border: none;
    color: #fff;
    font-size: 16px;
    margin: 5px auto;
	display: flex;
    justify-content: center; 
    align-items: center; 
}


 
#payform .action-button {
    width: 100px;
    background: #67d5bf;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
	display: flex;
    justify-content: center; 
    align-items: center; 
}
/*#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}*/
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: #C7C7C8;
	position: absolute;
	left: -50%;
	top: 50%;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,
#progressbar li.active:after{
	background: #EFB942;
	color: white;
}
#progressbar li > .circle {
	width: 60%;
    background-color: #C7C7C8;
    color: #000;
    margin: auto;
	border-radius: 100%;
}
#progressbar li.active > .circle {
    background-color: #EFB942;
}
#progressbar li > .circle > .info {
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: fit-content;
    height: fit-content;
    color: #fff;
}
#progressbar li > .circle > .info > p.title {
	text-align: center;
    font-size: 20px;
    max-width: 60%;
    margin: 0 auto;
}
#progressbar li > .circle > .info > p.subtitle {
	text-align: center;
    font-size: 18px;
    /*transform: translateY(-6px);*/
    font-weight: bold;
    font-family: monospace;
}
@media screen and (max-width: 1023px)
{
	#progressbar li > .circle > .info > p.title {
	    font-size: 18px;
	}
	#progressbar li > .circle > .info > p.subtitle {
	    font-size: 16px;
	    transform: translateY(4px);
	}
}
@media screen and (max-width: 991px)
{
	#msform {
		width: 100%;
	}
	#progressbar {
		width: 45%;
	}
	#msform fieldset {
		width: 90%;
	}
}
@media screen and (max-width: 767px)
{
	#msform {
		width: 100%;
	}
	#progressbar {
		width: 50%;
	}
	#msform fieldset {
		width: 100%;
	}
	#progressbar li > .circle {
		width: 80%;
	}
	/*#progressbar li > .circle > .info > p.title {
	    font-size: 16px;
	}
	#progressbar li > .circle > .info > p.subtitle {
	    font-size: 14px;
	    transform: translateY(4px);
	}*/
}
@media screen and (max-width: 649px)
{
	#progressbar li > .circle > .info > p.title {
	    font-size: 16px;
	}
	#progressbar li > .circle > .info > p.subtitle {
	    font-size: 14px;
	    transform: translateY(4px);
	}
}
@media screen and (max-width: 499px)
{
	#msform {
	    width: 105%;
	    transform: translateX(-2.5%);
	}
	#progressbar li > .circle {
		width: 90%;
	}
	#progressbar li > .circle > .info > p.title {
	    font-size: 14px;
	    max-width: 80%;
	}
	#progressbar li > .circle > .info > p.subtitle {
	    font-size: 12px;
	    transform: translateY(6px);
	}
}
@media screen and (max-width: 374px)
{
	#progressbar li > .circle {
		width: 92%;
	}
	#progressbar li > .circle > .info > p.title {
	    font-size: 12px;
	    max-width: 80%;
	    transform: translateY(-4px);
	}
	#progressbar li > .circle > .info > p.subtitle {
	    font-size: 12px;
	    transform: translateY(6px);
	}
}


.help-block {
  font-size: .8em;
  color: #7c7c7c;
  text-align: left;
  margin-bottom: .5em;
}

.finishpayTitle {
	width: 100%;
    text-align: center;
    background-color: #777777;
    color: #fff;
    padding: 10px;
    font-size: 16px;
    max-width: 600px;
    margin: auto;
    display: block;
}
.finishInfo {
	width: 100%;
    max-width: 600px;
    margin: auto;
    display: block;
    float: initial;
}
.finishInfo .title {
	margin: auto;
    width: 100px;
    max-width: 600px;
    display: block;
    float: left;
    margin-right: 10px;
    background-color: #777;
    padding: 10px;
    text-align: center;
    color: #fff;
    border-bottom: 1px solid #BEBEBE;
}
.finishInfo .info {
	margin: auto;
    width: calc(100% - 110px);
    max-width: calc(600px - 110px);
    display: block;
    float: left;
    padding: 9px;
    background-color: #fff;
    border: 1px solid #BEBEBE;
    font-size: 16px;
    text-align: left;
}
.finishpay_btn {
	display: block;
    margin: 20px auto;
    width: 280px;
    padding: 10px;
    border: none;
    background-color: #EFB942;
    color: #fff;
    font-size: 16px;
}

#manualpage {
	margin-bottom: 10%;
}
#manualpage ul {
	list-style: none;
    width: fit-content;
    margin: auto;
    display: block;
}
#manualpage ul li {
	float: left;
    margin: 5px;
}
#manualpage ul li button {
	background-color: #fff;
    border: 1px solid #B1B1B1;
    border-radius: 15px;
    padding: 10px 15px;
    outline: none;
}
#manualpage ul li button:hover {
	background-color: #FFBC21;
    color: #fff;
    outline: none;
}
#manualpage .box {

}
#manualpage .box .item {
	margin: 20px auto 30px;
}
#manualpage .box .item > .title {
	font-size: 22px;
    margin-bottom: 15px;
    text-indent: 20px;
}
#manualpage .box .item > .title:before {
	content: "";
    width: 10px;
    height: 30px;
    background-color: #FFBC21;
    position: absolute;
    border-radius: 10px;
    left: 0px;
}
#manualpage .box .item > .info {
	background-color: #fff;
	border: 1px solid #C2C2C2;
    padding: 20px;
    line-height: 30px;
    font-size: 16px;
}
#manualpage .box .item > .info img,
#manualpage .box .item > .info iframe {
    max-width: 100%;
    height: auto !important;
}

.volunteer_nav .navbar-collapse .navbar-nav > li > a {
	cursor: pointer;
}

#loginModal .modal-dialog {
	width: 90%;
    max-width: 500px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    height: fit-content;
}
#privacyModal .modal-dialog {
	width: 90%;
    max-width: 600px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    height: fit-content;
}
#loginModal .modal-content,
#privacyModal .modal-content {
	border-radius: 0px;
}
#loginModal .modal-content .modal-body,
#privacyModal .modal-content .modal-body {
	padding: 15px 25px 30px;
}
#loginModal .modal-content .modal-header,
#privacyModal .modal-content .modal-header {
	border: none;
}
#loginModal .modal-content .modal-header .close,
#privacyModal .modal-content .modal-header .close {
	color: #334856;
    opacity: 1;
    font-size: 26px;
    font-weight: 500;
    margin-top: -10px;
    margin-right: -5px;
}
#loginModal .modal-content .modal-body .title,
#privacyModal .modal-content .modal-body .title {
	text-align: center;
    font-size: 24px;
    /*font-weight: bold;*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-10px);
    font-family: Microsoft YaHei;
}
#loginModal .modal-content .modal-body .info,
#privacyModal .modal-content .modal-body .info {
	margin: 40px auto 20px;
}
#loginModal .modal-content .modal-body .info p,
#privacyModal .modal-content .modal-body .info p {
	color: #232323;
    font-size: 16px;
    margin-bottom: 5px;
    font-family: Microsoft YaHei;
	text-indent: 5px;
}
#loginModal .modal-content .modal-body .info input,
#privacyModal .modal-content .modal-body .info input {
	width: 100%;
    padding: 10px;
    margin-bottom: 18px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
}
#loginModal .modal-content .modal-body .info a,
#privacyModal .modal-content .modal-body .info a {
    float: right;
    color: #5D5D5D;
    padding: 0px 10px;
    font-size: 13px;
}
#loginModal .modal-content .modal-body .info a:first-child,
#privacyModal .modal-content .modal-body .info a:first-child {
    border-left: 1px solid #5D5D5D;
}
#loginModal .modal-content .modal-body .info a:hover,
#privacyModal .modal-content .modal-body .info a:hover {
	color: #929292;
}
#loginModal .modal-content .modal-body .info button,
#privacyModal .modal-content .modal-body .info button {
	width: 250px;
    background-color: #22ADCA;
    border: none;
    color: #fff;
    padding: 10px;
    font-size: 16px;
    margin: 20px auto;
    display: block;
    transform: translateY(20px);
}
#privacyModal .modal-content .modal-body .close1 {
    display: block;
    margin: auto;
    background-color: #F44336;
    border: none;
    padding: 10px 20px;
    color: #fff;
    font-size: 16px;
}

#privacyModal .scrollbar {
	margin-left: 30px;
	float: left;
	height: 70vh;
	overflow-y: scroll;
	margin-bottom: 25px;
}
#privacyModal #style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#privacyModal #style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#privacyModal #style-3::-webkit-scrollbar-thumb
{
	background-color: #000000;
}

.forgetTitle {
	width: 100%;
    text-align: center;
    background-color: #EFB942;
    color: #fff;
    padding: 10px;
    font-size: 16px;
    max-width: 600px;
    margin: auto;
    display: block;
    margin-bottom: 15px;
}
.forget_btn {
    display: block;
    margin: 30px auto;
    width: 250px;
    padding: 10px;
    border: none;
    background-color: #CC5200;
    color: #fff;
    font-size: 16px;
}
.forgetLabel {
	width: 90%;
    padding: 10px;
    font-size: 15px;
    max-width: 540px;
    margin: auto;
    display: block;
}
.forgetInput {
	width: 90%;
    padding: 8px;
    font-size: 15px;
    max-width: 540px;
    margin: auto;
    display: block;
    border-radius: 8px;
    border: 1px solid #b9b9b9;
	margin-bottom: 10px;
}

#registerBox {
	margin-top: 35px;
}
#registerBox > p.header {
	width: 100%;
    text-align: center;
    background-color: #EFB942;
    color: #fff;
    padding: 10px;
    font-size: 16px;
    margin: 10px auto 30px;
    display: block;
}
#registerBox > .box {

}
#registerBox > .box1 > .item {
	float: right;
}
#registerBox > .box > .item > p.title {
    font-size: 16px;
	width: 80%;
	margin: auto;
	margin-bottom: 6px;
}
#registerBox > .box > .item > .input {
	width: 80%;
	display: block;
	margin: auto;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #dedede;
    margin-bottom: 20px;
    outline: none;
}
#registerBox > .box > .item > .input[readonly] {
	background-color: #DFDFDF;
    border-color: #d0d0d0;
    cursor: not-allowed;
}

#registerBox > .box > .item > .inputbox > div:first-child > select {
	margin-left: 10%;
}
#registerBox > .box > .item > .inputbox input {
	width: 18%;
	display: block;
	margin: auto;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #dedede;
    margin-bottom: 20px;
    outline: none;
    float: left;
    margin-right: 1%;
    text-align: center;
}
#registerBox > .box > .item > .inputbox select {
	width: 30%;
	display: block;
	margin: auto;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #dedede;
    margin-bottom: 20px;
    outline: none;
    float: left;
    margin-right: 1%;
}
#registerBox > .box > .item > .companyphone {
	float: left;
    width: calc(80% - 80px);
    margin-left: 10%;
}
#registerBox > .box > .item > .companysymbol {
    float: left;
    margin: 10px;
}
#registerBox > .box > .item > .companyext {
	width: 50px;
    text-align: center;
    float: left;
}
#registerBox > .box > .item > .tip {
	margin: 20px auto;
    width: 80%;
    padding: 5px;
    line-height: 28px;
    font-size: 16px;
}
#registerBox > .box >.item >  .container-checkbox {
	width: fit-content;
	display: block;
	margin: 30px auto;
	font-size: 15px;
	color: #5D5D5D;
}
#registerBox > .box > .item > .container-checkbox a {
	color: #EF4B4B;
    text-decoration: underline;
}
.registerButton {
	width: 400px;
    background-color: #CC5200;
    color: #fff;
    border: none;
    padding: 10px;
    font-size: 16px;
    margin: 4% auto;
    display: block;
    max-width: 90%;
}
@media screen and (max-width: 767px)
{
	#registerBox > .box > .item {
		float: right;
	}
	#registerBox > .box > .item > p.blocktitle {
		display: none;
	}
	#registerBox > .box > .item {
		padding: 0px;
	}
	#registerBox > .box > .item > .blockinput {
		transform: translateY(-10px);
	}
	#registerBox > .box > .item > .container-checkbox {
		transform: translateX(-15px);
	}
}

#orderQueryTable {
	width: 100%;
	margin: 3% auto 4%;
}
#orderQueryTable thead tr {

}
#orderQueryTable thead tr th {
	text-align: center;
    background-color: #EFB942;
    padding: 12px 5px;
    color: #fff;
    border-right: 1px solid #fff;
    font-size: 16px;
}
#orderQueryTable thead tr th:last-child {
	border-right: none;
}
#orderQueryTable tr {
	
}
#orderQueryTable tr td {
	padding: 12px 5px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}
#orderQueryTable tr td span.price {
	color: #F32424;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 500;
}
#orderQueryTable tr td span.price1 {
	color: #CC5200;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 500;
}
#orderQueryTable tr td a {
	color: #CC5200;
	text-decoration: underline;
}

#GrayHeaderTable {
	width: 100%;
	margin: 3% auto 4%;
}
#GrayHeaderTable thead tr {

}
#GrayHeaderTable thead tr th {
	text-align: center;
    background-color: #777777;
    padding: 12px 5px;
    color: #fff;
    border-right: 1px solid #fff;
    font-size: 16px;
}
#GrayHeaderTable thead tr th:last-child {
	border-right: none;
}
#GrayHeaderTable tr {
	
}
#GrayHeaderTable tr td {
	padding: 12px 5px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}
#GrayHeaderTable tr td span.orderID {
	color: #CC5200;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 500;
    text-decoration: underline;
}
#GrayHeaderTable tr td a {
	color: #CC5200;
	text-decoration: underline;
}

#content ul.pagination {
    display: block;
    margin: auto;
    width: fit-content;
    margin-top: 60px;
    margin-bottom: 20px;
}
#content ul.pagination > li {
    float: left;
    display: block;
    color: #fff;
    font-weight: bold;
    font-family: sans-serif;
    margin: 2px 4px;
    width: fit-content;
    background-color: #C1C1C1;
}
#content ul.pagination > li a {
    padding: 4px 10px;
    color: #fff;
    border: none;
    background-color: transparent;
}
#content ul.pagination > li.active {
	color: #CC5200;
    background-color: #EFB942;
}
#content ul.pagination > li.active {
    padding: 4px 10px;
}

.loginsucess {
    background-color: rgba(255,255,255,.95);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999999999;
    display: none;
}
.loginsucess p {
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    height: fit-content;
    left: 0;
    right: 0;
    width: fit-content;
    font-size: 20px;
    font-weight: bold;
}

p.privacy a {
    color: #736135;
    text-decoration: underline;
    padding: 0px 6px;
}

#payform .payment_type {
	
	-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    padding-right: 25px;
     
}

.contact_box {
    display: block;
    margin: auto;
    float: initial;
}
#content .pagetitle {
    text-align: center;
    font-size: 32px;
    margin: 15px auto;
}
#manualpage {
    margin-bottom: 10%;
}
.contact_box .contact_table {
    width: 100%;
    max-width: 500px;
}
.contact_box .contact_table tr td {
    padding: 10px 2px;
}
.contact_box .contact_table tr td:first-child > label {
    font-size: 16px;
    transform: translateY(6px);
}
.contact_box .contact_table tr td:first-child {
    text-align: right;
    width: 7em;
    vertical-align: baseline;
    padding: 10px;
}