@charset "UTF-8";
/* CSS Document */
/* SCSS Document */
/* -- dev -- */
/* set true for size debugging info */
/* set true to see main layout divs */
/* -- parameters -- */
/* webflow breakpoints */
/* webflow tiny: phone portrait 479px and below */
/* webflow tiny: phone portrait 479px and below */
/* webflow small: phone landscape 767px and below */
/* webflow small: phone landscape 767px and below */
/* webflow medium: tablet portrait 991px and below */
/* tablet portrait 991px and below */
/* desktop 992px and above */
/* colours, fonts and other global template parameters */
/* -- layout mixins -- */
/* -- mixins -- */
/* aspect ratio micxin from https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ */
/* -- debug mixins -- */
/* utility mixins */
/* CSS Document */
/* line 49, ../sass/_mixins.scss */
#cssSize {
  text-align: center;
  z-index: 0 !important; }
  /* line 51, ../sass/_mixins.scss */
  #cssSize:before {
    content: "xs"; }
  @media (min-width: 480px) {
    /* line 49, ../sass/_mixins.scss */
    #cssSize {
      z-index: 1 !important; }
      /* line 57, ../sass/_mixins.scss */
      #cssSize:before {
        content: "sm"; } }
  @media (min-width: 768px) {
    /* line 49, ../sass/_mixins.scss */
    #cssSize {
      z-index: 2 !important; }
      /* line 63, ../sass/_mixins.scss */
      #cssSize:before {
        content: "md"; } }
  @media (min-width: 992px) {
    /* line 49, ../sass/_mixins.scss */
    #cssSize {
      z-index: 3 !important; }
      /* line 69, ../sass/_mixins.scss */
      #cssSize:before {
        content: "lg"; } }

/* line 75, ../sass/_mixins.scss */
#cssSize {
  display: block;
  /* hide from users unless debugging */
  height: 0px;
  padding: 0;
  line-height: 0;
  overflow: hidden; }

/* -- overrides to webflow layout -- */
/* use 1600px for testing, use 1920 for live */
/* required for two column layout */
/* nav width, medium size and above */
/* extra breakpoint - desktop screens this and below get different layout */
/* limit the design to max width on very large screens */
/* line 12, ../sass/_layout.scss */
.wrap-site {
  max-width: 1920px;
  margin: 0 auto; }

/* tweak header logo and page layout on small desktops */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  /* line 19, ../sass/_layout.scss */
  .logo-image {
    left: 0; }

  /* line 22, ../sass/_layout.scss */
  .content-flinks, .width-50 {
    width: 100%; }

  /* line 25, ../sass/_layout.scss */
  .content-tag {
    width: 33.33%; }

  /* line 28, ../sass/_layout.scss */
  .content-body {
    width: 66.67%;
    margin-bottom: 36px; }

  /* line 32, ../sass/_layout.scss */
  h1.slide-hero, h2.slide-hero {
    font-size: 28px;
    line-height: 1.1;
    width: 45%; }

  /* line 37, ../sass/_layout.scss */
  .contact-footer {
    top: -8px;
    right: -1px;
    left: auto; }

  /* line 42, ../sass/_layout.scss */
  .nav-footer {
    width: 100%;
    display: flex;
    justify-content: start;
    left: 0;
    right: 0;
    bottom: 12px;
    padding-left: 24px; }

  /* line 51, ../sass/_layout.scss */
  .wrap-side-fl {
    flex: 0 0 220px; }

  /* line 54, ../sass/_layout.scss */
  .nav-menu-link {
    height: auto;
    min-height: 41px;
    padding-bottom: 6px; }

  /* line 60, ../sass/_layout.scss */
  .page-home .content-body-notag, .page-home .content-flinks-notag {
    width: 100%; }
  /* line 63, ../sass/_layout.scss */
  .page-home .row-after-flink-wrap {
    width: 49.9%; } }
/* disable hero tagline fade in on small desktops */
@media screen and (max-width: 1200px) {
  /* line 71, ../sass/_layout.scss */
  .flink-hero-tag {
    transition: none;
    -o-transition: all 0 none;
    display: none !important;
    visibility: hidden !important; } }
/* nav on small screens needs to be wider */
/* line 79, ../sass/_layout.scss */
.w-nav-overlay {
  width: 100% !important; }

/* line 82, ../sass/_layout.scss */
.w--open > .w-icon-nav-menu:before {
  font-family: 'Mjd';
  font-size: 18px;
  position: relative;
  top: -6px;
  left: -9px;
  content: "\e809"; }
  @media screen and (max-width: 479px) {
    /* line 82, ../sass/_layout.scss */
    .w--open > .w-icon-nav-menu:before {
      left: 19px; } }

/* project story image offsets (desktop only) */
@media screen and (min-width: 992px) {
  /* line 100, ../sass/_layout.scss */
  .story-rtb img {
    border: 1px solid #c5d9ec; }
  /* line 103, ../sass/_layout.scss */
  .story-rtb .w-richtext-align-floatright {
    position: relative;
    right: -150px;
    margin-left: -130px !important; }
  /* line 108, ../sass/_layout.scss */
  .story-rtb .w-richtext-align-floatleft {
    position: relative;
    left: -150px;
    margin-right: -130px !important; }
  /* line 113, ../sass/_layout.scss */
  .story-rtb h2, .story-rtb h3, .story-rtb h4, .story-rtb h5, .story-rtb h6 {
    clear: both; } }
/* tweaks for small desktop */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  /* line 120, ../sass/_layout.scss */
  .content-body-story {
    padding-left: 0;
    padding-right: 0; }

  /* line 125, ../sass/_layout.scss */
  .story-rtb .w-richtext-align-floatright {
    right: 0px;
    margin-left: 20px !important; }
  /* line 129, ../sass/_layout.scss */
  .story-rtb .w-richtext-align-floatleft {
    left: 0px;
    margin-right: 20px !important; } }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  /* line 138, ../sass/_layout.scss */
  .wrap-main-fl {
    flex: 1 1 0%;
    min-width: 0; } }
/* main page layout */
/* additional styling for lightbox */
/* line 2, ../sass/_lightbox.scss */
.w-lightbox-backdrop {
  background-color: rgba(4, 41, 79, 0.95);
/*  background-image: url("http://clients.seapebble.co.uk/mjd01/assets/logo/MJDesign-logo-white.png"); */
  background-image: url("/images/MJDesign-logo-white.png");
  background-position: left top;
  background-repeat: no-repeat; }

/* line 8, ../sass/_lightbox.scss */
.cssIsSmall .w-lightbox-backdrop {
  background-position: left bottom;
  background-size: auto 40px; }

/* line 12, ../sass/_lightbox.scss */
.w-lightbox-caption {
  height: auto;
  white-space: normal;
  text-align: center; }

/* webflow lightbox */
/* @import "jquery-tilesgallery"; */
/* tiles */
/* Slider */
/* line 3, ../sass/_slick.scss */
.slick-slider {
  position: relative;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

/* line 18, ../sass/_slick.scss */
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  /* line 25, ../sass/_slick.scss */
  .slick-list:focus {
    outline: none; }
  /* line 29, ../sass/_slick.scss */
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

/* line 34, ../sass/_slick.scss */
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

/* line 43, ../sass/_slick.scss */
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block; }
  /* line 49, ../sass/_slick.scss */
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  /* line 55, ../sass/_slick.scss */
  .slick-track:after {
    clear: both; }
  /* line 59, ../sass/_slick.scss */
  .slick-loading .slick-track {
    visibility: hidden; }

/* line 63, ../sass/_slick.scss */
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  /* line 67, ../sass/_slick.scss */
  [dir="rtl"] .slick-slide {
    float: right; }
  /* line 70, ../sass/_slick.scss */
  .slick-slide img {
    display: block; }
  /* line 73, ../sass/_slick.scss */
  .slick-slide.slick-loading img {
    display: none; }
  /* line 79, ../sass/_slick.scss */
  .slick-slide.dragging img {
    pointer-events: none; }
  /* line 83, ../sass/_slick.scss */
  .slick-initialized .slick-slide {
    display: block; }
  /* line 87, ../sass/_slick.scss */
  .slick-loading .slick-slide {
    visibility: hidden; }
  /* line 91, ../sass/_slick.scss */
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

/* line 97, ../sass/_slick.scss */
.slick-arrow.slick-hidden {
  display: none; }

/* slick slider */
/* was slick */
/* icon-left-open Code: 0xe805 */
/* icon-right-open-1 Code: 0xe806 */
/* icon-blank Code: 0xe804 */
/* was 6px */
/* was 20px */
/* was 0.25 */
/* Slider */
/* line 40, ../sass/_slick-theme.scss */
.slick-list {
  z-index: 1;
  /* specify z index to overlay slides */ }
  /* line 42, ../sass/_slick-theme.scss */
  .slick-loading .slick-list {
    background: #fff url('/images/ajax-loader.gif') center center no-repeat; }

/* Icons */
/* Arrows */
/* line 60, ../sass/_slick-theme.scss */
.slick-prev,
.slick-next {
  z-index: 4;
  /* specify z index to overlay slides and masks */
  position: absolute;
  display: block;
  height: 40px;
  /* was 20px */
  width: 40px;
  /* was 20px */
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  margin-top: -10px\9;
  /*lte IE 8*/
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  /* line 80, ../sass/_slick-theme.scss */
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    /* line 84, ../sass/_slick-theme.scss */
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
  /* line 88, ../sass/_slick-theme.scss */
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.6; }

/* line 93, ../sass/_slick-theme.scss */
.cssIsTiny .slick-prev, .cssIsTiny .slick-next {
  text-shadow: 0px 0px 3px rgba(4, 41, 79, 0.5); }

/* line 98, ../sass/_slick-theme.scss */
.slick-prev:before, .slick-next:before {
  font-family: "mjd";
  font-size: 30px;
  line-height: 1;
  color: white;
  opacity: 0.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* line 108, ../sass/_slick-theme.scss */
.slick-prev {
  left: 15px;
  /* was -25px */ }
  /* line 110, ../sass/_slick-theme.scss */
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  /* line 114, ../sass/_slick-theme.scss */
  .slick-prev:before {
    content: ""; }
    /* line 116, ../sass/_slick-theme.scss */
    [dir="rtl"] .slick-prev:before {
      content: ""; }

/* line 122, ../sass/_slick-theme.scss */
.slick-next {
  right: 15px;
  /* was -25px */ }
  /* line 124, ../sass/_slick-theme.scss */
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  /* line 128, ../sass/_slick-theme.scss */
  .slick-next:before {
    content: ""; }
    /* line 130, ../sass/_slick-theme.scss */
    [dir="rtl"] .slick-next:before {
      content: ""; }

/* Dots */
/* line 138, ../sass/_slick-theme.scss */
.slick-slider {
  margin-bottom: 0;
  /* was 30px; */ }

/* line 142, ../sass/_slick-theme.scss */
.slick-dots {
  position: absolute;
  z-index: 103;
  /* specify z index to overlay slides */
  bottom: 0%;
  /* was -45px */
  left: 15px;
  /* was unspecified */
  margin-bottom: 0px;
  /* was unspecified */
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  width: auto;
  /* was 100%; */ }
  @media (max-width: 479px) {
    /* line 142, ../sass/_slick-theme.scss */
    .slick-dots {
      display: none !important; } }
  /* line 156, ../sass/_slick-theme.scss */
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 3px 3px;
    padding: 0;
    cursor: pointer; }
    /* line 164, ../sass/_slick-theme.scss */
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 0px;
      cursor: pointer;
      /* box-shadow:	0px 0px 3px 0px rgba(51,51,51,0.4); */
      /* added box shadow */ }
      /* line 177, ../sass/_slick-theme.scss */
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        /* line 179, ../sass/_slick-theme.scss */
        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
      /* line 183, ../sass/_slick-theme.scss */
      .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 20px;
        height: 20px;
        font-family: "mjd";
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        color: white;
        opacity: 0.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    /* line 200, ../sass/_slick-theme.scss */
    .slick-dots li.slick-active button:before {
      color: white;
      opacity: 0.85; }

/* @import "animate" ; */
/* non-webflow animations */