#business {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
}

#business .businessebg {
    background-image: url('../img/common/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 490;
    width: 100%;
    height: 100vh;
}

#business .businessContent {
    position: absolute;
    left: 5%;
    top: 80px;
    z-index: 520;
    width: 92%;
    height: 85%;
}

#business .businessTitle {
    opacity: 0;
    font-size: 30px;
    font-weight: 900;
    text-align: center;
    top: 20px;
    margin-bottom: 30px;
    color: #4167b0;
}

#business #container {
    opacity: 0;
    position: absolute;
    width: 93%;
    margin: 0px auto;
    z-index: 1000;
    top:50px;
}

#business #container2 {
    opacity: 0;
    position: absolute;
    width: 93%;
    margin: 0px auto;
    z-index: 900;
    top:50px;
}

#business .accordionNavigation {
    margin-top: 10px;
    width: 130px;
    position: fixed;
    left: 50%;
    margin-left: -65px;
    bottom:8%;
}

#business .accordionNavigation .showaAccordion1 {
    margin-right: 60px;
    cursor: pointer;
}

#business .accordionNavigation .showaAccordion2 {
    cursor: pointer;
}

.box-item {
    color: #ffffff;
    position: relative;
    -webkit-backface-visibility: hidden;
    width: 100%;
    margin-bottom: 15px;
    max-width: 100%;
}

.flip-box {
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.flip-box-front,
.flip-box-back {
    background-size: cover;
    background-position: center;
    border-radius: 25px;
    min-height: 160px;
    -ms-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    -webkit-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box-front {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-front {
    -ms-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-back {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box .inner {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 10px;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2;
    transform: translateY(-50%) translateZ(60px) scale(.94);
    -webkit-transform: translateY(-50%) translateZ(60px) scale(.94);
    -ms-transform: translateY(-50%) translateZ(60px) scale(.94);
    top: 50%;
}

.flip-box-header {
    font-size: 28px;
    font-weight: 900;
}

.flip-box .prefix {
    position: relative;
    top: -10px;
}

.flip-box .solutionName {
    font-size: 20px;
}

.flip-box .solutionDescription {
    font-size: 13px;
    position: relative;
    top: -30px;
    max-height: 40px;
}

#business .exploreMoreButton {
    font-size: 14px;
    background-color: #ff9c00;
    color: #ffffff;
    text-transform: uppercase;
    padding: 3px;
    border-radius: 25px;
    width: 86%;
    text-align: center;
    position: relative;
    left: 50%;
    margin-left: -43%;
    bottom: -30px;
    cursor: pointer;
}

#business .exploreMoreButton:hover {
    background-color: #181818;
}

.flip-box-front2,
.flip-box-back2 {
    background-size: cover;
    background-position: center;
    border-radius: 25px;
    min-height: 340px;
    -ms-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    -webkit-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box-front2 {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box-back2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-front2 {
    -ms-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-back2 {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#business .downloadContainer {
    display: none;
    position: fixed;
    z-index: 1800;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
}

#business .contactPopup {
    background-image: url('../img/common/innerbg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 25px;
    width: 100%;
    max-width: 50%;
    position: fixed;
    z-index: 800;
    top: 25%;
    left: 50%;
    margin-left: -25%;
    padding: 15px 35px;
    border: 3px solid #fab234;
}

#business .closeContactPopup {
    font-size: 34px;
    position: absolute;
    right: 20px;
    top: 0px;
    color: #181818;
    cursor: pointer;
}

#business .contactBlock2 {
    border-radius: 10px;
    padding: 0px 10px;
    text-align: left;
}


/*==================================================================================*/


/*Disable Mobile-----------------------------------*/

.mobileBusiness {
    display: none;
}


/*End of Disable Mobile----------------------------*/


/*==================================================================================*/


/*==================================================================================*/

@media only screen and (max-width: 575px) {
    #business {
        display: none;
    }
    .mobileBusiness {
        display: block;
    }
    .businessTopSpace {
        height: 70px;
        position: relative;
    }
    .mobileBusiness .scrollContent {
        background-color: #ffffff;
        border: 3px solid #4167b0;
        margin: 10px 10px;
        padding: 10px;
        border-radius: 25px;
        position: relative;
        z-index: 700;
    }
    .mobileBusiness .businessTitle {
        font-size: 30px;
        font-weight: 900;
        text-align: center;
    }
    .mobileBusiness .downloadContainer {
        display: none;
        position: fixed;
        z-index: 1800;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .mobileBusiness .contactPopup {
        background-image: url('../img/common/innerbg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 25px;
        width: 100%;
        max-width: 90%;
        position: fixed;
        z-index: 800;
        top: 25%;
        left: 50%;
        margin-left: -45%;
        padding: 15px 35px;
        border: 3px solid #fab234;
    }
    .mobileBusiness .closeContactPopup {
        font-size: 34px;
        position: absolute;
        right: 20px;
        top: 0px;
        color: #181818;
        cursor: pointer;
    }
    .mobileBusiness .contactBlock2 {
        border-radius: 10px;
        padding: 0px 10px;
        text-align: left;
    }
    .mobileBusiness .tab1Mobile {
        background-color: #d04646;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab2Mobile {
        background-color: #d09a46;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab3Mobile {
        background-color: #74d046;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab4Mobile {
        background-color: #46d0ab;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab5Mobile {
        background-color: #4684d0;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab6Mobile {
        background-color: #a146d0;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .exploreMoreButton {
        font-size: 14px;
        background-color: #ff9c00;
        color: #ffffff;
        text-transform: uppercase;
        padding: 3px;
        border-radius: 25px;
        width: 86%;
        text-align: center;
        position: relative;
        left: 50%;
        margin-left: -43%;
        bottom: -30px;
        cursor: pointer;
    }
    .mobileBusiness .exploreMoreButton:hover {
        background-color: #181818;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    #business {
        display: none;
    }
    .mobileBusiness {
        display: block;
    }
    .businessTopSpace {
        height: 70px;
        position: relative;
    }
    .mobileBusiness .scrollContent {
        background-color: #ffffff;
        border: 3px solid #4167b0;
        margin: 10px 10px;
        padding: 10px;
        border-radius: 25px;
        position: relative;
        z-index: 700;
    }
    .mobileBusiness .businessTitle {
        font-size: 30px;
        font-weight: 900;
        text-align: center;
    }
    .mobileBusiness .downloadContainer {
        display: none;
        position: fixed;
        z-index: 1800;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .mobileBusiness .contactPopup {
        background-image: url('../img/common/innerbg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 25px;
        width: 100%;
        max-width: 90%;
        position: fixed;
        z-index: 800;
        top: 25%;
        left: 50%;
        margin-left: -45%;
        padding: 15px 35px;
        border: 3px solid #fab234;
    }
    .mobileBusiness .closeContactPopup {
        font-size: 34px;
        position: absolute;
        right: 20px;
        top: 0px;
        color: #181818;
        cursor: pointer;
    }
    .mobileBusiness .contactBlock2 {
        border-radius: 10px;
        padding: 0px 10px;
        text-align: left;
    }
    .mobileBusiness .tab1Mobile {
        background-color: #d04646;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab2Mobile {
        background-color: #d09a46;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab3Mobile {
        background-color: #74d046;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab4Mobile {
        background-color: #46d0ab;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab5Mobile {
        background-color: #4684d0;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab6Mobile {
        background-color: #a146d0;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .exploreMoreButton {
        font-size: 14px;
        background-color: #ff9c00;
        color: #ffffff;
        text-transform: uppercase;
        padding: 3px;
        border-radius: 25px;
        width: 86%;
        text-align: center;
        position: relative;
        left: 50%;
        margin-left: -43%;
        bottom: -30px;
        cursor: pointer;
    }
    .mobileBusiness .exploreMoreButton:hover {
        background-color: #181818;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #business {
        display: none;
    }
    .mobileBusiness {
        display: block;
    }
    .businessTopSpace {
        height: 70px;
        position: relative;
    }
    .mobileBusiness .scrollContent {
        background-color: #ffffff;
        border: 3px solid #4167b0;
        margin: 10px 10px;
        padding: 10px;
        border-radius: 25px;
        position: relative;
        z-index: 700;
    }
    .mobileBusiness .businessTitle {
        font-size: 30px;
        font-weight: 900;
        text-align: center;
    }
    .mobileBusiness .downloadContainer {
        display: none;
        position: fixed;
        z-index: 1800;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .mobileBusiness .contactPopup {
        background-image: url('../img/common/innerbg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 25px;
        width: 100%;
        max-width: 90%;
        position: fixed;
        z-index: 800;
        top: 25%;
        left: 50%;
        margin-left: -45%;
        padding: 15px 35px;
        border: 3px solid #fab234;
    }
    .mobileBusiness .closeContactPopup {
        font-size: 34px;
        position: absolute;
        right: 20px;
        top: 0px;
        color: #181818;
        cursor: pointer;
    }
    .mobileBusiness .contactBlock2 {
        border-radius: 10px;
        padding: 0px 10px;
        text-align: left;
    }
    .mobileBusiness .tab1Mobile {
        background-color: #d04646;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab2Mobile {
        background-color: #d09a46;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab3Mobile {
        background-color: #74d046;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab4Mobile {
        background-color: #46d0ab;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab5Mobile {
        background-color: #4684d0;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .tab6Mobile {
        background-color: #a146d0;
        font-size: 18px;
        padding: 5px;
        color: #ffffff;
    }
    .mobileBusiness .exploreMoreButton {
        font-size: 14px;
        background-color: #ff9c00;
        color: #ffffff;
        text-transform: uppercase;
        padding: 3px;
        border-radius: 25px;
        width: 86%;
        text-align: center;
        position: relative;
        left: 50%;
        margin-left: -43%;
        bottom: -30px;
        cursor: pointer;
    }
    .mobileBusiness .exploreMoreButton:hover {
        background-color: #181818;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #business .businessContent {
        position: absolute;
        left: 7%;
        top: 80px;
        z-index: 520;
        width: 90%;
        height: 85%;
    }
    #business .businessTitle {
        opacity: 0;
        font-size: 26px;
        font-weight: 900;
        text-align: center;
        top: 20px;
    }
    /*==================================================================================*/
}

@media only screen and (min-width: 1200px) and (max-width: 1440px) {
    #business .businessContent {
        position: absolute;
        left: 7%;
        top: 80px;
        z-index: 520;
        width: 90%;
        height: 85%;
    }
    #business .businessTitle {
        opacity: 0;
        font-size: 26px;
        font-weight: 900;
        text-align: center;
        top: 20px;
    }
}