* { margin: 0; padding: 0; box-sizing: border-box; }
html { width: 100%; height: 100%; }
@font-face {
    font-family: "rotondac-bold";
    src: url("/newpredanie/font/rotondac-bold.eot");
    src: url("/newpredanie/font/rotondac-bold.eot?#iefix") format("embedded-opentype"), url("/newpredanie/font/rotondac-bold.woff") format("woff"), url("/newpredanie/font/rotondac-bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "rotondac";
    src: url("/newpredanie/font/rotondac.eot");
    src: url("/newpredanie/font/rotondac.eot?#iefix") format("embedded-opentype"), url("/newpredanie/font/rotondac.woff") format("woff"), url("/newpredanie/font/rotondac.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body { font-family: "PT Sans", Arial, sans-serif; width: 100%; height: 100%; }

.banner-container { background: #fffef7; border: 1px solid #c7dce8; }
a.banner , a.banner:active, a.banner:visited { text-decoration: none; color: #000; cursor: pointer; }
.banner .name { font-weight: bold; font-size: 110%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner .cause { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.banner .button { background: #ffd600; color: #1b5d60; }
.banner .image span { position: absolute; bottom: 2px; font-weight: bold; font-size: 140%; left: 10px; color: #fff; opacity: 0.5; }
/*
.banner .desc { display: none; }
.banner .collected { display: none; }
*/

/* banner 486x60 */
@media screen and (height: 60px) {
    .banner .image { width: 13%; float: left; overflow: hidden; }
    .banner .section-right { width: 87%; float: left; }
    .banner .section.label { float: left; width: 62%; }
    .banner .button { width: 38%; padding-top: 4.5%; text-align: center; height: 100%; font-weight: bold; font-size: 110%; float: right }
    .banner .name { width: 100%; padding: 5px 10px 2px 10px; font-size: 120%; }
    .banner .cause { padding: 0px 5px 10px 10px; font-size: 90% }
    .banner img { width: 110%; margin: -5px; }
    .banner .image span { font-size: 66%; left: 3px; bottom: 0; }
}
/* banner 250x80 */
@media screen and (height: 80px) {
    .banner .image { width: 34%; float: left; overflow: hidden; }
    .banner .section-right { width: 66%; float: left; font-size: 80%; }
    .banner .name { width: 100%; padding: 8px 8px 2px 8px; }
    .banner .cause { padding: 0px 0px 2px 8px; }
    .banner .button { width: 100%;  padding-top: 3%;  text-align: center;  height: 100%;  font-weight: bold; }
    .banner img { width: 110%; margin: -5px; }
    .banner .image span { font-size: 76%; }
}
/* banner 240x100 */
@media screen and (height: 100px) {
    .banner .image { width: 45%; float: left; overflow: hidden; }
    .banner img { width: 105%; margin: -5px; }
    .banner .section-right { width: 55%; float: left; font-size: 80%; }
    .banner .section-right .label { height: 70%; }
    .banner .name { width: 100%; padding: 8px 8px 2px 8px; }
    .banner .cause { padding: 0px 0px 2px 8px; font-size: 99%; white-space: unset; height: 50%; }
    .banner .button { width: 100%;  padding-top: 4%;  text-align: center;  height: 100%;  font-weight: bold; }
    .banner .image span { font-size: 100%; }
}
/* banner 200x100 */
@media screen and (width: 200px) and (height: 100px) {
    .banner .image { width: 40%; float: left; padding: 14px 2px 14px 14px; position: relative; }
    .banner img { width: 90% }
    .banner .section-right { width: 55%; float: left; font-size: 80%; position: relative }
    .banner .section-right .label { height: 70%; }
    .banner .name { width: 100%; padding: 8px 8px 2px 0px; }
    .banner .cause { padding: 0px 0px 2px 0px; font-size: 99%; white-space: unset; height: 50%; }
    .banner .button { width: 100%;  padding-top: 3%;  text-align: center;  height: 100%;  font-weight: bold; position: fixed; left: 0;}
    .banner .image span { font-size: 55%; position: absolute; bottom: 10px; left: 12px; }
}
/* banner 120x240 */
@media screen and (height: 240px) {
    .banner .image { overflow: hidden; position: relative; padding: 9% 9% 4% 9%; }
    .banner img { width: 100%; }
    .banner .section-right { font-size: 80%; text-align: center; }
    .banner .name { width: 100%; padding: 0px 8px 2px 8px; font-size: 6vh; }
    .banner .cause { padding: 0 10px 0 10px; font-size: 4.5vh;  white-space: unset; line-height: 20px }
    .banner .button { width: 100%;  padding-top: 6%; text-align: center; font-weight: bold; font-size: 6vh; height: 45px; position: absolute; bottom: 0px; }
    .banner .image span { font-size: 12vw; bottom: 5%; left: 15%; }
    .banner-container { height: 100%; }
    .label { position: relative; }
}
/* banner 200x300 */
@media screen and (height: 300px) {
    .banner .image { overflow: hidden; position: relative; padding: 9% 9% 4% 9%; }
    .banner img { width: 100%; }
    .banner .section-right { font-size: 80%; text-align: center; }
    .banner .name { width: 100%; padding: 0px 8px 2px 8px; font-size: 6vh; }
    .banner .cause { padding: 0 10px 0 10px; font-size: 4.5vh;  white-space: unset; line-height: 20px }
    .banner .button { width: 100%;  padding-top: 6%; text-align: center; font-weight: bold; font-size: 6vh; height: 45px; position: absolute; bottom: 0px; }
    .banner .image span { font-size: 12vw; bottom: 5%; left: 15%; }
    .banner-container { height: 100%; }
    .label { position: relative; }
}
/* banner 260x400 */
@media screen and (min-height: 400px) {
    .banner .image { overflow: hidden; height: 248px; position: relative; }
    .banner img { width: 100%; padding: 18px; }
    .banner .section-right .section.label { height: 86px; }
    .banner .section-right { font-size: 80%; text-align: center; }
    .banner .name { width: 100%; padding: 10px 8px 2px 8px; font-size: 140%; }
    .banner .cause { padding: 0 10px 0 10px; font-size: 120%; height: 42px; white-space: unset; }
    .banner .button { width: 100%;  padding: 16px; text-align: center; font-weight: bold; font-size: 190%; margin-top: 37px;}
    .banner .image span { font-size: 200%; left: 40px; bottom: 4px; }
}
/* banner 240x220 */
@media screen and (min-width: 240px) and (max-width: 486px) and (height: 220px) {
    .banner .image { float: left; padding: 10px; text-align: center; position: relative; width: 37%; }
    .banner img { width: 100%; }
    .banner .section-right { width: 63%; float: left; font-size: 80%; position: relative }
    .banner .section-right .label { height: 175px; }
    .banner .name { width: 100%; padding: 8px 8px 2px 0; white-space: unset; }
    .banner .cause { padding: 5px 0px 2px 0px; font-size: 99%; white-space: unset; height: 50%; }
    .banner .button { width: 100%; padding: 13px; text-align: center; font-weight: bold; position: fixed; left: 0;}
    .banner .image span { font-size: 5vw; position: absolute; bottom: 10px; left: 24px; }
}
/* banner 660x220*/
@media screen and (min-width: 487px) {
    .banner-container { height: 220px; overflow: hidden; }
    .banner .image { width: 33%; float: left; overflow: hidden; }
    .banner img { width: 104%; margin: -4px 0px 0px -4px; min-width: 222px; }
    .banner .section-right { width: 67%; float: left; }
    .banner .name { width: 100%; padding: 15px 10px 10px 20px; font-size: 140%; }
    .banner .cause { padding: 0 10px 10px 20px; }
    .banner .button { width: 100%; padding: 18px 18px 19px 18px; text-align: center; font-weight: bold; font-size: 140%; margin-top: 59px }
    .banner .image span { font-size: 4.5vw; bottom: 0px; left: 24px; }
    .banner .collected { display: block; padding: 20px }
    .collected .line-container { width: 100%; height: 4px; background: #b6d8e7 }
    .collected .line-container .line { background: #ffdd00; height: 100%; width: 70%; }
    .collected .sums { padding-bottom: 5px; }
    .collected .in { float: left }
    .collected .total { float: right }
}
/* banner 960x150 */
@media screen and (min-width: 960px) and (height: 150px) {
    .banner-container { height: 150px; }
    .banner .image { width: 15%; float: left; overflow: hidden; }
    .banner .section-right { width: 85%; float: left; }
    .banner .section.label { float: left; width: 62%; }
    .banner .button { width: 38%; padding-top: 7.5%; text-align: center; height: 100%; font-weight: bold; font-size: 140%; float: right }
    .banner .name { width: 100%; padding: 15px 10px 2px 15px; font-size: 120%; }
    .banner .cause { padding: 5px 5px 10px 15px; font-size: 100% }
    .banner img { width: 110%; margin: -4px; }
    .banner .image span { font-size: 136%; left: 12px; bottom: 0; }
    .banner .desc { padding: 0px 10px 10px 15px; display: block; height: 65px; overflow: hidden; line-height: 22px; }
}

/* Основные стили для collected */
.collected {
    display: block;
    padding: 20px;
}
.collected .line-container {
    width: 100%;
    height: 4px;
    background: #b6d8e7;
    position: relative;
}
.collected .line-container .line {
    background: #ffdd00;
    height: 100%;
    width: 0;
    transition: width 0.5s;
}
.collected .sums {
    padding-bottom: 5px;
    /*
    display: flex;
    */
    justify-content: space-between;
}

/* Адаптивные стили для collected */
@media screen and (max-width: 600px) {
    .collected {
        padding: 10px;
    }
    .collected .sums {
        flex-direction: column;
        align-items: flex-start;
    }
    .collected .in, .collected .total {
        margin-bottom: 5px;
    }
}