@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900");
/* CSS by CultureAI, V2 May 2019*/




/*----PADDING-RULES---*/
.m0{margin:0px !important;} .p0{padding:0px !important;}
.mt0{margin-top:0px !important;} .mb0{margin-bottom:0px !important;}
.ml0{margin-left:0px !important;} .mr0{margin-right:0px !important;}
.pt0{padding-top:0px !important;} .pb0{padding-bottom:0px !important;}
.pl0{padding-left:0px !important;} .pr0{padding-right:0px !important;}

.m4{margin:4px} .p4{padding:4px}
.mt4{margin-top:4px !important;} .mb4{margin-bottom:4px !important;}
.ml4{margin-left:4px !important;} .mr4{margin-right:4px !important;}
.pt4{padding-top:4px !important;} .pb4{padding-bottom:4px !important;}
.pl4{padding-left:4px !important;} .pr4{padding-right:4px !important;}

.m8{margin:8px} .p8{padding:8px}
.mt8{margin-top:8px !important;} .mb8{margin-bottom:8px !important;}
.ml8{margin-left:8px !important;} .mr8{margin-right:8px !important;}
.pt8{padding-top:8px !important;} .pb8{padding-bottom:8px !important;}
.pl8{padding-left:8px !important;} .pr8{padding-right:8px !important;}

.m16{margin:16px} .p16{padding:16px}
.mt16{margin-top:16px !important;} .mb16{margin-bottom:16px !important;}
.ml16{margin-left:16px !important;} .mr16{margin-right:16px !important;}
.pt16{padding-top:16px !important;} .pb16{padding-bottom:16px !important;}
.pl16{padding-left:16px !important;} .pr16{padding-right:16px !important;}

.m32{margin:32px} .p32{padding:32px}
.mt32{margin-top:32px !important;} .mb32{margin-bottom:32px !important;}
.ml32{margin-left:32px !important;} .mr32{margin-right:32px !important;}
.pt32{padding-top:32px !important;} .pb32{padding-bottom:32px !important;}
.pl32{padding-left:32px !important;} .pr32{padding-right:32px !important;}

.m48{margin:48px} .p48{padding:48px}
.mt48{margin-top:48px !important;} .mb48{margin-bottom:48px !important;}
.ml48{margin-left:48px !important;} .mr48{margin-right:48px !important;}
.pt48{padding-top:48px !important;} .pb48{padding-bottom:48px !important;}
.pl48{padding-left:48px !important;} .pr48{padding-right:48px !important;}

.m64{margin:64px} .p64{padding:64px}
.mt64{margin-top:64px !important;} .mb64{margin-bottom:64px !important;}
.ml64{margin-left:64px !important;} .mr64{margin-right:64px !important;}
.pt64{padding-top:64px !important;} .pb64{padding-bottom:64px !important;}
.pl64{padding-left:64px !important;} .pr64{padding-right:64px !important;}

.br{border-radius: 6px;}
.or{overflow: hidden;}
.bs{border:1px solid #dfe1e6;}
.fw700{font-weight: 700;}
.fw500{font-weight: 500;}
.fw400{font-weight: 400;}

.flex{display: flex;}
.flexTop{display: flex;}



/*----CORE-CLASSES-FC---*/
.flexWrap{flex-wrap: wrap;}
.flex{display: flex;}
.flexGrow{flex-grow: 1;}
.flexCol{display: flex; flex-direction: column;}
.rowReverse{flex-direction: row-reverse;display:flex;}
.colReverse{flex-direction: column-reverse;display:flex;}
.explode{justify-content: space-between;}
.spaceAround{justify-content: space-around;}
.spaceEvenly{justify-content: space-evenly;}
.justifyCentre{justify-content: center;}
.rowCentre{justify-content: center; display: flex;}
.textCentre{text-align: center;}
.textRight{text-align: right;}
.textLeft{text-align: left !important;}
.fullWidth{width:100% !important;}
.fullHeight{height:100%;}
.halfHeight{height:50%;}
.halfWidth{width:50%;}
.centre{margin: 0 auto;}
a{color:inherit; text-decoration: none;}
.block{display: block;}
.hide{display:none;}
.green{background: #58b03a;}
.greenCopy{color: #58b03a;}
.whiteCopy{color: #FFFFFF;}
.white{background: #FFFFFF;}
.redCopy{color: #dc3545;}
.orangeCopy{color: #fa6044;}
.blueCopy{color: #0747a3;}
.lightBlue{background:#3F9FFF;}
.lightBlueCopy{color: #3F9FFF;}
.blue{background:#0747a3;}
.darkBlue{background:#013680;}
.darkBlueCopy{color:#013680;}
.black{background:#132640}
.blackCopy{color:#132640}
.red{background: #dc3545;}
.orange{background: #fa6044;}
.blueGrey{background: #EFF3FA}
.greyCopy{color: #cccccc;}
.darkGrey{background: #888888;}
.darkGreyCopy{color: #888888;}
.padd{padding:16px;}
.paddXS{padding:8px;}
.stack{flex-wrap: wrap;}
.textLink{color:#0747a3;text-decoration: underline;font-weight: 700;}
.textLinkNoBold{color:#0747a3;text-decoration: underline;}
.copyXS{font-size: 0.8em;}
.underline{text-decoration: underline;}
.hover:hover{opacity:0.8}
.copyM{font-size: 1.2em;}
.copyXL{font-size: 1.8em;}
.relative{position: relative;}
.relativeImportant{position: relative !important;}
.autoW{width:fit-content}
.autoH{height:fit-content}
.pointer{cursor: pointer;}
.move{cursor: move;}
.fixed{position: fixed;}
.absolute{position: absolute;}
.oh{overflow: hidden;}
.em1-4{font-size: 1.4em;}
.transition{transition: 0.5s;}
.ease{transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000);}
.screenHeight{height:100vh;}
.boxShadow{box-shadow: 0 0 10px rgba(0,0,0,.05);}
.boxShadowInset{box-shadow: 0 0 10px rgba(0,0,0,0.1) inset;}
.boxShadowHeavy{box-shadow: 0 0 10px rgba(0,0,0,.2);}
.flexEnd{justify-content: flex-end;}
.shortHeight{height:calc(100% - 76px);}
.buttonsLower{background: #fcfcfc;border-top: 1px solid #dfe1e6;}
.borderBox{box-sizing: border-box;}
.contentBox{box-sizing: content-box;}
.pointerNone{pointer-events: none;}
.br{border-radius: 4px;}
.hover:hover{opacity: 0.7;}
.noWrap{white-space: nowrap;}
.monospace{font-family: monospace;}
.capitalise{text-transform: uppercase;}
.capital{text-transform: capitalize;}

.oversizedField{
    border:1px solid rgba(0,0,0,0.05); 
    height: 64px;
    text-indent: 22px;
    font-size: 18px;
    box-shadow:0 20px 30px rgba(0,0,0,.05);
    max-width: 770px;
}

#cookieButton{
    margin-left:32px;
}

.rowReverse{
flex-direction: row-reverse;
}

.explode{
    justify-content: space-between;
}

.contactOr{
    margin: 32px 0;
    max-width: 400px;
    padding-top:32px;
    border-top:1px dashed #e0e0e0;
}

.textLink{
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.textLinkBlue{
    color: #0747a3;
}

.textLinkOrange{
    color: #fa6044;
}

.textLink:hover{
    opacity: 0.7;
}

.landingBannerText{
    max-width: 690px;
    width:690px;
}




/*--------------HOMEPAGE-INTERACTIVE-SECTION-----------------*/

.securityBannerItem{
    cursor: pointer;
    transition: 0.2s;
    position: relative;
}

.securityBannerItem.active .select:after{
    content: "\f0d7";
    position: absolute;
    bottom: -14px;
    left: calc(50% - 13px);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    color: #013680;
    font-size: 42px;
}


.displayNone{
    display: none;
}

.securityBannerItem.active,
.securityBannerItem:hover{
    background: #013680;
}

#securityBanner{
    overflow: hidden;
    position: relative;
}

#securityBannerLower .bannerCol{
    position: relative;
}

#securityBannerLower{
    position: relative;
}

#securityBannerUpper{
    position: relative;
    z-index: 10;
}

@keyframes jumpUp{
    from{
        top:0;
    }
    to{
        top:-150%;
    }
}

@keyframes jumpDown{
    from{
        top:-150%;
    }
    to{
        top:0%;
    }
}

#secBannerContent{
    position: absolute;
    top: -150%;
    margin-top: -32px;
    width: 100%;
}

.coreValues{
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width:100%;
}

#secBannerContentInner{
    padding:32px;
    background: #ffffff;
}

#secBannerContentInner h4{
    margin: 0;
}

.securityBannerCircle{
    cursor: pointer;
}

.whiteHalf{
    padding:32px;
    background: #ffffff;    
}








#headerButtons{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 32px;
}

#securityBanner{
    margin: 64px 0;
}

.bannerCol{
    width: 100%;
}

.bannerCopy{
    margin-right:32px;
}

.rowReverse .bannerCopy{
    margin-left:32px;
    margin-right:0;
}

.securityBannerLowerItem{
    width: 100%;
    display: flex;
    justify-content: center;
}


.flexCentre{
    justify-content: center;
    flex-direction: column;
    display: flex;
}




.securityBannerItem.one,
.securityBannerLowerItem.one{
    flex:9.090909090909091%;
}
.securityBannerItem.two,
.securityBannerLowerItem.two{
    flex:18.181818181818184%;
}
.securityBannerItem.three,
.securityBannerLowerItem.three{
    flex:27.272727272727273%;
}

.securityBannerContainer{
    width: 100%;
    padding: 0 5%;
    display: flex;
}

#securityBannerLower{
    margin-top:32px;
    min-height: 200px;
}

.securityBannerItemMobile{
    background: #0747a3;
    color: #ffffff;
    padding: 26px;
    border-radius: 0;
    font-weight: 700;
    border-bottom: 3px solid #ffffff;
    cursor: pointer;
}

.mobileSecBannerItem{
    width: 100%;
}

.accordionLeft{
    width:60px;
    position: relative;
}

.accordionElement:first-child .accordionLeft:before{
    height:calc(100% - 41px);
    bottom:0;
}

.accordionElement:last-child .accordionLeft:before{
    height:41px;
    top:0;
}

.accordionElement{
    position: relative;
}

.accordionLeft:after{
    content:" ";
    height:4px;
    width:calc(50% + 2px);
    position: absolute;
    background: #0747a3;
    top: 41px;
    right: 0;
}

.accordionElement:before{
    width: 24px;
    font-weight: 700;
    position: absolute;
    font-size: 12px;
    right: 12px;
    z-index: 10;
    background: #ffffff;
    height: 24px;
    border-radius: 16px;
    text-align: center;
    content: " ";
    bottom: -13px;
    z-index: 10;
    border: 3px solid #0747a3;
}

.accordionElement:after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    color: #0747a3;
    z-index: 11;
    font-weight: 700;
    font-size: 12px;
    width: 24px;
    height: 24px;
    bottom: -10px;
    right: 8px;
}

.accordionElementImage{
    width:100px;
}

.accordionElement:last-child:after,
.accordionElement:last-child:before{
display: none;
}

.accordionLeft:before{
    content:" ";
    width:4px;
    height:100%;
    position: absolute;
    background: #0747a3;
    left: calc(50% - 2px);
}

.securityBannerItemMobile:hover{
    opacity:0.85;
}

.securityBannerLowerMob{
    padding:22px;
}

.securityBannerItem{
    background: #0747a3;
    color: #ffffff;
    width: 100%;
    border-right: 2px solid #ffffff;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    line-height: 1.5em;
    height: 80px;
    position: relative;
    font-weight: 700;
}

.securityBannerItem:before{
    width: 24px;
    font-weight: 700;
    position: absolute;
    font-size: 12px;
    right: -12px;
    z-index: 10;
    background: #ffffff;
    height: 24px;
    border-radius: 12px;
    text-align: center;
    content: " ";
}

.securityBannerItem:after{
    content: "\f054";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    color: #0747a3;
    right: -13px;
    z-index: 11;
    font-weight: 700;
    font-size: 12px;
    top: 28px;
    width: 24px;
    height: 24px;
}


.securityBannerItem:first-child{
    border-radius: 10px 0 0 10px;
}

.securityBannerItem:last-child{
    border-radius: 0 10px 10px 0;
    border-right: 0;
}

.securityBannerItem:last-child:before,
.securityBannerItem:last-child:after{
    content: none;
}


@media only screen and (max-width: 1200px) {
    
    #scriptBlock{
        max-height: 140px !important;
    }

    #scriptBlockContainer{
        min-height: 227px !important;
    }

    .securityBannerItem,
    .securityBannerLowerItem{
        flex:16.666666666666667% !important;
    }
    .securityBannerContainer{
        display: block;
    }
   #secBannerCols .bannerCol{
        margin: 0;
    }

    .securityBannerCircle{
        width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    background: #ffffff;
    }
}

@media only screen and (max-width: 950px) and (min-width: 800px) {
    .securityBannerCircle{
display: block;
    }
}

@media only screen and (max-width: 1040px) and (min-width: 800px) {
.bannerCol{
    display: block;
}
}

@media only screen and (max-width: 800px) {
   #securityBannerUpper{
       display: block;
   }
   #secBannerCols{
       display: block;
   }
   #securityBanner{
       display: flex;
       justify-content: center;
   }
   .securityBannerItem{
       border-right: 0;
   }

    .securityBannerItem:before {
        right: calc(50% - 12px);
        bottom: -13px;
    }
    .securityBannerItem:after {
        content: "\f078";
        right: calc(50% - 12px);
        bottom: -14px;
        width: 24px;
        height: 24px;
        top: unset;
    }
    #securityBannerLower{
        margin-top:0;
    }


    .securityBannerLowerItem{
        display: flex;
        justify-content: center;
        flex-direction: column;
        border-bottom: 2px solid transparent;
    }

    .securityBannerLowerItem.two,
    .securityBannerItem.two{
        height:170px;
    }

    .securityBannerLowerItem.one,
    .securityBannerItem.one{
        height:100px;
    }

    #secBannerCols .bannerCol {
        margin: 10px !important;
        display: flex;
    }

    #securityBanner{
        pointer-events: none;
    }

}

.flexEmpty{
    min-width: 440px;
    max-width: 440px;
    margin-left: 30px;
}

a{
    color: #0747a3;
}


.securityBannerCircle img{
    position: absolute;
    top: 0;
}

#logoMain{
    fill:#0747a3;
}


.fullWidthImage{
    max-width: 700px;
    margin:0 auto;
}

.fullWidthImage img{
    max-width: 100%;
}

.breadcrumbContainer{
    /* background: #0747a3; */
    padding: 0 40px;
}

.breadcrumb{
    max-width: 1400px;
    margin: 0 auto;
    padding:20px 0;
}

.breadcrumbLink{
    background: #5e87c3;
    text-align: center;
    color: #ffffff;
    position: relative;
    height: 42px;
    display: inline-flex;
    margin: 0 6px;
    padding: 0 32px 0 52px;
    flex-direction: column;
    justify-content: center;
    transition: 0.2s;
}

.guideSelector{
    position: relative;
    width: 52px;
}

.guideSelector:before{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: transparent;
    border: 2px solid #212529;
    content: " ";
    position: absolute;
    left: calc(50% - 7px);
    top: 17px;
}

.stepLink{
    background: #f2f2f2;
    padding: 10px 20px;
    margin: 10px 0;
    transition: 0.2s;
    border-radius: 5px;
}

#postComingSoon{
    border: 0;
}

#postComingSoon td{
    background: #f2f2f2;
    text-align: center;
    font-weight: 700;
}



.guideOrder{
    font-weight: 700;
    margin-right: 10px;
}

.guideNavItem:last-child .guideSelector:after{
    display: none;
}

.guideNavItem,.guideTr{
    cursor: pointer;
}

.guideNavItem.active .guideTr{
    background: #f2f2f2;
    color: #000000;
    border-radius: 5px;
}

.guideNavItem.active .guideSelector:before{
    background: #000000;
}

.guideNavItem:hover .guideSelector:before{
    background: #fa6044;
}

.guideNavItem.active:hover .guideSelector:before{
    background: #000000;
}

.guideTr:hover{
    background: #f2f2f2;
}

.guideSelector:after{
    content: " ";
    width: 2px;
    height: calc(100% - 26px);
    background: #212529;
    position: absolute;
    left: calc(50% - 1px);
    top: 37px;
    z-index: 0;
}

.breadcrumbLink:hover{
    background: #05357a;
}

.breadcrumbLink:hover:after{
    border-left: 21px solid #05357a;
}


#resourcesVideo{
    width:100%;
    height:500px;
}

#resourceContent p a,
#resourceContent li a
{
font-weight: 700;
}


.postTitle{
    line-height: 1.4em;
}

.postTitle a{
    padding: 0 !important;
    font-weight: 700;
}

.breadcrumbLink:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: -21px;
    top: 0;
    border-top: 21px solid transparent;
    border-bottom: 21px solid transparent;
    border-left: 21px solid #5e87c3;
    z-index: 2;
    transition: 0.2s;
}

.breadcrumbLink:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    top: 0;
    border-top: 21px solid transparent;
    border-bottom: 21px solid transparent;
    border-left: 21px solid #0747a3;
    z-index: 1;
}



.bannerCopy h4{
    margin-bottom: 0;
}
.bannerCopy p{
    margin-top: 0;
}



.resourcesArea{
    background: #ffffff;
    padding: 40px 0 100px;
}

.resourcesTop h1{
    margin: 0;
}

.resourcesBlockLink2 h4{
    line-height: 1.4em;
    color: #0747a3;
    margin-bottom: 0;
}

.resourcesBlockLink2,
.resourcesBlockLink{
    background: #ffffff;
    width: 100%;
    margin-right: 32px;
    padding: 32px;
    text-align: left;
    transition: 0.3s;
    font-weight: 500;
    border: 2px solid #eaeaea;
    border-radius: 5px;
    overflow: hidden;
}

.resourcesBlockLink{
    cursor: pointer;
}

.resourcesBlockLink:last-child,
.resourcesBlockLink2:last-child{
    margin-right: 0;
}

.resourcesBlockLink:hover{
    border: 2px solid #0747a3;
}


#timeline::-webkit-scrollbar{
    display: none;
}

.timelineBlockContainer{
    min-width: 340px;
    max-width: 340px;
    width: 340px;
    margin-right: 32px;
}

.timelineBlockContainer:last-child{
    margin-right: 0;
}

.timelineTopArea:last-child{
    min-width: 340px;
    padding-right: 32px;
}

.timelineTopArea:last-child:before{
    left: calc(50% - 32px);
}

.timelineTopArea:last-child:after{
    right: 32px !important;
}

#timelineTop{
    margin-bottom:16px;
}

.line{
    height: 4px;
    width: 100%;
    background: #0747a3;
}

.timelineTopArea{
    min-width:calc(340px + 32px);
    margin: 32px 0;
    position: relative;
}

.timelineTopArea:before{
    position: absolute;
    content: " ";
    height: 16px;
    top: -9px;
    width: 16px;
    left: calc(50% - 32px);
    background: #ffffff;
    border-radius: 50%;
    border: 4px solid #0747a3;
}

.timelineTopArea:first-child:after{
    position: absolute;
    content: " ";
    height: 20px;
    top: -8px;
    width: 4px;
    background: #0747a3;
}

.timelineTopArea:last-child:after{
    position: absolute;
    content: " ";
    height: 20px;
    top: -8px;
    width: 4px;
    right: 0;
    background: #0747a3;
}

.timelineBlock{
    background: #ffffff;
    padding: 32px;
    text-align: left;
    transition: 0.3s;
    font-weight: 500;
    border: 2px solid #eaeaea;
    position: relative;
    border-radius: 6px;
}

.timelineBlock p{
    margin:0;
}

.timelineBlock:after{
    content: " ";
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #eaeaea;
    position: absolute;
    top: -16px;
    left: calc(50% - 19px);
}

.date{
    color: #0747a3;
    margin: 0;
    text-align: center;
    position: absolute;
    width: calc(100% - 34px);
    font-size: 1.2em;
    font-weight: 700;
    top: -44px;
}



.timelineBlock:last-child{
    margin-right: 0;
}


.resourcesTop{
    margin-bottom: 20px;
}

.breadcrumbLink.active:after{
    border-left: 21px solid #ffffff;

}

.breadcrumbLink:first-child{
    margin-left: 0;
    padding: 0 14px 0 20px;
}
.breadcrumbLink:first-child:before{
    display: none;
}

.breadcrumbLink.active{
    background: #ffffff;
    color: #0747a3;
}

.imageGradientOverlay{
    height:100%;
    width:100%;
    position: absolute;
    animation:grad 1s 1s both;
}


.bannerCopy h3 {
    margin-top: 10px !important;
}

h3 {
    font-weight: 700;
    font-size: 26px;
    margin: 0 0 15px 0;
    line-height: 1.3em;
}


#banner .imageGradientOverlay{
    background: linear-gradient(83deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
}

.whiteBackground .imageGradientOverlay{
    background: linear-gradient(83deg, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0) 30%,rgba(255,255,255,0) 80%,rgba(0,0,0,0.05) 100%);
}

.matrixImage{
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

#calc-submit{
cursor: pointer;
}

#bookDemo{
    cursor: pointer;
}

@keyframes grad{
    0%{
    opacity: 0;
    }
    100%{
    opacity: 1;
    }
}

#backArrow{
    cursor: pointer;
}


.inputField{
    border-radius: 10px 0 0 10px;
}

.inputButton{
    border-radius: 0 10px 10px 0;
}

#bookDemoForm{
    margin-bottom: 16px;
}

.checkboxContainer{
    width:30px;
}

.checkbox{
    width: auto;
    height: auto;
    font-size: inherit;
    margin-top: 21px;
    text-indent: 0;
    background: inherit;
}

#demoRow {
    background: #002c6a;
    padding: 20px 32px;
    margin-top: 42px;
    border-radius: 10px;
}

#demoRow2{
    background: #dddddd;
    padding: 10px 20px;
    max-width: 640px;
    margin: 0 auto;
}

#resourceContent{
    background: #ffffff;
    padding: 30px;
    width: 100%;
    border: 2px solid #eaeaea;
    border-radius: 5px;
}

.resourcePageLink{
    background: #ffffff;
    border: 2px solid #eaeaea;
    transition: 0.2s;
    display: block;
}

.resourcePageLink:hover{
    border: 2px solid #0747a3;
}

.resourcesPageLinkTop{
    background: #0747a3;
    color: #ffffff;
    padding: 10px 20px;
}

.companyPage .navItem:nth-child(4){
    background: #f5f5f5;
}
.featuresPage .navItem:nth-child(1){
    background: #f5f5f5;
}

#blogLinks {
    justify-content: space-between;
    flex-wrap: wrap;
  }

#blogLinks>* {
    flex: 0 0 calc(50% - 15px);
    margin-bottom: 30px;
    border-radius: 5px;
    overflow: hidden;
}

.singleMenuItem{
    display: flex;
    width:100%;
    text-align: center;
    padding: 32px 42px !important;
}

.singleMenuItem:hover{
    background: #f5f5f5;
}

.navIconItem{
    margin-top: 22px;
    margin-left: 16px;
    font-weight: 700;
    color: #0747a3;
}

.resourcePageLinkInner{
    padding: 30px;
}

#resourceInfo{
    min-width: 440px;
    max-width: 440px;
    margin-left: 30px;
}

.resourcesBlockTop{
    background: #0747a3;
    color: #ffffff;
    padding: 10px 20px;
    font-weight:700;
    border-radius: 5px 5px 0 0;
}

.link{
    font-weight: 600;
    text-decoration: underline;
}

.resourcesTdFirst{
    font-weight: 500;
    padding-right: 20px !important;
}

.resourcesTd{
    padding: 10px 10px 10px 0;
}

.postLink{
    padding: 10px;
    background: #ffffff;
    margin: 10px;
    text-align: center;
    width:100%;
}

.resourcesTable{
    border-collapse: collapse;
    width: 100%;
}

.postLink{
    padding: 10px;
}

.resourcesTr{
    border-bottom: 1px solid #dadada;
}

.resourcesTr:last-child{
    border: 0;
}

.resourcesTd{
    padding: 10px;
}

.resourcesTag{
    background: #007bff;
    color: #ffffff;
    font-size: 14px;
    margin: 5px;
    padding: 5px 10px 7px;
    display: inline-block;
    border-radius: 5px;
}

.authorImage{
    width:calc(30% - 20px);
    margin-right:20px;
}
.authorDetails{
    width:70%;
}

.caps{
    text-transform: uppercase;
    letter-spacing: 1px;
}
#authorName{
    font-weight: 700;
}
#authorTitle{
    color: #79797a;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #000000;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.authorImage img{
    width:100%;
}

.btd-1{
    border-top: 1px dashed #000000;
    padding-top: 20px;
    margin-top: 10px;
}

.resourcesBlock{
    background: #ffffff;
    margin-bottom: 32px;
}

.resourcesBlock:last-child{
    margin-bottom: 0;
}

.resourcesBlockContent{
    padding: 20px;
    border: 2px solid #eaeaea;
    border-top: 0;
    border-radius: 0 0 5px 5px;
}

.resourcesBlockIcon{
    margin-bottom: 10px;
}

.resourcesImage img{
    width: 100%;
    display: block;
}



#demoRow3{
background: rgba(7, 71, 163, 0.8);
padding: 20px;
max-width: 550px;
margin: 0 auto;}

#backArrow2{
    filter: brightness(0);
    cursor: pointer;
}

#backArrow3{
    cursor: pointer;
}

.checkboxLabel{
    padding-top: 14px;
}

.matrixLink{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(5, 56, 130, 0.5);
    z-index: 1;
    text-align: center;
    opacity: 0;
    transition: 0.2s;
}

#matrixButton{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

#matrixButton .buttonMain:hover{
    opacity: 0.8;
}

#matrixButton .buttonMain{
    background: #ffffff;
    color: #0747a3;
}

#matrixButton a{
    width: 100px;
    margin: 0 auto;
}

.matrixImage:hover .matrixLink{
    opacity: 1;
}



#pageSolutions .navItem:nth-child(1){background: #f5f5f5;}
#pagePricing .navItem:nth-child(2){background: #f5f5f5;}
#pageResources .navItem:nth-child(2){background: #f5f5f5;}
#pageResourcesChild .navItem:nth-child(3){background: #f5f5f5;}
#pagePartners .navItem:nth-child(4){background: #f5f5f5;}
#pageStart .navItem:last-child{background: #f5f5f5;}
.resourcePage .navItem:nth-child(3){
    background: #f5f5f5;
}
.insightsPage .navItem:nth-child(2){
    background: #f5f5f5;
}


.expectedRow strong{
    white-space: nowrap;
}

.fullWidth{
    width:100%;
    display: block;
}

.halfWidth{
    display: block;
    width: 50%;
}

.twoThirdWidth{
    display: block;
    width:66.66%;
}

.thirdWidth{
    display: block;
    width: 33.33%;
}

.whitePaperImg{
    border: 1px solid #eaeaea;
}

.whitePaperImgContainer{
    max-width: 220px;
    margin-right: 32px;
    min-width: 220px;
}

.expectedRow .fas{
   width:10px; 
}

.buttonSwitch{
 animation: buttonSwitch 16s infinite;   
 font-weight: 400;
 text-decoration: none;
 padding: 12px;
 font-size: 14px;
 min-width: 170px;
 text-align: center;
 transition: 0.1s;
}

#filterLinks>*{
    flex: 0 0 calc(50% - 85px);
    margin-bottom: 30px;
}
#filterLinks{
    flex-wrap: wrap;
}

.filterLink{
    margin: 0 0 30px 0;
}

.bannerCopy h2{
    margin-top: 10px !important;
}

@keyframes buttonSwitch{
	0%,17%,100%{
        background: #0747a3;
        color: #ffffff;
	}
	20%,37%{
        background: #dddddd;
        color: #343333;
	}
	40%,57%{
        background: #ec0000;
        color: #ffffff;
	}
	60%,77%{
        background: #66fcf1;
        color: #000000;
	}
	80%,97%{
        background: #000000;
        color: #ffffff;
	}
}



.blogBanner{
position: absolute;
height: 374px;
width: 100%;
top: 0;
z-index: -1;
}

.centre{
    margin: 0 auto;
    justify-content: center;
}

.spaceAround{
    justify-content: space-around;
}
.spaceBetween{
    justify-content: space-between;
}

.navItemParent{
    cursor: default;
}

.eyebrowText{
    color: #58b03a;
    font-weight: 700;
}

#bannerCreds{
    max-width: 1400px;
    margin: 0 auto;
    animation: fade 2s 2s both;
}

.centreButtons{
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 64px;
}

#footerContainer .credsRow{
    margin: 0 auto;
}


.fourPillars{
    margin-top:32px;
}

.secCred{
    margin-right:32px;
}


#secCreds{
    width:100%;
}


#banner #gs-email1 input{
    border: 2px solid white;
    width:400px;
}


#banner .bannerCred{
    transition: 0.5s ease;
    opacity: 0.7;
}
#banner .bannerCred:hover{
    opacity: 1;
    transform: scale(1.2)
}

.credsRow{
    width:100%;
    align-items: center;
}
.bannerCred{
    width:100%;
}


#cookieOff{
    display: none;
}

#cookieBarContainer{
position: fixed;
z-index: 10;
bottom: 0;
background: #ffffff;
width: 100%;
text-align: center;
animation: cookie 1s 3s both;
border-top: #DFE1E6 2px solid;
}

.cookieBarContent{
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    justify-content: space-evenly;
    margin-top: 30px;
    align-items: center;
}

.cookieHeading{
    font-weight: 700;
    font-size: 20px;
}

#cookieBar{
    padding: 40px 20px;

}

.emailInput{
    box-shadow: 0px 0px 13px rgba(0,0,0,0.04);
}

.sizeInput{
    max-width: 630px;
    margin: 0 auto;
}

#close{
    background: #dfe1e6;
    color: #0747a3;
    width: 30px;
    text-align: center;
    height: 20px;
    letter-spacing: -0.3em;
    padding: 10px;
    font-weight: 700;
    line-height: 1.4em;
    float: right;
    cursor: pointer;
}
@keyframes cookie{
    from{
        opacity: 0;
        transform: translateY(200%);
    }
    to{
        opacity: 0.95;
        transform: translateY(1);
    }
}

#cookieBar .buttonAccent{
    background: #fa6044;
    color: #ffffff;
    border: none;
    padding:8px
}

#cookieBar .buttonAccent:hover{
    background: #bd4833;
}

.dLink{
    font-weight: 700;
    color: #0747a3;
    cursor: pointer;
}

.dLink:hover{
    text-decoration: underline;
}

.mouse-animation-container .mouse:after {
    background-color: #fff;
    width: 4px;
    height: 4px;
    -webkit-animation: trackBallSlide 2.5s linear infinite;
    animation: trackBallSlide 2.5s linear infinite;
}

.mouse-animation-container .mouse:before {
    width: 16px;
    height: 30px;
    background-color: none;
}

.mouse-animation-container .mouse:before {
    width: 16px;
    height: 30px;
    background-color: none;
}

.mouse-animation-container .mouse:after, .mouse-animation-container .mouse:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.mouse-animation-container .mouse:after {
    background-color: #0747a3;
    width: 4px;
    height: 4px;
    -webkit-animation: trackBallSlide 2.5s linear infinite;
    animation: trackBallSlide 2.5s linear infinite;
}

@keyframes trackBallSlide{
    0%,100% {
        transform: translateY(-7px)
    }
    50%, 80% {
        transform: translateY(7px);
    }
    95% {
        transform: translateY(-7px);
    }}

@keyframes colorSlide{
    0%,100% {
        background-position: 0 100%;
    }
    50%, 80% {
        background-position: 0 0;
    }
    95% {
        background-color: rgba(255,255,255,0.5);
    }}
    
    @keyframes nudgeMouse{
    0%,100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    80% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
    95% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }}


.mouse-animation-container .mouse {
    background: #ffffff -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),color-stop(50%,#fff),to(#fff));
    background: #ffffff linear-gradient(transparent,transparent 50%,#fff 0,#fff);
    cursor: pointer;
    position: absolute;
    z-index: 2;
    left: calc(50% - 11px);
    bottom: 48px;
    width: 22px;
    height: 36px;
    background-size: 100% 200%;
    -webkit-animation: colorSlide 2.5s linear infinite,nudgeMouse 2.5s ease-out infinite;
    animation: colorSlide 2.5s linear infinite,nudgeMouse 2.5s ease-out infinite;
}

#scrollDown{
    animation: banner 1.5s ease 2s both;

}




    #topBar{
        margin: 0 auto;
        max-width: 1400px;
        justify-content: flex-end;
        }

    
        #topBarLinks{
            width: 158px;
        }
        

@media only screen and (max-width: 770px) {
    .formMain input{
        -webkit-appearance: none;
    }
    #calc-submit{
        -webkit-appearance: none;
    }

    #calculatorForm input{
        -webkit-appearance: none;
    }


    #banner #gs-email1 input{
        width: 280px;
        padding: 2px 0px;
    }


    .emailButtons #gs-email{
        width: 280px;
        margin: 0 auto;
        padding: 0;
    }

    .emailButtons form input{
        width:280px;
        padding:0;
    }


    .emailButtons .buttonAccent{
        width:280px !important;
        margin: 0 auto !important;
    }

    .emailButtonsRow {
        display: block;
    }

    .emailButtons input{
        display: flex;
        margin: 0 auto;
    }

    h2,h1,h3{
        font-size: 22px !important;
        text-align: left;
    }

    .dividerContainer{
        padding: 40px 40px 20px 40px;
    }

    .divider{
        margin: 0 !important;
        width: auto !important;
    }

    #calc,#price{
        border-right:0 !important;
        border-left:0 !important;
    }

    #calc-emps{
        text-align: center;
    }

    p{text-align: left;}
    .calcInput,
    .calcSubmit{
        padding:14px !important;
    }
    .showHide{
    white-space: nowrap;
    }



    .emailButtonsRow .buttonAccent{
        margin-left: 0;
    }
.flexTop{display: block;}

.startChoices{
    display: block;
}

.btn-getstarted{
    margin-top: 40px;
}

.blogPostInfo{
    display: block;
}

.blogPostDate{
    text-align: left;
    border-top: 2px solid #dfe1e1;
    margin-top: 20px !important;
    padding-top:20px !important;
}

}



.startChoice{
    width: 100%;
}



.emailButtons .buttonRow{
    margin-top:20px;
}

.buttonRow .buttonMain{
    margin-right:30px;
}

.emailButtons{
    max-width: 500px;
    margin: 0 auto;
}

.emailButtons a{
    min-width: calc(50% - 10px);
}

.emailButtons .buttonMain,
.emailButtons .buttonAccent{
    width:100%;
    padding: 12px 0;
}

.orange{
    color: #fa6044;
}

#timeline{
    overflow-x: scroll;
    padding: 32px;
    background: #ffffff;
    border: 2px solid #eaeaea;
    border-radius: 6px;
    max-width:1400px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

#horizontalScroll{
    margin: 32px auto 0;
    max-width: 200px;
}

#scrollAnimation{
    width:32px;
    height:32px;
    margin: 0 auto;
    background: #eaeaea;
    border-radius: 16px;
    animation: scroll 3s linear infinite;
    position: relative;
}

.horizontalArrow{
    color: #0747a3;
    cursor: pointer;
}


@keyframes scroll{
    0%{
        left:-32px;
        opacity: 0;
    }
    10%{
        opacity: 1;
    }
    20%{
        left: 0px;
    }
    40%{
        left: 32px;
    }
    60%,100%{
        left: 32px;
        opacity: 0;
    }
}

p{
    font-size: 1em;
    letter-spacing: 0.025em;
    line-height: 1.4em;
}

.greyBackground{
    background: #eff3fa;
    padding: 80px 0;
}

.whiteBackground{
    background: #ffffff;
    padding: 80px 0;
}

.appBlock{
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-left: 32px;
    width: 100%;
    overflow: hidden;
    margin-right:-32px;
}

.appBlockSearchContainer{
    width: 50%;
}
.appBlockSortContainer{
    width:50%;
    background: #ececec;
    border-left: 1px solid #e0e0e0;
}

.appSearchIcon{
    width: 35px;
    text-align: right;
    margin-right: 4px;
}

.appBlockMain{
    overflow-y: auto;
    height: calc(100% - 85px);
    padding:32px 0 0 32px;
}

.appBlockMain .securityBannerCircle{
    width: 50px;
    height: 50px;
    border-radius: 5px;
    padding: 0;
    margin: 0 32px 32px 0;
}

.securityBannerCircle{
    width: 60px;
    height: 60px;
    border-radius: 5px;
    border: 2px solid #ececec;
    position: relative;
    margin: 0 auto 32px;
}

.secBannerTabbed .securityBannerCircle{
width:60px;
height:60px;
padding:0;
margin: 0 32px 0 0;
}

.secBannerTabbed{
    margin-right: -32px;
}

.flexWrap{
    flex-flow: row wrap;
    justify-content: space-between;
}

.flexWrap::after {
    content: "";
    flex: auto;
  }

.appBlockSelect{
    background: transparent;
    color: #484848;
    font-weight: 700;
}

.appBlockTop{
    border-bottom: 1px solid #e0e0e0;
}

#managedSection{
    background-image: url("/img/managedBG.jpg");
}

#quoteSection{
    background-image: url("/img/quoteBG.jpg");
}

.imageContainer{
padding: 140px 0;
    background: rgba(7, 71, 163, 0.6);
    color: #ffffff;
}


.imageBackground{
    background-size: cover;
    background-position: center;
}

.blueBackground{
    color: #ffffff;
    padding: 80px 0;
    background: #0747a3;
}

.blueSectionTop{
    padding:40px 0;
    color: #ffffff;
    background: #0747a3;
}



.blueSectionTop h1{
    margin:0;
}

.blueBackground a{
    color: #ffffff;
    transition: 0.3s;
}
/* 
.blueBackground a:hover{
    opacity: 0.7;
} */

.blueBackground .splitSection{
    align-items: flex-start;
    max-width: 750px;
    margin:60px auto;
}

.splitHeadings{
    text-align: center;
}

.profileSection{
margin:0 auto;
}

.profileSectionImage{
    min-width: 300px;
    min-height: 300px;
}


.profileSection img{
    width:100%;
}

/*-----TABLE-----*/


.tableToolTip{
    position:relative;
    flex-direction: row !important;
    z-index: 2;
}

.tableToolTip:after{
    content: "?";
    width: 14px;
    height: 14px;
    background: #DFE1E6;
    color: #0747a3;
    font-size: 10px;
    padding: 0;
    text-align: center;
    line-height: 1.6em !important;
    position: relative;
    left:6px;
    letter-spacing: 0;
    font-weight: 500;
}
.tableToolTip .toolTip{
    opacity: 0;
    transition: 0.5s;
    transform: translateY(10px);
}

.tableToolTip:hover .toolTip{
    transform: translateY(0);
    opacity: 1;
}


/* .toolTip{
    position: absolute;
    background: rgba(255,255,255,0.9);
    border: #0747a3 2px solid;
    padding:5px 10px;
    font-size: 12px;
    color: #0747a3;
    z-index: 10;
    top:-40px;
    -webkit-box-shadow: rgba(19,38,64,0.08) 4px 10px 10px;
    -moz-box-shadow: rgba(19,38,64,0.08) 4px 10px 10px;
    box-shadow: rgba(19,38,64,0.08) 4px 10px 10px;
    font-weight: 700;
} */




.tableCell{
    padding:20px;
    max-width:100%;
    height:30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.tableTop{text-align: center;}


#pageIndex .tableColumn .tableCell:nth-child(odd){
    background:#ffffff;}

#pageIndex .tableColumn .tableCell:nth-child(even){
    background: #f5f5f5;}

.tableColumn{
    width: 25%;
}



.tableColumn .tableCell{
    border-left: 2px solid #dfe1e6;
}

#pageIndex .tableColumn:last-child .tableCell{
    border-right: 2px solid #dfe1e6;
}

.tableColumn:first-child .tableCell:first-child{
    border-left: 0;
}


#pageIndex .tableColumn .tableCell:nth-child(2){
    border-top: 2px solid #dfe1e6;
}

#pageIndex .tableColumn .tableCell:last-child{
    border-bottom: 2px solid #dfe1e6;
}


#pageIndex .tableColumn:first-child .tableCell:first-child{
    border-top: 2px solid #ffffff;
}

#pageIndex .tableColumn .tableCell:first-child{
    border-top: 2px solid #dfe1e6;
}

.contentPage .tableColumn .tableGroupContent:first-child{
    border-top: none;

}

.tableColumn:first-child .tableCell:first-child{
    border-top: 2px solid #ffffff;
}



.contentPage .tableContents{
    max-width: unset;
}

.contentPage .tableColumn:nth-child(2) .tableCell {
border-left: 2px solid #dfe1e6;
text-align: left;
}

.tableGroups{
    width:500px;
}

.tableGroups .tableTop{
    border-top: 2px solid #ffffff;
}

.contentPage .tableTop{
    border-left: none;
}

.contentPage .tableColumn:nth-child(2) .tableCell{
    border-left:0;
}



.tableGroupContent{
    background: #fff;
}

.contentPage .tableContents{
    border:2px solid #dfe1e6;
}


.contentPage .tableTopContents .tableColumn:nth-last-child(2){
    border-left: 2px solid #dfe1e6;
    border-top: 2px solid #dfe1e6;
}

#pageFreeTools .tableTopContents .tableColumn:nth-last-child(2){
    border-left: 2px solid #ffffff !important;
    border-top: 2px solid #ffffff !important;
}

.contentPage .tableTopContents .tableColumn:nth-last-child(1){
    border-right: 2px solid #dfe1e6;
    border-top: 2px solid #dfe1e6;
    border-left: 2px solid #dfe1e6;
}

.contentPage .tableTopContents .tableColumn,
.contentPage .tableTopContents .tableGroups{
    border-left: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}

.contentPage .tableBottomContents .tableColumn:nth-last-child(1){
    border-right: 2px solid #dfe1e6;
    border-left: 2px solid #dfe1e6;
    border-bottom: 2px solid #dfe1e6;
}

.contentPage .tableBottomContents .tableColumn:nth-last-child(2){
    border-left: 2px solid #dfe1e6;
    border-bottom: 2px solid #dfe1e6;
}
    
#pageFreeTools .tableBottomContents .tableColumn:nth-last-child(2){
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

#pageFreeTools .freeToolsContainer{
    max-width: 1000px;
}


.contentPage .tableBottomContents .tableColumn,
.contentPage .tableBottomContents .tableGroups{
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}



.tableCellGroup{
    color: #132640;
    font-weight: 700;
    width: auto;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    font-size: 20px;
    background: #dfe1e6;
    padding: 0 10px;
    line-height: 1.8em;
    height: 100%;
}



.tableCellGroupMobile{
    color: #132640;
    font-weight: 700;
    display: flex;
    justify-content: center;
    text-align: left;
    flex-direction: column;
    font-size: 20px;
    background: #dfe1e6;
    padding: 20px;
    line-height: 1.8em;
    margin-bottom: -10px;
}


.tableCellGroup:nth-child(2){
    height: 210px;
    background:#f5f5f5 !important;

}
.tableCellGroup:nth-child(4){
    height: 350px;
    height: 210px;
    background:#f5f5f5 !important;

}
.tableCellGroup:nth-child(6){
    height: 420px;
    height: 210px;
    background:#f5f5f5 !important;
}
.tableCellGroup:nth-child(8){height: 210px;}



.tableContents{
    max-width: 1000px;
    float:none;
    margin:0 auto;
    padding:0;
    font-size: 14px;
    line-height: 1.3em;
}
.tableContents{margin-top:10px;}

.empty .tableCell{
    border-top:none !important;
    border-right:none !important;
    border-left:none !important;
}



.tableCell img{
    width:20px;
    height: 20px;
    margin:0 auto;
    float: none;
}




#blogWhitePaper {
    background: url(/img/blogWhitePaper.jpg) no-repeat;
    background-position: bottom;
    background-size: cover;
}


#blogInfoSec {
    background: url(/img/blogInfoSec.jpg) no-repeat;
    background-position: bottom;
    background-size: cover;
}

.postImage{
    border-radius: 0;
}


/*---- Profile Quote -----*/


.profileQuote{
color: #ffffff;
}

.profileQuote h2{
    margin: 0;
}


.splitSectionContainer {
    max-width: 1400px;
    margin: 0 auto;
}

.textCentre{
    text-align: center;
}

.statFigure{
    font-size: 2em;
    font-weight: 800;
    margin-top:32px;
    color: #0747a3;
}

.mono{
    font-family: monospace;
    margin: 16px auto;
}

.sectionTitle{
    margin-bottom: 32px;
}


.copyCentred{
    text-align: center;
    max-width: 670px;
    margin:0 auto;
}

.textCentred{
    text-align: center;
    margin:0 auto;
}

.splitRight,.splitLeft{
width:calc(50% - 50px);
}


#vidPlaceHolder{
    background: #ffffff;
    width: 100%;
    height:280px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    -webkit-box-shadow: rgba(19,38,64,0.08) 4px 10px 10px;
    -moz-box-shadow: rgba(19,38,64,0.08) 4px 10px 10px;
    box-shadow: rgba(19,38,64,0.08) 4px 10px 10px;
}

#vidPlaceHolder img{
    float: none;
    margin: 0 auto;
    
}

.splitSection{
    justify-content: space-between;
}

.splitSectionImg{
    width:100%;
}

.splitSectionCopy{
    width:100%; 
}

.icon300{
    max-width: 300px;
    margin:0 auto;
    margin-bottom: 40px;
}



.uiImg img{
    box-shadow: rgba(19,38,64,0.08) 4px 10px 10px; 
    -moz-box-shadow: rgba(19,38,64,0.08) 4px 10px 10px; 
    -webkit-box-shadow: rgba(19,38,64,0.08) 4px 10px 10px;
    background: #ffffff;
}


.container{
    margin: 0 auto;
    max-width: 1400px;
    padding:0 40px;
}

body{
    margin:0;
    font-family: acumin-pro, sans-serif;
    font-weight: 400;
    font-size: 16px;
    background: #ffffff;
    color:#132640;
    line-height: 1.8em !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h2 {
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3em;
}







.gradientBackground{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-10deg, #ffffff 51%, #f5f5f5 51%); /* FF3.6-15 */
background: -webkit-linear-gradient(-10deg, #ffffff 51%,#f5f5f5 51%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(-10deg, #ffffff 51%,#f5f5f5 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.gradientBackground2{
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(-10deg, #f5f5f5 51%, #ffffff 51%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-10deg, #f5f5f5 51%,#ffffff 51%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(-10deg, #f5f5f5 51%,#ffffff 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }



#topBarContent{
    max-width: 1400px;
    margin:0 auto;
    float:none;
    font-size: 14px;
    font-weight: 400;
    padding:0 40px;
}

#contactLink a{
    position: relative;
    top: 10px;
    padding: 13px;
    color: #747474;
    transition:0.2s;
    font-size: 12px;
    margin-left: 10px;
}

textarea.message{
    padding: 10px 0px;
}

#contactLink a:hover{
    color: #132640;
}

#phoneLink{
    font-size: 12px;
    font-weight: 400;
}

#phoneLink a{
    color: #747474;
    line-height: 1.6em;
    position: relative;
    top: 10px;
    padding: 13px;
    transition: 0.2s;
}

#phoneLink a:hover{
    color: #132640;
}


.socialIcon{
 padding: 10px 4px;
 width: 20px;
}

.socialIcon img{
 transition: 0.2s;
}

.socialIcon:hover img{
filter: brightness(0.7);
}



#topBarRight{
justify-content: flex-end;
}


#headerContainer{
    max-width: 1400px;
    margin:0 auto;
    float:none;
    position: relative;
    z-index: 4;
    background: #ffffff;
}

.formMain input,
.formMain textarea,
.formMain select{
    border:2px solid #ececec;
    border-radius:5px;
}

#header{
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    padding: 0;
    margin:0 auto;
    float:none;
    position: relative;
}

#pageStart .contentStart{
    flex-direction: column-reverse;
    display: flex;
}


#pageStart .containerStart{
    min-height: 300px;
}

.startDesc{
    margin-top: 100px;
}

#pageResourcesChild .splitHeadings{
    text-align: left;
}

#headerMain.scroll{
    position: fixed;
    z-index: 13;
    background: #ffffff;
    }

    #headerMain #headerContainer{
    transition: 0.5s;
    }

#headerMain.scroll #headerContainer{
    max-width: unset;
    -webkit-box-shadow: rgba(19,38,64,0.08) 0px 5px 5px; 
    -moz-box-shadow: rgba(19,38,64,0.08) 0px 5px 5px; 
    box-shadow: rgba(19,38,64,0.08) 0px 5px 5px; 
}

#headerMain.scroll nav ul li a{
    padding: 14px 20px;
    color: #254c80;
}

#headerMain.scroll nav ul .navItemParent a{
    padding: 14px 26px 14px 14px;
}


#topBar{
    padding:16px 40px;
}

.topBarLink{
    line-height: 1;
    position: relative;
}

.topBarLink a{
    padding:16px 0;
    color: #ffffff;
    font-size: 12px;
}

.topBarDivider{
    border-right:1px solid #ffffff;
    margin: 0 12px;
}

.topBarLink:after{
    content: "\00a0";
    width: 0%;
    height: 1px;
    left:0;
    bottom: -2px;
    background: #ffffff;
    position: absolute;
    transition: 0.5s ease;
}

#pageContact .topBarLink:first-child:after{
    width: 100%;
}

.topBarLink:hover:after{
    width: 100%;
}



#headerMain .navItem:hover,
#headerMain .navItemParent:hover{
    background: #f5f5f5;
}


#headerMain nav,#headerMain #logo,#headerMain,
#headerMain #search img{
    transition: 0.2s;
}



#headerMain{
    background:#ffffff;
    color: #254c80;
    transition:0.3s;
    top:0;
    height:auto;
    z-index: 1000000000;
    padding: 0 40px;
    -moz-box-shadow: rgba(0,0,0,0.05) 4px 4px 5px; 
    -webkit-box-shadow: rgba(0,0,0,0.05) 4px 4px 5px; 
    box-shadow: rgba(0,0,0,0.05) 4px 4px 5px; 
    position: relative;
}

nav{
    font-weight: 500;
    z-index: 10;
}

nav ul{
    list-style: none;
    margin:0;
}

#headerMain #logoMain{
    width: 150px;
    transition: 0.3s;
}

#headerMain.scroll{
    width:100%;
    padding:0;
}



#headerMain.scroll #logoMain{
    width: 110px;
}

#headerMain nav ul li a{
    padding: 20px 16px;
    color: #254c80;
    transition: 0.3s;
    font-size: 14px;
}

#headerMain nav ul .navItemParent a{
    padding: 20px 32px 20px 28px;
    transition: 0.3s;
}

#headerMain nav ul .navItemMobile a{
display: none;
}


#headerMain .buttonHeader{
    transition: 0.3s;
}

#headerMain.scroll .buttonHeader{
    border-radius: 0;
}

#headerMain nav ul .navItemParent:after{
transition: 0.3s;
}

#headerMain.scroll nav ul .navItemParent:after{
margin-top:27px;
margin-left:-10px;
}

.navItem{
    display: flex;
}

.navItemParent{
    display: flex;
    justify-content: flex-end;
}

#st-1.st-has-labels .st-btn{
    min-width: unset !important;
}

.navItemParent:after{
    content: "\00a0";
    background: url("/img/arrow.svg") no-repeat;
    position: absolute;
    width: 8px;
    margin-top: 33px;
    transform: translateX(-12px);
}

#header .navItem,
#header .navItemParent{
    transition:0.3s;
}



@media only screen and (min-width: 950px) {

    .stepLink:hover{
        background: #0747a3;
        color: #ffffff;
    }

    .scroll #header{
        padding: 0 16px;
    }



    #header .navItemParent > .dropDownContainer{
    transition:0.3s;
    transform-origin: top center;
    z-index: 2;
    height:0;
    overflow: hidden;
    opacity:0;
    }
    
    #header .navItemParent:hover > .dropDownContainer{
        opacity:1;
        overflow: visible;
        height:auto;
        transition-delay: 0.1s;
    }
    
    }


.dropDown{
    background:#ffffff;
    position:relative;
    color: #132640;
    transition: .2s;
    margin:0 auto;
    float: none;
    width: 1400px;
    margin:0 auto;
    -webkit-box-shadow: rgba(19,38,64,0.1) 4px 10px 10px; 
    -moz-box-shadow: rgba(19,38,64,0.1) 4px 10px 10px; 
    box-shadow: rgba(19,38,64,0.1) 4px 10px 10px; 
    border-top: 2px #dfe1e6 solid;
}


#headerMain .dropDownContainer{
    display: flex;
    position: absolute;
    left: 0;
    top:68px;
    max-width: 100%;
}

#headerMain.scroll .dropDownContainer{
    top:56px;
}

#headerMain.scroll .dropDown:before,#headerMain.scroll .dropDown:after{
width:0;
height:0;}

.aboutLink{
    padding:16px;
    margin-top:32px;
}

.dropDownLeft{
    min-width:450px;
    max-width:450px;
    border-right: 2px solid #dfe1e6;
    padding: 60px;
}

.dropDownHeading{
font-size: 26px;
color: #0747a3;
font-weight: 500;
margin-bottom: -16px;
margin-top: -32px;
line-height: 1.4em;
}

.dropDownDesc{
    font-size: 14px;
    color: #132640;
    font-weight: 400;
    margin-bottom: 40px;
    line-height: 1.6em;
}

.dropDownButton a{
    background:#254c80;
    color:#ffffff !important;
    font-family: acumin-pro, sans-serif;
    font-weight: 700;
    transition: 0.2s;
    text-decoration: none;
    padding:16px 30px !important;
    font-size: 16px;
    text-align: center;
    border: 2px solid #254c80;
}

.dropDownButton a:hover{
background: #fff;
color: #254c80 !important;
}

.dropDownIcon{
    height:30px;
}

.dropDownLink{
    font-size: 16px;
    font-weight: 500;
    margin-top:8px;
}

.dropDownRight p{
    font-size: 12px;
    color: #132640;
    line-height: 1.6em;
}
.dropDownRow a{
    transition: 0.5s;
    width: 50%;
    box-sizing: border-box;
}

.badge{
    background:#f5f5f5;
    padding: 4px 16px;
    border-radius: 4px;
}

.absolute{
    position: absolute;
}
.fixed{
    position: fixed;
}

.keyPhrase{
    position: relative;
    z-index: 1;
}

.pageBreak{
    max-width: 500px;
    height: 48px;
    margin: 0 auto;
    margin-bottom: -24px;
    z-index: 1;
    margin-top: -24px;
    position: relative;
    pointer-events: none;
}

.pageBreak:after {
    content: " ";
    height: 50%;
    width: 70%;
    background: white;
    position: absolute;
    display: block;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    margin: 0 auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.pageBreak:before {
    content: "";
    width: 100%;
    height: calc(100% + 4px);
    background: #ffffff;
    z-index: 1;
    position: absolute;
}

.pageBreak.dark:before {
    background: #eff3fa;
}

.keyPhrase:before {
    content: " ";
    height: 12px;
    background: #c9e4bf;
    position: absolute;
    left: -3px;
    z-index: -1;
    right: -3px;
    bottom: 4px;
}

.priceBlock{
    position: absolute;
    left: -52px;
    right: -52px;
    z-index: 2;
    transition: 0.5s;
}

.priceBlock:before{
    content: " ";
    width: 0;
    height: 0;
    border-bottom: 19px solid #132640;
    border-top: 19px solid transparent;
    border-left: 19px solid transparent;
    left: 0;
    position: absolute;
    top: -38px;
    z-index: 1;
}

.priceBlock:after{
    content: " ";
    width: 0;
    height: 0;
    border-bottom: 19px solid #132640;
    border-top: 19px solid transparent;
    border-right: 19px solid transparent;
    right: 0;
    position: absolute;
    top: -38px;
    z-index: 1;
}

.landingCalc{
    width:410px;
    min-width:410px;
    max-width:410px;
    margin-bottom: -120px;
    transition: 0.5s;
}

#landingBannerIcon{
    width:280px;margin-left:-42px;margin-top:-16px
}

.landingCalcImg{
    width: 32px;
    margin: -50px auto 32px auto;
}

.releaseImage{
    max-height: 300px;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}

.releaseImage:after{
    content: " ";
    position: absolute;
    background: transparent;
    background: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}

.releaseButton {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: -12px;
    background: #0747a3;
    max-width: 100px;
    margin: 0 auto;
    border-radius: 6px;
    padding: 8px;
    color: #ffffff;
    transition: 0.2s;
    font-weight: 700;
    border: 2px solid #0747a3;
    cursor: pointer;
}

.emoji{
    cursor: pointer;
    transition: 0.2s;
    transform: scale(1);
}

.emoji:hover{
    transform: scale(1.4)
}

.emoji.active{
    opacity: 1 !important;
}

.releaseCardContent{
    border-top: 1px solid #f6f6f6;
    margin-top: 16px;
}

.releaseButton:hover{
    background: #ffffff;
    color: #0747a3;
}

.releaseBadge{
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
}

.dropDownRow a:hover{
    background: #f5f5f5;
}

.dropDownRight ul{
    padding:0;
}

.dropDownRow{
    width:100%;
}
.dropDownRow a{
    width:50%;
}

.blogImageContainer{
    min-width:160px;
    max-width:160px;
}

.postCopy{
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6em;
}

.resourceDropDown .dropDownLeft{
    padding:0;
}

.resourceDropDown .dropDownLeftTop{
    padding:60px;
}

.featureContainer{
    padding:60px;
    background:#f5f5f5;
    border-top: 2px #dfe1e6 solid;
}

.dropdownImageContainer{
    border-top: 2px #dfe1e6 solid;
}

.resourceDropDown .dropDownLeft{
    max-width: 540px;
    min-width: 540px;
}

.resourceDropDown .dropDownRight{
width: 100%;
}

.resourceTitle{
    color: #254c80;
    font-size: 16px;
    font-weight: 700;
    padding: 42px 42px 0;
}

.resourceLink a{
    padding: 30px !important;
}

.resourceHeadingLink{
font-size: 18px;
}

.resourceHeadingLink{
    padding: 20px 0;
}

.resourceBy{
    width: 50%;
}

.resourceLink {
    padding: 0 0 10px 0;
    font-size: 14px;
    font-weight: 400;
}

.resourceBy a{
padding:10px 0 !important;
}

.resourceLink a:hover,
.resourceHeadingLink a:hover{
    background: none;
    opacity: 0.5;
}

/* .resourceDropDown .dropDownRight{
    padding: 40px 60px;
} */

.resourceDropDown .dropDownRow{
    margin-top:20px;
}

.featureSectionTitle{
    font-size: 18px;
    font-weight: 700;
    color: #254c80;
    margin-bottom: 20px;
}
/* 
.resourceDropDown .dropDown a:hover{
    background: none;
} */

.resourceDropDown .arrowButton a{
    padding: 0 !important;
}


.contentPage #banner{
padding: 60px 40px !important;
}


#banner{
    max-width: 1400px;
    float: none;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    padding: 62px 40px 72px;
}




@keyframes banner{
    from{
        transform: scale(0.9);
        opacity: 0;
    }
    to{
        transform: scale(1);
        opacity:1;
    }
}

.securityBannerLowerMob{
    background: #f9f9f9;
}




@media only screen and (max-width: 1080px) {
.imageTileSection{
    display: grid;
}

.bannerCopy{
    margin: 0 !important;
}

.featuresTitle{
    text-align: left;
}



#realtimeOverall{
    display: block;
}

#cultureAIActions{
    margin-top:8px;
}


#realtimeOverall:after{
    display: none;
}

.containerInnerLeft,
.containerInnerRight{
float: none !important;
max-width: unset !important;
}

.imageRow{
    width: 100% !important;
}

.statBlock{
    margin-bottom:32px;
}

.statBlockInner{
    margin-bottom:0;
}

.glassdoorRow{
    background: #ffffff;
    padding: 20px;
    margin-top: 16px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    margin-left: 0 !important;
}

.button i{
    display: none;
}

#resourcesVideo{
    height:300px;
}

.whitePaperImg{
    margin-bottom: 16px;
}


.buttonRow .button{
    margin-top: 16px;
}

.breadcrumbLink{
    background: #0747a3 !important;
    text-align: left;
    color: #ffffff !important;
    position: relative;
    height: auto;
    padding: 0;
    margin: 0 12px;
}

.breadcrumbLink.active{
    font-weight: 700;
}

.breadcrumbLink:after{
   content: "/";
   border: 0;
   right: -10px;
}

.breadcrumbLink:last-child:after{
    display: none;
 }

.breadcrumbLink:before{
    display: none;
}

.breadcrumbLinkHome{
    display: none;
}


.flexBreak{
    display: block;
}

#landingBannerIcon{
    margin: 0 auto !important;
}

.landingCalc{
margin: 48px 0 0 0 !important;
max-width: unset;
width: unset;
padding-bottom: 140px;
box-sizing: border-box;
}



.landingTextBlock{
    margin: 0 !important;
}

.landingBannerText{
    max-width: unset;
    width:unset;
}

#cookieButton{
    margin-top:32px;
    margin-left:0;
}



#resourceInfo{
    max-width: unset;
    min-width: unset;
    margin:0 !important;
}

#resourceContent{
    width: unset;
    margin-bottom: 32px;
}

.resourcesBlockLink,
.resourcesBlockLink2{
    display: block;
    width: auto;
    margin:0;
    margin-bottom: 32px;
}

.breakPadd{
   margin-top:32px; 
}

#blogLinks>*{
    display: block;
}

}




@media only screen and (max-width: 1200px) {

.accordionImg img{
    width: 500px !important;
}

.dropDownLeft{
    display: none !important;
}


    .hideMedium{
        display: none;
    }

    #bannerContent{
        display: block;
    }



    .navItemParent:after{
        margin-top: 31px;
        margin-left: -17px;    
    }

    .resourceDropDown .dropDownLeft {
        max-width: 500px;
        min-width: unset;
        display: flex;
        flex-direction: column;
    }

    .resourceDropDownRow{
        display: block;
    }

.resourceBy{
    width:100%; 
}

.resourceDropDown .dropDownLeftTop{
    border-bottom: 0;
}

.featureContainer{
    height: 100%;
}

#headerButtons .button{
    min-width: 90px;
}

        .buttonHeader a{
            padding:12px 30px;
            font-size: 12px !important;
        }

        nav ul li a{
            padding: 28px 14px;
        }

        nav ul .navItemParent a {
            padding: 28px 20px 32px 12px;
        }

        .tileSection{
            display: block;
        }

        .tileSingle{
            width: 100% !important;
        }


        .postImage{
            height:110px !important;
        }

        .dropDownContainer {
            top: 74px;
        }

        .dropDownLeft{
            border-bottom: 2px solid #dfe1e6;
            padding: 40px;
            min-width: auto;
            
        }

        .dropDownHeading{
            font-size: 16px;
            margin-bottom: 10px;
            padding-top:20px;
            }
            
            .dropDownDesc{
                font-size: 12px;
            }

        .dropDownButton a{
            font-size: 12px;
            padding: 10px 20px !important;
        }

}

.padd80{
    min-width:80px;
    max-width:80px;
    min-height: 80px;
    max-height: 80px;
}

.padd{
    min-width:60px;
    max-width:60px;
    min-height: 60px;
    max-height: 60px;
}
.padd40{
    min-width:40px;
    max-width:40px;
    min-height: 40px;
    max-height: 40px;
}

.padd20{
    min-width:20px;
    max-width:20px;
    min-height: 20px;
    max-height: 20px;
}

.officeBlockInner{
    padding:16px 24px;
}

.blueBackground{
background: #0747a3;
position: relative;
}

/* #headerSection:before{
    content: "";
    background-image: url("/img/background-temp.jpg");
    position: absolute;
    top: 0;
    background-size: 100px;
    left: 0;
    width: 100%;
    height: calc(100% - 117px);
    opacity: 0.012;
    pointer-events: none;
} */

/* .blueBackground:before{
    content: "";
    background-image: url("/img/background-temp.jpg");
    position: absolute;
    top: 0;
    background-size: 100px;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.012;
    pointer-events: none;
} */

#bottomBarRight{
    margin: 0 auto;
}

.page #banner{
    padding:50px 40px 50px 40px;
}

.startDesc{
    display: none;
}

@media only screen and (max-width: 870px) {
    /* #footerMain{
        display: block;
        width: auto;
    } */

    #footerUpperContainer{
        padding: 48px !important;
    }

    #siteMap ul {
        margin-right: 0 !important;
    }

}


#siteMap ul {
    width: 50%;
}



@media only screen and (max-width: 1050px) {
#calcResults{
    display: block;
}

.securityBannerItem:before,
.securityBannerItem:after{
    display: none;
}
.securityBannerItem {
    border-radius:10px 10px 0 0 !important;
}


.securityBannerCircle{
    margin: 0 !important;
    cursor: auto;
}

.securityBannerTextMob{
    margin-bottom: 32px;
}

.calcResultBlock{
    margin-top:32px;
}

.hideMobile{
    display: none !important;
}
}


@media only screen and (max-width: 950px) {
#bannerCreds{
    display: block;
    padding:0;
}

.companyPage .navItem:nth-child(4),
.resourcePage .navItem:nth-child(3),
.insightsPage .navItem:nth-child(2),
.featuresPage .navItem:nth-child(1){
    background:#e6e6e6;
}

.showNav #mobileShadow{
    opacity: 1;
}

#mobileShadow{
    box-shadow: rgba(0,0,0,0.05) 4px 4px 5px;
    height: 10px;
    width: 100%;
    position: fixed;
    top: 60px;
    z-index: 100;
    pointer-events: none;
}

.timelineBlockContainer{
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.timelineTopArea:before{
    left: calc(50% - 30px);
}

.date{
    width: calc(100% - 33px);
}

.timelineTopArea{
    min-width: calc(100% + 32px);
    width: calc(100% + 32px);
}

.timelineTopArea:last-child {
    padding-right: 0;
    min-width: calc(100% + 34px);
}

.timelineTopArea:last-child:after{
    display: none;
}

.securityBannerCircle{
    margin: 0 !important;
}


#jobListings{
    margin-bottom: 64px;
}

#scriptBlockTop{
    padding: 4px 16px !important;
}
#scriptBlockStatus{
    padding: 16px !important;
}

#scriptBlock {
    max-height: 320px !important;
}

.scriptLine{
    font-size: 1em !important;
    line-height: 1.4em !important;
}

.scriptTime{
    font-size: 0.8em !important;
}

.videoInner {
    max-width: 400px !important;
}

.guideSelector{
    min-width: 22px;
    max-width: 22px;
}

.navItemParent:after{
    display: none;
}

.hide950{
    display: none;
}

#banner h1{
    font-size: 28px;
}

.greyBackground,.blueBackground,.whiteBackground{
    padding:60px 0;
}

#scriptBlockContainer{
    position: relative !important;
    width: 100% !important;
    margin-top: 64px;
}




#map{
    width: 100% !important;
}



#scriptBlockTooltip,
#expandIcon{
    display: none;
}

.alwaysCentre{
    text-align: center !important;
}

.credsRow{
justify-content: space-evenly;
}

#banner .bannerCred{
opacity: 1;
padding:20px;
}

#buttonRow .flex{
    display: block;
}

#bookDemo{
   margin-top: 20px;
}

#banner .bannerCred:hover{
transform: scale(1) !important;
}}



@media only screen and (max-width: 700px) {

    .button{
        width: 100%;
        display: block;
        padding: 16px 0 !important;
    }

    .buttonRow{
        flex-direction: column;
    }

    #bottomBar{
        display: block;
    }

    #bottomBarLeft,
    #bottomBarRight{
    justify-content: center;
    }


    .postImage{
        height: 200px;
    }

  #siteMapLeft,#siteMapRight{
flex-direction: column;  
justify-content: space-between;
}
  }

  

  #tilesLeft,#tilesRight{
width:100%;
}

  @media only screen and (max-width:600px){

  #tilesLeft,#tilesRight{
    display: grid;
}

.tileSingle{
    width: auto !important;
}

.contentPage #banner{
    padding: 20px 40px 50px 40px !important
}

.contentPage #bannerContainer {
    min-height: 90px;
}

}


@media only screen and (max-width:500px){
#siteMap{
    justify-content: space-around;
}

#bottomBarRight{
    display: block;
    text-align: center;

}

#bottomBarSoc{
    width: 60px;
    margin: 0 auto;
}

#heroBlock{
    padding:60px !important;
}

.postImage{
    height: 200px;
}
}


#burgerMenu{
    display: none;
}

  #mobileDropdown{
    position: absolute;
    left: 0;
    top: 80px;
    width: 100%;
    padding:60px;
    background:#ffffff;
    right:0;
    opacity:0;
  }

.button{
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    border-radius: 3px;
}

.buttonMain{
    background:#ffffff;
    color:#0747a3;
    font-family: acumin-pro, sans-serif;
    font-weight: 700;
    text-decoration: none;
    padding: 12px;
    font-size: 14px;
    min-width: 140px;
    text-align: center;
    transition: 0.1s;
    border:0;
}


.jobListing h4{
    color: #0747a3;
    margin: 0;
}

#jobListings{
    background: #f9f9f9;
    padding: 16px;
    border-radius: 10px;
}

.logoDownload{
    width: 100%;
    margin-right:32px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.1);
    overflow:hidden;
}

.logoDownload img{
    cursor: auto;
    display: block;
    pointer-events: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.downloadLinks{
    margin: 32px auto;
    width: 200px;
    font-size: 1.1em;
    font-weight: 700;
}

.downloadLinks a{
    color: #0747a3;
    transition: 0.1s;
}

.colourBlock,
.photoBlock{
    width: 100%;
    margin-right:32px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.1);
    overflow:hidden;
}

.photoBlock{
    padding:32px;
    background: #ffffff;
}

.photoBlock:last-child{
    margin-right: 0;
}

.photoBlock h4{
    margin-top: 0;
}

.colourBlockArea{
    height:32px;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.colourBlock:last-child{
    margin-right: 0;
}

.downloadLinks a:hover{
    opacity: 0.7;
}

.downloadCol{
    padding-right:32px;
    border-right: #888888 1px dotted;
    margin-right:32px;
}



.jobListing{
    border-bottom: 1px solid #dfe1e6;
    padding: 16px;
    transition: 0.2s;
}

.jobListing:hover{
    background: #ffffff;
}

.jobListingLink:last-child .jobListing{
    border-bottom: 0;
}

.logoDownload img{
    width:100%
}


.whiteBackground .buttonMain{
    background:#0747a3;
    color:#ffffff;
}

.buttonGreen{
    background-color:#58b03a;
    color:#fff;
}

.buttonBlue{
    background-color:#0747a3;
    color:#fff;
}

.buttonSecondary{
    background:#0747a3;
    border:#ffffff 1px solid;
    color:#ffffff;
    font-family: acumin-pro, sans-serif;
    font-weight: 400;
    text-decoration: none;
    padding: 12px;
    font-size: 14px;
    min-width: 170px;
    text-align: center;
    transition: 0.1s;
}

#resourcesLower .buttonSecondary{
    border:#0747a3;
}


#content{
    background: #0747a3;
}

#statsContainer{
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px;
}

#statsSection{
    background: rgb(7,71,163);
    background: linear-gradient(180deg, rgba(7,71,163,1) 30%, #eaeaea 30.01%);
}


.tooltip{
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    opacity: 0;
}

.tooltip-inner {
    max-width: 300px;
    padding: 20px;
    color: #fff;
    text-align: center;
    background-color: #053882;
}


.bannerCopy{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.statBlock{
    background: #ffffff;
    width: 100%;
    margin-right: 32px;
    text-align: center;
    box-shadow: 0px 0px 13px rgba(0,0,0,0.04);
    transition: 0.3s;
    position: relative;
    top: 0;
    border-radius: 5px;
    color: #132640;
}

.statBlockInner{
    padding: 42px 32px;
}

.statHead {
    font-size: 12px;
    text-transform: uppercase;
    color: #b0b0b0;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

.eyebrow{
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #b8b8b8;
    letter-spacing: 0.15em;
    margin: 0;
    padding: 0;
    line-height: 1;
}

#banner .eyebrow{
    color: #ffffff;
    opacity: 0.5;
}

h2{
    margin:0;
}



/* .statBlock:hover{
    top:-10px;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.08);
} */

/* .statBlock span{
    font-weight: 700;
    font-size: 24px;
    position: relative;
    letter-spacing: 0.06em;
} */

/* .statBlock span:after{
    content: " ";
    width:8px;
    height:12px;
    background: green;
    position: absolute;
    right:-12px;
    top:5px;
    background: url("/img/stat_arrow.svg");
    background-repeat: no-repeat;
} */

.statBlock:last-child{
    margin-right: 0;
}

.buttonSecondary:hover{
    background:#053882;
}

.button:hover{
    opacity: 0.85;
}

a:-webkit-any-link {
text-decoration: none;
}


.buttonAccent a{
    color:#ffffff;
}

a{
    text-decoration: none;
}

.buttonAccent{
    color:#ffffff;
    min-width: 170px;
    background:none;
    border: 2px solid #ffffff;
    font-family: acumin-pro, sans-serif;
    font-weight: 700;
    transition:0.2s;
    padding:12px 12px;
    font-size: 14px;
    text-align: center;
}



.whiteBackground .buttonAccent,.greyBackground .buttonAccent{
border: 2px solid #0747a3;
color: #0747a3;
}

#logoMain{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#heroBlock{
    background:#ffffff;
    margin:0 auto;
    float:none;
    padding: 60px 80px;
    box-shadow: rgba(0,0,0,0.05) 0 0 15px;
    -moz-box-shadow: rgba(0,0,0,0.05) 0 0 15px;
    -webkit-box-shadow: rgba(0,0,0,0.05) 0 0 15px;
    border: 2px solid #dfe1e6;
}

#heroBlockContainer{
    margin: -180px 40px -199px 40px;
    position: relative;
}

#heroCopy{
    font-size: 18px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#heroIcon{
    min-width: 210px;
    max-width: 210px;
}


.headingContainer{
    /*max-width: 1000px;*/
    margin: 0 auto;
    text-align: center;
    padding-top: 120px;
    padding-bottom: 80px;
}

.headingSection{
    margin: 0 auto;
    max-width: 1000px;
}

.sectionContainer{
margin: 0 40px;
}

.sectionContainer:last-child{
    padding-bottom:60px;
}

.tileSection{
    max-width: 1200px;
    margin:0 auto;
}

.padd100{
    padding:50px;
}

.tileSingle{
    background:#ffffff;
    border: 2px solid #dfe1e6;
    padding:36px;
    transition:0.3s;
    width:100%;
    color: #132640;
}

.tileSingle h3{
    margin: 0;
}

.tileSingle img{
    width:60px;
    margin-top:-10px;
}

.tileSingle:hover,
.imageTileSingle:hover{
    border: 2px solid #0747a3;
    background:#f8f9fa;
}


.arrowButton{
    color:#005dc0;
    font-weight: 500;
}


.arrowButton:after{
    content: "\00a0";
    background: url("/img/buttonArrow.svg") no-repeat;
    position: absolute;
    width: 20px;
    margin-top: 9px;
    margin-left: 9px;
    transition: 0.2s;
    height: 8px;
}

.tileSingle:hover .arrowButton:after,
.imageTileSingle:hover .arrowButton:after,
.dropDownRight a:hover .arrowButton:after,
.arrowButton:hover:after
{
    margin-left:12px;
}
.accordionIcon{
width:40px;
height:40px;
margin-right:20px;
}

.accordionSelectMobile{
    display: none;
}

.accordionContainer{
    max-width: 1200px;
    margin:0 auto;
    justify-content: space-between
}
.accordionTitle h3{
font-size: 16px;
font-weight: 500;
margin:0;
}

.accordionTitle{
justify-content: center;
text-align: center;
}

.accordion,
.accordionshown{
    width:100%;
}

.accordionshown{
    color: #0747a3;
}

.accordion{
    padding: 10px 40px;
    background: #f5f5f5;
    transition:0.3s;
    border-top: 2px solid #dfe1e6;
    border-left: 2px solid #dfe1e6;
    border-bottom: 2px solid #dfe1e6;
}


.accordion:last-child{
    border-right: 2px solid #dfe1e6;
}
.accordionshown:last-child{
    border-right: 2px solid #dfe1e6;
}

.accordionshown{
    padding: 10px 40px;
    border-top: 2px solid #dfe1e6;
    border-left: 2px solid #dfe1e6;
    border-bottom: 2px solid #ffffff;
    background: #ffffff;
}


.accordion p,
.accordion .arrowButton{
    display: none;
}

.accordionshown p,
.accordionshown .arrowButton{
    display: block;
}

.accordion:hover{
    background: #DFE1E6;
    color: #0747a3;
}
.accordion:hover .accordionIcon{
    opacity: 1;
}


.accordion:hover p{
    display: block;
}

.accordion:hover .arrowButton{
    display: block;
}

.accordionCopy{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(50% - 100px);
}

.accordionHeading img{
    width: 45px;
    height: 45px;
    margin-top:-10px;
}

.accordionHeading{
    font-weight: 500;
    color: #0747a3;
}

.accordionImg img{
    width: 683px;
    box-shadow: rgba(19,38,64,0.08) 4px 10px 10px; 
    -moz-box-shadow: rgba(19,38,64,0.08) 4px 10px 10px; 
    -webkit-box-shadow: rgba(19,38,64,0.08) 4px 10px 10px; 
}

#resourcesLowerContainer{
    border-top: 1px dashed #000000;
    padding-top:32px;
    margin-top: 32px;
}

#resourcesLower{
    background: #eff3fa;
    padding: 32px;
}

.accordionContentB{
    flex-direction: row-reverse;
}


.connectLine{
    height: 30px;
    border-right: 2px solid #dfe1e6;
    margin: 0 auto;
    width: 1px;
}

.trailSection:first-child,
.trailSection:last-child{
    background: #f8f9fa;
}

.trailSection h3{
    font-size: 22px;
    font-weight: 400;
    margin-bottom:10px;
    margin-top: 10px;
}

.trailSection p{
    max-width: 400px;
    margin:0 auto;
    float:none;
    padding-bottom: 10px;
}

.trailSection{
    padding:10px 40px;
    text-align: center;
    background: #ffffff;
    border: 2px solid #dfe1e6;
    margin:0 auto;
    max-width: 550px;
}

#theTrail .trailSection,
#theTrail .connectLine{
    transition:1s;
    transform:translateY(-20px);
    opacity:0;
}

#theTrail.animate .trailSection,
#theTrail.animate .connectLine{
    opacity: 1;
    transform:translateY(0);
}

#trailB,#lineB{transition-delay: 0.1s !important;}
#trailC,#lineC{transition-delay: 0.2s !important;}
#trailD,#lineD{transition-delay: 0.3s !important;}
#trailE,#lineE{transition-delay: 0.4s !important;}


.priceCalc{
    max-width: 1920px;
    margin:0 auto;
}

#calc{
    background: #fff;
    margin: 0 auto;
}

#price{
    text-align: center;
}


#calculatorForm {
    display: flex;
    justify-content: space-evenly;
}

.calcResultTop{
    background: #0747a3;
    color: #ffffff;
    padding:12px;
    text-align: left;
    font-weight: 700;
}

#calc-title{
    background: #0747a3;
    color: #ffffff;
    padding: 10px 20px;
    max-width: 307px;
    position: relative;
    margin-top: 50px;
    border-radius: 6px 6px 0 0;
}

#calc-title:after{
    content: '';
    position: absolute;
    left: 21px;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #0747a3;
    z-index: 1;
}

#calcResults{
    margin-top: 40px;
}

.calcResultContent{
    padding:32px;
}

.calcResultBlock{
    margin-right:32px;
    width:100%;
    background: #f2f2f2;
}

#calcGetStarted{
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#calcGetStartedContainer{
background: #f2f2f2;
transition:0.2s;
}

#calcGetStartedContainer:hover{
    background: #0747a3;
}

#calcGetStartedInner{
    padding:30px;
}

#calcGetStartedContainer a{
transition: 0.2s;
color: #0747a3;
font-weight: 700;
}

#calcGetStartedContainer:hover a{
    color: #ffffff;
}

.expectedRow{
    
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.expectedRowSm {
    font-size:1.0em;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.expectedRow:last-child{
    border-bottom: 0;
}

#calcResultPrice{
    border: 4px solid #0747a3;
}

.calcResultBlock:last-child{
    margin-right: 0;
}

.hide{
    opacity: 0;
    transition: 0.5s;
    position: relative;
    top: -10px;
}

.showDisplay{
    opacity: 1;
    top: 0;
}

#result{
    font-size: 40px;
    color: #6fc45b;
    font-weight: 700;
    margin-bottom: 16px;
}

.calcInput{
    background: #e8e8e8;
    width: 100%;
    border-right: none;
    font-size: 16px;
    padding: 16px;
}

.calcSubmit{
    font-size: 16px;
    padding: 16px 35px;
    background: #6fc45b;
    border-color: #6fc45b;
    color: white;
    font-weight: 500;
    transition: 0.2s;
    width: 200px;
    white-space: nowrap;
}

#offices .resourcesBlockLink2{
    padding: 0;
}


#calcContainer{
    width:100%;
}

.calcSubmit:focus{
color: #132640;
}

.calcSubmit:hover{
    background: #dfe1e6;
    color: #132640;
    border-color: #dfe1e6;
}

.showHide{
color: #005dc0;
cursor: pointer;
}

.showHide:after{
    content: "\00a0";
    background: url("/img/downArrow.svg") no-repeat;
    position: absolute;
    width: 8px;
    margin-left: 5px;
    margin-top: 9px;
    transition:0.5s;
    transform-origin: 5px 4px;
}

.show{
opacity:1;
}

.showHide.showDisplay:after{
    transform:rotate(180deg);

}

.show.showDisplay{
    display: block;
    opacity: 1;
}


.imageTileSingle{
    background:#ffffff;
    border: 2px solid #dfe1e6;
    transition:0.3s;
    width:100%;
    color: #132640;
}

.imageTileSection{
max-width: 1200px;
margin:0 auto;
}

.imageTileContent{
    padding: 20px 40px 40px 40px;
}

.divider{
    width:60px;
    border-bottom: 2px solid #dfe1e6;
    margin: 0 auto;
}

.dividerContainer{
    background: #ffffff;
}

.pageDivider{
    width:150px;
    border-bottom: 2px solid #dfe1e6;
    margin: 0 auto;
}

.postDetails{
    color:#005dc0;
    margin-bottom: 20px;
}
.postBy{
    border-left:1px solid #005dc0;
    padding-left: 10px;
}

.postDate{
    padding-right: 10px;
}

.postImage{
    height:200px;
}

#postImageA{
    background:url("/img/blogA.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}


#footerSocial img{
    transition: 0.2s;
}


#footerSocial img:hover{
    opacity: 0.7;
}

#postImageB{
    background:url("/img/blogB.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}

#postImageC{
    background:url("/img/blogC.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}


footer{
    background: #0747a3;
padding: 40px;
}

#footerUpperContainer{
    background: #013680;
padding: 100px;
color: #ffffff;
text-align: center;
}

#footerMidContainer{
    background: #0747a3;
    padding: 64px;
    color: #ffffff;
    border-bottom: 1px solid #2667c7;
}


#footerUpper .buttonRow{
    margin-top:62px;
    margin-bottom: 32px;
}

#footerMid h3,
#footerUpper h3{
    font-weight: 400;
}

#footerRight{
    color: #ffffff;
    text-transform: uppercase;
}

#footerLowerContainer{
    margin:32px 0;
}

#footerLower,
#footerMid,
#footerUpper,
#footerMain{
margin: 0 auto;
max-width: 1400px;
}

#logoFooter{
    margin-top:32px;
    width:160px;
}

#footerContent{
justify-content: space-between;
padding-top: 20px;
margin-top: 20px;
}


#bottomBarContainer{
    background: #0747a3;
    padding: 0 40px;
}


#bottomBar{
margin:0 auto;
max-width: 1200px;
justify-content: space-between;
}

#copyright{
    font-size: 12px;
    color: #bccde6;
    font-weight: 400;
    margin-top: 40px;
}

#siteMap ul li{
    list-style: none;
    line-height: 1.2em;
    margin: 14px 0;

}

#siteMap ul{
    padding: 0;
}


.siteMapChild:hover{
    color: #6e93c9;
}
.siteMapParent:hover{
    color: #6e93c9;
}


#siteMap ul{
    margin-right: 60px;
    padding-top:0;
    margin-top:0;
}

#creds{
    justify-content: space-evenly;
}

.siteMapParent{
padding:6px 0;
color: #bccde6;
font-weight: 500;
transition: 0.2s;
text-transform: uppercase;
font-size: 16px;
letter-spacing: 0.1em;
}



.siteMapChild{
    color: #ffffff;
    transition: 0.2s;
    padding:6px 0;
    font-size: 14px;
}

#footerLogo{
    width:80px;
    margin-right: 32px;
    }

    #footerMid h2{
        margin-bottom: 0;
        margin-top:16px;
    }

#footerLogo img{
    width:100%;
}



.button2x{
    font-size: 1.1em;
    padding: 1.1em 2.4em;
    font-weight: 700;
}

.block{
    display: block;
}

#offices h4{
    margin:0;
    color: #0747a3;
}

#offices .block{
    width: 160px;
    border-left: 2px solid #eaeaea;
}

#footerCreds{
    max-width: 1400px;
    margin: 40px auto 0 auto;
}

.bottomBarLink{
    padding: 20px 0;
    font-size: 12px;
    color: #ffffff;
    transition: 0.2s;
    margin-right: 20px;
}

.bottomBarLink:hover{
    color: #6e93c9;
}

#bottomBarSoc{
    margin-top: 11px;
}

.accordionMain{
    cursor: pointer;
}


/* .bannerCol{
    width: 50%;
} */


#burgerMenu{
    display: none;
}

h1{
    line-height: 1.3em;
    font-weight: 600;
    margin: 0 0 15px 0;
    font-size: 1.9em !important;
    }

h2{
        margin: 0 0 15px 0; 
    }

#pageStart #banner{
    padding:60px;
}

.trioSection .copyCentred{
flex-basis: 0;
flex-grow: 1;
}


@media only screen and (max-width: 1465px){
    .flexBreakEarly{
        flex-direction: column-reverse;
    }

}

#footerMid .button{
    width: 200px;
}


@media only screen and (max-width:750px){

    #siteMap{
        flex-wrap: wrap;
    }
}


@media only screen and (max-width: 950px) {

    .containerSplit{
        flex-direction: column-reverse;
        margin: 40px 0;
    }

    #footerButtons{
       display: none;
    }

    #footerLowerOnline{
        display: block;
    }

    #headerButtons{
        display: none;
    }

    #logo{
        margin-left:0px !important;
    }

    #footerMid{
        display: block;
    }

    #footerMid h2{
        margin-top: 0;
    }

    #footerMid .button{
        width: 100%;
    }

#statsSection{
    display: none;
}

    .bannerInner{
        display: block;
    }

    /* .bannerCol{
        width: 100%;
        margin: 0 !important;
    } */


    .imageGradientOverlay{
        display: none;
    }

    .matrixImage{
        margin-bottom: 40px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        animation: none !important;
    }

    .mobileEyebrow{
        margin-top: 64px;
    }

    .mobilePaste .featuresTitle{
        margin: 0;
    }

    .matrixLink{
        display: none;
    }

    #footerCreds{
        margin: 0;
    }

    .trioSection{
        display: block;
    }



    .blogBanner{
    height:320px;
    }
#footerContainer{
    display: flex;
    flex-direction: column-reverse;
}

.reverse{
    flex-direction: column-reverse;
}

.flexSwap{
    flex-direction: column;
}


#footerMain{
    margin: 10px 0px;
}

    #footerCreds{
        display: block;
    }


    .tableGroupContent{
       border-left: none;
    }    


    .contentPage .tableColumn:nth-child(3),
    .contentPage .tableColumn:nth-child(4){
        width:100%;
    }
    .tableCellGroupMobile{
        margin-top: 10px;
    }

    .contentPage .tableColumn:nth-child(2){
        width:500px;
    }

    .hideDesktop{
        display: block !important;
    }

    .tableTopContents{
        margin-bottom: -10px;
    }

.accordionImg img{
    width: 100% !important;
}

.accordionContent{
    display: block;
}

.accordionCopy{
    width: 100%;
}

    #headerMain.scroll .dropDownContainer {
        top: 58px;
    }

    #headerMain.scroll ~ #banner {
        margin-top: 0;
    }

    #headerMain.scroll #logoMain{
        width: 150px;
        margin-top:0;
    }

    #headerMain.scroll #headerContainer{
        box-shadow: none;
    }

#bannerContainer{
margin-top:0;
}

#siteMap{
    justify-content: space-between;
}


.priceCalc{
display: block;
}

#calc{
    width:auto !important;
}
#price{
    width:auto !important;
    border-top: none !important;
}

#creds{
    display: grid;
}

.imageTileSingle{
    width: auto !important;
}

.accordionSelectMobile{
    display: block;
}

.postImage{
    height: 500px;
}


#greyContainer{
    background: #f5f5f5;
}

#banner{
    padding:40px;

}
#heroBlockContainer{
    margin: 0 40px !important;
    position: relative;
    z-index: 1;
}
#headerMain{
    position: relative;
    width:100%;
    padding:0;
    transition:0;
}
#headerContainer{
    border-radius: 0 !important;
    transition:0;
}
#burgerMenu{
    display: block !important;
}
#headerMain.scroll{position: relative;}

    #topBar{
        display: none;
    }


#burgerMenu{
    height: 70px;
    width: 70px;
    display: block;
    background: url("/img/burger.svg");
    background-size: cover;
    margin-right: 16px;
}

.showNav #header{
    position: fixed;
    width: 100%;
    background: #ffffff;
}

.showNav{
    overflow-y: hidden;
}

.showNav #desktopNav{
    right:0 !important;
    position: fixed;
    height: calc(100vh - 70px);
    overflow-y: auto;
    overflow-x: hidden;
}

.showNav #content{
    position: fixed;
    width: 100%;
}

.showNav #burgerMenu{
    height: 70px;
    width: 70px;
    display: block;
    background: url("/img/burgerCross.svg")no-repeat;
    background-size: contain;
    background-position: right;
    margin-right:16px;
}

#logoMain{
    margin-left: 16px;
}

#desktopNav{
    position: absolute;
    right:150%;
    display: block;
    background: #f8f9fa;
    width: 100%;
    transition:0.2s;
    padding-left:0;
    top:70px;
}

.dropDownLeft,.dropDownIcon,.dropDownRow p,.dropDownRow .arrowButton{
    display: none !important;
}

.dropDownRow{
    display: block;
}



.navItem,.navItemParent,.navItemMobile{
justify-content: flex-start;
border-bottom:1px solid #ebebeb;
width: 100%;
}

.navItem a,.navItemParent a,.navItemMobile a{
    padding: 33px !important;
    width: 100%;
}

.navItem:hover,.navItemParent:hover,.navItemMobile:hover{
    background: #dfe1e6 !important;
}

.navItemMobile a{display: block !important;}

.navItemParent:after{
    transform: rotate(-90deg);
    right:20px;
}


.dropDownContainer{
    position: relative;
    margin:0;
    top:0;
    max-width: unset;
display: none !important;
    }
    
 .dropDownAppear.dropDownContainer{
    display: block !important;
    position: relative !important;
    top:0 !important;
    }


.splitSection{
    display: block;
}

.splitLeft,.splitRight{
    width:auto;
}



.profileSection{
flex-direction: column;
}

.profileSection img{
margin: 0 auto;
    }

    .accordionImg{
        width: 100%;
    }

.accordionContentB,
.accordionContentB{
flex-direction: column;
}


.tableToolTip {
    flex-direction: column !important;
}

.tableToolTip:after{
    left: calc(50% - 7px);
    top:5px;
}

.tableCell{
    padding:10x;
    height: 50px;
}

.tableColumn:first-child{
    min-width: 100px;
    font-size: 10px;
}

.tableTopContents{
    font-size: 12px;
    line-height: 1.4em;
}




.dropDownAppear .dropDown:after,
.dropDownAppear .dropDown:before{
    display: none;
}
    
.navItemParent{
    flex-direction: column;
}

.dropDown{
    -moz-box-shadow: 0 0 0 0;
    -webkit-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
    background: #ffffff;
    border-radius: 0 0 0 0;

}

.dropDownLink{
    font-size:12px;
    padding:10px 30px;
}
.dropDownRow:last-child{
    margin-bottom: 20px;
}

.dropDownRow a{
padding:0 !important;
}

.dropDownRow a:hover{
    background:#fff;
}



#heroBlock{
    padding:40px !important;
}
.resourceDropDown .dropDownRight {
    padding: 30px;
}

#calc-title{
    max-width: unset;
}

.timeLineTop {
    position: relative;
    color: white;
    max-width: 210px;
    margin: 0 auto;
    margin-top: -20px;
}
.timeLineTop span{
    display: flex;
    position: absolute;
    width: 150px;
    align-items: center;
    flex-direction: column;
    top: calc(50% - 24px);
    font-weight: 700;
    text-align: center;
    margin:0 auto;
    left:0;
    right:0;
}

#timeLineRoute{
    justify-content: space-between;
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.timeLineRoute{
    background: white;
    border: 2px solid #dfe1e6;
    width:50%;
    padding:20px;
}

#timeLineD{
    max-width: 260px;
    position: relative;
    left: calc(50% - 130px);
}


}

@media only screen and (max-width: 550px) {
.formContainer{
    display: block;
}
.toolTip{
    font-size: 9px;
    font-weight: 400;
}

#pageIndex .tableColumn .tableCell:nth-child(2){
    height: 120px;
}

.timeLineRoute{
font-size: 12px;
line-height: 1.5em;}

.tableCell{
    padding:10px;
}

.toolTip{
    left: -30px;
    right: 10px;
}
.toolTip:after{
    left: calc(50% - -14px);
}

.tableCell:first-child{
    min-width: 50px;
}
.tableContents{
    font-size: 10px;
}

#pageIndex .tableTop.tableCell{
    height:20px;
    justify-content: flex-start;
}
.hideXS{
    display: none !important;
}

.keyPhrase:before{
    content:none;
}

.showXS{
    display: block !important;
}
.formHeading{
    display: flex;
    flex-direction: column;
}
#pageContact form input,
#pageContact form select,
#pageContact form textarea{
    width:260px;
    padding: 0;
}

#pageContact .submitButton{
    justify-content: flex-start;
}

.buttonSingle{
    display: block;
}

.profileSectionImage {
    min-width: 210px;
    min-height: 210px;
}



#asterisks{
    font-size: 12px;
    position: relative;
    top: 10px;
}


.emailButtonsRow{
    display: block;
}
.textColumns{
    display: block;
}
.textColumn{
    width:100% !important;
}

}



.hideXS{
    display: block;
}
.showXS{
    display: none;
}



.textColumn{
    width: calc(50% - 20px);
    text-align: left;
}


/* Automated Awareness Programme SVG */



#automateAwarenessDiagram .st0{fill:#FFFFFF;}
#automateAwarenessDiagram .st1{fill:#DFE1E6;}
#automateAwarenessDiagram .st2{fill:#0747a3;}
#automateAwarenessDiagram .st3{fill:#48D5C5;}
#automateAwarenessDiagram .st4{fill:#195DC0;}
#automateAwarenessDiagram .st5{fill:none;stroke:#FFFFFF;stroke-width:1.0272;stroke-linecap:round;stroke-linejoin:round;}
#automateAwarenessDiagram .st6{fill:none;stroke:#FFFFFF;stroke-width:1.0272;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#automateAwarenessDiagram .st7{fill:none;}
#automateAwarenessDiagram .st8{font-family:'FormaDJRDisplay-Bold';}
#automateAwarenessDiagram .st9{font-size:20.9443px;}
#automateAwarenessDiagram .st10{letter-spacing:2;}
#automateAwarenessDiagram .st11{fill:#132640;}
#automateAwarenessDiagram .st12{font-family:'FormaDJRDisplay-Regular';}
#automateAwarenessDiagram .st13{fill:#EB61A7;}
#automateAwarenessDiagram .st14{fill:#EB6148;}
#automateAwarenessDiagram .st15{fill:none;stroke:#FFFFFF;stroke-width:1.0272;stroke-miterlimit:10;}
#automateAwarenessDiagram .st16{fill:#E3CD72;}
#automateAwarenessDiagram .st17{fill:#48D579;}
#automateAwarenessDiagram .st18{fill:none;stroke:#FFFFFF;stroke-width:1.0272;stroke-linecap:round;stroke-miterlimit:10;}
#automateAwarenessDiagram .st19{fill:none;stroke:#FFFFFF;stroke-width:1.5965;stroke-miterlimit:10;}


#automateAwarenessDiagram #employee .st0 ~ .st2,
#automateAwarenessDiagram #employee .st0 ~ g path.st2,
#automateAwarenessDiagram #employee .st0,
#automateAwarenessDiagram #training .st17,
#automateAwarenessDiagram #insights .st16,
#automateAwarenessDiagram #empower .st14,
#automateAwarenessDiagram #reporting .st13,
#automateAwarenessDiagram #assess .st4,
#automateAwarenessDiagram #integrate .st3{
transition: 0.2s;
cursor: pointer;
}

#automateAwarenessDiagram #assess #assessCopy{
    opacity: 0;
    transition: 0.2s;
}

#automateAwarenessDiagram #assess:hover #assessCopy{
    opacity: 1;
}
#automateAwarenessDiagram{
max-width: 1200px;
margin: 0 auto;
}

foreignObject{
    line-height: 1.8em !important;
}

#automateAwarenessDiagram #employee foreignObject,
#automateAwarenessDiagram #training foreignObject,
#automateAwarenessDiagram #insights foreignObject,
#automateAwarenessDiagram #empower foreignObject,
#automateAwarenessDiagram #reporting foreignObject,
#automateAwarenessDiagram #assess foreignObject,
#automateAwarenessDiagram #integrate foreignObject{
    transition: 0.5s;
    opacity: 0;
    display: none;
    position: relative;
    z-index: 100;
}

foreignObject div{
    background: #ffffff;
    height: calc(100% + 100px);
}

#automateAwarenessDiagram #employee:hover foreignObject,
#automateAwarenessDiagram #training:hover foreignObject,
#automateAwarenessDiagram #insights:hover foreignObject,
#automateAwarenessDiagram #empower:hover foreignObject,
#automateAwarenessDiagram #reporting:hover foreignObject,
#automateAwarenessDiagram #assess:hover foreignObject,
#automateAwarenessDiagram #integrate:hover foreignObject{
transform: translateX(0);
opacity: 1;
display: block;
}

#automateAwarenessDiagram #employee:hover .st0,
#automateAwarenessDiagram #training:hover .st17,
#automateAwarenessDiagram #insights:hover .st16,
#automateAwarenessDiagram #empower:hover .st14,
#automateAwarenessDiagram #reporting:hover .st13,
#automateAwarenessDiagram #assess:hover .st4,
#automateAwarenessDiagram #integrate:hover .st3{
fill: #0747a3;
}

#automateAwarenessDiagram #employee:hover .st0 ~ .st2,
#automateAwarenessDiagram #employee:hover .st0 ~ g path.st2{
    fill: #ffffff;
}


#automateAwarenessDiagram #rotate{
animation: rotateSVG 100s infinite linear;
transform-origin:262px 286px !important
}

@keyframes rotateSVG{

0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}}

/* --- END OF SVG --- */




.hideDesktop .buttonRow a{
    width: 150px;
}


@media only screen and (max-height: 645px) {
    #pageIndex #banner{
        height: auto !important;
    }
}
@media only screen and (min-width: 1050px) {

    #headerMain.scroll ~ #content{
        margin-top:61px;
    }


    .buttonHeader{
        border-left: #dfe1e6 1px solid;
        }



    .hideDesktop{
        display: none !important;
    }
    
    .tableTopContents{
        margin-bottom: -10px;
    }

    .tableColumn{
        width: 100%;
    }
    

    .tableColumn:nth-child(1) .tableCell:nth-child(1){animation-delay: 0.14s !important}
    .tableColumn:nth-child(2) .tableCell:nth-child(1){animation-delay: 0.1s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(1){animation-delay: 0.18s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(1){animation-delay: 0.22s !important;}

    .tableColumn:nth-child(1) .tableCell:nth-child(2){animation-delay: 0.2s !important;}
    .tableColumn:nth-child(2) .tableCell:nth-child(2){animation-delay: 0.24s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(2){animation-delay: 0.28s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(2){animation-delay: 0.32s !important;}

    .tableColumn:nth-child(1) .tableCell:nth-child(3){animation-delay: 0.3s !important;}
    .tableColumn:nth-child(2) .tableCell:nth-child(3){animation-delay: 0.34s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(3){animation-delay: 0.38s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(3){animation-delay: 0.42s !important;}

    .tableColumn:nth-child(1) .tableCell:nth-child(4){animation-delay: 0.4s !important;}
    .tableColumn:nth-child(2) .tableCell:nth-child(4){animation-delay: 0.44s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(4){animation-delay: 0.48s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(4){animation-delay: 0.52s !important;}

    .tableColumn:nth-child(1) .tableCell:nth-child(5){animation-delay: 0.5s !important;}
    .tableColumn:nth-child(2) .tableCell:nth-child(5){animation-delay: 0.54s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(5){animation-delay: 0.58s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(5){animation-delay: 0.62s !important;}

    .tableColumn:nth-child(1) .tableCell:nth-child(6){animation-delay: 0.6s !important;}
    .tableColumn:nth-child(2) .tableCell:nth-child(6){animation-delay: 0.64s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(6){animation-delay: 0.68s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(6){animation-delay: 0.72s !important;}

    .tableColumn:nth-child(1) .tableCell:nth-child(7){animation-delay: 0.7s !important;}
    .tableColumn:nth-child(2) .tableCell:nth-child(7){animation-delay: 0.74s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(7){animation-delay: 0.78s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(7){animation-delay: 0.82s !important;}

    .tableColumn:nth-child(1) .tableCell:nth-child(8){animation-delay: 0.8s !important;}
    .tableColumn:nth-child(2) .tableCell:nth-child(8){animation-delay: 0.84s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(8){animation-delay: 0.88s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(8){animation-delay: 0.92s !important;}

    .tableColumn:nth-child(1) .tableCell:nth-child(9){animation-delay: 0.9s !important;}
    .tableColumn:nth-child(2) .tableCell:nth-child(9){animation-delay: 0.94s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(9){animation-delay: 0.98s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(9){animation-delay: 1.02s !important;}
    
    .tableColumn:nth-child(1) .tableCell:nth-child(10){animation-delay: 1.0s !important;}
    .tableColumn:nth-child(2) .tableCell:nth-child(10){animation-delay: 1.04s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(10){animation-delay: 1.08s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(10){animation-delay: 1.12s !important;}
    
    .tableColumn:nth-child(1) .tableCell:nth-child(11){animation-delay: 1.1s !important;}
    .tableColumn:nth-child(2) .tableCell:nth-child(11){animation-delay: 1.14s !important;}
    .tableColumn:nth-child(3) .tableCell:nth-child(11){animation-delay: 1.18s !important;}
    .tableColumn:nth-child(4) .tableCell:nth-child(11){animation-delay: 1.22s !important;}


    .tableColumnB .tableCell:nth-child(4) .caiTick{animation-delay:0.9s}
    .tableColumnC .tableCell:nth-child(4) .caiTick{animation-delay:0.9s}
    .tableColumnD .tableCell:nth-child(4) .caiTick{animation-delay:0.9s}
    .tableColumnC .tableCell:nth-child(5) .caiTick{animation-delay:1s}
    .tableColumnD .tableCell:nth-child(5) .caiTick{animation-delay:1s}
    .tableColumnD .tableCell:nth-child(6) .caiTick{animation-delay:1.1s}
    .tableColumnC .tableCell:nth-child(6) .caiTick{animation-delay:1.1s}
    .tableColumnD .tableCell:nth-child(7) .caiTick{animation-delay:1.2s}
    .tableColumnD .tableCell:nth-child(8) .caiTick{animation-delay:1.3s}
    .tableColumnD .tableCell:nth-child(9) .caiTick{animation-delay:1.4s}
    .tableColumnD .tableCell:nth-child(10) .caiTick{animation-delay:1.5s}
    .tableColumnD .tableCell:nth-child(11) .caiTick{animation-delay:1.6s}
    
    .animate .tableColumn .caiTick{
        animation: grow 0.3s both;
    }
    
    @keyframes grow{
        from{
            transform: scale(0);
        }
        to{
            transform: scale(1);
        }
    }
    
    @keyframes fade{
        from{
            opacity: 0;
        }
        to{
            opacity: 1;
        }
    }


#pageIndex .tableColumn .tableCell{
    opacity: 0;
}

#pageIndex .animate .tableColumn .tableCell{
    opacity: 1;
animation: fade 0.5s both;}

}    



.formLeft,.formRight{
    width:100%;
}
.formContainer{
    justify-content: space-evenly;
}

.inputButton{
    background: #6fc45b;
    color: #ffffff;
    width:200px;
    cursor: pointer;
    padding:1px;
}

.inputButton:hover{
    opacity: 0.8;
}

#bookTitle{
    margin-bottom: 8px;
    font-weight: 700;
}

input,
select,
textarea{
    width: 100%;
    height: 50px;
    border: 0;
    font-family: acumin-pro, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-indent: 10px;
    color: #0747a3;
    background: #ffffff;
    box-sizing: content-box;
}

.formHeading{
    margin-top:20px;
}

.submit{
    width: 200px;
    padding:0;
    background: #58b03a;
    border: #58b03a 2px solid !important;
    color: #ffffff;
    transition: 0.3s;
    margin-top:20px;
}

.submit:hover{
    background: none;
    color: #58b03a;
}

textarea{
    height: 200px;
}

.submitButton{
    display: flex;
    justify-content: flex-end;
}

.mt-8{margin-top: 8px;}
.mt-64{margin-top: 64px;}
.mt-32{margin-top: 32px;}
.mt-16{margin-top: 16px;}
.mt-12{margin-top: 12px;}

.mb-8{margin-bottom: 8px;}
.mb-16{margin-bottom: 16px;}
.mb-64{margin-bottom: 64px;}
.mb-32{margin-bottom: 32px;}

.mr-8{margin-right: 8px;}
.mr-16{margin-right: 16px;}
.mr-64{margin-right: 64px;}
.mr-32{margin-right: 32px;}

.ml-8{margin-left: 8px;}
.ml-16{margin-left: 16px;}
.ml-64{margin-left: 64px;}
.ml-32{margin-left: 32px;}


.matrixImageR{
    animation: matrixImageR 1s 1s both;
    border: 1px solid rgba(223, 225, 230,0.6);
}

.matrixImageL{
    animation: matrixImageL 1s 1s both;
    border: 1px solid rgba(223, 225, 230,0.6);
}

@keyframes matrixImageR{
    from{
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1);
        box-shadow: 6px 6px 10px rgba(0,0,0,0);        
    }
    to{
        transform: matrix3d(1, 0, 0, -0.0003, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 7, 0, 1.25);
        box-shadow: 6px 6px 10px rgba(0,0,0,0.03); 
    }
}
@keyframes matrixImageL{
    from{
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1);
        box-shadow: 6px 6px 10px rgba(0,0,0,0);
    }
    to{
        transform: matrix3d(1, 0, 0, 0.0003, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 7, 0, 1.25);
        box-shadow: 6px 6px 10px rgba(0,0,0,0.03);
    }
}

.passwordField{
    margin-top:16px;
    border: 1px solid #dfe1e6;
    border-radius: 6px;
  }
  
  .card{
    background: #ffffff;
    /* border: 2px solid rgba(223, 225, 230,0.4); */
      padding: 32px;
      border-radius: 6px;
  }

  .releaseCard{
    background: #ffffff;
    border: 2px solid rgba(223, 225, 230,0.4);
      padding: 16px;
      border-radius: 6px;
  }

  .userAmountNumbers{
    opacity: 0;
    transition: 0.5s;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -48px;
    background: #132640;
    color: #fff;
    width: fit-content;
    margin: 0 auto;
    padding: 4px 16px;
    box-shadow: 0px 5px 5px rgba(0,0,0,0.15);
    z-index: 10;
  }

.smallDiv{
    width:48px;
    height: 4px;
    border-radius: 3px;
    background: #ffffff;
    margin-top:32px;
    margin-bottom: 32px;
}


  .userAmountNumbers:after{
    content: " ";
    border-top: 16px solid #132640;
    border-bottom: 16px solid transparent;
    border-right: 16px solid transparent;
    position: absolute;
    transform: rotate(45deg);
    top: -9px;
    left: 0;
    right: 0;
    width: 0px;
    margin: 0 auto;
  }


  .passwordCard{
    max-width: 600px;
    margin: 0 auto;
  }
  
  .submitPassword{
    width: 80px;
      padding: 10px;
      text-align: center;
      background: #58b03a;
      border: #58b03a 2px solid !important;
      color: #ffffff;
      transition: 0.3s;
      margin-top: 20px;
  }
  
  .passwordError{
    background: #dc3545;
    color: #ffffff;
    display:none;
    border-radius: 6px;
    padding: 8px 16px;
    margin-bottom: 8px;
  }

.btn-getstarted{
    background: #ffffff;
    border: 2px solid #ffffff;
    color: #0747a3;
    font-family: acumin-pro, sans-serif;
    font-weight: 700;
    transition: 0.2s;
    text-decoration: none;
    padding: 12px;
    font-size: 14px;
    min-width: 170px;
    text-align: center;
    background-color:#fff;
    border-color:#254c80;
    color:#254c80;
    font-size:16px;
    height: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
}

.btn-getstarted:hover{
    background-color:#254c80;
    color:#fff;
}

.btn-getstarted-active{
    background-color:#254c80;
    color:#fff;  
}


/* bootstrap alert classes */
.alert {
	position: relative;
	padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
	border: 1px solid transparent;
}

.alert-heading {
	color: inherit;
}

.alert-link {
	font-weight: 700;
}

.alert-dismissible {
	padding-right: 4rem;
}
.alert-dismissible .close {
	position: absolute;
	top: 0;
	right: 0;
	padding: .75rem 1.25rem;
	color: inherit;
}

.alert-primary {
	color: #1b3f60;
	background-color: #d6e4f1;
	border-color: #c6daeb;
}
.alert-primary hr {
	border-top-color: #b3cee4;
}
.alert-primary .alert-link {
	color: #102538;
}

.alert-secondary {
	color: #464a4e;
	background-color: #e7e8ea;
	border-color: #dddfe2;
}
.alert-secondary hr {
	border-top-color: #cfd2d6;
}
.alert-secondary .alert-link {
	color: #2e3133;
}

.alert-success {
	color: #305f30;
	background-color: #dff1df;
	border-color: #d2ebd2;
}
.alert-success hr {
	border-top-color: #c0e3c0;
}
.alert-success .alert-link {
	color: #1f3d1f;
}

.alert-info {
	color: #1c2431;
	background-color: #d7dadf;
	border-color: #c6cbd2;
}
.alert-info hr {
	border-top-color: #b8bec7;
}
.alert-info .alert-link {
	color: #090c11;
}

.alert-warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}
.alert-warning hr {
	border-top-color: #ffe8a1;
}
.alert-warning .alert-link {
	color: #533f03;
}

.alert-danger {
	color: #7f0c1d;
	background-color: #fdd1d7;
	border-color: #fcbec7;
}
.alert-danger hr {
	border-top-color: #fba6b2;
}
.alert-danger .alert-link {
	color: #500812;
}

.alert-light {
	color: #79797a;
	background-color: #fafafb;
	border-color: #f9f9f9;
}
.alert-light hr {
	border-top-color: #ececec;
}
.alert-light .alert-link {
	color: #606060;
}

.alert-dark {
	color: #19181f;
	background-color: #d6d5d8;
	border-color: #c5c4c8;
}
.alert-dark hr {
	border-top-color: #b8b7bc;
}
.alert-dark .alert-link {
	color: #020202;
}




.blogPostHeader{
height: 260px;
color: #ffffff;
text-shadow: rgba(0,0,0,0.2) 0 0 6px;
text-align: center;
padding: 20px;

}

.blogPost{
    border: 2px solid #dfe1e1;
}

.blogPostContent{
    padding: 40px 60px;
    border-top: 2px solid #dfe1e1;
}

.blogPostContent h3, .blogPostContent h4{
    color: #195dc0;
    margin: 0;
    padding:0;
    font-size: 16px;
}

.blogPostInfo{
    justify-content: space-between;
}

.blogPostDate{
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    color: #195dc0;
    margin: 0;
    padding:0;
    font-size: 16px;
    font-weight: 700;
}

.blogPostCopy{
    padding: 20px 0;
}

.steplist {
    display:none;
}

.stepcomingsoon{
    color:#dadada;
}

.buttonSmall{
    font-size:0.8em;
    padding: 0.8em;
}

.text-oversized{
    font-size: 1.25rem;
    letter-spacing: .3px;
    line-height: 1.4;
}

.text-overspaced{   
    letter-spacing: .3px;
    line-height: 1.4;
}

.imageRowItem{
    border-radius: 5px;
    overflow: hidden;
}

.imageRowItem img{
    transition: 0.2s;
}

.imageRowItem:hover img{
transform: scale(1.1);
}

.imageRow{
    width:50%;
    margin-bottom: 32px;
}

.imageRowItem{
    margin:0 16px;
}

.imageArea{
    margin: 0 -16px 32px;
}

.containerInnerLeft{
    max-width: 632px;
    float: right;
}

.containerInnerRight{
    max-width: 632px;
}

.containerInnerLeft .startInner{
    padding:64px 64px 64px 32px;
}

.containerInnerRight .startInner{
    padding:64px 32px 64px 64px;
}

.blueHalf{
    background: #0747a3;
    color: #ffffff;
}

#videoCol{
    position: absolute;
    z-index: 0;
    width:100%;
    top: 13%;
}

.videoInner{
    margin: 0 auto;
    width: calc(100% - 210px);
}

#vidLayers{
    width: 100%;
    position: relative;
    z-index: 1;
}

.featuresSection{
    margin-bottom: 140px;
}

.featuresSection h3{
    font-weight: 700;
    font-size: 18px;
    margin: 0;
    line-height: 1.3em;
    color: #013680;
}

.featuresTitle{
    margin: 52px 0 74px;
}

#cookieBanner{
    position: fixed;
    bottom: 0;
    z-index: 11111111111;
    width: 100%;
    background: rgba(255,255,255,0.97);;
    box-shadow: -5px 0 10px rgba(0,0,0,0.1);
}

#cookieBannerInner{
    max-width: 1400px;
    margin: 0 auto;
    padding:32px;
}

#cal{
    background:#ffffff;
    border-radius: 10px;
}

#scriptBlockContainer{
    width: 400px;
    background: #1e1e1e;
    font-family: monospace;
    border-radius: 0px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    right: 0;
    min-height: 400px;
    position: absolute;
    top: 0;
    transition: 1s;
}

#key{
    font-family: monospace;
    font-size: 12px;
    margin-top:16px;
    color: #ffffff;
}

.keyBlock:before{
content:" ";
width:10px;
height:10px;
display: block;
position: relative;
top:10px;
margin-right: 6px;
}

.positiveBlock:before{background: #58b03a;}
.negativeBlock:before{background: #fa6044;}
.caiBlock:before{background: #2baaff;}


#scriptBlockContainer.expand{
    width: 100%;
    min-height: 440px;
    top: -20px;
}

#scriptBlockContainer.expand #scriptBlock{
    max-height: 352px !important;
}

#cultureMap #map{
    width: calc(100% - 480px);
    transition: 0.2s;
}


#scriptBlockStatus{
    background: #007acc;
    font-size: 12px;
    padding: 0 8px;
    cursor: pointer;
}

#scriptBlockStatus:hover{
    background:#0086df
}


#realtimeOverall:after{
    content: " ";
    border-right: 1px solid #ffffff;
    margin-left: 32px;
    margin-right: 32px;
    height: 10px;
    top: 10px;
    position: relative;
}

#scriptBlockTop{
    padding: 0 8px;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    color: #a2a2a2;
    position: relative;
}

#expandIcon:hover{
    color: #ffffff;
}

#scriptBlockTooltip{
    margin-right: 8px;
}

#scriptBlock{
    padding: 16px;
    max-height: 311px;
    overflow-y: scroll;
    transition: 0.5s;
}

/* width */
#scriptBlock::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  #scriptBlock::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-left: 1px solid rgba(255,255,255,0.05);
  }
   
  /* Handle */
  #scriptBlock::-webkit-scrollbar-thumb {
    background: #007acc;
    border-top:2px solid #1e1e1e;
    border-bottom:2px solid #1e1e1e;
  }
  
  /* Handle on hover */
  #scriptBlock::-webkit-scrollbar-thumb:hover {
    background: #0086df;
  }


.scriptBehaviour{
    color: #ffffff;
    margin: -4px 0px;
}

.scriptBehaviourTitle{
    font-weight: 700;
    text-transform: uppercase;
    color: #2baaff;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.scriptBehaviour:before {
    content: "• ";
}
.scriptBehaviour:first-child{
    margin-left: 0;
}

.rootCauses{
    width:140px;
}

.scriptBehaviour:last-child{
    margin-right: 0;
}


/* .scriptLine .scriptLineText:before{
    width: 8px;
    height: 8px;
    content: " ";
    top: 4px;
    position: relative;
    margin-right: 9px;
    border-radius: 4px;
}

.scriptLineRed .scriptLineText:before{
    background: #fa6044;
}

.scriptLineGreen .scriptLineText:before{
    background: #58b03a;
} */

.scriptIcon{
    color:#37a6f1;
    width:32px;
    height:22px;
}

.scriptIcon:nth-child(1){
    animation: appear 0.1s 0.5s both;
}
.scriptIcon:nth-child(2){
    animation: appear 0.1s 1s both;
}
.scriptIcon:nth-child(3){
    animation: appear 0.1s 1.5s both;
}
.scriptIcon:nth-child(4){
    animation: appear 0.1s 2s both;
}
.scriptIcon:nth-child(5){
    animation: appear 0.1s 2.5s both;
}

@keyframes appear{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}


.scriptIcons{
    margin-top: 8px;
}

.scriptLine {
    font-size: 12px;
    transition: 1s;
}

.expand .scriptTime{
    font-size: 0.9em;
}

.expand .rootCauses{
    width:200px;
}

.expand .scriptLine{
    font-size: 1em;
    line-height: 1.2em;
}

.expand .scriptBehaviourTitle{
    font-size: 1.4em;
    line-height: 1.2em;
    margin: 6px 0;
}

.expand .scriptBehaviour{
    font-size: 1.4em;
    line-height: 1.2em;
    margin: 6px 0;
}

.scriptLineContainer{
    line-height: 1.1em;
    margin: 32px 0;
}

.scriptLineContainer:first-child{
    margin-top:0;
}

.positive{
    color: #58b03a;
}

.negative{
    color: #fa6044;
}

.scriptBehaviourContainer,
.scriptTime{
    font-size: 10px;
    color: #a2a2a2;
    transition: 1s;
}


#cultureMap{
    margin:64px 0;
    position: relative;
}

rect{
    fill:#ffffff;
}

rect:hover{
    opacity: 0.7;
}

.pointer{
    cursor: pointer;
}

.squareTool{
    width: 16px;
    text-align: center;
    border: 1px solid #a2a2a2;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 0;
    position: relative;
    top: 5px;
    right: -10px;
    border-radius:5px;
}


     #secCol1{animation: fade 1s 0.1s both;}
     #secCol2{animation: fade 1s 0.2s both;}
     #secCol3{animation: fade 1s 0.3s both;}
     #secCol4{animation: fade 1s 0.4s both;}
     #secCol5{animation: fade 1s 0.5s both;}
     #secCol6{animation: fade 1s 0.6s both;}
     #secCol7{animation: fade 1s 0.7s both;}
     #secCol8{animation: fade 1s 0.8s both;}
     #secCol9{animation: fade 1s 0.9s both;}
    #secCol10{animation: fade 1s 1.0s both;}
    #secCol11{animation: fade 1s 1.1s both;}
    #secCol12{animation: fade 1s 1.2s both;}

    #mobileShadow{
        opacity: 0;
    }

a.resourcesBlockLink2{
    cursor: pointer;
}

a.resourcesBlockLink2:hover{
    border:2px solid #0747a3;
}

.qr-button {
    display: block;
    text-align: center;
    z-index: 100;
    border: 0;
    position: fixed;
    right: 20px;
    bottom: 10px;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.26);
    padding: 12px;
    border-radius: 10px;
  }
  .qr-button .close-button {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 20px;
    height: 20px;
    font-size: 20px;
    border-radius: 100px;
    color: #8292a6;
  }
  .qr-button .qr {
    width: 100px;
    height: 100px;
    margin-bottom: 8px;
  }
  .qr-button .qr-text {
    width: 100px;
    font-size: 12px;
    line-height: 1.1em;
    color: #161e29;
    font-weight: 500;
  }


.eyebrowNumber{
    position: absolute;
    top: -16px;
    background: #3f9fff;
    border-radius: 16px;
    margin: 0 auto;
    width: 32px;
    height: 32px;
    color: #ffffff;
    text-align: center;
    left: 0;
    display: flex;
    flex-direction: column;
    right: 0;
    justify-content: center;
}


.clientLogo{
    position: relative;
}

.clientLogo .colour{
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
}

.clientLogo .colour,
.clientLogo .grey{
    transition: 0.2s;
}

.clientLogo:hover .grey,
.clientLogo .colour{
    opacity: 0;
}

.clientLogo .grey,
.clientLogo:hover .colour{
    opacity: 1;
}

#usersAmount{
    border:2px solid #eff3fa;
    border-radius: 4px;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
    font-weight: 700;
    font-family: monospace;
}

#priceCalcField{
    font-size: 12px;
    width: 100%;
    border-radius: 2px 0 0 2px;
    border: 0;
    outline: none;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

#priceCalcSubmit{
    font-size: 12px;
    color: #fff;
    text-indent: 0px;
    border: 0;
    text-align: center;
    background: #58b03a;
    padding: 16px;
    border-radius: 0 2px 2px 0;
    line-height: 1;
    box-sizing: border-box;
    width: unset;
    float: right;
    margin: 0;
    font-weight: 600;
    width: 100%;
}

.formButton{
    transition: 0.2s;
    outline: 0
}




#priceCalcSubmitContainer{
    transition: 1s;
}

.outlineButton{
    border: 2px solid #ffffff;
    border-radius: 3px;
    padding: 8px 32px;
    display: inline-block;
    background: #0747a3;
    color: #ffffff;
    transition: 0.2s;
    cursor: pointer;
}

.formButton:hover{
    background: #3ca11a !important;
}


#bannerDemoEmail{
    outline: 0;
}

.outlineButton:hover{
    background: #ffffff;
    color: #0747a3;
}

.outlineButton i{
    position: relative;
    transition: 0.2s;
    left: 4px;
}

.outlineButton:hover i{
    left: 10px;
}

#calcMeasurement {
    width: fit-content;
    margin: 0 auto;
    position: relative;
}

.calcMeasurementButton.active{
    color: #ffffff;
    transition: 0.2s;
}

.calcMeasurementButton {
    padding: 4px 16px;
    color: rgba(255,255,255,0.7);
    transition: 0.1s;
} 

.calcMeasurementButton:hover{
    color: #ffffff;
}

.slidingTabContainer {
    border-bottom: 5px solid #e2e6f7;
    position: relative;
}

.slidingTabBar {
    content: " ";
    height: 3px;
    position: absolute;
    bottom: -3px;
    right: 0;
    left: 16px;
    background: #ffffff;
    border-radius: 2px;
    -webkit-transition: all 500ms cubic-bezier(0.825, 0.005, 0.280, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.825, 0.005, 0.280, 1.000);
    -o-transition: all 500ms cubic-bezier(0.825, 0.005, 0.280, 1.000);
    transition: all 500ms cubic-bezier(0.825, 0.005, 0.280, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.825, 0.005, 0.280, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.825, 0.005, 0.280, 1.000);
    -o-transition-timing-function: cubic-bezier(0.825, 0.005, 0.280, 1.000);
    transition-timing-function: cubic-bezier(0.825, 0.005, 0.280, 1.000);
    width: 0;
}