@charset "utf-8";

main.online .b-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- tariff cards ---- */

.ol-tariffs {
    padding: 10px 0 40px;
}

.ol-tariff {
    position: relative;
    margin: 0 0 30px;
    padding: 25px 30px 30px;
    color: #ffffff;
    background: #3d3d3d;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}

.ol-tariff.ol-max {
    background: #1a1a1a;
}

.ol-tariff h3 {
    margin: 0 0 18px;
    font: normal 34px/1 "DIN Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #ffffff;
}

.ol-tariff ul {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.ol-tariff ul li {
    position: relative;
    margin: 0 0 12px;
    padding-left: 32px;
    font: normal 15px/1.4 "PT Sans", sans-serif;
}

.ol-tariff ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 14px;
    background:
        linear-gradient(45deg, transparent 44%, #35a832 44%, #35a832 58%, transparent 58%) no-repeat 0 4px / 8px 10px,
        linear-gradient(-45deg, transparent 30%, #35a832 30%, #35a832 44%, transparent 44%) no-repeat 5px 0 / 13px 14px;
}

.ol-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.ol-price {
    font: normal 26px/1.1 "DIN Condensed", sans-serif;
    white-space: nowrap;
}

.ol-price s {
    display: block;
    font-size: 18px;
    color: #9d9d9d;
}

.ol-price b {
    font-weight: normal;
    font-size: 26px;
}

.ol-price em {
    font-style: normal;
    color: #e31e24;
}

.ol-btn {
    display: inline-block;
    padding: 10px 18px;
    border: 2px solid #8d8d8d;
    font: normal 21px/1 "DIN Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

.ol-btn:hover {
    border-color: #ffffff;
}

.ol-btn span {
    margin-right: 12px;
}

.ol-btn:after {
    content: "\276F";
    font-family: "PT Sans", sans-serif;
    font-size: 14px;
    vertical-align: 1px;
}

.ol-btn i.anm {
    display: none;
}

.ol-tariff .ol-btn,
.ol-submit .ol-btn {
    position: relative;
    overflow: hidden;
    transition: color .2s ease;
}

.ol-tariff .ol-btn:before,
.ol-submit .ol-btn:before {
    content: "";
    position: absolute;
    left: -30%;
    top: 0;
    bottom: 0;
    width: 160%;
    background: #ffffff;
    transform: translateX(-110%) skewX(-20deg);
    transition: transform .25s ease;
}

.ol-tariff .ol-btn:hover,
.ol-submit .ol-btn:hover {
    color: #1a1a1a;
}

.ol-tariff .ol-btn:hover {
    border-color: #ffffff;
}

.ol-tariff .ol-btn:hover:before,
.ol-submit .ol-btn:hover:before {
    transform: translateX(0) skewX(-20deg);
}

.ol-tariff .ol-btn span,
.ol-tariff .ol-btn:after,
.ol-submit .ol-btn span,
.ol-submit .ol-btn:after {
    position: relative;
    z-index: 1;
}

.ol-tariff .ol-btn:after,
.ol-submit .ol-btn:after {
    display: inline-block;
    transition: transform .2s ease;
}

.ol-tariff .ol-btn:hover:after,
.ol-submit .ol-btn:hover:after {
    transform: translateX(6px);
}

.ol-paysys {
    padding: 5px 0 0;
    text-align: center;
}

.ol-paysys img {
    width: 190px;
    height: auto;
    opacity: .75;
}

/* ---- modal ---- */

.ol-overlay {
    display: none;
    position: fixed;
    z-index: 900;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .65);
    padding: 20px 15px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ol-overlay.visible {
    display: flex;
}

.ol-modal {
    position: relative;
    width: 420px;
    max-width: calc(100% - 30px);
    box-sizing: border-box;
    margin: auto;
    padding: 30px 30px 25px;
    color: #1a1a1a;
    background: repeating-linear-gradient(135deg, #ffffff 0, #ffffff 3px, #f1f1f1 3px, #f1f1f1 4px);
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
}

.ol-close {
    position: absolute;
    right: 14px;
    top: 34px;
    font: normal 22px/1 "PT Sans", sans-serif;
    color: #1a1a1a;
    text-decoration: none;
}

.ol-mhead {
    margin: 0 25px 20px 0;
    font: normal 30px/1.05 "DIN Condensed", sans-serif;
    text-transform: uppercase;
}

.ol-mhead em {
    font-style: normal;
    color: #e31e24;
}

.ol-mhead s {
    font-size: 22px;
    color: #7d7d7d;
}

.ol-field {
    margin: 0 0 16px;
}

.ol-field input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #b5b5b5;
    border-radius: 0;
    background: #ffffff;
    font: normal 15px/1.2 "PT Sans", sans-serif;
    color: #1a1a1a;
    outline: none;
    -webkit-appearance: none;
}

.ol-field input:focus {
    border-color: #1a1a1a;
}

.ol-field input.ol-err {
    border-color: #e31e24;
}

.ol-field input::placeholder {
    color: #8d8d8d;
}

.ol-payway {
    margin: 4px 0 22px;
    font: normal 16px/1.4 "PT Sans", sans-serif;
}

.ol-payway label {
    margin-left: 22px;
    cursor: pointer;
    white-space: nowrap;
}

.ol-payway input {
    position: absolute;
    opacity: 0;
    width: 0;
}

.ol-payway label span {
    display: inline-block;
    vertical-align: -5px;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border: 1px solid #b5b5b5;
    background: #ffffff;
}

.ol-payway label span {
    position: relative;
}

.ol-payway input:checked + span:after {
    content: "";
    position: absolute;
    left: 4px;
    top: 2px;
    width: 14px;
    height: 8px;
    border: solid #1a1a1a;
    border-width: 0 0 3px 3px;
    transform: rotate(-50deg);
}

.ol-submit {
    margin: 0 0 20px;
    text-align: center;
}

.ol-submit .ol-btn {
    padding: 13px 30px;
    color: #ffffff;
    background: #3d3d3d;
    border-color: #3d3d3d;
}

.ol-submit .ol-btn.ol-wait {
    opacity: .5;
    pointer-events: none;
}

.ol-legal {
    font: normal 12px/1.5 "PT Sans", sans-serif;
    color: #6d6d6d;
}

.ol-donetext {
    font: normal 15px/1.55 "PT Sans", sans-serif;
}

.ol-donetext p {
    margin: 0 0 14px;
}

.ol-donetext a {
    color: #1a1a1a;
}

/* ---- intro list ---- */

main.online .b-wrap > .-x-ed ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

main.online .b-wrap > .-x-ed ul li {
    position: relative;
    padding-left: 18px;
    margin: 0 0 4px;
}

main.online .b-wrap > .-x-ed ul li:before {
    content: "\2014";
    position: absolute;
    left: 0;
}