/* banner */
.basicBanner h2,
.basicBanner .h2 { width: 500px; }

.alliance .h3 { font-weight: normal; margin-bottom: 20px; }
.alliance a, .alliance a:visited, .alliance a:focus { color: #FE8E14; }
    .alliance a:hover { color: #FEA543 !important }

.allianceBanner.basicBanner { background-image: url(../../images/icons/colorBlumine.png); margin-bottom: 195px; }

.allianceBanner p { margin-bottom: 0px; font-size: 20px; }

.allianceBanner.basicBanner .bannerImg { background: url(../../images/company/alliance-hero.png) }




/* content */
.microsoftBlock { display: grid; display: -ms-grid; width: 100%; height: 449px; grid-template-columns: 990px 1fr; -ms-grid-columns: 990px 1fr; margin-bottom: 150px; }

    .microsoftBlock .block { background-color: #F5F5F5; height: 450px; -ms-grid-column: 1; }

    .microsoftBlock .text { margin-left: -130px; margin-right: 130px; /* top: 50%; */ margin-top: 110px; -ms-grid-column: 2; }

.secondBlock { width: 1200px; margin: auto; margin-bottom: 120px; }

.thirdBlock { display: grid; display: -ms-grid; width: 100%; height: 449px; grid-template-columns: 1fr 990px; -ms-grid-columns: 1fr 990px; margin-bottom: 150px; }

    .thirdBlock .text { margin-left: 130px; margin-right: -130px; margin-top: 55px; -ms-grid-column: 1; }

    .thirdBlock .block { background-color: #F5F5F5; height: 450px; -ms-grid-column: 2; }

.companyBlock { display: grid; display: -ms-grid; width: 100%; grid-template-columns: 1fr 1015px; -ms-grid-columns: 1fr 1015px; }

    .companyBlock .logos { position: relative; }

        .companyBlock .logos .orange-block { background-color: #FE8E14; height: 408px; width: 796px; position: absolute; top: 50%; transform: translateY(-50%); font-size: 0px; z-index: 4; }

            .companyBlock .logos .orange-block i { display: inline-block; height: 204px; width: 398px; font-size: 30px; transition: transform ease-in-out 0.2s; background-position: center; }
                .companyBlock .logos .orange-block i:first-child { background-image: url(../../images/company/company-icon-hp.png); background-size: cover; }
                    .companyBlock .logos .orange-block i:first-child.hovering { transform: translate(-10px, -10px); }
                .companyBlock .logos .orange-block i:nth-child(2) { background-image: url(../../images/company/company-icon-epson.png); background-size: cover; }
                    .companyBlock .logos .orange-block i:nth-child(2).hovering { transform: translate(10px,-10px); }
                .companyBlock .logos .orange-block i:nth-child(3) { background-image: url(../../images/company/company-icon-avision.png); background-size: cover; }
                    .companyBlock .logos .orange-block i:nth-child(3).hovering { transform: translate(-10px, 10px); }
                .companyBlock .logos .orange-block i:nth-child(4) { background-image: url(../../images/company/company-icon-fujifilm.png); background-size: cover; }
                    .companyBlock .logos .orange-block i:nth-child(4).hovering { transform: translate(10px, 10px); }

    .companyBlock .block { background-color: #323234; height: 561px; -ms-grid-column: 2; padding-left: 320px; position: relative; }

    .companyBlock .company-text { position: absolute; top: 50%; transform: translateY(-50%); padding-right: 100px; font-size: 22px; line-height: 34px; transition: all ease-in-out 0.4s; }
        .companyBlock .company-text .orangeLink { font-size: 24px; line-height: 36px; }



hr { width: 70%; }

.bottomBlock { display: grid; display: -ms-grid; width: 100%; grid-template-columns: 1fr 990px; -ms-grid-columns: 1fr 990px; margin-bottom: 150px; margin-top: 172px; }

    .bottomBlock .text { margin-left: 130px; margin-right: -130px; /* top: 50%; */ margin-top: 55px; -ms-grid-column: 1; }

    .bottomBlock .block { background-color: #F5F5F5; height: 450px; -ms-grid-column: 2; }

    .microsoftBlock .block, .thirdBlock .block, .bottomBlock .block { position: relative; z-index: 0; }

    .microsoftBlock .text, .thirdBlock .text, .bottomBlock .text { z-index: 3; }

.thirdBlockReverse { position: relative; display: flex; justify-content: flex-end; height: 420px; align-items: center; }
    .thirdBlockReverse .text { margin: 0; left: 0; width: 654px; position: relative; z-index: 3; }
    .thirdBlockReverse .block { left: 130px; position: absolute; height: 100%; width: 990px; background-color: #F5F5F5; display: flex; align-items: center; justify-content: center; }

@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
    .microsoftBlock, .thirdBlock, .companyBlock, .bottomBlock { display: table; }
        .microsoftBlock .block, .thirdBlock .block, .bottomBlock .block { display: table-cell; width: 70%; }
        .companyBlock .block { padding-left: 621px; width: 80%; float: right; }
        .thirdBlock img, .bottomBlock img, .microsoftBlock img { transform: translate(-50%, 7%) !important; }
        .companyBlock .logos .orange-block { transform: translateY(20%) !important; }
}

@media all and (min-width:0\0) and (min-resolution:.001dpcm) and (max-width:1679px) {
    .companyBlock .block { padding-left: 400px !important; height: 460px !important; }
}

@media all and (min-width:0\0) and (min-resolution:.001dpcm) and (max-width:1199px) {
    .companyBlock .logos .orange-block { transform: translateY(40%) !important; }
    .companyBlock .block { height: 490px; }
}

@media all and (min-width:0\0) and (min-resolution:.001dpcm) and (max-width:991px) {
    .microsoftBlock, .thirdBlock, .companyBlock, .bottomBlock { display: block; }
    .companyBlock { height: 500px !important; }
        .companyBlock .logos .orange-block { transform: translateY(-60%) !important; margin-left: 16px; left: 0px !important; }
        .companyBlock .block { padding-left: 0px !important; width: 100%; }
    .thirdBlock img, .bottomBlock img, .microsoftBlock img { transform: translate(13%, 7%) !important; position: relative !important; top: 0px !important; left: 0px !important; }
}

/* other */
.thirdBlock img, .bottomBlock img, .microsoftBlock img { top: 50%; transform: translate(-50%, -50%); left: 50%; position: absolute; }



/* media query */
@media (max-width: 1680px) {
    .thirdBlockReverse .block { left: 0; width: 752px; }
    .thirdBlockReverse .text {  width: 478px; }

    .allianceBanner.basicBanner { margin-bottom: 140px; }

    .microsoftBlock { grid-template-columns: 752px 1fr; -ms-grid-columns: 752px 1fr; margin-bottom: 80px; }

        .microsoftBlock .text { margin-left: -90px; margin-right: 0px; margin-top: 90px; }

        .microsoftBlock img { height: 380px; }


        .microsoftBlock .block, .bottomBlock .block, .thirdBlock .block { height: 410px; }

    .secondBlock { width: 1000px; }

    .thirdBlock, .bottomBlock { grid-template-columns: 1fr 752px; -ms-grid-columns: 1fr 752px; }

    .thirdBlock { margin-bottom: 100px; }

    .bottomBlock { margin-top: 135px; }

    .thirdBlock .text { margin-left: 0px; margin-right: -120px; margin-top: 40px; }

    .thirdBlock img { height: 370px; left: 55%; }

    .companyBlock { grid-template-columns: 1fr 812px; -ms-grid-columns: 1fr 812px; }

        .companyBlock .logos .orange-block { height: 326px; width: 636px; }

            .companyBlock .logos .orange-block i { height: 163px; width: 318px; }

        .companyBlock .block { padding-left: 370px; height: 450px; }

        .companyBlock .company-text { padding-right: 50px; }

            .companyBlock .company-text .orangeLink { font-size: 16px; line-height: 36px; }

    .bottomBlock .text { margin-left: 0; margin-right: -120px; margin-top: 24px; }

    .bottomBlock img { height: 370px; }
}

@media (max-width: 1199px) {
    .thirdBlockReverse .block { left: 0; width: 602px; }
    .thirdBlockReverse .text { width: 418px; }

    .microsoftBlock { grid-template-columns: 602px 1fr; -ms-grid-columns: 602px 1fr; }

        .microsoftBlock img, .thirdBlock img, .bottomBlock img { height: 320px; }

        .microsoftBlock .text { margin-left: -60px; }

    .secondBlock { width: 100%; }

    .thirdBlock, .bottomBlock { grid-template-columns: 1fr 602px; -ms-grid-columns: 1fr 602px; }

        .thirdBlock .text { margin-right: -90px; }

    .companyBlock { grid-template-columns: 1fr 612px; -ms-grid-columns: 1fr 812px; }

        .companyBlock .logos .orange-block { height: 274px; width: 536px; }

            .companyBlock .logos .orange-block i { height: 137px; width: 268px; }

        .companyBlock .block { padding-left: 250px; height: 410px; }
}

@media screen and (max-width: 1199px) and (-ms-high-contrast: active), screen and (max-width: 1199px) and (-ms-high-contrast: none) {
    .companyBlock .block { padding-left: 450px; }
}

@media (max-width: 991px) {
    .thirdBlockReverse { flex-direction: column-reverse; height: auto; }
    .thirdBlockReverse .block { position: relative; width: 100%; height: auto; padding: 40px 0; }
    .thirdBlockReverse .block img { max-width: 100%; height: auto; }
    .thirdBlockReverse .text { width: 100%; background-color: #f5f5f5; padding: 40px 100px 10px 100px; }

    .allianceBanner.basicBanner { margin-bottom: 95px; }

    .microsoftBlock, .thirdBlock, .bottomBlock { grid-template-rows: 0.5fr 330px; -ms-grid-rows: 0.5fr 330px; height: auto; grid-template-columns: none; -ms-grid-columns: none; background-color: #F5F5F5; }

    .microsoftBlock { margin-bottom: 80px; }

    .secondBlock { margin-bottom: 70px; }

    .microsoftBlock .block, .bottomBlock .block, .thirdBlock .block { height: 330px; grid-row: 2; -ms-grid-row: 2; z-index: 1; }

    .microsoftBlock .text, .thirdBlock .text, .bottomBlock .text { margin: 40px 100px; -ms-grid-row: 1; margin-bottom: 20px; }

    .thirdBlock img, .bottomBlock img, .microsoftBlock img { width: 80%; height: auto; }

    .thirdBlock { margin-bottom: 100px; }

    .companyBlock { grid-template-rows: 0.5fr 1fr; -ms-grid-rows: 0.5fr 1fr; height: auto; grid-template-columns: none; -ms-grid-columns: none; background-color: #323234; }

        .companyBlock .block { grid-row: 2; -ms-grid-row: 2; padding-left: 60px; height: 310px; }

        .companyBlock .logos { grid-row: 1; -ms-grid-row: 1; }

            .companyBlock .logos .orange-block { font-size: 0px; z-index: 4; left: 50%; transform: translateX(-50%); top: -50%; height: 246px; width: 480px; }

                .companyBlock .logos .orange-block i { height: 123px; width: 240px; }

    .companyBlock { margin-bottom: 82px; }

    .bottomBlock { margin-top: 82px; }
}

@media screen and (max-width: 991px) and (-ms-high-contrast: active), screen and (max-width: 991px) and (-ms-high-contrast: none) {
    .microsoftBlock .block { -ms-grid-row: 2; -ms-grid-column: 2; }

    .bottomBlock .block, .thirdBlock .block { -ms-grid-row: 2; -ms-grid-column: 1; }

    .thirdBlock img, .bottomBlock img, .microsoftBlock img { left: 50%; transform: translateX(-50%); top: 0px; }

    .companyBlock .logos .orange-block { top: 50%; right: 50%; transform: translate(-50%, -50%); }

    .companyBlock { -ms-grid-rows: 1fr 1fr; -ms-grid-columns: 0.1fr 1fr 0.1fr }

        .companyBlock .block { -ms-grid-row: 2; -ms-grid-column: 2; }

        .companyBlock .logos { -ms-grid-row: 1; -ms-grid-column: 2; }
}

@media (max-width: 767.98px) {
    .thirdBlockReverse .text { padding: 40px 50px; }

    .allianceBanner .mt100 { margin-top: 50px; }

    .allianceBanner.basicBanner h1 { margin-bottom: 50px; width: 100%; }

    .microsoftBlock .text, .thirdBlock .text, .bottomBlock .text { margin: 40px 50px; margin-bottom: 20px; }

    .companyBlock .block { padding-left: 0px; /*        height: auto;*/ }

    .companyBlock .company-text { position: relative; padding: 40px 42px; }

        .companyBlock .company-text:after { clear: both; display: block; content: ""; }
}

@media (max-width: 576px) {
    .companyBlock .block { height: auto; /*        overflow-y: scroll;*/ }

    .companyBlock .logos .orange-block { width: 100%; top: unset; left: unset; transform: none; position: relative; }

        .companyBlock .logos .orange-block i { width: 50%; }

            .companyBlock .logos .orange-block i:first-child.hovering { transform: translate(-10px, -10px); }

            .companyBlock .logos .orange-block i:nth-child(2).hovering { transform: translate(-10px, -10px); }

            .companyBlock .logos .orange-block i:nth-child(3).hovering { transform: translate(-10px, -10px); }

            .companyBlock .logos .orange-block i:nth-child(4).hovering { transform: translate(-10px, -10px); }
}

@media screen and (max-width: 576px) and (-ms-high-contrast: active), screen and (max-width: 576px) and (-ms-high-contrast: none) {
    .companyBlock .logos .orange-block { top: 10px; left: 50%; transform: translateX(-50%); }
}

@media (min-width: 1680px) {
    .alliance .container { max-width: 1640px; }
}