@font-face { font-family: 'Futura'; src: url("../fonts/FuturaT-Book.woff2") format("woff2"), url("../fonts/FuturaT-Book.woff") format("woff"), url("../fonts/FuturaT-Book.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura'; src: url("../fonts/Futura-Medium.woff2") format("woff2"), url("../fonts/Futura-Medium.woff") format("woff"), url("../fonts/Futura-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura'; src: url("../fonts/FuturaPT-DemiBold.woff2") format("woff2"), url("../fonts/FuturaPT-DemiBold.woff") format("woff"), url("../fonts/FuturaPT-DemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura'; src: url("../fonts/Futura-Bold.woff2") format("woff2"), url("../fonts/Futura-Bold.woff") format("woff"), url("../fonts/Futura-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; }
.orangeText, .orangeBtn:hover, .orangeWhiteBtn:hover, .requestDemoBtn:hover, .calculateBtn:hover, .transBtn:hover { color: #F15C2D; }
.borderRad5, .orangeBtn, .orangeWhiteBtn, .requestDemoBtn, .calculateBtn, .transBtn, .blackBtn, .blueBtn, .whyFoxWrapper .whyFoxBottom .whyFoxGrid, .reqDemoForm input, .setupBox .setupForm input, .reqDemoForm select, .setupBox .setupForm select { border-radius: 5px; }
html, body { padding: 0; margin: 0; box-sizing: border-box; font: 500 16px 'Futura'; }
a, a:hover { text-decoration: none; }
.gridPadding { padding-left: 100px; padding-right: 100px; }
.orangeBtn, .orangeWhiteBtn, .requestDemoBtn, .calculateBtn, .transBtn, .reqDemoForm input.orangeBtn { background-color: #F15C2D; color: #fff; border: 1px solid #F15C2D; transition: .8s; padding: 6px 26px; outline: none; font-weight: 600; }
.reqDemoForm input.orangeBtn { width: auto; }
span.error { color: #F15C2D; }
.orangeBtn:focus, .orangeWhiteBtn:focus, .requestDemoBtn:focus, .calculateBtn:focus, .transBtn:focus { outline: none; }
.orangeBtn:hover, .orangeWhiteBtn:hover, .requestDemoBtn:hover, .calculateBtn:hover, .transBtn:hover { background-color: transparent; }
.orangeWhiteBtn:hover { color: #fff; border-color: #fff; }
.requestDemoBtn, .calculateBtn { background-color: transparent; border-color: #fff; }
.requestDemoBtn:hover, .calculateBtn:hover { background-color: #F15C2D; border-color: #F15C2D; color: #fff; }
.transBtn { background: transparent; border-color: #F15C2D; color: #F15C2D; }
.transBtn:hover { background-color: #F15C2D; color: #fff; }
.blackBtn, .blueBtn { background-color: #020202; border: 1px solid #020202; color: #fff; transition: .8s; padding: 8px 30px; outline: none; font-weight: 600; }
.mdi-check-circle::before{display:none;}
.blueBtn { background-color: #142641; border: 1px solid #142641; color: #fff; }
.transformBox .transformContent h5, .topFooter h5, .whyFoxWrapper .topSection h5, .testRightContent h4, .decisionTitle h2, .empAppWrap .empSliderCaption h4, .mainBanner .bannerCaption h2, .contactMainBanner .bannerCaption h2, .careerMainBanner .bannerCaption h2, .blogMainBanner .bannerCaption h2, .whyFoxList .leftBox h4, .visionWrap h4, .workLife h4, .aboutWrapper .contentBox h4, .missionWrap .missionLeftBox h4, .competWrapper h4, .moduleCover h4, .generalEnqWrap .enqLeft h4, .contactInfoWrapper h4, .faqWrapper h1, .careerWhyFox h4, .buildPlatformWrapper h3, .requestDemoWrapper .reqDemoLeftBox h1, .setupBox h1, .blogWrap h3, .blogDetailWrapper .blogDetailContent h3, .pricingBanner .bannerCaption h2, .billingCycleWrapper h3 { font-size: 30px; font-weight: 600; }
/************header***********/
.headerLogo { padding: 0; }
.headerLogo img { width: 40px; }
.headerLogo .fixedLogo { display: none; }
.navBarWrapper { padding: 15px 0; }
.navBarWrapper .navbar-nav .nav-link { color: #393939; margin: 0px 10px; font-weight: 600; }
.navBarWrapper .navbar-nav .active > .nav-link, .navBarWrapper .navbar-nav .nav-link.active, .navBarWrapper .navbar-nav .nav-link.show, .navBarWrapper .navbar-nav .show > .nav-link, .navBarWrapper .navbar-nav .nav-link:hover { color: #F15C2D; }
.navBarWrapper .headerRightSection { display: flex; }
.navFixedTop { background-color: #fff; box-shadow: 0 0 6px #ececec; }
.navFixedTop .unFixLogo { display: none; }
.navFixedTop .fixedLogo { display: block; width: 125px; }
.navbar-toggler { padding: 8px 10px 4px; outline: none; border-color: #F15C2D !important; }
.navbar-toggler:focus { outline: none; }
.navbar-toggler .navbarTogglerIcon { height: 2px; width: 20px; background-color: #F15C2D; display: block; margin-bottom: 4px; }
/***********slider*************/
.mainSlider { background: #f0f0f0 url("../images/why-fox-dot.png") no-repeat; background-position: right 98%; background-size: 75px; }
.mainSlider .carousel-caption { position: absolute; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; padding-top: 0; padding-bottom: 0; }
.mainSlider .carousel-caption .d-flex { height: 100vh; }
.mainSlider .leftSliderCaption { width: 60%; padding: 0 50px 0 120px; text-align: left; }
.mainSlider .leftSliderCaption p { color: #020202; width: 42%; font-size: 15px; line-height: 30px; }
.mainSlider .rightSliderCaption { width: 32%; text-align: left; padding-right: 50px; color: #020202; }
.mainSlider .rightSliderCaption h1 { font-size: 32px; font-weight: 600; line-height: 45px; margin: 0; }
.mainSlider .rightSliderCaption p { font-size: 15px; margin: 25px 0 30px; line-height: 30px; }
.mainSlider .carousel-indicators li { background-color: #c9c7c7; width: 28px; margin-right: 6px; margin-left: 6px; }
.mainSlider .carousel-indicators li.active { background-color: #F15C2D; }
.mainSlider .carousel-item { height: 100vh; min-height: 350px; background: no-repeat 40% center scroll; background-size: 400px; }
/**********decision***********/
.decisionWrapper { padding: 6rem 0 2rem; background: url("../images/decison-bg2.png") no-repeat; background-size: 100px; background-position: 58% 31%; overflow: hidden; position: relative; }
.decisionWrapper:before { content: ""; position: absolute; right: -90px; top: 58px; width: 190px; height: 190px; border-radius: 50%; border: 20px solid #f7f7f7; z-index: -1; }
.decisionWrapper img { width: 92%; }
.decisionWrapper .decisionTitle { text-align: center; }
.decisionWrapper .decisionTitle img { width: 40px; }
.decisionWrapper .decisionTitle h2 { margin: 20px auto; max-width: 450px; width: 100%; line-height: 40px; }
.decisionWrapper .topMobScreenImg img { position: relative; right: -130px; top: 90px; }
.decisionWrapper .decisionImages { margin-top: -75px; }
/*******middle slider section************/
.empAppWrap { background: #F4F7FD; padding: 3rem 0 3rem 50px; }
.empAppWrap .carousel-indicators { top: 0; right: 0; bottom: 0; left: 0; display: block; margin-right: 0; margin-left: 0; width: 60px; }
.empAppWrap .carousel-indicators li { color: #000; border-left: 2px solid transparent; margin-bottom: 40px; border-top: 0; border-bottom: 0; background-color: transparent; text-indent: unset; height: 26px; width: 100%; display: flex; align-items: center; justify-content: center; margin-left: 0; opacity: 1; }
.empAppWrap .carousel-indicators li.active, .empAppWrap .carousel-indicators li:hover { border-left-color: #F15C2D; color: #F15C2D; }
.empAppWrap .carousel-indicators li span { display: block; font-size: 16px; line-height: 16px; }
.empAppWrap .carousel-inner { padding-left: 120px; }
.empAppWrap .empSliderCaption { width: 100%; }
.empAppWrap .empSliderCaption .sliderCaptionWidth { width: 70%; }
.empAppWrap .empSliderCaption i { color: #142641; font-size: 30px; display: block; line-height: 25px; margin-bottom: 18px; }
.empAppWrap .empSliderCaption h3 { color: #F15C2D; font-size: 20px; font-weight: 600; margin: 24px 0; }
.empAppWrap .empSliderCaption h4 { margin: 0; }
.empAppWrap .empSliderCaption p { margin: 30px 0; color: #666666; line-height: 30px; }
.empAppWrap .empSliderImg { width: 90%; position: relative; padding-top: 35px; max-height: 410px; }
.empAppWrap .empSliderImg:before { content: ""; position: absolute; top: 0; right: 0; width: 60%; height: 35px; background-color: #142641; }
/**********testimonial***********/
.testimonialWrap { padding: 3rem 0; }
.testimonialWrap .testLeftBg { position: relative; }
.testimonialWrap .testLeftBg:before { content: ""; position: absolute; height: 300px; width: 300px; background: #F1F6FE; border-radius: 50%; z-index: -1; top: 13%; left: 30%; }
.testimonialWrap .w-100 { margin-right: 25px; }
.testimonialWrap .w-100:last-child { margin-right: 0; }
.testimonialWrap .quoteIcon { width: 70px; margin: 30px 0 50px 50px; }
.testimonialWrap .testmonialBox { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12); border-radius: 10px; padding: 20px 15px; text-align: center; margin-bottom: 25px; background-color: #fff; }
.testimonialWrap .testmonialBox img { width: 75px; height: 75px; margin: auto; border-radius: 50%; }
.testimonialWrap .testmonialBox .testUserName { color: #F15C2D; font-size: 20px; margin: 15px 0; }
.testimonialWrap .testmonialBox .position { color: #142641; font-size: 16px; margin-bottom: 12px; }
.testimonialWrap .testmonialBox .compName { color: #B8B8B8; margin-bottom: 16px; display: block; }
.testimonialWrap .testmonialBox p { color: #8F8F8F; font-size: 13px; line-height: 30px; }
.testimonialWrap .testRightLogo { opacity: .5; }
.testimonialWrap .testRightLogo img { width: 90px; }
.testimonialWrap .testRightContent i { font-size: 3rem; }
.testimonialWrap .testRightContent h4 { margin: 30px 0 20px; }
.testimonialWrap .testRightContent p { color: #666666; font-size: 15px; margin-bottom: 30px; line-height: 30px; }
/***********why fox************/
.whyFoxWrapper .whyFoxTop { width: 100%; background: url("../images/whyFoxBg.jpg") no-repeat; background-size: cover; background-position: center; }
.whyFoxWrapper .topSection { color: #fff; padding: 7rem 0 12rem; }
.whyFoxWrapper .topSection i { font-size: 30px; margin-bottom: 26px; display: block; }
.whyFoxWrapper .topSection h5 { margin-bottom: 20px; }
.whyFoxWrapper .topSection p { font-size: 20px; line-height: 30px; }
.whyFoxWrapper .whyFoxBottom { margin-top: -7rem; }
.whyFoxWrapper .whyFoxBottom .whyFoxGrid { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12); background: #fff; padding: 26px; margin-right: 20px; width: 25%; margin-bottom: 20px; }
.whyFoxWrapper .whyFoxBottom .whyFoxGrid:last-child { margin-right: 0; }
.whyFoxWrapper .whyFoxBottom .whyFoxGrid i { color: #142641; font-size: 30px; display: block; line-height: 25px; margin-bottom: 18px; }
.whyFoxWrapper .whyFoxBottom .whyFoxGrid h6 { color: #F15C2D; font-size: 18px; margin-bottom: 15px; line-height: 30px; }
.whyFoxWrapper .whyFoxBottom .whyFoxGrid p { color: #8F8F8F; margin: 0; line-height: 30px; }
/*****transformBg****/
.transformBox { background: #142641 url("../images/transformBg.png") no-repeat; background-position: center; background-size: contain; position: relative; border-radius: 10px; }
.transformBox img { visibility: hidden; }
.transformBox .transformContent { position: absolute; height: 100%; width: 100%; top: 0; left: 0; padding: 0 70px; display: flex; align-items: center; color: #fff; }
.transformBox .transformContent i { font-size: 30px; display: block; margin-bottom: 1rem; }
.transformBox .transformContent h5 { width: 340px; margin-bottom: 40px; line-height: 50px; }
/************footer***********/
footer { background-color: #142641; }
.topFooter { color: #fff; border-bottom: 1px solid #fff; padding: 15px 0; }
.topFooter img { width: 40px; margin: 0 20px; }
.midFooter { padding: 20px 0; }
.midFooter h6, .midFooter a { color: #fff; }
.midFooter h6 { font-size: 20px; margin: 15px 0 18px; }
.midFooter ul { padding: 0; }
.midFooter ul li { padding: 5px 0; list-style: none; }
.midFooter ul li a { padding: 0; }
.midFooter ul li a:hover { color: #F15C2D; }
.midFooter .socialGrid li i { font-size: 34px; }
.bottomFooter { background-color: #F15C2D; padding: 12px 15px 18px; text-align: center; }
.bottomFooter p { margin: 0; color: #fff; font-size: 14px; }
.fixedSocialIcons { position: absolute; bottom: 50px; left: 10px; margin: 0; z-index: 9999999999; }
.fixedSocialIcons li { margin-bottom: 10px; }
.fixedSocialIcons li a { border: 1px solid #000; height: 30px; width: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #000; background: transparent; transition: .8s; }
.fixedSocialIcons li a:hover { background-color: #F15C2D; border-color: #F15C2D; color: #fff; }
/******************why foxhr***********************/
.mainBanner, .contactMainBanner, .careerMainBanner, .blogMainBanner { height: 480px; width: 100%; background-repeat: no-repeat; background-size: 100% 100%; display: flex; align-items: center; }
.mainBanner .bannerCaption, .contactMainBanner .bannerCaption, .careerMainBanner .bannerCaption, .blogMainBanner .bannerCaption { margin-left: 15%; max-width: 350px; width: 100%; }
.mainBanner .bannerCaption h1, .contactMainBanner .bannerCaption h1, .careerMainBanner .bannerCaption h1, .blogMainBanner .bannerCaption h1 { font-size: 22px; font-weight: 500; }
.mainBanner .bannerCaption h2, .contactMainBanner .bannerCaption h2, .careerMainBanner .bannerCaption h2, .blogMainBanner .bannerCaption h2 { margin: 18px 0 20px; font-weight: 500; }
.mainBanner .bannerCaption h2 .orangeText, .contactMainBanner .bannerCaption h2 .orangeText, .careerMainBanner .bannerCaption h2 .orangeText, .blogMainBanner .bannerCaption h2 .orangeText, .mainBanner .bannerCaption h2 .orangeBtn:hover, .contactMainBanner .bannerCaption h2 .orangeBtn:hover, .careerMainBanner .bannerCaption h2 .orangeBtn:hover, .blogMainBanner .bannerCaption h2 .orangeBtn:hover, .mainBanner .bannerCaption h2 .orangeWhiteBtn:hover, .contactMainBanner .bannerCaption h2 .orangeWhiteBtn:hover, .careerMainBanner .bannerCaption h2 .orangeWhiteBtn:hover, .blogMainBanner .bannerCaption h2 .orangeWhiteBtn:hover, .mainBanner .bannerCaption h2 .requestDemoBtn:hover, .contactMainBanner .bannerCaption h2 .requestDemoBtn:hover, .careerMainBanner .bannerCaption h2 .requestDemoBtn:hover, .blogMainBanner .bannerCaption h2 .requestDemoBtn:hover, .mainBanner .bannerCaption h2 .calculateBtn:hover, .contactMainBanner .bannerCaption h2 .calculateBtn:hover, .careerMainBanner .bannerCaption h2 .calculateBtn:hover, .blogMainBanner .bannerCaption h2 .calculateBtn:hover, .mainBanner .bannerCaption h2 .transBtn:hover, .contactMainBanner .bannerCaption h2 .transBtn:hover, .careerMainBanner .bannerCaption h2 .transBtn:hover, .blogMainBanner .bannerCaption h2 .transBtn:hover { font-weight: 600; }
.mainBanner .bannerCaption p, .contactMainBanner .bannerCaption p, .careerMainBanner .bannerCaption p, .blogMainBanner .bannerCaption p { color: #2D2D2D; line-height: 30px; }
.whyFoxBanner { background: url("../images/why-fox-banner-vector.png") no-repeat, url("../images/why-fox-dot.png") no-repeat; background-color: #f0f0f0; background-position: 78% 46%, right 25%; background-size: 500px, 75px; position: relative; }
.whyFoxBanner:before { content: ""; position: absolute; left: -50px; bottom: -50px; width: 130px; height: 130px; border-radius: 50%; border: 18px solid #fff; }
.whyFoxList .leftBox, .whyFoxList .rightBox { width: 50%; }
.whyFoxList .leftBox { padding: 50px; position: relative; }
.whyFoxList .leftBox i { font-size: 3rem; color: #F15C2D; }
.whyFoxList .leftBox h4 { margin: 20px 0; }
.whyFoxList .leftBox p { color: #142641; font-size: 15px; line-height: 30px; }
.whyFoxList .leftText:before { content: ""; position: absolute; top: 0; right: 0; background-color: #142641; width: 40px; height: 90px; }
.whyFoxList .rightText { text-align: right; }
.whyFoxList .rightText:before { content: ""; position: absolute; top: 0; left: 0; background-color: #142641; width: 40px; height: 90px; }
.whyFoxList .rightBox { background-repeat: no-repeat; background-position: center; background-size: cover; }
/********************about us***************************/
.aboutBanner, .platformBanner { background: url(../images/about-banner-vector.png) no-repeat, url(../images/about-banner-dot.png) no-repeat, url(../images/about-banner-bg.png) no-repeat; background-position: 78% 46%, right 25%, -100px -65px; background-size: 370px, 75px, 114%; }
.aboutBanner .bannerCaption, .platformBanner .bannerCaption { max-width: 50%; }
.aboutBanner .bannerCaption h2, .platformBanner .bannerCaption h2 { margin: 18px 0 12px; }
.aboutBanner .bannerList span, .platformBanner .bannerList span { color: #142641; position: relative; display: inline-block; padding: 8px 20px 8px 0; font-size: 14px; }
.aboutBanner .bannerList span:before, .platformBanner .bannerList span:before { content: ""; position: absolute; left: 0; bottom: -10px; border-bottom: 2px solid #142641; width: 30px; }
.aboutBanner .bannerList li:last-child span:before, .platformBanner .bannerList li:last-child span:before { border-bottom: 2px solid #F15C2D; }
.visionWrap h4, .workLife h4 { margin: 20px 0 30px; }
.visionWrap p, .workLife p { width: 40%; margin: 0 auto; line-height: 30px; font-size: 15px; color: #666666; }
.workLife { background: url("../images/dot.png") no-repeat; background-position: left center; background-size: 66px; position: relative; overflow: hidden; }
.workLife:before { content: ""; position: absolute; right: -100px; top: 46px; width: 192px; height: 192px; border-radius: 50%; border: 20px solid #f7f7f7; z-index: -1; }
.workLife img { width: 40px; }
.workLife h4 { color: #000; }
.workLife p { color: #142641; }
.aboutWrapper { padding-right: 50px; }
.aboutWrapper .imgBox, .aboutWrapper .contentBox { width: 50%; }
.aboutWrapper .imgBox { background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; }
.aboutWrapper .imgBox:before { content: ""; position: absolute; bottom: -40px; left: 0; width: 50%; height: 40px; background-color: #142641; }
.aboutWrapper .contentBox { padding: 20px 0 20px 40px; }
.aboutWrapper .contentBox h4 { margin: 0 0 30px; }
.aboutWrapper .contentBox p { color: #666666; font-size: 15px; line-height: 30px; }
.missionWrap { background-color: #F9F9F9; padding: 5rem 0; }
.missionWrap .missionLeftBox { padding-right: 30px; }
.missionWrap .missionLeftBox h4 { margin: 0 0 30px; width: 90%; }
.missionWrap .missionLeftBox p { font-size: 15px; line-height: 30px; margin: 0; color: #666666; }
.missionWrap .missionRightBox { box-shadow: 0px 3px 10px #00000029; background: #fff url("../images/mission.png") no-repeat; background-position: 95% center; padding: 38px; border-radius: 8px; }
.missionWrap .missionRightBox h5 { font-size: 22px; font-weight: 600; margin: 0 0 16px; }
.missionWrap .missionRightBox p { font-size: 15px; line-height: 30px; margin: 0; color: #666666; }
/**********platform screen**********/
.platformBanner { height: 540px; background: url(../images/platform-banner-vector.png) no-repeat, url(../images/about-banner-dot.png) no-repeat, url(../images/about-banner-bg.png) no-repeat; background-position: 78% 62%, right 25%, -100px -65px; background-size: 420px, 75px, 114%; }
.platformBanner .bannerCaption h2 { max-width: 350px; width: 100%; }
.moduleCover { background: url("../images/noun-modules-bg.png") no-repeat; background-size: 180px; background-position: left top !important; }
.moduleCover .moduleCoverContent { width: 40%; margin: 0 auto; line-height: 30px; font-size: 15px; color: #142641; }
.platformModuleSlider { margin: 6rem 0 20px; position: relative; }
.platformModuleSlider:before { content: ""; background: url("../images/logo@2x.png") no-repeat; background-position: 42% 0; background-size: 80px; opacity: .4; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.platformModuleSlider .carousel-indicators { top: -30px; left: 0; bottom: auto; justify-content: start; margin: 0; }
.platformModuleSlider .carousel-indicators li { background-color: #9F9A9A; }
.platformModuleSlider .carousel-indicators li.active { background-color: #F15C2D; }
.platformModuleSlider .moduleCarouselItem .moduleCarLeftContent, .platformModuleSlider .moduleCarouselItem .moduleCarRightContent { width: 50%; }
.platformModuleSlider .moduleCarouselItem .moduleCarLeftContent i { font-size: 3rem; color: #F15C2D; }
.platformModuleSlider .moduleCarouselItem .moduleCarLeftContent h4 { margin: 30px 0 16px; line-height: 40px; }
.platformModuleSlider .moduleCarouselItem .moduleCarLeftContent p { line-height: 30px; margin-bottom: 35px; width: 85%; }
.platformTransformBg img { height: 400px; }
.platformTransformBg .transformBox { background: url("../images/platform-transformBg.jpg") no-repeat; background-position: center; background-size: cover; position: relative; }
.platformTransformBg .transformBox:before { content: ""; background: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; position: absolute; top: 0; left: 0; border-radius: 5px; }
.platformTransformBg .transformBox .transformContent { text-align: center; justify-content: center; }
.competWrapper { background-color: #F9F9F9; padding: 4rem 0; }
.competWrapper .comptHeading p { line-height: 30px; }
.competWrapper .competList { margin-right: -12px; margin-left: -12px; margin-top: 3rem; }
.competWrapper .competList .col-12 { padding-right: 8px; padding-left: 8px; display: flex; }
.competWrapper .competListBox { box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16); background-color: #fff; padding: 10px 10px 25px; border-radius: 5px; margin-bottom: 16px; flex-grow: 1; position: relative; transition: .8s; }
.competWrapper .competListBox:hover { background-color: #142641; color: #fff; }
.competWrapper .competListBox:hover .iconRound { background-color: #F15C2D; }
.competWrapper .competListBox .iconRound { border-radius: 50%; display: flex; align-items: center; justify-content: center; height: 35px; width: 35px; background-color: #142641; color: #fff; transition: .8s; }
.competWrapper .competListBox .iconRound i { font-size: 20px; }
.competWrapper .competListBox h6 { margin: 12px 0 20px; font-size: 15px; line-height: 22px; font-weight: 600; }
.competWrapper .competListBox .competArrow { position: absolute; bottom: 0; padding-bottom: 10px; padding-right: 10px; right: 0; width: 100%; z-index: 1; }
.transformWrap { padding: 3rem 0; }
/**************contact us***************/
.contactMainBanner { background: url("../images/contact-banner.png") no-repeat, url("../images/why-fox-dot.png") no-repeat; background-color: #f1f5fe; background-position: 82% 70%, right 25%; background-size: 600px, 75px; position: relative; }
.contactMainBanner:before { content: ""; position: absolute; left: -50px; bottom: -50px; width: 130px; height: 130px; border-radius: 50%; border: 18px solid #fff; }
.generalEnqWrap { padding: 4rem 0; }
.generalEnqWrap .enqLeft { padding-right: 30px; }
.generalEnqWrap .enqLeft h4 { margin: 0; }
.generalEnqWrap .enqLeft p { margin: 20px 0 0; color: #142641; line-height: 30px; }
.generalEnqWrap .getSuportRight { box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16); background: #fff url(../images/contact-support.png) no-repeat; background-position: 95% center; background-size: 190px; padding: 38px; border-radius: 8px; }
.generalEnqWrap .getSuportRight i, .generalEnqWrap .getSuportRight > a { color: #142641; }
.generalEnqWrap .getSuportRight i { display: block; font-size: 2rem; }
.generalEnqWrap .getSuportRight > a { display: block; font-size: 22px; margin: 15px 0 30px; font-weight: 600; }
.contactInfoWrapper { padding: 4rem 0; background-color: #F9F9F9; }
.contactInfoWrapper .ofcList { margin-top: 3rem; }
.contactInfoWrapper .ofcList .col-12 { display: flex; }
.contactInfoWrapper .ofcAddressBox { box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16); background-color: #fff; padding: 18px 18px 30px; border-radius: 5px; margin-bottom: 30px; flex-grow: 1; position: relative; transition: .8s; font-size: 15px; }
.contactInfoWrapper .ofcAddressBox, .contactInfoWrapper .ofcAddressBox a { color: #142641; }
.contactInfoWrapper .ofcAddressBox:hover { color: #fff; background-color: #142641; }
.contactInfoWrapper .ofcAddressBox:hover a { color: #fff; }
.contactInfoWrapper .ofcAddressBox h6 { font-size: 18px; margin-bottom: 20px; line-height: 30px; font-weight: 600; }
.contactInfoWrapper .ofcAddressBox .addressInfo { line-height: 30px; }
.contactInfoWrapper .ofcAddressBox .contactUsInfo { margin: 25px 0; padding: 0; }
.contactInfoWrapper .ofcAddressBox .contactUsInfo li { margin-bottom: 20px; }
.contactInfoWrapper .ofcAddressBox a { text-decoration: none; cursor: pointer; transition: .8s; line-height: 22px; }
.contactInfoWrapper .ofcAddressBox a i { font-size: 20px; }
.contactInfoWrapper .questionForms { margin-top: 3rem; }
.contactInfoWrapper .questionForms label { display: block; font-size: 20px; margin-bottom: 25px; line-height: 26px; }
.contactInfoWrapper .questionForms input, .contactInfoWrapper .questionForms textarea { width: 100%; background: #fff; border: 1px solid #CFCFCF; border-radius: 5px; padding: 8px 15px; font-size: 18px; outline: none; }
.questionForms input[type="submit"] { background-color: #F15C2D; color: #fff; border: 1px solid #F15C2D; transition: .8s; padding: 6px 26px; outline: none; font-weight: 600; display: inline-block; width: auto; }
.questionForms input[type="submit"]:hover { background-color: #FFF; color: #f15c2d; }
.questionForms textarea { resize: none; height: 120px; }
.wpcf7 .ajax-loader { position: absolute; }
/**************************************faq*****************/
.accordionStyle .card { margin-bottom: 20px; border: 0; border-radius: 0; overflow: unset; }
.accordionStyle .card-header { border-bottom: 0; padding: 10px 20px; background-color: #F0F4FF; }
.accordionStyle .card-header h5 { font-size: 18px; line-height: 28px; position: relative; top: -3px; }
.accordionStyle .card-header .accordBtn { font-size: 26px; padding: 0; line-height: 0; outline: none; border: 0; background: transparent; }
.accordionStyle .card-header .accordBtn[aria-expanded="true"] i:before { content: "\F0143"; }
.accordionStyle .card-body { box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16); }
.accordionStyle .card-body p { line-height: 30px; }
.faqWrapper { background: #fff url("../images/why-fox-dot.png") no-repeat; background-size: 75px; background-position: right 130px; padding: 8rem 0; }
.faqWrapper h1 { margin-bottom: 30px; }
.faqWrapper .faqContainer { width: 65%; margin: 0 auto; }
/************career screen***************/
.careerMainBanner { background: url("../images/career-banner.png") no-repeat, url("../images/why-fox-dot.png") no-repeat; background-color: #f1f5fe; background-position: 75% bottom, right 25%; background-size: 385px, 75px; position: relative; }
.careerMainBanner:before { content: ""; position: absolute; left: -50px; bottom: -50px; width: 130px; height: 130px; border-radius: 50%; border: 18px solid #fff; }
.careerWhyFox { padding: 4rem 0; }
.careerWhyFox h4 { margin-bottom: 3rem; }
.careerWhyFox .joinfox .col-12 { display: flex; }
.careerWhyFox .joinFoxList { box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16); padding: 15px; border-radius: 5px; margin-bottom: 30px; }
.careerWhyFox .joinFoxList .iconRound { border-radius: 50%; display: flex; align-items: center; justify-content: center; height: 35px; width: 35px; background-color: #142641; color: #fff; transition: .8s; }
.careerWhyFox .joinFoxList .iconRound i { font-size: 20px; }
.careerWhyFox .joinFoxList h5 { color: #142641; font-size: 22px; font-weight: 600; margin: 22px 0 10px; }
.careerWhyFox .joinFoxList p { color: #6F6F6F; line-height: 30px; }
.buildPlatformWrapper { padding: 4rem 0; background-color: #fbfbfb; }
.buildPlatformWrapper h3 { margin-bottom: 20px; }
.buildPlatformWrapper .viewOpenPosLink { display: block; color: #636363; margin-bottom: 3rem; font-weight: 600; }
.buildPlatformWrapper .accordionStyle .card-header h5 { top: 0; }
.buildPlatformWrapper .accordionStyle .card-body h6 { font-size: 20px; margin: 25px 0; }
.buildPlatformWrapper .accordionStyle .card-body ul { list-style: none; padding: 0; }
.buildPlatformWrapper .accordionStyle .card-body ul li { margin-bottom: 10px; line-height: 30px; position: relative; padding: 0 28px; }
.buildPlatformWrapper .accordionStyle .card-body ul li:before { content: "\2022"; color: #F15C2D; font-weight: 600; position: absolute; left: -10px; top: 7px; font-size: 32px; }
/************************request demo screen*****************/
.reqDemoForm, .setupBox .setupForm { margin-top: 60px; }
.reqDemoForm label, .setupBox .setupForm label { display: block; margin-bottom: 20px; color: #142641; font-size: 18px; }
.reqDemoForm input, .setupBox .setupForm input, .reqDemoForm select, .setupBox .setupForm select { border: 1px solid #CFCFCF; padding: 10px 15px; width: 100%; outline: none; background-color: #fff; }
.reqDemoForm .mobInputWrap, .setupBox .setupForm .mobInputWrap { display: flex; }
.reqDemoForm .mobInputWrap select, .setupBox .setupForm .mobInputWrap select { width: 58px; padding: 10px 6px; font-size: 15px; margin-right: 9px; }
.requestDemoWrapper { padding: 70px 0; display: flex; align-items: flex-start; }
.requestDemoWrapper .reqDemoLeftBox { width: 45%; padding: 100px 20px 30px 100px; }
.requestDemoWrapper .reqDemoLeftBox p { line-height: 30px; }
.requestDemoWrapper .reqDemoLeftBox h1 { margin-bottom: 25px; }
.requestDemoWrapper .reqDemoRightBox .topWrapper { background: #F15C2D; color: #fff; padding: 50px 60px 11rem; width: 60%; position: relative; z-index: 1; }
.requestDemoWrapper .reqDemoRightBox .topWrapper:before { content: ""; position: absolute; top: 0px; right: 0; height: 100%; width: 100%; background: #142641; border-radius: 0 0 520px 0; z-index: -1; }
.requestDemoWrapper .reqDemoRightBox .topWrapper h3 { font-size: 30px; font-weight: 600; margin-bottom: 25px; }
.requestDemoWrapper .reqDemoRightBox .topWrapper ul li { display: flex; font-size: 18px; margin-bottom: 20px; line-height: 32px; }
.requestDemoWrapper .reqDemoRightBox .topWrapper ul li span { margin: 0 10px 0 20px; }
.requestDemoWrapper .reqDemoRightBox .imgWrap { position: relative; padding-right: 60px; margin-top: -10rem; z-index: 2; }
/***********customer login************/
.customerLoginWrapper .cpmnyUrl input, .setupBox .cpmnyUrl input { border-radius: 5px 0 0 5px !important; }
.customerLoginWrapper .cpmnyUrl .urlExt, .setupBox .cpmnyUrl .urlExt { background-color: #142641; color: #fff; padding: 12px 16px; border-radius: 0 5px 5px 0; }
/**********************setup screen************/
.setupBox { padding: 10rem 0 4rem; width: 60%; margin: auto; }
.setupBox .setupForm .infobar { background-color: #F1F4FF; color: #2D2D2D; padding: 6px 15px 10px; line-height: 30px; width: 100%; margin-bottom: 40px; display: flex; align-items: center; justify-content: space-between; }
.setupBox .setupForm .infobar .closeBtn { background: transparent; border: 0; outline: none; font-size: 20px; color: #F15C2D; position: relative; top: 3px; }
.setupBox .setupForm p { line-height: 30px; }
.setupBox .billingBox h3 { font-size: 20px; font-weight: 600; }
.setupBox .paymentTab .smallText { color: #aeafaf; font-size: 14px; }
.setupBox .paymentTab .tab-content { padding: 20px 0; }
.setupBox .paymentTab .nav-link { padding: 10px 20px 16px; border-radius: 5px; color: #142641; margin-right: 15px; transition: .8s; }
.setupBox .paymentTab .nav-link.active, .setupBox .paymentTab .nav-link:hover { background-color: #F15C2D; color: #fff; }
.setupBox .paymentTab .cardDetail { border: 1px solid #D6D6D6; border-radius: 5px; padding: 10px; display: flex; width: 45%; margin-right: 20px; font-size: 13px; }
.setupBox .paymentTab .cardDetail img { width: 50px; margin-right: 15px; }
.setupBox .paymentTab .cardDetail span { margin-right: 12px; }
.setupBox .paymentTab .cardDetail .cardDelBtn { background: transparent; border: 1px solid #F15C2D; color: #F15C2D; padding: 8px 10px; border-radius: 5px; font-size: 20px; outline: none; }
.setupBox .paymentTab .addOtherCardDetail { text-align: center; width: 45%; border: 1px solid #D6D6D6; border-radius: 5px; padding: 10px; display: flex; align-items: center; justify-content: center; }
.setupBox .paymentTab .addOtherCardDetail span { line-height: 16px; position: relative; top: -2px; }
/**********************blog******************/
.blogMainBanner { background: url("../images/blog-vector.png") no-repeat, url("../images/why-fox-dot.png") no-repeat; background-color: #f1f5fe; background-position: 75% bottom, right 25%; background-size: 600px, 75px; position: relative; }
.blogMainBanner:before { content: ""; position: absolute; left: -50px; bottom: -50px; width: 130px; height: 130px; border-radius: 50%; border: 18px solid #fff; }
.blogWrap { padding: 70px 0 30px; }
.blogWrap h3 { margin-bottom: 50px; }
.blogWrap .blogBox { box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16); width: 100%; border-radius: 5px; margin-bottom: 30px; }
.blogWrap .blogBox .blogImgHolder { height: 150px; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 5px 5px 0 0; }
.blogWrap .blogBox .blogContent { padding: 12px 12px 15px; }
.blogWrap .blogBox .blogContent .blogerInfo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.blogWrap .blogBox .blogContent .blogerInfo img { width: 45px; height: 45px; border-radius: 50%; }
.blogWrap .blogBox .blogContent .blogerInfo h6 { font-size: 15px; color: #898888; font-weight: 600; margin: 0; }
.blogWrap .blogBox .blogContent .blogerInfo .blogTime { font-size: 14px; font-weight: 600; color: #898888; }
.blogWrap .blogBox .blogContent .blogHeading { font-size: 18px; font-weight: 600; margin: 10px 0 5px; color: #142641; }
.blogWrap .blogBox .blogContent p { color: #898888; font-size: 14px; margin-bottom: 15px; line-height: 30px; }
.blogWrap .blogBox .blogContent .readMoreLink { color: #F15C2D; display: block; font-weight: 600; }
/***********************blog detail page********************/
.blogDetailWrapper { padding: 70px 0 50px; }
.blogDetailWrapper .backHomeLink { font-size: 18px; color: #142641; display: inline-block; margin-bottom: 4rem; }
.blogDetailWrapper .backHomeLink, .blogDetailWrapper .backHomeLink i { transition: .8s; }
.blogDetailWrapper .backHomeLink i { color: #898888; margin-right: 2px; font-size: 28px; position: relative; top: 4px; }
.blogDetailWrapper .backHomeLink:hover, .blogDetailWrapper .backHomeLink:hover i { color: #F15C2D; }
.blogDetailWrapper .blogDetailContent h3 { margin-bottom: 22px; }
.blogDetailWrapper .blogDetailContent p { color: #142641; font-size: 16px; line-height: 32px; margin-bottom: 40px; }
.blogDetailWrapper .blogDetailContent .blogerInfo { display: flex; align-items: center; justify-content: space-between; }
.blogDetailWrapper .blogDetailContent .blogerInfo img { width: 45px; height: 45px; border-radius: 50%; }
.blogDetailWrapper .blogDetailContent .blogerInfo h6 { font-size: 15px; color: #898888; font-weight: 600; margin: 0; }
.blogDetailWrapper .blogDetailContent .blogerInfo .blogTime { font-size: 14px; font-weight: 600; color: #898888; }
.recentBlogPost { background-color: #F9F9F9; padding: 70px 0; }
.contentSize p { color: #142641; font-size: 16px; line-height: 32px; }
.contentSize h3 { font-size: 25px; margin: 25px 0; }
.contentSize h2, .contentSize h3, .contentSize h4, .contentSize h5 { font-weight: 600; }
.contentSize h2 { font-size: 30px; margin: 0px 0 40px; }
.contentSize h4 { font-size: 20px; }
.contentSize h5 { font-size: 18px; }
.contentSize .contentList { margin: 20px 0 35px; }
.contentSize .contentList li { line-height: 30px; margin-bottom: 5px; }
/*************************pricing page***************/
.pricingBanner { background: url("../images/why-fox-dot.png") no-repeat; background-color: #f1f5fe; background-position: right 25%; background-size: 75px; position: relative; /*height: 480px;*/height:360px; display: flex; align-items: center; justify-content: center; }
.pricingBanner .bannerCaption { text-align: center; max-width: 600px; width: 100%; }
.pricingBanner .bannerCaption h1 { font-size: 22px; font-weight: 500; }
.pricingBanner .bannerCaption h2 { margin: 18px 0 20px; }
.pricingBanner .bannerCaption p { color: #2D2D2D; line-height: 30px; }
.billingCycleWrapper { /*padding: 70px 0 50px;*/padding:0px 0 50px; position: relative; }
.billingCycleWrapper:before { content: ""; position: absolute; left: -50px; top: 280px; width: 130px; height: 130px; border-radius: 50%; border: 18px solid #fff; }
.billingCycleWrapper:after { content: ""; position: absolute; top: 0; left: 0; background-color: #E6EBFE; width: 100%; height: 350px; z-index: -1; }
.billingCycleWrapper .billingCycleBox { width: 80%; /*margin: 30px auto 10px;*/margin: 0px auto 10px; }
.billingCycleWrapper .billingCycleBox .billingBottomDetailRow .col-12 { display: flex; }
.billingCycleWrapper .billingCycleBox .billingBottomDetail { padding: 15px; color: #fff; border-radius: 5px; }
.billingCycleWrapper .billingCycleBox .billingBottomDetail .iconRound { border-radius: 50%; display: flex; align-items: center; justify-content: center; height: 35px; width: 35px; background-color: #142641; color: #fff; transition: .8s; font-size: 18px; }
.billingCycleWrapper .billingCycleBox .billingBottomDetail h6 { font-size: 18px; margin: 20px 0; font-weight: 600; line-height: 30px; }
.billingCycleWrapper .billingCycleBox .billingBottomDetail p { line-height: 28px; }
.billingCycleWrapper .billingCycleBox .billingBottomDetail.blueBg { background-color: #142641; }
.billingCycleWrapper .billingCycleBox .billingBottomDetail.blueBg .iconRound { background-color: #F15C2D; font-size: 22px; }
.billingCycleWrapper .billingCycleBox .billingBottomDetail.orangeBg { background-color: #F15C2D; }
/* .billingCycleWrapper .billingDetailTab { margin: 40px 0 55px; } */
.billingCycleWrapper .billingDetailTab { margin: 32px 0 55px; }
/* .billingCycleWrapper .billingDetailTab .nav { justify-content: center; margin-bottom: 45px; } */
.billingCycleWrapper .billingDetailTab .nav { justify-content: center; margin-bottom: 10px; }
.billingCycleWrapper .billingDetailTab .nav-link { padding: 10px 20px 16px; border-radius: 5px; color: #142641; margin-right: 15px; transition: .8s; }
.billingCycleWrapper .billingDetailTab .nav-link.active, .billingCycleWrapper .billingDetailTab .nav-link:hover { background-color: #F15C2D; color: #fff; }
.billingCycleWrapper .billingDetailTab .tab-content { padding: 20px 0; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxParent { display: flex; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft { padding: 25px 35px; background-color: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); border-radius: 10px 0px 0px 10px; width: 50%; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft .fileVectorImg { width: 55px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft .priceWrap { margin-top: 5px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft .priceWrap span { font-size: 15px; line-height: 25px; color: #696969; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft .priceWrap h5 { color: #F15C2D; font-weight: 600; font-size: 35px; margin: 0; line-height: 28px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft .priceWrap h5 span { font-size: 22px; color: #2D2D2D; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft ul { margin-top: 30px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft ul li { margin-bottom: 20px; color: #2D2D2D; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft ul li span { margin-left: 20px; line-height: 24px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft ul li i { font-size: 22px; position: relative; top: 4px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight { padding: 10px 35px; background-color: #142641; color: #fff; width: 50%; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); position: relative; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight:before, .billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight:after { background-color: #142641; width: 100%; height: 33px; content: ""; position: absolute; left: 0; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight:before { border-radius: 10px 10px 0 0; top: -30px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight:after { border-radius: 0 0 10px 10px; bottom: -30px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight .fontBg { color: rgba(255, 255, 255, 0.15); font-size: 80px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight h4 { font-size: 22px; margin: 30px 0; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight .priceWrap span { font-size: 15px; line-height: 25px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight .priceWrap h5 { color: #F15C2D; font-weight: 600; font-size: 35px; margin: 0; line-height: 28px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight .priceWrap h5 span { font-size: 22px; color: #fff; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight p { font-size: 20px; line-height: 30px; margin: 30px 0 34px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight ul li { margin-bottom: 20px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight ul li span { margin-left: 20px; line-height: 24px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight ul li i { font-size: 22px; position: relative; top: 4px; }
.calculateModalStyle .navTabStyle .nav { margin-bottom: 10px; }
.calculateModalStyle .navTabStyle .nav-link { padding: 10px 20px 16px; border-radius: 5px; color: #142641; margin-right: 15px; transition: .8s; }
.calculateModalStyle .navTabStyle .nav-link.active, .calculateModalStyle .navTabStyle .nav-link:hover { background-color: #F15C2D; color: #fff; }
.calculateModalStyle .navTabStyle .tab-content { padding: 20px 0; }
.calculateModalStyle .navTabStyle .tab-content .labelInfoStyle { font-size: 18px; color: #000; line-height: 26px; margin-bottom: 15px; }
.calculateModalStyle .navTabStyle .tab-content .employeCount input { width: 100%; background: #fff; border: 1px solid #CFCFCF; border-radius: 5px; padding: 8px 15px; font-size: 18px; outline: none; }
.calculateModalStyle .navTabStyle .tab-content .smallTextInfo { color: #696969; font-size: 12px; }
.calculateModalStyle .navTabStyle .tab-content .infoMsg { font-size: 13px; line-height: 18px; color: #000; }
.calculateModalStyle .navTabStyle .tab-content .infoMsg i { color: #6D6D6D; }
.calculateModalStyle .navTabStyle .tab-content .customCheckbox { margin-bottom: 16px; }
.calculateModalStyle .navTabStyle .tab-content .customCheckbox input[type=checkbox] + label { cursor: pointer; line-height: 16px; padding-left: 40px; position: relative; margin: 0; font-size: 14px; color: #0A0A0A; }
.calculateModalStyle .navTabStyle .tab-content .customCheckbox input[type=checkbox] + label span { color: #999999; display: block; font-size: 12px; line-height: 20px; }
.calculateModalStyle .navTabStyle .tab-content .customCheckbox input[type=checkbox] { display: none; }
.calculateModalStyle .navTabStyle .tab-content .customCheckbox input[type=checkbox] + label:before { content: "\2714"; border-radius: 5px; display: inline-block; width: 30px; height: 30px; border: 1px solid #CFCFCF; padding-left: 0.2em; padding-bottom: 0.3em; margin-right: 0.2em; vertical-align: bottom; color: transparent; transition: .2s; position: absolute; left: 0; font-size: 24px; }
.calculateModalStyle .navTabStyle .tab-content .customCheckbox input[type=checkbox] + label:active:before { transform: scale(0); }
.calculateModalStyle .navTabStyle .tab-content .customCheckbox input[type=checkbox]:checked + label:before { background-color: #F15C2D; border-color: #F15C2D; color: #fff; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle { border-radius: 10px; background-color: #142641; padding: 30px 20px; color: #fff; font-size: 18px; position: relative; overflow: hidden; margin-bottom: 20px; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle:before { content: ""; position: absolute; right: -67px; bottom: -30px; width: 130px; height: 130px; border-radius: 50%; border: 16px solid #2c3b54; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle:after { content: "\F0007"; display: inline-block; font: normal normal normal 24px/1 "Material Design Icons"; text-rendering: auto; line-height: inherit; -webkit-font-smoothing: antialiased; position: absolute; top: 15px; left: 15px; font-size: 5.5rem; color: #2c3b54; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle p { margin: 0; line-height: 30px; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle p i { color: #F15C2D; font-size: 20px; position: relative; top: 3px; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle p, .calculateModalStyle .navTabStyle .tab-content .pricingCardStyle .billedAnnualSpan { font-size: 14px; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle div, .calculateModalStyle .navTabStyle .tab-content .pricingCardStyle span { margin-bottom: 30px; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle .billedAnnualSpan { margin-bottom: 20px; display: block; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle h5 { font-size: 30px; color: #F15C2D; font-weight: 600; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle h5 span { color: #fff; font-size: 20px; }
.calculateModalStyle .modal-header { border-bottom: 0; padding: 25px 25px 12px; }
.calculateModalStyle .modal-header .close { outline: none; }
.calculateModalStyle .modal-title { font-size: 24px; font-weight: 600; }
.calculateModalStyle .modal-body { padding: 20px 25px 20px; }
.calculateModalStyle .modal-footer { border-top: 0; padding: 0 25px 25px; }

/***************************
***********medias***************
******************************
****************/
@media (min-width: 576px) {
.modal-dialog { max-width: 760px; }
}
@media (min-width: 1680px) {
.blogWrap .blogListing .col-xl-4 { flex: 0 0 25%; max-width: 25%; }
.blogWrap .blogBox .blogImgHolder { height: 230px; }
.blogWrap .blogBox .blogContent { padding: 15px 15px 20px; }
.blogWrap .blogBox .blogContent .blogHeading { font-size: 22px; margin: 25px 0 12px; }
.blogWrap .blogBox .blogContent .blogerInfo img { width: 50px; height: 50px; }
.blogWrap .blogBox .blogContent .blogerInfo h6 { font-size: 20px; margin-left: 10px; }
.blogWrap .blogBox .blogContent p, .blogWrap .blogBox .blogContent .blogerInfo .blogTime { font-size: 18px; }
}
@media (min-width: 1600px) {
.calculateModalStyle .modal-lg { max-width: 1300px; }
.calculateModalStyle .navTabStyle .nav-link, .billingCycleWrapper .billingDetailTab .nav-link { padding: 15px 26px 25px; }
.calculateModalStyle .navTabStyle .nav-link, .calculateModalStyle .navTabStyle .tab-content .labelInfoStyle, .billingCycleWrapper .billingDetailTab .nav-link { font-size: 24px; }
.calculateModalStyle .modal-title { font-size: 36px; }
.calculateModalStyle .modal-header { padding: 30px 40px 20px; }
.calculateModalStyle .modal-header .close { font-size: 32px; }
.calculateModalStyle .modal-body { padding: 25px 40px; }
.calculateModalStyle .modal-footer { padding: 10px 40px 35px; }
.calculateModalStyle .modal-footer .orangeBtn, .calculateModalStyle .modal-footer .orangeWhiteBtn, .calculateModalStyle .modal-footer .requestDemoBtn, .calculateModalStyle .modal-footer .calculateBtn, .calculateModalStyle .modal-footer .transBtn { font-size: 24px; }
.calculateModalStyle .navTabStyle .tab-content .labelInfoStyle, .calculateModalStyle .navTabStyle .tab-content .customCheckbox { margin-bottom: 25px; }
.calculateModalStyle .navTabStyle .tab-content .customCheckbox input[type=checkbox] + label { cursor: pointer; line-height: 20px; padding-left: 60px; font-size: 18px; }
.calculateModalStyle .navTabStyle .tab-content .customCheckbox input[type=checkbox] + label span { font-size: 16px; line-height: 28px; }
.calculateModalStyle .navTabStyle .tab-content .customCheckbox input[type=checkbox] + label:before { width: 45px; height: 45px; }
.calculateModalStyle .navTabStyle .tab-content .infoMsg, .calculateModalStyle .navTabStyle .tab-content .smallTextInfo { font-size: 15px; line-height: 30px; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle { padding: 40px 25px; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle, .calculateModalStyle .navTabStyle .tab-content .pricingCardStyle h5 span { font-size: 26px; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle div, .calculateModalStyle .navTabStyle .tab-content .pricingCardStyle span { margin-bottom: 45px; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle h5 { font-size: 40px; }
.calculateModalStyle .navTabStyle .tab-content .pricingCardStyle p, .calculateModalStyle .navTabStyle .tab-content .pricingCardStyle .billedAnnualSpan { font-size: 20px; line-height: 30px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight .fontBg { font-size: 120px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft .fileVectorImg { width: auto; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft .priceWrap h5, .billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight .priceWrap h5 { font-size: 40px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft .priceWrap span, .billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight .priceWrap span { font-size: 16px; line-height: 30px; }
.billingCycleWrapper .billingCycleBox .billingBottomDetail h6 { font-size: 20px; }
.billingCycleWrapper .billingCycleBox .billingBottomDetail { padding: 20px; }
body, .mainSlider .leftSliderCaption p, .mainSlider .rightSliderCaption p, .testimonialWrap .testmonialBox .position, .competWrapper .competListBox h6 { font-size: 20px; }
.mainBanner, .contactMainBanner, .careerMainBanner, .blogMainBanner { height: 750px; }
.whyFoxBanner:before, .contactMainBanner:before { left: -60px; bottom: -60px; width: 175px; height: 175px; border: 26px solid #fff; }
.mainSlider, .whyFoxBanner, .decisionWrapper, .mainSlider .carousel-item, .generalEnqWrap .getSuportRight, .contactMainBanner, .faqWrapper, .careerMainBanner, .blogMainBanner { background-size: auto; }
.aboutBanner, .platformBanner { background-size: auto, auto, 112%; }
.headerLogo img, .decisionWrapper .decisionTitle img, .topFooter img, .navFixedTop .fixedLogo, .workLife img, .testimonialWrap .testRightLogo img { width: auto; }
.testimonialWrap { padding: 5rem 0; }
.testimonialWrap .testmonialBox { padding: 20px 25px; }
.orangeBtn, .orangeWhiteBtn, .requestDemoBtn, .calculateBtn, .transBtn, .requestDemoBtn, .calculateBtn, .transBtn, .contactInfoWrapper .ofcAddressBox, .setupBox .setupForm .infobar { font-size: 18px; }
.orangeBtn, .orangeWhiteBtn, .requestDemoBtn, .calculateBtn, .transBtn, .requestDemoBtn, .calculateBtn, .transBtn { font-weight: 600; padding: 10px 26px; }
.mainSlider .rightSliderCaption h1 { font-size: 58px; line-height: 72px; }
.mainSlider .leftSliderCaption p, .mainSlider .rightSliderCaption p, .contactInfoWrapper .ofcAddressBox .addressInfo { line-height: 32px; }
.transformBox .transformContent h5, .topFooter h5, .whyFoxWrapper .topSection h5, .testRightContent h4, .decisionWrapper .decisionTitle h2, .mainBanner .bannerCaption h2, .contactMainBanner .bannerCaption h2, .careerMainBanner .bannerCaption h2, .blogMainBanner .bannerCaption h2, .whyFoxList .leftBox h4, .visionWrap h4, .workLife h4, .aboutWrapper .contentBox h4, .missionWrap .missionLeftBox h4, .moduleCover h4, .competWrapper h4, .generalEnqWrap .enqLeft h4, .contactInfoWrapper h4, .faqWrapper h1, .careerWhyFox h4, .buildPlatformWrapper h3, .requestDemoWrapper .reqDemoLeftBox h1, .setupBox h1, .blogWrap h3, .blogDetailWrapper .blogDetailContent h3, .pricingBanner .bannerCaption h2, .billingCycleWrapper h3 { font-size: 58px; line-height: 74px; }
.empAppWrap .empSliderCaption h4 { font-size: 58px; line-height: 56px; }
.decisionWrapper { background: url(../images/decison-bg2.png) no-repeat; background-position: 62% 28%; }
.decisionWrapper.decisionWrapper:before { right: -120px; top: 79px; width: 285px; height: 285px; border: 32px solid #f7f7f7; }
.decisionWrapper .decisionTitle h2 { max-width: 730px; }
.decisionWrapper .topMobScreenImg img { position: relative; right: -170px; top: 160px; }
.decisionWrapper img { width: auto; }
.decisionWrapper .decisionImages { margin-top: -120px; }
.empAppWrap .empSliderCaption i, .testimonialWrap .testRightContent i, .whyFoxWrapper .topSection i, .whyFoxWrapper .whyFoxBottom .whyFoxGrid i, .transformBox .transformContent i { font-size: 66px; }
.empAppWrap .empSliderCaption h3 { font-weight: 600; margin: 55px 0 38px; }
.empAppWrap .empSliderCaption h3, .mainBanner .bannerCaption h1, .contactMainBanner .bannerCaption h1, .careerMainBanner .bannerCaption h1, .blogMainBanner .bannerCaption h1, .requestDemoWrapper .reqDemoRightBox .topWrapper h3, .blogDetailWrapper .backHomeLink i { font-size: 36px; }
.empAppWrap .empSliderCaption p, .platformModuleSlider .moduleCarouselItem .moduleCarLeftContent p { line-height: 48px; margin: 45px 0 55px; }
.empAppWrap .empSliderCaption p, .whyFoxWrapper .whyFoxBottom .whyFoxGrid h6, .moduleCover .moduleCoverContent, .platformModuleSlider .moduleCarouselItem .moduleCarLeftContent p, .comptHeading p, .requestDemoWrapper .reqDemoRightBox .topWrapper ul li i, .setupBox .billingBox h3, .blogDetailWrapper .backHomeLink { font-size: 28px; }
.empAppWrap .carousel-indicators li { height: 40px; }
.empAppWrap .carousel-indicators li span { font-size: 30px; margin-top: -8px; }
.empAppWrap .carousel-indicators li { margin-bottom: 58px; }
.empAppWrap { padding: 5rem 0 5rem 50px; }
.empAppWrap .empSliderImg { padding-top: 45px; max-height: 660px; }
.empAppWrap .empSliderImg:before { height: 45px; }
.gridPadding { padding-left: 110px; padding-right: 110px; }
.testimonialWrap .quoteIcon { width: 100px; }
.testimonialWrap .testmonialBox .testUserName, .contactInfoWrapper .ofcAddressBox h6, .contactInfoWrapper .questionForms input, .contactInfoWrapper .questionForms textarea, .bottomFooter p { font-size: 24px; }
.testimonialWrap .testmonialBox .position { margin-bottom: 18px; }
.testimonialWrap .testmonialBox .compName, .setupBox .paymentTab .cardDetail { font-size: 16px; }
.testimonialWrap .testmonialBox p { font-size: 16px; }
.testimonialWrap .testRightContent p { margin-bottom: 45px; }
.testimonialWrap .testRightContent p, .whyFoxList .leftBox p, .accordionStyle .card-header h5 { font-size: 28px; line-height: 48px; }
.whyFoxWrapper .topSection p { font-size: 32px; }
.whyFoxWrapper .whyFoxBottom .whyFoxGrid h6, .moduleCover .moduleCoverContent { line-height: 42px; }
.whyFoxWrapper .whyFoxBottom .whyFoxGrid p, .midFooter ul li, .careerWhyFox .joinFoxList p { line-height: 32px; font-size: 18px; }
.transformBox .transformContent h5 { max-width: 500px; width: 100%; }
.midFooter ul li { padding: 10px 0; }
.bottomFooter p { line-height: 48px; }
.mainBanner .bannerCaption, .contactMainBanner .bannerCaption, .careerMainBanner .bannerCaption, .blogMainBanner .bannerCaption { max-width: 580px; }
.mainBanner .bannerCaption h2, .contactMainBanner .bannerCaption h2, .careerMainBanner .bannerCaption h2, .blogMainBanner .bannerCaption h2 { margin: 28px 0 45px; }
.mainBanner .bannerCaption p, .contactMainBanner .bannerCaption p, .careerMainBanner .bannerCaption p, .blogMainBanner .bannerCaption p, .contactInfoWrapper .questionForms label, .requestDemoWrapper .reqDemoLeftBox p, .requestDemoWrapper .reqDemoLeftBox .reqDemoForm label, .requestDemoWrapper .reqDemoLeftBox .setupBox .setupForm label, .setupBox .requestDemoWrapper .reqDemoLeftBox .setupForm label, .setupBox .setupForm label { font-size: 28px; }
.mainBanner .bannerCaption p, .contactMainBanner .bannerCaption p, .careerMainBanner .bannerCaption p, .blogMainBanner .bannerCaption p { line-height: 32px; }
.whyFoxList .leftBox { padding: 110px; }
.whyFoxList .leftText:before, .whyFoxList .rightText:before { width: 50px; height: 100px; }
.whyFoxList .leftBox i, .platformModuleSlider .moduleCarouselItem .moduleCarLeftContent i { font-size: 86px; }
.aboutBanner .bannerCaption p, .platformBanner .bannerCaption p { margin-bottom: 40px; }
.aboutBanner .bannerList span, .platformBanner .bannerList span { font-size: 16px; font-weight: 600; }
.visionWrap p, .workLife p { width: 60%; }
.missionWrap .missionLeftBox p, .visionWrap p, .workLife p, .missionWrap .missionRightBox p, .aboutWrapper .contentBox p { line-height: 48px; }
.missionWrap .missionLeftBox p, .visionWrap p, .workLife p, .mainBanner .bannerCaption p, .contactMainBanner .bannerCaption p, .careerMainBanner .bannerCaption p, .blogMainBanner .bannerCaption p, .missionWrap .missionRightBox p, .aboutWrapper .contentBox p, .generalEnqWrap .enqLeft p, .midFooter h6, .buildPlatformWrapper .viewOpenPosLink, .careerWhyFox .joinFoxList h5, .blogDetailWrapper .blogDetailContent p, .contentSize p { font-size: 28px; }
.contentSize p { line-height: 56px; margin-bottom: 30px; }
.contentSize h3 { font-size: 42px; margin: 50px 0; }
.contentSize h4 { font-size: 35px; font-weight: 600; }
.blogDetailWrapper .blogDetailContent p { line-height: 56px; margin-bottom: 50px; }
.blogDetailWrapper .blogDetailContent .blogerInfo .blogTime, .blogDetailWrapper .blogDetailContent .blogerInfo h6 { font-size: 16px; }
.workLife { background-position: left center; background-size: 92px; }
.missionWrap .missionRightBox h5 { font-size: 44px; }
.missionWrap .missionRightBox { background-size: 130px; padding: 65px; }
.aboutWrapper .contentBox p { margin-bottom: 35px; }
.aboutWrapper .imgBox:before { bottom: -55px; height: 55px; }
.aboutWrapper { padding-right: 110px; padding-top: 90px !important; padding-bottom: 90px !important; }
.aboutWrapper .contentBox { padding: 20px 0 20px 55px; }
.platformBanner .bannerCaption h2 { max-width: 100%; }
.workLife, .moduleCover { background-size: auto; }
.platformModuleSlider .moduleCarouselItem .moduleCarLeftContent h4 { margin: 50px 0 16px; }
.competWrapper .competListBox h6 { margin: 20px 0; line-height: 28px; }
.transformWrap { padding: 5rem 0; }
.competWrapper .competListBox .iconRound { height: 40px; width: 40px; }
.platformModuleSlider { margin: 10rem 0 25px; }
.platformModuleSlider:before { background-size: auto; }
.generalEnqWrap .getSuportRight { padding: 70px 50px; }
.generalEnqWrap .getSuportRight i { font-size: 48px; }
.generalEnqWrap .getSuportRight > a { font-size: 46px; margin: 32px 0 38px; }
.generalEnqWrap .enqLeft p { line-height: 56px; }
.contactInfoWrapper .questionForms input, .contactInfoWrapper .questionForms textarea, .calculateModalStyle .navTabStyle .tab-content .employeCount input { padding: 18px 20px; }
.accordionStyle .card-body p { font-size: 18px; }
.buildPlatformWrapper .accordionStyle .card-body h6, .accordionStyle .card-body p { line-height: 36px; }
.buildPlatformWrapper .accordionStyle .card-body h6, .calculateModalStyle .navTabStyle .tab-content .employeCount input { font-size: 24px; }
.requestDemoWrapper { padding: 105px 0; }
.requestDemoWrapper .reqDemoLeftBox .reqDemoForm label, .requestDemoWrapper .reqDemoLeftBox .setupBox .setupForm label, .setupBox .requestDemoWrapper .reqDemoLeftBox .setupForm label, .setupBox .setupForm label { margin-bottom: 32px; }
.requestDemoWrapper .reqDemoLeftBox .reqDemoForm input, .requestDemoWrapper .reqDemoLeftBox .setupBox .setupForm input, .setupBox .requestDemoWrapper .reqDemoLeftBox .setupForm input, .requestDemoWrapper .reqDemoLeftBox .reqDemoForm select, .requestDemoWrapper .reqDemoLeftBox .setupBox .setupForm select, .setupBox .requestDemoWrapper .reqDemoLeftBox .setupForm select, .setupBox .setupForm input, .setupBox .setupForm select { padding: 18px 20px; }
.requestDemoWrapper .reqDemoLeftBox .reqDemoForm .mobInputWrap select, .requestDemoWrapper .reqDemoLeftBox .setupBox .setupForm .mobInputWrap select, .setupBox .requestDemoWrapper .reqDemoLeftBox .setupForm .mobInputWrap select, .setupBox .setupForm .mobInputWrap select { width: 90px; padding: 10px; font-size: 18px; margin-right: 12px; }
.requestDemoWrapper .reqDemoLeftBox { width: 36%; padding: 100px 40px 30px 100px; }
.requestDemoWrapper .reqDemoForm .mb-4, .requestDemoWrapper .setupBox .setupForm .mb-4, .setupBox .requestDemoWrapper .setupForm .mb-4, .setupBox .setupForm .mb-4 { margin-bottom: 45px !important; }
.requestDemoWrapper .reqDemoForm .orangeBtn, .requestDemoWrapper .setupBox .setupForm .orangeBtn, .setupBox .requestDemoWrapper .setupForm .orangeBtn, .requestDemoWrapper .reqDemoForm .orangeWhiteBtn, .requestDemoWrapper .setupBox .setupForm .orangeWhiteBtn, .setupBox .requestDemoWrapper .setupForm .orangeWhiteBtn, .requestDemoWrapper .reqDemoForm .requestDemoBtn, .requestDemoWrapper .setupBox .setupForm .requestDemoBtn, .setupBox .requestDemoWrapper .setupForm .requestDemoBtn, .requestDemoWrapper .reqDemoForm .calculateBtn, .requestDemoWrapper .setupBox .setupForm .calculateBtn, .setupBox .requestDemoWrapper .setupForm .calculateBtn, .requestDemoWrapper .reqDemoForm .transBtn, .requestDemoWrapper .setupBox .setupForm .transBtn, .setupBox .requestDemoWrapper .setupForm .transBtn, .setupBox .setupForm .orangeBtn, .setupBox .setupForm .orangeWhiteBtn, .setupBox .setupForm .requestDemoBtn, .setupBox .setupForm .calculateBtn, .setupBox .setupForm .transBtn { font-size: 24px; }
.requestDemoWrapper .reqDemoLeftBox p { line-height: 42px; }
.requestDemoWrapper .reqDemoRightBox .topWrapper ul li span, .setupBox .paymentTab .addOtherCardDetail { font-size: 22px; }
.customerLoginWrapper .cpmnyUrl .urlExt, .setupBox .cpmnyUrl .urlExt { padding: 20px 30px; }
.setupBox .paymentTab .addOtherCardDetail span, .setupBox .paymentTab .nav-link, .setupBox .paymentTab .cardDetail .cardDelBtn, .setupBox .blackBtn, .setupBox .blueBtn { font-size: 24px; }
.setupBox .blackBtn, .setupBox .blueBtn { padding: 14px 55px 11px; }
.setupBox .paymentTab .nav-link { padding: 18px 30px 26px; margin-right: 20px; }
.setupBox .paymentTab .cardDetail img { width: 70px; margin-right: 18px; }
.setupBox .paymentTab .cardDetail .cardDelBtn { padding: 10px 14px; }
.setupBox .paymentTab .cardDetail, .setupBox .paymentTab .addOtherCardDetail { padding: 18px; }
.setupBox .paymentTab .smallText { font-size: 18px; margin-top: 14px; }
.blogDetailWrapper .backHomeLink i { top: 2px; }
.contactMainBanner { background-position: 82% 80%, right 25%; }
}
@media only screen and (min-width: 992px) and (max-width: 1250px) {
.navBarWrapper .gridPadding { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 1250px) {
.platformModuleSlider { margin: 8rem 0 20px; }
.platformModuleSlider .carousel-indicators { top: -44px; }
.requestDemoWrapper .reqDemoLeftBox { max-width: 400px; width: 100%; }
}
@media (max-width: 1165px) {
.aboutBanner, .platformBanner { background-size: 370px, 55px, cover; }
.mainSlider .carousel-item { background-size: 320px; }
.navFixedTop .navbar-nav .nav-link { font-size: 15px; }
.navFixedTop .transBtn, .navFixedTop .orangeBtn, .navFixedTop .orangeWhiteBtn, .navFixedTop .requestDemoBtn, .navFixedTop .calculateBtn, .navFixedTop .transBtn { padding: 6px 15px; }
.navFixedTop .gridPadding { padding-left: 25px; padding-right: 25px; }
.setupBox .paymentTab .cardDetail .cardDelBtn { padding: 6px 8px; }
}
@media (max-width: 1080px) {
body { font-size: 15px; }
.navBarWrapper .navbar-nav .nav-link { margin: 0px 4px; }
.orangeBtn, .orangeWhiteBtn, .requestDemoBtn, .calculateBtn, .transBtn, .requestDemoBtn, .calculateBtn, .transBtn { padding: 6px 15px; }
.fixedSocialIcons { left: 6px; }
.empAppWrap .carousel-inner { padding-left: 85px; }
.setupBox { width: 70%; }
}
@media (max-width: 991px) {
.navFixedTop .gridPadding { padding-left: 0; padding-right: 0; }
.headerRightSection { position: absolute; top: 14px; right: 125px; }
/* .headerRightSection { position: absolute; top: 14px; right: 29% !important; } */

.navBarWrapper { padding: 10px 75px; }
.navbar-nav { background: #fff; padding: 10px; }
.mainBanner, .contactMainBanner, .careerMainBanner, .blogMainBanner { height: 500px; }
.aboutBanner, .platformBanner { background-size: 290px, 60px, cover; }
.platformBanner { background-size: 370px, 60px, cover; background-position: 78% 62%, right 30%, -140px -65px; }
.mainBanner .bannerCaption, .contactMainBanner .bannerCaption, .careerMainBanner .bannerCaption, .blogMainBanner .bannerCaption { margin-left: 75px; }
.visionWrap p, .workLife p { width: 70%; }
.gridPadding { padding-left: 70px; padding-right: 70px; }
.whyFoxBanner, .contactMainBanner, .careerMainBanner { background-size: 380px, 75px; }
.requestDemoWrapper .reqDemoRightBox .topWrapper { padding: 40px 43px 11rem; width: 68%; }
.requestDemoWrapper .reqDemoRightBox .topWrapper ul li { font-size: 16px; margin-bottom: 10px; }
.requestDemoWrapper { padding: 70px 0 40px; }
.requestDemoWrapper .reqDemoLeftBox { max-width: 360px; padding: 80px 20px 30px 70px; }
}
@media (max-width: 920px) {
.whyFoxWrapper .whyFoxBottom { flex-wrap: wrap; justify-content: space-around; }
.whyFoxWrapper .whyFoxBottom .whyFoxGrid { width: 48%; }
.whyFoxWrapper .whyFoxBottom .whyFoxGrid:nth-child(2) { margin-right: 0; }
.transformBox .transformContent i { margin-bottom: .7rem;
}
.transformBox .transformContent h5 { margin-bottom: 12px; line-height: 35px; }
.whyFoxList .rightBox { margin: 0 50px; }
.rightBox img { visibility: hidden; display: block !important; }
.workLife { background-position: left center, 112% center; background-size: 66px, 130px; }
.billingCycleWrapper .billingCycleBox { width: 95%; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight .priceWrap h5, .billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft .priceWrap h5 { font-size: 30px; }
.setupBox { width: 80%; }
}
@media (max-width: 767px) {
.mainSlider .carousel-item { background-size: 240px; background-position: center 45%; }
.mainSlider .carousel-caption .d-flex { flex-wrap: wrap; }
.mainSlider .leftSliderCaption { padding: 40px 60px; width: 100%; }
.mainSlider .leftSliderCaption p { width: 100%; line-height: 22px; }
.mainSlider .rightSliderCaption { width: 100%; padding: 130px 60px 10px; }
.mainSlider .rightSliderCaption h1 { font-size: 30px; line-height: 30px; }
.mainSlider .rightSliderCaption p { margin: 10px 0 18px; line-height: 22px; }
.transformBox .transformContent h5, .topFooter h5, .whyFoxWrapper .topSection h5, .testRightContent h4, .decisionTitle h2, .empAppWrap .empSliderCaption h4, .mainBanner .bannerCaption h2, .contactMainBanner .bannerCaption h2, .careerMainBanner .bannerCaption h2, .blogMainBanner .bannerCaption h2, .whyFoxList .leftBox h4, .visionWrap h4, .workLife h4, .aboutWrapper .contentBox h4, .missionWrap .missionLeftBox h4 { font-size: 26px; }
.transformBox .transformContent i { margin-bottom: 10px; }
.transformBox .transformContent h5 { margin-bottom: 15px; }
.whyFoxBanner, .mainBanner.aboutBanner, .mainBanner.platformBanner, .platformBanner.contactMainBanner, .platformBanner.careerMainBanner, .platformBanner.blogMainBanner, .aboutBanner.contactMainBanner, .aboutBanner.careerMainBanner, .aboutBanner.blogMainBanner, .contactMainBanner, .careerMainBanner { height: 300px; }
.whyFoxBanner, .contactMainBanner { background-size: 215px, 35px; background-position: 80% 80%, right 30%; }
.careerMainBanner { background-size: 215px, 35px; }
.mainBanner.aboutBanner, .mainBanner.platformBanner, .platformBanner.contactMainBanner, .platformBanner.careerMainBanner, .platformBanner.blogMainBanner, .aboutBanner.contactMainBanner, .aboutBanner.careerMainBanner, .aboutBanner.blogMainBanner { background-position: 80% 92%, right 40%, -30px 0; background-size: 215px, 35px, cover; }
.mainBanner .bannerCaption, .contactMainBanner .bannerCaption, .careerMainBanner .bannerCaption, .blogMainBanner .bannerCaption { margin-left: 70px; max-width: 290px; margin-top: 60px; }
.navBarWrapper { padding: 10px 70px; }
.headerRightSection { right: 120px; }
.mainBanner .bannerCaption h1, .contactMainBanner .bannerCaption h1, .careerMainBanner .bannerCaption h1, .blogMainBanner .bannerCaption h1 { font-size: 15px; }
.mainBanner .bannerCaption h2, .contactMainBanner .bannerCaption h2, .careerMainBanner .bannerCaption h2, .blogMainBanner .bannerCaption h2 { margin: 14px 0; font-size: 20px !important; }
.mainBanner .bannerCaption p, .contactMainBanner .bannerCaption p, .careerMainBanner .bannerCaption p, .blogMainBanner .bannerCaption p { line-height: 22px; }
.visionWrap p, .workLife p { width: 70%; }
.missionWrap .missionLeftBox { padding-right: 0; margin-bottom: 25px; }
.missionWrap .missionLeftBox h4 { margin: 0 0 15px; width: 100%; }
.gridPadding { padding-left: 70px; padding-right: 70px; }
.decisionWrapper:before { right: -80px; top: 65px; width: 150px; height: 150px; border: 16px solid #f7f7f7; }
.decisionWrapper .topMobScreenImg img { right: -95px; top: 48px; }
.moduleCover { background-size: 120px; }
.platformModuleSlider:before { background-size: 48px; }
.generalEnqWrap .getSuportRight { margin-top: 20px; }
.questionBox { margin-top: 2rem; }
.questionForms .mb-5 { margin-bottom: 2rem !important; }
.contactInfoWrapper .questionForms label { font-size: 18px; margin-bottom: 10px; }
.requestDemoWrapper .reqDemoLeftBox .reqDemoForm, .requestDemoWrapper .reqDemoLeftBox .setupBox .setupForm, .setupBox .requestDemoWrapper .reqDemoLeftBox .setupForm, .setupBox .setupForm { margin-top: 35px; }
.setupBox { width: 70%; }
.billingCycleWrapper .billingDetailTab .nav { margin-bottom: 15px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxParent { flex-wrap: wrap; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight, .billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft { width: 100%; border-radius: 10px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight { margin-top: 20px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight:before, .billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight:after { display: none; }
.billingCycleWrapper .billingDetailTab { margin: 40px 0 30px; }
.setupBox .paymentTab .cardDetail, .setupBox .paymentTab .addOtherCardDetail { width: 100%; }
.setupBox .paymentTab .cardDetail { margin-right: 0; margin-bottom: 20px; }
}
@media (max-width: 670px) {
.requestDemoWrapper { flex-wrap: wrap; }
.requestDemoWrapper .reqDemoLeftBox { max-width: 100%; padding: 60px 70px 30px 70px; }
.requestDemoWrapper .reqDemoLeftBox h1 { margin-bottom: 10px; }
.requestDemoWrapper .reqDemoRightBox .topWrapper { padding: 60px 70px 11rem; width: 100%; }
.requestDemoWrapper .reqDemoRightBox .imgWrap { padding-right: 25px; padding-left: 25px; }
}
@media (max-width: 615px) {
.mainBanner.aboutBanner, .mainBanner.platformBanner, .platformBanner.contactMainBanner, .platformBanner.careerMainBanner, .platformBanner.blogMainBanner, .aboutBanner.contactMainBanner, .aboutBanner.careerMainBanner, .aboutBanner.blogMainBanner, .whyFoxBanner, .contactMainBanner, .careerMainBanner { height: 380px; }
.mainBanner.aboutBanner, .mainBanner.platformBanner, .platformBanner.contactMainBanner, .platformBanner.careerMainBanner, .platformBanner.blogMainBanner, .aboutBanner.contactMainBanner, .aboutBanner.careerMainBanner, .aboutBanner.blogMainBanner { background-position: center 95%, right 40%, -210px -39px; background-size: 170px, 45px, cover; }
.platformBanner .bannerCaption h2 { max-width: 100%; }
.mainBanner .bannerCaption, .contactMainBanner .bannerCaption, .careerMainBanner .bannerCaption, .blogMainBanner .bannerCaption { text-align: center; max-width: 100%; margin-top: -90px; margin-left: 0; padding: 0 25px; }
.mainBanner .bannerCaption h2, .contactMainBanner .bannerCaption h2, .careerMainBanner .bannerCaption h2, .blogMainBanner .bannerCaption h2 { margin: 10px 0 0; }
.mainBanner .bannerCaption p, .contactMainBanner .bannerCaption p, .careerMainBanner .bannerCaption p, .blogMainBanner .bannerCaption p { margin-top: 8px; }
.whyFoxBanner, .contactMainBanner, .careerMainBanner { background-size: 185px, 40px; background-position: center 95%, right 25%; align-items: start; }
.whyFoxBanner .bannerCaption, .contactMainBanner .bannerCaption, .careerMainBanner .bannerCaption { margin-top: 7rem; }
.careerMainBanner { background-size: 150px, 40px; background-position: center bottom, right 25%; }
.visionWrap p, .workLife p { width: 90%; }
.missionWrap { padding: 4rem 0; }
.whyFoxWrapper .whyFoxBottom .whyFoxGrid { width: 100%; margin-right: 0; }
.empAppWrap .empSliderCaption h4 { font-size: 20px !important; }
.empAppWrap .empSliderCaption h3 { font-size: 18px; margin: 15px 0; }
.testLeftBg .d-flex { flex-wrap: wrap; }
.transformBox .transformContent { padding: 0px 25px; }
.transformBox .transformContent h5 { font-size: 20px; line-height: 30px; }
.empAppWrap .carousel-item .d-flex { flex-wrap: wrap; }
.empAppWrap .empSliderImg { padding-top: 22px; margin-top: 30px; }
.empAppWrap .empSliderImg:before { width: 50%; height: 22px; }
.testimonialWrap .w-100 { margin-right: 0; }
.whyFoxList { flex-wrap: wrap; margin-bottom: 20px; }
.whyFoxList .leftBox, .whyFoxList .rightBox, .aboutWrapper .imgBox, .aboutWrapper .contentBox { width: 100%; }
.whyFoxList .leftBox { padding: 60px 60px 10px; }
.transformBox .transformContent h5, .topFooter h5, .whyFoxWrapper .topSection h5, .testRightContent h4, .decisionTitle h2, .empAppWrap .empSliderCaption h4, .mainBanner .bannerCaption h2, .contactMainBanner .bannerCaption h2, .careerMainBanner .bannerCaption h2, .blogMainBanner .bannerCaption h2, .whyFoxList .leftBox h4, .visionWrap h4, .workLife h4, .aboutWrapper .contentBox h4, .missionWrap .missionLeftBox h4 { font-size: 22px; }
.aboutWrapper { padding-left: 60px; padding-bottom: 0 !important; }
.aboutWrapper .d-flex { flex-wrap: wrap; }
.aboutWrapper .imgBox:before { bottom: -30px; height: 30px; }
.aboutWrapper .imgBox img { visibility: hidden; display: block !important; }
.aboutWrapper .contentBox { padding: 65px 0 20px 0; }
.aboutWrapper .contentBox h4 { margin: 0 0 10px; }
.visionWrap { padding-top: 0 !important; }
.moduleCover .moduleCoverContent { width: 70%; margin: 25px auto 0; }
.mainBanner.platformBanner, .platformBanner.contactMainBanner, .platformBanner.careerMainBanner, .platformBanner.blogMainBanner { background-size: 190px, 45px, cover; }
.platformModuleSlider { margin: 6rem 0 20px; }
.platformModuleSlider:before { background-position: center top; background-size: 65px; }
.platformModuleSlider .carousel-indicators { justify-content: center; }
.platformModuleSlider .moduleCarouselItem .moduleCarLeftContent, .platformModuleSlider .moduleCarouselItem .moduleCarRightContent { width: 100%; }
.moduleCarouselItem { flex-wrap: wrap; margin-top: 4rem; }
.platformModuleSlider .moduleCarouselItem .moduleCarRightContent { margin-top: 35px; }
.workLife { background-position: left center; background-size: 40px; }
.workLife:before { right: -65px; top: 8px; width: 130px; height: 130px; border: 16px solid #f7f7f7; }
.decisionWrapper { padding: 2rem 0; }
.decisionWrapper .decisionImages { margin-top: -30px; }
.setupBox { padding: 8rem 0 3rem; }
.billingCycleWrapper .billingCycleBox .billingBottomDetail { margin-bottom: 20px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight h4 { font-size: 18px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight p { font-size: 16px; line-height: 26px; }
.billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleRight ul li, .billingCycleWrapper .billingDetailTab .tab-content .billingBoxStyleLeft ul li { margin-bottom: 15px; }
.setupBox { width: 75%; }
.setupBox .paymentTab .nav-link { padding: 10px 15px 16px; margin-right: 6px; }
}
@media (max-width: 515px) {
.transformBox .transformContent i { margin-bottom: 5px; font-size: 22px; }
.transformBox .transformContent h5 { font-size: 16px; line-height: 24px; margin-bottom: 8px; }
.gridPadding, .navBarWrapper, .aboutWrapper { padding-left: 25px; padding-right: 25px; }
.empAppWrap { padding: 3rem 0 3rem 25px; }
.empAppWrap .carousel-indicators { width: 45px; }
.empAppWrap .carousel-inner { padding-left: 60px; }
.testimonialWrap .testLeftBg:before { display: none; }
.transformBox .transformContent h5 { width: 100%; }
.headerRightSection { right: 75px; }
.mainBanner.aboutBanner, .mainBanner.platformBanner, .platformBanner.contactMainBanner, .platformBanner.careerMainBanner, .platformBanner.blogMainBanner, .aboutBanner.contactMainBanner, .aboutBanner.careerMainBanner, .aboutBanner.blogMainBanner { background-position: center 95%, right 29%, -250px -39px; background-size: 165px, 40px, cover; }
.mainBanner .bannerCaption, .contactMainBanner .bannerCaption, .careerMainBanner .bannerCaption, .blogMainBanner .bannerCaption { padding: 0 25px !important; }
.mainSlider .carousel-item { background-size: 170px; background-position: center 40%; }
.mainSlider .leftSliderCaption p, .mainSlider .rightSliderCaption p { font-size: 14px; line-height: 20px; }
.mainSlider .leftSliderCaption { padding: 10px 50px; }
.mainSlider .rightSliderCaption { padding: 15px 50px 10px; }
.mainSlider .rightSliderCaption h1 { font-size: 22px; line-height: 24px; }
.mainSlider .rightSliderCaption p { margin: 10px 0 18px; }
.decisionWrapper { background-size: 71px; background-position: 55% 41%; }
.decisionWrapper:before { right: -65px; top: 15px; width: 115px; height: 115px; }
.decisionWrapper .topMobScreenImg img { right: -55px; top: 26px; }
.generalEnqWrap .getSuportRight { background-size: 125px; }
.generalEnqWrap .getSuportRight > a { font-size: 22px; }
.contactInfoWrapper .ofcList, .questionForms { margin-top: 2rem; }
.faqWrapper { background-size: 50px; background-position: right 115px; }
.faqWrapper .faqContainer { width: 85%; }
.accordionStyle .card-header { padding: 10px; }
.accordionStyle .card-header h5 { font-size: 16px; }
.requestDemoWrapper .reqDemoLeftBox { padding: 60px 25px 30px 25px; }
.requestDemoWrapper .reqDemoRightBox .topWrapper { padding: 60px 25px 12rem; }
.setupBox { width: 90%; }
}
@media (max-width: 400px) {
.navBarWrapper.navFixedTop { padding: 10px 10px !important; }
.navBarWrapper.navFixedTop .headerRightSection { right: 60px; }
.navBarWrapper.navFixedTop .navbar-toggler { margin-top: 1px; }
.topFooter h5 { font-size: 16px; }
.orangeBtn, .orangeWhiteBtn, .requestDemoBtn, .calculateBtn, .transBtn, .requestDemoBtn, .calculateBtn, .transBtn, .requestDemoBtn, .calculateBtn { padding: 6px 12px; }
.decisionWrapper { background-size: 45px; background-position: 56% 48%; }
.decisionWrapper .decisionWrapper img { width: 90%; }
.decisionWrapper .topMobScreenImg img { right: -40px; top: 20px; }
.navFixedTop .fixedLogo { width: 85px; margin-top: 6px; }
.navFixedTop .navbar-toggler { margin-top: 4px; }
.navFixedTop .orangeBtn, .navFixedTop .orangeWhiteBtn, .navFixedTop .requestDemoBtn, .navFixedTop .calculateBtn, .navFixedTop .transBtn, .navFixedTop .transBtn { padding: 6px; }
.whyFoxBanner .bannerCaption, .contactMainBanner .bannerCaption { margin-top: 5rem; }
.generalEnqWrap .getSuportRight { padding: 20px; }
}
@media (max-width: 350px) {
.transformBox .transformContent h5 { margin-bottom: 0px; }
.navBarWrapper { padding: 10px !important; }
.headerRightSection { right: 60px; }
.topFooter h5 { width: 100%; margin-bottom: 20px; }
.topFooter .d-flex { flex-wrap: wrap; }
.setupBox .paymentTab .nav-link { padding: 8px 8px 16px; margin-right: 2px; font-size: 13px; }
}
.successMsg, .errorMsg { font-size: 15px; line-height: 22px; font-weight: 400; width: 100%; height: 100%; display: none; }
.successMsg { text-align: center; }
.questionForms br { display: none; }
.error404 .fixedSocialIcons { display: none; }
.error-404 { padding: 150px 15px 80px; }
.error-404 h1 { margin: 0 0 30px; }
.error-404 p { max-width: 400px; margin: 0 auto 35px; }
.custom-price-table { margin: 0 0 70px; }
.reqDemoForm .error { color: #f00; padding: 10px 15px; }
.reqDemoForm .mobInputWrap { flex-wrap: wrap; justify-content: space-between; }
.reqDemoForm .mobInputWrap #mobile { width: calc(100% - 110px); }
.pricingCardStyle h5 { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.pricingCardStyle h5 div, .pricingCardStyle h5 span { margin: 0 !important; }
.page-template-full-width .fixedSocialIcons { display: none; }
.full-width-container .container { max-width: 980px; padding: 100px 20px 70px; }
.full-width-container .page-ttl { margin: 0 0 50px; }
.full-width-container .page-ttl h1 { color: #F15C2D; }
.full-width-container p { margin: 0 0 30px; line-height: 24px; }
.full-width-container ul, .full-width-container ol { padding-left: 20px; margin: 0 0 30px; }
.full-width-container ul li, .full-width-container ol li { margin: 0 0 8px; line-height: 24px; }
 @media screen and (max-width: 767px) {
.reqDemoForm .error { font-size: 13px !important; color: #f00; }
}
 @media screen and (max-width: 1599px) {
.reqDemoForm .mobInputWrap #mobile { width: calc(100% - 80px); }
}
/* terms of use */
.termsofusepage { padding: 100px 0 100px 0; }
.ttitle { text-align: center; }
.ttitle h2 span { color: #F15C2D; }
.ttitle h2 { font-size: 30px; font-weight: 600; }
.termstext, .privaytext { background: #fff; width: 80%; margin: 20px auto; margin-top: 20px; margin-top: 20px; border-radius: 5px; padding: 30px; margin-top: 30px; box-shadow: 0px 3px 10px #00000029; }
.termsbox, .privacybox { max-height: 330px; overflow-y: auto; padding-right: 20px; }
.termsbox p, .privacybox p { line-height: 30px; color: #142641; }
.termsofusepage, .privacypolicypage, .emplyeeapppage { background-color: #F1F4FF; padding: 128px 0 32px; position: relative; overflow: hidden; }
.emplyeeapppage::after, .termsofusepage::after, .privacypolicypage::after { content: ""; position: absolute; left: -66px; bottom: 95px; width: 130px; height: 130px; border-radius: 50%; border: 18px solid #fff; }
.privaytext h5 { font-weight: 600; font-size: 22px; margin-bottom: 20px; }
.ttitle h1 { margin: 30px 0 20px; font-size: 24px; }
.empdetail h1 { color: #F15C2D; font-size: 28px; margin: 0; font-weight: 600; }
.empdetail h2 { font-size: 18px; margin: 14px 0 28px; font-weight: 600; }
.appdetailss { background-color: #fff; padding: 35px; border-radius: 5px; box-shadow: 0px 3px 10px #00000026; margin-left: 48px; text-align: center; }
.appdetails { background-color: #fff; padding: 35px; border-radius: 5px; box-shadow: 0px 3px 10px #00000026; }
.empjoint { display: -ms-flexbox; display: flex; margin-right: 48px; }
.smaillimg { margin-top: 16px; }
.bigimage { width: 100%; }
.rightimg { width: 100%; max-width: 100%; height: auto; }
.emplyeeapppage .container { max-width: 60%; margin: 0 auto; width: 100%; }
.empweb { background-color: #fff; padding: 80px 0 0 0; }
.row.webcontents { padding-bottom: 80px; }
.empweb .container { max-width: 60%; width: 100%; margin: 0 auto; }
.emprightcontent h1 { font-weight: 600; color: #F15C2D; font-size: 28px; margin: 0; }
.emprightcontent h2 { font-size: 18px; margin: 14px 0 28px; font-weight: 600; }
.webright { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; }
.emprightcontent { margin-left: 48px; }
.loginbtn { background-color: #F15C2D; color: #fff; border: 1px solid #F15C2D; transition: .8s; padding: 6px 26px; outline: none; font-weight: 600; border-radius: 5px; }
.loginbtn:hover { background-color: transparent; color: #F15C2D; }
.row.employeedescription { padding-bottom: 48px; margin-top: 48px; }
.webleft img { width: 100%; }
.employeedescription img { width: 100%; }
@media only screen and (max-width: 767px) {
.emplyeeapppage { padding: 100px 0 10px; }
.emplyeeapppage .container { max-width: 100%; }
.row.employeedescription { padding-left: 10px; padding-right: 10px; }
.ttitle h1 { margin: 20px auto; }
.row.employeedescription { text-align: center; margin-top: 25px; }
.empjoint { display: inherit; margin-right: 35px; margin-left: 35px; text-align: center; }
.appdetailss { margin-left: 0; text-align: center; margin-top: 30px; }
.appright { padding-top: 30px; }
.empweb .container { max-width: 100%; }
.emprightcontent { margin-left: 0; float: left; width: 100%; }
.webright { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: inherit; text-align: center; float: left; width: 100%; }
.appright { display: flex; flex-wrap: wrap; align-items: center; }
.termstext, .privaytext { width: 95%; padding: 20px; z-index: 66; position: relative; }
}
@media only screen and (min-width: 768px) and (max-width:999px) {
.termstext, .privaytext { width: 95%; padding: 20px; }
.emplyeeapppage .container { max-width: 85%; }
.appdetails { padding: 20px; }
.appdetailss { padding: 20px; }
.empweb .container { max-width: 85%; width: 100%; margin: 0 auto; }
}
@media only screen and (min-width: 1000px) and (max-width:1199px) {
.termstext, .privaytext { width: 90%; }
.emplyeeapppage .container { max-width: 85%; }
.empweb .container { max-width: 85%; width: 100%; margin: 0 auto; }
}
@media only screen and (min-width: 1200px) and (max-width:1399px) {
.emplyeeapppage .container { max-width: 85%; }
.empweb .container { max-width: 85%; width: 100%; margin: 0 auto; }
}
/* privacy page */
.innerpage { padding: 100px 0 50px 0; }
.pagecontent h1 { font-size: 30px; font-weight: 600; }
.pagecontent { text-align: center; }
.pagecontent .entry-content { font-size: 30px; font-weight: normal; }
.bannerList.list-unstyled.list-inline li span a { color: #000; }
#requestdemo .error { font-size: 15px; }
/* new for mobile comments */
@media (max-width: 515px){
.blogMainBanner .bannerCaption {
  padding: 0 25px !important;
  margin-top: -207px;
}}
@media (max-width: 400px){
.navBarWrapper.navFixedTop .headerRightSection {
  /* right: 100px ; */
  top: 12px;
}
.orangeBtn, .transBtn {
  padding: 6px 12px;
}}

@media (max-width: 767px){
.navbar-toggler {

  margin-left: 4px !important;

}
/* .headerRightSection {
    right: 97px;
    top: 20px;
  } */
  .headerRightSection { right: 30%;
    top: 14px; }
}

/* @media (max-width: 539px){
/* .navFixedTop .fixedLogo {
  width: 85px;
  margin-top: 6px;
} 
}*/
@media (max-width: 767px){

.navBarWrapper {

    padding: 10px 27px;

}}
@media(max-width:493px){
  .headerRightSection{
    right: 19%;
  }
  .navFixedTop .fixedLogo {
    width: 90px;
  }

}

.fixedSocialIcons li a{
  color: white !important;
  background-color: #142641  !important;
}
#scrolledsocial {
  position: sticky !important;
  bottom: 10% !important;
  width: 8% !important;
}