/*************************************************

    PLEASE do not make changes directly to the
    mike-speight.css file, as we are using LESS
    as a CSS precompiler and mike-speight.css will
    be overwritten the nex time LESS compiles.

    Pleas make any edits in the corresponding
    .less file, if you do not understand the
    LESS syntax do not worry as LESS understands
    plain CSS

**************************************************/
/* Mixins */
/*************************************************
    
    =Reset Styles Begin
    
**************************************************/
html {
  margin: 0;
  padding: 0;
  border: 0; }

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1.5;
  background: white; }

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  float: none !important; }

table, th, td {
  vertical-align: middle; }

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

blockquote, q {
  quotes: "" ""; }

a img {
  border: none; }

:focus {
  outline: 0; }

img.full {
  max-width: 100%; }

ol, ul {
  list-style: none; }

/*************************************************
    
    =Grid Styles Begin
    
**************************************************/
.row {
  overflow: hidden;
  *overflow: visible;
  *zoom: 1; }

.col {
  float: left; }

.colRight {
  float: right; }

.size1of1 {
  float: none; }

.size1of2 {
  width: 50%; }

.size1of3 {
  width: 33.33333%; }

.size2of3 {
  width: 66.66666%; }

.size1of4 {
  width: 25%; }

.size3of4 {
  width: 75%; }

.size1of5 {
  width: 20%; }

.size2of5 {
  width: 40%; }

.size3of5 {
  width: 60%; }

.size4of5 {
  width: 80%; }

.lastCol {
  float: none;
  width: auto;
  _position: relative;
  _left: -3px;
  _margin-right: -3px; }

/*************************************************
    
    =Colour Pallette Styles Begin
    
**************************************************/
/* brand colors */
.dk-orange {
  color: #ffc42e; }

.lt-orange {
  color: #ffd956; }

/* background colors */
.dk-orange-bg {
  color: #ffc42f; }

.lt-orange-bg {
  color: #ffd956; }

.dk-bg {
  color: #333333; }

.black {
  color: #000000; }

.white {
  color: #ffffff; }

/* text colours */
.dk-orange-txt {
  color: #b78a09; }

.blk-txt {
  color: #000000; }

.dk-txt {
  color: #333333; }

.mid-txt {
  color: #666666; }

.lt-txt {
  color: #999999; }

.wht-txt {
  color: #ffffff; }

/* Grays */
.lt-gray {
  color: #c6c6c6; }

.mid-gray {
  color: #747474; }

.dk-gray {
  color: #4b4b4b; }

.heavy-gray {
  color: #414141; }

/*************************************************
    
    =Typography Styles Begin
    
**************************************************/
@font-face {
  font-family: 'OpenSans-Light';
  src: url("../assets/fonts/OpenSans-Light.eot");
  src: url("../assets/fonts/OpenSans-Light.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/OpenSans-Light.woff") format("woff"), url("../assets/fonts/OpenSans-Light.ttf") format("truetype"), url("../assets/fonts/OpenSans-Light.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'FontAwesome';
  src: url("../assets/fonts/fontawesome-webfont.eot?v=3.2.1");
  src: url("../assets/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"), url("../assets/fonts/fontawesome-webfont.woff?v=3.2.1") format("woff"), url("../assets/fonts/fontawesome-webfont.ttf?v=3.2.1") format("truetype"), url("../assets/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
  font-weight: normal;
  font-style: normal; }

/*  Font Icon styles */
.inner a i {
  color: #ffffff;
  font-family: fontawesome;
  font-size: 18px;
  line-height: 24px;
  font-style: normal; }

.inner a:hover i {
  color: #ffc42e;
  font-size: 24px; }

i.icon-social {
  font-family: fontawesome;
  font-size: 24px;
  font-style: normal; }

#menu-switch i {
  font-family: fontawesome;
  font-size: 36px;
  font-style: normal; }

.icon-remove-sign:before {
  content: "\f057"; }

.icon-twitter-sign:before {
  content: "\f081"; }

.icon-twitter:before {
  content: "\f099"; }

.icon-facebook-sign:before {
  content: "\f082"; }

.icon-facebook:before {
  content: "\f09a"; }

/*.icon-instagram-sign:before {
  content: "\f0d4";
}*/
.icon-instagram:before {
  content: "\f16d"; }

.icon-google-plus-sign:before {
  content: "\f0d4"; }

.icon-google-plus:before {
  content: "\f0d5"; }

.icon-linkedin-sign:before {
  content: "\f08c"; }

.icon-linkedin:before {
  content: "\f0e1"; }

.icon-envelope:before {
  content: "\f0e0"; }

.icon-external-link:before {
  content: "\f08e"; }

.icon-info:before {
  content: "\f129"; }

.icon-inspect:before {
  content: "\f002"; }

.icon-reorder:before {
  content: "\f0c9"; }

.icon-remove:before {
  content: "\f00d"; }

h2 {
  font-family: OpenSans-Light;
  font-size: 44px; }

/*************************************************
    
    =Base Styles Begin
    
**************************************************/
html {
  font-size: 100%; }

body {
  color: #333;
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 69%;
  /* 11px */ }

.clearfix:after {
  content: ".";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  line-height: 0;
  clear: both; }

/*************************************************
    
    =Layout Styles Begin
    
**************************************************/
#page-wrapper {
  width: 100%; }

#top-menu-bar {
  width: 100%;
  background-color: #ffc42f;
  position: relative;
  z-index: 3; }
  #top-menu-bar nav {
    width: 100%;
    height: 85px;
    margin: 0 auto;
    overflow: hidden;
    position: relative; }
    #top-menu-bar nav .logo {
      display: inline-block;
      position: absolute;
      color: #333333;
      top: 23px;
      left: 20px;
      width: 47px;
      height: 38px;
      font-family: OpenSans-Light;
      font-size: 12px;
      font-size: 12px;
      text-transform: uppercase;
      line-height: 12px;
      text-decoration: none; }
      #top-menu-bar nav .logo span {
        display: block; }
      #top-menu-bar nav .logo .first {
        letter-spacing: 5px; }
      #top-menu-bar nav .logo .second {
        letter-spacing: 1px;
        color: #ffffff; }
      #top-menu-bar nav .logo .third {
        letter-spacing: 3px; }
    #top-menu-bar nav .main-nav {
      position: absolute;
      top: 35px;
      right: 20px;
      list-style: none; }
      #top-menu-bar nav .main-nav li {
        display: inline-block;
        margin-left: 20px; }
        #top-menu-bar nav .main-nav li a {
          color: #333333;
          font-family: OpenSans-Light;
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 4px;
          line-height: 1.5;
          text-align: center;
          text-decoration: none; }
        #top-menu-bar nav .main-nav li a:hover {
          color: #ffffff; }

html.os-iPad #fixed-menu nav .logo {
  border: 2px solid red; }

#fixed-menu {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 2;
  background-color: #ffffff; }
  #fixed-menu nav {
    width: 100%;
    height: 85px;
    margin: 0 auto;
    overflow: hidden;
    position: relative; }
    #fixed-menu nav .logo {
      display: inline-block;
      position: absolute;
      color: #333333;
      top: 23px;
      left: 20px;
      width: 47px;
      height: 38px;
      font-family: OpenSans-Light;
      font-size: 12px;
      font-size: 12px;
      text-transform: uppercase;
      line-height: 12px;
      text-decoration: none; }
      #fixed-menu nav .logo span {
        display: block; }
      #fixed-menu nav .logo .first {
        letter-spacing: 5px; }
      #fixed-menu nav .logo .second {
        letter-spacing: 1px;
        color: #ffc42e; }
      #fixed-menu nav .logo .third {
        letter-spacing: 3px; }
    #fixed-menu nav #menu-switch {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      display: none;
      cursor: pointer; }
      #fixed-menu nav #menu-switch i {
        cursor: pointer; }
    #fixed-menu nav #menu-switch:hover i {
      color: #ffc42e; }
    #fixed-menu nav .main-nav {
      position: absolute;
      top: 35px;
      right: 20px;
      list-style: none; }
      #fixed-menu nav .main-nav li {
        display: inline-block;
        margin-left: 20px; }
        #fixed-menu nav .main-nav li a {
          color: #333333;
          font-family: OpenSans-Light;
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 4px;
          line-height: 1.5;
          text-align: center;
          text-decoration: none; }
        #fixed-menu nav .main-nav li a:hover {
          color: #ffc42e; }
    #fixed-menu nav .mobile-nav {
      clear: both; }
      #fixed-menu nav .mobile-nav li {
        display: block;
        /*margin-left: 20px;*/
        padding: 2px 0 0 20px;
        border-bottom: 1px solid #c6c6c6; }
        #fixed-menu nav .mobile-nav li a {
          color: #333333;
          font-family: OpenSans-Light;
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 4px;
          line-height: 1.5;
          text-align: center;
          text-decoration: none; }
        #fixed-menu nav .mobile-nav li a:hover {
          color: #ffc42e; }
      #fixed-menu nav .mobile-nav li:last-child {
        margin-bottom: 2px; }

#mobile {
  display: none; }

#hero {
  width: 100%;
  position: relative; }
  #hero .inner {
    margin: 0 auto;
    width: 100%;
    height: 560px;
    background: transparent url("../assets/images/orange-pattern.png") 0 0 repeat;
    position: relative; }

.cycled {
  list-style: none; }
  .cycled li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible; }

.cycled li div h2 {
  color: #FFFFFF;
  text-transform: uppercase;
  font-family: OpenSans-Light;
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 100px; }
  .cycled li div h2 i {
    color: #ffc42f;
    font-style: normal; }

#technologies {
  width: 100%;
  margin: 75px auto 0; }
  #technologies h3 {
    text-transform: uppercase;
    font-family: OpenSans-Light;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 20px 0;
    color: #ffc42e; }
  #technologies p {
    margin: 20px 0;
    font-size: 12px; }

#technology-panel {
  position: relative;
  width: 98%;
  height: 280px;
  background: url("../assets/images/technologies-bg.jpg") 0 0 repeat-y;
  background-size: 100%;
  margin-top: 75px; }
  #technology-panel .inner {
    height: 100%;
    background-color: #000;
    opacity: 0.60; }
  #technology-panel .inner:after {
    background: transparent url("../assets/images/orange-pattern.png") 0 0 repeat;
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; }
  #technology-panel ul {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0; }
    #technology-panel ul li {
      height: 100%;
      width: 33%;
      float: left; }
      #technology-panel ul li h4 {
        color: #ffffff;
        font-family: OpenSans-Light;
        font-weight: bold;
        font-size: 24px;
        margin-top: 10px; }
    #technology-panel ul li.html {
      background: url("../assets/images/HTML5.png") 50% 50% no-repeat; }
    #technology-panel ul li.js {
      background: url("../assets/images/js.png") 50% 50% no-repeat; }
    #technology-panel ul li.css {
      background: url("../assets/images/CSS3.png") 50% 50% no-repeat; }

#social-links {
  width: 100%;
  margin: 20px auto;
  text-align: center; }
  #social-links ul {
    width: 100%;
    text-align: center;
    overflow: hidden; }
    #social-links ul li {
      float: left;
      width: 20%; }
      #social-links ul li a {
        text-decoration: none;
        text-transform: uppercase;
        font-family: OpenSans-Light;
        color: #333; }
        #social-links ul li a span {
          display: inline-block;
          width: 34px;
          height: 34px;
          background-color: transparent; }
        #social-links ul li a h4 {
          color: #ffffff; }
      #social-links ul li a:hover span i {
        color: #ffc42e; }
      #social-links ul li a:hover h4 {
        color: #333333; }

#container {
  text-align: center; }
  #container a {
    color: #ffc42e;
    text-decoration: none; }
  #container a:hover {
    text-decoration: underline; }
  #container footer {
    background-color: #ffc42f;
    height: 60px;
    margin-top: 30px; }
    #container footer p {
      line-height: 60px;
      font-family: OpenSans-Light;
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 1px;
      font-size: 12px; }
      #container footer p span {
        color: #ffffff;
        font-size: 14px; }

/* Portfolio page styles */
#portfolio {
  margin: 0 auto;
  width: 100%; }
  #portfolio h2 {
    margin: 20px 0; }
  #portfolio p {
    margin: 20px 0;
    font-size: 12px; }

#portfolio-panel ul {
  overflow: hidden;
  width: 960px;
  margin: 20px auto; }
  #portfolio-panel ul li {
    float: left;
    width: 320px;
    height: 330px; }
    #portfolio-panel ul li .img {
      width: 100%;
      height: 220px;
      background-color: beige; }
    #portfolio-panel ul li a.text {
      display: block;
      height: 70px;
      background-color: #ffffff;
      font-family: OpenSans-Light;
      color: #333;
      text-decoration: none;
      text-transform: uppercase;
      padding-top: 40px; }
      #portfolio-panel ul li a.text h3 {
        font-family: OpenSans-Light;
        font-size: 14px;
        text-align: center; }
  #portfolio-panel ul li:hover a.text {
    background-color: #ffc42e;
    color: #ffffff; }

li div.img .popup {
  display: none; }

li div.img .inner {
  display: none;
  text-align: left;
  padding: 5px; }
  li div.img .inner a {
    cursor: pointer;
    display: block;
    width: 25px;
    float: left; }
  li div.img .inner a:hover {
    text-decoration: none; }
    li div.img .inner a:hover i {
      text-decoration: none; }
  li div.img .inner a.inspect {
    float: left; }
  li div.img .inner a.info {
    margin-left: 10px; }
  li div.img .inner a.visit {
    float: right; }
  li div.img .inner i {
    padding: 5px; }
  li div.img .inner i.external-link {
    margin-right: 5px; }

li div:hover.img .inner {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%; }

div.ui-dialog {
  position: relative; }
  div.ui-dialog .sliderDiag {
    padding-top: 30px; }
  div.ui-dialog.infoDialog, div.ui-dialog.sliderDialog {
    background-color: #333333;
    color: #ffc42e; }
    div.ui-dialog.infoDialog .ui-dialog-titlebar, div.ui-dialog.sliderDialog .ui-dialog-titlebar {
      display: none; }
  div.ui-dialog.ui-widget-content {
    border: none;
    color: #ffc42e; }
  div.ui-dialog .ui-dialog-content {
    overflow: hidden; }

div.ui-widget-content {
  color: #ffffff;
  padding: 10px; }
  div.ui-widget-content a.closeInfo,
  div.ui-widget-content a.closeSlider {
    color: #ffc42e;
    display: block;
    width: 27px;
    height: 27px;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: -6px;
    cursor: pointer; }
    div.ui-widget-content a.closeInfo i,
    div.ui-widget-content a.closeSlider i {
      font-family: fontawesome;
      font-size: 24px;
      font-style: normal; }
  div.ui-widget-content h3 {
    font-weight: bold;
    font-size: 14px; }
  div.ui-widget-content table {
    width: 100%; }
    div.ui-widget-content table th,
    div.ui-widget-content table td {
      padding: 5px;
      vertical-align: top;
      color: #ffffff; }
    div.ui-widget-content table th {
      border-right: 1px solid #ffc42e;
      border-bottom: 1px solid #ffc42e;
      width: 30%; }
    div.ui-widget-content table td {
      border-bottom: 1px solid #ffc42e; }
      div.ui-widget-content table td a {
        color: #ffffff;
        text-decoration: none; }
      div.ui-widget-content table td a:hover {
        color: #b78a09;
        text-decoration: underline; }
      div.ui-widget-content table td ol {
        list-style-type: decimal;
        list-style-position: outside;
        margin-left: 20px; }
        div.ui-widget-content table td ol li {
          padding-left: 10px; }
      div.ui-widget-content table td span {
        display: inline-block; }
    div.ui-widget-content table tr:last-child th, div.ui-widget-content table tr:last-child td {
      border-bottom: none; }

div#dialogs {
  display: none; }

li.mtivity .img {
  background: transparent url("../assets/images/mtivity-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.mtivity .img {
  background: transparent url("../assets/images/mtivity-thumb.jpg") 0 0 no-repeat; }

li.boc .img {
  background: transparent url("../assets/images/boc-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.boc .img {
  background: transparent url("../assets/images/boc-thumb.jpg") 0 0 no-repeat; }

li.weddings .img {
  background: transparent url("../assets/images/weddings-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.weddings .img {
  background: transparent url("../assets/images/weddings-thumb.jpg") 0 0 no-repeat; }

li.elp .img {
  background: transparent url("../assets/images/elp-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.elp .img {
  background: transparent url("../assets/images/elp-thumb.jpg") 0 0 no-repeat; }

li.wetlands .img {
  background: transparent url("../assets/images/wetlands-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.wetlands .img {
  background: transparent url("../assets/images/wetlands-thumb.jpg") 0 0 no-repeat; }

li.ford .img {
  background: transparent url("../assets/images/ford-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.ford .img {
  background: transparent url("../assets/images/ford-thumb.jpg") 0 0 no-repeat; }

li.telegraph .img {
  background: transparent url("../assets/images/telegraph-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.telegraph .img {
  background: transparent url("../assets/images/telegraph-thumb.jpg") 0 0 no-repeat; }

li.lbc .img {
  background: transparent url("../assets/images/lbc-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.lbc .img {
  background: transparent url("../assets/images/lbc-thumb.jpg") 0 0 no-repeat; }

li.bidonthis .img {
  background: transparent url("../assets/images/bidonthis-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.bidonthis .img {
  background: transparent url("../assets/images/bidonthis-thumb.jpg") 0 0 no-repeat; }

li.market .img {
  background: transparent url("../assets/images/market-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.market .img {
  background: transparent url("../assets/images/market-thumb.jpg") 0 0 no-repeat; }

li.Hotels4u .img {
  background: transparent url("../assets/images/Hotels4u-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.Hotels4u .img {
  background: transparent url("../assets/images/Hotels4u-thumb.jpg") 0 0 no-repeat; }

li.pearson .img {
  background: transparent url("../assets/images/pearson-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.pearson .img {
  background: transparent url("../assets/images/pearson-thumb.jpg") 0 0 no-repeat; }

li.loreal .img {
  background: transparent url("../assets/images/loreal-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.loreal .img {
  background: transparent url("../assets/images/loreal-thumb.jpg") 0 0 no-repeat; }

li.sportlabs .img {
  background: transparent url("../assets/images/sportlabs-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.sportlabs .img {
  background: transparent url("../assets/images/sportlabs-thumb.jpg") 0 0 no-repeat; }

li.rafclub .img {
  background: transparent url("../assets/images/raf-club-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.rafclub .img {
  background: transparent url("../assets/images/raf-club-thumb.jpg") 0 0 no-repeat; }

li.thorntons .img {
  background: transparent url("../assets/images/thorntons-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.thorntons .img {
  background: transparent url("../assets/images/thorntons-thumb.jpg") 0 0 no-repeat; }

li.tesco .img {
  background: transparent url("../assets/images/tesco-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.tesco .img {
  background: transparent url("../assets/images/tesco-thumb.jpg") 0 0 no-repeat; }

li.hhGlobal .img {
  background: transparent url("../assets/images/hhglobal-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.hhGlobal .img {
  background: transparent url("../assets/images/hhglobal-thumb.jpg") 0 0 no-repeat; }

li.asos .img {
  background: transparent url("../assets/images/asos-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.asos .img {
  background: transparent url("../assets/images/asos-thumb.jpg") 0 0 no-repeat; }

li.mwmw .img {
  background: transparent url("../assets/images/mwmw-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.mwmw .img {
  background: transparent url("../assets/images/mwmw-thumb.jpg") 0 0 no-repeat; }

li.macmillan .img {
  background: transparent url("../assets/images/macmillan-bw-thumb.jpg") 0 0 no-repeat; }

li:hover.macmillan .img {
  background: transparent url("../assets/images/macmillan-thumb.jpg") 0 0 no-repeat; }

/* About page styles */
#aboutContent {
  text-align: left;
  width: 100%;
  margin: 75px auto 0;
  padding: 0 20px; }
  #aboutContent h3 {
    text-transform: uppercase;
    font-family: OpenSans-Light;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: left;
    margin: 20px 0; }
  #aboutContent h4 {
    font-size: 18px; }
  #aboutContent h5 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: -15px; }
  #aboutContent p {
    margin: 20px 0;
    font-size: 12px; }
  #aboutContent .two-col {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px; }

/* Contact page styles */
#contactContent {
  text-align: left;
  width: 100%;
  margin: 75px auto 0; }
  #contactContent h3 {
    text-transform: uppercase;
    font-family: OpenSans-Light;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: left;
    margin: 20px 0;
    padding: 0 20px; }
  #contactContent h4 {
    font-size: 18px;
    padding: 0 20px; }
  #contactContent h5 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: -15px;
    padding: 0 20px; }
  #contactContent p {
    margin: 20px 0;
    font-size: 12px;
    padding: 0 20px; }
  #contactContent .two-col {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    padding: 0 20px; }

#contactForm {
  padding: 0 20px; }
  #contactForm .form-row {
    margin: 20px 0;
    clear: left;
    width: 100%; }
    #contactForm .form-row label {
      display: none;
      padding: 3px 0; }
    #contactForm .form-row input {
      padding: 5px;
      font-family: OpenSans-Light;
      font-size: 12px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
      -moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
      box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
      width: 75%;
      border: 1px solid #c6c6c6; }
    #contactForm .form-row textarea {
      padding: 5px;
      font-family: OpenSans-Light;
      font-size: 12px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
      -moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
      box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
      width: 75%;
      border: 1px solid #c6c6c6; }
    #contactForm .form-row ul.checkboxGroup {
      clear: left;
      overflow: hidden;
      width: 75%; }
      #contactForm .form-row ul.checkboxGroup li {
        width: 50%;
        float: left; }
        #contactForm .form-row ul.checkboxGroup li label {
          display: inline-block;
          width: 75%; }
        #contactForm .form-row ul.checkboxGroup li input[type="radio"] {
          width: auto;
          margin-right: 10px;
          box-shadow: none; }

ul .captcha-row #txtCaptchaDiv {
  padding: 5px 20px;
  font-family: OpenSans-Light;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
  border: 1px solid #c6c6c6;
  background: #fff;
  font-size: 1.5rem;
  font-style: italic;
  text-decoration: line-through;
  color: #cd0a0a;
  background: #fff0bc;
  display: inline-block; }

ul .captcha-row label {
  margin: 10px 0;
  display: inline-block; }

ul .button-row {
  margin: 20px 0; }
  ul .button-row button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background: #ffd956;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffd956 0%, #ffc42f 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffd956), color-stop(100%, #ffc42f));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffd956 0%, #ffc42f 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffd956 0%, #ffc42f 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffd956 0%, #ffc42f 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffd956 0%, #ffc42f 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$end',GradientType=0 );
    /* IE6-9 */
    -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.5);
    border-top: 1px solid #ffc42f;
    border-left: 1px solid #ffc42f;
    border-right: 1px solid #ffc42f;
    border-bottom: 1px solid #ffc42f;
    text-shadow: 1px 1px 1px #747474;
    padding: 10px;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer; }
  ul .button-row button:hover {
    background: #ffc42f;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffc42f 0%, #ffd956 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffc42f), color-stop(100%, #ffd956));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffc42f 0%, #ffd956 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffc42f 0%, #ffd956 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffc42f 0%, #ffd956 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffc42f 0%, #ffd956 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$end',GradientType=0 );
    /* IE6-9 */ }

/* success styles */
#download a {
  font-size: 14px;
  display: inline-block;
  color: #333333;
  height: 32px;
  line-height: 32px;
  padding-right: 40px;
  margin-bottom: 10px; }
  #download a.pdf {
    background: transparent url("../assets/images/PDF-Icon-32.png") 100% 0 no-repeat; }
  #download a.doc {
    background: transparent url("../assets/images/Word-2013-Icon-32.png") 100% 0 no-repeat; }

#download a:hover {
  color: #ffc42e; }

/**
*
*  Initiate media queries
*
**/
#page-wrapper {
  /* @include iPhone6-portrait-only {
    width: $mq-iPhone-6-portrait;

    }*/ }
  @media only screen and (min-width: 769px) and (max-width: 1024px) {
    #page-wrapper {
      width: 1024px; } }
  @media only screen and (max-width: 1024px) {
    #page-wrapper #portfolio-panel ul li a.text {
      background-color: #ffc42e !important;
      color: #ffffff !important;
      height: 68px; }
    #page-wrapper li div.inner {
      display: block;
      height: 12%;
      background-color: rgba(0, 0, 0, 0.5); }
    #page-wrapper li.ford .img {
      background: transparent url("../assets/images/ford-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.telegraph .img {
      background: transparent url("../assets/images/telegraph-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.boc .img {
      background: transparent url("../assets/images/boc-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.weddings .img {
      background: transparent url("../assets/images/weddings-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.elp .img {
      background: transparent url("../assets/images/elp-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.wetlands .img {
      background: transparent url("../assets/images/wetlands-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.lbc .img {
      background: transparent url("../assets/images/lbc-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.bidonthis .img {
      background: transparent url("../assets/images/bidonthis-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.market .img {
      background: transparent url("../assets/images/market-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.Hotels4u .img {
      background: transparent url("../assets/images/Hotels4u-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.pearson .img {
      background: transparent url("../assets/images/pearson-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.loreal .img {
      background: transparent url("../assets/images/loreal-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.sportlabs .img {
      background: transparent url("../assets/images/sportlabs-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.rafclub .img {
      background: transparent url("../assets/images/raf-club-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.thorntons .img {
      background: transparent url("../assets/images/thorntons-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.tesco .img {
      background: transparent url("../assets/images/tesco-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.hhGlobal .img {
      background: transparent url("../assets/images/hhglobal-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.asos .img {
      background: transparent url("../assets/images/asos-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.mwmw .img {
      background: transparent url("../assets/images/mwmw-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper li.macmillan .img {
      background: transparent url("../assets/images/macmillan-thumb.jpg") 0 0 no-repeat; }
    #page-wrapper #aboutContent {
      padding: 0 20px; }
    #page-wrapper #portfolio,
    #page-wrapper #aboutContent,
    #page-wrapper #contactContent {
      width: auto; } }
  @media only screen and (min-width: 481px) and (max-width: 768px) {
    #page-wrapper {
      width: 768px; }
      #page-wrapper #hero {
        height: 448px; }
        #page-wrapper #hero .inner {
          height: 448px; }
      #page-wrapper #portfolio-panel ul {
        width: 640px; } }
  @media only screen and (max-width: 768px) {
    #page-wrapper #top-menu-bar {
      visibility: hidden; }
    #page-wrapper #fixed-menu nav #menu-switch {
      display: block; }
    #page-wrapper #fixed-menu nav .main-nav {
      display: none; }
    #page-wrapper #fixed-menu nav .mobile-nav li a {
      font-size: 24px; }
    #page-wrapper #contactContent {
      padding: 0 20px; }
    #page-wrapper #aboutContent h3, #page-wrapper #aboutContent h4, #page-wrapper #aboutContent h5 {
      padding: 0 20px; }
    #page-wrapper #aboutContent .two-col {
      -moz-column-count: 1;
      -webkit-column-count: 1;
      padding: 0 20px; } }
  @media only screen and (min-width: 321px) and (max-width: 480px) {
    #page-wrapper {
      width: 480px;
      /*#hero {
    height: 280px;
      .inner {
        height: 280px;
        h2 {
          font-size: 36px;
          line-height: 48px;
        }
      }
    }*/ }
      #page-wrapper #portfolio-panel ul {
        width: 320px; } }
  @media (max-width: 320px) {
    #page-wrapper {
      width: 320px;
      /*    @include retina {
      width: 640px;
      color:red;
    }*/ }
      #page-wrapper #hero {
        height: 187px; }
        #page-wrapper #hero .inner {
          height: 187px; }
          #page-wrapper #hero .inner h2 {
            font-size: 24px;
            line-height: 36px; }
      #page-wrapper #technologies {
        margin-top: 25px; }
        #page-wrapper #technologies h3 {
          font-size: 18px; }
        #page-wrapper #technologies p {
          margin: 20px; }
        #page-wrapper #technologies #technology-panel {
          height: 715px; }
          #page-wrapper #technologies #technology-panel ul li {
            float: none;
            margin: 20px auto;
            height: 210px;
            background-position: 50% 40px; }
      #page-wrapper #social-links ul {
        text-align: center; }
        #page-wrapper #social-links ul li {
          float: none;
          display: inline-block;
          width: 100px; }
      #page-wrapper #portfolio {
        padding-left: 0;
        padding-right: 0; }
      #page-wrapper #portfolio-panel ul {
        width: 320px; }
      #page-wrapper footer {
        height: 100%; }
        #page-wrapper footer p {
          padding: 0 20px;
          line-height: 24px; } }

/* Only iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /*  #page-wrapper {
    width: 320px;
  }
  div#hero {
    .inner {
      height: 560px;
    }
  }
  #top-menu-bar {
    visibility: hidden;
  }
  #fixed-menu {
    nav {
      #menu-switch {
        display: block;
      }
      .main-nav {
        display: none;
      }
      .mobile-nav {
        li {
          a {
            font-size: 24px;
          }
        }
      }
    }
  }
  #technologies h3 {
    font-size: 16px;
  }
  .cycled li div h2 {
    font-size: 24px;
    line-height: 48px;
    top:30px;
  }*/ }

/************************************
*
* Media queries for iPhone 6 and iPhone 6+
*
************************************/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  #page-wrapper {
    width: 667px; } }

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  #page-wrapper {
    width: 375px; }
  #hero {
    height: 219px; }
    #hero .inner {
      height: 219px; }
      #hero .inner h2 {
        font-size: 24px;
        line-height: 36px; }
  #top-menu-bar {
    visibility: hidden; }
  #fixed-menu nav #menu-switch {
    display: block; }
  #fixed-menu nav .main-nav {
    display: none; }
  #fixed-menu nav .mobile-nav li a {
    font-size: 24px; }
  #technologies {
    margin-top: 25px; }
    #technologies h3 {
      font-size: 18px; }
    #technologies p {
      margin: 20px; }
    #technologies #technology-panel {
      height: 715px; }
      #technologies #technology-panel ul li {
        float: none;
        margin: 20px auto;
        height: 210px;
        background-position: 50% 40px; }
  #social-links ul {
    text-align: center; }
    #social-links ul li {
      float: none;
      display: inline-block;
      width: 100px; }
  #portfolio {
    padding-left: 0;
    padding-right: 0; }
  #portfolio-panel ul {
    width: 320px; }
  footer {
    height: 100%; }
    footer p {
      padding: 0 20px;
      line-height: 24px; } }

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