@font-face {
    font-family: 'Morebi-Rounded-Medium';
    src: url('webfonts/Morebi-Rounded-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Morebi-Rounded-Bold';
    src: url('webfonts/Morebi-Rounded-Bold.ttf') format('truetype');
}

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
* { outline:none; }

html, body { background: #fff; width:100%; /*padding:20px 0px;*/ margin:0; font: 14px/1.5 Arial; color:#41474b; line-height:16px; }
body { margin-top: 30px; }
.title { text-align: center; }
h1 { font-size: 35px; display: inline-block; line-height: 1; margin: 0px; font-family: MorebiRounded-Medium; font-weight: normal; font-style: normal; }

#main { margin-top: 35px; padding: 0px 126px; }
#main label { display: inline-block; margin-bottom: 20px; margin-left: 35px; width: 222px; }
#main span { font-size: 14px; }
#main b.big { font-size: 14px; line-height: 1; }
#main .hr { display: block; height: 1px; width: 100%; background: #c7c8c2; margin-bottom: 20px; }
#main .notice { color: #c63627; margin-left: 35px; }

#calculate { background: #ebe9db; border-radius: 3px; padding: 40px; margin-bottom: 20px; }
#calculate label { display: inline-block; margin: 0px; width: 64px; text-align: right; margin-right: 10px; margin-bottom: 22px; vertical-align: middle; }
#calculate span { vertical-align: super; }
#calculate .slider { width: 223px; }
#calculate .slider_line { display: inline-block; background: url(../images/popup_slider.png) no-repeat; width: 229px; height: 18px; margin-right: 2px; padding-left: 6px; margin-bottom: 22px; vertical-align: middle; }
#calculate .slider_output { display: inline-block; background: #fff; border: 2px solid #d1d1cb; border-radius: 3px; color: #41474b; font-size: 16px; font-weight: bold; width: 100px; height: 33px; line-height: 33px; text-align: left; padding: 0px; padding-left: 10px; margin-bottom: 22px; vertical-align: middle; }

.ui-slider .ui-slider-handle { display: block; background: #c42d18 url(../images/slider-handle.png) no-repeat center center; border-radius: 3px; width: 22px; height: 33px; top: -8px; -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; transition: background-color 0.3s; }
.ui-slider .ui-slider-handle:hover { background-color: #ad1201; }
.ui-slider .ui-slider-handle:active { background-color: #830c00; }

#more { background: #c8b586; padding: 45px 60px; }
#more ul { margin: 2px 0px 40px -40px; font-size: 14px; line-height: 1; /*font-family: MorebiRounded-Regular;*/ }
#more ul li { list-style-image: url(../images/popup_li.png); margin-bottom: 25px; padding-left: 15px; }
#more ul li a { color: #c63627; text-decoration: none; }
#more ul li a:hover, #more ul li a:focus { text-decoration: underline; }
#more p { color: #41474b; font-size: 14px; font-weight: 400; font-family: Arial; padding-left: 16px; }
#more .footer_logo { text-align: right; }
#more .footer_logo img { margin-top: 40px; }

#popup_vars { display: none; }

.xs-visible {
    display: none;
}

#perku-wrap {
    max-width: 709px;
    margin: 0 auto;
    font-family: 'Morebi-Rounded-Medium', sans-serif;
}

.perku {
    display: inline-block;
    width: 121px;
    height: 48px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 30px;
}
.perku-3 {
    background-image: url(../images/perku3.png);
}
.perku-6 {
    background-image: url(../images/perku6.png);
}
.perku-10 {
    background-image: url(../images/perku10.png);
}
.perku-12 {
    background-image: url(../images/perku12.png);
}
.perku-18 {
    background-image: url(../images/perku18.png);
}
.perku-24 {
    background-image: url(../images/perku24.png);
}
.easypay-3 {
    background-image: url(../images/easypay3.png);
}
.easypay-6 {
    background-image: url(../images/easypay6.png);
}
.easypay-10 {
    background-image: url(../images/easypay10.png);
}
.easypay-12 {
    background-image: url(../images/easypay12.png);
}
.easypay-18 {
    background-image: url(../images/easypay18.png);
}
.easypay-24 {
    background-image: url(../images/easypay24.png);
}

.perku-title h1 {
    font-weight: 500;
    font-size: 36px;
    margin-bottom: 60px;
}

#perku-graph {
    background: #F6F5EF;
    border-radius: 8px;
    margin-bottom: 48px;
}

#perku-graph .heading {
    background: #CDB97D;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border-radius: 8px 8px 0 0;
    color: #fff;
    text-align: center;
}

#perku-graph .heading p {
    padding-top: 16px;
    margin: 0;
}

#perku-graph .heading span {
    color: #41474B;
    font-weight: 700;
    font-size: 24px;
    margin: 20px 0;
    display: inline-block;
}

#perku-graph .steps {
    position: relative;
    padding-bottom: 60px;
}

#perku-graph .step {
    position: relative;
}

#perku-graph .step:before {
    content: '';
    position: absolute;
    display: block;
    width: 2px;
    height: 60px;
    background: #CDB97D;
    top: initial;
    left: calc(50% - 1px);
    bottom: 100%;
}

#perku-graph .step .name {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid #CDB97D;
    line-height: 48px;
    font-size: 16px;
    font-weight: 700;
    color: #41474B;
    text-align: center;
}

#perku-graph .step-data {
    position: absolute;
    top: 0;
    left: calc(50% + 45px);
    width: 195px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

#perku-graph .step:nth-child(even) .step-data {
    left: initial;
    right: calc(50% + 45px);
}

#perku-graph .step-data .step-heading {
    position: relative;
    background: #CDB97D;
    color: #C43627;
    font-weight: 700;
    font-size: 24px;
    padding: 12px 25px;
    line-height: 1;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#perku-graph .step-data .step-heading:before {
    content: '';
    display: block;
    width: 11px;
    height: 14px;
    background: url(../images/chevron-left-brown.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    top: calc(50% - 7px);
    right: calc(100% - 1px);
}

#perku-graph .step:nth-child(even) .step-data .step-heading:before {
    background-image: url(../images/chevron-right-brown.png);
    left: calc(100% - 1px);
    right: initial;
}

#perku-graph .step-data .step-date {
    padding: 13px 25px;
    color: #41474B;
    font-size: 16px;
    font-weight: 700;
}

#perku-graph .step-data .step-date span {
    display: block;
    margin-bottom: 8px;
    color: #999;
    font-size: 14px;
    font-weight: 500;
}

#perku-graph .step {
    margin-top: 48px;
}

#perku-graph .step:before {
    height: 48px;
}

#perku-graph .step:first-child {
    margin-top: 60px;
}

#perku-graph .step:first-child:before {
    height: 60px;
}

#perku-graph .last {
    margin-top: 66px;
}

#perku-graph .last:before {
    height: 66px;
}

#perku-graph .last:after {
    content: '';
    display: block;
    width: 38px;
    height: 38px;
    background: url(../images/icon-step-done.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    left: calc(50% - 19px);
    top: 7px;
}

#perku-graph .last .info {
    margin-top: 5px;
    color: #999;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

#perku-more {
    color: #41474B;
    font-weight: 500;
    font-size: 16px;
    font: 14px/1.5 Arial;
}

#perku-more .footer_logo {
    text-align: right;
}

#perku-more .footer_logo img {
    margin-top: 40px;
}

@media screen and (max-width: 820px) {
    .xs-hidden {
        display: none !important;
    }

    .xs-visible {
        display: block;
    }

    #main {
        padding: 0 15px;
    }

    #main label,
    #main .notice {
        margin-left: 0;
    }

    #main .payment-data label {
        width: 40%;
    }

    #main .payment-data span {
        display: inline-block;
        width: 60%;
        text-align: right;
    }

    #main .summary label {
        float: left;
        width: 66%;
    }

    #main .summary span {
        float: right;
        width: 30%;
        text-align: right;
    }

    #main .summary::after {
        content: '';
        display: block;
        clear: both;
    }

    #calculate {
        padding: 30px 15px;
    }

    #calculate .calculate-term,
    #calculate .calculate-advance {
        display: flex;
        flex-wrap: wrap;
    }

    #calculate .calculate-term label,
    #calculate .calculate-advance label {
        order: 1;
        text-align: left;
        width: 66%;
        margin: 0;
    }

    #calculate .calculate-term span,
    #calculate .calculate-advance span {
        font: 14px/1.5 Arial;
    }

    #calculate .calculate-term input,
    #calculate .calculate-advance input {
        order: 3;
        width: 33%;
        box-sizing: border-box;
    }

    #calculate .calculate-term .slider_line,
    #calculate .calculate-advance .slider_line {
        order: 4;
        width: 100%;
        background-size: 100% 100%;
    }

    #calculate .calculate-term .slider,
    #calculate .calculate-advance .slider {
        width: 97%;
        height: 33px;
        margin-top: -8px;
    }

    #calculate .calculate-term .ui-slider-handle,
    #calculate .calculate-advance .ui-slider-handle {
        top: 0;
    }

    #more {
        padding: 45px 15px 45px 40px;
    }

    #more .footer_logo {
        text-align: left;
        padding-left: 16px;
    }
}