/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
    width: 100%;
    height: 100%;
    color: #000;
    padding: 0;
    margin: 0;
    /*font-family: 'open_sansregular', Arial, Sans-serif;*/
    font-family: SourceSansPro, Arial, Helvetica, sans-serif;
    font-size: 15px;
    background-color: #ffffff;
}

html {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
}

hr {
    margin: 5px 0;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: inherit;
}

a img {
    border: none;
}

a, a:visited {
    color: #439639;
    text-decoration: none;
}

    a:hover, a:active {
        color: #000;
        text-decoration: none;
        transition: all 0.3s linear;
        transition: color .2s ease-out, background 0.5s ease-in;
    }

    a.active {
        color: #bf6900;
        text-decoration: none;
        transition: all 0.3s linear;
        transition: color .2s ease-out, background 0.5s ease-in;
    }

    a:focus {
        outline: none;
        text-decoration: none;
    }

.clear {
    height: 1px;
    line-height: 0;
    font-size: 1px;
    clear: both;
}

img {
    border: none;
}

.container {
    max-width: 970px;
}

.vizual {
    position: relative;
}

.top_image {
    background: url(../img/bg-slika.jpg) no-repeat center center;
    background-size: cover;
    height: 750px;
}

.header {
    height: 105px;
    background-color: #fff;
    border-bottom: 3px solid #7fbf4d;
}

.logoSvg {
    display: block;
    margin-top: 30px;
    background: url(../img/logo.png) no-repeat;
    height: 41px;
    width: 220px;
}

.logoSvgFooter {
    display: block;
    margin-top: 10px;
    background: url(../img/logofoo.png) no-repeat;
    height: 27px;
    width: 140px;
}

.sloganSVG {
    display: block;
    width: 200px;
    margin-top: 32px;
}

.text_top {
    position: absolute;
    z-index: 100;
    top: 20px;
    left: 0;
}

    .text_top div {
        color: #fff;
        font-family: 'open_sansregular';
        text-transform: uppercase;
        font-size: 36px;
        background-color: #00703c;
        margin-top: 20px;
        padding: 10px 12px;
    }

        .text_top div.kred {
            float: left;
        }

.holder_circles .icon-circle-check {
    color: #4da309;
    padding: 0;
    margin-right: 10px;
    font-size: 25px;
    line-height: 30px;
    height: 30px;
    width: 30px;
    display: inline-block;
}

.holder {
    margin: 0 auto;
    margin-top: 10px;
    position: absolute;
    z-index: 100;
    left: 60px;
    bottom: 40px;
    background: url(../img/white.png) repeat;
    color: #00703c;
    padding: 10px 20px;
    font-family: 'open_sansbold';
    font-size: 22px;
}

.holder_circles {
    color: #3a3a3a;
    font-size: 32px;
    font-family: 'open_sansregular';
    margin-left: 40px;
}

    .holder_circles.first {
        margin-left: 0;
    }

.forma_kontakt {
    background: rgba(255,255,255,0.8);
    padding: 25px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
    margin-top: 100px;
}

.input_forma {
    background: none;
    border: 0;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    color: #525252;
    margin-right: 40px;
    padding: 10px;
    border-radius: 0;
}

.submit_btn {
    background-color: #fea228;
    color: #fff;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    font-size: 16px;
    font-family: 'open_sansbold';
    text-transform: uppercase;
    padding: 20px 30px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
}

    .submit_btn:hover {
        background-color: #fe8328;
        transition: color .2s ease-out, background 0.5s ease-in;
    }

.holder_txt {
    text-align: center;
    font-size: 36px;
    color: #3a3a3a;
    font-family: 'open_sansbold';
    margin-top: 30px;
}

a.online_btn {
    display: block;
    background-color: #fea228;
    font-size: 18px;
    color: #fff;
    font-family: 'open_sansbold';
    text-align: center;
    text-transform: uppercase;
    padding: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
    width: 300px;
    margin: 50px auto 0 auto;
}

    a.online_btn:hover {
        background-color: #fe8328;
        transition: color .2s ease-out, background 0.5s ease-in;
    }


.icon-arrow-down {
    margin-right: 10px;
    font-size: 20px;
    line-height: 10px;
}

.korak1 {
    background-color: #daedc9;
    height: 120px;
    padding: 25px 20px 40px 20px;
    float: left;
}

.korak2 {
    background-color: #c0e0a6;
    height: 120px;
    padding: 25px 20px 40px 20px;
    float: left;
}

.korak3 {
    background-color: #99cb6e;
    height: 120px;
    padding: 25px 20px 40px 20px;
    float: left;
}

.orocena-stednja .korak1, .orocena-stednja .korak2, .orocena-stednja .korak3 {
    height: 150px;
}

.orocena-stednja .icon-check {
    padding-top: 3px;
    margin-right: 0px;
}

.orocena-stednja .korak_txt {
    font-size: 16px;
    line-height: 40px;
    margin-top: 0px;
}

@media (max-width: 1200px) {
    .orocena-stednja .korak1, .orocena-stednja .korak2, .orocena-stednja .korak3 {
        padding: 15px 20px 40px 20px;
    }
}

@media (max-width: 480px) {
    .orocena-stednja .korak1, .orocena-stednja .korak2, .orocena-stednja .korak3 {
        padding: 0px;
    }

    .orocena-stednja .icon-check {
        padding: 10px 20px;
        margin-right: -10px;
        width: auto;
    }

    .orocena-stednja .korak_txt {
        padding-top: 7px;
        font-size: 16px;
        line-height: 40px;
        margin-top: 0px;
        width: auto;
        text-align: left;
    }

    .orocena-stednja .napomena_small {
        padding-right: 10px;
        display: block;
        font-size: 9px;
        text-align: center;
        padding-top: 15px;
    }
}

.icon-check {
    color: #00703c;
    padding: 0;
    margin-right: 5px;
    font-size: 26px;
    line-height: 40px;
    height: 40px;
    width: 40px;
    display: inline-block;
    text-align: center;
}

.korak_txt {
    font-size: 18px;
    line-height: 24px;
    color: #565656;
    font-family: 'open_sansbold';
    margin-top: 5px;
}

    .korak_txt span {
        color: #00703c;
    }

.napomena_small {
    color: #565656;
    font-size: 9px;
    line-height: 10px;
    font-family: 'open_sansregular';
}

.naslov_kalk {
    text-align: center;
    font-size: 36px;
    color: #5f5f5f;
    font-family: 'open_sanssemibold';
    margin: 0 auto;
    margin-top: 90px;
    margin-bottom: 85px;
    border-bottom: 1px solid #006429;
    padding-bottom: 10px;
    width: 390px;
}

.kalkulator_main {
    padding-right: 30px;
}

.rezultati {
    padding-left: 30px;
}

.noUi-handle.noUi-handle-lower {
    background: url(../img/nav_kalk.svg) no-repeat transparent;
    width: 39px !important;
    height: 39px !important;
}

.noUi-base {
    background-color: #7fbf4d;
}

.noUi-origin {
    background-color: #dfdfdf;
}

.noUi-target {
    box-shadow: none;
}

.noUi-horizontal {
    height: 13px;
}

.naslov_iznos {
    color: #00703c;
    font-size: 20px;
    font-family: 'open_sansbold';
    text-transform: uppercase;
    width: 65%;
    float: left;
    line-height: 46px;
    border-bottom: 2px solid #00703c;
    margin-right: 10px;
}

.naslov_iznos_kamata {
    color: #00703c;
    font-size: 20px;
    font-family: 'open_sansbold';
    text-transform: uppercase;
    width: 38%;
    float: left;
    line-height: 46px;
    border-bottom: 2px solid #00703c;
    margin-right: 10px;
}

.fa-angle-right {
    font-size: 22px;
    margin-left: 10px;
}


.iznos {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

#iznos_kredita_value, #rok_otplate_value, #mjesecna_rata_value, #iznos_depozita_value, #vremenski_period_value, #kamatna_stopa_value  {
    background-color: #f8f8f8;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
    padding: 0;
    padding: 10px;
    box-shadow: none;
    border: none;
    border: 1px solid #ccc;
    float: left;
    color: #565656;
    font-size: 18px;
    font-family: 'open_sansbold';
    width: 25%;
    text-align: right;
}

#iznos_kredita, #rok_otplate, #mjesecna_rata, #iznos_depozita, #vremenski_period {
    margin-top: 20px;
}

.kune {
    width: 5%;
    float: right;
    color: #565656;
    font-size: 18px;
    line-height: 60px;
    font-family: 'open_sansbold';
    text-align: right;
}

.naslov_big {
    font-size: 18px;
    color: #292929;
    font-family: 'open_sanssemibold';
    margin-bottom: 40px;
}

.napomena_kamata {
    font-size: 12px;
    color: #292929;
    margin-top: 20px;
}

ul.legenda {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    margin-top: 20px;
}

    ul.legenda li {
        display: table-cell;
        color: #5f5f5f;
        font-size: 14px;
        font-family: 'open_sanssemibold';
    }

        ul.legenda li.min {
            border-left: 1px solid #dedede;
            padding-left: 10px;
        }

        ul.legenda li.maks {
            text-align: right;
            border-right: 1px solid #dedede;
            padding-right: 10px;
        }

.rez_green {
    background-color: #edfae1;
    padding: 10px 30px 30px 30px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
}

.iznosi_tablica {
    width: 100%;
}

    .iznosi_tablica td {
        padding: 20px 0;
        border-bottom: 1px solid #7fbf4d;
    }

.value_tablica {
    color: #797979;
    font-size: 16px;
    font-family: 'open_sanssemibold';
}

.rez_tablica {
    color: #3a3a3a;
    font-size: 18px;
    font-family: 'open_sansbold';
}

    .rez_tablica.zeleno {
        color: #4c923e;
    }

a.ponuda_btn {
    display: block;
    background-color: #fea228;
    font-size: 18px;
    color: #fff;
    font-family: 'open_sansbold';
    text-align: center;
    text-transform: uppercase;
    padding: 9px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
    width: 300px;
    margin: 50px auto 0 auto;
}

    a.ponuda_btn:hover {
        background-color: #fe8328;
        color: #fff;
        transition: color .2s ease-out, background 0.5s ease-in;
    }

.napomena {
    text-align: center;
    color: #3a3a3a;
    font-size: 16px;
    font-family: 'open_sansitalic';
    margin-top: 30px;
    padding: 0 50px;
}

.uvjeti {
    color: #4c923e;
    font-size: 24px;
    font-family: 'open_sansbold';
    text-transform: uppercase;
    border-top: 2px solid #4c923e;
    padding-top: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

ul.uvjeti_lista {
    margin: 0;
    padding: 0;
}

    ul.uvjeti_lista li {
        margin-bottom: 20px;
        color: #686868;
        font-size: 16px;
        list-style: none;
        background: url(../img/dot.svg) no-repeat;
        padding-left: 30px;
    }


.uvjeti_lista .icon-arrow-right::before {
    color: #fff;
    background-color: #4c923e;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%; /* future proofing */
    -khtml-border-radius: 50%; /* for old Konqueror browsers */
    padding: 0;
    margin-right: 10px;
    font-size: 11px;
    line-height: 22px;
    height: 22px;
    width: 22px;
    display: inline-block;
    text-align: center;
}

.ostalo {
    border-top: 1px solid #dedede;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #686868;
    font-size: 14px;
}

.naslov_ostalo {
    color: #5e9c52;
    font-size: 20px;
    font-family: 'open_sanssemibold';
    margin-top: 30px;
}

.footer {
    border-top: 1px solid #dedede;
    padding: 20px 0;
    height: 75px;
}

.logo_footer {
    display: block;
    width: 165px;
}

.telefon_footer {
    /*color: #3a3a3a !important;*/
    color: #4c923e !important;
    font-size: 18px;
    font-family: 'open_sanssemibold';
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
    padding: 0 20px;
    margin-top: 10px;
}

.mail_footer {
    color: #3a3a3a;
    font-size: 18px;
    font-family: 'open_sanssemibold';
    border-right: 1px solid #dedede;
    padding: 0 20px;
}

    .mail_footer a {
        color: #3a3a3a;
    }

        .mail_footer a:hover {
            color: #006429;
        }

.footer .icon-telefon::before, .footer .icon-mail::before {
    color: #006429;
    margin-right: 10px;
    font-size: 24px;
    line-height: 22px;
    height: 22px;
    width: 22px;
    text-align: center;
    float: left;
}

.icon-arrow-up {
    font-size: 30px;
    margin-left: 20px;
    border-left: 1px solid #dedede;
    padding-left: 20px;
    color: #9b9b9b;
    display: block;
}

/* SELECT REPLACEMENT */
.selectator {
    width: 100% !important;
    min-height: 0 !important;
    border: 0;
    font-size: 15px;
    cursor: pointer;
    background: #f8f8f8;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
}

    .selectator:after {
        color: #6bab3a;
        content: "\f0d7";
        cursor: pointer;
        font-family: "FontAwesome";
        font-size: 17px;
        line-height: 0;
        position: absolute;
        right: 20px;
        top: 50%;
    }

.selectator_chosen_item_title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #565656;
    text-align: left;
    font-family: "open_sansbold";
    font-size: 18px;
}

.selectator_options {
    width: 100%;
    left: 0;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.3);
    border-radius: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.disable_search .selectator_options {
    border: 0;
}

.selectator.single {
    height: auto !important;
    padding: 7px 20px !important;
}

    .selectator.single .selectator_chosen_item {
        color: #8b8b8b;
        line-height: 26px;
    }

.selectator_option {
    color: #3b3b3b;
    padding-left: 10px;
    padding-right: 10px;
}

.selectator_option_title {
    margin-left: 0;
    white-space: nowrap;
}

.selectator_option.active {
    background-color: #6bab3a;
}


/* FORMS */
.page_content .selectator, .form_section .selectator {
    border: 1px solid #c2ccd3;
    background: #fff;
}

.page_content .selectator_chosen_item_title, .form_section .selectator_chosen_item_title {
    color: #3a4f59;
    font-weight: 500;
    font-size: 18px;
}

.page_content .selectator.single, .form_section .selectator.single {
    padding: 16px 42px 16px 16px !important;
}

.page_content .selectator::after, .form_section .selectator::after {
    color: #3a4f59;
    font-size: 20px;
    position: absolute;
    right: 20px;
    top: 50%;
}

.page_content ul.selectator_options, .form_section ul.selectator_options {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

    .page_content ul.selectator_options li.selectator_option, .form_section ul.selectator_options li.selectator_option {
        margin: 0;
        padding: 16px;
    }

        .page_content ul.selectator_options li.selectator_option:hover, .page_content .body ul.selectator_options li.selectator_option.active, .form_section ul.selectator_options li.selectator_option:hover, .form_section ul.selectator_options li.selectator_option.active {
            color: #fff;
        }

        .page_content ul.selectator_options li.selectator_option::before, .form_section ul.selectator_options li.selectator_option::before {
            display: none;
        }


.holder_select {
    width: 25%;
    float: left;
}

.holder_select2 {
    width: 60%;
    float: right;
}

.ponuda_box {
    background-color: #6bab3a;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px; /* future proofing */
    -khtml-border-radius: 0px; /* for old Konqueror browsers */
    padding: 20px;
}

.napomena_form {
    font-size: 12px;
    color: #fff;
    margin-top: 5px;
}

.form_hol {
    margin-bottom: 20px;
}

    .form_hol label {
        display: block;
        color: #fff;
        font-size: 15px;
        font-family: 'open_sanssemibold';
        font-weight: normal;
    }

    .form_hol input {
        width: 100%;
        border: 1px solid #dedede;
        padding: 9px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px; /* future proofing */
        -khtml-border-radius: 5px; /* for old Konqueror browsers */
    }

.holder_select_kontakt .selectator_chosen_item_title {
    font-size: 14px !important;
    font-family: 'open_sanssemibold';
}

.btn_submit {
    background-color: #fea228;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-family: "open_sansbold";
    font-size: 18px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    border: 0 !important;
    margin-top: 10px;
}

    .btn_submit:hover {
        background-color: #fe8328;
    }

    .btn_submit:disabled {
        background-color: #777777;
    }
    .btn_submit:focus {
        outline: 0;
    }

a.more {
    background-color: #6bab3a;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-family: "open_sansbold";
    font-size: 18px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 280px;
    margin: 0 auto;
    margin-top: 30px;
}

    a.more:hover {
        background-color: #4C923E;
    }

/* domagoj */
h1.naslov {
    color: #006429;
    padding-bottom: 0;
    font-family: 'open_sansbold', Arial, Sans-serif;
    font-size: 22px;
    margin-top: 35px;
}

h3.podnaslov {
    text-transform: uppercase;
    color: #006429;
    font-family: 'open_sansbold', Arial, Sans-serif;
    font-size: 20px;
    border-bottom: 2px solid #006429;
    padding-bottom: 13px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.forma label {
    font-family: 'open_sanssemibold', Arial, Sans-serif;
    font-size: 13px;
    line-height: 16px;
    color: #565656;
    font-weight: 100;
    padding-top: 5px;
}

.forma .frm, .forma .lbl {
    margin-bottom: 20px;
}

    .forma .frm label {
        font-family: Arial, Sans-serif;
        color: #565656;
        font-size: 13px;
        margin: 0 15px 0 10px;
    }

.napomenaForma {
    margin-bottom: 20px;
    font-size: 13px;
    font-family: 'open_sanslight', Arial, Sans-serif;
}

.styledRadio, .styledCheckbox {
    display: inline-block;
    position: relative;
    top: 3px;
}

.formsubmit {
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
    margin-top: 20px;
    margin-bottom: 30px;
}

    .formsubmit input {
        margin: 0 auto;
        padding: 10px 50px;
    }

#warning {
    width: 100%;
    margin: 20px 0;
    padding: 10px 30px;
    color: #565656;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #d10000;
    background: #ffeff5 !important;
}

#selectator_kamataEUR {
    display: none;
}


/* THANK YOU PAGE */
.zahvala-upit {
    padding: 100px 0 115px 0;
}

    .zahvala-upit h3 {
        font-size: 20px;
        font-family: 'open_sanssemibold';
        color: #575757;
    }

    .zahvala-upit .success {
        width: 130px;
        height: 130px;
        margin: 0 auto;
        float: none;
    }

.btn-povratak {
    display: block;
    text-align: center;
    background-color: #fea228;
    text-transform: none;
    font-family: 'open_sansextrabold';
    font-size: 18px;
    width: 315px;
    border-radius: 5px;
    padding: 12px 9px;
    color: #ffffff !important;
    ;
    margin: 50px auto 0 auto;
}

    .btn-povratak:hover {
        background-color: #fe8328;
        color: #ffffff;
        transition: color .2s ease-out, background 0.5s ease-in;
    }

.icon.icon-check.pull-left.info-desc {
    height: 66px;
}