/*------------------------------------*\
    Font
\*------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');



/*------------------------------------*\
  Icon
\*------------------------------------*/
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(asset/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
         local('MaterialIcons-Regular'),
         url(asset/MaterialIcons-Regular.woff2) format('woff2'),
         url(asset/MaterialIcons-Regular.woff) format('woff');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}



/*------------------------------------*\
  Element Reset
\*------------------------------------*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
details,
embed,
figure,
figcaption,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    border: none;
    outline: none;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.5em;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

hr { display: none; }
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
hgroup,
menu,
nav,
section { display: block; }

ol,
ul,
li { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

sup {
    font-size: 60%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.7em;
}

b {
    font-weight: 500;
}

a,
a:active,
a:link {
    text-decoration: none;
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5 { font-size: 1em; }

#skip,
.skip {
    width: 0;
    height: 0;
    position: absolute;
    left: -9999px;
    font-size: 0;
    line-height: 0;
}

strong { font-weight: 500; }



/*------------------------------------*\
  clearfix
\*------------------------------------*/
.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after { clear: both; }

.clearfix { zoom: 1; /* IE < 8 */ }



/*------------------------------------*\
  Scroll Bar
\*------------------------------------*/
::-webkit-scrollbar {
    display: none;
    width: 10px;
    height: 10px;
}

.popup::-webkit-scrollbar { display: block; }

.popup__body::-webkit-scrollbar,
.ipt-fld--msg::-webkit-scrollbar { display: block; }

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 6px;
    background: #bbbdbf;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #8e8f90;
    background-clip: content-box;
}

html {
    height: 100%;
    font-family: 'Roboto', arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 300;
    overflow-x: hidden;
    overflow-y: auto;
}



/*------------------------------------*\
  visible on desktp & unvisible object on mobile
\*------------------------------------*/
.desktop .visible-mobile,
.mobile .visible-desktop { display: none; }
.mobile .visible-mobile { display: inherit; }
.desktop .visible-desktop { display: inherit; }

.pg-transition {
    opacity: 0;
    transition: opacity 1s;
}

.logged-out .visible-logged-in,
.logged-in .visible-logged-out { display: none; }
.loggged-in .visible-logged-in { display: inline-block; }
.logged-out .visible-logged-out { display: inline-block; }



/*------------------------------------*\
  wrapper
\*------------------------------------*/
.mobile .wp {
    padding-right: 15px;
    padding-left: 15px;
}

    .mobile .sect > .wp {
        position: relative;
    }

.desktop .wp {
    max-width: 1400px;
    padding-right: 55px;
    padding-left: 55px;
    margin-right: auto;
    margin-left: auto;
}

.desktop .sect--support .wp { max-width: 1600px; }



/*------------------------------------*\
  padding
\*------------------------------------*/

.mobile .panel .pd { padding: 1em; }

.desktop .panel--your-info .pd,
.desktop .panel--your-result .pd { padding: 2.5em; }

    .desktop .panel--support .pd { padding: 1.5em 1em; }



/*------------------------------------*\
  layout
\*------------------------------------*/

.desktop .lyt {
    margin-left: -55px;
    padding: 0;
}

.mobile .lyt__itm {
    margin-right: 2%;
    padding-bottom: 2em;
    margin-left: 2%;
}

.desktop .lyt__itm {
    display: inline-block;
    margin-bottom: 3em;
    margin-left: -4px;
    vertical-align: middle;
}

    .desktop .contact .lyt__itm,
    .desktop .site-footer .lyt__itm { margin-bottom: 0; }


.desktop .lyt__itm--col-1 {
    display: block;
    padding-left: 55px;
}
    .mobile .sect--contact .lyt__itm--col-1 { text-align: center; }
    .desktop .sect--contact .lyt__itm--col-1:last-child { margin-bottom: 0; }

.desktop .lyt__itm--col-2 {
    width: 50%;
    padding-left: 55px;
}

.desktop .lyt__itm--col-3 {
    width: 33.333333%;
    padding-left: 55px;
}

.desktop .lyt__itm--col-4 {
    width: 25%;
    padding-left: 55px;
}

.desktop .lyt__itm--col-5 {
    width: 20%;
    padding-left: 55px;
}

.desktop .lyt__itm--top { vertical-align: top; }

.desktop .lyt__itm--your-info { width: 34%; }

    .desktop .sect--endowment .lyt__itm--your-info { width: 30%; }


.desktop .lyt__itm--your-result {
    width: 66%;
    padding-left: 2.5%;
}

    .desktop .sect--endowment .lyt__itm--your-result { width: 70%; }

.desktop .sect--contact .lyt__itm--col-2 {
    width: 35%;
    padding-left: 10%;
}

    .desktop .sect--contact .lyt__itm--col-2:first-of-type { width: 65%; }

.desktop .contact .lyt__itm--col-5:first-child { width: 25%; }
.desktop .contact .lyt__itm--col-5:nth-child(2),
.desktop .contact .lyt__itm--col-5:nth-child(3),
.desktop .contact .lyt__itm--col-5:nth-child(4) { width: 21.66666%; }
.desktop .contact .lyt__itm--col-5:last-child { width: 10%; }

.desktop .sect--support .lyt__itm--col-5:not(:nth-child(2)) { padding-left: 2%; }



/*------------------------------------*\
	Layout Table
\*------------------------------------*/
.lyt-tbl {
    width: 100%;
    border-collapse: collapse;
}

.form--share .lyt-tbl tr:nth-child(1) td,
.form--share .lyt-tbl tr:nth-child(2) td,
.form--share .lyt-tbl tr:nth-child(3) td { padding-bottom: 1.3em; }



/*------------------------------------*\
	cont-list
\*------------------------------------*/
.cont-li__subtitle {
    display: block;
    margin: 2.5em 0 .5em;
    font-weight: 500;
}

.cont-li__itm {
    border-width: 1px;
    border-style: solid;
    border-color: #dfe0e4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    background: #f9fafc;
}


.cont-li__itm a {
    color: inherit;
}

.mobile .cont-li__itm {
    margin-bottom: 1.5em;
}

.desktop .cont-li__itm {
    display: inline-block;
    vertical-align: top;
    transition: background .15s;
}

.desktop .cont-li--col-1 .cont-li__itm {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 1.5em;
    transition: border .3s;
}

.desktop .cont-li--col-2 .cont-li__itm {
    width: 43%;
    margin-left: 5%;
    margin-bottom: 2em;
}

.desktop .cont-li--col-3 .cont-li__itm {
    width: 31%;
    margin-bottom: 2em;
    margin-left: 2%;
}

.desktop .cont-li--col-4 .cont-li__itm {
    width: 22.5%;
    margin-bottom: 2em;
    margin-left: 2%;
}

.desktop .cont-li--col-5 .cont-li__itm {
    width: 17.5%;
    margin-bottom: 2em;
    margin-left: 2%;
}

.statistic-li .cont-li__itm {
    height: 390px;
}
    .statistic-li .cont-li__itm:last-of-type {
        width: 91%;
        height: 250px;
    }

.cont-li__org-info { display: block; }



/*------------------------------------*\
	cont-li__head
\*------------------------------------*/
.cont-li__head {
    padding: 1em;
    cursor: pointer;
    white-space: nowrap;
}

.definition-li .cont-li__head,
.email-template-li .cont-li__head {
    padding-right: 2em;
    padding-left: 2em;
}

.resource-video-tutorial-li .cont-li__head,
.support-video-tutorial-li .cont-li__head,
.feature-li .cont-li__head {
    border-top: 1px solid #ddd;
    text-align: center;
}

.cont-li__head .heading {
    color: #000;
    transition: color .15s;
}

.desktop .cont-li__itm:hover .heading,
.cont-li__itm.is-selected .heading { color: #fff; }



/*------------------------------------*\
	cont-li__body
\*------------------------------------*/
.cont-li__body { background: #fff; }

.email-template-li .cont-li__body,
.definition-li .cont-li__body {
    display: none;
    padding: 1.5em 2em;
    border-top: 1px solid #eaeef1;
    position: relative;
    line-height: 1.7em;
    cursor: text;
}

.ipt-fld--msg {
    max-height: 25em;
    overflow-y: scroll;
}

.feature-li .cont-li__body {
    height: 15em;
    overflow: hidden;
}

.popup__body .feature-li .cont-li__body { height: 10em; }



/*------------------------------------*\
  Tool
\*------------------------------------*/
.mobile .tool-li {
    position: absolute;
    top: 1em;
    right: 1em;
}

.desktop .tool-li {
    line-height: normal;
}

.tool-li__itm { transition: background .3s; }

.tool-li__itm > span {
    color: #fff;
    font-weight: 400;
}

.desktop .tool-li__itm {
    display: inline-block;
    padding-top: 5px;
    padding-right: 1em;
    padding-bottom: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    position: relative;
    cursor: pointer;
}

.desktop .tool-li__itm:not(:first-child) { padding-left: 1em; }

.tool-li__itm > .ico {
    margin-right: .1em;
    color: rgba(255, 255, 255, 0.4);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    font-size: 1.15em;
    transition: color .15s;
}

.tool-li__itm.is-active > .ico { color: rgba(255, 255, 255, 1); }

.ie8 .tool-li__itm > .ico { color: #ddd; }

.desktop .tool-li__itm > span { font-size: 0.85em; }



/*------------------------------------*\
	additional service list
\*------------------------------------*/
.additional-service-li {
    margin-top: 2em;
    margin-bottom: 2em;
}

.additional-service-li > li { transition: height .7s .2s; }

.mobile .additional-service-li > li { padding-bottom: 2em; }



/*------------------------------------*\
  contact
\*------------------------------------*/
.contact { background: #efefef; }

.mobile .contact {
    padding-top: 2em;
    text-align: center;
}

.desktop .contact {
    padding-top: 3em;
    padding-bottom: 3em;
}



/*------------------------------------*\
  org info List
\*------------------------------------*/
.org-info-logo {
    width: 300px;
    margin-bottom: 2em;
}

.org-info-heading {
    margin-bottom: 1.5em;
    font-size: 1.1em;
}

.mobile .org-info-heading { text-align: center; }

.desktop .org-info-li { position: relative; }

.sect--contact .org-info-li { margin-bottom: 1em; }

.desktop .contact .org-info-li__itm,
.desktop .sect--contact .org-info-li__itm {
    margin-bottom: .1em;
    padding-left: 2.3em;
}

.org-info-li__itm > a,
.org-info-li__itm > span {
    color: #000;
    font-size: .95em;
    transition: color .3s;
}

.org-info-li__sns {
    display: none;
    width: 31%;
    margin-right: .6em;
    margin-bottom: .3em;
}

.mobile .org-info-li__sns {
    width: 5%;
    margin-left: 1em;
}

.sect--contact .org-info-li__sns {
    width: 10%;
    margin-right: 1.5em;
}

.org-info-li .ico {
    font-size: 1.6em;
    color: #ccc;
}

.desktop .org-info-li .ico {
    position: absolute;
    top: 0;
    left: 0;
}



/*------------------------------------*\
  Copyright
\*------------------------------------*/
.copyright {
    display: inline-block;
    color: #ccc;
}

.desktop .copyright {
    float: left;
    position: relative;
}

.copyright > p,
.copyright > span {
    display: inline-block;
    font-size: .9em;
    vertical-align: middle;
    transition: .3s color;
}

.copyright > span {
    color: #888;
}



/*------------------------------------*\
  Browser Support
\*------------------------------------*/
.desktop .browser-support { float: right; }

.browser-support__li { margin-top: 1.5em; }

.browser-support__li__itm {
    display: inline-block;
    width: 25%;
    margin-left: -5px;
    vertical-align: top;
    text-align: center;
}

.browser-support__li__itm > span {
    display: block;
    font-size: .9em;
    font-weight: 500;
    line-height: 1.2em;
}

.browser-support__li__itm > img {
    width: 70%;
    margin-bottom: .5em;
}



/*------------------------------------*\
  Wrapper Input Field
\*------------------------------------*/
.wp-app-ipt-fld {
    border-bottom: 1px solid #cdcdcd;
    position: relative;
}

.wp-app-ipt-fld.is-highlighted { border-bottom-color: #d50000 !important; }



/*------------------------------------*\
  Input
\*------------------------------------*/
.ipt-fld,
.sel {
    display: block;
    width: 100%;
    margin: 0;
    border: 1px solid #ddd;
    background-color: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    font-family: inherit;
    font-size: 1em;
    font-weight: 400;
    outline: none;
    -webkit-transition: border 0.3s;
    -moz-transition: border 0.3s;
    -ms-transition: border 0.3s;
    -o-transition: border 0.3s;
    transition: border 0.3s;
}

    .form-grp .ipt-fld {
        padding-top: 8px;
        padding-bottom: 8px;
        border: none !important;
        font-size: 1.05em;
        font-weight: 500;
    }

        .ie .form-grp .ipt-fld::-ms-clear {
            display: none;
            width: 0;
            height: 0;
        }

    .form .ipt-fld:hover,
    .wp-app-ipt-fld:not(.is-highlighted):hover {
        border-color: #000;
    }

    .form .ipt-fld {
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 1em;
        font-weight: 400;
        transition: background .3s, border .3s;
    }

        .form .ipt-fld--msg {
            padding: 1.5em;
            min-height: 8em;
            font-weight: 300;
            line-height: 1.5em;
            cursor: text;
        }



/*------------------------------------*\
  Select
\*------------------------------------*/
.form-grp .sel {
    padding-top: 8px;
    padding-right: 7%;
    padding-bottom: 8px;
    border: none;
    border-bottom: 1px solid #cdcdcd;
    background-image: url(../img/select_box_arrow.png);
    background-repeat: no-repeat;
    background-position: right center;
    font-size: 1.05em;
    font-weight: 500;
    cursor: pointer;
    transition: background .3s;
}

    .form-grp .sel::-ms-expand {
        display: none;
    }

    .ie8 .form-grp .sel,
    .ie9 .form-grp .sel {
        padding-right: 1em;
        background-image: none !important;
    }

    .form-grp .sel:hover {
        border-color: #000;
        background-image: url(../img/select_box_arrow-active.png);
        animation: none !important;
    }

    .is-active .sel {
        background-image: url(../img/select_box_arrow-active.png);
    }

.form-grp .sel option {
    font-size: 1.05em;
    font-weight: 500;
}



/*------------------------------------*\
  Button - Adjust Input Field
\*------------------------------------*/
.ipt-fld-btn {
    position: absolute;
    bottom: -.2em;
    z-index: 3;
}

/*dec*/
.ipt-fld-btn:nth-of-type(2) {
    right: -14px;
}

/*inc*/
.ipt-fld-btn:nth-of-type(1) {
    right: 16px;
}

.ipt-fld-btn__ico {
    padding: 8px;
    border-radius: 50%;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    transition: color .2s, background .1s;
}

    .ipt-fld-btn__ico:active {
        background: #ddd;
        transition: none;
    }

    .is-active .ipt-fld-btn__ico,
    .form-grp:hover .ipt-fld-btn__ico {
        color: #000;
    }



/*------------------------------------*\
	Input-Label
\*------------------------------------*/
.lbl {
    display: block;
    transition: .3s;
}

    .form-grp .lbl {
        color: #999;
        font-size: .95em;
        font-weight: 400;
        line-height: 1em;
    }

        .form-grp:not(.is-active):hover .lbl { color: #000; }
        .form-grp .lbl.is-highlighted { color: #d50000 !important; }

    .form--share .lbl { font-weight: 500; }



/*------------------------------------*\
	Input-Radio
\*------------------------------------*/
.wp-ipt-radio { cursor: pointer; }
.wp-ipt-radio:first-of-type {
    padding-top: 6px;
}

.ipt-radio {
    display: inline-block;
    vertical-align: middle;
    color: #dbe2e7;
    font-size: 1.4em;
    transition: color .3s;
}

.val-ipt-radio {
    display: inline-block;
    width: 90%;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: #777;
    font-size: .95em;
    font-weight: 400;
    transition: color .3s;
}
    .wp-ipt-radio:hover .val-ipt-radio { text-decoration: underline; }

    .wp-ipt-radio.is-checked .val-ipt-radio {
        color: #000;
        font-weight: 500;
    }



/*------------------------------------*\
	form-result-msg
\*------------------------------------*/
.form-result-msg {
    display: none;
    padding: .4em 0;
    margin: 1.2em auto;
    line-height: 1.5em;
    border-radius: .5em;
    font-size: .9em;
    font-weight: 400;
    text-align: center;
    color: #fff;
}

    .form-result-msg.is-failed { background: #a94442; }
    .form-result-msg.is-succeed { background: #1b94d6; }



/*------------------------------------*\
  Btn
\*------------------------------------*/
.btn {
    display: block;
    margin: 0 auto;
    border-radius: 5px;
    border-top: none;
    border-right: none;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-left: none;
    outline: none;
    font-size: 1em;
    font-weight: 700;
    color: #fff !important;
    text-align: center;
    line-height: normal;
    cursor: pointer;
    transition: background .3s, border-color .3s;
}
    .btn:active {
        color: #000;
        -webkit-transition: none;
        transition: none;
    }

    .btn--submit {
        padding: 0.7em 0;
    }
        .btn--full {
            width: 100%;
        }

        .sect--support .btn--submit {
            width: 80%;
        }

        .btn.is-invalid {
            background: #d50000 !important;
            border-bottom-color: #d50000 !important
        }

        .btn.is-valid {
            background: #1b94d6 !important;
            border-bottom-color: #1b94d6 !important;

        }



/*------------------------------------*\
	Image
\*------------------------------------*/
.img-summ-symbol {
    display: inline-block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

    .summ-li__symbol:hover .img-summ-symbol {
        transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg);
        transition: transform 1s;
    }

.definition-li .img-org-logo {
    display: block;
    margin: 1.5em 0;
    width: 80%;
}

.lnk-to-org .img-org-logo {
    max-width: 80%;
    max-height: 10em;
}

.feature-li .cont-li__body .img { width: 100%; }

.img-sns {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
}

    .sect--contact .img-sns {
        width: 1.8em;
        height: 1.8em;
    }



/*------------------------------------*\
	iframe
\*------------------------------------*/
.cont-li iframe {
    display: block;
    width: 100%;
    height: 100%;
    overflow-x: scroll;
}



/*------------------------------------*\
	cont-li icon
\*------------------------------------*/
.cont-li__ico-ct {
    width: 9em;
    height: 9em;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.cont-li__ico-ct > .ico {
    padding: .35em;
    border: solid 6px #dfdfdf;
    color: #dfdfdf;
    font-size: 5em;
}



/*------------------------------------*\
  Panel
\*------------------------------------*/
.panel {
    width: 100%;
    /* for display:inline-block from script */
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    -webkit-transition: width .6s, border .3s;
    transition: width .6s, border .3s;
}

    .sect--give-now .panel--your-result,
    .sect--give-later .panel--your-result {
        display: none;
    }

.panel__head {
    border-bottom: 1px solid #eaeef1;
    padding-top: .8em;
    padding-bottom: .8em;
    position: relative;
    background: #f9fafc;
}

    .sect--give-now .panel__head,
    .sect--give-later .panel__head,
    .sect--endowment .panel__head {
        padding-left: 2em;
        padding-right: 2em;
    }

    .sect--support .panel__head {
        padding-right: 1em;
        padding-left: 1em;
        text-align: center;
    }

.panel__head > .heading {
    color: #888;
}

    .panel--your-result .panel__head > .heading {
        display: inline-block;
    }

.panel__body {
    position: relative;
    background: #fff;
}

    .panel--support .panel__body {
        text-align: center;
    }

.sect--support .panel__body > p {
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: left;
    transition: height .8s;
}

.panel--support .panel__body .ico {
    padding: .4em;
    border-radius: 50%;
    border: solid 6px #dfdfdf;
    font-size: 3.8em;
    color: #dfdfdf;
}

.panel__body .ico-arrow {
    position: absolute;
    right: .4em;
    bottom: 0.2em;
    font-size: 2.4em;
    cursor: pointer;
}

    .panel__body .ico-arrow:active {
        color: #000 !important;
        -webkit-transition: none;
        transition: none;
    }



/*------------------------------------*\
	site head
\*------------------------------------*/
.site-head {
    height: 97px;
}

.mobile .site-head {
    padding-right: 15px;
    padding-left: 15px;
    position: relative;
    z-index: 10;
}

.desktop .site-head {
    padding-right: 55px;
    padding-left: 55px;
    margin-left: auto;
    margin-right: auto;
}


.is-floating .wp-floating {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    line-height: 1.1em;
}

.mobile .is-floating .wp-floating {
    padding-right: 15px;
    padding-left: 15px;
}

.desktop .is-floating .wp-floating {
    padding-right: 55px;
    padding-left: 55px;
}



/*------------------------------------*\
	site body
\*------------------------------------*/
.site-body {
    overflow: hidden;
    background: #f4f4f4;
}



/*------------------------------------*\
	site footer
\*------------------------------------*/
.site-footer {
    padding-right: 55px;
    padding-left: 55px;
    background: #333;
}

.mobile .site-footer {
    text-align: center;
}

.site-footer__lnk {
    display: inline-block;
    padding: .4em .7em;
    color: rgba(255, 255, 255, 0.8);
    font-size: .85em;
    cursor: pointer;
    transition: color .3s, background .3s;
}

    .ie8 .site-footer__lnk {
        color: #ccc;
    }

    .is-active .site-footer__lnk {
        color: #fff;
        font-weight: 700;
    }

    .site-footer__li__itm .site-footer__lnk {
        padding-right: 1.5em;
        padding-left: 1.5em;
    }

    .site-footer__lnk:hover {
        color: #fff;
        text-decoration: underline;
    }

.site-footer__li {
    float: right;
}

.site-footer__li__itm {
    display: inline-block;
    position: relative;
}




/*------------------------------------*\
	site heading
\*------------------------------------*/
.mobile .site-nav .site-heading > .heading {
    font-size: 1.5em;
    font-weight: 400;
}

.site-nav .site-heading {
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
}

.site-heading__org-name {
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

    .ie8 .site-heading__org-name {
        color: #ccc;
    }

.site-heading > .heading {
    color: #fff;
    font-size: 1.5em;
    font-weight: 400;
    text-transform: uppercase;
}



/*------------------------------------*\
	heading
\*------------------------------------*/
.heading {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 1em;
    font-weight: 500;
    line-height: normal;
}

    .heading:hover {
        overflow: visible;
        white-space: normal;
    }



/*------------------------------------*\
  site-nav
\*------------------------------------*/
.mobile .site-nav {
    padding-top: 1em;
    padding-bottom: 1em;
}

.desktop .site-nav {
    float: left;
    position: relative;
    top: 1.4em;
    cursor: pointer;
    transition: top .5s;
}

    .desktop .is-floating .wp-floating .site-nav {
        top: .45em;
    }

.site-nav__heading {
    display: inline-block;
    margin-left: .8em;
    color: #fff;
    font-size: 1.6em;
    font-weight: 300;
}

.site-nav__li {
    background: #fff;
}

    .mobile .site-nav__li {
        width: 65%;
        height: 100%;
        border-bottom: 1px solid #dfe0e4;
        position: fixed;
        top: 0;
        left: -70%;
        z-index: 12;
        box-shadow: 5px 0 5px rgba(0, 0, 0, 0.4);
    }

    .mobile .site-nav__li.is-visible {
        left: 0;
    }

.desktop .site-nav__li {
    display: none;
    width: 18em;
    margin-top: 6px;
    position: absolute;
    top: 100%;
    left: 3em;
    z-index: 2;
}

    .desktop .site-nav__li.is-visible {
        display: block;
    }

.site-nav__li__itm.is-curr-pg {
    pointer-events: none;
}

.site-nav__li__itm > a {
    display: block;
    padding-top: .8em;
    padding-bottom: .8em;
    position: relative;
    font-weight: 500;
}

.mobile .site-nav__li__itm > a {
    padding-left: 1em;
}
.mobile .site-nav__li__itm:not(.is-curr-pg) > a {
    color: #333;
}

.desktop .site-nav__li__itm > a {
    padding-left: 2em;
    color: #fff;
    transition: padding .3s;
}

    .desktop .site-nav__li__itm:hover > a {
        padding-left: 2.5em;
    }

    .desktop .site-nav__li__itm.is-curr-pg > a {
        font-weight: 700;
        color: rgba(0, 0, 0, 0.6);
    }

    .ie8 .site-nav__li__itm.is-curr-pg > a {
        color: #000;
    }

    .desktop .site-nav__li__itm.is-curr-pg > a:before {
        content: "";
        width: 6px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.4);
    }

    .ie8 .site-nav__li__itm.is-curr-pg > a:before {
        background: #000;
    }

.site-nav > .ico-nav-li {
    color: #fff;
    font-size: 2.1em;
    cursor: pointer;
    transition: color .3s;
}

    .site-nav > .ico-nav-li:hover {
        color: #000;
    }

.site-nav .ico-arrow-down {
    color: #fff;
    font-size: 1.6em;
    transform: rotate(0deg);
    transition: color .3s, transform .5s;
}

    .site-nav .ico-arrow-down.is-active {
        color: #000;
        transform: rotate(-180deg);
    }



/*------------------------------------*\
  site-nav__share
\*------------------------------------*/
.site-nav__share {
    width: 100%;
    position: absolute;
    top: auto;
    bottom: 0;
}

.site-nav__share__head {
    padding: .5em 0;
    border-top: 1px solid #dfe0e4;
    border-bottom: 1px solid #eaeef1;
    background: #f9fafc;
    -webkit-transition: background 500ms;
    transition: background 500ms;
    text-align: center;
}

.site-nav__share__heading {
    display: inline-block;
    margin-right: 2%;
    color: #000;
    font-size: 1em;
    text-align: center;
}

.site-nav__share__body {
    display: none;
    padding: 1em;
    position: relative;
    background: #fff;
}

.site-nav__share .ico {
    padding: .35em;
    color: #fff;
    font-size: 1.4em;
    transition: transform .3s, color .3s;
}

    .site-nav__share .ico.is-active {
        color: #000;
        transform: rotate(180deg);
    }



/*------------------------------------*\
	popup
\*------------------------------------*/
.popup {
    display: none;
    position: absolute;
    z-index: 9;
    border-radius: 3px;
    background: #fff;
    background: rgba(255, 255, 255, 0.95);
    cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.popup--light {
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}

    .tool-li .popup {
        top: 2.5em;
        line-height: normal;
    }

    .popup--resource {
        width: 35em;
        margin-left: -16em;
        left: 50%;
    }

    .popup--share {
        width: 30em;
        margin-left: -14em;
        left: 50%;
    }

    .site-footer .popup {
        right: 0;
        bottom: 3em;
    }

    .popup--login {
        width: 21em;
    }

    .popup--disclaimer,
    .popup--browser-support,
    .popup--update {
        width: 22em;
    }

    .popup--info-box {
        width: 20em;
        top: 0;
        right: -21em;
    }

    .popup--your-tax {
        top: 105%;
        line-height: 1.2em;
        font-size: .9em;
    }



/*------------------------------------*\
	popup__head
\*------------------------------------*/
.popup__head {
    padding: .8em 1.5em;
    text-align: left;
}

    .popup--light .popup__head {
        border-bottom: 1px solid #eaeef1;
        background: #f9fafc;
    }

    .popup--dk .popup__head {
        background: rgba(40, 40, 40, 0.9);
    }

    .ie8 .popup--dk .popup__head {
        background: #333;
    }

    .popup--resource .popup__head {
        padding: 0;
    }

    .popup--info-box .popup__head {
        position: relative;
    }

.popup--light .popup__head .heading {
    display: inline-block;
    font-weight: 500;
    color: #3c4144;
    text-align: left;
}

.popup--dk .popup__head .heading {
    color: #fff;
}

.popup--info-box > .popup__head > .ico {
    height: 35px;
    margin-top: auto;
    margin-bottom: auto;
    position: absolute;
    top: 0;
    right: .2em;
    bottom: 0;
    font-size: 2.2em;
}



/*------------------------------------*\
	popup__body
\*------------------------------------*/
.popup--resource .popup__body {
    display: none;
}

.popup--dk .popup__body {
    border-top: none;
    border-right: solid 1px #dfe0e4;
    border-bottom: solid 1px #d0d1d5;
    border-left: solid 1px #dfe0e4;
}

.popup--resource .popup__body {
    height: 32em;
    padding-top: 2em;
    overflow-y: scroll;
    position: relative;
}

.popup--share .popup__body,
.popup--login .popup__body,
.popup--disclaimer .popup__body,
.popup--browser-support .popup__body,
.popup--update .popup__body {
    padding: 2em;
}

.popup--disclaimer .popup__body,
.popup--update .popup__body {
    height: 21em;
    overflow-y: scroll;
}

.popup--info-box .popup__body {
    padding: 1.1em 1.5em;
}

.popup--your-tax .popup__body {
    padding: .7em 1em;
}



/*------------------------------------*\
	popup-nav
\*------------------------------------*/
.popup-nav-li {
    display: table;
    width: 100%;
    line-height: 3em;
}

.popup-nav-li__itm {
    display: table-cell;
    padding: 0 1em;
    position: relative;
    color: #aaa;
    font-size: .95em;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

    .popup-nav-li__itm.is-curr {
        border-left: 1px solid #dfe0e4;
        border-right: 1px solid #dfe0e4;
        position: relative;
        top: 1px;
        background: #fff;
        pointer-events: none;
    }

    .popup-nav-li__itm:first-of-type.is-curr {
        border-left: none;
    }

    .popup-nav-li__itm:last-of-type.is-curr {
        border-right: none;
    }

    .popup-nav-li__itm:hover {
        color: #000;
    }

.popup-nav-li__itm > .ico,
.popup-nav-li__itm > span {
    transition: color .3s;
}

.popup-nav-li__itm > .ico {
    margin-right: .25em;
    vertical-align: middle;
    font-size: 1.6em;
}

    .popup-nav-li__itm:hover > .ico {
        color: #000;
    }



/*------------------------------------*\
	sect nav list
\*------------------------------------*/
.sect-nav-li {
    position: relative;
}

.mobile .sect-nav-li {
    display: table;
    width: 100%;
}

.desktop .sect-nav-li {
    float: right;
}

.sect-nav-li__itm {
    position: relative;
    text-align: center;
}

.mobile .sect-nav-li__itm {
    display: table-cell;
    padding: 1em .5em;
    vertical-align: middle;
}


.desktop .sect-nav-li__itm {
    display: inline-block;
    padding-top: 21px;
    padding-right: 1.3em;
    padding-bottom: 21px;
    padding-left: 1.3em;
    cursor: pointer;
    transition: background .3s, padding .3s, margin .3s;
}

    .support-pg .sect-nav-li__itm:last-child {
        display: none !important;
    }

    .desktop .is-floating .sect-nav-li__itm {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .desktop .sect-nav-li__itm.is-curr {
        padding-right: 2.8em;
        padding-left: 2.8em;
        margin-right: 1em;
        margin-left: 1em;
        pointer-events: none;
    }

        .desktop body:not(.is-floating) .wp-floating .sect-nav-li__itm.is-curr {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: #f4f4f4;
            box-shadow: 3px -2px 2px rgba(0, 0, 0, .15);
        }

        .ie8 body.is-floating .wp-floating .sect-nav-li__itm.is-curr {
            background: url(../img/bg-transp-100.png);
        }

    .ie8 .support-pg .sect-nav-li__itm:nth-child(4),
    .ie8 .support-pg .sect-nav-li__itm:nth-child(5) {
        display: none;
    }

    .mobile .wp-floating .sect-nav-li__itm.is-curr:after,
    .desktop .is-floating .wp-floating .sect-nav-li__itm.is-curr:after {
        content: "";
        width: 100%;
        height: 4px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #fff;
    }

.sect-nav-li__itm > span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1em;
    font-weight: 500;
    text-transform: uppercase;
    -webkit-transition: color 300ms;
    transition: color 300ms;
}
    .mobile .sect-nav-li__itm.is-curr > span {
        color: #fff;
    }

    .ie8 .sect-nav-li__itm {
        color: #ccc;
    }

    .sect-nav-li__itm.is-curr > span {
        font-weight: 700;
    }

    .is-floating .sect-nav-li__itm.is-curr > span {
        color: #fff;
    }



/*------------------------------------*\
  lnk-to-org
\*------------------------------------*/
.mobile .lnk-to-org {
    display: block;
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.desktop .lnk-to-org {
    opacity: 0;
    position: relative;
    left: -3%;
    z-index: 1;
}

    .desktop .sect--contact .lnk-to-org {
        display: block;
        margin-bottom: 1em;
        left: -10%;
    }

    .desktop .lnk-to-org.is-visible {
        opacity: 1;
        left: 0;
    }



/*------------------------------------*\
  sect
\*------------------------------------*/
.sect {
    padding-top: 4em;
    position: relative;
}

.sect__heading {
    margin-bottom: .7em;
    line-height: normal;
    font-size: 2.5em;
    font-weight: 100;
}

.sect__heading > b {
    font-weight: 400;
}

.sect__txt {
    font-size: 1.05em;
    line-height: 1.65em;
}

.sect__txt > a {
    color: inherit;
}

.index-pg .sect__txt--contact {
    display: none;
}

.index-pg .sect__txt--contact > a {
    color: #000;
    font-weight: 500;
    text-decoration: underline;
    transition: color .3s;
}

.sect--support .sect__txt--lnk-sect a {
    text-decoration: underline;
    cursor: pointer;
    transition: color .3s;
}



/*------------------------------------*\
	Form Group
\*------------------------------------*/
.form {
    position: relative;
}

.form-grp {
    position: relative;
}

    .form-grp:not(:last-of-type) {
        margin-bottom: 2.5em;
    }

    .sect--give-now .form-grp,
    .sect--give-later .form-grp {
        display: none;
    }

.form-grp > .ico {
    opacity: 0;
    border-radius: 50%;
    position: absolute;
    right: -5px;
    top: -.1em;
    z-index: 1;
    color: #ccc;
    font-size: 1.5em;
    cursor: help;
    transition: opacity .3s;
}

    .form-grp > .ico:hover {
        color: #000;
    }

    .ie8 .form-grp > .ico {
        display: none;
        opacity: 1;
    }

    .form-grp:hover > .ico {
        opacity: 1;
    }

    .ie8 .form-grp:hover > .ico {
        display: block;
    }



/*------------------------------------*\
  tooltip
\*------------------------------------*/
.tooltip {
    display: none;
    width: 100%;
    padding: .5em 1em;
    margin: 0 auto;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 9;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    text-align: center;
}

    .ie8 .tooltip {
        background: #333;
    }



/*------------------------------------*\
	tax info
\*------------------------------------*/
.tax-info-li {
    display: none;
    padding: 1em;
    border-radius: 7px;
    background: #f4f4f4;
    margin-top: 2.5em;
}

.tax-info-li__itm {
    line-height: 1.7em;
    text-align: left;
    text-indent: 2em;
}

.mobile .tax-info-li__itm {
    text-align: center;
}

    .tax-info-li__itm > span:nth-of-type(1) {
        font-weight: 500;
    }



/*------------------------------------*\
  Steps
\*------------------------------------*/
.mobile .steps {
    padding: 1em;
    margin-top: 1em;
    border-radius: 10px;
    background: #f3f3f3;
    text-align: center;
}

.desktop .steps {
    width: 40em;
    opacity: 0;
    position: absolute;
    top: -1em;
    left: 135%;
    z-index: 1;
}

.desktop .steps:before {
    content: "......";
    position: absolute;
    left: -2em;
    top: .3em;
    font-size: 1.7em;
    color: #aaa;
}

.steps__num {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    position: relative;
}

.mobile .steps__num {
    margin-right: auto;
    margin-left: auto;
}

.desktop .steps__num {
    display: inline-block;
    vertical-align: top;
}

.ie8 .steps__num {
    behavior: url(asset/pie.htc);
}

.steps__num > span {
    position: absolute;
    height: 1.2em;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
    line-height: normal;
}

.steps__cont {
    display: inline-block;
    width: 88%;
    padding-left: 1.25em;
    margin-left: -4px;
}

.steps__cont > b {
    display: block;
    margin-top: .9em;
    margin-bottom: .9em;
    position: relative;
    font-size: 1.1em;
}



/*------------------------------------*\
  Capital Gain
\*------------------------------------*/
.mobile .capital-gain {
    padding: 1em;
    margin-top: 1em;
    border-radius: 10px;
    background: #f9f9f9;
}

.desktop .capital-gain {
    width: 230%;
    padding: 1.5em 2em;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    left: 123%;
}

    .sect--give-now .capital-gain {
        top: -4em;
    }

    .sect--give-later .capital-gain {
        top: -2.6em;
    }

.desktop .capital-gain:after {
    background: transparent;
    content: "";
    position: absolute;
    display: block;
    border: 11px transparent solid;
    border-right-color: #dfe0e4;
    right: 100%;
    top: 38%;
}



/*------------------------------------*\
  Hint
\*------------------------------------*/
.hint {
    padding: 1em;
    margin-top: 1em;
    border-radius: 10px;
    position: relative;
    color: #fff;
    text-align: center;
}


.hint:after {
    content: "";
    width: 0;
    height: 0;
    bottom: 100%;
    border-style: solid;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    position: absolute;
    z-index: 1;
    border-width: 10px;
}

    .hint--adj-val:after,
    .hint--no-val:after {
        margin-right: auto;
        margin-left: auto;
        right: 0;
        left: 0;
    }

    .sect--give-now .hint--minus-val:after {
        right: 17%;
    }

    .sect--give-later .hint--minus-val:after {
        right: 34%;
    }




/*------------------------------------*\
  Chart
\*------------------------------------*/
.chart {
    position: relative;
}

    .chart__svg {
        width: 100%;
    }

    .sect--give-now .chart__svg {
        height: 18em;
    }

    .sect--give-later .chart__svg {
        height: 22em;
    }

    .sect--endowment .chart__svg {
        height: 14em;
    }

.heading--endowment-chart {
    margin-bottom: 1em;
    text-align: center;
}

.chart-desc {
    display: block;
    color: #aaa;
    text-align: center;
    font-style: italic;
}

    .chart-desc--endowment {
        color: #aaa;
        text-align: center;
    }



/*------------------------------------*\
  Separate Line
\*------------------------------------*/
.sep-line {
    margin-right: auto;
    margin-left: auto;
    height: 2px;
    border-bottom-width: 1px;
    border-bottom-color: #ddd;
}

    .sep-line--solid {
        border-bottom-style: solid;
    }

    .sep-line--dashed {
        border-bottom-style: dashed;
    }

    .sep-line--dotted {
        border-bottom-style: dotted;
    }

    .sep-line--sm {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .sep-line--mm {
        margin-top: 1.5em;
        margin-bottom: 1.5em;
    }

    .sep-line--lm {
        margin-top: 2em;
        margin-bottom: 2em;
    }

    .sep-line--chart {
        width: 90%;
    }



/*------------------------------------*\
  summary
\*------------------------------------*/
.summ-li {
    white-space: nowrap;
    padding-top: 1.5em;
    padding-right: 1.5em;
    padding-bottom: 1em;
    position: relative;
}

    .sect--give-later .summ-li {
        padding-bottom: 2em;
    }

.summ-li__itm {
    display: inline-block;
    opacity: 0;
    white-space: normal;
    width: 25%;
    padding-right: 2%;
    position: relative;
    vertical-align: top;
    z-index: 1;
}

.summ-li__symbol {
    padding: 8%;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.mobile .summ-li__symbol {
    width: 80%;
}

.desktop .summ-li__symbol {
    width: 54%;
}

.ie8 .summ-li__symbol {
    behavior: url(asset/pie.htc);
    box-shadow: none;
}
    /*green colr*/
    .summ-li__itm--donation .summ-li__symbol,
    .summ-li__itm--bequest .summ-li__symbol {
        background-color: #84ab69;
    }

    /*ico-blue*/
    .summ-li__itm--tax-credit .summ-li__symbol {
        background-color: #1b94d6;
    }

    /*ico-red*/
    .summ-li__itm--reduce-tax .summ-li__symbol {
        background-color: #d74343;
    }

    /*ico-yellow*/
    .summ-li__itm--cost-of-donation .summ-li__symbol {
        background-color: #fbc642;
    }

    /*ico-orange*/
    .summ-li__itm--heirs .summ-li__symbol {
        background-color: #f68919;
    }

/*arrow*/
.summ-li__symbol__arrow {
    display: block;
    width: 0;
    border-top: 10px solid;
    position: absolute;
    left: 82%;
    top: 46%;
    z-index: -1;
}

    .summ-li__symbol__arrow.is-visible {
        border-top: 10px #ddd solid;
    }
    .mobile .summ-li__symbol__arrow.is-visible {
        width: 40%;
    }
    .desktop .summ-li__symbol__arrow.is-visible {
        width: 100%;
    }

.summ-li__symbol__arrow:after {
    content: "";
    display: block;
    position: absolute;
    left: 100%;
    top: -18px;
    background: transparent;
    border: 13px transparent solid;
    border-left-color: #ddd;
}

.summ-li__cont {
    margin-top: 1em;
    text-align: center;
    line-height: normal;
}

.summ-li__cont > span:first-child {
    display: block;
    margin-bottom: .6em;
    font-weight: 500;
}

.summ-li__cont > .ico {
    vertical-align: top;
    color: #fff;
    font-size: 1.5em;
    cursor: help;
}



/*------------------------------------*\
  Google map
\*------------------------------------*/
.map {
    width: 100%;
    height: 100%;
}

.mobile .map {
    height: 20em;
    margin-bottom: 3em;
}
/*------------------------------------*\
  itm style
\*------------------------------------*/
.li > li {
    margin-left: 1.2em;
    text-align: left;
}

    .li--disc > li {
        list-style: disc;
    }

    .li--num > li {
        list-style: decimal;
    }

    .li--esm > li:not(:last-child) {
        margin-bottom: .3em;
    }

    .li--sm > li:not(:last-child) {
        margin-bottom: .5em;
    }

    .li--mm > li:not(:last-child) {
        margin-bottom: 1em;
    }

    .li--lm > li:not(:last-child) {
        margin-bottom: 2em;
    }



/*------------------------------------*\
  texts
\*------------------------------------*/
.txt-val {
    font-size: 1.2em;
    font-weight: 700;
}

    .popup .txt-val {
        display: block;
        margin-top: .5em;
    }



/*------------------------------------*\
	Icon
\*------------------------------------*/
.ico {
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
}

.ico-zoom {
    display: none;
    width: 50px;
    height: 50px;
    margin: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    color: #444;
    font-size: 4.5em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}



/*------------------------------------*\
  link
\*------------------------------------*/
.lnk {
    color: inherit;
    cursor: pointer;
}

    .lnk--underline { text-decoration: underline !important; }

    .lnk:hover,
    .sect__txt .lnk,
    .sect--support .lnk { text-decoration: underline; }



/*------------------------------------*\
	color
\*------------------------------------*/
.colr--green { color: #84ab69; }
.colr--blue { color: #1b94d6; }
.colr--red { color: #d74343; }
.colr--yellow { color: #fbc642; }
.colr--orange { color: #f68919; }



/*------------------------------------*\
	black bg
\*------------------------------------*/
.black-bg {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    background: rgba(0, 0, 0, 0.6);
}



/*------------------------------------*\
  Placeholder
\*------------------------------------*/
.wp-place-holder { position: relative; }

    .form--share .wp-place-holder { margin-left: .5em; }

    .form--login .wp-place-holder { margin-bottom: 1em; }

.wp-place-holder__ico {
    height: 1.5em;
    margin-top: auto;
    margin-bottom: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: .5em;
    font-size: 1.5em;
}

.place-holder {
    display: none;
}

.ie8 .place-holder,
.ie9 .place-holder {
    display: inline-block;
    position: absolute;
    left: 1em;
    z-index: 11;
    color: #aaa;
    cursor: text;
}

    .ie8 .form--share .place-holder,
    .ie9 .form--share .place-holder { top: .7em; }

    .ie8 .form--login .place-holder,
    .ie9 .form--login .place-holder { top: .4em; }



/*------------------------------------*\
  Loading Spinner
\*------------------------------------*/
.loading-spinner {
    display: none;
    width: 80px;
    height: 80px;
    margin: auto;
    z-index: 9;
    animation: rotate 2s linear infinite;
    transform-origin: center center;
}

.loading-spinner--fixed {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.loading-spinner--absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.loading-spinner--global {
    display: block;
}

.loading-spinner__path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes color {
    100%, 0% { stroke: #d62d20; }
    40% { stroke: #0057e7; }
    66% { stroke: #008744; }
    80%,
    90% { stroke: #ffa700; }
}



/*------------------------------------*\
	Org Name
\*------------------------------------*/
.org-name {
    white-space: nowrap;
    word-break: keep-all;
}

.comparison-table .org-name { white-space: normal; }

.org-name--the:before {
    content: "the ";
}

.fr .org-name--the:before {
    content: "la ";
}

.org-name--the--cap:before {
    content: "The ";
}

.fr .org-name--the--cap:before {
    content: "La ";
}

.sect--give-now .sect-desc .org-name--the {
    text-transform: capitalize;
}



/*------------------------------------*\
	Select Org
\*------------------------------------*/
.select-org {
    display: none;
    width: 10em;
    margin: 0 auto;
    position: fixed;
    bottom: 1.5em;
    right: 0;
    left: 0;
    z-index: 100;
}



/*------------------------------------*\
	Sliding Container
\*------------------------------------*/
.sliding-ct {
    display: none;
    position: relative;
    border-bottom: solid 1px #eaeef1;
    background: #f9fafc;
}



/*------------------------------------*\
	Your Result Options
\*------------------------------------*/
.your-result-opt {
    display: inline-block;
    float: right;
}

.your-result-opt__btn {
    display: inline-block;
    cursor: pointer;
    -webkit-transition: color .3s;
    transition: color .3s;
}

    .your-result-opt__btn:not(:last-of-type) {
        margin-right: .5em;
    }

.mobile .your-result-opt__btn {
    padding: 1em;
    position: relative;
    border-radius: 50%;
}

.desktop .your-result-opt__btn {
    padding-right: .8em;
    padding-left: .8em;
    border-radius: 10px;
}

    .your-result-opt__btn.is-active {
        color: #000;
    }

.your-result-opt__btn > span {
    color: #fff;
    font-size: 0.7em;
    font-weight: 500;
    transition: color .3s;
}

.your-result-opt__btn > .ico {
    margin-right: .1em;
    color: rgba(255, 255, 255, 0.5);
    transition: color .3s;
}

    .mobile .your-result-opt__btn > .ico {
        width: 1em;
        height: 1em;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

.your-result-opt__btn.is-active > span,
.your-result-opt__btn.is-active > .ico {
    color: #000;
}

.ie8 .your-result-opt__btn > .ico {
    color: #fff;
}



/*------------------------------------*\
	Comparison Table
\*------------------------------------*/
.comparison-table {
    margin-bottom: 2em;
    border: 1px solid #eaeef1;
}

.comparison-table__title {
    margin-bottom: 2em;
}

.comparison-table__header {
    background: #555;
}

.wp-overflow {
    overflow-x: scroll;
}

.comparison-table__header th {
    padding: .7em .5em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-collapse: collapse;
    color: #fff;
    font-weight: 400;
    text-align: center;
    line-height: 1.2em;
}

.comparison-table__body td {
    padding: .7em;
    border: 1px solid #dfdfdf;
    border-collapse: collapse;
    font-size: .9em;
}

.comparison-table__sub-heading {
    background: #efefef;
    text-align: center;
}

@media all and (max-width: 319px) {
    html {
        font-size: 12px;
    }
}

@media all and (min-width: 320px) and (max-width: 949px) {
    html {
        font-size: 13px;
    }
}

@media print {
    html {
        font-size: 10pt;
    }

    .site-head,
    .contact,
    .site-footer {
        display: none;
    }

}


.mobile .mobile-lyt {
    width: 100%;
    height: 450px;
    opacity: 0;
    visibility: hidden;
    overflow-y: scroll;
    padding-top: 2em;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0;
    position: fixed;
    left: 0;
    bottom: -370px;
    background: rgba(255,255,255,0.9);
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2);
    transition: bottom .5s ease,  opacity .5s;
    z-index: 9;
}
    .mobile  .mobile-lyt.is-show {
        opacity: 1;
        visibility: visible;
    }

    .mobile  .mobile-lyt.is-active {
        bottom: 10px;
    }


.mobile .mobile-lyt__btn {
    display: block;
    width: 100%;
    padding-top: .7em;
    padding-bottom: .7em;
    margin-bottom: 2em;
    font-size: 1.1em;
}