/* ///FZ FONTS/// */
html, .cc-revoke, .cc-window {font-family: 'Muli', 'Trebuchet MS', 'Sans-Serif'!important; min-width: 350px;font-size: 16px;}
body {margin:0;}

a.cc-btn.cc-dismiss {background: #448ebf ;}
.cc-btn:hover {background-color: #448ebf !important; opacity: 0.8;}
.cc-window.cc-banner {width: 60% !important; margin: 0px auto !important;}

/* ///GENERAL SECTION /// */
.container {padding:30px 0;}
.first-container {margin-top: 30px;}
.relative {position: relative;}
.wrapper {max-width:1100px; margin:0 auto;}
.left-align {text-align: left;}
.text-wrapper {padding:0 20px; box-sizing:border-box;}

/* ///CENTERING & ALIGNING /// */
/*centering text*/
.center {text-align: center;} 


/* set a div as a flex item so that, for example, images are centered both horizontally and vertically within it */
.content-centered-both {display: flex; justify-content: center; align-items: center;}

/* set a div as a flex item so that, for example, images are centered horizontally within it */
.content-centered-horiz {display: flex; justify-content: center;}

/* set a div as a flex item so that, for example, images are centered vertically within it */
.content-centered-vert {display: flex; align-items: center;}

/*other alignment */
.centered {margin:0 auto; display:table;} 
.right {float:right;}


/* ///SPACING & HORIZONTAL LINE /// */
/*used to create our standard spacing */
.spacer {display: block; height:40px;}
.header {padding:20px;}
.line {display:block; height:1px; background-color: rgba(204,204,204,0.4);}


/* /// FZ TEXT & COLOURS /// */
.fz-italic {font-style: italic;}
.fz-bold {font-weight: bold;}
.fz-small-text {font-size: 12px;}
.fz-underline-text {text-decoration: underline;}
.fz-shadow {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

/* COLOURS AND BORDERS */

/* MAIN TEXT COLOURS */
.fz-dark-text {color: #535353 !important;}
.fz-light-text {color: #ddd !important;}

/* BRAND AND OTHER COLOURS */
.fz-blue {background: #448ebf !important;}
.fz-blue-border {border-color: #448ebf !important;}
.fz-blue-text {color: #448ebf !important;}

.fz-dkblue {background: #465989  !important;}
.fz-dkblue-text {color: #465989  !important;}
.fz-dkblue-border {border-color: #465989 !important;}
/*was #272b35 previously */

.fz-ltblue {background: #f4f9fd !important;}
.fz-ltblue-text {color: #f4f9fd !important;}
.fz-ltblue-border {border-color: #f4f9fd !important;}

.fz-green {background: #8dbf43 !important;}
.fz-green-text {color: #8dbf43 !important;}
.fz-green-border {border-color: #8dbf43 !important;}

.fz-white {background-color: #fff !important;background: #fff !important;}
.fz-white-text {color: #fff !important;}
.fz-white-border {border-color: #fff !important;}
/*was rgba(255,255,255,0.4)  previously */
.fz-underline-white-border {border-color: #fff !important;}


.fz-grey {background-color: #e4e7ed !important;}
.fz-grey-text {color: #e4e7ed !important;}
.fz-grey-border {border-color: #e4e7ed !important;}

.fz-ltgrey {background-color: #f4f3f1 !important;}
.fz-ltgrey-text {color: #f4f3f1 !important;}
.fz-ltgrey-border {border-color: #f4f3f1 !important;}

.fz-vltgrey {background-color: #F2F4F7 !important;}
.fz-vltgrey-text {background-color: #F2F4F7 !important;}
.fz-vltgrey-border {border-color: #F2F4F7 !important;}

.fz-dkgrey {background-color: #535353 !important;}
.fz-dkgrey-text {color: #535353 !important;}
.fz-dkgrey-border {border-color: #535353 !important;}

.fz-red {background-color: #fb0d0d !important;}
.fz-red-text {color: #fb0d0d !important;}
.fz-red-border {border-color: #fb0d0d !important;}

.fz-orange {background-color: #ed873f !important;}
.fz-orange-text {color: #ed873f !important;}
.fz-orange-border {border-color: #ed873f !important;}

.fz-yellow {background-color: #ffc003 !important;}
.fz-yellow-text {color: #ffc003 !important;}
.fz-yellow-border {border-color: #ffc003 !important;}

.fz-purple {background-color: #c0559d !important;}
.fz-purple-text {color: #c0559d !important;}
.fz-purple-border {border-color: #c0559d !important;}


.fz-blue-bg input[type=email],.fz-blue-bg input[type=text] {color: #fff;border-bottom: 1px solid #d1d1d1;}
.fz-blue-bg input:focus {border-bottom: 1px solid #fff !important;box-shadow: none !important;}


/* ////ICON LINKS - THE LINKS USING OUR ICONS ///// */

.iconLinks div:hover {background-color: #f1f1f1 !important;}





/* ///PAGE SPECIFIC - TO MOVE TO THOSE PAGES /// */
/*index.jsp*/
.quotes {display: none;height: 53px;}

/*pricing.jsp*/
.fz-radius {border-radius: 50%;width: 75px;height: 75px;margin-top: 20px;line-height: 75px;padding: 0;}
.responsive-img {max-width:100%; height:auto;}






.depth {-webkit-box-shadow: 35px 38px 0px 3px rgba(214,214,214,1);-moz-box-shadow: 35px 38px 0px 3px rgba(214,214,214,1);box-shadow: 35px 38px 0px 3px rgba(214,214,214,1);box-sizing: border-box;padding: 35px;background-color: rgba(244,249,253,1)}
.right {float:right;}
.anchor{display: block;height: 300px; /*same height as header*/margin-top: -300px; /*same height as header*/visibility: hidden;}
.test-class-a {color: red;}

button {box-shadow: none;color: #fff;border-radius: 4px;text-shadow: none;border: 0;font-size: 18px;padding: 10px 20px;margin: 20px 0;color: inherit;font: inherit;}
button i {padding: 0;border-radius: 50%;margin: 0 0 0 10px;font-size: 15px !important;position: relative;top: 2px;font-weight: 400;}
button:hover {cursor: pointer;}
a {text-decoration: none; color: #535353;}
a button i { top: 1px;}
a i { position: relative; top: 8px; }
a i {position: relative;top: 8px;}
a:hover {cursor: pointer;}
h1 {margin: 0;padding: 10px 0;font-size: 35px;font-weight: 300;color: #111;}
h2 {margin: 0;padding: 10px 0;font-size: 30px;font-weight: 300;color: #222;}
h3 {margin: 0;padding: 10px 0;font-size: 22px;font-weight: 300;color: #222;line-height: 25px;}
h4 {margin: 0;padding: 10px 0;font-size: 18px;font-weight: 300;color: #333;line-height: 25px;}
h5 {margin: 0;padding: 0; font-size: 17px; font-weight: 300;color: #333;line-height: 25px;}
h6 {margin: 0; font-size: 12px; font-weight: 300; line-height: 1.6; }
p {margin: 0;padding: 10px 0;font-size: 16px !important;font-weight: 300;color: #535353;line-height: 25px;}
textarea {border:1px solid #9e9e9e;resize:none; height:200px; box-sizing:border-box; padding:10px;width: 100%;background-color: transparent;}

form {margin-bottom: 0;}

input[type='text'], input[type='email'], input[type='date'] {background-color: transparent; border: 0;border-bottom: 1px solid #9e9e9e;border-radius: 0;outline: 0;height: 2.7rem;width: 100%;font-size: 1rem; font-family: 'Muli', 'Trebuchet MS', 'Sans-Serif' !important; margin: 0 0 5px 0;padding: 0;-webkit-box-shadow: none;box-shadow: none;-webkit-box-sizing: content-box;box-sizing: content-box;-webkit-transition: all .3s;transition: all .3s;}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {display: none;-webkit-appearance: none;}


/* /// positioning icon */
.prefix i {position: absolute;font-size: 1.5rem;-webkit-transition: color .2s;transition: color .2s;top:0.6rem;}
.prefix input, .prefix select {width: 87%;margin: 0 auto;display: table;}
.prefix input:focus, .prefix textarea:focus {border-bottom: 1px solid #fff;}
#contact .prefix input:focus {border-bottom: 1px solid #8dbf43;}
.prefix textarea {width: 94%;display: table; margin:10px auto 0 auto;}
#pricing .prefix textarea:focus {outline: #fff; border-color: #fff;}
#contact .prefix textarea:focus {outline: #8dbf43; border-color: #8dbf43;}
#pricing input {color:#fff;}

/* ///request.jsp How did you hear about us selector///*/
select{position: relative;cursor: pointer;background-color: transparent;border: 0;border-bottom: 1px solid #9e9e9e;outline: 0;height: 3rem;line-height: 3rem;width: 100%;font-size: 1rem;margin: 0 0 20px 0;padding: 0;display: block;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.custom-select {position: relative;width: 100%;margin: 0 auto;display: table;}
.custom-select select {display: none; /*hide original SELECT element: */}
.select-selected:after {position: absolute;content: "";top: 14px;right: 10px;width: 0;height: 0;border: 6px solid transparent;border-color: #9e9e9e transparent transparent transparent;}
.select-selected.select-arrow-active:after {border-color: transparent transparent #9e9e9e transparent;top: 7px;}
.select-selected {line-height:2.7rem;height:2.7rem;padding:0;border: 1px solid transparent;border-color: transparent transparent #9e9e9e transparent;cursor: pointer;}
.select-items {position: absolute;background-color: #f8f8f8; top: 46px;left:-2px;right: 0;z-index: 99;}
.select-hide {display: none;}
.select-items div:hover, .same-as-selected {background-color: rgba(0, 0, 0, 0.1);}
.select-items div {line-height:2.7rem;height:2.7rem;padding:0 0 0 10px;cursor: pointer;}



/* /// IMAGES /// */
.brand-logo img {width: 150px;}
.brand-logo-footer img {width: 100px;}
#mobileMenu .brand-logo img {width: 200px; padding:40px 0;}
.expand-img img {background-color: #8dbf43;border-radius: 50%;width: 350px;height: 350px;max-height: 350px;max-width: 350px !important;padding: 30px;position: absolute;top: -35px;left: -25px;}
#featdetails img {width: 80px;margin: 0;position: relative;top: 28px;margin-left: -12px;padding: 0}
.compare img.centered {width:100px;}



/*OTHER*/

.tipNumber {display: flex; flex-direction:  column; align-items: baseline;}
.tipNumber {margin-right:  20px;}

/* FZ LINES AND OPTIONS */
.fz-middle {width:90%;}
.fz-noborderline {min-height:120px; border-right: none; box-sizing:border-box;padding: 0px 15px 0px 15px;}
.fz-borderline {border-right:2px solid; box-sizing: border-box; }
.fz-borderline-left {border-left:2px solid; box-sizing: border-box; }
.fz-borderline-right {border-right:2px solid; box-sizing: border-box; }
.fz-underline {border-bottom: 5px solid transparent; width:75%;margin:0 auto;}
.fz-outline {border-top:10px solid; border-bottom:1px solid;border-left: 1px solid;border-right: 1px solid;border-radius:1%;}

.fz-button {padding: 5px 15px;border-radius: 50px;-moz-border-radius: 50px;-webkit-border-radius: 50px;margin-top: 15px;display: inline-block;font-size: 14px;}
.fz-button:hover {opacity: 0.6; transition: opacity 1s ease;}
.fz-button-try {margin-top: 0;}



/* /// HEADER SECTION /// */
nav {background-color: #fff;}
.navbarFixed {position:fixed;width:100%;height: 60px; top:0;left:0; z-index:100; border-bottom: 1px solid #d9d9d9;}
.navWrapper {background-color:#fff;max-width:1400px; display: flex; justify-content: center; align-items: center; margin:0 auto; width:100%; height: 60px;}
.navWrapper > div {margin: 0 10px;}
.navItem {height: 60px;}
.navItem > a {text-align:center;display: flex; justify-content: center; align-items: center; height: 60px;}
.navItem > a div {text-align: center;}

nav .link:hover {text-decoration: underline; text-decoration-color: #448ebf;}

.navbarFixed ul {display: block; padding: 0 !important; list-style: none;padding: 0;margin: 0;float: right;}
#mobileMenu ul {list-style: none;padding: 0;margin: 0;}
.navbarFixed ul li {float:left; padding:10px;}
#mobileMenu ul li {padding:10px;}
.navWrapper a.active  {background-color: transparent;border-bottom: #8dbf43 2px solid; }
.navbarFixed ul li a:hover {border-bottom: #8dbf43 2px solid;}
#mobileMenu ul li a:hover {color: #8dbf43;}
.navbarFixed ul li a, #mobileMenu ul li a {text-decoration: none; color: #272b35;}
#mobileMenu {width:100%; position:fixed; right:0; top:61px; z-index:101; height:100%;overflow-y: scroll;}
#mobileMenu .active {background-color:transparent;color:#8dbf43;}
.mobile {position: fixed;top: 20px;right: 20px;z-index: 102;}
@media screen and (max-width: 1150px) {
  .navWrapper .navItem {display:none;}
  .mobile {display: block !important;}
}
#mobileMenu .dropdownContent {top:0; min-width:300px;}
#mobileMenu .dropdownContent a {text-align:left;}

.divider {background-color: #42485a;margin: 0;height:1px;width:100%;padding:0 !important;}
#mobileMenu {-webkit-animation: in 200ms ease both;animation: in 200ms ease both;background-color: #fff}
@-webkit-keyframes in {
  0% { -webkit-transform: scale(0) rotate(0deg); opacity: 0; visibility: hidden;  }
  100% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
}

@keyframes in {
  0% { transform: scale(0) rotate(0deg); opacity: 0; visibility: hidden;  }
  100% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
}
.menuTrigger {font-size: 20px;position: relative;display: inline-block;width: 1.2em;height: 1.2em;cursor: pointer;}
.menuTrigger span {position: absolute;top: 50%;right: 0;display: block;width: 100%;height: 0.1em;margin-top: -0.1em;background-color: #d5d5d5;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-transition: background-color 0.3s;transition: background-color 0.3s;}
.menuTrigger span:after,
.menuTrigger span:before {position: absolute;left: 0;width: 100%;height: 100%;background: #d5d5d5;content: '';-webkit-transition: -webkit-transform 0.3s;transition: transform 0.3s;}
.menuTrigger span:before {-webkit-transform: translateY(-0.5em);transform: translateY(-0.5em);}
.menuTrigger span:after {-webkit-transform: translateY(0.5em);transform: translateY(0.5em);}
.menuTrigger.menu-open span:before {-webkit-transform: translateY(-0.36em) translateX(0.65em) rotate(45deg) scaleX(0.6);transform: translateY(-0.35em) translateX(0.65em) rotate(45deg) scaleX(0.6);}
.menuTrigger.menu-open span:after {-webkit-transform: translateY(0.36em) translateX(0.65em) rotate(-45deg) scaleX(0.6);transform: translateY(0.35em) translateX(0.65em) rotate(-45deg) scaleX(0.6);}
ul.social {margin:0 auto !important; display:table;}
ul.social li {float:left;}
.nav-clear {position:relative; top:-10px; height:64px;}


/*This is the big main menu that drops down*/
/*The highlight class is used outside of the main menu*/
.dropdown {display: flex;}
.dropdownWrapper {display: none;background-color: #f6f7f9;}
.dropdown:hover .dropdownWrapper {display: block; position: absolute; left:0; top:60px; width: 100%;border-top:1px solid #d1d1d1;}
.dropdownContent {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; max-width: 1200px; margin: 50px auto;}
.dropdownContent > div {width: 280px; margin: 20px;box-sizing: border-box;padding: 2px}
.dropdownContent a {margin: 0;transition: all 1s ease-in-out;}
.dropdownContent .ddText {font-size: 12px; padding: 0 10px 10px 0px;margin-left:40px;}
.dropdownContent div a div {display:flex;}
.dropdownContent div a div img {width: 40px;}
.dropdownContent div a div p {padding: 0px !important; font-weight: bold;line-height:40px;}
.highlight:hover {background-color: #f1f1f1 !important;}


/*Spanning the last two of the four grid items in the big main menu drop down*/
.dropdownContentTextArea {grid-column:  3 / 5; width:  100% !important;}



/*The footer of the big main menu*/
.dropdownFooter {height:40px;border-top:1px solid #d1d1d1;background-color: #e9e9e9}
.dropdownFooterWrapper {width:60%;margin:0 auto;height:40px;}
.dropdownFooterWrapper p {display: inline; line-height: 40px;}
.dropdownFooterWrapper img {width:100px; margin-right:50px; padding-top:10px;}



/* sizing svg icons in various places */
/* sizing svg icon where it appears on the same row as text*/
.icon-in-row {max-height: 100px;}
/* sizing svg icons within a container */
.medium-icons img {max-height: 100px;}


/* /// GRID LAYOUTS /// */

.gridTwoImg {max-width: 250px}

/* /// SPECIFIC GRID LAYOUTS /// */

/* custom-project-lists.jsp */

.list-concept-container {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; width: 100%;}
.list-concept-tab-grid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; width: 100%;}
.list-concept-tab-grid div {height: 30px; border-right: 1px solid #e0dbdb; background-color: #f4f4f5;}
.list-concept-tab-grid div:nth-child(6) {border-right: none; opacity: 0;}
.list-concept-list-area {display: flex; align-items: center; background-color: white; height: 150px; width: 100%; border: 1px solid #e0dbdb;}
.list-concept-list-area h3 {margin: 0 auto; padding: 0 20px;}

/* project-job-work.jsp */

.project-types-container {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px;}
.project-types-container > div {display: grid; grid-template-rows: 60px 80px; background-color: white; border-top-style: solid; border-top-width: 10px;}
.project-types-container h3 {text-align: center; margin: 0 auto;}
.project-types-container p {text-align: center; margin: 0; padding:  10px;}

/* workflows.jsp */

.workflow-types-container {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px;}
.workflow-types-container > div { display: grid; grid-template-columns: 60px auto; grid-template-rows: 10px auto;}
.workflow-types-container div div:nth-child(4) {padding: 0 10px; background-color: #FFF;}
.workflow-types-container h3 {text-align: center; margin: 0 auto;}
.workflow-types-container p {text-align: center;}
.workflow-step-key-point {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20%; margin: 0 20%;}
.workflow-step-key-point div {padding: 10px;}


/* client-internal-external.jsp   */

.client-types-container {display: grid; grid-template-columns: 300px 1fr 1fr; grid-gap: 50px;}
.client-types-container-header {background-color: white; border-top-style: solid; border-top-width: 10px; height: 100px; display: flex; align-items: center; justify-content: center;}
.client-types-container h3 {text-align: center !important; margin-left: 20px;}
.client-types-container p {text-align: center; margin-left: 20px;}
.client-types-container img {width: 20px; margin-right: 30px;}

.client-types-container-tick-col {display: flex; align-items: center;}
.client-types-container-tick-col h3 {text-align: left;}

/* articles.jsp */

.grid-articles-list {grid-template-columns: 150px auto !important;}
.grid-articles-list a {text-decoration: underline;}


.icon-and-text {display: flex; flex-wrap: wrap; justify-content: center;}
.icon-and-text img {max-width: 40px; margin-right: 20px;}

/* document-project-store.jsp */

.grid-document-types {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-gap: 30px;
    margin: 0 200px;
}
.grid-document-types > div {height: 120px;}

.grid-doc-top {display: grid; grid-template-columns: auto 20px;}
.grid-doc-top > div {height: 20px;}
.grid-doc-bottom {height: 100px;}

/*document-annotation-comparison.jsp */

.documents-grid img{max-width: 40px;}

/*document-approvals.jsp*/
.grid-no-limits {grid-gap: 100px;}
.grid-no-limits div {padding: 20px;}


/*resources-articles*/
.gridArticle {max-width:800px !important; background-color: #FFF;}
.gridArticle div {padding:  40px;}


/*Landing pages*/
.narrowGrid {width:  800px;}



/* /// GENERAL GRID LAYOUTS /// */

/* Tick lists */
.grid-tick-list {
    display: grid;
    grid-template-columns: 50px auto;
    grid-gap: 20px;
    margin: 50px;
}
.grid-tick-list p {padding: 0;}
.grid-tick-list img {width: 30px;}

.grid-tick-list.annotation-list {
   grid-template-columns: auto auto auto;
   margin: 0 100px;
}

/* used in, for example, index.jsp  */
/* Section containing Expertise on tap - Speed of delivery - from simple to complex*/
/* grid has a container for the image on one side and then three rows to separate the title, main text and find out more */
/* grid-one-three has the container on the lhs, grid-three-one has the container on the rhs */


.grid-tick-list-spaced {
    display: grid;
    grid-template-columns: 50px auto;
    grid-gap: 20px;
    margin: 50px;
}

.grid-tick-list img {width: 30px;}

/*2107-getting-on-the-same-page.jsp */

.gridOneThree {  
  display: grid;
  grid-template-columns: 1fr 2fr;
  max-width:1100px;
  margin:0 auto;
  grid-gap: 10px;
}

.gridOneThreeCol {
  grid-area: 1 / 1 / 4 / 2;
  display: flex;   
  align-content: center;   
}

.gridThreeOne {  
  display: grid;
  grid-template-columns: 2fr 1fr;
  max-width:1100px;
  margin:0 auto;
  grid-gap: 10px;
}

.gridThreeOneCol {
  grid-area: 1 / 2 / 4 / 3;
}


/* MAIN ONE/TWO/THREE/ETC COLUMN CONTAINERS */


.gridOne, .gridTwo, .gridTwoWideRight, .gridTwoWideLeft, .gridThree, .gridFour, .gridFive {
  display: grid;
  max-width:1100px;
  margin:0 auto;
  padding:10px 20px;
  grid-gap: 20px;  
}

 .gridOne {
 	grid-template-columns: auto;
 }

.gridTwo {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.gridTwoWideRight {grid-template-columns: 1fr 2fr;}
.gridTwoWideLeft {grid-template-columns: 2fr 1fr;}


.gridThree {
  grid-template-columns: 1fr 1fr 1fr;
}


.gridFour {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}


.gridFive {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

/* /// SLIDESHOW AND CAROUSELS /// */

.flexFour {
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  max-width:1100px;
  margin:0 auto;
}



/* /// SLIDESHOW AND CAROUSELS /// */
/*index hero slideshow*/
.fzDot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.fzActive, .fzDot:hover {
  background-color: #448ebf ;
}
.fzSlide {display: none; margin-bottom: 10px;}

.fzSlide img {max-width:100%; border-bottom: 1px solid #f4f3f1;}


/*Slideshow of clients at bottom of Index*/
.slideshow-container {margin: 20px auto; display: none; height: 600px;}
.carousel-container {max-width: 1100px;position: relative;margin: 20px auto;display: none;}



.fzCarousel img {max-width:100%; border-bottom: 1px solid #eeeff0;}
.prev, .next {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -22px;color: white;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev {left: 0;border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}
.numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;}
.dot, .dotCarousel, .dotMini, .dotHero  {height: 15px;width: 15px;margin: 0 2px;background-color: #bbb;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;}
.dotCarousel {cursor: pointer;}





/*////LISTS SLIDESHOW //// */

.listSlides { display: none; margin: 0 auto; max-width: 100%; border-bottom: 1px solid #eeeff0;}



/* /// FADE ANIMATION /// */
.fade {-webkit-animation-name: fade;-webkit-animation-duration: 1.5s;animation-name: fade;animation-duration: 1.5s;}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}






/* /// FZ HOME CHANGES /// */
.form-section form {display: inline;padding: 10px 0;border-bottom: 2px solid #8dbf43;}
.form-section input {width: 55% ;font-size: 18px;border:0;outline:0;height:30px;}
.form-section button {border-radius: 0;}
.form-section button:hover {cursor:pointer;}
.form-section input:focus {box-shadow: none;border: 0;}
.imagetopper-wrapper {transform: translate(0,-70px); display: block; margin: 0 auto;}
.hide {display:none;}

.one .fz-underline-white-border  {
  animation-name: pulse 2s 1;
  -moz-animation: pulse 2s 1;
  -webkit-animation: pulse 2s 1;
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.two .fz-underline-white-border  {
  animation-name: pulsetwo 2s 1;
  -moz-animation: pulsetwo 2s 1;
  -webkit-animation: pulsetwo 2s 1;
  -webkit-animation-delay: 2s;
   animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.three .fz-underline-white-border  {
  animation-name: pulsethree 2s 1;
  -moz-animation: pulsethree 2s 1;
  -webkit-animation: pulsethree 2s 1;
  -webkit-animation-delay: 4s;
   animation-delay: 4s;
  -moz-animation-delay: 4s;
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.four .fz-underline-white-border  {
  animation-name: pulsefour 2s 1;
  -moz-animation: pulsefour 2s 1;
  -webkit-animation: pulsefour 2s 1;
  -webkit-animation-delay: 6s;
   animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-moz-keyframes pulse {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}
@-webkit-keyframes pulse {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}
@keyframes pulse {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}
@-moz-keyframes pulsetwo {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}
@-webkit-keyframes pulsetwo {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}
@keyframes pulsetwo {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}
@-moz-keyframes pulsethree {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}
@-webkit-keyframes pulsethree {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}
@keyframes pulsethree {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}
@-moz-keyframes pulsefour {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
    }
}
@-webkit-keyframes pulsefour {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}
@keyframes pulsefour {
  0% {
  border-color: #fff;
  color: #ddd;
  }
  33% {
  border-color: #535353;
  color: #111;
  }
  100% {
  border-color: #8dbf43;
  color: #222;
  }
}

/* /// FOOTER /// */
.footer-links a {display: inline-block; margin-right: 20px;}
.social-links a {display: inline-block;margin: 20px 10px 0px 0px;}
footer .brand-logo img {padding-top:0 !important;}

/* /// CHECKBOX CHANGES /// */
input[type='checkbox']{ height: 0; width: 0; }
input[type='checkbox'] + label{position: relative;display: flex;margin: .6em 0;align-items: center;color: #9e9e9e;transition: color 250ms cubic-bezier(.4,.0,.23,1);}
input[type='checkbox'] + label > ins{position: absolute;display: block;bottom: 0;left: 2em;height: 0;width: 100%;overflow: hidden;text-decoration: none;transition: height 300ms cubic-bezier(.4,.0,.23,1);}
input[type='checkbox'] + label > ins > i{position: absolute;bottom: 0;left: 4px;font-style: normal;color: #8dbf43;}
input[type='checkbox'] + label > span{display: flex;justify-content: center;align-items: center;margin-right: 1em;width: 1em;height: 1em;background: transparent;border: 2px solid #888;border-radius: 2px;cursor: pointer;  transition: all 250ms cubic-bezier(.4,.0,.23,1);}
input[type='checkbox'] + label:hover, input[type='checkbox']:focus + label{color: #8dbf43;}
input[type='checkbox'] + label:hover > span, input[type='checkbox']:focus + label > span{background: rgba(255,255,255,.1);}
input[type='checkbox']:checked + label > ins{ height: 100%; }
input[type='checkbox']:checked + label > span{background-color:#8dbf43;animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);}
input[type='checkbox']:checked + label > ins{ height: 100%; }
input[type='checkbox']:checked + label > span{background-color:#8dbf43;animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);}
input[type='checkbox']:checked + label > span:before{content: "";position: absolute;top: .5em;left: .2em;border-right: 3px solid transparent;border-bottom: 3px solid transparent;transform: rotate(45deg);transform-origin: 0% 100%;animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;}
@keyframes shrink-bounce{
  0%{
    transform: scale(1);
  }
  33%{    
    transform: scale(.85);
  }
  100%{
    transform: scale(1);    
  }
}
@keyframes checkbox-check{
  0%{
    width: 0;
    height: 0;
    border-color: #212121;
    transform: translate3d(0,0,0) rotate(45deg);
  }
  33%{
    width: .2em;
    height: 0;
    transform: translate3d(0,0,0) rotate(45deg);
  }
  100%{    
    width: .2em;
    height: .5em;    
    border-color: #212121;
    transform: translate3d(0,-.5em,0) rotate(45deg);
  }
}

.links-wrapper {width:100%; display: inline-flex; margin-top:20%;}
.links-wrapper a {width:33.3%; padding:10px;}
.links-wrapper a span:hover {color:#8dbf43 !important;}
.links-wrapper span.fz-dkgrey.left, .links-wrapper span.fz-dkgrey.right {padding: 2px 5px 5px 5px;margin: 0px 5px 2px 5px;line-height: 19px;}

/* /// MEDIA OPTIONS /// */

@media screen and (max-width: 1150px) {
  .grid-one,.grid-two,.grid-three,
  .grid-four,.grid-five,.grid-big,.wrapper {max-width:900px;}
  .slideshow-container {max-width:800px;height:450px;}
.fzSlides img, .fzCarousel img {height:400px;}
  .grid-two {grid-template-columns:1.5fr 1fr;}
  .grid-two .responsive-img {max-height:200px;}
  .expand-img {align-self: center;}
  .expand-img img {border-radius: 0%;background: transparent;width: auto;height: auto;max-height: 200px;max-width: auto !important;position: relative;top: auto;left: auto;}
  .grid-five {grid-template-columns:repeat(auto-fill, 33.3%);}
  .grid-five div:nth-child(3) .text-wrapper {border:none;}
  .hide-show {height:190px !important; padding:20px;}
  .content-centered-both img {max-height:200px !important;}


@media screen and (max-width: 1000px) {
  .gridTwo{grid-template-columns:1fr;}
  .gridTwoImg {max-width: 150px;}
  .gridFour.underlineHeaders {grid-template-columns: repeat(auto-fill,205px);justify-content: center;}
}


}
@media screen and (max-width: 900px) {
  .grid-one,.grid-two,.grid-three,
  .grid-four,.grid-five,.grid-big,.wrapper {max-width:700px;}
  .grid-three,.grid-four {grid-template-columns:repeat(auto-fill, 50%);}
  .grid-big {grid-template-columns:auto auto;}
  .grid-three div:nth-child(3) {grid-column: 1 / 3;}
  .grid-four div:nth-child(2) .fz-borderline-right,   
  .grid-three div:nth-child(2) .fz-borderline-right {border:none;}
  #featdetails .grid-two {grid-template-columns:repeat(auto-fill, 100%);}
  .links-wrapper {margin-top:3%;}
  .server-cloud .grid-three div:nth-child(2) {grid-column-start: 1; grid-column-end: 4; order:1;}
  .server-cloud .grid-three div:nth-child(3) {grid-column: auto; order:4;}
  .server-cloud .grid-three div:nth-child(1) {grid-column: auto; order:2;grid-column: auto;grid-row-start: 2;grid-column-end: 4;}
  .miniSlides,.wrapper .line {display:none !important;}
  .prefix input, .prefix select {width:82%;}
  .prefix textarea {width:91%;}
  .slideshow-container {max-width:700px;height:400px;}
  .fzSlides img, .fzCarousel img {height:350px;object-fit: contain !important;}
  .content-centered-both img {max-height:100px !important;}
  .grid-one,.grid-two,.grid-three,
  .grid-four,.grid-five,.grid-big,.wrapper {max-width:500px; text-align:center;}
  .grid-one, .grid-two,.grid-two.adjust-grid.reverse,.grid-two.half, .grid-three, .grid-four, .grid-five  {grid-template-columns:repeat(auto-fill, 100%); grid-gap:20px;}
  .fz-borderline-right, .fz-borderline-left {border:none !important;}
}

@media screen and (max-width: 800px) {
  .grid-one,.grid-two,.grid-three,
  .grid-four,.grid-five,.grid-big,.wrapper {max-width:600px;}
  .server-cloud .grid-three div:nth-child(3) {grid-column: 50%;}
  .server-cloud .grid-three div:nth-child(1) {grid-column: 50%;}
  form .grid-two.half {grid-template-columns:repeat(auto-fill, 100%);}
}

@media screen and (max-width: 700px) {
  form .grid-one,form .grid-two {text-align:left !important;}
  * {list-style: none;}
  .fz-list {margin-left:-30px}
  .prefix textarea {width: 82%;}
  .grid-one,.grid-two,.grid-three,
  .grid-four,.grid-five,.grid-big,.wrapper {max-width:500px; text-align:center;}
  .grid-one, .grid-two,.grid-two.adjust-grid.reverse,.grid-two.half, .grid-three, .grid-four, .grid-five  {grid-template-columns:repeat(auto-fill, 100%); grid-gap:20px;}
  .grid-three div:nth-child(3) {grid-column: auto}
  .grid-big {grid-template-columns:auto;}
  .grid-four.dam .text-wrapper {min-height:auto;}
  .carousel-container .grid-two.adjust-grid.reverse .center-align:nth-child(1),
  #work .grid-two.adjust-grid.reverse .center-align:nth-child(1) {order:2;}
  .fz-borderline-right, .fz-borderline-left {border:none !important;}
  .left-align {text-align: center;}
  .responsive-img {padding:0 !important;}
  .fz-list {margin-left:-30px;}
  .integrate .grid-big > div {min-height:200px;}
  .cd-timeline i {left:0 !important;}
  .cd-timeline__date {float:none !important;}
}

.mobileMenuWrapper {width:100%;background-color:#fff;}
.mobileMenuWrapper label:hover {cursor: pointer;}
input[type=checkbox] {display: none;}
input[type=checkbox]:checked~.remove-check {display: none;}
#fullyCustomisable, 
#workingTeam , 
#workingClients, 
#documentAnnotations,
#resources, 
#workflowTimelines{display:none;}
input[type=checkbox]:checked~#fullyCustomisable, 
input[type=checkbox]:checked~#workingTeam,
input[type=checkbox]:checked~#workingClients,
input[type=checkbox]:checked~#resources,
input[type=checkbox]:checked~#documentAnnotations,
input[type=checkbox]:checked~#workflowTimelines {display: block;}

.mobileMenuWrapper label {font-size:20px;font-weight:300;}
.mobileMenuEntry {border-bottom:1px solid #e9e9e9;width:95%;margin:0 auto;box-sizing: border-box;padding:10px;}

.mobileMenuEntry label span:after {content: "\02C5";float:right;color:#e2e2e2;}

.mobileMenuWrapper .dropdownContent {grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));}