﻿.sawhOverviewBanner h2, .sawhOverviewBanner .h2 { width: 615px; }

.sawhOverviewReliable p.desc span { width: 1020px; }
.sawhOverviewReliable .functionList { margin-top: 85px; }
.sawhOverviewReliable .functionBox { padding: 50px 60px 0 60px; min-height: 230px; max-width: 100%; }
    .sawhOverviewReliable .functionBox p { min-height: 0; }
        .sawhOverviewReliable .functionBox p i { display: inline-block; height: 50px; width: 148px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-ide.png) no-repeat left center; }
            .sawhOverviewReliable .functionBox p i.icon-cruicontrol { width: 168px; margin-right: 17px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-cruicontrol.png) no-repeat left center; }
            .sawhOverviewReliable .functionBox p i.icon-red-ant { width: 69px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-red-ant.png) no-repeat left center; }
            .sawhOverviewReliable .functionBox p i.icon-sql { width: 214px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-sqlserver.png) no-repeat left center; }
            .sawhOverviewReliable .functionBox p i.icon-cloud { width: 54px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-cloud.png) no-repeat left center; }

.sawhOverviewFeatures .featuresContainer { height: 620px; margin: 0 0; }
.sawhOverviewFeatures .featuresContainer { background-color: #323234; }
    .sawhOverviewFeatures .featuresContainer .featureItem { position: relative; padding: 60px 55px 55px; padding-right: 0; margin-bottom: 35px; }
        .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+1) { padding-left: 85px; }
    .sawhOverviewFeatures .featuresContainer .icon { position: absolute; width: 75px; height: 75px; border: 2px solid #323233; background-color: white; left: 55px; top: 0; transform: translateY(-50%) }
    .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+1) .icon { left: 85px; }
    .sawhOverviewFeatures .featuresContainer .featureItem h3, .featureItem p { color: white; }
    .sawhOverviewFeatures .featuresContainer .featureItem h3 { font-size: 24px; }
    .sawhOverviewFeatures .featuresContainer .featureItem p { font-size: 16px; line-height: 22px; margin-top: 20px; width: 100%; max-width: 393px; }
.index-pagination { text-align: center; }
.sawhOverviewSwiper .basicSwiper { position: relative; }
.sawhOverviewSwiper .index-swiper-container { overflow: hidden; font-size: 0px; padding-top: 40px; }
.sawhOverviewSwiper .slide-block { display: table; height: 100%; }
.sawhOverviewSwiper .slide-left { display: table-cell; vertical-align: middle; height: 100%; float: none; width: 1020px; text-align: left; padding-left: 90px; }
    .sawhOverviewSwiper .slide-left .personWords { font-size: 2.4rem; line-height: 4rem; padding-left: 5rem; position: relative; color: #323234; }
        .sawhOverviewSwiper .slide-left .personWords .preQuote { display: inline-block; width: 3.9rem; height: 16.2rem; background: url('../../images/icons/pre_quote.png') no-repeat; background-size: contain; position: absolute; top: -4.5rem; left: 0rem; }
.sawhOverviewSwiper .personName { font-size: 20px; line-height: 28px; padding-left: 50px; color: #323234; }
.sawhOverviewSwiper .slide-right { width: auto; padding-right: 90px; }
    .sawhOverviewSwiper .slide-right div { position: relative; width: 41.8rem; height: 28.3rem; background: #F5F5F5; }
        .sawhOverviewSwiper .slide-right div i { position: absolute; left: 50%; top: 0; width: 4.4rem; height: 5.7rem; transform: translate(-50%, -50%); }
    .sawhOverviewSwiper .slide-right.hide-sm.hide-md { display: table-cell; vertical-align: middle; height: 100%; float: none; padding-right: unset; padding-left: 40px; }
.sawhOverviewSwiper .custom-slick-arrow { width: 30px; height: 100%; display: inline-block; position: absolute; top: 0px; }
    .sawhOverviewSwiper .custom-slick-arrow:before { display: none; }
    .sawhOverviewSwiper .custom-slick-arrow:hover { opacity: 0.5; }
.sawhOverviewSwiper .index-slick-prev { left: 30px; z-index: 10; }
.sawhOverviewSwiper .index-slick-next { right: 30px; z-index: 10; }
.sawhOverviewSwiper .basicSwiper i.arrow-left { display: inline-block; width: 30px; height: 100%; background: url(../../images/icons/arrow-left.png) no-repeat center center; background-size: contain; }
.sawhOverviewSwiper .basicSwiper i.arrow-right { display: inline-block; width: 30px; height: 100%; background: url(../../images/icons/arrow-right.png) no-repeat center center; background-size: contain; }
.sawhOverviewSwiper div.Adea { background: url('../../images/banner/SAWH/overview/sawh-overview-customer-adea.png') #F5F5F5 no-repeat center center; }
.sawhOverviewSwiper div.Paragonhost { background: url('../../images/banner/SAWH/overview/sawh-overview-customer-paragonhost.png') #F5F5F5 no-repeat center center; }

span.icon i { width: 75px; height: 75px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
i.icon-gauge-board { background: url(../../images/icons/gauge.svg) no-repeat center; }
i.icon-module { background: url(../../images/icons/module-four.svg) no-repeat center; }
i.icon-customer-service { background: url(../../images/banner/SAWH/overview/sawh-overview-icon-customer-service.svg) no-repeat center; }
i.icon-security { background: url(../../images/banner/SAWH/overview/saw-features-icon-security.svg) no-repeat center; }
i.icon-light-intuitive { background: url(../../images/banner/SAWH/overview/sawh-overview-icon-light-intuitive.svg) no-repeat center; }
i.icon-vss { background: url(../../images/banner/SAWH/overview/sawh-overview-icon-vss.svg) no-repeat center; }

i.sawh-white-logo { display: inline-block; width: 537px; height: 59px; background: url(../../images/banner/SAWH/sawh-logo_result.png) no-repeat center center; }

.more-features { background-color: #323234; font-size: 24px; padding: 40px 0; }
.sawh-resources { display: grid; grid-template-columns: repeat(3, 500px); grid-gap: 50px 56px; }
    .sawh-resources > a { color: #323234; transition: all .2s ease-in-out; height: 100px; cursor: pointer; background-color: #F5F5F5; font-size: 24px; padding: 35px 60px; display: flex; align-items: center; }
        .sawh-resources > a:hover { transform: translate(8px, -8px); box-shadow: -8px 8px 0 0 #323234; }
        .sawh-resources > a::after { content: ""; margin-left: auto; display: inline-block; width: 28px; height: 18px; background: url(../../images/homepage/right-arrow.svg) no-repeat center; background-size: contain; }

@media (max-width: 1679px) {

    .more-features { font-size: 20px; padding: 20px 0; }

    .sawh-resources { grid-template-columns: repeat(3, 1fr); grid-gap: 30px; }
        .sawh-resources > a { font-size: 20px; padding: 30px 40px; height: auto; }

    .sawhOverviewBanner h2, .sawhOverviewBanner .h2 { width: 500px; }

    .sawhOverviewReliable .functionBox { padding: 40px 30px 0 35px; min-height: 200px; }
    .sawhOverviewReliable p.desc span { width: 875px; }
    .sawhOverviewReliable .mobile-div-clear-padding { padding: 0 5px; }
    .sawhOverviewReliable .functionBox p i.icon-cruicontrol { width: 138px; margin-right: 10px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-cruicontrol.png) no-repeat left center; background-size: 100%; }
    .sawhOverviewReliable .functionBox p i.icon-red-ant { width: 49px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-red-ant.png) no-repeat left center; background-size: 100%; }
    .sawhOverviewReliable .functionBox p i.icon-sql { width: 180px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-sqlserver.png) no-repeat left center; background-size: 100%; }

    .sawhOverviewFeatures .featuresContainer { margin: 0; height: 650px; }
        .sawhOverviewFeatures .featuresContainer .featureItem h3 { font-size: 20px; }
        .sawhOverviewFeatures .featuresContainer .featureItem p { font-size: 14px; max-width: 300px; }
        .sawhOverviewFeatures .featuresContainer .featureItem { padding-left: 25px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+1) { padding-left: 55px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+2) { padding-left: 50px; }
            .sawhOverviewFeatures .featuresContainer .featureItem .icon { left: 25px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+1) .icon { left: 55px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+2) .icon { left: 50px; }

    .sawhOverviewSwiper .slide-left { width: 650px; padding-left: 60px; }
        .sawhOverviewSwiper .slide-left .personWords { font-size: 16px; line-height: 30px; }
        .sawhOverviewSwiper .slide-left .personName { font-size: 18px; }
    .sawhOverviewSwiper .slide-right { width: auto; padding-right: 60px; }
        .sawhOverviewSwiper .slide-right div { width: 328px; height: 224px; }
}

@media (max-width: 1299px) {
    i.sawh-white-logo { width: 400px; height: 59px; background-size: 100%; }
}

@media (max-width: 1199px) {
    .sawh-resources { grid-gap: 20px; }
        .sawh-resources > a { font-size: 18px; padding: 25px 20px; }

    .sawhOverviewBanner h2, .sawhOverviewBanner .h2 { width: 500px; }

    .sawhOverviewReliable .mobile-div-clear-padding { padding: 0 15px; }
    .sawhOverviewReliable .functionList { margin-top: 30px; }
    .sawhOverviewReliable .functionBox { margin-top: 40px; }
        .sawhOverviewReliable .functionBox p i.icon-cruicontrol { width: 168px; margin-right: 17px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-cruicontrol.png) no-repeat left center; }
        .sawhOverviewReliable .functionBox p i.icon-red-ant { width: 69px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-red-ant.png) no-repeat left center; }
        .sawhOverviewReliable .functionBox p i.icon-sql { width: 214px; background: url(../../images/banner/SAWH/overview/sawh-overview-image-sqlserver.png) no-repeat left center; }

    .sawhOverviewFeatures .featuresContainer { margin: 0; height: 970px; }
        .sawhOverviewFeatures .featuresContainer .featureItem p { max-width: 330px; }
        .sawhOverviewFeatures .featuresContainer .featureItem { padding-left: 55px; }
            .sawhOverviewFeatures .featuresContainer .featureItem .icon { left: 55px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+1) { padding-left: 55px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+2) { padding-left: 55px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+1) .icon { left: 55px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+2) .icon { left: 55px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+1) { padding-left: 85px; }
                .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+1) .icon { left: 85px; }

    .sawhOverviewSwiper .slide-block { height: 100%; display: block; }
    .sawhOverviewSwiper .swiper-slide .slide-left { width: 570px; display: table-cell; vertical-align: middle; height: 100%; float: none; }
    .sawhOverviewSwiper .slide-right.hide-sm.hide-md { display: table-cell; vertical-align: middle; height: 100%; float: none; padding-right: unset; padding-left: 40px; }
    .sawhOverviewSwiper .slide-right div { width: 255px; height: 170px; }
}

@media (max-width: 991px) {
    .more-features { font-size: 20px; padding: 20px 0; }

    .sawh-resources { grid-template-columns: repeat(2, 1fr); }
        .sawh-resources > a { font-size: 16px; padding: 20px; }
            .sawh-resources > a::after { width: 20px; height: 25px; }

    .sawhOverviewReliable p.desc span { width: 100%; }
    .sawhOverviewFeatures .featuresContainer { margin: 0; height: 1090px; }
        .sawhOverviewFeatures .featuresContainer .featureItem p { max-width: 250px; }
        .sawhOverviewFeatures .featuresContainer .featureItem { padding-left: 30px; }
            .sawhOverviewFeatures .featuresContainer .featureItem .icon { left: 30px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+1) { padding-left: 30px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+2) { padding-left: 30px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+1) .icon { left: 30px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(3n+2) .icon { left: 30px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+1) { padding-left: 50px; }
                .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+1) .icon { left: 50px; }

    .sawhOverviewSwiper .basicSwiper { margin-top: 80px; }
        .sawhOverviewSwiper .basicSwiper .swiper-slide { height: auto; }
    .sawhOverviewSwiper .slide-left { min-height: 340px; width: 100%; }
    .sawhOverviewSwiper .basicSwiper .swiper-slide .slide-right { width: 100%; padding-top: 40px; }
    .sawhOverviewSwiper .swiper-slide .slide-left { width: 100%; padding: 0px; }
    .sawhOverviewSwiper .slide-left { width: 100%; }
    .sawhOverviewSwiper .slide-right { width: auto; margin: auto; float: none; display: inline-block; padding-bottom: 50px; padding-right: 0px; }
        .sawhOverviewSwiper .slide-right div { margin: auto; }
        .sawhOverviewSwiper .slide-right.hide-md { display: none; }
    .sawhOverviewSwiper .custom-slick-arrow { display: none; }
    .sawhOverviewSwiper .basicSwiper .swiper-slide .slide-left .personWords .preQuote { width: 30px; }
    .sawhOverviewSwiper .basicSwiper .swiper-slide .slide-left .personWords { height: auto; display: block; font-size: 14px; line-height: 24px; padding-left: 30px; position: relative; color: #323234; }
    .sawhOverviewSwiper .basicSwiper .swiper-slide .personName { font-size: 14px; line-height: 22px; }
}

@media (max-width: 767px) {
    .more-features { margin: 0 15px; }
    .sawhOverviewFeatures .featuresContainer { height: auto; margin: 0 15px; }
        .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+1),
        .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+2) { padding-left: 50px; padding-right: 50px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+1) .icon,
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+2) .icon { left: 50px; }
        .sawhOverviewFeatures .featuresContainer .featureItem p { max-width: 100%; }

    .sawhOverviewSwiper .basicSwiper .swiper-slide { width: 540px; }
    .sawhOverviewSwiper .basicSwiper .SwiperContent { padding: 0; }
    .sawhOverviewSwiper .basicSwiper .ant-carousel .slick-dots li { display: inline-block; }
    .sawhOverviewSwiper .basicSwiper .ant-carousel .slick-dots { text-align: center; }
    .sawhOverviewSwiper .basicSwiper .swiper-slide .slide-left { height: auto; margin-top: 50px; }
}

@media (max-width: 575px) {
    .sawh-resources { grid-template-columns: 1fr; }

    .sawhOverviewFeatures h3 { width: 100%; margin: 0 auto; }
    .sawhOverviewFeatures .featuresContainer { height: auto; }
        .sawhOverviewFeatures .featuresContainer .featureItem { padding: 60px 20px; margin: 0; }
            .sawhOverviewFeatures .featuresContainer .featureItem span.icon { left: 20px; }
            .sawhOverviewFeatures .featuresContainer .featureItem h3 { font-size: 20px; }
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+1),
            .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+2) { padding-left: 30px; padding-right: 30px; }
                .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+1) .icon,
                .sawhOverviewFeatures .featuresContainer .featureItem:nth-child(2n+2) .icon { left: 30px; }

    .sawhOverviewSwiper .basicSwiper .swiper-slide { height: auto !important; }
    .sawhOverviewSwiper .slide-block { min-height: 300px; display: block; }
    .sawhOverviewSwiper .basicSwiper .swiper-slide { vertical-align: middle; display: table-cell; float: none; }
}
