@charset "utf-8";
/* reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, em, img, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } input, textarea { font-family: inherit; } body { color: black; background: white; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; }
* {margin:0}

body, html {padding:0;margin:0;height:100%;width:100%;font-family:Calibri;font-size:1em;color:#000}


/* fonts */
@font-face{font-family: Calibri;src: url('../fonts/calibri.ttf'), src: url('../fonts/calibri.ttf')}
p {padding-bottom:30px;font-size:1.2em;font-style:normal; line-height: 25px}
a {color:#000;text-decoration:none}
a:hover {color:#5386bb}
h1 {font-size:3em;color:#333;text-transform:capitalize;display:inline-block; padding-top:30px;padding-bottom: 20px; text-align: left}
h2 {font-size:2em; color:#333;text-transform:capitalize; padding-top:30px; padding-bottom:20px}
h3 {font-size:1.5em;color:#333;text-transform:capitalize; margin-bottom:20px}
li {margin-left:5%;padding-left:1%;padding-bottom:10px;list-style:square;font-size:1.2em}
ul {padding-bottom:20px;line-height:30px}
hr {clear:both;margin:30px 0 30px 0}
em{font-style:italic}
.pname {font-size:1.2em}

.font08em {font-size:1em; font-style: italic; text-transform: capitalize}
.font3em {font-size:3em}
strong {font-weight:600}
.nobullet li {list-style:none}
.blog {padding:0;margin:0;color:#ccc}
.screenshot {width:100%;height:auto;Text-align:left}
.screenshot img {width:100%;max-width:700px;max-height:300px;height:auto}
.worflow {width:80%;max-width:650px;height:auto}
.location {max-width:590px;width:90%;height:auto}
.clear {float:none}
img a {border:none}
#crumb {float:left;width:100%;margin-top:5px;color:#6699cc;text-align:left;font-size:13px;text-transform:uppercase}
#crumb a{text-decoration:none;color:#999}
.focus-image {width: 100%; height:auto}


/* contact */
.contactbox{float:left;width:90%;max-width:700px;height:auto;background-color:#000;color:#fff;font-size:1em;padding:5%}
.contactbox p{line-height:0px}
.cbleft {width:48%;padding-right:2%;float:left}
.cbright {width:48%;padding-left:2%;float:right}
.input{border:solid 1px #ccc;width:100%;height:25px;margin-bottom:10px;font-size:1em;text-transform:capitalize}
.hear{border:solid 1px #ccc;width:100%;height:32px;margin-bottom:10px;font-size:1em;text-transform:capitalize}
.smalldrop{border:solid 1px #ccc;width:60px;height:32px;margin-bottom:10px;font-size:1em;text-transform:capitalize}
.email{border:solid 1px #ccc;width:100%;height:25px;margin-bottom:10px;font-size:1em}
.textarea1{width:100%;height:65px;border:solid 1px #ccc;font-size:1em;text-transform:capitalize}
.textarea2{width:100%;height:300px;border:solid 1px #ccc;font-size:1em}
.textarea3{width:100%;height:150px;border:solid 1px #ccc;font-size:1em}
input:focus{border:solid 1px #0066cc}
textarea:focus{border:solid 1px #0066cc}
.submit {float:right;padding:10px;margin:0 5% 20px 0;width:auto;height:auto;background-color:#fff;font-size:1em}
.submit:hover {background-color:#5386bb}
.checkbox {width:20px;height:20px}
.module-selection {width:100%;float:left;height:auto;}
.cbleft70 {width:68%;padding-right:2%;float:left;min-height:25px;overflow:hidden}
.cbleft70 a {color:#6699cc}
.cbright30 {width:28%;padding-left:2%;float:left;height:25px; overflow:hidden}
.cbleft40 {width:40%;float:left;height:25px;overflow:hidden}
.cbleft10 {width:8%;padding:0;margin-right:2%;float:left;text-align:left;height:25px; overflow:hidden}
.cbleft70, .cbright30, .cbleft40, .cbleft10 {min-height:45px;height:auto}
.quote {width:100%;float:left}
.contactbox h2 {color:#ccc;}
.contactbox h3  {color:#6699cc;margin-top:20px}
.contactbox hr {padding:0;margin:0;padding-top:20px;border:thin}
.key-footer {text-align: center; font-size: 20px; color:#666; padding-top:20px;padding-bottom: 20px;}
.key-footer p a{color: #666; line-height: 30px; font-size: 0.8em}
.blogcontent {padding:2.5% 10% 2.5% 10%}

/* core */
#wrapper {float:left;width:100%;height:100%;height:auto !important;height:100%;min-height:100%}
#fixed-header {float:left; width:100%;top:0}
#header {width:100%;height:auto;background:#fff;float:left;color:#fff;}
.footer{float:left;width:100%;height:auto;background-color:#000;;font-style:normal}
.footer a:hover{color:#ccc}


#main-slogan {float:left;width: 95%; margin-right:5%;text-align:right;font-size:2.5em;color:#ccc;font-style:italic}
.section-slogan {padding:0;margin:0;margin-bottom:20px;width:100%;float:left;text-align:right;font-size:1.8em;color:#ccc;font-style:italic;text-transform:lowercase}
.section-slogan a{color:#ccc}
#cafm-ethos {clear:both;padding:0;margin:0;margin-top:10px;width:100%;float:left;Text-align:left}
#cafm-ethos a {border:none;Text-align:left}
#cafm-ethos img {width:100%;height:auto;max-width:700px;Text-align:left}

/* header */
#product {margin:20px 0 20px 0;float:left;width:45%;padding-left:5%}
#productname{color:#4360af;width:100%;text-align:left;font-size:2em}
#productname p{padding:0}
#productname em{color:#000}	
#slogan{width:100%;font-size:1.5em;margin-bottom:10px;padding-bottom: 20px; font-weight:200; text-align: left;color:#4360af}
#slogan em{color:#666}
#company {float:right;width:45%;padding-right:5%;margin:10px 0 10px 0}
#contact {float:left;width:70%;padding:0;margin:0;color:#000;padding-top:10px}
#contact a{color:#000}
#contact a:hover{color:#000}
#contactleft {float:left;width:80%;text-align:right;line-height:25px;font-size:1.2em}
#contactright {float:right;width:15%;margin-left:5%;Text-align:left;font-size:1.2em}	
#contactright span{line-height:25px}
#logo {float:right;Text-align:right;width:auto;border-style:none}



/* elements */
.centrecontent {float: left; height:auto;width:100%;text-align: left;}
.text-content {float:left; width:80%;background-color:#4360af;padding:30px 10% 30px 10%; text-align:left; margin-bottom:20px}
.text-content  p {color: #fff; line-height: 50px}
.text-content h1 {color: #fff;text-align:left;font-weight: normal}
.text-content h2 {color: #fff; text-align: left; font-weight: normal;padding-top:30px}
.text-content h3  {color: #fff; text-align: left; font-weight: normal}
.text-content a {font-weight: bold}
.text-content-w a {font-weight: bold}
.text-content-w a:hover {color: #6699cc}
.text-content .bluefont{color:#fff} /* now white */
.text-content-w .bluefont{color:#000} /* now blacke */
.text-content-w {float:left; width:80%;background-color:#fff;padding:30px 10% 30px 10%; text-align:left; margin-bottom: 20px}
.text-content-w  p {color: #000; line-height: 50px}
.text-content-w h1 {color: #000; text-align: left;font-weight: normal}
.text-content-w h2, h3 {color: #000; text-align: left; font-weight: normal;padding-top:30px}
.text-content ul li {color: #fff; font-weight: normal}
.paddedcentre {float:left;width:90%;height:auto;font-size:1em;margin-left:5%;text-align:left}
.greybox {float:left;color:#fff;width:96%;height:auto;background-color:#000;padding:10px 2% 10px 2%;margin-bottom:20px}
.greybox .bluefont{color:#fff} /*now white */
.greybox h2 {color:#fff;padding-top:0}
.greybox a{color:#fff}
.greybox a:hover {color:#5386bb}
.lightgreybox {float:left;width:96%;height:auto;background-color:#fff;border-top: 2px;border-color: #000; padding:10px 2% 10px 2%;margin-bottom:20px;color:#333}
.lightgreybox h2 {color:#333}
.lightgreybox .bluefont{color:#262752}
.pad-left {float:left;width:60%;height:auto;min-height:100px}
.pad-right {float:left;width:40%;height:auto; min-height:100px;Text-align:left}
.modulecolumn {float:left;width:25%;padding-top:25px; padding-bottom:25px;height:auto;Text-align:center;text-transform:capitalize;color:#000;background-color:#fff}
.modulecolumn p {font-weight: bold; font-size:1.4em}
.content-image {text-align: center;}
.content-image img {width: 100%; max-width: 1400px; height:auto; text-align: center; align-content: center}
.column {float:left;width:33%;height:auto;Text-align:center;text-transform:capitalize;color:#fff;background-color:#000}	
.column p{font-size:1.3em;margin:0;padding:0}
.column3 {float:left;width:33.3%;height:auto;Text-align:center;text-transform:capitalize;font-size:1em;min-height:200px}
.column3 span{display:block;font-size:1.5em}
.column3 span:hover{color:#6699cc}
.column3 em{font-size:0.8em;color:#666}
.column4 {float:left;padding:0;margin:0;width:25%;height:auto;Text-align:center;text-transform:capitalize}
.column4 p {padding:0;margin:0;width:80%;margin-left:10%;margin-bottom:20px}
.column4 span{display:block;font-size:1.5em}
.column4 span:hover{color:#6699cc}
.column4 em{font-size:0.8em;color:#666}
.firstfooter {width: 100%;float:left;text-align: center}
.two-column-table {float:left;margin-left:5%;margin-right:5%;width:90%}
.two-column-table-left {float:left;width:auto;min-width:100px}
.two-column-table-right {float:left;padding-left:5%;width:70%}
.leftfloat70 {float:left;width:90%;padding-left:5%; padding-right: 5%}
.rightfloat30 {float:left;width:97%;Text-align:left;padding-left:3%;color:#ccc;padding-bottom:20px}
.rightfloat30 a{color:#ccc}
.rightfloat30 h2 {color:#fff}
.floatright30centre {width:100%;background-color:#000;color:#fff}
.twitter {float:right;padding:0; margin:0;width:21%;margin-left:3%;min-width:120px;margin-top:20px;height:625px}
.tiwtter a{display:inline-block;height:700px}

.productbox {display:none}
.producticon {display:none;float:left;width:100%;min-width:150px;Text-align:center;margin-left:3%;margin-top:10px;margin-bottom:30px;font-size:1.2em;color:#333}
.producticon img {height:80px;margin-top:20px;width:auto}
.login {width:150px;height:25px;line-height:25px;Text-align:left;float:right;position:static;margin:20px 3% 0 0;font-size:1em;}
.login a, .login span {color:#666}
.login span {padding-right:5px}
.login a:hover {color:#6699cc}
.workflow {width:100%;padding:0;margin:0}
.threestepworkflow {float:left;width:25%;height:auto;Text-align:left;text-transform:capitalize;font-size:1.2em;min-height:150px;color:#666}
.workflowspacer {float:left;width:8.3%;text-align:right;color:#ccc;}
.marketing-spacer {float:left;width:100%;height:35px;background-color:#fff}
.marketing-banner {float:left;background-color:#fff;width:100%;min-height:350px;Text-align:left}
.marketing-banner img {width:100%;height:auto;overflow: hidden}
.slider {width: 100%;height: auto; overflow: hidden; background-color: #fff;min-height:400px; background-image:url("../img/marketing-banner/place-holder.jpg") }
.slider img {display: none;}


/* Training table */
.course {width:100%;float:left;height:auto;margin-bottom:10px;}
.title {float:left;width:23%;padding-right:2%;border-top:solid 1px #ccc}
.modules {float:left;width:48%;padding-right:2%;border-top:solid 1px #ccc}
.level{ float:left;width:15%;border-top:solid 1px #ccc}
.duration {float:left;width:10%;border-top:solid 1px #ccc}

/* footer */	
#social {width:35%;float:left;height:auto;padding:0;margin:0; margin-left:20px;font-size:1em;margin-top:20px; text-align: left}
#social a {color:#fff;text-decoration:none;font-size:1.5em;margin-right:0.5%}
#social a:hover{color:#ccc}
#social h2 {padding:0;margin:0;font-weight:100;color:#fff}
#terms {margin-top:10px;width:100%;float:left;font-size:0.8em;line-height:1em;}
#terms a{line-height:1em;font-size:1em;color:#999}
#terms a:hover{color:#ccc}
#address{width:30%;float:right;height:auto;text-align:right; color:#fff;margin:10px 20px 10px 0}
#address p{font-size:1.3em;padding:0px;margin:0px;text-align:right}
#address a{color:#fff}
#cafmMobile {width:25%;float:left;color:#fff}
#cafmMobile h2 {color: #FFFFFF}


/* visibility and accessibilty */
#accessibility {width:100%;float:left;font-size:0.8em;font-color:#000}	
#accessibility a{font-size:1em;font-color:#000}
#mobproduct, #mobproductname, #mobslogan, #mobcontact, #moblogo {display:none}	

/* Modules */
.module-list {width:100%}
.module-list ul {list-style:none}
.module-list li {margin:0;display:inline-block;width:5%;margin-bottom:10px;height:auto;padding:5px;min-width:100px;font-size:0.9em;color:#fff}
.module-list a {color:#fff;font-weight: normal}
.module-list img{display:block;padding-bottom:10px;Text-align:left;margin:auto;height:35px;width:auto}
.module-list il img {padding-left: 5px}


.module-list li:hover{background-color:#000}
.reactive {background-color:#08294d}
.planned {background-color:#185a84}
.job-location {background-color:#3F3F3F}
.asset{background-color:#ae113e}
.project {background-color:#2773eb}
.rate{background-color:#7bbd00}

.room{background-color:#4a18bd}
.catering{background-color:#7bbd00}
.equipment {background-color:#00c642}
.visitor {background-color:#6b3100}
.event {background-color:#794AE8}
.courier {background-color:#00adad}
.taxi  {background-color:#2773eb}
.transport {background-color:#6b3100}
.sports {background-color:#3577a7}
.car {background-color:#ad42ff}
.accommodation{background-color:#b52100}

.compliance {background-color:#006bc6}
.security {background-color:#08294d}
.permit {background-color:#00adad}
.accident {background-color:#b52100}
.audit {background-color:#5CB85C}
.workstation {background-color:#7bbd00}

.scheduler {background-color:#ad42ff}
.task {background-color:#c59102}
.absence{background-color:#de6b29}
.staff {background-color:#e7bd00}
.time {background-color:#de6b29}

.expense {background-color:#127201}
.invoice {background-color:#00ded6}
.quotation {background-color:#184a9c}
.cost {background-color:#874402}
.purchase {background-color:#21b5ff}
.contract {background-color:#00adad}
.contractor {background-color:#008c8c}
.crm {background-color:#9c185a}
.enquiry {background-color:#941515}
.fleet {background-color:#2f4f4f}
.IT {background-color:#c15200}
.stores {background-color:#00adad}
.supplier {background-color:#ff9c21}
.survey {background-color:#127201}
.property {background-color:#006bc6}


.fixed {background-color:#6b3100}
.PAT {background-color:#c59102}
.risk {background-color:#08294d}

@media only screen and (max-width:768px){
p, h1, h2  {padding:1%;margin:20px 0 20px 0}
#product{float:left;width:100%; text-align: center}
#company {float:left;width:100%; text-align: center}
#logo {float:left;width:100%;text-align: center}

#contact{float:left;width:100%;text-align:center}
	#contactleft {float:left;width:100%;text-align: center}
	#contactright {display: none}
#slogan {padding-bottom: 5px }
	#cafmMobile {float: left;width:100%;text-align: center}
	
.modulecolumn {float:left;width:100%}

.imgscale60 {width:60%;height:auto}
#social, #terms, #accessibility {padding-left:2%}
.leftfloat70 {float:left;width:100%}
.rightfloat30 {float:clear;width:99%;border:solid 1px #ccc;margin:auto;margin-left:0}
.rightfloat30 .column{float:left;width:20%;height:auto;padding:0 2.5% 0 2.5%}
.rightfloat30 h2{text-align:left}
.twitter {float:clear;width:100%;Text-align:left}
.productbox {display:none}
.producticon {display:none}
.two-column-table {width:100%;Text-align:left;margin-left:0;margin-right:0}
.two-column-table .module-list li{margin-bottom:0}
.two-column-table-left {float:left;width:100%}
.two-column-table-right {float:left;width:100%;padding-left:0;}
.focus-image {display:none}
	
.column {float:left;width:100%;height:auto;padding:0 2.5% 0 2.5%;text-align: center}
.column p{Text-align:left;text-align: center}
.column3 {float:left;width:50%;padding-right:0%}
.column3 p{Text-align:left;text-align: center}
.column4 {float:left;width:50%;padding-right:0%;padding-bottom:30px}
.column4 p{Text-align:left;text-align: center}

#footer {width: 100%;float:left;text-align: center}
#social {width: 100%;float:left;text-align: center; margin: 0px; padding:0px}
#social h2 {padding:0;margin:0;font-weight:100;color:#fff}
#terms {margin-top:10px;width:100%;float:left;font-size:0.8em;line-height:1em;}
#address{width:100%;float:left;text-align:center;margin: 0px}
#cafmMobile {width:100%;float:left;text-align: center}
	
.title {float:left;width:100%;margin-top:30px;font-weight: bold}
.modules {float:left;width:100%;}
.level{ float:left;width:100%;}
	.duration {float:left;width:100%;border-bottom: thick; border-bottom-color: black}

}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 60px 0;
  background: white;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation: 35s slide infinite linear;
}

.logos-slide img {
  height: 160px;
  margin: 0 40px;
}