/*--GENERAL------------------------------------------------------------------------------------------------------------------------------*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight:300; }
body, input, select, textarea { font-family: "Roboto", "sans-serif"; font-size: 17px }
html, body { height: auto; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased }
body { background-color: #fff; color: #192b45; margin: 0; padding-bottom: 0; position: relative; }
a:focus { outline: none }
a:link, a:visited, a:hover { color: #404040; text-decoration: underline }
a:link.read-more, a:visited.read-more, a:hover.read-more { text-align: center; overflow: hidden; display: block;width:250px;height: 50px;line-height:48px;border-radius: 25px;margin: 5px auto 20px;color: #fff; text-decoration: none;font-size: 25px;text-transform: uppercase;clear: both; background-color: #7b9db3;}
p a:link, p a:visited { color: #7b9db3; text-decoration: none }
p a:hover { color: #F76313 }
h1 a:link, h1 a:visited, h1 a:hover, h2 a:link, h2 a:visited, h2 a:hover, h3 a:link, h3 a:visited, h3 a:hover { text-decoration: none }
h1 a:hover, h1 a:link, h1 a:visited, h2 a:hover, h2 a:link, h2 a:visited, h3 a:hover, h3 a:link, h3 a:visited { text-decoration: none }
.sprite { background-image: url(../img/spritesheet.png); background-repeat: no-repeat; display: block }
button { text-transform: uppercase; z-index: 1000; background-color: #F76313; border: medium none; color: #fff; display: block; font-size: 18px; right: 10px; margin: 0 auto; padding: 8px 16px; position: absolute; top: 10px;  border-radius: 4px }
button.actives { background-color: #0077a2 } 
.home-hov:hover {background-color: #eec154}
/*--GENERAL------------------------------------------------------------------------------------------------------------------------------*/
  
  

/*--CALL TO ACTION------------------------------------------------------------------------------------------------------------------------------*/
.faux-arrows {}
.contact-us { width: 100%; text-align: center;  margin-top: 20px; margin-bottom:20px;overflow:hidden; }
.contact-us a:link, .contact-us a:visited { margin: 0 auto; display: block; width: 373px; line-height: 48px; text-transform: uppercase;  border: 1px solid #192b45; color: #192b45; text-decoration: none;  border-radius: 4px; font-size:25px; }
.contact-us a:hover { color: #fff;background-color: #192b45}
/*--CALL TO ACTION------------------------------------------------------------------------------------------------------------------------------*/



/*--NAV------------------------------------------------------------------------------------------------------------------------------*/
.navigation-new { position: fixed; top: 0; left: 0; width: 100%; height: 75px; z-index: 1001;background-color: #fff; border-bottom:1px solid #ccc;}
.navigation-menu-new { padding-top: 0; max-width: 1121px; height: 75px; margin: 0 auto; position: relative }
.navigation-menu-new ul.top-nav { font-family: "Roboto", "sans-serif"; list-style-type: none; margin: 0; padding: 0 20px 0 0; height: 30px; font-size: 17px; float: right }
.navigation-menu-new ul.top-nav li { float: left; margin: 0 40px 0 0; text-align: center; line-height: 75px; height: 75px }
.navigation-menu-new ul.top-nav li:last-of-type { margin-right: 0!important }
.navigation-menu-new ul.top-nav li a:link, .navigation-menu-new ul.top-nav li a:visited { font-family: "Roboto", "sans-serif"; font-size: 15px; text-decoration: none; color: #0a1d3a; text-transform: uppercase }
.navigation-menu-new ul.top-nav li a:hover {  border-bottom:2px solid #ebb435 }
.navigation-enquire-new { line-height: 40px; float: right; cursor: pointer; width: 150px; height: 40px; text-align: center;margin-top: 17px;margin-right: 10px;  }


 .navigation-enquire-new a:link, .navigation-enquire-new a:visited { font-family: "Roboto", "sans-serif"; color: #ebb435; text-transform: uppercase;  text-decoration: none;
display: block;width: 150px; height: 40px; text-align: center;border:1px solid #ebb435; border-radius: 4px;}

.navigation-enquire-new a:hover {color:#fff; background-color: #ebb435}


.logo-float-new { position: absolute; z-index: 1002; top: 0; left: 0; width: 243px; height: 75px;  background-repeat: no-repeat; display: block }
.logo-float-new img { display: block;max-width: 100%; height: auto;  }
 #show-hamburger { text-transform: uppercase; color: #fff; width: 30px; display: none }
.sprite-menu-hamburger-new { background-position: -5px -4707px; width: 30px; height: 30px; margin-top: 22px; display: none; float: right }
/*--NAV------------------------------------------------------------------------------------------------------------------------------*/


 
/*--HEADERS------------------------------------------------------------------------------------------------------------------------------*/
.background-main { position: relative; background-image: url(../img/bg/erp.jpg); background-repeat: no-repeat; height: 500px; width: 100%; background-position: center top; margin-top: 75px; }  
  .background-sub { position: relative; background-image: url(../img/bg/sub-erp.jpg); background-repeat: no-repeat; height: 300px; width: 100%; background-position: center top; margin-top: 75px; }
.background-main div.text { text-align: center; color: #fff; text-shadow: rgba(255,255,255,.1) -1px -1px 1px, rgba(0,0,0,.5) 1px 1px 1px; font-size: 50px; text-transform: uppercase }
.background-main div.text span { font-size: 40px }
/*--HEADERS------------------------------------------------------------------------------------------------------------------------------*/

 

/*--GRID------------------------------------------------------------------------------------------------------------------------------*/
.grid-a-container {width:100%; padding:50px 0 60px;}
.grid-a-container-wrap {width:1121px;margin:0 auto;}
.grid-a-container-wrap h1 {margin: 0 0 20px 0;font-size: 40px;padding-bottom: 4px;border-bottom: 1px solid #192b45;}
.grid-a-container-wrap p.intro-intro {margin: 0 0 30px;font-size:22px; font-weight:200;line-height:1.5 }
.grid-a { overflow: hidden; width: 100%; border-radius: 4px;display:flex; flex-wrap: wrap; justify-content: center}
.grid-a-box { display: flex; overflow: hidden; padding:30px;   background-color: #ebb435;flex: 1 1 40%; margin:20px; border-radius:15px;}
.myBox {cursor: pointer;}
.grid-a-box span { display: block;text-align: center;color: #0e1520;line-height: 15px;margin-bottom: 20px;font-size:22px}
.grid-a-box div {overflow: hidden; border-radius: 10px; border:1px solid #ffffff88;padding: 20px;  }
.grid-a-box div img {display: block;max-width: 100%; margin:0 auto 10px; border-radius:4px;border:1px solid #ffffff88;}
.grid-a-box p {   width: 100%; color:#0e1520;   margin-bottom:0; margin-top:0; text-align: center;line-height:1.8 }
.grid-a-box a:link, 
.grid-a-box a:visited, 
.grid-a-box a:hover 
{ display: block;line-height: 30px;text-decoration: none;height: 35px;overflow: hidden;color: #0e1520;font-size: 30px;text-align: center; }
.grid-a-box h3 {
display: block;
line-height: 30px;
height: 35px;
overflow: hidden;
color: #0e1520;
font-size: 30px;margin:0;
  text-align: center;}
/*--GRID------------------------------------------------------------------------------------------------------------------------------*/



/*--ABOUT------------------------------------------------------------------------------------------------------------------------------*/
.about-wrap {width: 1121px;margin: 50px auto 50px ;}
.about-wrap p.about-intro {margin: 0 0 30px;font-size: 22px;font-weight: 200; line-height:1.5}
.about-wrap h1 {margin: 0 0 20px;font-size: 40px;padding-bottom: 4px;border-bottom: 1px solid #192b45;}
.about-wrap h3 {margin:0 0 20px; font-size:40px; padding-bottom:4px; border-bottom:1px solid #0a1d3a;}
.team-container {overflow: hidden;width: 100%;border-radius: 4px;display: flex;flex-wrap: wrap;justify-content: center;}
.team-container div {overflow: hidden;padding: 30px;background-color: #ebb435;flex: 1 1 40%;margin: 20px;border-radius: 15px;}
.team-container div div {overflow: hidden;border-radius: 10px;border: 1px solid #ffffff88;padding: 20px;}
.team-container div div p {width: 100%;color: #0e1520;text-align: center;line-height:1.8; margin:0}
.team-container div div h2 {display: block;margin: 10px 0 0 0 ;overflow: hidden;color: #0e1520;font-size: 30px;text-align: center;}
.team-container div div img {display:block; max-width:100%; margin:0 auto; border-radius:3px;}
.team-container div div img:hover {filter: none;-webkit-filter:none;}
.team-container div div h2 span {display: block;text-align: center;margin-bottom: 10px;font-size: 22px;}
.about-blue-strip {width:100%;background-color: #0a1d3a; padding:60px 0}
.about-blue-wrap {width: 1121px;margin: 0 auto;}
.about-blue-wrap p.about-intro {margin: 0 0 30px;font-size: 22px;font-weight: 200; color:#fff;line-height:1.5}
.about-blue-wrap h3 {margin:0 0 20px 0; color:#fff; font-size:40px; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,0.5)}
.team-blue-container {overflow: hidden;width: 100%;border-radius: 4px;display: flex;flex-wrap: wrap;justify-content: center;}
.team-blue-container div {overflow: hidden;padding: 30px;background-color: rgba(7,22,43,1);;flex: 1 1 40%;margin: 20px;border-radius: 15px;}
.team-blue-container div div {overflow: hidden;border-radius: 10px;border: 1px solid #ffffff88;padding: 20px;}
.team-blue-container div div p {width: 100%;text-align: center; color:#fff; line-height:1.8}
.team-blue-container div div h2 {display: block;margin: 0;overflow: hidden;color: #fff;font-size: 30px;text-align: center;}
.team-blue-container div div img {display:block; max-width:100%; margin:0 auto;-webkit-filter: grayscale(100%);filter: grayscale(100%); border-radius:3px;}
.team-blue-container div div img:hover {filter: none;-webkit-filter:none;}
.team-blue-container div div h2 span {display: block;text-align: center;margin-bottom: 10px;font-size: 22px;}
/*--ABOUT------------------------------------------------------------------------------------------------------------------------------*/



/*--WORKFLOW------------------------------------------------------------------------------------------------------------------------------*/
.workflow-wrap {overflow: hidden; width: 100%; border-radius: 4px;display:flex; flex-wrap: wrap; justify-content: center;}
.workflow-box { overflow: hidden; padding:5px;  background-color: #ebb435;flex: 1 1 100%; margin:10px 0 0; border-radius:15px; background-repeat: no-repeat;background-image: url(../img/bg/wf-blocks.png); background-position: 700px bottom}
.workflow-box-con {display: flex; justify-content: center; }
.workflow-box div.wf-a.wf-a {flex: 0 1 45%; }
.workflow-box div.wf-b {flex: 0 1 45%; }
.workflow-box div.wf-a,.workflow-box div.wf-b {margin:20px}
.wf-bgcol1 {background-color:rgba(10,29,58,0.9); color:#fff; font-size:14px; text-align: center}
.wf-bgcol2 {background-color:rgba(255,255,255,0.6);}
.wf-arrow {display: block; margin:0 auto;}
.workflow-box div.wf-a ul, .workflow-box div.wf-b ul {text-align: left;list-style-type: none;font-weight: 300;font-size: 12px;margin: 0 auto;width: 65%;padding: 10px 0;overflow: hidden;}
.workflow-box div.wf-a ul li, .workflow-box div.wf-b ul li {background-position: 4px 4px;background-repeat: no-repeat;background-image: url(../img/wf-bullet.png);padding:5px 5px 5px 25px; text-transform:uppercase;background-color:rgba(255,255,255,0.7);margin-bottom:3px; font-weight:400; border-radius:20px;}
.workflow-box span {flex:0 1 100%; display: block;text-align: center;color: #0e1520;line-height: 15px;margin-bottom: 10px;font-size:22px}
.workflow-box div {overflow: hidden; border-radius: 10px; padding: 20px;  }
.workflow-box div img {display: block;max-width: 100%; margin:0 auto 10px; border-radius:4px;border:1px solid #ffffff88;}
.workflow-box p { flex:0 1 100%;  width: 100%;   margin-bottom:10px; margin-top:0; display: block;line-height:1.8 }
.workflow-box div h4 {flex:0 1 100%;display: block;line-height: 30px;overflow: hidden;font-size: 25px;text-align: center; margin:0 0 10px; padding-bottom:5px;}
.workflow-box div h4.hcol1 {border-bottom:2px solid rgba(10,29,58,0.9);}
.workflow-box div h4.hcol2 {border-bottom:2px solid rgba(255,255,255,0.7);}
/*--WORKFLOW------------------------------------------------------------------------------------------------------------------------------*/



/*--CLIENTS------------------------------------------------------------------------------------------------------------------------------*/
.clients {background-color: #0a1d3a; color:#fff;padding:60px 0 60px; background-image: url(../img/bg/reasons.jpg); background-repeat: no-repeat }
.clients-container {width:1121px; margin:0 auto;display: flex; flex-wrap: wrap; justify-content: center;overflow-x:hidden}
.clients-container h3 {font-size:40px; width:100%; text-align: center;}
.clients-container h3:first-of-type {margin:0 0 10px;}
.clients-container h3:last-of-type {margin:50px 0 50px; font-size:55px; font-weight:400; letter-spacing: -2px}
.clients-container h3:last-of-type span {color:#ebb435;font-weight:500;}
.clients-container h3:last-of-type strong {text-transform: uppercase;font-weight:500; letter-spacing: 10px;}
.clients-container p.client-intro {text-align: center; font-size:22px; font-weight:200; line-height:1.5}
.clients-container p { margin:0 0 60px; font-weight:200 }
.clients-container div.lgo {flex: 1 1 18%; margin:10px; background-color:rgba(7,22,43,0.8);  border-radius:50%; padding:35px; }
.clients-container div.lgo img {display: block;max-width: 100%;}
/*--CLIENTS------------------------------------------------------------------------------------------------------------------------------*/



/*--VIDS------------------------------------------------------------------------------------------------------------------------------*/
.embed-container {height: 0;overflow: hidden;padding-bottom: 56.25%;padding-top: 0;position: relative;border-radius: 3px;}
.embed-container iframe, .embed-container object, .embed-container embed {height: 100% !important;left: 0;position: absolute;top: 0;width: 100% !important;}
.vids {background-color: #0a1d3a; color:#fff;padding:40px 0 50px; background-image: url(../img/bg/reasons.jpg); background-repeat: no-repeat }
.vids-container {width:90%; margin:0 auto;display: flex; flex-wrap: wrap; justify-content: center;}
.vids-container h3 {font-size:40px; width:100%; text-align: center; margin:0 0 10px}
.vids-container p.vids-intro {text-align: center; font-size:22px; font-weight:200; line-height:1.5}
.vids-container p { margin:0 0 25px; font-weight:200 }
.vids-container div.vidslgo {flex: 1 1 18%; margin:10px; background-color:rgba(7,22,43,0.8);  border-radius:15px; padding:15px; cursor:pointer }
.vids-container div.vidslgo img {display: block;max-width: 100%; border-radius:4px;}
.vids-container div.vidslgo h2{display:block;text-align: center;  font-weight:400; color:#ebb435; margin-top:15px;font-size:17px;}
/*--VIDS------------------------------------------------------------------------------------------------------------------------------*/



/*--EXAMPLES------------------------------------------------------------------------------------------------------------------------------*/
.examples {background-color: #0a1d3a; color:#fff;padding:40px 0 50px; background-image: url(../img/bg/reasons.jpg); background-repeat: no-repeat }
.examples-container {width:90%; margin:0 auto;display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row}
.examples h3.main-top  {font-size:40px; width:100%; text-align: center; margin:0 0 10px}
.examples-container p.examples-intro {text-align: center; font-size:22px; font-weight:200; line-height:1.5}
.examples-container p { margin:0 0 25px; font-weight:200 }
.examples-container div.exlgo {flex: 1 1 18%; margin:10px; background-color:rgba(7,22,43,0.8);  border-radius:15px; padding:15px; cursor:pointer }
.examples-container div.exlgo img {display: block;max-width: 100%; border-radius:4px;}
.examples-container div.exlgo a:link,.examples-container div.exlgo a:visited
{display:block;text-align: center; text-decoration: none; font-weight:400; color:#ebb435; margin-top:15px;}
.examples-container div.exlgo a:hover {color:#fff;}
/*--EXAMPLES------------------------------------------------------------------------------------------------------------------------------*/



/*--LEADER------------------------------------------------------------------------------------------------------------------------------*/
.leader-container {width:45%; margin:0 auto; display: flex; justify-content: center; flex-wrap:wrap;}
.leader {flex: 1 1 70%;margin:0 auto 40px;padding-top:4%;}
div.jp-pic {flex: 0 1 140px;  }
div.jp-pic img {display: block; margin:0 auto;max-width: 100%; border-radius:50%;-webkit-filter: grayscale(100%);filter: grayscale(100%);border:1px solid #ffffff88;}
div.jp-des {line-height: 1.5; padding-left:5px;}
span.leader-name {display: block; margin: 0 0 10px 0; color:#fff; font-weight:400; font-size:21px; letter-spacing: 2px;padding-left:5px;}
div.leader h3 {font-size:28px; margin:0 0 3px 0;font-weight:700;text-transform: uppercase;padding-bottom:2px; border-bottom:1px solid #ffffff88;padding-left:5px;}
div.leader h3 span {text-transform: uppercase;color:#ebb435; font-weight:700}
/*--LEADER------------------------------------------------------------------------------------------------------------------------------*/



/*--MODULES------------------------------------------------------------------------------------------------------------------------------*/
.modules {background-color: #0a1d3a; color:#fff;padding:40px 0 50px; background-image: url(../img/bg/reasons.jpg); background-repeat: no-repeat }
.modules-container {width:90%; margin:0 auto;display: flex; flex-wrap: wrap; justify-content: center;}
.modules-container h3 {font-size:40px; width:100%; text-align: center;}
.modules-container h3:first-of-type {margin:0 0 10px;}
.modules-container h3:last-of-type {margin:50px 0 50px; font-size:55px; font-weight:400; letter-spacing: -2px}
.modules-container h3:last-of-type span {color:#ebb435;font-weight:500;}
.modules-container h3:last-of-type strong {text-transform: uppercase;font-weight:500; letter-spacing: 10px;}
.modules-container p.client-intro {text-align: center; font-size:22px; font-weight:200}
.modules-container p { margin:0 0 25px; font-weight:200 }
.modules-flx-pic {flex: 0 1 20%;margin:10px;background-color: rgba(7,22,43,0.8);padding:30px; border-radius:10px; }
.modules-flx-pic img {display: block; margin:0 auto;border-radius: 50%;padding: 20px;
background-color: rgba(10,29,58,1); border:1px solid rgba(255,255,255,0.5)}
.modules-flx-pic h4 {border-bottom:1px solid rgba(255,255,255,0.5); padding-bottom:3px; font-size:23px; font-weight:200; text-align: center;margin:10px 0 5px }
.modules-list {text-align: left;list-style-type: none;font-size: 16px;margin: 0;padding-left: 0;color: #fff;}
.modules-list li {background-position: 5px 8px;background-repeat: no-repeat;background-image: url(../img/wf-bullet-tick.png);padding: 8px 2px 8px 25px; background-color: rgba(255,255,255,0.08); border-radius:5px; margin-bottom:2px;text-transform:uppercase; font-size:13px;}
/*--MODULES------------------------------------------------------------------------------------------------------------------------------*/



/*--REASON------------------------------------------------------------------------------------------------------------------------------*/
.reason-flx-pic,.reason-flx-par {margin:10px;}
.reason-flx-pic {flex: 1 1 15%; }
.reason-flx-pic img {display: block; margin:0 auto;}
.reason-flx-par {flex:1 1 75%}
.reason-flx-par h4 {margin:0; font-size:23px; font-weight:400; }
/*--REASON------------------------------------------------------------------------------------------------------------------------------*/



/*--SERVICES------------------------------------------------------------------------------------------------------------------------------*/
.services {width:100%; padding:40px 0 50px;background-color: #ffffff; }
.services-container {display:flex;justify-content: center; flex-wrap: wrap; width:1121px; margin:0 auto;}
.services-container h3 {margin: 0 0 20px 0;font-size: 40px;padding-bottom: 4px;border-bottom: 1px solid #192b45; width:100%}
.services-container p.services-intro {margin:0 0 30px; text-align:center;font-size:22px; font-weight:200; flex: 1 1 100%}
.services-container div{flex:1 1 25%; margin:10px; background-color: #ebb435; border-radius: 15px; padding:20px;}
.services-container div h4 {margin:5px 0 0 0; text-align: center;
font-weight: 700;
font-size: 30px;
width: 100%;
letter-spacing: -2px;}
.services-container div img {max-width: 100%;height: auto;display: block;margin-left: auto;margin-right: auto;}
.services-container div a {display: block; text-align: center;}
.services-container div p {margin-top:10px}
.services-container div span {text-align: center; display: block;}
/*--SERVICES------------------------------------------------------------------------------------------------------------------------------*/



/*--SERVICES------------------------------------------------------------------------------------------------------------------------------*/
.prices {width:100%; padding:40px 0 50px; }
.prices-container {display:flex;justify-content: center; flex-wrap: wrap; width:1121px;; margin:0 auto;}
.prices-container h3 {margin: 0 0 20px 0;font-size: 40px;padding-bottom: 4px;border-bottom: 1px solid #192b45; width:100%}
.prices-container p.prices-intro {margin:0 0 30px; font-size:22px; font-weight:200}
.prices-container div.main-prices  {flex:1 1 28%; margin:10px; background-color: #ebb435; border-radius: 15px; padding:20px; text-align:center;}
.prices-container div h4 {font-size:23px;padding-bottom:3px;border-bottom: 1px solid #ffffff88; font-weight:400; margin:10px 0 0 0; text-transform: uppercase}
span.number {display: block; font-weight:700; font-size:40px;letter-spacing: -4px; }
span.zar {display: block; font-weight:700; font-size:30px; width:100%;letter-spacing: -2px;}
span.zar span {font-weight:300; font-size:15px;}
.prices-container div.main-prices img {display: block;margin: 0 auto;border-radius: 50%;padding: 20px;background-color: rgba(10,29,58,1);}
.prices-container div.main-prices div {background-color: #ffffff88; border-radius:10px; margin: 10px 0; padding:5px}
.prices-container div.main-prices div h5 {margin: 0;  font-weight:400; }
span.or {display: block;
font-weight: 700;
font-size: 30px;
width: 100%;
letter-spacing: -2px;text-transform: uppercase}
/*--SERVICES------------------------------------------------------------------------------------------------------------------------------*/



/*--SUB HEADINGS------------------------------------------------------------------------------------------------------------------------------*/
.white-hero-text-wrapper { margin: 0 auto; width: 1121px; position: relative }
.white-hero-text-wrapper p { width: 700px;  color: #fff; font-size: 23px }
.white-hero-text-wrapper p.nu { font-size: 19px !important; }
.white-hero-text-wrapper p.parfloat { position: absolute; top: 150px; left: 0 }
.white-hero-text-wrapper h1 { color: #fff; margin-top:0 }
.white-hero-text-wrapper h1.hfloat { position: absolute; top: 15px; left: 50px;font-size:65px; }
.white-hero-text-wrapper h1.hfloat span {color:#ebb435; font-weight:500; letter-spacing: -4px; }
/*--SUB HEADINGS------------------------------------------------------------------------------------------------------------------------------*/



/*--FOOTER------------------------------------------------------------------------------------------------------------------------------*/
.copyright { width: 100%; text-align: center; height: 40px; margin: 0 auto; line-height: 40px; font-size: 12px; color: #ffffff88 }
.copyright a:link, .copyright a:visited, .copyright a:hover { color: #fff }
.footer-grey-dark { background-color: #0f1a2a; width: 100%; overflow: hidden;  }

.footerstick { max-width: 1121px; padding: 5px 0; overflow: hidden; margin:0 auto; display: flex; flex-wrap: wrap; justify-content: center}

.footerstick div.middle {flex:1 1 33%}
.footerstick div.social {flex:1 1 33%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}
.footerstick div.social img {display: block;margin:5px;}
.footerstick div.address {flex:1 1 33% }
.footerstick div.address img {overflow: hidden;display: block;margin-left: auto;margin-right: auto; margin-top:20px;}
.footerstick ul.newfoot { list-style-type: none; padding: 0; margin-top: 0; width:90% }
.footerstick ul.newfoot li { padding: 7px 0 7px 0;border-bottom: 1px solid #21385a }
.footerstick a:link, .footerstick a:visited { font-size: 15px; text-decoration: none;color: #fff;  }
.footerstick a:hover {color: #fff;}
.footerstick div h4{ margin: 0; text-align: left; font-size: 23px; color:#7b9db3; }
.contact-details-bottom {color:#fff; text-align: center; margin-top:0}
.contact-details-bottom span.telnum { display: block; margin-bottom: 10px; font-size:22px}
.contact-details-bottom span.add-col {font-size:17px; color:#ffffff88; display: block;}
/*--FOOOTER------------------------------------------------------------------------------------------------------------------------------*/



/*--CONTACT------------------------------------------------------------------------------------------------------------------------------*/
.intro-main {font-size: 23px;width: 100%;margin: 20px auto 30px;text-align: center;color: #838181;}
.intro-main-wh {color:#fff;  margin:0 auto 20px; font-size:22px; font-weight:200;}
.bg-none-spacer { height: 74px; width: 100%; clear: both } 
.wrapper-contact {background-color: rgba(7,22,43,0.8);margin: 0 auto 50px; clear: both;width: 1121px; position: relative; border-radius:15px; padding:20px 20px 50px 20px; }
.feature-wrapper-bl { background-color: #0a1d3a; width: 100%; overflow: hidden;   }
.feature-wrapper-bl div.main-wrap {width:1121px; margin:0 auto;}
.feature-wrapper-bl div.main-wrap p.top-heading {text-align: center}
.feature-wrapper-bl div.main-wrap h1 { margin: 20px 0 20px 0;font-size: 40px;padding-bottom: 4px;border-bottom: 1px solid #ffffff88;color:#fff;}
.feature-wrapper-bl div.main-wrap h2 {color:#fff;  font-size:37px; margin:0 0 20px 0; text-align: center}
input.button-main { margin: 0 auto 10px; display: block; width: 373px; line-height: 48px; text-transform: uppercase; height: 50px; background-color: #ebb435;  text-decoration: none;  border-radius: 25px; font-size:25px; border:0;-webkit-appearance: none;-moz-appearance: none; font-weight:400}
.buttonright-main { clear: both; overflow: hidden }
.homemapbluerob { display: none }
.form { margin: 0 }  
.form input.button:hover { background-color: #3682BD }
.form p, .form span {  }
.formwrapper { margin-bottom: 5px; margin-top: 5px; width: 100%;}
.formwrapper label.short {    padding: 3px;  border-radius: 4px; height: 43px!important; background-color: #B9D3E5; float: left; width: 160px!important; font-size: 13px; text-transform: uppercase; margin: 0 1px 0 0; line-height: 38px }
.formwrapper textarea {  padding: 3px; max-width: 400px; height: 150px; border: 1px solid #fff; font-size: 16px; letter-spacing: 0; width: 55% }
.formwrapper input.group-4 { color: #222; padding: 3px; height: 50px; line-height: 50px; border: 1px solid #fff; margin: 0 0 10px; font-size: 16px; letter-spacing: 0; width: 100%;}
.formwrapper input.group-1 { color: #666; padding: 3px; height: 50px; line-height: 50px; border: 1px solid #94bfde; margin: 0; font-size: 16px; letter-spacing: 0; width: 20%;    text-align: center; text-transform: uppercase }
.formwrapper input, .formwrapper {   border-radius: 25px }
.formwrapper input.short-b { background-position: right -11879px; width: 220px!important;  border-radius: 4px; padding: 3px; height: 35px; line-height: 35px; border: 1px solid #ccc; margin: 0; font-size: 16px; letter-spacing: 0; color: gray; -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.1); -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.1); box-shadow: inset 0 0 8px rgba(0,0,0,.1) }
.formwrapper select.short-b { background-position: right -11879px; width: 229px!important;  border-radius: 4px; padding: 3px; height: 43px; line-height: 43px; border: 1px solid #ccc; margin: 0; font-size: 16px; letter-spacing: 0; color: gray; -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.1); -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.1); box-shadow: inset 0 0 8px rgba(0,0,0,.1) }
.formwrapper textarea.short-b { background-position: right -11879px; width: 220px!important;  border-radius: 4px; padding: 3px; border: 1px solid #94bfde; margin: 0; font-size: 16px; letter-spacing: 0; color: gray; -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.1); -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.1); box-shadow: inset 0 0 8px rgba(0,0,0,.1) }
.formwrapper input:hover, textarea:hover, .formwrapper input:focus, textarea:focus { border-color: #C9C9C9 }
select { padding: 3px; height: 43px; line-height: 44px; border: 1px solid #ccc; margin: 0; font-size: 16px; letter-spacing: 0; color: gray; width: 280px }
textarea, select { display: block; margin-left: auto; margin-right: auto;  border-radius: 4px }
.split-form { float: left; width: 50%; padding: 20px;}
.no-split-form { width: 100%; padding: 0 20px;}
.smaller-form { width: 65%; margin: 0 auto }
input.ticks[type=checkbox] + label { display: block; margin: .2em; cursor: pointer; padding: .2em; }
input.ticks[type=checkbox] { display: none }
input.ticks[type=checkbox] + label:before { content: "\2714"; border: .1em solid #000; border-radius: .2em; display: inline-block; width: 48px; height: 48px; padding-left: .2em; padding-top: 9px; padding-bottom: .3em; margin-right: .2em; vertical-align: middle; color: transparent; transition: .2s;}
input.ticks[type=checkbox] + label:active:before { transform: scale(0) }
input.ticks[type=checkbox]:checked + label:before { background-color: #3682bd; border-color: #3682bd; color: #fff }
input.ticks[type=checkbox]:disabled + label:before { transform: scale(1); border-color: #aaa }
input.ticks[type=checkbox]:checked:disabled + label:before { transform: scale(1); background-color: #bfb; border-color: #bfb }
.form-spacer { padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.3); margin: 0 auto 30px; width: 95%; text-align: center }
.form-spacer h3 {margin: 20px 0 20px 0;font-size: 30px;padding-bottom: 4px;color:#fff; }
.standard-option { display: none }
.custom-option { display: none }
.inputGroup { background-color: #fff;  position: relative; display: inline-block; width: 220px; margin-bottom: 10px;  border-radius: 24px; overflow: hidden; margin-right: 10px; margin-left: 10px }
.inputGroup label { padding: 6px 10px;    width: 100%; display: block; text-align: left; color: #3c454c; cursor: pointer; position: relative; z-index: 2; transition: color 200ms ease-in; overflow: hidden;border-radius: 24px; }
.inputGroup label:before { width: 10px; height: 10px; border-radius: 50%; content: ''; background-color: #ebb435; position: absolute; left: 50%; top: 50%; border: none; opacity: 0; z-index: -1; }
.inputGroup label:after { width: 32px; height: 32px;  border-radius: 50%; content: ''; border: 1px solid #222; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E "); background-repeat: no-repeat; background-position: 3px 4px;  z-index: 2; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; transition: all 200ms ease-in;}
.inputGroup input:checked ~ label { color: #0e1520 }
.inputGroup input:checked ~ label:before { transform: translate(-50%, -50%) scale3d(56, 56, 1); opacity: 1 }
.inputGroup input:checked ~ label:after { background-color: #222; border-color: #222 }
.inputGroup input { width: 32px; height: 32px; order: 1; z-index: 2; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); cursor: pointer; visibility: hidden }
.country-chooser-c { padding: 0; text-transform: uppercase; width: 100%; font-size: 18px; text-align: center;  line-height: 36px; margin-bottom: 5px; margin-top: 5px; overflow: hidden;}
.country-chooser-b { padding: 20px 5px; text-transform: uppercase; width: 100%; text-align: center; font-size: 18px;  line-height: 36px; margin: 5px auto; overflow: hidden;}
/*--CONTACT------------------------------------------------------------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/




@media only screen and (min-width:1024px) and (max-width:1120px) {
/*--CONTACT 1024------------------------------------------------------------------------------------------------------------------------------*/
.smaller-form { width: 100% }
.formwrapper label { width: 280px }
/*--CONTACT 1024------------------------------------------------------------------------------------------------------------------------------*/

  
  
/*--NAVIGATION 1024---------------------------------------------------------------------------*/
.navigation-menu-new { width: 98%; max-width: 98% }
.navigation-menu-new ul.top-nav li a:link { font-size: 14px }
.navigation-menu-new ul.top-nav li { margin: 0 35px 0 0 }
/*--NAVIGATION 1024---------------------------------------------------------------------------*/
  
  
.grid-a-container-wrap, .clients-container,.services-container,.about-wrap,.prices-container,.about-blue-wrap,.feature-wrapper-bl div.main-wrap,.wrapper-contact {width: 100%;padding:10px;}
.modules-container {width: 100%;}
.modules-flx-pic {flex: 0 1 25%;padding: 20px;}
.examples-container div.exlgo {flex: 0 1 44%;}
.vids-container div.vidslgo {flex: 0 1 45%;}
}



@media only screen and (min-width:768px) and (max-width:1023px) {
/*--CONTACT 768------------------------------------------------------------------------------------------------------------------------------*/
.formwrapper input, textarea, select { width: 100%;}
.formwrapper input { height: 43px }
.formwrapper div label { width: 100%; margin: 10px 0; text-align: left!important; height: 43px }
.formwrapper textarea { max-width: none }
.nice-select { width: 165px!important }
.nice-select.open .list { width: 165px!important }
.smaller-form { width: 100% }
/*--CONTACT 768------------------------------------------------------------------------------------------------------------------------------*/

  
  
/*--NAVIGATION 768---------------------------------------------------------------------------*/
.navigation-menu-new ul.top-nav { padding: 0; list-style-type: none; width: 100%; margin: 0; position: absolute; top: 49px; float: none; display: none }
.navigation-menu-new ul.top-nav li { height: 60px; line-height: 60px; background-color: #0a1d3a; width: 100%; margin: 0; float: none }
.navigation-menu-new ul.top-nav li a { display: block; position: relative; padding: 0; font-size: 16px; color: #fff!important; outline: 0; text-decoration: none }
.no-touch ul.top-nav li a:hover { background: rgba(255,248,213,.1) }
.navigation-menu-new ul.top-nav li a:hover { color: #222!important; background-color: #ebb435}
.navigation-menu-new ul.top-nav li:hover { line-height: 60px; height: 60px; border-bottom: none; }
.navigation-new { height: 50px; padding: 0 }
.navigation-menu-new { width: 100%; max-width: 100%; height: 50px }
.top-nav { display: none }  
.logo-float-new { height:50px; width:130px; }
.logo-float-new img {margin-top:6px;margin-left:3px;}
.navigation-enquire-new {  border-radius: 2px; width: 100px; margin-right: 15px; font-size: 15px; background-image: none; height: 30px; margin-top: 10px; line-height: 30px }
  .navigation-enquire-new a:link, .navigation-enquire-new a:visited {width: 100px;height:30px}
#show-hamburger { display: block; margin-left: 10px; margin-right: 10px; margin-top: 10px; }
.sprite-menu-hamburger-new { float: right; }
/*--NAVIGATION 768---------------------------------------------------------------------------*/

  
  
/*--INDEX HEADER---------------------------------------------------------------------------*/
.bg-none-spacer {height: 50px;}
.background-main {background-image: url(../img/bg/erp.jpg);height: 300px;background-position: center top;margin-top: 50px;}
.white-hero-text-wrapper {width: 100%;}
.white-hero-text-wrapper h1.hfloat {top: 10px; text-align:center;left: 0;right:0;margin:0 auto;font-size: 45px;}
.white-hero-text-wrapper h1.hfloat span {letter-spacing: -2px;}
/*--INDEX HEADER---------------------------------------------------------------------------*/
  
  

/*--INDEX HEADER---------------------------------------------------------------------------*/
.bg-none-spacer {height: 50px;}
.background-main {background-image: url(../img/bg/erp-768.jpg);height: 300px;background-position: center top;margin-top: 50px;}
.white-hero-text-wrapper {width: 100%;}
.white-hero-text-wrapper h1.hfloat {line-height: 39px;top: 10px; text-align:center;left: 0;right:0;margin:0 auto;font-size: 40px;}
.white-hero-text-wrapper h1.hfloat span {display:block;letter-spacing: -2px;}
/*--INDEX HEADER---------------------------------------------------------------------------*/
  

  
/*--SUB HEADER---------------------------------------------------------------------------*/  
.background-sub {margin-top: 50px;background-image: url(../img/bg/erp-768.jpg);}
/*--SUB HEADER---------------------------------------------------------------------------*/ 
  
  

/*--FOOTER---------------------------------------------------------------------------*/ 
.footerstick {width: 100%;padding:10px;}
.footerstick div.middle {flex: 1 1 100%}
.footerstick div.social {flex: 1 1 100%; padding-top: 20px}
.footerstick ul.newfoot {width: 100%;}
.footerstick div.address {flex: 1 1 100%}
/*--FOOTER---------------------------------------------------------------------------*/
  
  
  
/*--YELLOW HOME---------------------------------------------------------------------------*/   
.grid-a-container-wrap {width: 100%;}
.grid-a-container {padding: 10px 10px 50px;}
.grid-a-container-wrap h1 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.grid-a-container-wrap p.intro-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
.grid-a-box {flex: 0 1 100%;margin: 10px 0;padding:5px;}
.contact-us a:link, .contact-us a:visited {width: 100%;}
.grid-a-box div {padding: 10px;}
.grid-a-box a:link, .grid-a-box a:visited, .grid-a-box a:hover {height:auto;font-size: 25px;letter-spacing: -2px;margin-bottom:3px;}
.grid-a-box span {font-size: 18px;}
/*--YELLOW HOME---------------------------------------------------------------------------*/ 
  

  
/*--YELLOW SERVICES---------------------------------------------------------------------------*/  
.services-container {width: 100%;}
.services-container h3 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.services-container p.services-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
.services-container div {margin: 5px;padding: 10px;}
/*--YELLOW SERVICES---------------------------------------------------------------------------*/ 
  
 
  
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/  
.clients-container {width: 100%;flex-direction: column;}
.clients-container h3 {font-size: 30px;}
.clients-container p.client-intro {font-size: 18px;}
.clients {padding: 40px 10px 50px;background-image: url(../img/bg/reasons.jpg);}
.clients-container div.lgo {flex: 0 1 40%; width:150px; margin: 10px auto;padding: 35px;}
.clients-container h3:last-of-type {margin: 40px 0 5px;font-size: 35px;}
.reason-flx-par {text-align: center;}
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/   
  
  
  
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 
.about-wrap {width: 100%; padding:10px;}
.about-wrap h1 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.about-wrap p.about-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 


  
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 
.workflow-box div {padding: 10px;}
.workflow-box div.wf-a.wf-a, .workflow-box div.wf-b {flex: 0 1 100%; margin:0 0 15px;}
.workflow-box-con {flex-direction: column}
.workflow-box p {text-align: center;}
.workflow-box div.wf-a ul, .workflow-box div.wf-b ul {width: 100%;}
.workflow-box div h4 {font-size: 20px;}
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 


  
/*--MODULES---------------------------------------------------------------------------*/ 
.modules-container {width: 95%; flex-direction: column}
.modules-container h3:last-of-type {margin: 0 0 20px;font-size: 35px;}
.modules-flx-pic {flex: 0 1 100%;padding: 10px;}
/*--BMODULES---------------------------------------------------------------------------*/ 


  
/*--PRICES---------------------------------------------------------------------------*/ 
.prices {padding: 20px 10px 30px;}
.prices-container {width: 100%;flex-direction: column}

.prices-container h3 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.prices-container p.prices-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
.prices-container div.main-prices {flex: 0 1 100%;margin: 10px auto;}
/*--PRICES---------------------------------------------------------------------------*/ 



/*--EXAMPLES---------------------------------------------------------------------------*/ 
.examples {padding:10px;}
.leader-container {width: 100%;flex-direction: column;}
div.leader h3 {font-size: 24px; text-align: center}
span.leader-name {text-align: center;font-size: 20px;letter-spacing:normal;}
div.jp-des {text-align: center}
.examples h3.main-top {font-size: 35px;}
.examples-container {width: 100%;flex-direction: column;}
.examples-container div.exlgo {flex: 1 1 100%;margin: 10px 0; padding: 10px;}
/*--EXAMPLES---------------------------------------------------------------------------*/ 
  
  

/*--VIDS---------------------------------------------------------------------------*/
.vids {padding: 40px 10px 50px;}
.vids-container {width: 100%;}
.vids-container div.vidslgo {flex:0 1 100%}
/*--VIDS---------------------------------------------------------------------------*/ 


  
/*--TEAM YELLOW---------------------------------------------------------------------------*/
.about-wrap h3 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.team-container div {padding: 5px;flex: 0 1 100%;margin: 10px 0;}
.team-container {flex-direction: column}
.team-container div div h2 {height: auto;font-size: 25px;letter-spacing: -2px;margin-bottom: 3px;}
.team-container div div h2 span {font-size: 18px; letter-spacing: normal}
.team-container div div {padding: 10px;margin:0}
/*--TEAM YELLOW---------------------------------------------------------------------------*/ 


  
/*--TEAM BLUE---------------------------------------------------------------------------*/ 
.about-blue-strip {padding: 30px 10px 40px;}
.about-blue-wrap {width: 100%;}
.about-blue-wrap h3 {font-size: 30px; text-align: center;margin: 0;}
.team-blue-container {flex-direction: column;}
.team-blue-container div {padding: 5px;flex: 0 1 100%;margin: 20px 0;}
.team-blue-container div div {margin:0;padding: 5px;}
.team-blue-container div div h2 {letter-spacing: -2px;font-size: 25px;}
.team-blue-container div div h2 span {letter-spacing: normal;font-size: 18px;}
/*--TEAM BLUE---------------------------------------------------------------------------*/ 
  

  
/*--CONTACT---------------------------------------------------------------------------*/ 
.feature-wrapper-bl div.main-wrap {width: 100%; padding:10px}
.feature-wrapper-bl div.main-wrap h1 {font-size: 30px; text-align:center;}
.wrapper-contact {width: 100%;}
/*--CONTACT---------------------------------------------------------------------------*/ 
}



@media only screen and (min-width:533px) and (max-width:767px) {
/*--CONTACT 533------------------------------------------------------------------------------------------------------------------------------*/
.split-form { float: none; width: 100%; padding: 0 5px }
.formwrapper { width: 100% }
.formwrapper div label { float: none; width: 100%; margin: 25px 0 10px; text-align: left!important; display: block;  border-radius: 4px }
.formwrapper input, textarea, select { width: 100%;}
.formwrapper textarea { max-width: 100%; width: 100%; height: 150px;}
.formwrapper input { height: 43px }
.country-chooser-b { padding: 0 }
.formwrapper input.group-1 { width: 100% }
.smaller-form { width: 100% }
.no-split-form { padding: 0 5px }
input.button-main { width: 40% }
/*--CONTACT 533------------------------------------------------------------------------------------------------------------------------------*/

  
  
/*--NAVIGATION 533---------------------------------------------------------------------------*/
.navigation-menu-new ul.top-nav { padding: 0; list-style-type: none; width: 100%; margin: 0; position: absolute; top: 49px; float: none; display: none }
.navigation-menu-new ul.top-nav li { height: 60px; line-height: 60px; background-color: #0a1d3a; width: 100%; margin: 0; float: none }
.navigation-menu-new ul.top-nav li a { display: block; position: relative; padding: 0; font-size: 16px; color: #fff!important; outline: 0; text-decoration: none }
.no-touch ul.top-nav li a:hover { background: rgba(255,248,213,.1) }
.navigation-menu-new ul.top-nav li a:hover { color: #222!important; background-color: #ebb435}
.navigation-menu-new ul.top-nav li:hover { line-height: 60px; height: 60px; border-bottom: none; }
.navigation-new { height: 50px; padding: 0 }
.navigation-menu-new { width: 100%; max-width: 100%; height: 50px }
.top-nav { display: none }  
.logo-float-new { height:50px; width:130px; }
.logo-float-new img {margin-top:6px;margin-left:3px;}
.navigation-enquire-new {  border-radius: 2px; width: 100px; margin-right: 15px; font-size: 15px; background-image: none; height: 30px; margin-top: 10px; line-height: 30px }
  .navigation-enquire-new a:link, .navigation-enquire-new a:visited {width: 100px;height:30px}
#show-hamburger { display: block; margin-left: 10px; margin-right: 10px; margin-top: 10px; }
.sprite-menu-hamburger-new { float: right; }
/*--NAVIGATION 533---------------------------------------------------------------------------*/

  
  
/*--INDEX HEADER---------------------------------------------------------------------------*/  
.bg-none-spacer {height: 50px;}
.background-main {background-image: url(../img/bg/erp.jpg);height: 300px;background-position: center top;margin-top: 50px;}
.white-hero-text-wrapper {width: 100%;}
.white-hero-text-wrapper h1.hfloat {line-height: 39px;top: 10px; text-align:center;left: 0;right:0;margin:0 auto;font-size: 40px;}
.white-hero-text-wrapper h1.hfloat span {display:block;letter-spacing: -2px;}
/*--INDEX HEADER---------------------------------------------------------------------------*/
  


/*--FOOTER---------------------------------------------------------------------------*/ 
.footerstick {width: 100%;padding:10px;}
.footerstick div.middle {flex: 1 1 100%}
.footerstick div.social {flex: 1 1 100%; padding-top: 20px}
.footerstick ul.newfoot {width: 100%;}
.footerstick div.address {flex: 1 1 100%}
/*--FOOTER---------------------------------------------------------------------------*/
  


/*--INDEX HEADER---------------------------------------------------------------------------*/
.bg-none-spacer {height: 50px;}
.background-main {background-image: url(../img/bg/erp-533.jpg);height: 300px;background-position: center top;margin-top: 50px;}
.white-hero-text-wrapper {width: 100%;}
.white-hero-text-wrapper h1.hfloat {line-height: 39px;top: 10px; text-align:center;left: 0;right:0;margin:0 auto;font-size: 40px;}
.white-hero-text-wrapper h1.hfloat span {display:block;letter-spacing: -2px;}
/*--INDEX HEADER---------------------------------------------------------------------------*/
  

  
/*--SUB HEADER---------------------------------------------------------------------------*/  
.background-sub {margin-top: 50px;background-image: url(../img/bg/erp-533.jpg);}
/*--SUB HEADER---------------------------------------------------------------------------*/ 
  
  

/*--YELLOW HOME---------------------------------------------------------------------------*/   
.grid-a-container-wrap {width: 100%;}
.grid-a-container {padding: 10px 10px 50px;}
.grid-a-container-wrap h1 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.grid-a-container-wrap p.intro-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
.grid-a-box {flex: 0 1 100%;margin: 10px 0;padding:5px;}
.contact-us a:link, .contact-us a:visited {width: 100%;}
.grid-a-box div {padding: 10px;}
.grid-a-box a:link, .grid-a-box a:visited, .grid-a-box a:hover {height:auto;font-size: 25px;letter-spacing: -2px;margin-bottom:3px;}
.grid-a-box span {font-size: 18px;}
/*--YELLOW HOME---------------------------------------------------------------------------*/ 
  

  
/*--YELLOW SERVICES---------------------------------------------------------------------------*/  
.services-container {width: 100%;}
.services-container h3 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.services-container p.services-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
.services-container div {margin: 5px;padding: 10px;}
/*--YELLOW SERVICES---------------------------------------------------------------------------*/ 
  
 
  
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/  
.clients-container {width: 100%;flex-direction: column;}
.clients-container h3 {font-size: 30px;}
.clients-container p.client-intro {font-size: 18px;}
.clients {padding: 40px 10px 50px;background-image: url(../img/bg/reasons.jpg);}
.clients-container div.lgo {flex: 0 1 40%; width:150px; margin: 10px auto;padding: 35px;}
.clients-container h3:last-of-type {margin: 40px 0 5px;font-size: 35px;}
.reason-flx-par {text-align: center;}
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/   
  
  
  
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 
.about-wrap {width: 100%; padding:10px;}
.about-wrap h1 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.about-wrap p.about-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 


  
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 
.workflow-box div {padding: 10px;}
.workflow-box div.wf-a.wf-a, .workflow-box div.wf-b {flex: 0 1 100%; margin:0 0 15px;}
.workflow-box-con {flex-direction: column}
.workflow-box p {text-align: center;}
.workflow-box div.wf-a ul, .workflow-box div.wf-b ul {width: 100%;}
.workflow-box div h4 {font-size: 20px;}
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 


  
/*--MODULES---------------------------------------------------------------------------*/ 
.modules-container {width: 95%; flex-direction: column}
.modules-container h3:last-of-type {margin: 0 0 20px;font-size: 35px;}
.modules-flx-pic {flex: 0 1 100%;padding: 10px;}
/*--BMODULES---------------------------------------------------------------------------*/ 


  
/*--PRICES---------------------------------------------------------------------------*/ 
.prices {padding: 20px 10px 30px;}
.prices-container {width: 100%;flex-direction: column}

.prices-container h3 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.prices-container p.prices-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
.prices-container div.main-prices {flex: 0 1 100%;margin: 10px auto;}
/*--PRICES---------------------------------------------------------------------------*/ 



/*--EXAMPLES---------------------------------------------------------------------------*/ 
.examples {padding:10px;}
.leader-container {width: 100%;flex-direction: column;}
div.leader h3 {font-size: 24px; text-align: center}
span.leader-name {text-align: center;font-size: 20px;letter-spacing:normal;}
div.jp-des {text-align: center}
.examples h3.main-top {font-size: 35px;}
.examples-container {width: 100%;flex-direction: column;}
.examples-container div.exlgo {flex: 1 1 100%;margin: 10px 0; padding: 10px;}
/*--EXAMPLES---------------------------------------------------------------------------*/ 
  
  

/*--VIDS---------------------------------------------------------------------------*/
.vids {padding: 40px 10px 50px;}
.vids-container {width: 100%;}
.vids-container div.vidslgo {flex:0 1 100%}
/*--VIDS---------------------------------------------------------------------------*/ 


  
/*--TEAM YELLOW---------------------------------------------------------------------------*/
.about-wrap h3 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.team-container div {padding: 5px;flex: 0 1 100%;margin: 10px 0;}
.team-container {flex-direction: column}
.team-container div div h2 {height: auto;font-size: 25px;letter-spacing: -2px;margin-bottom: 3px;}
.team-container div div h2 span {font-size: 18px; letter-spacing: normal}
.team-container div div {padding: 10px;margin:0}
/*--TEAM YELLOW---------------------------------------------------------------------------*/ 


  
/*--TEAM BLUE---------------------------------------------------------------------------*/ 
.about-blue-strip {padding: 30px 10px 40px;}
.about-blue-wrap {width: 100%;}
.about-blue-wrap h3 {font-size: 30px; text-align: center;margin: 0;}
.team-blue-container {flex-direction: column;}
.team-blue-container div {padding: 5px;flex: 0 1 100%;margin: 20px 0;}
.team-blue-container div div {margin:0;padding: 5px;}
.team-blue-container div div h2 {letter-spacing: -2px;font-size: 25px;}
.team-blue-container div div h2 span {letter-spacing: normal;font-size: 18px;}
/*--TEAM BLUE---------------------------------------------------------------------------*/ 
  

  
/*--CONTACT---------------------------------------------------------------------------*/ 
.feature-wrapper-bl div.main-wrap {width: 100%; padding:10px}
.feature-wrapper-bl div.main-wrap h1 {font-size: 30px; text-align:center;}
.wrapper-contact {width: 100%;}
/*--CONTACT---------------------------------------------------------------------------*/ 
}



@media only screen and (min-width:320px) and (max-width:532px) {
/*--CONTACT 320------------------------------------------------------------------------------------------------------------------------------*/
input.button-main { width: 100% }
.formwrapper { width: 100% }
.formwrapper div label { float: none; width: 100%; margin: 0; text-align: left!important; display: block;  border-radius: 4px 4px 4px 4px }
.formwrapper input, textarea, select { width: 100%;}
.formwrapper textarea { max-width: 100%; width: 100%; height: 150px;}
.formwrapper input { height: 43px }
.inputGroup { margin-right: 0 }
.split-form { float: none; width: 100%; padding: 0 5px; margin-bottom: 10px }
.smaller-form { width: 100% }
.no-split-form { padding: 0 5px }
.formwrapper input.group-1 { width: 100% }    
.country-chooser-b { padding: 0 } 
  
/*--CONTACT 320------------------------------------------------------------------------------------------------------------------------------*/

  
  
/*--NAVIGATION 320---------------------------------------------------------------------------*/
.navigation-menu-new ul.top-nav { padding: 0; list-style-type: none; width: 100%; margin: 0; position: absolute; top: 49px; float: none; display: none }
.navigation-menu-new ul.top-nav li { height: 60px; line-height: 60px; background-color: #0a1d3a; width: 100%; margin: 0; float: none }
.navigation-menu-new ul.top-nav li a { display: block; position: relative; padding: 0; font-size: 16px; color: #fff!important; outline: 0; text-decoration: none }  
.no-touch ul.top-nav li a:hover { background: rgba(255,248,213,.1) }
.navigation-menu-new ul.top-nav li a:hover { color: #222!important; background-color: #ebb435}
.navigation-menu-new ul.top-nav li:hover { line-height: 60px; height: 60px; border-bottom: none; }
.navigation-new { height: 50px; padding: 0 }
.navigation-menu-new { width: 100%; max-width: 100%; height: 50px }
.top-nav { display: none }  
.logo-float-new { height:50px; width:130px; }
.logo-float-new img {margin-top:6px;margin-left:3px;}
.navigation-enquire-new {  border-radius: 2px; width: 100px; margin-right: 15px; font-size: 15px; background-image: none; height: 30px; margin-top: 10px; line-height: 30px }
.navigation-enquire-new a:link, .navigation-enquire-new a:visited {width: 100px;height:30px}
#show-hamburger { display: block; margin-left: 10px; margin-right: 10px; margin-top: 10px; }
.sprite-menu-hamburger-new { float: right; }
/*--NAVIGATION 320---------------------------------------------------------------------------*/

  
  
/*--INDEX HEADER---------------------------------------------------------------------------*/
.bg-none-spacer {height: 50px;}
.background-main {background-image: url(../img/bg/erp-320.jpg);height: 300px;background-position: center top;margin-top: 50px;}
.white-hero-text-wrapper {width: 100%;}
.white-hero-text-wrapper h1.hfloat {line-height: 39px;top: 10px; text-align:center;left: 0;right:0;margin:0 auto;font-size: 40px;}
.white-hero-text-wrapper h1.hfloat span {display:block;letter-spacing: -2px;}
/*--INDEX HEADER---------------------------------------------------------------------------*/
  

  
/*--SUB HEADER---------------------------------------------------------------------------*/  
.background-sub {margin-top: 50px;background-image: url(../img/bg/erp-320.jpg);}
/*--SUB HEADER---------------------------------------------------------------------------*/ 
  
  

/*--FOOTER---------------------------------------------------------------------------*/ 
.footerstick {width: 100%;padding:10px;}
.footerstick div.middle {flex: 1 1 100%}
.footerstick div.social {flex: 1 1 100%; padding-top: 20px}
.footerstick ul.newfoot {width: 100%;}
.footerstick div.address {flex: 1 1 100%}
/*--FOOTER---------------------------------------------------------------------------*/
  
  
  
/*--YELLOW HOME---------------------------------------------------------------------------*/   
.grid-a-container-wrap {width: 100%;}
.grid-a-container {padding: 10px 10px 50px;}
.grid-a-container-wrap h1 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.grid-a-container-wrap p.intro-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
.grid-a-box {flex: 0 1 100%;margin: 10px 0;padding:5px;}
.contact-us a:link, .contact-us a:visited {width: 100%;}
.grid-a-box div {padding: 10px;}
.grid-a-box a:link, .grid-a-box a:visited, .grid-a-box a:hover {height:auto;font-size: 25px;letter-spacing: -2px;margin-bottom:3px;}
.grid-a-box span {font-size: 18px;}
/*--YELLOW HOME---------------------------------------------------------------------------*/ 
  

  
/*--YELLOW SERVICES---------------------------------------------------------------------------*/  
.services-container {width: 100%;}
.services-container h3 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.services-container p.services-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
.services-container div {margin: 5px;padding: 10px;}
/*--YELLOW SERVICES---------------------------------------------------------------------------*/ 
  
 
  
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/  
.clients-container {width: 100%;flex-direction: column;}
.clients-container h3 {font-size: 30px;}
.clients-container p.client-intro {font-size: 18px;}
.clients {padding: 40px 10px 50px;background-image: url(../img/bg/reasons.jpg);}
.clients-container div.lgo {flex: 0 1 40%; width:150px; margin: 10px auto;padding: 35px;}
.clients-container h3:last-of-type {margin: 40px 0 5px;font-size: 35px;}
.reason-flx-par {text-align: center;}
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/   
  
  
  
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 
.about-wrap {width: 100%; padding:10px;}
.about-wrap h1 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.about-wrap p.about-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 


  
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 
.workflow-box div {padding: 10px;}
.workflow-box div.wf-a.wf-a, .workflow-box div.wf-b {flex: 0 1 100%; margin:0 0 15px;}
.workflow-box-con {flex-direction: column}
.workflow-box p {text-align: center;}
.workflow-box div.wf-a ul, .workflow-box div.wf-b ul {width: 100%;}
.workflow-box div h4 {font-size: 20px;}
/*--BLUE CLIENTS HOME---------------------------------------------------------------------------*/ 


  
/*--MODULES---------------------------------------------------------------------------*/ 
.modules-container {width: 95%; flex-direction: column}
.modules-container h3:last-of-type {margin: 0 0 20px;font-size: 35px;}
.modules-flx-pic {flex: 0 1 100%;padding: 10px;}
/*--BMODULES---------------------------------------------------------------------------*/ 


  
/*--PRICES---------------------------------------------------------------------------*/ 
.prices {padding: 20px 10px 30px;}
.prices-container {width: 100%;flex-direction: column}

.prices-container h3 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.prices-container p.prices-intro {font-size: 18px; text-align:center;margin:0 0 10px;}
.prices-container div.main-prices {flex: 0 1 100%;margin: 10px auto;}
/*--PRICES---------------------------------------------------------------------------*/ 



/*--EXAMPLES---------------------------------------------------------------------------*/ 
.examples {padding:10px;}
.leader-container {width: 100%;flex-direction: column;}
div.leader h3 {font-size: 24px; text-align: center}
span.leader-name {text-align: center;font-size: 20px;letter-spacing:normal;}
div.jp-des {text-align: center}
.examples h3.main-top {font-size: 35px;}
.examples-container {width: 100%;flex-direction: column;}
.examples-container div.exlgo {flex: 1 1 100%;margin: 10px 0; padding: 10px;}
/*--EXAMPLES---------------------------------------------------------------------------*/ 
  
  

/*--VIDS---------------------------------------------------------------------------*/
.vids {padding: 40px 10px 50px;}
.vids-container {width: 100%;}
.vids-container div.vidslgo {flex:0 1 100%}
/*--VIDS---------------------------------------------------------------------------*/ 


  
/*--TEAM YELLOW---------------------------------------------------------------------------*/
.about-wrap h3 {font-size: 30px;text-align: center;letter-spacing: -2px;}
.team-container div {padding: 5px;flex: 0 1 100%;margin: 10px 0;}
.team-container {flex-direction: column}
.team-container div div h2 {height: auto;font-size: 25px;letter-spacing: -2px;margin-bottom: 3px;}
.team-container div div h2 span {font-size: 18px; letter-spacing: normal}
.team-container div div {padding: 10px;margin:0}
/*--TEAM YELLOW---------------------------------------------------------------------------*/ 


  
/*--TEAM BLUE---------------------------------------------------------------------------*/ 
.about-blue-strip {padding: 30px 10px 40px;}
.about-blue-wrap {width: 100%;}
.about-blue-wrap h3 {font-size: 30px; text-align: center;margin: 0;}
.team-blue-container {flex-direction: column;}
.team-blue-container div {padding: 5px;flex: 0 1 100%;margin: 20px 0;}
.team-blue-container div div {margin:0;padding: 5px;}
.team-blue-container div div h2 {letter-spacing: -2px;font-size: 25px;}
.team-blue-container div div h2 span {letter-spacing: normal;font-size: 18px;}
/*--TEAM BLUE---------------------------------------------------------------------------*/ 
  

  
/*--CONTACT---------------------------------------------------------------------------*/ 
.feature-wrapper-bl div.main-wrap {width: 100%; padding:10px}
.feature-wrapper-bl div.main-wrap h1 {font-size: 30px; text-align:center;}
.wrapper-contact {width: 100%;}
/*--CONTACT---------------------------------------------------------------------------*/   
}