:root {
    --color-yellow: #FFE72D;
    --color-yellow-2: #EFD92C;
    --color-blue: #042982;
    --color-dark-blue: #061A3C;
    --color-orange: #F9C51A;
    --color-beige: #FFEAC2;
    --color-grey: #C6EEF3;
    --color-accent:#98C8FF;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/STATIC/xgpon/fonts/interfont.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: Syncopate;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/STATIC/xgpon/fonts/syncopate/syncopate-bold.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

.display-none {
    display: none !important
}
.hidden {
    opacity: 0;
}
.card-light,
.snow-on-card,
.wrapper .top-block,
body {
    background-repeat: no-repeat
}

* {
    color: #fff
}

.wrapper .cards-container .container .inner-cards-container .app-card-tariff .mat-card .app-stock-preview .card-inner,
body,
html {
    height: 100%
}

.container,
.price-connect.crossed-text,
.section--timer .timer__block .timer .countdown .cd,
.window-overlay .dialog-window-container .order-dialog .main-wrapper .modal_content .input-item .mat-form-field .mat-form-field-wrapper,
.window-overlay .dialog-window-container .order-dialog .main-wrapper .modal_content .input-item .mat-form-field .phone-wrap,
.wrapper,
body {
    position: relative
}

.mobile {
    display: none
}

.desktop {
    display: flex
}

.wrapper .app-header,
body {
    min-width: 320px;
    width: 100%;
    background: var(--color-blue)
}

.wrapper,
.wrapper .app-header .header-fixed .toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

.wrapper h2 {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    color: var(--color-accent)
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-style: normal;
    font-weight: 400
}

:after,
:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

::-webkit-input-placeholder {
    color: #666;
    opacity: 1
}

:-moz-placeholder {
    color: #666;
    opacity: 1
}

::-moz-placeholder {
    color: #666;
    opacity: 1
}

:-ms-input-placeholder {
    color: #666;
    opacity: 1
}

body input:focus:required:invalid,
body textarea:focus:required:invalid {
    color: #666
}

body input:required:valid,
body textarea:required:valid {
    color: #666
}

body {
    line-height: 1.65;
    overflow-x: hidden;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #404040;
    overflow: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    background-size: cover !important;
    background-position: center
}

.wrapper {
    font-family: Inter, sans-serif
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    line-height: 1
}

a {
    text-decoration: none
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto
}

.text-center {
    text-align: center
}

::-moz-selection {
    background-color: orange;
    color: #fff
}

::selection {
    background-color: orange;
    color: #fff
}

.highlight-header {
    background: #344249 !important;
    -webkit-box-shadow: 2px 2px 3px;
    box-shadow: 2px 2px 3px
}

.fixed {
    overflow: hidden;
    top: 0;
    left: 0;
    padding-right: 8px
}

.fixed .app-header .header-fixed {
    padding-right: -webkit-calc(8px + 0px) !important;
    padding-right: calc(8px + 0px) !important
}

@media screen and (max-width: 767px) {
    .fixed {
        padding-right: 0
    }

    .fixed .app-header .header-fixed {
        padding-right: -webkit-calc(0px + 0px) !important;
        padding-right: calc(0px + 0px) !important
    }
}

.container {
    width: 1168px;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center
}

.wrapper,
.wrapper .app-header .header-fixed .toolbar,
.wrapper .app-header .header-fixed .toolbar .toolbar_L,
.wrapper .app-header .header-fixed .toolbar .toolbar_R,
.wrapper .header-top,
.wrapper .header-top .header-flex-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox
}

.wrapper {
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    padding-top: 0;
    z-index: 1
}

.wrapper .app-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    -webkit-transition: -webkit-transform 160ms cubic-bezier(0, 0, .2, 1);
    -o-transition: transform 160ms cubic-bezier(0, 0, .2, 1);
    transition: transform 160ms cubic-bezier(0, 0, .2, 1), -webkit-transform 160ms cubic-bezier(0, 0, .2, 1);
    padding: 14px 0;
    background: 0 0
}

body.scrolled-down .app-header {
    transform: translateY(-108px)
}

.wrapper .app-header .header-fixed {
    display: block;
    position: relative;
    color: #fff;
    z-index: 30;
    /* backdrop-filter: blur(4px) */
}

.wrapper .app-header .header-fixed .toolbar {
    position: relative;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 1168px;
    padding: 0 16px;
    margin: 0 auto;
    z-index: 30;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 80px;
    background: #092e73;
    border-radius: 46px;
    border: 1px solid #44557f
}

.wrapper .app-header .header-fixed .toolbar .toolbar_L .toolbar-link,
.wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link {
    -webkit-box-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    min-width: auto;
    cursor: pointer;
    color: #fff;
    text-decoration: none
}

.wrapper .app-header .header-fixed .toolbar .toolbar_L {
    display: flex;
    overflow: hidden;
    margin-left: -14px
}

.wrapper .app-header .header-fixed .toolbar .toolbar_L .toolbar-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 16px;
    user-select: none
}

.wrapper .app-header .header-fixed .toolbar .toolbar_L .toolbar-link .app-logo {
    padding: 0 8px;
    height: 62px;
    width: 234px;
    display: flex;
    align-items: center;
    justify-content: center
}

.wrapper .app-header .header-fixed .toolbar .toolbar_L .toolbar-link .app-logo img {
    width: 100%
}

.wrapper .app-header .header-fixed .toolbar .toolbar_R {
    display: flex;
    overflow: hidden;
    justify-content: flex-end;
    align-items: center
}

.wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 62px;
    padding: 0;
    user-select: none
}

.wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link.toolbar-btn {
    background: var(--color-yellow);
    color: var(--color-blue);
    border-radius: 80px;
    height: 48px;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    width: 182px;
}

.wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link.toolbar-btn .phone-number {
    margin: 0 auto;
    color: var(--color-blue);
    font-weight: 600
}

.wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link.toolbar-btn.call-dialog .phone-item,
.wrapper .cards-container .container .inner-cards-container .app-card-tariff .mat-card .app-net-card .section-after-middle .cost-page .cost-page_connection p:first-child {
    margin-right: 4px
}

@media (max-width: 540px) {
    .wrapper .app-header .header-fixed .toolbar .toolbar_L .toolbar-link {
        padding-right: 0
    }
}

@media (max-width: 380px) {
    .wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link.toolbar-btn.call-dialog {
        letter-spacing: -.5px
    }
}

@media (max-width: 360px) {
    .wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link.toolbar-btn.call-dialog span {
        display: none
    }
}

@media (max-width: 340px) {
    .wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link.toolbar-btn.call-dialog {
        letter-spacing: -1px
    }
}

@media (max-width: 320px) {
    .wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link.toolbar-btn.call-dialog {
        letter-spacing: 0
    }
}

.wrapper {
    background: url(/assets/STATIC/xgpon/img/top-bg.png) no-repeat;
    background-size: contain;
    background-position-y: -170px
}

.wrapper .top-block {
    position: relative
}

.wrapper .top-block .cable {
    position: absolute;
    bottom: -110px;
    z-index: 2;
    left: 46%
}

.wrapper .top-block {
    height: 630px;
    width: 100%;
    padding-top: 120px;
    position: relative;
    z-index: 40
}

.wrapper .top-block .container {
    padding: 0
}

.wrapper .top-block .header-flex-wrapper {
    height: 471px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 20px;
    background: #0723574D;
    backdrop-filter: blur(20px);
    position: relative;
    padding-top: 78px
}

.wrapper .top-block .header-flex-wrapper .header-flex-item {
    width: 565px
}

.wrapper .top-block .header-flex-wrapper .header-flex-item h1 {
    font-weight: 800;
    font-size: 60px;
    line-height: 50px;
    text-align: center;
    color: #fff
}

.wrapper .top-block .header-flex-wrapper .header-flex-item h1 span {
    display: block
}

.wrapper .top-block .header-flex-wrapper .header-flex-item h1 .subtitle {
    font-size: 34px;
    margin-bottom: 16px;
    font-weight: 800
}

.wrapper .top-block .header-flex-wrapper .header-flex-item h1 .speed {
    font-size: 78px;
    line-height: 48px;
    vertical-align: middle;
    color: var(--color-yellow-2);
    margin-bottom: 27px;
    font-weight: 800
}

.wrapper .top-block .header-flex-wrapper .header-flex-item .head-description {
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #fff;
    padding-left: 85px
}

/* .wrapper .top-block .header-flex-wrapper .header-flex-item .head-description span {
    font-weight: 600
} */
.wrapper .top-block .header-flex-wrapper .header-flex-item .head-description .bold {
    font-weight: 600
}
.wrapper .top-block .header-flex-wrapper .header-flex-item .head-description .yellow {
    color: var(--color-accent);
}

.wrapper .cards-container {
    margin-bottom: 36px;
    position: relative;
    z-index: 50
}

.wrapper .cards-container .inner-cards-container {
    display: flex;
    justify-content: center;
    z-index: 10
}

.wrapper .app-card-tariff {
    width: 480px;
    height: 545px;
    background: linear-gradient(141.45deg, #022d6e -7.47%, #090f1d 93.9%);
    border-radius: 30px;
    position: relative;
    color: #fff;
    margin-left: 40px;
    margin-right: 40px
}

.wrapper .app-card-tariff .promo {
    width: 100%;
    height: 46px;
    background: linear-gradient(89.47deg, rgba(255, 231, 45, .8) 6.09%, rgba(24, 98, 210, 1) 90.29%);
    position: relative;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center
}

.wrapper .app-card-tariff .promo p {
    text-shadow: 2px 2px 0 #051f48;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2
}

.wrapper .app-card-tariff .card-image {
    position: absolute;
    z-index: 5
}

.wrapper .app-card-tariff .card-image-side {
    left: -27px;
    top: 12px;
    z-index: 15
}

.wrapper .app-card-tariff .card-image-layout {
    width: 594px;
    height: 403px;
    top: -40px;
    left: 50%;
    transform: translateX(-50%)
}

.wrapper .app-card-tariff .mat-card {
    z-index: 10;
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 30px
}

.wrapper .app-card-tariff .mat-card .app-net-card {
    padding-top: 32px;
    z-index: 10;
    position: relative
}

.wrapper .app-card-tariff .mat-card .app-net-card .section-top .app-card-header {
    margin: 0 auto;
    text-align: center
}

.wrapper .app-card-tariff .mat-card .app-net-card .section-top .app-card-header .header-subtitle {
    font-family: Syncopate, sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 100%;
    margin-bottom: 17px;
    text-align: center
}

.wrapper .app-card-tariff .mat-card .app-net-card .section-top .app-card-header .header-title {
    text-align: center;
    margin-bottom: 10px
}

.wrapper .app-card-tariff .mat-card .app-net-card .section-top .app-card-header .header-title span {
    font-family: Syncopate, sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 56px
}

.wrapper .app-card-tariff .mat-card .app-net-card .section-top .speed-block .title-speed {
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-align: center;
    margin-bottom: 8px
}

.wrapper .app-card-tariff .mat-card .app-net-card .section-top .speed-block .speed {
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    text-align: center;
    color: var(--color-yellow);
    margin-bottom: 14px
}
.wrapper .app-card-tariff .mat-card .app-net-card .section-top .static-block {
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-align: center;
    margin-bottom: 14px
}
.wrapper .app-card-tariff .mat-card .app-net-card .section-middle {
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px
}

.wrapper .app-card-tariff .mat-card .app-net-card .section-middle .tv {
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    text-align: center;
    color: #fff;
    margin-bottom: 18px
}

.wrapper .app-card-tariff .mat-card .app-net-card .section-middle .period {
    border: 1px solid #fff;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    text-align: center;
    height: 54px;
    width: 360px;
    color: var(--color-accent);
    box-shadow: 0 0 4px 0 #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 12px
}
.wrapper .app-card-tariff .mat-card .app-net-card .section-middle .period span{
    color: var(--color-accent);
     font-weight: 700;
}
.wrapper .app-card-tariff .mat-card .app-net-card .section-middle .period .hrn{
    margin-right: 8px;
}
.wrapper .app-card-tariff .mat-card .app-net-card .section-middle .price-connect {
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    text-align: center
}

.wrapper .app-card-tariff .mat-card .app-net-card .section-middle .price-connect span {
    font-weight: 400
}

.wrapper .call-dialog {
    box-shadow: 0 4px 10px 0 #00000040;
    background: var(--color-yellow);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: var(--color-blue);
    border-radius: 80px;
    outline: 0;
    border: none;
    cursor: pointer
}

.wrapper .call-dialog span {
    color: var(--color-blue);
    font-weight: 700
}

.wrapper .app-card-tariff .mat-card .app-net-card .footer .order-btn {
    display: flex;
    justify-content: center
}

.wrapper .app-card-tariff .mat-card .app-net-card .footer .order-btn .call-dialog {
    width: 261px;
    height: 50px
}

.wrapper .info {
    height: auto;
    margin-bottom: 28px;
    position: relative;
    z-index: 10
}

.wrapper .info .container {
    z-index: 6
}

.wrapper .info .info-content {
    /* background: var(--color-dark-blue) url(/assets/STATIC/xgpon/img/info-image.png) no-repeat right; */
    background: linear-gradient(110.52deg, #061A3C 23.98%, #28306A 111.74%);

    border-radius: 20px;
    padding: 46px 30px;
    width: 100%
}

.wrapper .info .info-content h2 {
    color: var(--color-accent);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 17px;
    text-align: left
}

.wrapper .info .info-content .bold {
    font-weight: 800
}
.wrapper .info .info-content .italic {
    font-style: italic;
}
.wrapper .info .info-content .yellow {
    font-weight: 800;
    color: var(--color-accent)
}

.wrapper .info .info-content h4 {
    font-weight: 800;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    color: var(--color-accent);
    margin-bottom: 40px;
    width: 800px;
    margin: 0 auto 40px
}

.wrapper .info .info-content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    text-align: justify;
    color: #fff
}

.wrapper .info .info-content a {
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    text-align: justify;
    color: var(--color-orange)
}

.wrapper .info .info-content p span {
    font-weight: 800
}

.wrapper .info .info-content .top {
    margin-bottom: 30px
}

.wrapper .info .info-content .middle {
    margin-bottom: 30px
}

.wrapper .info .info-content .middle .pons {
    display: flex;
    justify-content: space-between
}

.wrapper .info .info-content .middle .pons .pon-item {
    width: 48%;
    height: auto;
    padding: 28px 20px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    /* border: 1px solid #ffdFAA45; */
    border-radius: 20px;
    background: var(--color-dark-blue)
}

.wrapper .info .info-content .bottom {
    margin-bottom: 50px;
}
.wrapper .info .info-content .bottom a {
    color: var(--color-accent);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
}
.wrapper .info .info-content .end {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.wrapper .info .info-content .end .call-dialog {
    width: 205px;
    height: 50px
}

@media screen  and (max-width: 767px) {
    /* .wrapper .info .info-content {
        background: linear-gradient(207.32deg, var(--color-dark-blue) 20.46%, #1046a2 98.24%);
    } */
    /* .wrapper .info .info-content .end .call-dialog {
        width: 150px;
    }     */
    /* .wrapper .app-card-tariff .mat-card .app-net-card .footer .order-btn .call-dialog {
        width: 150px;
    } */
     .wrapper .app-card-tariff .mat-card .app-net-card .footer {
        margin-top: 22px;
     }
     .wrapper .app-card-tariff .promo p {
        font-size: 18px;
     }
     .wrapper .info .info-content .bottom a {
        font-size: 14px;
        line-height: 20px;
    }
}
.wrapper .confrontation {
    margin-bottom: 32px
}

.wrapper .confrontation h2 {
    text-align: center;
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    margin-bottom: 28px;
    z-index: 5;
    position: relative
}

.wrapper .confrontation .cards {
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 5;
    position: relative
}

.wrapper .confrontation .cards .card {
    width: 280px;
    height: 349px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(207.32deg, var(--color-dark-blue) 20.46%, #1046a2 98.24%);
    border-radius: 20px;
    overflow: hidden
}

.wrapper .confrontation .cards .card .card-top-img {
    width: 100%
}

.wrapper .confrontation .cards .card .text-wr {
    padding: 0 24px 0;
    transform: translateY(-24px)
}

.wrapper .confrontation .cards .card .text-wr .line {
    display: flex;
    
}

.wrapper .confrontation .cards .card .text-wr .title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    height: 38px
}

.wrapper .confrontation .cards .card .text-wr .title img {
    margin-right: 14px;
    width: 28px;
    height: 28px
}

.wrapper .confrontation .cards .card .text-wr .title p {
    font-weight: 700;
    font-size: 20px;
    line-height: 18px;
    color: var(--color-beige)
}

.wrapper .confrontation .cards .card .text-wr .tariff-1 {
    margin-bottom: 14px;
    color: #fff
}

.wrapper .confrontation .cards .card .text-wr .tariff-1 .name {
    font-weight: 400;
    font-size: 18px;
    line-height: 26px
}

.wrapper .confrontation .cards .card .text-wr .tariff-1 .desc {
    font-weight: 400;
    font-size: 12px;
    line-height: 26px;
    color: var(--color-beige)
}

.wrapper .confrontation .cards .card .text-wr .tariff-2 {
    margin-bottom: 6px;
    color: #fff
}

.wrapper .confrontation .cards .card .text-wr .tariff-2 .name {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px
}

.wrapper .confrontation .cards .card .text-wr .tariff-2 .desc {
    font-weight: 400;
    font-size: 12px;
    line-height: 26px
}

.wrapper .for-installation {
    margin-bottom: 38px;
    position: relative;
    z-index: 5
}

.wrapper .for-installation .for-installation-content .cable-install {
    position: absolute;
    left: -189px;
    top: 72px
}

.wrapper .for-installation .for-installation-content {
    position: relative;
    height: 671px;
    width: 980px;
    padding: 38px 34px 30px 275px;
    border-radius: 20px;
    margin-left: auto;
    background: var(--color-dark-blue) url(/assets/STATIC/xgpon/img/for-install.png) no-repeat left
}

.wrapper .for-installation .for-installation-content h2 {
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    color: var(--color-accent);
    margin-bottom: 16px;
    text-align: left
}

.wrapper .for-installation .for-installation-content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px
}

.wrapper .for-installation .for-installation-content p.yellow {
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 8px
}

.wrapper .for-installation .for-installation-content p.bold {
    font-weight: 700
}

.wrapper .for-installation .for-installation-content ol {
    margin: 0;
    list-style: none;
    counter-reset: custom-counter
}

.wrapper .for-installation .for-installation-content ol li {
    font-weight: 400;
    font-size: 16px;
    line-height: 34px;
    margin-bottom: 8px;
    position: relative
}

.wrapper .for-installation .for-installation-content ol li:before {
    counter-increment: custom-counter;
    content: counter(custom-counter) "";
    color: var(--color-accent);
    background: var(--color-blue);
    font-weight: 700;
    width: 28px;
    height: 28px;
    font-size: 16px;
    padding: 10px;
    border-radius: 50%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -40px;
    top: 4px
}

.wrapper .for-installation .for-installation-content .call-dialog {
    width: 205px;
    height: 50px;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin: 0 auto;
    display: block
}
@media screen and (max-width: 767px) {
    .wrapper .for-installation .for-installation-content .call-dialog { 
       margin-top: 20px;
    }
}
.wrapper .difference {
    margin-bottom: 46px
}

.wrapper .difference .difference-content h2 {
    font-weight: 700;
    font-size: 24px;
    line-height: 26px;
    letter-spacing: 0;
    margin-bottom: 30px;
    text-align: left;
    color: #fff
}

.wrapper .difference .difference-content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0
}

.wrapper .difference .difference-content ul {
    padding-left: 18px;
    margin: 0
}

.wrapper .difference .difference-content ul li {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0
}

.faq .faq-content {
    margin-bottom: 46px
}

.faq .faq-content h2 {
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0;
    margin-bottom: 44px;
    text-align: left;
    color: var(--color-beige)
}

.faq .faq-content .faq-block_accordion .accordion_tab {
    border-top: 1px solid #0034b2;
    border-bottom: 1px solid #0034b2
}

.faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__head {
    height: 78px;
    display: flex;
    align-items: center;
    transition: all .2s ease-in-out;
    padding: 0
}

.faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__head .head_title {
    font-weight: 700;
    font-size: 18px;
    line-height: 78px;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--color-beige);
    width: 100%
}

.faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__content {
    color: var(--color-grey);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    position: relative;
    max-height: 0;
    padding: 0;
    overflow-y: scroll;
    transition: max-height .5s;
    -webkit-animation: .45s ease-in-out both accordionOff;
    animation: .45s ease-in-out both accordionOff;
    scrollbar-width: none;
    overflow: hidden
}

.faq .faq-content .faq-block_accordion .accordion_tab.open .accordion_tab__head {
    height: 44px
}

.faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab.open__head .head_title {
    line-height: 44px
}

.faq .faq-content .faq-block_accordion .accordion_tab.open .accordion_tab__content {
    margin-top: 10px;
    margin-bottom: 10px;
    animation: accordionIn .45s normal ease-in-out both 1;
    transition: max-height .5s ease-in-out !important;
    max-height: 260px
}

.faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__content p {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 20px
}

.faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__content .bold {
    font-weight: 700 !important
}

.faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__content a {
    color: var(--color-orange);
    text-decoration: underline
}

.faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__content ul {
    padding-left: 20px
}

.faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__content ul li {
    font-size: 14px;
    line-height: 20px
}

.faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__content a {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 20px
}

.banner {
    margin-bottom: 48px
}

.banner .banner-content {
    width: 100%;
    height: 161px;
    background: #061A3CB2 url(/assets/STATIC/xgpon/img/banner-bg.png) no-repeat center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px
}

.banner .banner-content .text-wr {
    width: 560px;
    margin-right: 140px
}

.banner .banner-content p {
    font-weight: 700;
    font-size: 38px;
    line-height: 46px;
    letter-spacing: 0;
    color: var(--color-accent)
}

.banner .banner-content .call-dialog {
    box-shadow: 0 4px 10px 0 #000E2699;
    background: var(--color-yellow);
    font-weight: 700;
    font-size: 26px;
    line-height: 24px;
    text-align: center;
    width: 246px;
    height: 60px;
    border-radius: 80px;
    color: var(--color-blue)
}

.wrapper .huricane {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    z-index: 1
}

.wrapper .chrystal {
    position: absolute;
    z-index: 1;
    right: 40px;
    top: -250px
}

.wrapper .abstract {
    position: absolute;
    z-index: 1;
    left: 0;
    top: -250px
}
@media screen and (max-width: 1300px) {
    .wrapper .abstract {
        left: -40px;
    }
}
@media screen and (max-width: 860px) {
   .wrapper .abstract {
        left: -80px;
    }
}
/* @media screen and (max-width: 767px) {
    .banner .banner-content .call-dialog {
        width: 200px;
    }
} */
.speedtest  {
    z-index: 10;
}
.speedtest .speedtest-content {
    width: 100%
}

.speedtest .speedtest-content h2 {
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 38px;
}

.speedtest-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px
}

.speedtest .blocks {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap
}

.speedtest .blocks .left,
.speedtest .blocks .right {
    width: 48%
}

.speedtest .blocks .left h3,
.speedtest .blocks .right>h3 {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px
}

.speedtest .blocks .right {
    position: relative;
    display: flex;
    flex-direction: column
}

.speedtest .blocks .right img {
    width: 543px;
    margin-top: 10px;
}

.speedtest .blocks .right .text {
    position: absolute;
    top: 386px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.speedtest .blocks .right .text p {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2
}

.speedtest .blocks .right .text p:first-child {
    margin-bottom: 14px;
    color: var(--color-accent)
}

/*.speedtest .blocks .right .text p:nth-child(2) {*/
/*    margin-bottom: 14px;*/
/*    color: var(--color-yellow)*/
/*}*/
.speedtest .blocks .right .text .call-dialog {
    width: 267px;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center
}

.speedtest-block iframe {
    width: 400px;
    height: 470px;
    margin: 0 auto;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, .25));
    border-radius: 6px
}

@media screen and (max-width: 1199px) {
    .speedtest-block iframe {
        width: 400px;
        height: 470px
    }

    .speedtest .blocks .left,
    .speedtest .blocks .right {
        width: 100%;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width: 767px) {

    .speedtest-block iframe {
        width: 290px;
        height: 500px
    }

    .speedtest .blocks .left,
    .speedtest .blocks .right {
        width: 100%
    }

    .speedtest .blocks .right .text {
        top: 200px
    }

    .speedtest .blocks .right {
        /* height: 380px; */
        display: flex;
        /*align-items: flex-start*/
        justify-content: flex-start;
    }

    .speedtest .blocks .right img {
        width: 100%
    }

    .speedtest .blocks .right .text p:first-child {
        font-size: 18px
    }

    .speedtest .blocks .right .text p:nth-child(2) {
        font-size: 24px
    }


    .wrapper .app-card-tariff .mat-card .app-net-card .section-top .static-block {
        font-size:18px;
        margin-bottom: 10px
    }
}

@keyframes accordionIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.9) rotateX(-60deg);
        transform: scale(.9) rotateX(-60deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes accordionOff {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.9) rotateX(-60deg);
        transform: scale(.9) rotateX(-60deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0
    }
}

@media screen and (max-width: 1199px) {
    .wrapper {
        background-position-y: top
    }

    .wrapper .container {
        width: 750px;
        padding: 0 15px
    }

    .wrapper .app-header .header-fixed .toolbar {
        width: 750px
    }

    .wrapper .top-block .cable {
        width: 534px;
        bottom: 70px;
        left: 65%
    }

    .wrapper .cards-container .inner-cards-container {
        flex-wrap: wrap
    }

    .wrapper .cards-container .inner-cards-container .app-card-tariff {
        margin-bottom: 30px
    }

    .wrapper .info {
        height: auto
    }

    .wrapper .confrontation .cards {
        flex-wrap: wrap;
        justify-content: center
    }

    .wrapper .confrontation .cards .card {
        margin-bottom: 20px;
        margin-left: 20px;
        margin-right: 20px
    }

    .wrapper .for-installation .for-installation-content {
        height: auto;
        width: 100%;
        background-size: cover;
        padding-left: 180px
    }

    .wrapper .for-installation .for-installation-content .cable-install {
        display: none
    }

    .banner .banner-content {
        padding: 0 20px
    }

    .banner .banner-content .text-wr {
        width: 400px;
        margin-right: 20px
    }

    .banner .banner-content .text-wr p {
        font-size: 30px;
        line-height: 38px
    }

    .wrapper .info .info-content {
        background-size: cover
    }

    .wrapper .info .info-content .middle .pons .pon-item {
        height: auto
    }

    .wrapper .info .info-content h4 {
        width: 100%
    }

    .wrapper .app-header .header-fixed .toolbar {
        width: 100%;
        padding: 0 10px
    }

    .wrapper .app-header .header-fixed .toolbar .toolbar_L {
        margin-left: 0
    }

    .wrapper .app-header .header-fixed .toolbar .toolbar_R {
        margin-right: 5px
    }

    .wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link.toolbar-btn {
        height: 48px;
        font-size: 16px
    }

    .speedtest .blocks .right .text {
        top: 368px
    }
}

@media screen and (max-width: 767px) {
    .mobile {
        display: flex
    }

    .desktop {
        display: none
    }

    .wrapper {
        background-size: 200%
    }
    .wrapper .app-header .header-fixed .toolbar .toolbar_R {
        margin-right: 3px
    }
    .wrapper .abstract,
    .wrapper .chrystal {
        display: none
    }

    .wrapper .huricane {
        top: 40%;
        left: 60%
    }

    .wrapper .container {
        width: 320px;
        padding: 0 6px;
    }

    .wrapper .app-header .header-fixed .toolbar {
        width: calc(100% - 20px);
        height: 68px
    }

    .wrapper .app-header .header-fixed .toolbar .toolbar_L .toolbar-link .app-logo {
        width: 116px;
        height: 17px
    }

    .wrapper .app-header .header-fixed .toolbar .toolbar_R .toolbar-link.toolbar-btn {
        width: 141px;
        height: 40px;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        text-align: center
    }
    .wrapper .info .info-content {
        padding-bottom: 26px;
    }
    .wrapper .info .info-content h2 {
        /* color: var(--color-beige); */
        font-size: 22px
    }

    .wrapper .for-installation .for-installation-content h2 {
        font-size: 20px;
        line-height: 1.2
    }

    .wrapper .top-block {
        height: auto;
        padding-top: 100px
    }
    .wrapper .top-block .container {
        align-items: center;
    }
    .wrapper .cards-container .inner-cards-container .app-card-tariff {
        margin-left: 0px;
        margin-right: 0px
    }
    .wrapper .top-block .header-flex-wrapper {
        width: calc(100% - 20px);
        min-width: 300px;
        padding: 38px 18px 18px;
        height: 334px;
        border: 1px solid linear-gradient(117.51deg, rgba(255, 255, 255, .3) 10.57%, rgba(255, 223, 170, .3) 93.74%);
        margin-bottom: 170px
    }

    .wrapper .top-block .header-flex-wrapper .header-flex-item {
        width: 100%
    }

    .wrapper .top-block .header-flex-wrapper .header-flex-item h1 {
        font-size: 30px;
        line-height: 30px
    }

    .wrapper .top-block .header-flex-wrapper .header-flex-item h1 .subtitle {
        font-size: 22px;
        line-height: 30px
    }

    .wrapper .top-block .header-flex-wrapper .header-flex-item h1 .speed {
        font-size: 38px;
        line-height: 48px
    }

    .wrapper .top-block .header-flex-wrapper .header-flex-item .head-description {
        padding: 0;
        font-size: 18px;
        line-height: 24px
    }

    .wrapper .top-block .cable {
        width: 534px;
        display: block;
        bottom: -176px;
        left: 50%;
        transform: translateX(-30%);
        right: inherit
    }

    .wrapper .top-block .header-flex-wrapper {
        padding-left: 20px;
        padding-right: 20px
    }

    .wrapper .top-block .header-flex-wrapper .header-flex-item h1 .speed {
        margin-bottom: 10px
    }

    .wrapper .top-block .header-flex-wrapper .header-flex-item h1 .subtitle {
        margin-bottom: 6px
    }

    .wrapper .app-card-tariff {
        width: 288px;
        height: 460px
    }

    .wrapper .app-card-tariff .card-image-side {
        top: 2px;
        left: -18px
    }

    .wrapper .app-card-tariff .mat-card .app-net-card {
        padding-top: 12px
    }

    .wrapper .app-card-tariff .mat-card .app-net-card .section-top .app-card-header .header-subtitle {
        font-size: 26px;
        line-height: 32px;
        margin-bottom: 8px
    }

    .wrapper .app-card-tariff .mat-card .app-net-card .section-top .app-card-header .header-title {
        font-size: 38px;
        margin-bottom: 0px
    }

    .wrapper .app-card-tariff .card-image-layout {
        width: 350px;
        height: 275px;
        top: -18px
    }

    .wrapper .app-card-tariff .mat-card .app-net-card .section-top .speed-block .title-speed {
        font-size: 20px
    }

    .wrapper .app-card-tariff .mat-card .app-net-card .section-top .speed-block .speed {
        font-size: 34px;
        margin-bottom: 8px
    }

    .wrapper .app-card-tariff .mat-card .app-net-card .section-middle .tv {
        font-size: 18px
    }

    .wrapper .app-card-tariff .mat-card .app-net-card .section-middle .period {
        width: 247px;
        font-size: 22px;
        margin-bottom: 10px
    }

    .wrapper .app-card-tariff .mat-card .app-net-card .section-middle .price-connect {
        font-size: 14px
    }

    .wrapper .info .info-content {
        background-size: cover;
        background-position: center;
        padding-left: 12px;
        padding-right: 12px
    }

    .wrapper .info .info-content h3 {
        font-size: 24px;
        color: var(--color-beige)
    }

    .wrapper .info .info-content p {
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        margin-bottom: 6px;
    }

    .wrapper .info .info-content .middle .pons {
        flex-direction: column
    }

    .wrapper .info .info-content .middle .pons .pon-item {
        padding: 26px 16px;
        width: 100%;
        height: auto;
        font-size: 14px;
        line-height: 20px;
    }

    .wrapper .info .info-content .middle .pons .pon-item:first-child {
        margin-bottom: 14px
    }

    .wrapper .info .info-content .bottom {
        margin-bottom: 18px
    }

    .wrapper .info .info-content h4 {
        font-size: 18px;
        margin-bottom: 26px
    }

    .wrapper .confrontation .cards .card {
        height: 364px;
        margin: 0 0 28px;
        width: 100%
    }

    .wrapper .for-installation .for-installation-content {
        padding: 80px 14px 20px;
        background-position-x: -400px
    }

    .wrapper .for-installation .for-installation-content h4 {
        font-size: 20px;
        margin-bottom: 10px
    }

    .wrapper .for-installation .for-installation-content p {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 6px;
    }

    .wrapper .for-installation .for-installation-content .cable-install {
        display: block;
        width: 200px;
        top: -16px;
        left: -84px
    }

    .wrapper .for-installation .for-installation-content ol li {
        font-size: 14px;
        line-height: 20px;
    }

    .faq .faq-content h2 {
        color: #fff;
        text-align: left
    }

    .faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__head .head_title {
        line-height: 24px
    }

    .faq .faq-content .faq-block_accordion .accordion_tab .accordion_tab__content p {
        line-height: 18px
    }

    .faq .faq-content .faq-block_accordion .accordion_tab.open .accordion_tab__content {
        max-height: 360px
    }

    .banner .banner-content {
        height: auto;
        padding: 38px 26px 26px;
        flex-direction: column
    }

    .banner .banner-content .text-wr {
        width: 100%;
        margin-right: 0;
        margin-bottom: 18px
    }

    .banner .banner-content .text-wr p {
        display: inline
    }

    .faq .faq-content .faq-block_accordion .accordion_tab.open .accordion_tab__head {
        height: 68px
    }

    .speedtest .blocks .right .text {
        top: 200px
    }
}

.hide-block {
    visibility: hidden
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0
}

::-webkit-scrollbar-thumb {
    background: #888
}

::-webkit-scrollbar-track {
    background: #f8f8ff;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .1)
}


.wrapper .map {
    height: 928px;
}
.wrapper .map iframe {
    width: 100%;
    min-height: 928px;
    border: none;
}
@media (max-width: 1199px) {
    .wrapper .map {
        height: 1124px;
    }
    .wrapper .map iframe {
        min-height: 1124px;
    }
}
@media (max-width: 767px) {
    .wrapper .map {
        /* height: 976px; */
        /* height: 1488px; */
        height: 1500px; 
    }
    .wrapper .map iframe {
        /* min-height: 976px; */
      min-height: 1500px;
       
    }
}