/* Core Colours */
/* Negative interaction */
/* Positive interaction */
/* Core font colour */
/* Even gallery items */
/* Text */
/* UI */
/* Block Button */
.block-btn {
  background: #FFFFFF;
  padding: 1em;
  display: inline-block;
  text-decoration: none;
  height: 100%;
  width: 100%;
  border: 2px solid #000000;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #333333;
  transition: all 0.2s ease; }

.block-btn:hover {
  background: #000000;
  border: 2px solid #000000;
  color: #FFFFFF; }

.block-btn:active {
  background: #A7C520;
  border: 2px solid #A7C520;
  color: #FFFFFF; }

.even-item {
  background: #f6f6f6 !important; }
  .even-item .block-btn {
    background: #f6f6f6; }
  .even-item .block-btn:hover {
    background: #000000; }
  .even-item .block-btn:active {
    background: #A7C520; }

.nav-item a {
  color: #333333;
  width: 100%;
  display: block;
  font-size: 1.3em;
  padding: .7em;
  border-bottom: 2px solid #FFFFFF; }
  @media (min-width: 600px) {
    .nav-item a {
      transition: all 0.1s linear; } }

.nav-item a:hover {
  color: #000000; }
  @media (min-width: 768px) {
    .nav-item a:hover {
      border-bottom: 2px solid #000000; } }

.nav-item a:active {
  color: #A7C520; }
  @media (min-width: 768px) {
    .nav-item a:active {
      border-bottom: 2px solid #A7C520; } }

.selected-nav-item a {
  color: #A7C520 !important;
  border-bottom: 2px solid #A7C520 !important; }

html {
  font-size: 62.5%;
  font-weight: normal; }

.clearfix:after, .container:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden; }

.clear {
  clear: both;
  line-height: 0; }

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: "open sans", Arial;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a, a:hover, a:active {
  text-decoration: none;
  color: #333333; }

/* Susy Base Setup */
/* Changing Susy default global settings */
/* Makes border-box properties */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/* breakpoints */
/* move to colours */
/* Headings */
.wrap {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5em; }
  .wrap:after {
    content: " ";
    display: block;
    clear: both; }
  @media (max-width: 600px) {
    .wrap {
      padding: 0 3em; } }
  @media (max-width: 480px) {
    .wrap {
      padding: 0 .5em; } }

.fw {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto; }
  .fw:after {
    content: " ";
    display: block;
    clear: both; }

hr {
  border: none;
  height: 1px;
  margin: 1.2em 0;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  /* Set the hr color */
  color: #333;
  /* old IE */
  background-color: #333;
  /* Modern Browsers */ }

/* Tells Susy there's 12 columns in the content */
nav {
  display: block !important;
  padding: 2em 0;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }
  @media (max-width: 768px) {
    nav {
      padding: 2em 0 0; } }
  nav .logo {
    width: 50%;
    float: left;
    text-decoration: none; }
    nav .logo .name-logo {
      font-size: 1.6em;
      font-weight: 600;
      color: #000; }
    nav .logo .tag-logo {
      font-size: 0.8em;
      font-family: times;
      clear: left;
      display: block !important;
      margin: .6em 0 0;
      font-style: italic;
      letter-spacing: 1px;
      color: #999; }
  @media (max-width: 768px) {
    nav ul {
      margin: 4em 0 0; } }
  nav .nav-item {
    /* Telling Susy that there are 3 items, and each takes up 1 row */
    width: 16.66667%;
    float: left;
    /* Another way to tell Susy that this is the last item in the row */ }
    @media screen and (min-width: 768px) {
      nav .nav-item {
        display: block !important; } }
    @media (max-width: 768px) {
      nav .nav-item {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-right: 0;
        display: none; }
        nav .nav-item a {
          border-bottom: 2px solid #FFFFFF;
          padding: 0.7em 0 !important; }
        nav .nav-item :hover {
          color: #A7C520;
          border-bottom: 2px solid #A7C520; } }
  nav li {
    display: inline-block;
    list-style-type: none; }

/* Tells Susy there's 12 columns in the content */
footer {
  margin: 0;
  padding: 0;
  background: #000;
  height: 40px; }
  footer a {
    color: #666; }
    footer a :hover {
      color: #CC2738; }
  footer li {
    line-height: 40px;
    text-align: center;
    /* Telling Susy that there are 3 items, and each takes up 1 row */
    width: 33.33333%;
    float: left;
    /* Another way to tell Susy that this is the last item in the row */ }
    footer li li:last-child {
      float: right;
      margin-right: 0; }

#content-container {
  width: 100%;
  float: left; }
  #content-container:nth-child(1n + 1) {
    margin-left: 0;
    margin-right: -100%;
    clear: none; }

.content-item {
  background: #fff;
  padding: 0;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }
  @media (max-width: 900px) {
    .content-item {
      padding: 0;
      margin-bottom: 1em; } }
  .content-item img {
    width: 25%;
    float: left; }
    @media (max-width: 900px) {
      .content-item img {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-right: 0;
        padding: 0; } }
  .content-item .content-desc {
    color: #333;
    padding: 1.2em;
    height: 100%;
    width: 75%;
    float: left; }
    @media (max-width: 900px) {
      .content-item .content-desc {
        width: 100%;
        float: left;
        margin-left: 0;
        margin-right: 0;
        padding: 1.2em; } }
    .content-item .content-desc p {
      line-height: 1.5;
      margin: .5em 0;
      display: none; }
    .content-item .content-desc h3 {
      font-size: 3em;
      letter-spacing: -0.035em;
      text-transform: uppercase;
      font-weight: bold;
      margin: 0; }
      @media (max-width: 600px) {
        .content-item .content-desc h3 {
          font-size: 2.4em; } }
      @media (max-width: 480px) {
        .content-item .content-desc h3 {
          font-size: 1.8em; } }
  .content-item a {
    width: 45%;
    margin: 1em 0; }
    @media (max-width: 900px) {
      .content-item a {
        width: 100%; } }

/*------------------------
Internal Page
-------------------------*/
.inner-fw-img {
  border: none;
  width: 100%;
  height: 100%;
  background: #f6f6f6; }

.inner-content-desc {
  color: #333;
  padding: 1.2em;
  height: 100%;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }
  @media (max-width: 900px) {
    .inner-content-desc {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0;
      padding: 1.2em; } }
  .inner-content-desc p {
    line-height: 1.5;
    margin: .5em 0; }
  .inner-content-desc a {
    width: 45%;
    margin: 1em 0; }
    @media (max-width: 900px) {
      .inner-content-desc a {
        width: 100%; } }
  .inner-content-desc h3 {
    font-size: 3em;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0; }
    @media (max-width: 600px) {
      .inner-content-desc h3 {
        font-size: 2.4em; } }
    @media (max-width: 480px) {
      .inner-content-desc h3 {
        font-size: 1.8em; } }

/* Menu */
#hamburger {
  display: none;
  max-width: 30px;
  height: 30px;
  margin: 0 0 0 42%;
  padding: 0;
  float: right;
  background: #000000;
  transition: all 0.2s ease; }
  @media (max-width: 768px) {
    #hamburger {
      display: block;
      width: 50%;
      float: left; } }
  @media (max-width: 440px) {
    #hamburger {
      margin: 0 0 0 38%; } }
  @media (max-width: 320px) {
    #hamburger {
      margin: 0 0 0 35%; } }

.line {
  height: 5px;
  width: 100%;
  background: #fff;
  display: block;
  margin-bottom: 5px; }

#hamburger:hover {
  background: #A7C520; }

/* new website code goes here */
body {
  background: #222; }

#logo img {
  width: 50%;
  margin: 5% 25% 0%; }
  @media (max-width: 768px) {
    #logo img {
      width: 80%;
      margin: 5% 10% 0; } }

.link {
  margin: 2% 50%;
  clear: both;
  width: 1px;
  height: 50px;
  background: #333; }

.content {
  width: 80%;
  margin: 0% 10%;
  text-align: center;
  color: #fff; }
  .content p {
    font-size: 1.3em;
    line-height: 1.4em;
    color: #888; }
  .content h2 {
    font-size: 3em;
    margin: 2%;
    color: #FDEC07;
    font-weight: 600;
    text-transform: uppercase; }
  .content a {
    color: #FDEC07; }
  @media (max-width: 768px) {
    .content p {
      font-size: 1em; }
    .content h2 {
      font-size: 1.3em; } }

#company-details {
  clear: both;
  width: 80%;
  margin: 0% 10%;
  text-align: center;
  font-size: 1em;
  color: #fff; }
  #company-details p {
    font-size: .8em; }

.grid-item {
  width: 33.33333%;
  float: left; }
  .grid-item:nth-child(3n + 1) {
    margin-left: 0;
    margin-right: -100%;
    clear: both;
    margin-left: 0; }
  .grid-item:nth-child(3n + 2) {
    margin-left: 33.33333%;
    margin-right: -100%;
    clear: none; }
  .grid-item:nth-child(3n + 3) {
    margin-left: 66.66667%;
    margin-right: -100%;
    clear: none; }
  @media (max-width: 480px) {
    .grid-item {
      width: 50%;
      float: left; }
      .grid-item:nth-child(2n + 1) {
        margin-left: 0;
        margin-right: -100%;
        clear: both;
        margin-left: 0; }
      .grid-item:nth-child(2n + 2) {
        margin-left: 50%;
        margin-right: -100%;
        clear: none; } }

.clients-grid img {
  width: 33%; }
  @media (max-width: 480px) {
    .clients-grid img {
      width: 50%; } }

.white {
  color: #fff; }

/*# sourceMappingURL=main.css.map */