/*!
 * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 ****/


@font-face{font-family:'veneerregular';src:url(/assets/fonts/veneer-webfont.eot);src:url(/assets/fonts/veneer-webfont.eot?#iefix) format('embedded-opentype'),url(/assets/fonts/veneer-webfont.woff2) format('woff2'),url(/assets/fonts/veneer-webfont.woff) format('woff'),url(/assets/fonts/veneer-webfont.ttf) format('truetype'),url(/assets/fonts/veneer-webfont.svg#veneerregular) format('svg');font-weight:normal;font-style:normal;}
@import url(//fonts.googleapis.com/earlyaccess/cwtexhei.css);
body {
    overflow-x       : hidden;
    /* padding-top      : 80px; */
    background-image: #f7f7f7;
    /* background-repeat: repeat; */
}
@import url(font-cht.css);

.header-inner{
  position: relative;
  max-width: 1170px;
  margin: 0 auto;
}
p {
    font-size : 16px;
}

p.small {
    font-size : 14px;
}

a,
a:hover,
a:focus,
a:active,
a.active {
    outline : 0;
    color: rgb(1, 114, 206);
}
h1,
h2,
h3,
h4,
h5,
h6 {
}
:lang(zh) *{
  font-family: 'Noto-Sans-TC', sans-serif, FontAwesome,'Glyphicons Halflings';
}
h1 { margin-bottom: 15px; }
h2 { font-size : 24px; font-weight : 400; }
hr.star-light,
hr.star-primary {
    margin     : 25px auto 30px;
    padding    : 0;
    max-width  : 250px;
    border     : 0;
    border-top : solid 5px;
    text-align : center;
}
hr.star-light:after,
hr.star-primary:after {
    content     : "\f005";
    display     : inline-block;
    position    : relative;
    top         : -.8em;
    padding     : 0 .25em;
    font-family : FontAwesome;
    font-size   : 2em;
}
hr.star-light {
    border-color : #FFFFFF;
}
hr.star-light:after {
    color            : #FFFFFF;
    background-color : #18BC9C;
}
hr.star-primary {
    border-color : #2C3E50;
}
hr.star-primary:after {
    color            : #2C3E50;
    background-color : #FFFFFF;
}
.img-centered {
    margin : 0 auto;
}
/******************************************
  header
********************************************/
header {
    color         : white;
    text-align    : center;
    background: url(https://plan-international.org/sites/files/plan/field/field_cc_bg_image/sponsor-a-child-girl.jpg) no-repeat center center scroll;
    /* margin-bottom : 10px; */
}

header .container .row .left {
    /* height : 600px; */
    /*padding-top: 100px;*/
    /*padding-bottom: 50px;*/
}
header .left {
    position : relative;
}



header .banner-grey-box {
    position         : absolute;
    bottom           : 0px;
    padding          : 15px 20px;
    color            : white;
    /*font-size        : 30px;*/
    text-align       : left;
    background-color: rgb(14, 30, 46);
    margin-bottom    : 0px;
}



header .right {
    /* padding-top : 100px; */
    background-color: rgb(1, 114, 206);
}
header .right h1 {
    color          : white;
    text-transform : uppercase;
}
header .right h2 {
    color          : white;
    font-size      : 16px;
    text-transform : uppercase;
}
header .amount-box {
    width            : 100%;
    text-align       : left;
    padding-bottom: 30px;
}
header .amount-box div {
    width      : 100%;
    padding    : 5px 5px;
    text-align : left;
    cursor     : pointer;
    position   : relative;
    /*color      : #0D1318;*/
    line-height: 26px
}
header .amount-box input[type=text] {
    color : #000000;
}
header .amount-box label {
    cursor : pointer;
    margin-left: 30px;
    font-weight: normal;
}

#amount_other { margin-left: 30px; color : #0A0A0A; width : 80%; }
#amount_other_hidden { color : #0A0A0A; width : 80%; }


/*header .amount-box div:hover,*/
header .amount-box div.checked {
    color: black;
    background-color: rgb(255, 255, 255);
    padding-top      : 5px;
}
header .amount-box div:hover label span, header .amount-box div.checked label span {
    /* font-size   : 26px; */
    line-height : 26px;
}
header .amount-box input[type=radio].with-font {
    border   : 0;
    clip     : rect(0 0 0 0);
    height   : 1px;
    margin   : -1px;
    overflow : hidden;
    padding  : 0;
    position : absolute;
    width    : 1px;
}
header .amount-box div:hover input[type=radio].with-font ~ label:before,
header .amount-box div.checked input[type=radio].with-font ~ label:before {
    /*top : 8px;*/
    line-height: 26px;
}
header .amount-box input[type=radio].with-font ~ label:before {
    font-family    : FontAwesome;
    display        : inline-block;
    content        : "\f1db";
    letter-spacing : 10px;
    font-size      : 1.2em;
    color          : #535353;
    width          : 1.4em;
    position       : absolute;
    left           : 5px;
    top            : 5px;
}
header .amount-box input[type=radio].with-font:checked ~ label:before {
    content        : "\f00c";
    font-size      : 1.2em;
    color: #ffb812;
    letter-spacing : 5px;
}
#amount_other-error:before{
    content        : "" !important;
}
header form button {
    padding          : 10px;
    color            : white;
    border           : 0;
    border-radius    : 1px;
    margin-bottom    : 20px;
    /* margin-top: 10px; */
    background-color: #ffb812;
    font-weight: normal;
}
header form button:hover{
  /* background-color : #ea890d; */
}
header small {
    font-size : 14px;
}
header small span {
    color : rgba(158, 115, 61, 1);
}

header small span.green {
    color : #077A20;
}



header.two-col{
    color: #0A0A0A;
    background    : #FFF;
}
header.two-col .left {
    height: 840px !important;
    /*height: 100% !important;*/
}
header.two-col .left .banner{
    height: calc(100% - 120px);

    background    : url(../img/banner.jpg) no-repeat center center scroll;
}
header.two-col .banner-grey-box {
    position: relative;
}
header.two-col .right {
    padding-top : 0px;
    background: #fff;
    /* border-left: 1px dotted #000; */
}
header.two-col .right h1 {
    color: white;
    font-size: 36px;
    text-transform : uppercase;
    margin-top: 20px;
    background-color: #0172ce;
    padding: 10px;
}

#payment_type-header2{
  padding-bottom: 30px;
  font-size: 20px;
}

/******************************************
  navbar
********************************************/


.navbar {
    background-color: #fff;
    border-bottom: 1px solid #0072ce;
    margin-bottom: 0px;
    -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,.1);
    box-shadow: 0 5px 5px 0 rgba(0,0,0,.1);
}
.navbar li {
    display: inline-block !important;
}
.navbar li a, .navbar li span {
    display : block;
    padding : 10px 5px;
    color: #0072ce;
}
.navbar li a:hover {
    color : #CCCCCC !important;
}

.navbar .logo {
      max-width: 120px;
      margin-top: 5px;
      margin-bottom: 5px;
}

/******************************************
  slider
********************************************/
#slider { margin-bottom : 10px; }
#slider .container {
    border-top       : 5px solid;
    border-top-color : rgba(17, 17 17, 1);
}
#slider .figure-box {
    padding          : 5px;
    background-color : rgba(247, 247, 247, 1);
    height           : 400px;
}
#slider figure {
    background-color : rgba(255, 255, 255, 1);
    text-align       : center;
}
#slider figure img {
    width : 100%;
}
/******************************************
  more-about
********************************************/

.targets-and-actions-container{
    padding-right: 0px;
    padding-left: 0px;
}

#more-about { margin-bottom : 20px; }
#more-about .youtube-container, #more-about .targets-and-actions-container {
    /*float          : inherit;*/
    display        : table-cell;
    vertical-align : middle;
    height         : 100%;
}

.youtube-container{padding: 20px 0px 10px 10px;}

#more-about .targets-and-actions {
      text-align: left;
      /*border-left: 1px dotted #FFF;*/
      padding: 10px;
      color: white;
}

#more-about .targets-and-actions img{min-width:100%;}

#more-about .targets-and-actions h2 {
    margin-top : 0px;
}
#more-about .targets-and-actions ul {
    list-style-position : outside;
    padding-left        : 20px;
    margin-bottom       : 10px;
}
#more-about .targets-and-actions ul li {
    margin-bottom : 10px;

}
#more-about .targets-and-actions a {
    text-decoration : underline;
    color           : rgba(0, 151, 170, 1);
    margin-bottom   : 5px;
    display         : block;
}
.more-about-row{
    /*display: table !important;*/
    background: #000;
    margin: 0;
}
/******************************************
  how
********************************************/
#how { margin-bottom : 10px; border: 2px solid #b7b7b7; }
#how ul { text-align : left; }
#how p.highlight {
    text-align       : left;
    background-color : rgba(158, 115, 61, 1);
    color            : white;
    padding          : 10px;
    text-align       : center;
    font-size: 22px;
    font-weight: normal;
    margin: 0;
}
/******************************************
  help-others
********************************************/
#help-others { margin-bottom : 10px; }
#help-others figure img {
    width : 100%;
}
/******************************************
  Responsive Fix
********************************************/
@media (max-width : 1200px) {
    header .banner-grey-box {
        font-size : 100%;
    }
}
@media (max-width : 992px) {
    header .container .row .left {
        height : 100px;
    }
    header .container .row .right {
        padding-bottom : 30px;
    }
    #slider .figure-box {
        height           : auto;
        margin-bottom: 20px;
    }
    .navbar .logo {
        height      : 54px;
        margin-left : 13px;
    }
}
@media (max-width : 768px) {

    body {
        /*padding-top : 60px;*/
    }
    .navbar {
        padding: 0;
    }
    .navbar .logo {
        height      : 54px;
        margin-left : 13px;
    }
    header .left {
        padding-top : 20px;
    }
    header .banner-grey-box {
        position : relative;
    }
    #slider .figure-box {
        height           : auto;
        margin-bottom: 20px;
    }
    #more-about .targets-and-actions{
      border-left: none;
    }

}
/******************************************
  footer
********************************************/
footer {
    /* border-top       : 3px solid; */
    /* border-top-color : rgba(105, 77, 37, 1); */
    background-color: rgb(0, 114, 206);
}
footer h1 {
    font-size : 40px;
    border-bottom-color : rgba(105, 77, 37, 1);
    padding-bottom: 10px;
    border-bottom       : 1px solid;
}
footer ul {
    list-style : none;
    padding-left: 0px;
    margin-bottom: 2px;
}
footer ul li {
    list-style    : none;
    display       : block;
    float         : left;
    /* margin-right  : 7px; */
    /* padding-right : 7px; */
    border-right  : 1px solid #CCCCCC;
}
footer ul li:last-child{
    border-right  : none;
}
footer ul li a {
    text-decoration : none;
    color: rgb(255, 255, 255);
}
footer .copyright {
  clear: left;
  padding-top: 20px;
  /* font: 11px Georgia, "Times New Roman", serif; */
  /* font-style: italic; */
  color: #ffffff;
}

/******************************************
  form
********************************************/
.error {

}

label#amount_other-error{
  margin-top: 5px;
  width: auto;
  display: block;
  color: red;
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
  background: #fcf8e3;
  padding: 10px;
  border: 1px solid #676767;
  width: 80%;
}

.error-other-amount {
  margin-left:0px!important;
  width: auto;
  display: block;
  color: #8a6d3b!important;
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
  background-color: #fcf8e3;
  padding: 10px;
}

/******************************************
  margin
********************************************/
.mr-10 { margin-right : 10px; }
.mb-20 { margin-bottom : 20px; }
.mb-10 { margin-bottom : 10px; }
.mb-5 { margin-bottom : 5px; }
.mb-60 { margin-bottom : 60px; }

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
.top60 { margin-top:60px; }

/*overwrite*/
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: #2c3e50;
    background-color: #ffffff;
    border: 1px solid rgba(236, 240, 241, 0);
    border-bottom-color: #9E733D;
    cursor: default;
    font-weight: 800;
    border-left: 1px dotted #B7B7B7;
}

.nav-tabs li:first-child a, .nav-tabs li:first-child a:hover {
  border-left: none;
}

.nav-tabs>li>a:hover {
  border-left: 1px dotted #B7B7B7;
  color: black;
}

.nav-tabs>li>a{
    font-size: 20px;
    color:#929292;
    border-left: 1px dotted #B7B7B7;
}

.tab-content p {
    font-size: 15px;
}

form#donation-form {
    font-size: 22px;
}


hr.black {

    border-top: 1px solid #000 !important;
}

.panel-info>.panel-heading {
    color: #ffffff;
    background-color: rgb(0, 114, 206);
    border-color: rgb(0, 114, 206);
}

.panel-info {
    border-color: transparent;
}

/*bar*/

.wizard div {
    padding: 10px 6px 10px;
    margin-right: 5px;
    background: #efefef;
    position: relative;
    display: inline-block;
}
.wizard div:before {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid rgb(255, 255, 255);
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
.wizard div:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}
.wizard div:first-child:before,
.wizard div:last-child:after {
    border: none;
}
.wizard div:first-child {
    -webkit-border-radius: 4px 0 0 4px;
       -moz-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;
}
.wizard div:last-child {
    -webkit-border-radius: 0 4px 4px 0;
       -moz-border-radius: 0 4px 4px 0;
            border-radius: 0 4px 4px 0;
}
.wizard .badge {
    margin: 0 5px 0 18px;
    position: relative;
    top: -1px;
}
.wizard div:first-child .badge {
    margin-left: 0;
}
.wizard .current {
    background: #22B24A;
    color: #fff;
}
.wizard .current:after {
    border-left-color: #22B24A;
}

.text-muted {
        color: #728c8e;
    font-style: italic;
}
.write-remarks{
background-color: #4CAF50;
color: white;
padding: 10px;
cursor: pointer;
}

.green-arrow{
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 20px 15px 0 15px;
      border-color: #4caf4f transparent transparent transparent;
      z-index: 300;
      position: relative;
}

.payment-content{
    width:473px;
}

.loading-dot1:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4,end) 1500ms infinite;
    animation: ellipsis steps(4,end) 1500ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    width: 0px;
}

@keyframes ellipsis {
    to {
        width: 1.25em;
    }
}

@-webkit-keyframes ellipsis {
    to {
        width: 1.25em;
    }
}


a.btn {
    padding          : 10px;
    color            : white;
    border           : 0;
    border-radius    : 1px;
    margin-bottom    : 20px;
    margin-top       : 10px;
    background-color : #ed6d34;
}
a.btn.green {
    background-color : #90C31F !important;
}
a.btn.orange {
    background-color : #ed6d34 !important;
}


#given_name_icon, #surname_icon, #mobile_icon {
    margin-right: 0;
}

.unionpay1200{
  text-align: left;
  font-size: 14px;
  border: 2px solid #fff;
  margin-bottom: 10px;
  background-color: #333;
}

.unionpay1200_hide{
  display:none;
}
#tax_receipt_reminder{
  padding-bottom: 15px;
}

footer .fa {
    color: white;
    font-weight: normal;
    font-size: 1.25em;
}

footer a{
    color: #FFF;
    padding: 10px 5px;
}
footer a:hover,
footer a:focus,
footer a:active,
footer a.active {
    outline : 0;
    color: #FFF;
    background: rgb(0, 141, 255);
}

:lang(en) .en-show{
  display:block!important;
}
:lang(zh) .zh-show{
  display:block!important;
}