@import url("https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif|Montserrat");
html, body {
  height: 100%; }

body {
  margin: 0;
  padding: 0;
  background-color: #cccccc;
  font-size: 100%;
  min-height: 750px; }

* {
  font-family: "Montserrat", sans-serif; }

h1 {
  font-family: "Droid Sans", sans-serif; }

.header, .logo, .menu, .slider, .content, .footer {
  float: left;
  width: 100%; }

.slider, .content, .footer, .latest-news {
  z-index: 1;
  position: relative;
  top: 5em;
  float: left; }
  @media screen and (max-width: 700px) {
    .slider, .content, .footer, .latest-news {
      top: 4.5em; } }
  @media screen and (max-height: 850px) {
    .slider, .content, .footer, .latest-news {
      top: 4em; } }

.menu, .logo {
  position: relative; }

.header {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #0076a3; }
  .header .logo h1 {
    font-size: 2em;
    margin-top: 0;
    color: #eff9f0;
    text-align: center;
    text-shadow: 1px 0 0 #1d2731, 2px 1px 0 #1d2731, 3px 2px #1d2731;
    margin-top: 0.5em; }
    .header .logo h1 a {
      color: #eff9f0;
      text-decoration: none; }
      .header .logo h1 a:hover {
        color: #eff9f0;
        text-decoration: none; }
  .header .icon {
    display: none; }
  .header .menu ul.topnav {
    text-align: center;
    margin-top: 0; }
    .header .menu ul.topnav li {
      display: inline; }
      .header .menu ul.topnav li a {
        font-size: 1em;
        color: #eff9f0;
        padding: 0 1.5em;
        text-decoration: none; }
        .header .menu ul.topnav li a:hover {
          text-decoration: underline;
          color: #fff; }
  @media screen and (max-height: 850px), screen and (max-width: 700px) {
    .header .logo h1 {
      font-size: 1.5em;
      margin-top: 0; } }
  @media screen and (max-width: 400px) {
    .header .logo h1 {
      font-size: 1.25em;
      margin-top: 0;
      padding-top: 0.25em; } }
  @media screen and (max-width: 1380px) {
    .header .menu ul.topnav {
      text-align: center;
      margin-top: 0; }
      .header .menu ul.topnav li {
        display: inline; }
        .header .menu ul.topnav li a {
          font-size: 0.8em;
          color: #eff9f0;
          padding: 0 1.5em;
          text-decoration: none; }
          .header .menu ul.topnav li a:hover {
            text-decoration: underline;
            color: #fff; } }
  @media screen and (max-width: 1150px) {
    .header .logo h1 {
      padding-top: 0.5em; }
    .header .logo a {
      color: #fff;
      text-decoration: none; }
    .header .logo .icon {
      display: inline;
      position: absolute;
      right: 1.5em;
      top: 1em; }
    .header .menu ul.topnav li {
      display: none; }
    .header .menu ul.topnav .icon {
      float: right;
      display: inline-block; }
    .header .menu ul.topnav.responsive {
      margin: 0;
      padding: 0;
      position: relative; }
      .header .menu ul.topnav.responsive li {
        float: none;
        display: inline; }
        .header .menu ul.topnav.responsive li a {
          font-size: 0.8em;
          padding-top: 0.5em;
          padding-bottom: 0.5em;
          display: block;
          text-align: center;
          left: 0; }
          .header .menu ul.topnav.responsive li a:hover {
            background-color: #eff9f0;
            color: #0076a3;
            text-decoration: none !important; } }

#home-slider {
  background: url(/assets/img/home-slider-5.png) center center no-repeat; }
  @media screen and (max-width: 700px) {
    #home-slider {
      background: url(/assets/img/home-slider-small.png) center center no-repeat; } }

#service-slider {
  background: url(/assets/img/container-slider.png) center left no-repeat; }
  @media screen and (max-width: 700px) {
    #service-slider {
      background: url(/assets/img/container-slider-small.png) center left no-repeat; } }

#workshop-slider {
  background: url(/assets/img/workshop-slider.png) center center no-repeat; }
  @media screen and (max-width: 700px) {
    #workshop-slider {
      background: url(/assets/img/workshop-slider-small.png) center center no-repeat; } }

#supply-slider {
  background: url(/assets/img/supply-slider.png) right center no-repeat; }
  @media screen and (max-width: 700px) {
    #supply-slider {
      background: url(/assets/img/supply-slider-small.png) right center no-repeat; } }

#diagnostics-slider {
  background: url(/assets/img/diagnostics-slider.png) left center no-repeat; }
  @media screen and (max-width: 700px) {
    #diagnostics-slider {
      background: url(/assets/img/diagnostics-slider-small.png) left center no-repeat; } }

#engineering-slider {
  background: url(/assets/img/home-slider.jpg) center center no-repeat; }
  @media screen and (max-width: 700px) {
    #engineering-slider {
      background: url(/assets/img/home-slider-small.png) center center no-repeat; } }

#accreditations-slider {
  background: url(/assets/img/home-slider.jpg) center center no-repeat; }
  @media screen and (max-width: 700px) {
    #accreditations-slider {
      background: url(/assets/img/home-slider-small.png) center center no-repeat; } }

.slider {
  height: 35.185%;
  width: 100%;
  background-color: #363636; }
  .slider h1, .slider h3 {
    color: #eff9f0;
    text-align: center;
    text-shadow: 1px 0 0 #1d2731, 2px 1px 0 #1d2731, 3px 2px #1d2731; }
  .slider h1 {
    margin-top: 0.5em;
    font-size: 8em;
    margin-bottom: 0; }
  .slider h3 {
    font-size: 3.3em;
    margin-top: 0; }
  @media screen and (max-width: 1400px), screen and (max-height: 850px) {
    .slider {
      height: 28.148%; }
      .slider h1 {
        font-size: 6em; }
      .slider h3 {
        font-size: 2.475em; } }
  @media screen and (max-width: 800px) {
    .slider {
      height: 22.87025%; }
      .slider h1 {
        font-size: 4em; }
      .slider h3 {
        font-size: 1.65em; } }
  @media screen and (max-width: 700px) {
    .slider {
      height: 17.5925%; }
      .slider h1 {
        font-size: 3em; }
      .slider h3 {
        font-size: 1.2375em; } }

.content {
  width: 80%;
  margin-left: 10%;
  background: #eff9f0; }
  .content p {
    font-size: 1em;
    color: #1d2731;
    margin-left: 2em; }
  .content h1 {
    margin-left: 1em; }
  .content ul li {
    display: block; }
    .content ul li a img {
      width: 2em;
      height: 2em; }
  .content #services {
    background: url(/assets/img/site-services-btn.png) center center no-repeat; }
  .content #repair {
    background: url(/assets/img/workshop-repart-btn.png) center center no-repeat; }
  .content #supply {
    background: url(/assets/img/new-supply-btn.png) center center no-repeat; }
  .content #diagnostics {
    background: url(/assets/img/diagnostics-btn.png) center center no-repeat; }
  .content #engineering {
    background: url(/assets/img/engineering-btn.png) center center no-repeat; }
  .content #accreditations {
    background: url(/assets/img/accreditations-btn.png) center center no-repeat; }
  .content .cntntrow {
    float: left;
    position: relative;
    width: 40%; /*30%*/
    height: 10em;
    margin-left: 2.5%;
	margin-bottom: 2.5%; /*added*/
    background-color: #0076a3; }
    .content .cntntrow h3 {
      color: #fff;
      margin-top: 3.5em;
      text-align: center;
      text-shadow: 1px 0 0 #1d2731, 2px 1px 0 #1d2731, 3px 2px #1d2731; }
      .content .cntntrow h3 a {
        color: #fff;
        text-decoration: none; }
        .content .cntntrow h3 a:hover {
          text-decoration: underline; }
  /*.content .cntntrow:nth-child(n + 4) {
    margin-top: 2.25%; }*/
  .content form {
    width: 80%;
    margin: 0 10%;
    color: #eff9f0; }
    .content form input, .content form textarea, .content form button, .content form select {
      width: 100%;
      margin-bottom: 0.625em;
      padding: 0.625em;
      border-radius: 0.1875em;
      border: 0; }
    .content form button {
      margin-left: 0.5em;
      background-color: #0076a3;
      color: white;
      cursor: pointer;
      border-bottom: 6px solid #003246; }
      .content form button:hover {
        margin-top: 3px;
        border-bottom: 3px solid #003246; }
  @media screen and (max-width: 1450px) {
    .content {
      width: 90%;
      margin-left: 5%; } }
  @media screen and (max-width: 1000px) {
    .content {
      width: 95%;
      margin-left: 2.5%; }
      .content .cntntrow {
        width: 45%;
        margin-top: 1em; }
      .content .cntntrow:nth-child(n + 4) {
        margin-top: 1em; }
      .content .cntntrow:nth-child(-n+2) {
        margin-top: 0; } }
  @media screen and (max-width: 800px) {
    .content {
      width: 100%;
      margin-left: 0; }
      .content form {
        width: 90%;
        margin: 0 5%; } }
  @media screen and (max-width: 700px) {
    .content .cntntrow {
      width: 95%; }
    .content .cntntrow:nth-child(n+2) {
      margin-top: 1em; }
    .content p {
      margin-left: 0.5em; } }

.latest-news {
  width: 80%;
  background-color: #eff9f0;
  margin: 0 10%;
  padding-bottom: 0.5em; }
  .latest-news h3 {
    padding-top: 0.5em;
    margin: 0.5em 1.5em; }
  @media screen and (max-width: 1450px) {
    .latest-news {
      width: 90%;
      margin-left: 5%; } }
  @media screen and (max-width: 1000px) {
    .latest-news {
      width: 95%;
      margin-left: 2.5%; } }
  @media screen and (max-width: 800px) {
    .latest-news {
      width: 100%;
      margin-left: 0; } }
  .latest-news .news-post {
    position: relative;
    float: left;
    width: 30%;
    margin-left: 2.5%;
    margin-bottom: 0.5em; }
    @media screen and (max-width: 700px) {
      .latest-news .news-post {
        width: 90%; } }
    .latest-news .news-post a:nth-child(n) {
      padding: 0.625em;
      border-left: 1px solid #CCC !important; }
    .latest-news .news-post a.post {
      display: block;
      text-decoration: none;
      padding: 0 0 0 0.625em;
      font-size: 1em;
      position: relative;
      float: left;
      width: 100%;
      text-align: left;
      color: #0076a3; }
    .latest-news .news-post a.post:visited {
      color: #0076a3; }
    .latest-news .news-post a.post:hover {
      color: #003246; }

.footer {
  background-color: #363636;
  width: 100%; }
  .footer p {
    font-size: 1em;
    text-align: center;
    color: #eff9f0; }
    .footer p a {
      font-size: 1em;
      text-align: center;
      color: #eff9f0; }
  .footer h3 {
    color: #eff9f0; }
  .footer .ftleft, .footer .ftright {
    float: left;
    position: relative;
    margin-left: 10%;
    width: 40%; }
    .footer .ftleft form, .footer .ftright form {
      width: 80%;
      margin-left: 5%;
      color: #eff9f0; }
      .footer .ftleft form input, .footer .ftright form input, .footer .ftleft form textarea, .footer .ftright form textarea, .footer .ftleft form button, .footer .ftright form button, .footer .ftleft form select, .footer .ftright form select {
        width: 100%;
        margin-bottom: 0.625em;
        padding: 0.625em;
        border-radius: 0.1875em;
        border: 0; }
      .footer .ftleft form button, .footer .ftright form button {
        margin-left: 0.5em;
        background-color: #0076a3;
        color: white;
        cursor: pointer;
        border-bottom: 6px solid #003246; }
        .footer .ftleft form button:hover, .footer .ftright form button:hover {
          margin-top: 3px;
          border-bottom: 3px solid #003246; }
  .footer .ftright p {
    text-align: left; }
  @media screen and (max-width: 700px) {
    .footer .ftleft, .footer .ftright, .footer .ftright {
      width: 100%;
      margin-left: auto; }
      .footer .ftleft form, .footer .ftright form, .footer .ftright form {
        width: 95%;
        margin-left: 1%; } }
  .footer .copy {
    width: 100%;
    position: relative;
    float: left; }