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, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin:         0;
    padding:        0;
    border:         0;
    font-size:      100%;
    font:           inherit;
    vertical-align: baseline;
}

html, body {
    height: 100%;
}

ul li {
    list-style:  none;
    line-height: 28px;
}

body {
    background: #e6ebee;
    font:       18px Georgia, 'Times New Roman', serif;
}

b {
    font-weight: bold;
}

.main-form,
.share-form {
    max-width:     768px;
    padding:       5%;
    margin:        5% auto;
    border-radius: 10px;
    background:    white;
}

body.for.sobor-lv {
    background: none;
}

body.for.sobor-lv .main-form {
    max-width: none;
    margin:    0;
}

.share-form {
    padding:    3% 5%;
    background: gainsboro;
}

.main-form .banner33 {
    width:           100%;
    background:      url('../img/banner33.jpg') 50% 50% no-repeat;
    background-size: contain;
    height:          45vw;
    max-height:      340px;
    margin-bottom:   20px;
}

.main-form h1,
.share-form h1 {
    font-size:      25px;
    line-height:    1.5;
    margin-bottom:  1em;
    text-transform: uppercase;
    color:          #333333;
    text-align:     center;
    margin-bottom:  22px;
    line-height:    1.5em;
    font-weight:    bold;
    letter-spacing: 0.1em;
}

.share-form h1 {
    color: orangered;
}

.main-form p,
.share-form p {
    color:       #000000;
    margin:      0 0 1em;
    text-align:  justify;
    line-height: 23px;
}

.share-form .link {
    padding:       15px;
    border-radius: 5px;
    border:        1px solid orangered;
    background:    beige;
    color:         orangered;
    font-size:     24px;
}

.main-form p.center {
    text-align: center;
    margin:     50px 0;
}

.main-form p, .main-form li, .main-form i {
    font-size: inherit;
}

.main-form .note {
    display:        flex;
    color:          #a85010;
    padding-top:    20px;
    padding-bottom: 20px;
}

.main-form .note.info {
    border:          1px solid orange;
    background:      blanchedalmond;
    padding:         20px;
    box-sizing:      border-box;
    margin-top:      20px;
    justify-content: center;
    font-size:       20px;
    color:           #007c5b;
}

.main-form .note > *:first-child {
    width: 18%;
}

.main-form .note > *:last-child {
    width: 82%;
}

.main-form .note.border {
    border-bottom: 1px solid #a85010;
}

.main-form .note.donation > * {
    width:       50%;
    display:     flex;
    align-items: center;
}

.main-form .note.donation > *:first-child {
    justify-content: right;
    padding-right:   20px;
}

.main-form .note.donation input[type=text] {
    border:        1px solid #dadde0;
    padding:       5px;
    border-radius: 3px;
    box-shadow:    inset 0px 1px 2px 1px rgba(234, 234, 234, 0.45);
    width:         200px;
    font-size:     24px;
    outline:       none;
}

.main-form .note i {
    font-style:  italic;
    color:       gray;
    font-size:   14px;
    display:     block;
    margin:      0 25px 10px;
    line-height: 16px;
}

.main-form .note span {
    font-size:      0.7em;
    color:          black;
    display:        block;
    padding-left:   20px;
    padding-bottom: 10px;
}

.names-note {
    max-width:     400px;
    margin:        0 auto 20px;
    padding:       20px 40px;
    background:    white;
    border-radius: 10px;
}

.names-note.health {
    border: 1px solid #c01817;
}

.names-note.death {
    border: 1px solid #000000;
}

.names-note img {
    display:   block;
    margin:    0 0 20px;
    width:     100%;
    height:    auto;
    max-width: 400px;
}

.names-note.health img.death {
    display: none;
}

.names-note.death img.health {
    display: none;
}

.names-note .caption {
    color:          #c01817;
    font-size:      36px;
    text-align:     center;
    padding-bottom: 20px;
}

.names-note.death .caption {
    color: #000000;
}

.names-note .names input {
    width:     100%;
    border:    0;
    font-size: 24px;
    color:     #000000;
    outline:   none;
}

.names-note ol {
    margin-left:   20px;
    margin-bottom: 30px;
}

.names-note ol li {
    padding:     2px;
    font-size:   24px;
    line-height: 1.5;
}

.names-note.health ol li {
    border-bottom: 1px solid #ff0000;
    color:         #ff0000;
}

.names-note.death ol li {
    border-bottom: 1px solid #000000;
    color:         #000000;
}

.names-note .add-names,
.names-note .save {
    cursor:        pointer;
    background:    #007c5b;
    display:       block;
    margin:        0 auto;
    padding:       0 20px;
    height:        32px;
    text-align:    center;
    line-height:   32px;
    border:        1px solid #007c5b;
    border-radius: 3px;
    color:         #ffffff;
    font-size:     14px;
    width:         50%;
}

.names-note .save {
    margin-bottom: 10px;
    border:        none;
}

.names-note.death .save {
    background: black;
    color:      white;
}

.names-note.health .save {
    background: #c01817;
    color:      white;
}

.names-note .add-names.disabled {
    cursor:     default;
    background: #cccccc;
    border:     1px solid #cccccc;
}

.main-form .submit,
.share-form .submit {
    cursor:         pointer;
    background:     #007c5b;
    display:        block;
    margin:         20px auto;
    padding:        0 20px;
    height:         32px;
    text-align:     center;
    line-height:    32px;
    border:         1px solid #007c5b;
    border-radius:  3px;
    color:          #ffffff;
    font:           inherit;
    font-size:      14px;
    text-transform: uppercase;
}

.main-form .logos {
    display:         flex;
    justify-content: space-around;
}

div.error {
    color:       red;
    font-size:   14px;
    padding-top: 5px;
}

.main-form .terms {
    text-align: center;
}

.main-form .errors {
    width:       100%;
    text-align:  center;
    color:       red;
    font-size:   14px;
    line-height: 24px;
}

.main-form .note.donation input[type="text"].error {
    border: 1px solid red;
}

.info-table {
    display:      table;
    margin-top:   30px;
    border:       1px solid #cccccc;
    margin-left:  auto;
    margin-right: auto;
}

.info-table > * {
    display: table-row;
}

.info-table > * > * {
    display:    table-cell;
    padding:    10px;
    width:      50%;
    box-sizing: border-box;
}

.info-table > * > *:first-child {
    text-align: right;
}

.langs {
    color:          #999999;
    text-align:     center;
    padding-bottom: 30px;
}

.langs a {
    color:           #555555;
    text-decoration: none;
}

.langs a.active {
    font-weight: bold;
}

.langs a:hover {
    text-decoration: underline;
}

.langs img {
    width:          16px;
    height:         16px;
    vertical-align: top;
    margin-top:     3px;
    margin-right:   5px;
}

.back-to {
    padding:       10px 20px;
    color:         #a85010;
    background:    #f0e68c;
    border-bottom: 1px solid orange;
    margin-bottom: 20px;
}

.back-to a {
    text-decoration: none;
    color:           #a85010;
}

.order-type {
    width:         100%;
    border-radius: 10px;
    background:    khaki;
    border:        1px solid #a85010;
    padding:       20px;
    margin-bottom: 15px;
    box-sizing:    border-box;
}

.order-type h2 {
    border-bottom:  1px solid #a85010;
    padding-bottom: 5px;
    display:        block;
    width:          100%;
    color:          firebrick;
    margin-bottom:  10px;
}

.order-type .price {
    font-size: 0.7em;
    color:     brown;
}

.order-type .columns {
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    align-items:     baseline;
}

.order-type div.space {
    width:     20px;
    flex-grow: 0;
}

.order-type div.health,
.order-type div.death {
    padding:         5px 10px;
    border-radius:   5px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           calc(50% - 5px);
    box-sizing:      border-box;
}

.order-type div.death {
    background: black;
}

.order-type div.health {
    background: #c01817;
}

.order-type div.empty {
    width: calc(50% - 5px);
}

.order-type div.health.over {
    background: coral;
    cursor:     pointer;
}

.order-type div.death.over {
    background: gray;
    cursor:     pointer;
}

.order-type div a {
    text-decoration: none;
}

.order-type div.death a {
    color: white;
}

.order-type div.health a {
    color: white;
}

.order-type div .names {
    font-size: 0.8em;
    color:     orange;
}

.order-type div .names.active {
    color: limegreen;
}

.background {
    position:   absolute;
    display:    block;
    width:      100%;
    height:     100%;
    top:        0;
    left:       0;
    background: rgba(0, 0, 0, 0.8);
}

.background .names-note {
    position:          absolute;
    left:              50%;
    transform:         translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    max-width:         450px;
    box-sizing:        border-box;
    width:             100%;
}

.alert {
    background: #c01817;
    padding:    10px;
    color:      white;
    text-align: center;
}

.background .names-note .logos {
    height: 171px;
}

.background .names-note img {
    margin: 0;
}

.pay-done {
    display:         flex;
    justify-content: center;
    align-items:     center;
}

.pay-done-box {
    padding:       30px;
    border:        1px solid green;
    background:    lightgreen;
    border-radius: 15px;
    font-size:     28px;
    text-align:    center;
}

.pay-done-link {
    padding-top:     30px;
    display:         block;
    font-size:       20px;
    text-decoration: none;
    color:           maroon;
}

.pay-done-link:hover {
    text-decoration: underline;
}

.pay-done-interval {
    padding-top: 20px;
    display:     block;
    color:       black;
    font-size:   48px;
    text-align:  center;
}

.donate-image {
    max-width:      300px;
    max-height:     300px;
    border-radius:  10px;
    margin-right:   15px;
}

.jel-ref {
    display: flex;
    align-items: center;
    max-width: 100%;
    margin: 0px auto 50px auto;
    background: linear-gradient(135deg, gold 0%, orange 100%);
    border: 1px solid gray;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
}

.jel-ref:hover {
    text-decoration: none;
}

.jel-ref img {
    width: 200px;
    height: auto;
    display: block;
}

.jel-ref div {
    padding: 20px 25px;
    text-align: left;
    color: #222;
    flex: 1;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

@media screen and (max-width: 800px) {
    .jel-ref {
        flex-direction: column;
        padding-top: 20px;
    }

    .jel-ref img {
        border-radius:10px;
        width: auto;
    }

    .jel-ref div {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 480px) {
    .jel-ref {
        padding-top: 0;
    }
}

@media only screen and (max-width: 820px) {
    .info-table,
    .info-table > *,
    .info-table > * > * {
        display:    table;
        width:      100%;
        text-align: center;
    }

    .info-table > * > :first-child {
        text-align: center;
        background: #cccccc;
    }

    .main-form .note.donation,
    .main-form .note {
        display:        flex;
        flex-direction: column;
    }

    .main-form .note.donation > *,
    .main-form .note > * {
        width:           100%;
        justify-content: center;
        padding-bottom:  15px;
    }

    .main-form .note.donation > :first-child {
        justify-content: center;
        padding:         0;
        padding-bottom:  15px;
        text-align:      center;
    }

    .main-form .note > :first-child {
        width:          100%;
        text-align:     center;
        text-transform: uppercase;
    }

    .main-form .note > :last-child {
        width: 100%;
    }

    .main-form .note span {
        width: 15%;
    }
}

@media only screen and (max-width: 640px) {
    .order-type .columns {
        flex-direction: column;
    }

    .order-type div.health {
        margin-bottom: 5px;
    }

    .order-type div.health,
    .order-type div.death {
        width: 100%;
    }

    .order-type div.empty {
        display: none;
    }

    .background .names-note {
        padding: 20px;
    }

    .background .names-note .logos {
        height: auto;
    }
}

@media only screen and (max-width: 590px) {
    .main-form .note span {
        width:   100%;
        display: block;
        float:   none;
    }
}