/*Hide property pane */

/* DJB This has a whole lot of media queries, with max-width's that didn't line up with our bootstrap classes. */
/* It's confusing because the markup for a component is spread between this file and base.css */
/* Over time, we should pluck stuff out of here and put it into base.css, and replace the max-widths with the bootstrap ones, or use bootstrap body classes */


@media(max-width: 1100px) {
    .sb-notification-popup {
        width: 40% !important;
    }
    #sb-index-search-container {
        width: 43% !important;
    }
}
@media(max-width: 950px){
    .sb-notification-popup {
        width: 50% !important;
    }
}
/*Tab view*/
/*DJB changed this to 768 to line up with the "sm" breakpoint in bootstrap*/
@media (max-width: 768px) {
    .sf-preference-theme-section {
        display: block;
    }
    .sf-preference-responsive {
        display: none;
    }
    .sb-download-splitter, .sb-download-container {
        display: none;
    }

    .sb-notification-popup {
        width: 60% !important;
    }
}
/* DJB created this for stuff that should happen at equivalent width to bootstrap-lg */
@media (max-width: 1200px) {
    .sb-control-navigation.e-view {
        bottom: 40px;
        top: 50px !important;
    }
}
/* Mobile View */
/*@media (max-width: 550px) {*/
/*DJB changed this to 768 to line up with the "sm" breakpoint in bootstrap*/
@media (max-width: 768px) {
    .e-ddl.e-popup {
        z-index: 100001;
    }
    .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-notification-popup {
        width: 70% !important;
    }
    .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;
        margin: 5px;
    }
    .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;
    }
    /*source tab header*/
    .sb-right-pane {
        left: 0px;
        padding-bottom: 32px;
        /*Why 93%? I dunno, that left a weird gap at the bototm on mobile*/
        /*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:not(.e-btn.active) {
        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:not(.e-btn.active) {
        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;
    }
    .highcontrast .sb-left-pane {
        background: #000000;
    }
    .sb-footer-link {
        padding: 20px 16px 0px 16px;
    }
    .sb-footer-copyright {
        padding: 16px 16px 10px;
    }
    
    .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%;
    }
    .sb-mobile-footer > .sb-navigation-next.sb-right.active, .sb-mobile-footer .sb-navigation-prev.sb-left.active {
        background: #007bff;
        color: #fff;
    }
}
@media (max-width: 450px) {
    .sb-notification-popup {
        width: 80% !important;
    }
}
@media (max-width: 350px) {
    #sb-toggle-left {
        padding-left: 12px;
    }
    #sb-header-text {
        padding-left: 12px;
    }
    .sb-header-settings {
        padding-right: 14px;
    }
    .sb-notification-popup{
        width: 90% !important;
    }
}
@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;
    }
}