/*
light:  #3377bb
medium: #314664
dark:   #151945
*/

body{
font-family: "Titillium Web";
color: #444; 
background: #f8fff8; 
font-size: 18px;
}
.wide-spacing { letter-spacing: 2px; }
.color-primary { color: #3D937A; }
.color-secondary { color: #81A051; }

a, a:visited, a:active { color: #3377bb; }
a:hover { text-decoration: none; }

ul { 
  padding-left: 0; 
  list-style-position: inside;
  list-style-type: square;
}

/* ----- Header ----- */

header {  background: #fff; }
header .container { padding-top: 20px; padding-bottom: 15px; }

header .logo { text-align: center; }
header .logo img { width: 200px; display: inline-block; margin-bottom: 5px; }
header .logo p { font-variant: small-caps; font-size: 24px; color: #000; }
header .logo p span { color: #151945; }

header .contact { text-align: center; }
header .contact p { font-size: 150%; margin-bottom: 0; }
header .contact p .fa { color: #151945; }
header .contact a { color: #314664; }
header .contact ul { margin-top: 10px; padding: 0; list-style-type: none; color: #314664; font-size: 16px; }
header .contact ul .fa { color: #3377bb; }
header .contact ul li { margin: 5px 0; display: none; }
header .contact ul li:first-of-type { display: block; }


header .contact ul li .icon-left { 
  display: none;;
}

header .contact ul li .icon-right { 
  display: none;
}



/* -- responsive -- */
@media screen and (max-width: 512px) {

  header .logo {
    width: 100%;
  }
  
  header .contact {
    width: 100%;
    margin-top: 5px;
  }

  header .contact ul li .icon-left { 
    display: inline-block;
  }
}


@media screen and (min-width: 768px) {
  
  header .logo { 
    text-align: left; 
  }

  header .contact { 
    margin-top: 0;
    text-align: right; 
  }

  header .contact p { 
    font-size: 180%; 
  }
  header .contact ul { 
    display: block;
    margin-top: 0;
    font-size: 17px;
  }

  header .contact ul li .icon-left { 
    display: none;
  }

  header .contact ul li .icon-right { 
    display: inline-block;
  }
  
  header .contact ul li { 
    display: block; 
  }
}


/* ----- Navigation ----- */

a.nav-toggle { display: block; position: fixed; z-index: 100; top: 10px; left: 10px; background: #fff; color: #3377bb; border: 1px solid #3377bb; border-radius: 3px; padding: 1px 5px 0; cursor: pointer; }
a:hover.nav-toggle, a:active.nav-toggle { background: #3377bb; color: #fff; }
.nav-items { height: auto; zoverflow: hidden; zmax-height: 0; transition: max-height 0.4s; transition: left 0.4s; }
.nav-items.show-nav { }

nav a, nav a:visited, nav a:active { color: #444; }
nav ul { 
  list-style-type: none; 
  /*
  padding: 40px 0 0; 
  */
  padding: 0; 
  margin: 0; 
  text-align: center; 
  font-size: 18px; 
  position: fixed; 
  /*
  top: 0; 
  left: -200px; 
  */
  background: #fff; 
  box-shadow: 0 0 3px #000; 
  z-index: 99; 
  
  top: -100%;
  width: 100%;
}
nav ul li { position: relative; display: block; padding: 10px 20px; margin: 0; }
nav ul li a { color: #666; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 300; }
nav ul li a:hover { color: #000; }

.nav-items ul { opacity: 0; transition: top 0.4s, opacity 0.4s; }
.nav-items.show-nav ul { top: 0px; opacity: 1; transition: top 0.4s, opacity 0.4s; }

/* hide subnav items */
li.has-subnav ul { 
  display: none; 
}
/* show subnav items */
li.has-subnav.show-subnav ul { 
  display: block; 
  position: relative;
  top: 0;
  left: 0;
  box-shadow: none;
  padding: 0;
  background: #fff;
  z-index: 1;
}

li.has-subnav:hover ul li,
li.has-subnav.show-subnav ul li { 
  display: block;
  font-size: 17px;
  padding: 0 20px;
  margin: 10px 0;
}


/* -- responsive -- */
@media screen and (min-width: 768px) {

  nav a, nav a:visited, nav a:active { color: #fff; }

  li.has-subnav:hover ul,
  li.has-subnav.show-subnav ul { 
    display: block; 
    position: absolute;
    top: 35px;
    left: 0px;
    
    background: #151945;
    z-index: 1;
    
    width: auto;
  }

  li.has-subnav:hover ul li,
  li.has-subnav.show-subnav ul li { 
    display: block;
    width: 400px;
    font-size: 16px;
  }
  
  a.nav-toggle { display: none; } 
  .nav-items { display: block; }
  .nav-items ul { opacity: 1; }

  nav ul { list-style-type: none; padding: 0; margin: 0; text-align: center; font-size: 18px; position: relative; left: 0; background: #314664; box-shadow: none; }
  nav ul li { display: inline-block; padding: 5px 20px; margin: 0; }
  nav ul li a { color: #fff; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 300; }
  nav ul li a:hover { color: #fff; }
  
  nav ul li a:hover .fa,
  nav ul li.has-subnav ul li a:hover
    { color: #99bbdd; }
  
  .nav-items ul { transition: none; }
  .nav-items.show-nav ul { transition: none; }

  
  .contact-bar { text-align: right; }
  nav ul { text-align: center; }  
}



/* ----- Main ----- */

main { 
  background: #eef;
  clear: both; 
  border-top: 5px solid #314664;
  padding-bottom: 20px;
}

/* -- responsive -- */
@media screen and (min-width: 768px) {

  main { 
    background: #eef;
    clear: both; 
    border-top: 0;
  }
}

/*

.contact-bar {
  padding: 4px 3px;
  text-align: center; 
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
}
.contact-bar .container { padding: 0; }
.contact-bar a { color: #dfd; padding: 0 10px; }
.contact-bar a:hover { color: #fff; }

.sectors { margin: 40px 0; text-align: center; }
.sectors .fa { font-size: 72px; }
.sectors .fa.sector-health { color: #c66; }
.sectors .fa.sector-education { color: #66c; }
.sectors .fa.sector-change { color: #6c6; }

.industries.row div.industry-image { 
    height:200px;
    text-align:center;
    
    
        position: relative;
    overflow: hidden;
    border-radius: 20px; 
    padding: 20px;
    background: #020;
    }
.industries.row div.industry-image img  {
  height: 300px;
      position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    opacity: 0.6;
}
.industries.row div.industry-text {
  position: absolute; 
  top: 10px; 
  left: 30px; 
  bottom: 0;
  right: 20px;
  
  
}
.industries.row div.industry-text h2 {
  color: #fff; 
  text-shadow: #000 0 0 2px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px; 
  font-weight: 300;
}
.industries.row div.industry-text p {
  color: #fff; 
  text-shadow: #000 0 0 2px;
  width: 70%;
  margin-top: 20px; 
  position: absolute; bottom: 0; 
  right: 10px; text-align: right;
}

h3 { color: #444; letter-spacing: 1px; font-weight: 300; margin-top: 14px;}
hr { border-color: #3D937A; width: 50px; margin: 40px auto; }
p.heading { font-size: 100%; text-transform: uppercase; letter-spacing: 1px; color: #3D937A; }

.contact-short { display: inline; }
.contact-long { display: none; }

.headshot-image { 
    height:100px;
    width: 100px; 
    border-radius: 50%; 
    
    text-align:center;
    position: relative;
    overflow: hidden; 
    padding: 20px;
    margin: 0 0 10px 10px;
    float: right;
}
.headshot-image img  {
    width: 100px;
      position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

blockquote, blockquote + cite { background: #e0f8e0; border-left: 5px solid #3D937A; }
blockquote {}
blockquote + cite { display: block; text-align: right; font-style: normal; text-transform: uppercase; letter-spacing: 1px; margin-top: -20px; padding-right: 20px; background: #e0f8e0; padding-bottom: 10px; }

.banner { 
  margin: 0; 
  width: 100%; 
  background: url(education.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  
  color: #fff; 
}
.banner .darken {
  background: rgba(0,0,0,0.6);
}

.banner-top {
  text-align: center; 
}
.banner-top .darken { padding: 60px 20px; }
.banner-top h1 { 
  margin: 0 0 10px 0; 
  text-shadow: #000 0px 0px 2px; 
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.banner-top p { 
  margin: 10px 0;
  padding: 0;
  font-size: 14px;
  text-shadow: #000 0px 0px 2px; 
}
.banner-top a { color: #dfd; }
.banner-top a button.btn {
  background: #314664;
  box-shadow: 0 0 2px #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  
}
.banner-top a:hover button.btn {
  background: #3D937A;
  color: #fff;
}
*/

/* ----- Boxes ----- */

.box { padding: 20px 20px 5px; margin-bottom: 40px; }
.box-primary  {  background: #fff; }

.banner-section { background-attachment: scroll; background-image: url(health.jpg); }
.banner-section .box p.heading { color: #dfd; }
.banner-section .box h3 { margin: 10px 0; color: #fff; }
.banner-section .box p { color: #dfd; }


/* ----- Footer ----- */

footer { 
  padding: 40px 0 30px; 
  font-size: 16px;
  background: #314664;
  color: #fff;
}
footer h1 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
}
footer ul {
  margin: 0; padding: 0; list-style-type: none;
}
footer ul li { 
  margin-left: 0;
  margin-bottom: 5px;
}
footer ul li .fa { color: #99bbdd; }
footer ul li a { color: #fff; }
footer ul li a:hover { color: #99bbdd; }

footer .footer-left, 
footer .footer-right {
  text-align: center;
}

footer .footer-right ul li .icon-left { 
  display: inline-block;
}

footer .footer-right ul li .icon-right { 
  display: none;
}

/* -- responsive -- */
@media screen and (min-width: 768px) {
  
  footer .footer-left {
    text-align: left;
  }
  
  footer .footer-right {
    text-align: right;
  }
  
  footer .footer-right ul li .icon-left { 
    display: none;
  }

  footer .footer-right ul li .icon-right {
    display: inline-block;
  }

}


/* ----- Carousel ----- */

.qcs-banner {
  position: relative;
  z-index: 0;
  width: 100%; 
  height: 40vw;
  max-height: 400px;
  border-top: 5px solid #314664;
  border-bottom: none;
}

.qcs-banner > div {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  background-color: #fff;
  background-position:top left;
  background-size: cover;
  -webkit-transition:background-position 5s ease-in-out;  
  -moz-transition:background-position 5s ease-in-out;  
  -o-transition:background-position 5s ease-in-out;  
  transition:background-position 5s ease-in-out;
  display: none;
}

.qcs-banner > div.cycle-slide-active {
  background-position:bottom right;
}

.qcs-banner > div:first-of-type {
  display: block;
}

.qcs-banner > div > p {
  position: absolute; 
  top: 45%; 
  width: 100%; 
  text-align: center; 
  color: #fff; 
  font-weight: bold; 
  font-size: 24px;
  
  -webkit-transition:opacity 1s ease-in-out;  
  -moz-transition:opacity 1s ease-in-out;  
  -o-transition:opacity 1s ease-in-out;  
  transition:opacity 2s ease-in-out;
  opacity: 0;
}

.qcs-banner > div.cycle-slide-active > p {
  opacity: 1;
}

/* -- responsive -- */
@media screen and (min-width: 768px) {
  
  .qcs-banner {
    border-top: none;
    border-bottom: 5px solid #314664;
  }
}

/*
@media screen and (min-width: 768px) {

  
  .contact-short { display: none; }
  .contact-long { display: inline; }

  .banner .darken {
    background: rgba(0,0,0,0.4);
  }

  .banner-top h1 { 
    margin: 0 0 20px 0; 
    text-shadow: #000 0px 0px 2px; 
    font-size: 48px;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  .banner-top p { 
    margin: 20px 0;
    padding: 0;
    font-size: 20px;
    text-shadow: #000 0px 0px 2px; 
  }

}

*/


/* ----- Home Page ----- */

.home-intro {
  padding: 20px 20px 40px;
}

.home-intro h1 {
  color: #314664;
}


/* ----- Engine Page ----- */

.engine { 

}

.engine-image {
  margin-bottom: 40px;
}

.engine-image img {
  display: block;
  max-width: 100%; 
  border-radius: 10px;
}

.engine h1 {
  color: #314664;
  text-align: center;
  margin-bottom: 30px;
  padding: 0 20px;
  
  background: #fff;
  padding: 10px;
  margin: 20px 15px;
  border-radius: 10px;
}

.engine-description {
  
}

.engine-description section {
  margin-bottom: 30px;
}

.engine-description section .fa {
  margin-right: 5px; 
}

.engine-description section a strong {
  color: #333;
    font-weight: normal;
}

.engine-description section a:hover strong {
  color: #000;
}

.engine-description section h1 {
  text-align: left;
  margin: 0 0 10px 0;
  text-align: left;
  font-size: 120%;
  font-weight: bold;
  color: #000;
  background: #fff;
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
}

.engine-description ul {
  padding-left: 40px;
}

.engine-videos {
  margin-bottom: 40px;
}

.engine-videos img{
  width: 100%;
}
.engine p.price {
  background: #b1ffb1;
  text-align: center;
  border-radius: 5px;
  display: block;
}
.engine .price span {
  
}
.engine .price span.price,.engine .price span.gbp 
{
  font-size: 180%;
}
.engine .price span.gbp { 
  color: #666;
}
.engine .price span.price {
  font-weight: bold;
  margin-right: 20px;
  color: #3a6;
}.engine .price span.in-stock {
  margin-right: 20px;
}

/* -- responsive -- */
@media screen and (min-width: 768px) {
  

  .engine {
    
  }

  .engine h1 {
  }
}


/* ----- Contact ----- */

.contact h1 {
  color: #314664;
  text-align: center;
  margin-bottom: 30px;
  padding: 0 20px;
}

.contact-map {
  margin-bottom: 40px;
}

.contact-info {
  margin-bottom: 40px;
}

.contact-info h2,
.contact-info address 
{
  text-align: center;
}

.contact-info textarea 
{
  resize: vertical;
}
 
.contact-info button 
{
  display: block; 
  margin: 0 0 40px auto;
}
 
/* -- responsive -- */
@media screen and (min-width: 768px) {
  
  .contact h1 {
    margin: 20px 0;
  }
}

/* ----- Testimonial block ----- */

.testimonials {
  background: url(/img/brickwall_2X.png); 
  padding: 40px; 
  border: 5px solid #314664;    
  border-radius: 10px;
  font-family: 'Nothing You Could Do'; 
  font-size: 6vw; 
  text-align: center; 
  color: #000; 
}

/* ----- Green Engine banner ----- */

.brick-banner {
  background: url(/img/brickwall_2X.png); 
  padding: 40px 0; 
  border-top: 5px solid #314664;  
}


.green-engine-banner {
  text-align: center;
}

.green-engine-banner .green-engine-icon {
  background: #fff; 
  display: inline-block; 
  border-radius: 10px; 
  padding: 10px 10px 5px; 
  font-size: 250%;
}

.green-engine-banner .green-engine-icon .fa-recycle {
  color: #090; 
  text-shadow: #000 1px 1px 0px;
}

.green-engine-banner .green-engine-icon .fa-cog {
  color: #ccc; 
  opacity: 0.95; 
  font-size: 150%; 
  text-shadow: #000 0px 0px 2px;
}

.green-engine-banner .green-engine-slogan {
  font-family: 'Nothing You Could Do'; 
  font-size: 6vw; 
  text-align: center; 
  color: #000; 
  padding-top: 30px;
}

/* -- responsive -- */
@media screen and (min-width: 512px) {

  .green-engine-banner .green-engine-icon {
    border-radius: 10px; 
    padding: 15px 15px 6px; 
    font-size: 375%;
  }  
}

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

  .green-engine-banner .green-engine-slogan {
    padding-top: 60px;
    font-size: 32px; 
  }
}

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

  .green-engine-banner .green-engine-icon {
    border-radius: 10px; 
    padding: 20px 20px 10px; 
    font-size: 500%;
  }
  
  .green-engine-banner .green-engine-slogan {
    padding-top: 60px;
    font-size: 48px; 
  }
}

/* ----- Form ----- */
.form-success {
  padding: 10px; border: 1px solid #090; border-radius: 5px; color: #090; background: #cfc; display: none;
  text-align: center;
}

.form-error {
  padding: 10px; border: 1px solid #900; border-radius: 5px; color: #900; background: #fcc; display: none;
  text-align: center;
}

.form-success h2, .form-error h2 {
  font-size: 150%;
  margin-top: 0;
}


/* ----- Remanufacturing Process modal ----- */

#remanufacturing-process ol { counter-reset: item; }
#remanufacturing-process ol > li { display: block; }
#remanufacturing-process ol > li:before {
  content: counter(item) ". ";
  counter-increment: item;
  color: #888;
  width: 30px;
  display: inline-block;
  text-align: right;
  margin-right: 10px;
}

#remanufacturing-process ul { padding: 5px 0 5px 40px; }

.modal-header, 
.modal-footer 
{
  background: #314664;
  color: #fff;
}

#remanufacturing-process button.close {
  opacity: 1;
  color: #fff;
  text-shadow: none;
}

/* ----- Misc styles ----- */

.text-stroke {
 text-shadow:
  /*
  #000  0px -1px 1px,
  #000 -1px  0px 1px,
  #000  0px  0px 1px,
  #000  1px  0px 1px,
  #000  0px  1px 1px,
  */
  #000  0px  0px 3px
}


/* -- tiny br -- */

@media screen and (max-width: 512px) {
  .tiny-br { display: block; }
  .tiny-hide { display: none; }
}

/* ----- Gradients ----- */

.background-gradient {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#314664+0,3377bb+100 */
  background: #314664; /* Old browsers */
  background: -moz-linear-gradient(top,  #314664 0%, #3377bb 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #314664 0%,#3377bb 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #314664 0%,#3377bb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#314664', endColorstr='#3377bb',GradientType=0 ); /* IE6-9 */
  
  color: #fff;
}

.readability-gradient { 
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+15,000000+90,000000+100&0+0,0.6+15,0.6+90,0+100 */
  background: -moz-linear-gradient(top,  rgba(61,147,122,0) 0%, rgba(61,147,122,0.6) 15%, rgba(61,147,122,0.6) 90%, rgba(61,147,122,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(61,147,122,0) 0%,rgba(61,147,122,0.6) 15%,rgba(61,147,122,0.6) 90%,rgba(61,147,122,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(61,147,122,0) 0%,rgba(61,147,122,0.6) 15%,rgba(61,147,122,0.6) 90%,rgba(61,147,122,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}