/*Hide property pane */
@media(max-width: 1024px) {
    .sf-sidebar {
        position: fixed;
        background: #fff;
        z-index: 1000;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        top: 0;
    }

    .sf-sidebar-right-pane-collapse {
        margin-left: 0px;
    }
}
/*Tab view*/
@media (max-width: 764px) {
    .sf-preference-theme-section {
        display: block;
    }

    .sf-preference-responsive {
        display: none;
    }

    .sb-download-splitter, .sb-download-container {
        display: none;
    }
}
/* Mobile View */
@media (max-width: 550px) {
    .e-ddl.e-popup {
        z-index: 100001;
    }

    .sb-control-navigation.e-view {
        bottom: 40px;
        top: 0px !important; /*Toan*/
    }

    .sb-content-section > .sb-content-tab-header > .e-toolbar-items > #e-item_1 {
        display: none;
    }

    .sb-left-pane {
        position: absolute;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sb-table-cell > #header-theme-switcher {
        display: none;
    }

    #navigation-btn,
    .sb-toolbar-splitter {
        display: none;
    }

    #right-sidebar {
        visibility: hidden;
    }

    .highcontrast #right-sidebar {
        color: #fff;
        background: #000000;
    }

    .sb-left-footer {
        padding-top: 8px;
        margin-top: 20px;
        border-top: 1px solid #cccccc;
        bottom: 0px;
        position: absolute;
    }

    .sb-component-name {
        padding-top: 12px;
        padding-bottom: 5px;
    }

    .sb-bread-crumb {
        padding-top: 6px;
        padding-bottom: 24px;
        font-size: 13px;
    }

    .sb-right-pane {
        padding-left: 0px;
        padding-right: 0px;
    }

    .sb-rightpane-padding {
        padding-left: 10px;
        padding-right: 5px;
    }

    .sb-content-section {
        border-left: none;
        border-right: none;
    }

    .sb-download-splitter, .sb-download-container {
        display: none;
    }

    .sb-header-settings {
        display: table-cell;
        padding: 0px 15px;
    }

        .sb-header-settings:before {
            content: "\e923";
            font-size: 24px;
            display: block;
            padding-top: 5px;
        }

    .sb-settings-container {
        display: none;
    }

    .sb-mobile-overlay {
        width: 100%;
        position: fixed;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 110;
    }

    .sf-preferences-header {
        padding: 16px 0px 16px 18px;
        font-weight: 600 !important;
        line-height: 35px !important;
    }

    .sf-preferences-content {
        padding-left: 18px;
        padding-top: 0px;
    }

    .sf-preference-theme-section {
        display: block;
        padding: 16px 0px;
    }

        .sf-preference-theme-section .sf-preference-icons {
            padding-right: 10px;
        }

            .sf-preference-theme-section .sf-preference-icons:before {
                float: left;
            }

    .sf-preference-text {
        font-size: 16px;
    }

    #sb-setting-theme {
        width: 100%;
        height: 32px;
        border-radius: 3px;
    }

    .sf-preferences-item {
        padding: 16px 0px;
        padding-bottom: 12px;
    }

    .sf-preference-responsive .sf-preference-icons {
        padding-right: 10px;
    }

        .sf-preference-responsive .sf-preference-icons:before {
            font-size: 25px;
        }

    .setting-content.btn-group.sf-preference-btn-group {
        width: 244px;
    }

    .sf-preferences-popup {
        left: 0px !important;
        top: 0px !important;
        background: transparent;
        border: none;
        box-shadow: none;
        width: 280px;
        height: 100%;
    }

    .property-panel-section, .property-section {
        padding-left: 0px;
        padding-right: 0px;
    }

    .property-panel-header {
        padding: 22px 0px 0px 20px;
        font-size: 16px;
        font-weight: 600;
        height: 60px;
        border-bottom: 1px solid #cccccc;
    }

    .property-panel-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 12px !important;
    }
    /*sb-left-pane*/
    .sb-left-pane-header {
        display: block;
    }
    /*source tab header*/
    .sb-right-pane {
        left: 0px;
        padding-bottom: 32px;
        height: 93%;
    }

    .sample-navigation {
        display: none;
    }

    .sb-mobile-footer > .e-btn.e-primary {
        color: #000000;
        background-color: #d7d7d7;
        border: none;
    }

    .sb-mobile-footer > .e-btn.e-flat {
        color: #5a5a5a;
        border: none;
        background-color: transparent;
        width: 50%;
        text-align: center;
        height: 100%;
    }

    .highcontrast .sb-mobile-footer > .e-btn.e-flat {
        background: #000;
        color: #fff;
    }

    .sb-mobile-footer > .e-btn.e-flat.e-primary:disabled {
        color: #fff;
        cursor: not-allowed;
        background-color: transparent;
        box-shadow: none;
    }

    .sb-mobile-footer > .e-btn.e-flat:hover {
        color: #1783ff;
        background-color: transparent;
        box-shadow: none;
    }

    .highcontrast .sb-mobile-footer > .e-btn.e-flat:hover {
        color: #ffd939;
        background-color: transparent;
        box-shadow: none;
    }

    .sb-mobile-footer > .e-btn.e-flat.e-primary:disabled {
        color: #fff;
        cursor: not-allowed;
        background-color: transparent;
        box-shadow: none;
    }

    .sb-mobile-footer {
        top: 91%;
        background-color: #e6e4e4;
        font-size: 15px;
        display: inline-block;
        z-index: 20;
    }

        .sb-mobile-footer > button:focus {
            outline: none;
        }

    .sb-icon-demo {
        display: none;
    }
    /*sb-right-pane*/
    .sb-right-pane {
        left: 0px;
        padding-bottom: 32px;
    }

    .sb-left-pane {
        z-index: 10010;
        background: #f8f8f8;
    }

    .highcontrast .sb-left-pane {
        background: #000000;
    }

    .sb-footer-link {
        padding: 20px 16px 0px 16px;
    }

    .sb-footer-copyright {
        padding: 16px 16px 10px;
    }

    .sb-sf {
        display: table;
        padding: 16px 16px 22px;
        padding-bottom: 5px;
    }

    .sb-mobile-logo {
        background: url(../../images/common/syncfusion-mobile-logo.svg) no-repeat;
        width: 27px;
        height: 27px;
        display: table-cell;
    }

    .sb-name {
        display: table-cell;
        font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
        font-size: 15px;
        font-weight: 500;
        padding-left: 10px;
        vertical-align: bottom;
    }

    .sb-github-btn {
        display: none;
    }

    .sb-mobile-header-buttons {
        display: table;
    }

    .sb-mobile-header-price {
        width: 114px;
        background-color: #3c78ef;
        font-weight: 500;
        line-height: 24px;
        text-align: center;
        border: 1px solid transparent;
        cursor: pointer;
        display: inline-table;
        margin-left: 16px;
        padding: 6px 12px;
        color: #ffffff;
        border-radius: 2px;
    }

    .sb-mobile-header-about {
        width: 114px;
        background-color: #ffffff;
        font-weight: 500;
        line-height: 24px;
        text-align: center;
        border: 1px solid;
        cursor: pointer;
        display: inline-table;
        margin-left: 16px;
        padding: 6px 12px;
        color: #3c78ef;
        border-radius: 2px;
    }

    .sb-mobile-header-button:active {
        background-color: #1783ff;
    }

    .sb-footer {
        display: none;
    }

    span.sb-icon-next, span.sb-icon-previous {
        font-size: 18px !important;
    }

    #mobile-next-sample, #mobile-prev-sample {
        width: 50%;
        text-align: center;
        height: 100%;
    }
}

@media (max-width: 350px) {
    #sb-toggle-left {
        padding-left: 12px;
    }

    #sb-header-text {
        padding-left: 12px;
    }

    .sb-header-settings {
        padding-right: 14px;
    }
}

@media (max-width: 355px) {
    #sb-header-text {
        display: none;
    }
}



@media (max-width: 940px) {
    .sb-ad-container {
        height: 195px;
    }

    .sb-ad-content-area {
        width: calc(100% - 50px);
        margin: 0 auto;
    }
}

@media (max-width: 901px) {
    .sb-ad-container {
        height: 210px;
    }

    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-point-text {
        max-width: 213px;
    }
}

@media (max-width: 726px) {
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-container,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-container {
        height: 320px;
    }

    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-content-area,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-content-area {
        width: calc(100% - 50px);
        margin: 0 auto;
    }

    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-points-div,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-points-div {
        text-align: left;
        margin-left: 10px;
        margin-top: 25px;
    }

    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-point-div,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-point-div {
        display: block;
    }

    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-point-text,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-point-text {
        padding: 0px 0px 15px 10px;
        max-width: 280px;
    }

    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-try-area,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-try-area {
        margin: 10px auto 0px;
    }
}

@media (max-width: 588px) {
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-container,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-container {
        height: 320px;
    }

    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-point-text {
        padding: 0px 0px 15px 10px;
    }
}

@media (max-width: 550px) {
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-container,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-container {
        height: 290px;
    }

    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-container,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-container {
        margin: 25px 10px;
        width: calc(100% - 20px);
    }
}

@media (max-width: 546px) {
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-container,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-container {
        height: 320px;
    }
}

@media (max-width: 477px) {
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-content-area,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-content-area {
        width: calc(100% - 30px);
    }

    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-points-div,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-points-div {
        margin-left: 0px;
    }
}

@media (max-width: 447px) {
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-container,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-container {
        height: 345px;
    }
}

@media (max-width: 400px) {
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-container,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-container {
        height: 370px;
    }
}

@media (max-width: 342px) {
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-container,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-container {
        height: 395px;
    }

    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-collapse .sb-ad-header,
    .sb-right-pane.sf-sidebar-right-pane.sf-sidebar-right-pane-expand .sb-ad-header {
        width: calc(100% - 20px);
    }
}

@media (max-width: 1024px) {
    .sf-carousel-progress {
        margin-left: 9%;
        margin-bottom: 3%;
    }

    .sf-carousel-item {
        display: none;
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }

    .sf-carousel-selected {
        display: block;
    }

    .sf-carousel-content-area table {
        margin-top: 5%;
    }
}

@media (max-width: 770px) {
    .carousel-container {
        height: 525px;
        margin-top: 0%;
    }
}

@media (max-width: 450px) {
    .sf-carousel-progress {
        margin-left: 2.8%;
        margin-bottom: 32px;
    }

    .sf-carousel-item {
        display: none;
        width: 90%;
        margin-left: 5%;
    }

    .sf-carousel-selected {
        display: block;
    }

    .carousel-container {
        height: 435px;
        margin-top: 5%;
    }
}


@media (max-width: 1024px) {
    .sf-search-popup {
        z-index: 1000;
        width: 98%;
        left: 1%;
    }

    .sf-search-input,
    .sf-search-input:focus {
        border: none;
    }

    .index-search-container {
        width: 85%;
        margin-left: 7.5%;
    }

    .sb-search-container {
        padding: 0px 15px;
    }

    .sb-search-btn {
        margin-top: 0px;
    }

    .sb-icon-search {
        font-size: 24px !important;
    }
}

/* Home page styles */
@media (max-width: 1024px) {
    .sf-header-items.sf-table-cell .e-btn {
        margin: 10px !important;
    }

    .sf-header {
        height: 60px;
    }

    .sf-header-left {
        width: 50%;
    }

    .header-logo .syncfusion-logo {
        margin: 10px 20px;
    }

    .header-logo a span {
        display: none;
    }

    .sf-blazor-home span.sb-icons.sf-search-icon {
        padding: 18px 20px;
    }

    .sf-blazor-home .mobile-search-container {
        width: calc(100% - 150px);
        height: 44px !important;
        position: absolute;
        padding: 0px 8px;
        left: 0;
        margin: 8px 0px;
    }

    .sf-banner-image {
        margin-top: 60px;
        height: 988px;
    }

    .sf-container {
        width: 89.6%;
    }

    .sf-banner-content {
        width: 80%;
        margin: 50px auto;
    }

        .sf-banner-content h1 {
            font-size: 48px;
            line-height: 58px;
            text-align: center;
        }

    .sf-banner-buttons {
        width: 142px;
        margin: 0 auto;
    }

    .trusted-companies {
        margin-top: 618px;
        height: 203px;
    }

        .trusted-companies span {
            padding: 30px 40px;
        }

    .sf-blazor-home .sf-trusted-companies {
        background-size: 65% 50% !important;
    }

    .sf-home-content .popular-components h2 {
        margin-top: 60px;
    }

    .sf-popular-components {
        margin: 0 auto;
        width: 85%;
    }

    .sf-popular-component {
        width: 30.5%;
        margin-bottom: 74px;
    }

        .sf-popular-component:not(:first-child) {
            margin-left: 3.9%;
        }

        .sf-popular-component.diagram {
            margin-left: 0px;
        }

    .sf-components-description {
        margin-bottom: 48px;
    }

    .sf-component-col {
        width: 50%;
        padding: 0 10%;
        display: flex;
        flex-direction: column;
    }

    .sf-components {
        display: flex;
        flex-wrap: wrap;
    }

    .sf-ad-strip .sf-ad-strip-img,
    .sf-ad-strip-content {
        width: 100%;
    }

        .sf-ad-strip-content h3 {
            margin-top: 0px;
        }

    .sf-ad-strip-button {
        margin-bottom: 50px;
    }

    .sf-showcase h2 {
        width: 75%;
        margin-top: 60px;
        margin-bottom: 40px;
    }

    .sf-showcase-demo {
        height: 1052px;
    }

    .sf-showcase-container {
        height: 100%;
    }

    .sf-showcase-img {
        position: absolute;
        width: 100%;
        top: 369px;
        background-size: 90% 600px;
    }

    .sf-showcase-content {
        width: 75%;
        float: none;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 220px;
        margin-bottom: 50px;
    }

        .sf-showcase-content h3 {
            margin-top: 0px;
            text-align: center;
            font-size: 20px;
        }

    .sf-showcase-description {
        text-align: center;
        margin-bottom: 30px;
        min-height: 48px;
    }

    .sf-showcase-buttons {
        width: 412px;
        margin: 0 auto;
    }

    .showcase-demo-btn {
        float: left;
    }

    .showcase-github-btn {
        margin-top: 0px;
    }

    .sf-showcase-progress {
        position: absolute;
        bottom: 5px;
        width: 176px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: 679px;
        margin-top: 51.5px;
    }

    .sf-home-footer .sf-container {
        width: 96%;
    }

    .sf-footer-copyright,
    .sf-contact-details {
        width: 50%;
    }
}

@media (max-width: 950px) {
    .sf-g2-left {
        margin: 0px;
        margin-right: 30px;
        padding: 0px;
        width: 250px;
    }

    .sf-g2-review {
        width: 75%;
    }
}

@media (max-width: 820px) {
    .trusted-companies {
        margin-top: 558px;
    }
}

@media (max-width: 760px) {
    .sf-components-list h2 {
        margin-bottom: 40px;
        line-height: 40px;
    }

    .sf-banner-image .demo-btn,
    .showcase-demo-btn {
        float: none
    }

    .sf-banner-buttons {
        width: 240px;
    }

    .sf-banner-content {
        width: 95%;
    }

    .sf-popular-components,
    .sf-banner-image .sf-banner-buttons .e-btn,
    .showcase-demo-btn .e-btn {
        width: 100%;
    }

    .trusted-companies {
        margin-top: 540px;
    }

    .sf-blazor-home .sf-trusted-companies {
        background-size: 75% 40% !important;
    }

    .sf-home-content {
        margin-top: 126px;
    }

    .sf-popular-component {
        width: 48%;
        margin-bottom: 54px;
    }

        .sf-popular-component:not(:first-child) {
            margin-left: 0px;
        }

        .sf-popular-component:nth-of-type(odd) {
            margin-right: 3%;
        }

    .sf-components-list {
        margin-top: 20px;
    }

    .sf-components-description {
        margin: 0px 0px 48px 0px;
        width: 100%;
    }

    .sf-components,
    .sf-component-col {
        width: 100%;
        padding: 0px;
    }

    .sf-ad-strip {
        margin-top: 25px;
        margin-bottom: 60px;
    }

    .sf-ad-strip-content h3 {
        font-size: 24px;
        line-height: 33px;
        margin-bottom: 0px;
    }

    .sf-ad-strip-content ul {
        margin-top: 30px;
    }

        .sf-ad-strip-content ul li:last-child {
            margin-bottom: 34px;
        }

    .sf-ad-strip-button {
        margin-bottom: 40px;
    }

    .sf-showcase-content {
        width: 90%;
    }

    .sf-showcase-buttons,
    .showcase-github-btn .e-btn,
    .showcase-demo-btn {
        width: 100%;
        margin: 0px;
    }

    .showcase-github-btn .e-btn {
        margin-top: 17px;
    }

    .sf-showcase-demo {
        height: 754px;
    }

    .sf-showcase h2 {
        display: none;
    }

    .sf-showcase-img {
        top: 293px;
        background-size: 100% 50%;
        display: block;
    }

    .sf-showcase-content {
        margin-top: 40px;
        margin-bottom: 24px;
    }

        .sf-showcase-content h3 {
            font-size: 28px;
        }

    .sf-showcase-description {
        margin-bottom: 20px;
        min-height: 0px;
    }

    .sf-showcase-buttons {
        width: 265px;
        margin: 0 auto;
    }

        .sf-showcase-buttons .e-btn {
            width: 265px;
        }

    .showcase-github-btn .e-btn .sf-github-logo-icon {
        height: 20px;
        padding-bottom: 30px !important;
    }

    .sf-github-logo-icon::before {
        font-size: 20px;
    }

    .sf-showcase-progress {
        margin-top: 20px;
        top: 588px;
    }

    .sf-g2-container {
        height: 484px;
    }

    .sf-g2-review {
        padding: 40px 0px;
        display: block;
    }

    .sf-g2-left {
        height: 205px;
        padding-bottom: 18px;
        width: 93%;
        border-bottom: 2px solid #545464;
        border-right: none;
        margin: 0 auto;
    }

    .sf-g2-img {
        background-size: 245px 205px !important;
    }

    .sf-g2-right {
        padding: 30px 0px;
        width: auto;
        display: block;
        text-align: center;
    }

        .sf-g2-right h3 {
            margin-bottom: 30px;
            font-size: 24px;
            line-height: 33px;
        }

        .sf-g2-right .e-btn {
            height: 35px;
            border-radius: 6px;
            font-size: 14px;
            width: 140px;
        }

    .sf-footer-links,
    .sf-footer-syncfusion-logo {
        display: none;
    }

    .sf-footer-contact {
        text-align: center;
    }

    .sf-home-footer .sf-container {
        width: 100%;
        position: relative;
    }

    .sf-footer-copyright {
        width: 72%;
        padding: 0px;
        position: absolute;
        top: 97%;
        margin: 0px 14%;
    }

    .sf-copyright {
        white-space: pre-line;
    }

    .sf-contact-details,
    .sf-contact-fax,
    .sf-contact-mail {
        width: 100%;
        float: none;
        line-height: 27px;
        padding: 0px;
    }

    .sf-contact-fax {
        margin-top: 16px;
    }

    .sf-contact-mail ul li:last-child {
        margin-top: 24px;
        margin-bottom: 26.5px;
    }

    .sf-social-media {
        float: none;
        padding: 0px;
        margin: 0 auto;
        width: 127px;
        height: 22px;
        margin-bottom: 26.5px;
    }

        .sf-social-media li:last-child i {
            padding-right: 0px;
        }

    .sf-footer-policy-links,
    .sf-copyright {
        font-family: 12px;
    }

    span.sf-contact-us:after {
        content: "CONTACT US";
    }

    span.sf-contact-us {
        display: block;
        font-size: 12px;
        color: #171E35;
        text-align: center;
        font-weight: 700;
        margin-top: 40px;
    }
}

@media (max-width: 570px) {
    .trusted-companies {
        margin-top: 350px !important;
    }

    .sf-header-items.sf-table-cell .e-btn {
        display: none;
    }

    .sf-blazor-home .mobile-search-container {
        width: 100% !important;
    }

    .sf-banner-content h1 {
        font-size: 33px;
        line-height: 40px
    }

    .sf-banner-content {
        min-height: 128px;
        margin: 30px auto;
        width: 100%
    }

    .sf-banner-image {
        height: 685px
    }
}

@media (max-width: 450px) {
    .sf-showcase-demo {
        height: 654px;
    }

    .sf-showcase-img {
        background-size: 100% 100%;
        top: 330px;
        width: 100%;
        height: 250px;
    }

    .sf-showcase-progress {
        top: 512px;
    }
}

@media (max-width: 350px) {
    .sf-showcase-demo {
        height: 675px;
    }

    .sf-showcase-img {
        top: 352px;
    }

    .sf-showcase-progress {
        top: 533px;
    }

    .trusted-companies {
        margin-top: 260px !important;
    }
}

@media screen and (min-width: 300px) and (max-width: 400px) {
    .sf-g2-img {
        background-size: 195px 155px !important;
    }
}

@media (max-width: 280px) {
    .sf-g2-img {
        background-size: 180px 150px !important;
    }
}