.body {
    //xx
    &--bg-light {
        background-color: #fcfcfc;

        .page-header {
            @include viewport-min(lg) {
                background-color: #fff;
            }
        }
    }
}
.page-main{
    min-height: calc(100vh - 340px);
}


// ------------------------------------
// Sign In and Sign Up

.block-si-form {
    position: relative;
    z-index: 30;
    padding: 1rem;

    @include viewport-min(lg) {
        padding: 1rem 1.5rem;
    }

    a {
        &:hover {
            text-decoration: none;
        }
    }

    &__wrap {
        //
    }

    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 2rem;
    }

    &__body {
        //
    }

    &--footer {
        //
    }

    .si-top-logo {
        a {
            display: block;

            img {
                display: block;
            }
        }
    }

    .si-top-action {
        padding-top: .5rem;

        a {
            display: block;
            font-size: 1.125rem;
            font-weight: 500;

            &:hover {
                text-decoration: none;
            }
        }
    }

    .si-main {
        &__wrap {
            //
        }

        &__top {
            margin: 0 0 .75rem;
        }

        &__title {
            margin: 0;
            font-size: 1.125rem;
            font-weight: 500;

            @include viewport-min(lg) {
                font-size: 1.375rem;
            }
        }

        &__subtitle {
            margin: .25rem 0 0;
            font-size: .875rem;
            font-weight: 300;

            @include viewport-min(lg) {
                font-size: 1rem;
            }
        }

        &__form {
            .form-group {
                margin-bottom: .75rem;
            }
        }

        &__divider {
            margin: .75rem 0;

            @include viewport-min(lg) {
                margin: .25rem 0;
            }

            position: relative;

            &:after {
                content: "";
                display: block;
                position: absolute;
                height: 1px;
                width: 100%;
                top: 50%;
                left: 0;
                margin-top: -1px;
                z-index: 10;
                background-image: linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.15) 50%,rgba(0,0,0,.05) 100%);
                background-size: 100% 1px;
                background-repeat: no-repeat;
            }

            span {
                position: relative;
                display: block;
                width: 3rem;
                height: 3rem;
                margin: 0 auto;
                line-height: calc(3rem - 2px);
                font-size: .875rem;
                font-weight: 500;
                text-align: center;
                color: $gray-600;
                background-color: #fff;
                border: 1px solid $gray-200;
                border-radius: 50%;
                z-index: 15;
            }
        }

        &__social {
            padding: .5rem 0;

            @include viewport-min(lg) {
                padding: .75rem 0;
            }
        }
    }
}

.block-si-intro {
    position: relative;
    z-index: 20;
    background-color: #fcfcfc;

    &__wrap {
        position: relative;
        margin: 0 auto;
        padding: 2rem 2rem 6rem;
        min-height: 100vh;

        @include viewport-min(xl) {
            padding: 2rem 0 6rem;
            width: 780px;
        }

        @media (min-width: 1440px) {
            padding: 3rem 2rem 8rem;
            width: 960px;
        }
    }

    .si-intro {
        //xx
        &-header {
            padding: 1rem 0;

            @include viewport-min(lg) {
                padding: 1rem 0;
            }
        }

        &-title {
            font-size: 1.5rem;
            line-height: 1.5;
            text-transform: uppercase;

            @include viewport-min(xl) {
                padding: 0 10%;
            }
        }

        &-subtitle {
            color: $gray-600;
        }

        &-action {
            margin: 2rem 0 0;

            @include viewport-min(lg) {
                margin: 3rem 0 0;
            }

            .btn-lg {
                //
            }
        }

        &-divider {
            margin: 1rem 0;
            height: 1px;
            background-image: linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.15) 50%,rgba(0,0,0,0) 100%);
            background-size: 100% 1px;
            background-repeat: no-repeat;

            @include viewport-min(lg) {
                margin: 2.5rem 0;
            }
        }

        &-main {
            //
        }

        &-app {
            padding: 1rem 0;

            @include viewport-max(xl) {
                display: flex;
                flex-direction: column-reverse;
                align-items: center;
                justify-content: center;
                padding: 1rem 0;
            }

            @include viewport-min(xl) {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 1rem 0;
            }

            &__screen {
                flex: 0 0 auto;

                img {
                    display: block;
                    width: 180px;
                    margin: 0 auto;

                    @include viewport-min(xl) {
                        width: 200px;
                    }
                }
            }

            &__content {
                flex: 1 auto auto;
                min-width: 0;
                margin: 0 0 2rem;

                @include viewport-min(xl) {
                    margin: 1rem 0 0 4rem;
                }
            }

            &__title {
                margin: 0;
                font-size: 1.5rem;
                line-height: 1.5;
                font-weight: 300;
            }

            &__download {
                margin: 1rem 0 0;

                @include viewport-min(xl) {
                    margin: 1.5rem 0 0;
                }

                a {
                    display: inline-block;
                    margin: .5rem 0;
                }
            }
        }

        &-footer {
            color: $gray-600;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: .5rem 0;
        }
    }
}
// END - Sign In and Sign Up

// ------------------------------------
// Landing page

.block-hero {
    &--ld {
        //
    }

    &__wrap {
        position: relative;
        padding-top: 72px;
    }

    &__background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(251,131,50,0.1) 25%, rgba(248,195,50,0.08) 75%, rgba(255,255,255,1) 100%);
        z-index: 10;

        .hero-background {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;

            @include viewport-min(lg) {
                display: block;
            }

            &__shape {
                position: absolute;
                will-change: transform;
            }

            svg {
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
                -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
                position: absolute
            }

            .stroke {
                fill: none;
                stroke: #fa6400;
                stroke-opacity: .4;
                stroke-width: 1;
            }
        }
    }

    &__body {
        position: relative;
        z-index: 20;
    }

    &__main {
        padding: 3rem 0;

        @include viewport-min(lg) {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4rem 5% 4rem;
        }

        @include viewport-min(xl) {
            padding-left: 8%;
            padding-right: 8%;
        }
    }

    &__intro {
        padding: 0 2rem;

        @include viewport-min(md) {
            padding: 0 8%;
        }

        .hero-badge {
            margin: 0 0 4rem;

            span {
                display: inline-block;
                vertical-align: top;
            }
        }

        .hero-title {
            @extend .c-section-title;
            @extend .c-section-title--lg;
            line-height: 1.25;

            span {
                display: inline-block;
            }
        }

        .hero-subtitle {
            @extend .c-section-subtitle;
            @extend .c-section-subtitle--lg;
        }

        .hero-btns {
            margin: 2rem 0 0 0;

            @include viewport-min(sm) {
                margin: 3rem 0 0 0;
            }

            .btn {
                margin: 0 .25rem;
                padding-right: 2.5rem;
                padding-left: 2.5rem;
                @include viewport-max(md) {
                    display: block;
                    width: 80%;
                    max-width: 320px;
                    margin: 1rem auto;
                    font-size: 1rem;
                }
            }
        }
    }

    &__screenshot {
        margin: 0;

        @include viewport-min(sm) {
            margin: 1rem 0 0;
        }

        .screenshot-wrap {
            text-align: center;
            video {
                display: block;
            }
            img{
                max-width: 100%;
            }
        }
    }
}

.block-ld {
    padding: 2rem 0;

    @include viewport-min(lg) {
        padding: 4rem 0;
    }
    
    &--bg-gray01{
        background-color: #f9f9f9;
    }

    &--bg-gradient-top {
        background-image: linear-gradient(180deg,#f5f5f5 5%,#fff 90%);
    }

    &__header {
        padding: 0 1rem;

        // @include viewport-min(md) {
        //     padding: 0 8%;
        // }

        // @include viewport-min(lg) {
        //     padding: 0 12%;
        // }

        // @include viewport-min(xl) {
        //     padding: 0 20%;
        // }
    }

    &__main {
        margin-top: 2rem;

        @include viewport-min(lg) {
            margin-top: 3rem;
        }
    }

    &__footer {
        margin-top: 1rem;

        @include viewport-min(lg) {
            margin-top: 2rem;
        }
    }

    &__title {
        @extend .c-section-title;
        font-size: 1.5rem;
        line-height: 1.375;
        color: #333;
    }

    &__subtitle {
        @extend .c-section-subtitle;
        font-size: 1.125rem;
        line-height: 1.5;
        color: #324148;
    }
}

.block-features {
    margin: 2rem 0 0;
    padding: 2rem 0;

    @include viewport-min(lg) {
        margin: 0;
        padding: 4rem 0;
    }
}

.block-showcase {
    padding-bottom: 0;
    overflow: hidden;

    &__wrap {
    }

    &-acd {
        @include viewport-min(lg) {
            display: flex;
            justify-content: flex-end;
            position: relative;
        }
    }

    .accordion-media {
        position: relative;
        z-index: 100;
        &__wrap {
            width: 100%;
            margin: 0 auto 2rem;
            height: 23.75rem;
            position: relative;

            @include viewport-min(sm) {
                overflow: visible;
            }

            @include viewport-min(sm) {
                margin: 0 auto;
            }

            @include viewport-min(lg) {
                width: 47.5rem;
                height: 42.5rem;
            }
        }

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

        @include viewport-min(lg) {
            display: block;
            flex: 1 1 auto;
            min-width: 0;
            margin: 0 2rem 0 0;
        }

        .showcase-wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 47.5rem;
            height: 47.5rem;
            opacity: 0;
            transition: opacity .5s ease-in-out;
            transform-origin: 0 0;
            margin-left: auto;
            margin-right: auto;
            @include viewport-max(md) {
                left: 0;
                transform: scale(.5);
            }
            @include viewport-between(md,lg) {
                left: 50%;
                transform: scale(.5) translateX(-50%);
            }
            @include viewport-between(lg,xl) {
                transform: scale(.8);
            }

            @include viewport-between(lg,xl) {
                top: -4rem;
                left: -4rem;
            }

            @include viewport-min(xl) {
                top: -6rem;
                left: -5rem;
            }

            .el-grp__montage {
                position: absolute;
                top: 0;
                left: 0;
            }

            .el-grp__montage__layer {
                transition-property: opacity margin;
                opacity: 0;

                &:nth-child(1) {
                    margin-top: 20px;
                    transition-duration: 1s;
                    transition-delay: .8s;
                }

                &:nth-child(2) {
                    margin-top: -90px;
                    transition-duration: .5s;
                    transition-delay: .5s;
                }

                &:nth-child(3) {
                    margin-left: 30px;
                    transition-duration: .5s;
                    transition-delay: .4s;
                }

                &:nth-child(4) {
                    margin-top: -10px;
                    margin-left: 35px;
                    transition-duration: .6s;
                    transition-delay: .6s;
                }

                &:nth-child(5) {
                    margin-top: 15px;
                    margin-left: -25px;
                    transition-duration: .7s;
                    transition-delay: .5s;
                }

                &:nth-child(6) {
                    margin-top: 30px;
                    margin-left: -15px;
                    transition-duration: .6s;
                    transition-delay: .3s;
                }
            }

            &.active {
                opacity: 1;

                .el-grp__montage__layer {
                    margin: 0 !important;
                    opacity: 1 !important;
                }
            }
        }
    }

    .accordion-showcase {
        position: relative;
        z-index: 200;
        padding: 0 1.5rem 3rem 1.5rem;
        // @include viewport-max(sm){
        //     display: block;
        //     overflow: auto;
        //     white-space: nowrap;
        //     .collapse{
        //         display: block !important;
        //         height: auto !important;
        //     }
        //     .collapsing{
        //         display: block !important;
        //         height: auto !important;
        //     }
        // }
        @include viewport-min(lg) {
            flex: 0 0 33%;
            padding: 5rem 0;
            height: 42.5rem;
        }

        &__single {
            padding-left: 1rem;
            padding-right: 1rem;
            padding-bottom: 0;
            margin-bottom: .75rem;
            border-bottom: 1px solid $gray-200;

            @include viewport-max(sm){
                display: inline-block;
                vertical-align: top;
                white-space: normal;
                max-width: 92%;
                border: 0;
                margin: 0;
                margin-right: 1rem;
            }
            @include viewport-min(lg) {
                padding-bottom: .75rem;
                margin-bottom: 1.5rem;
            }

            &:last-child {
                padding-bottom: 0;
                margin-bottom: 0;
                border-bottom: 0;
            }

            .showcase-item {
                a {

                    &:hover {
                        text-decoration: none;
                    }
                }

                &__media {
                    /*position: absolute;
                    top: 0;
                    left: 1rem;
                    width: 700px;
                    height: 100%;
                    display: flex;
                    align-items: center;*/
                }

                &__title {
                    position: relative;
                    margin: 0 0 .75rem;
                    line-height: 1.25;
                    font-size: 1.25rem;
                    font-weight: 600;
                    @include viewport-max(sm) {
                        font-size: 1.125rem;
                    }
                    @include viewport-min(lg) {
                        font-size: 1.5rem;
                    }

                    a {
                        color: $gray-900;
                        display: block;
                        position: relative;
                        color: $primary;
                        transition: color .2s ease-in-out;
                        cursor: default;

                        &:before {
                            @extend %mdi-icon;
                            display: block;
                            position: absolute;
                            line-height: 1.5rem;
                            top: 50%;
                            margin-top: -.75rem;
                            left: -28px;
                            content: "\F0140";
                            font-size: 1.5rem;
                            color: $primary;
                            transition: color .2s ease-in-out, transform .2s ease-in-out;
                        }
                        @include viewport-max(sm){
                            &:before {
                                transform: rotate(-90deg) !important;
                            }
                        }
                        &.collapsed {
                            color: $gray-900;
                            cursor: pointer;

                            &.collapsed {
                                &:before {
                                    color: $gray-900;
                                    transform: rotate(-90deg);
                                }
                            }
                        }
                    }
                }

                &__main-wrap {
                    padding: 0 0 1rem;
                    @include viewport-max(sm){
                        padding: 0 00;
                    }
                }

                &__descr {
                    margin: 0;
                    color: $gray-600;
                }

                &__action {
                    margin: 1rem 0 0;

                    a.view-link {
                        font-size: .875rem;
                        font-weight: 500;
                        transition: color .2s ease-in-out, padding-left .2s ease-in-out;

                        &:hover {
                            padding-left: 3px;
                        }
                    }
                }
            }
        }
    }
}

.block-clients {
    padding: 2rem 0;

    @include viewport-min(lg) {
        padding: 2rem 0;
    }

    &__title {
        @extend .c-section-title;
        font-size: 1.75rem;
        line-height: 1.375;
    }

    &__list {
        margin: 2rem 0 0;
        .row{
            flex-wrap: nowrap;
            overflow: auto;
        }
        .single-client-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: .5rem 1rem;

            img {
                display: block;
                max-height: 4rem;
                max-width: 100%;
                filter: grayscale(100%);
            }
        }
    }
}

.block-cta {
    margin: 2rem 0 0;
    color: #fff;

    @include viewport-min(lg) {
        margin: 3rem 0 0;
    }

    &__wrap {
        margin: 0 -1rem;
        padding: 2rem 2rem;
        background-color: $gray-700;

        @include viewport-min(sm) {
            border-radius: 1rem;
        }

        @include viewport-min(lg) {
            margin: 0;
            padding: 3rem;
        }
    }

    .cta-title {
        @extend .c-section-title;
        @extend .c-section-title--sm;
        color: #fff;
    }

    .cta-subtitle {
        @extend .c-section-subtitle;
        font-size: 1rem;
        color: #fff;
    }

    .cta-actions {
        white-space: nowrap;

        .btn {
            margin: 0 0 0 .5rem;
        }
    }
}

// more landing

.block-app {
    position: relative;
    overflow: hidden;

    &--top {
        margin-top: -72px;
        padding-top: 144px;
    }

    &--top-fixed {
        padding-top: 72px;
    }

    &__background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(251,131,50,0.1) 0%, rgba(248,195,50,0.08) 50%, rgba(255,255,255,1) 100%);
        z-index: 10;

        .hero-background {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;

            @include viewport-min(lg) {
                display: block;
            }

            &__shape {
                position: absolute;
                will-change: transform;
            }

            svg {
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
                -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
                position: absolute
            }

            .stroke {
                fill: none;
                stroke: #fa6400;
                stroke-opacity: .4;
                stroke-width: 1;
            }
        }
    }

    &__wrap {
        position: relative;
        z-index: 20;
        padding: 2rem 0;

        @include viewport-min(md) {
            padding: 3rem 0 4rem;
        }

        @include viewport-min(xl) {
            padding: 4rem 0 5rem;
        }
    }

    &__sc {
        img {
            max-height: 100%;
            max-width: 100%;
        }

        .app-sc {
            //xx
            &-wrap {
                display: flex;
                align-items: flex-end;
                justify-content: center;

                @include viewport-min(lg) {
                    align-items: flex-end;
                    justify-content: flex-end;
                }
            }

            &-tablet {
                width: 80%;
                max-width: 20rem;

                @include viewport-min(lg) {
                    width: 24rem;
                    max-width: none;
                }

                @include viewport-min(xl) {
                    width: 28rem;
                }
            }

            &-mobile {
                width: 6rem;
                margin-left: -4rem;

                @include viewport-min(lg) {
                    width: 10rem;
                    margin-left: -6rem;
                }

                @include viewport-min(lg) {
                    width: 12rem;
                    margin-left: -8rem;
                }
            }
        }
    }

    &__cnt {
        padding: 1rem 1rem 2rem;
        text-align: center;

        @include viewport-min(sm) {
            padding: 3rem;
        }

        @include viewport-min(lg) {
            padding: 4rem 0 4rem 4rem;
            text-align: left;
            max-width: 600px;
        }
    }

    &__tle {
        @extend .c-section-title;
        @extend .c-section-title--sm;
        line-height: 1.375;

        span {
            display: inline-block;
        }
    }

    &__stl {
        @extend .c-section-subtitle;
        @extend .c-section-subtitle--sm;

        p {
            margin-bottom: .5rem;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    &__dwl {
        margin: 2rem 0 0;

        @include viewport-min(lg) {
            margin: 3rem 0 0;
            display: flex;
            align-items: center;
        }

        .single-download-btn {
            margin: 0 .25rem 1rem;

            img {
                height: 56px;

                @include viewport-min(xl) {
                    height: 64px;
                }
            }
        }

        .dwl-qrc-wrp {
            margin: 24px 0 0;
            text-align: center;

            .qr-txt {
                font-size: .875rem;
                font-style: italic;
                margin: 0 0 .25rem;
                color: $gray-700;
            }
            .qr-img{
                //
            }
            @include viewport-min(lg) {
                margin: 0 0 24px 48px;
            }
        }
    }
}

.block-steps{
    overflow: hidden;
    img{
        max-width: 100%;
    }
    &__wrap{
        //
    }
    &__sc{
        padding: 2rem 4rem 2rem;
        display: flex;
        justify-content: center;
        img{
            width: 12rem;
            @include viewport-min(lg){
                width: 18rem;
            }
            @include viewport-min(xl){
                width: 20rem;
            }
        }
    }
}

.block-download{
    overflow: hidden;
    &__wrap{
        //
    }
    &__sc{
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 12rem;
            @include viewport-min(lg){
                width: 18rem;
            }
        }
    }
    &__btn{
        .single-dwn-btn{
            display: block;
            margin: 0 .25rem 1rem;
            @include viewport-min(lg){
                display: inline-block;
                vertical-align: top;
            }
            img{
                height: 56px;
                @include viewport-min(xl){
                    height: 64px;
                }
            }
        }
    }

    &__qr{
        text-align: center;
        margin: 1rem 0 0;
        .qr-txt{
            font-size: .875rem;
            font-style: italic;
            margin: 0 0 .5rem;
            color: $gray-600;
        }
    }
}

.block-appscr{
    overflow: hidden;
    padding: 2rem 0;
    &__wrap{
        margin: 0 auto;
        max-width: 1440px;
    }
}

.slide-appscr{
    padding: 1rem 0;
    &__item{
        padding: .5rem;
        @include viewport-min(sm){
            padding: 1rem;
        }
        &, &:focus{
            outline: none;
        }
        img{
            width: 100%;
        }
    }
    .slick-dots{
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        padding: 1rem 0;
        margin: 0;
        li{
            display: block;
            font-size: 0;
            padding: .25rem;
            &:focus{
                outline: none;
            }
            button{
                @extend %button-reset;
                display: block;
                width: .5rem;
                height: .5rem;
                background-color: $gray-300;
                border: 0;
                border-radius: 50%;
                transition: background-color .3s ease-in-out;
            }
            &.slick-active{
                button{
                    background-color: $primary;
                }
            }
        }
    }
}

// END - Landing page

// ------------------------------------
// Front page

.block-front {
    &__header {
        padding: 2rem 0;

        @media (min-width: 768px) {
            padding: 1rem 0;
        }

        @media (min-width: 992px) {
            padding: 1rem 0;
        }

        @media (min-height: 992px) {
            padding: 4rem 0 0;
        }
    }

    &__content {
        margin: 2rem 0 0;

        @media (min-height: 768px) {
            margin: 3rem 0 0;
        }

        @media (min-height: 992px) {
            margin: 4rem 0 0;
        }
    }
    //e
    &__title {
        color: #fff;
    }

    &__quote {
        color: #fff;

        p {
            margin-bottom: .5rem;
        }
    }
}

// ------------------------------------
// Front page
.block-pricing {
    padding-bottom: 3rem;
    &--tenant{
        padding-bottom: 4rem;
    }
    &--bg {
        background-color: #fff;
        background-image: url('../img/bg-pricing.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom center;
    }
    &__noted{
        margin: 4rem 0 0;
        @include viewport-min(lg){
            margin-top: 5rem;
        }
    }
}

// ------------------------------------

.block-article {
    padding: 2rem 0;
    color: $gray-700;
    min-height: 75vh;

    img {
        max-width: 100%;
        height: auto !important;
    }

    iframe {
        max-width: 100% !important;
    }

    @include viewport-min(lg) {
        padding: 3rem 0;
    }

    h1, h2, h3, h4, h5, h6 {
        color: $gray-900;
    }

    h1 {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    h2 {
        font-size: 1.25rem;
        line-height: 1.375;
    }

    h3 {
        font-size: 1.125rem;
        line-height: 1.375;
    }

    @inlcude viewport-min(lg) {
        padding: 4rem 0;
    }

    &__wrap {
        //
    }

    &__hdr {
        padding: 0 0 1rem;
        margin: 0 0 2rem;
        border-bottom: 1px solid $gray-200;
    }

    &__cnt {
        h1, h2, h3, h4, h5, h6 {
            margin: 1.25rem 0 .75rem;
        }

        p {
            margin-bottom: .5rem;
        }

        ul {
            margin-bottom: .5rem;
        }

        hr {
            margin: 1rem 0;
            border-color: $gray-200;
        }
    }
}

.l-sidebar {
    //
}

.l-manual-menu {
    &__tgl {
        position: relative;
        margin: 0 0 1rem;
        text-align: left;
        text-transform: uppercase;
        box-shadow: 0 0 0 !important;

        &:active {
            background-color: $gray-100;
        }

        &.collapsed {
            color: $gray-900;

            &:hover {
                color: $gray-900;
            }

            &:after {
                transform: rotate(-90deg);
            }
        }

        &:after {
            @extend %mdi-icon;
            content: "\F0140";
            display: block;
            position: absolute;
            right: .5rem;
            top: 50%;
            margin-top: -12px;
            line-height: 24px;
            font-size: 1.25rem;
            transition: transform .2s ease-in-out;
        }
    }

    &__mni{
        //
    }
    // menu
    &__navtabs {
        display: flex;
        margin: 0 0 1rem;
        border: 0;

        a {
            flex: 1 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: .5rem 0;
            line-height: 1.5;
            font-size: .875rem;
            font-weight: 500;
            text-align: center;
            letter-spacing: .5px;
            color: #333;
            background-color: #E4EDF2;

            &:first-child {
                border-radius: .25rem 0 0 .25rem;
            }

            &:last-child {
                border-radius: 0 .25rem .25rem 0;
            }

            &:hover {
                text-decoration: none;
            }

            i.mdi {
                display: block;
                line-height: 1.125rem;
                margin: 0 .625rem 0 0;
                padding: 0 .5rem 0 0;
                border-right: 1px solid rgba(#000,.1);
            }

            &.active {
                color: #fff;
                background-color: #F06134;
                border-color: #F06134;

                i.mdi {
                    border-color: rgba(#fff,.25);
                }
            }
        }
    }
    // list
    ol {
        counter-reset: item;
    }

    li {
        display: block;

        &:before {
            content: counters(item, ".") ".";
            counter-increment: item;
        }
    }

    &__list {
        margin: 0;
        padding: 0;

        ol {
            padding: 0 0 0 1rem;
        }

        li {
            position: relative;
            padding-left: 1.75rem;

            &:before {
                position: absolute;
                display: block;
                left: 0;
                width: 1.5rem;
                line-height: 1.5rem;
                top: .5rem;
                text-align: center;
            }

            a {
                display: inline-block;
                vertical-align: top;
                line-height: 1.5;
                color: $gray-900;

                &:hover {
                    text-decoration: none;
                    color: $primary;
                }
            }

            &.active {
                &:before {
                    color: $primary;
                }

                & > a {
                    color: $primary;
                }
            }
        }

        & > li {
            padding-top: .25rem;
            padding-bottom: .25rem;
            border-bottom: 1px solid $gray-200;

            &:last-child {
                border-bottom: 0;
            }

            & > a {
                padding: .25rem 0;
            }

            ol {
                margin: .25rem 0 .5rem -1.25rem;
                padding-left: 1rem;
                border-left: 3px solid $gray-100;

                li {
                    padding-left: 2.25rem;
                    font-size: .875rem;
                    line-height: 1.5;

                    & > a {
                        padding: .125rem 0;
                    }

                    &:before {
                        top: 1px;
                        width: 1.75rem;
                    }
                }
            }
        }
    }
}

.block-manual {
    padding: 2rem 0;

    @include viewport-min(lg) {
        padding: 3rem 0;
    }

    &__hdr {
        margin: 0 0 1rem;
    }

    &__tle {
        margin: 0;
        font-size: 1.5rem;

        @include viewport-min(md) {
            font-size: 2rem;
        }
    }

    &__sbr {
        @include viewport-min(lg) {
            width: 20rem;
            height: 100%;
            padding: 0 1rem 0 0;
            border-right: 1px solid $gray-300;
        }
    }

    &__cnt {
        &-hdr {
            padding: 0 0 1rem;
            margin: 0 0 2rem;
            border-bottom: 1px solid $gray-200;

            @include viewport-min(md) {
                display: flex;
                align-items: center;
            }
        }

        &-tle {
            margin: .5rem 0 0 0;
            font-size: 1.25rem;
            font-weight: 300;

            @include viewport-min(md) {
                margin: 0 0 0 1rem;
                font-size: 1.5rem;
            }

            a {
                &:hover {
                    text-decoration: none;
                }
            }
        }

        &-badge {
            span {
                padding: .25rem .5rem;
                background-color: $gray-100;
                border-radius: .25rem;
                display: inline-flex;
                align-items: center;
                font-size: .75rem;
                font-weight: 500;
                color: $primary;

                @include viewport-min(md) {
                    padding: .25rem .5rem;
                    font-size: 1rem;
                }

                i.mdi {
                    display: block;
                    line-height: 1.125rem;
                    margin: 0 .5rem 0 0;
                    padding: 0 .5rem 0 0;
                    border-right: 1px solid rgba(#000,.1);
                }
            }
        }
    }
}

.block-breadcrumb{
    margin: .5rem 0;
    padding: .5rem 0;
    & + .block-manual{
        padding-top: 1rem;
    }
}
.block-blog {
    &__featured-posts {
        margin: 1rem 0 2rem;

        @include viewport-min(lg) {
            margin: 1rem 0 2rem;
        }

        .carousel-indicators {
            display: none;
        }

        .carousel-control {
            position: absolute;
            top: 50%;
            margin-top: -3em;
            padding: 0;
            width: 2.5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: 1.25rem;
            text-align: center;
            color: #fff;
            background-color: rgba(#000,.4);
            border: 0;
            border-radius: .5rem;
            outline: none;
            cursor: pointer;

            @include viewport-min(lg) {
                margin-top: -1.25rem;
            }

            i {
                display: inline-block;
                vertical-align: top;
            }

            &-prev {
                left: 1rem;
            }

            &-next {
                right: 1rem;
            }

            &:hover {
                opacity: 1;
            }

            &:active {
                opacity: .9;
            }
        }

        .single-featured-post {
            display: block;
            position: relative;

            .post__photo {
                &.h-rtg.h-rtg--r31 {
                    .h-rtg__inner {
                        border-radius: .5rem .5rem 0 0;

                        @include viewport-min(lg) {
                            border-radius: .5rem;
                        }
                    }

                    &:after {
                        @include viewport-max(sm) {
                            padding-bottom: 66.66%;
                        }
                    }
                }
            }

            .post__content {
                padding: 1rem;
                color: #fff;
                background-color: rgba(#000,.8);
                border-radius: 0 0 .5rem .5rem;


                .post__tag {
                    margin: 0 0 .5rem;
                }

                @include viewport-min(lg) {
                    position: absolute;
                    bottom: 1rem;
                    left: 1rem;
                    width: 60%;
                    background-color: rgba(#000,.6);
                    border-radius: .75rem;
                }

                .post__content__title {
                    margin: 0;
                    padding: 0;
                    line-height: 1.25;
                    font-size: 1.25rem;
                    font-weight: 500;
                    color: #fff;
                    @include one-line-ellipsis();
                }

                .post__content__excerpt {
                    margin: .5rem 0 0;
                    line-height: 1.375rem;
                    font-size: .875rem;
                    font-weight: 300;
                    color: rgba(#fff,.8);
                    @include multi-line-ellipsis(1.375rem, 3);
                }
            }

            &:hover, &:focus, &:active {
                text-decoration: none;
            }
        }
    }

    &__list-posts {
        margin: 1rem 0;
        .row{
            margin: 0 -.75rem;
        }
        [class^="col"] {
            padding: 0 .75rem;
            margin: 0 0 1rem;

            @include viewport-min(lg) {
                margin: 0 0 1.5rem;
            }
        }
    }

    &__title {
        margin: 0 0 24px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 300;
    }

    &__single-post {
        height: 100%;
        background-color: #fff;
        border-radius: .5rem;
        box-shadow: 0 1rem 2rem 0 rgba(0,0,0,.025), 0 .5rem 1rem 0 rgba(0,0,0,.05);

        a {
            &:hover, &:active, &:focus {
                text-decoration: none;
            }
        }

        .post__photo {
            border-radius: .5rem .5rem 0 0;
            overflow: hidden;

            a {
                &:hover {
                    opacity: .9;
                }
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .post__tag {
            margin: 0 0 .5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .tag-post-time {
                font-size: 1.125rem;
                font-weight: 500;
                color: $gray-500;

                &.active {
                    color: $primary;
                }
            }
        }

        .post__content {
            padding: 1rem;
        }

        .post__content__title {
            margin: 0;
            display: block;
            line-height: 1.375;
            font-size: 1.25rem;
            font-weight: 600;

            a {
                display: block;
                line-height: 1.375;
                font-size: 1.25rem;
                color: $gray-900;

                &:hover {
                    color: $primary;
                }
            }
        }

        .post__content__meta {
            margin: .375rem 0 0;
            font-size: 0;

            span {
                display: inline-block;
                vertical-align: top;
                line-height: 1.25rem;
                font-size: .875rem;
                font-weight: 300;
                color: $gray-500;

                a {

                    &:hover {
                        text-decoration: underline;
                    }
                }

                &:after {
                    content: "\2022";
                    display: inline-block;
                    vertical-align: top;
                    position: relative;
                    top: 1px;
                    padding: 0 .5rem;
                    line-height: 1.25rem;
                    font-size: .5rem;
                    color: $gray-500;
                }

                &:last-child {
                    &:after {
                        display: none;
                    }
                }
            }
        }

        .post__content__descr {
            margin: .5rem 0 0;
            line-height: 1.375rem;
            font-size: .875rem;
            color: $gray-700;
            @include multi-line-ellipsis(1.375rem, 3);
        }
    }

    &-single {
        margin: 1rem 0;

        .itr-blog-single__wrap {
            padding: 1rem 0;
        }

        .itr-blog_title {
            margin: 0;
            line-height: 30px;
            font-size: 24px;

            @include viewport-min(lg) {
                line-height: 34px;
                font-size: 28px;
            }
        }

        .itr-blog_meta {
            margin: 12px 0 0;
            line-height: 16px;
            font-size: 0;

            span {
                display: inline-block;
                vertical-align: top;
                line-height: 18px;
                font-size: 13px;
                font-style: italic;
                color: $gray-600;

                a {
                    color: $gray-600;

                    &:hover {
                        text-decoration: underline;
                    }
                }

                &:after {
                    content: "\2022";
                    display: inline-block;
                    vertical-align: top;
                    padding: 0 8px;
                    font-size: 12px;
                    color: $gray-500;
                }

                &:last-child {
                    &:after {
                        display: none;
                    }
                }
            }
        }

        .itr-blog_main {
            margin: 24px 0 0;
            line-height: 22px;
            font-size: 16px;

            p {
                margin: 0 0 16px;
            }
        }
    }
}