header{
    min-width: 100%;
    width: 100%;
}

body{
    min-width: 840px;
}

.campaignGreenBackground{
    background-color:#22B14C;
}

.campaignGreenBackground .row{
    display: inline-block;
}

.noPadding{
    padding:0px;
}

.defaultPaddingTop{
    padding-top: 30px;
}

.donationRadar{
    background-color: #E5E5E5;
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.donationRadar h3, .payment h3{
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    color: #6D645E;
    display: inline-block;
    width: 100%;
    font-family: Roboto;
    margin-top: 15px;
}

#step-2 h3, #step-3 h3{
    margin-top: 40px;
    margin-bottom: 15px;
}

.donationRadar h3 .material-icons{
    line-height: 23px;
    vertical-align: bottom;
    margin-left: 10px;
}

.donationRadarContainer{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    height: 90px;
}

.donationRadarContainer .supporterHolder{
    padding-top: 2px;
    padding-bottom: 2px;
    width: 100%;
    display: inline-block;
    text-align: center;
    float: left;
    height: 30px;
}

.donationRadarContainer .supporterHolder.big{
    height: 90px;
}

.donationRadarContainer .supporterHolder .supporterMessage{
    height: 56px;
    padding: 2px 8px;
    width: 100%;
    text-align: center;
    display: inline-block;
    float: left;
    font-size: 14px;
    line-height: 16px;
    font-family: Roboto;
    white-space: pre-line;
}

.donationRadarContainer .avatarUrl{
    display: inline-block;
    padding-right: 10px;
    height: 20px;
}

.donationRadarContainer .supporterName{
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    font-family: Roboto;
}

.donationRadarContainer .flag{
    display: inline-block;
    padding-left: 10px;
}

.payment{
    background-color: #fff;
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 20px;
    display: inline-block;
    float: left;
}

.donationMotivationBox{
    padding-top: 10px;
    padding-bottom: 0px;
}

.donationMotivationBox .title{
    background-color: #22B14C;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 20px;
    margin-left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    color: #333;
    font-family: Roboto;
}

.donationMotivationBox .messageHolder{
    color: #fff;
    font-weight: bold;
    padding: 10px;
    padding-top: 40px;
    padding-bottom: 40px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    text-align: center;
    margin-top: -10px;
}

.donationMotivationBox .messageHolder .message{
    width: 75%;
    line-height: 30px;
    font-size: 22px;
    text-align: center;
    margin: 0 auto;
    font-family: Roboto;
}

.teamBox{
    font-family: Roboto;
}

.teamBox .instructions{
    color: #fff;
    font-size: 18px;
    margin: 35px auto;
    text-align: center;
    font-family: Roboto;
    font-weight: normal;
    min-height: 115px;
}

.teamBox .instructions .hoverInstruction{
    color: #fff;
    font-size: 18px;
    text-align: center;
    font-family: Roboto;
    font-weight: normal;
}

.teamBox #intro{
    height: 50px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.teamBox #intro p{
    display: none;
    font-size: 16px;
    line-height: 18px;
    color: #fff;
    padding: 0px;
}

.teamBox #intro p.active{
    display: block;
}

.teamBox .imageHolder{
    position:relative;
    height: 180px;
    min-width: 770px;
    margin-top: 5px;
}

@media (min-width: 992px) {
    .teamBox .imageHolder{
        height: 140px;
        min-width: 530px;
    }
}

@media (min-width: 1200px) {
    .teamBox .imageHolder{
        height: 168px;
        min-width: 655px;
    }
}

.teamBox .imageHolder >img{
    width: 100%;
}

.teamBox .imageHolder >div{
    display: inline-block;
    float: left;
    height: 100%;
    margin-left: -28px;
}
.teamBox .imageHolder >div>img{
    height: 100%;
    width: auto;
}

header{
    background-color: #000;
    display: inline-block;
    float: left;
    border: none;
}

#logo{
    float: left;
    display: inline-block;
    width: 28%;
}

h1.logoNew{
    display: table;
    float: none;
    margin: 0;
}

h1.logoNew{
    height: 60px;
}

h1.logoNew a{
    display: table-cell;
    float: none;
    vertical-align: middle;
}

h1.logoNew a img{
    vertical-align: middle;
}

#headerNav{
    display: inline-block;
    float: left;
    width: 70%;
    min-height: 60px;
    position: relative;
    line-height: 60px;
    margin-left: 10px;
}

#headerNav ul{
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

#headerNav ul li{
    display: inline-block;
    border-right: 1px solid #fff;
    padding-left: 0;
    padding-right: 5px;
    margin: 0px;
    /*width: 33.33%;*/
    width: auto;
}

#headerNav ul li:last-of-type{
    border-right: none;
    padding-right: 0;
}

#headerNav ul li>a{
    line-height: 16px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    /* hover, focus funkcio*/
    word-wrap: break-word;
    font-weight: normal;
    font-family: Roboto;
}

#userNav{
    display: inline-block;
    float: right;
    overflow: hidden;
}

#userNav a{
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 60px;
    font-family: Roboto;
}

#userNav a:hover, #userNav a:focus {
    font-size: 18px;
}

#userNav .avatar{
    display: inline-block;
    float: right;
    height: 38px;
    width: 38px;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 5px;
}

#userNav .userName{
    line-height: 60px;
    color: #fff;
    font-size: 18px;
    display: inline-block;
    float: left;
    font-family: Roboto;
    font-weight: bold;
}

.indicators{
    margin-bottom: 15px;
}
.indicators div.supporterIndicator{
    padding-top: 4px;
}

.indicators div.supporterIndicator,.indicators div#recurringIndicator {
    position: relative;
    display: inline-block;
    float: left;
    color: #fff;
}
.indicators div.supporterIndicator .indicatorContainer {
    padding: 0px;
    margin: 0px !important;
    min-height: 10px;
}
.indicators div#fundraiserDaysIndicator {
    height: 60px;
    color: #fff;
    width: 155px;
    margin-left: 0px !important;
    padding-top: 11px;
    display: inline-block;
    float: left;
}
.supporterIndicator b,#fundraiserDaysIndicator b {
    margin-right: 5px;
    font-size: 18px !important;
    line-height: 18px !important;
    width: 100%;
    display: block;
    text-align: center;
    font-family: Roboto;
}

#fundraiserDaysIndicator b{
    font-size: 21px !important;
}
.supporterIndicator .gray, #fundraiserDaysIndicator .gray {
    line-height: 15px;
    display: block;
    color: #fff;
    width: 100%;
    margin: 5px 0;
    text-align: center;
    font-size: 15px !important;
    font-family: Roboto;
    margin-bottom: 6px;
}
#fundraiserDaysIndicator .gray {
    text-align: left;
}
.indicatorLine {
    position: absolute;
    z-index: 20;
    background:rgb(68,176,216);
    min-height:10px;
    border-radius: 2px;
    margin: 0px !important;
    bottom:0px;
    left:0px;
    min-width: 70%;
}
.indicatorSkin {
    position: absolute;
    left:0;
    bottom:0;
    right:0;
    min-height:10px;
    z-index: 15;
    background-color: #DDD;
    border-radius: 2px;
    margin: 0px !important;
    width: 100%;
}

.supporterIndicator .gray{
    color: #fff;
    font-size: 14px;
}

.supporterIndicator .gray b, .fundraiserDaysIndicator .gray b{
    margin-right: 5px;
    font-size: 21px !important;
    line-height: 22px !important;
}

.supporterIndicator .gray{
    text-align: left;
}

.supporterIndicator .gray b{
    display: inline-block;
    width: auto;
}

#fundraiserDaysIndicator b, #fundraiserDaysIndicator .gray{
    text-align: center;
    width: 100%;
}

@media (min-width: 992px){
    #logo{
        width: 35%;
    }
    #headerNav{
        width: 65%;
        margin-left: 0;
    }
    #headerNav ul li {
        padding-left: 6px;
        padding-right: 10px;
    }
    #headerNav ul li>a {
        font-size: 15px;
    }
    .indicators div#fundraiserDaysIndicator{
        width: 250px;
        padding-right: 100px;
    }
}

@media (min-width: 1200px) {
    #logo {
        width: 30%;
    }

    #headerNav {
        width: 70%;
    }

    .indicators div#fundraiserDaysIndicator {
        width: 260px;
        padding-right: 100px;
    }
}

#pay-1{
    width: 100%;
}

#pay-1 .secure{
    position: absolute;
    top: 5px;
    right: 20px;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    color: #b7b7b7;
}

#pay-1 .secure .glyphicon{
    margin-right: 5px;
}

#step-2, #step-3{
    display: none;
    height: 315px;
}

#step-1{
    display: inline-block;
    height: 315px;
}

.supporterRadioButtons label, .supporterRadioButtons label>span{
    font-family: Roboto;
}

.supporterRadioButtons .table-cell > label.package-btn.unique_label{
    background-color: #e5e5e5;
    color: #6D645E;
    line-height: 50px;
    font-size: 14px;
}

.supporterRadioButtons .table-cell > label.package-btn.unique_label span{
    color: #6D645E;
    line-height: 50px;
    font-size: 14px;
}

section#selectYourPeriod .supporterRadioButtons .table-cell > label.package-btn.unique_label input.unique_value{
    width: 100%;
    height: 100%;
    margin: 0;
    display: none;
    border-color: #ccc;
    border-radius: 2px;
    text-align: center;
    font-size: 24px;
    font-family: Roboto;
    left: 0px;
    top: 0px;
    color: #484848;
}

#pay-1 #selectYourPeriod{
    margin-top: 0px;
    padding: 10px 20px;
    top: auto;
    left: auto;
    position: relative;
    display: inline-block;
    float: left;
    box-sizing: border-box;
    width: 100%;
    min-height: 352px;
}

#pay-1 #selectYourPeriod form{
    margin-bottom: 0px;
}

.periods{
    text-align: center;
}

.periods.radioIcons, .periods.radioIcons>div{
    display: inline-block;
    float: left;
    width: 100%;
    height: 250px;
}

@media (min-width: 992px) {
    .periods.radioIcons, .periods.radioIcons>div{
        height: 196px;
    }
}

.periods.radioIcons>div{
    width: 33.33%;
    height: 90%;
    padding: 0px;
    margin: 0px;
}

.periods.radioIcons label{
    height: 100%;
    width: 100%;
    display: inline-block;
    float:left;
    padding-left: 10px;
    padding-right: 10px;
}

.periods.radioIcons label span{
    top: auto;
    left: 43%;
    bottom: 0px;
}

.periods.radioIcons .titleHolder{
    display: table;
    margin: 0 auto;
}

.periods.radioIcons .titleHolder.diff{
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.periods.radioIcons .titleHolder p{
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}

.periods.radioIcons label p{
    padding-top: 0px;
    padding-bottom: 10px;
    text-transform: uppercase;
    color: #6D645E;
    font-family: Roboto;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
}

.periods.radioIcons label .titleHolder.diff p{
    font-family: Roboto;
    font-size: 12px;
    font-weight: 300;
    line-height: 20px;
}

.period-select{
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
}

.period-select label:hover, .period-select label:focus{
    cursor: pointer;
    border-bottom: 3px solid #22B14C;
}

.period-select input{
    display: none;
}

.period-select label{
    border: none;
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    color: #6D645E;
    display: inline-block;
    width: auto;
    padding: 0px 2px 5px 2px;
    margin-left: 2px;
    margin-right: 2px;
    font-family: Roboto;
}

.period-select label.active{
    border-bottom: 3px solid #22B14C;
}

.periods .radio label{
    display: inline-block;
    float: left;
    width: 100%;
}

.radio input[type=radio]:checked~.circle, label.radio-inline input[type=radio]:checked~.circle{
    border-color: #1492F3;
}

.periods .radio input[type=radio]:checked~.check, label.radio-inline input[type=radio]:checked~.check{
    background-color: #1492F3;
}

.periods .radio .icon{
    width: 75%;
    top: auto;
    left: auto;
    display: inline-block;
    position: relative;
    max-width: 120px;
    margin: auto 0;
    margin-top: 16px;
}

.periods .radio .icon.smaller{
    width: 65%;
}

.periods .radio .icon.debitCard{
    padding-top: 0px;
    margin-top: 0px;
}

.periods .radio .icon img{
    width: 100%;
    display: inline-block;
    float: left;
}

#pay-1 #step-1 #currencySelector{
    margin-left: 0px;
    margin-right: 0px;
    cursor: pointer;
    font-family: Roboto;
}

#pay-1 #step-1 #currencySelector option{
    font-family: Roboto;
}

#pay-1 .btn.next{
    background-color: red;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    line-height: 22px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    width: 100%;
    border-radius: 3px;
    display: inline-block;
    float: left;
    font-family: Roboto;
    margin: 8px 1px;
}

.payment #pay-1, .payment #pay-1 #selectYourPeriod{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    float: left;
}

#step-3 .periods.radioIcons .radio{
    width: 50%;
}

#step-3 .periods.radioIcons .radio label{
    height: 100%;
}

#step-3 .periods.radioIcons .radio .titleHolder{
    height: 28%;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}

#step-3 .periods.radioIcons .radio .titleHolder p{
    font-size: 12px;
    text-align: center;
    height: 100%;
    font-family: Roboto;
}

section.fundraiserParagraph{
    background: none;
    width: 100%;
    padding: 30px 50px;
    color: #6D645E;
    margin-top: 15px !important;
    margin-bottom: 15px;
    line-height: 25px;
    text-align: justify;
    font-family: Roboto;
}

section.fundraiserParagraph a{
    font-family: Roboto;
}

section.fundraiserParagraph h3:first-of-type{
     color: #000 !important;
}

section.fundraiserParagraph strong{
    color: #6D645E;
    font-family: Roboto;
}

section#fundraiserParagraph-2 img{
    width: 100% !important;
    height: auto !important;
}

.row .testimonial-slider-wrapper{
    margin: 0;
    background-color: initial;
}

.row .testimonial-slider-outer .testimonial-slider-inner{
    height: auto;
}

.testimonial-slide-box{
    height: auto;
}

.row .testimonial-slider-outer .testimonial-slide-box{
    margin-right: 25px;
    padding-right: 0px;
}

.row .testimonial-slider-outer .testimonial-slide{
    display: inline-block;
    float: left;
}

.row .viewport{
    min-height: 170px;
}

.row .testimonial-slider-outer .testimonial-slide-username{
    height: auto;
}

.normalContainer{
    border-radius: 20px;
    margin-top: 20px;
    text-align: center;
}

.campaignWhiteBackground {
    background-color: #fff;
}

.supporterHolder{
    font-family: Roboto;
}

.newtooltip{
    display: none;
}
.newtooltip p{
    display: none;
}

.answer_message{
    padding: 45px 20px;
}

#textFieldErrorMsg{
    color: rgb(204, 0, 0);
    padding: 5px;
    margin-bottom: 15px;
    border: 1px solid rgb(204, 0, 0);
    border-radius: 5px;
    text-align: center;
    display: none;
}

button.submit{
    border: none;
    border-radius: 3px;
    background-color: #20c552;
    color: #fff;
    float: left;
    display: block;
    font-size: 18px;
    font-family: Roboto;
    line-height: 26px;
    margin-top: 20px;
}

button.submit:hover, button.submit:active, button.submit:focus{
    background-color: #059831;
}

.full-width{
    width: 100%;
    display: inline-block;
}

#pageContent{
    max-width: 100%;
    padding: 45px 20px;
}

.forum_title{
    width: 100%;
    text-align: left;
    font-weight: bold;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
    display: inline-block;
}

.forum .post{
    border-top: solid 1px #daedf8;
    padding-bottom: 10px;
}

.forum .post .post_title{
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: Roboto;
    text-align: left;
}
.forum .post .post_title .right{
    float: right;
    font-family: Roboto;
}

.forum .post .creator .username{
    font-size: 14px;
    line-height: 16px;
    color: green;
    font-family: Roboto;
    width: 100%;
    display: block;
}

.forum .post .creator .avatar{
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
}
.forum .post .creator .avatar>img{
    width: 75px;
    height: 75px;
    margin: 0 auto;
}

.forum .post .message{
    text-align: left;
    font-size: 16px;
    font-family: Roboto;
}
.forum .post .message .replyuser{
    font-family: Roboto;
    font-size: 13px;
    color: gray;
}

.forum .post .reply{
    display: block;
    font-family: Roboto;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
}

.forum .post .reply a, .forum .post .creator .username{
    color: #337ab7;
    font-family: Roboto;
    font-size: 14px;
    font-weight: bold;
}

.forum .post .reply a:hover,.forum .post .reply a:focus,.forum .post .reply a:active
.forum .post .creator .username:hover,.forum .post .creator .username:focus,.forum .post .creator .username:active{
    color: #23527c;
}

.forum .post .creator .info{
    width: 100%;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.forum .post .creator .info .flag, .forum .post .creator .info .message_link{
    display: inline-block;
    float: none;
    vertical-align: middle;
    padding: 0px;
    margin: 0px 10px;
}