.tt-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-nav__submenu a {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.tt-nav {
  position: relative;
  max-width: 20em;
  overflow: hidden;
  font-size: 14px;
  font-size: .875rem;
  /* Now show full width */
}
@media (min-width: 55em) {
  .tt-nav {
    overflow: visible;
    /*float: left;
    width: 100%;
    max-width: 100%;
    padding-top: 1rem;
    background-color: #fff;*/
  }
}
li#tt-contact {
    padding: 0px !important;
}

/* Class added via JS when toggled open */
.tt-nav--open {
  overflow: visible;
}

.tt-nav__list {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  width: 100%;
  /**
   * Hide nav by default only when JS is running and viewport is less than
   * navigation breakpoint.
   * The wrapper has 'overflow: hidden;' which hides it.
   */
  /* Remove background */
}
@media (max-width: 55em) {
  .tt-nav__list {
    background-color: #111;
  }
    .js .tt-nav__list {
        position: absolute;
        margin-left: .75rem;
        Z-INDEX: 999;
    }
}
a.tt-nav__toggle {
    display: none;
}
@media (min-width: 55em) {
  .tt-nav__list {
    background: none;
  }
}
ul.tt-nav__list {
    DISPLAY: block;
}

.tt-nav__item {
  border-top: 1px solid #2b2b2b;
  position: relative;
  /* Change from stacked to display in a row */
}
@media (min-width: 55em) {
  .tt-nav__item {
    float: left;
 !   width: 14.2857142857%;
    border-top: none;
    padding: 0 1px;
    box-sizing: border-box;
  }
}
li#tt-contact a::after {
    display: none !important;
}

.tt-nav__link, .tt-nav__submenu a, .tt-nav__toggle {
  display: block;
  white-space: nowrap;
  padding-right: 14px;
  padding-left: 14px;
  line-height: 44px;
}

.tt-nav__link {
!  position: relative;
 ! background-color: #111;
  color: #fff;
  /* Background now gone so change link colour */
}
@media (min-width: 55em) {
  .tt-nav__link {
    transition: background-color .25s;
    text-align: center;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .tt-nav__link:hover {
   ! background-color: #63f;
  }
}
ul.tt-nav__submenu a {
    font-size: 14px;
    text-decoration: none;
}
ul.tt-nav__submenu li {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

@media (max-width: 55em) {
    .is-active .tt-nav__link {
        background-color: transparent;
    }
}

@media (min-width: 551px) and (max-width: 768px) {
    ul.tt-nav__submenu {
        width: 100px;
        left: -47px !important;
        margin-top: 12%;
        position: absolute;
        top: 125%;
    }
}
    .tt-nav__link::after {
        content: "";
        position: absolute;
        width: 9px;
        height: 8px;
        top: 50%;
        right: 1.5em;
        margin-top: -4px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFqqqqAAAABaH1EQAAAAJ0Uk5T/wDltzBKAAAAM0lEQVR42nzIUQoAIAzD0Ob+lxYE2Wat+QpP8nB40WUEYsomhkSiSyaaHKLkR6jOaQkwAC7CAH89ejUHAAAAAElFTkSuQmCC);
        background-repeat: no-repeat;
        background-size: 100%;
        z-index: 2;
    }

    .tt-nav__submenu a {
        font-size: 12px;
        font-size: .75rem;
        transition: background-color .25s,color .5s .5s,border-color 1s 1.5s;
    }

    @media (max-width: 55em) {
        .tt-nav__submenu a {
            color: #fff;
            background-color: #111;
        }
    }

    @media (min-width: 55em) {
        .tt-nav__submenu a {
            color: transparent;
            background-color: transparent;
        }
    }

    .tt-nav__item:hover .tt-nav__submenu a {
        border-top-color: rgba(255, 255, 255, 0.1);
        border-bottom-color: rgba(0, 0, 0, 0.95);
    }

    @media (min-width: 55em) {
        .tt-nav__item:hover .tt-nav__submenu a {
            color: #fff;
        }
    }

    .tt-nav__item:hover .tt-nav__submenu a,
    .is-active .tt-nav__submenu a {
        /* Background now gone so change link colour */
    }

    @media (min-width: 55em) {
        .tt-nav__item:hover .tt-nav__submenu a:hover,
        .is-active .tt-nav__submenu a:hover {
            background-color: #e65100;
        }
    }

    @media (max-width: 55em) {
        .js .tt-nav__submenu .is-selected {
            color: #fff;
            background-color: #e65100;
        }
    }

    /**
 * TOGGLE BUTTON
 * =============
 *
 * <a> element inserted via JavaScript which toggles the nav.
 *
 * [1] Match the navigation link styles.
 * [2] So toggle button width is at least the hit-area size, but can grow.
 */
    .tt-nav__toggle {
        display: inline-block;
        color: #fff;
        background: #e65100;
        min-width: 44px;
        min-height: 44px;
        border-radius: 3px;
        box-sizing: border-box;
        position: relative;
        margin-top: 1.5rem;
        margin-left: .75rem;
        /* Content for toggle button */
        /* Menu open styles */
        /* Now hide the toggle button as menu show by default */
    }

        .tt-nav__toggle:before, .tt-nav__toggle:after {
            position: absolute;
            display: inline-block;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            line-height: 1;
            z-index: 1;
        }

        .tt-nav__toggle:before {
            content: "";
            font-size: 16px;
            border-top: 2px solid #fff;
            border-bottom: 2px solid #fff;
            box-shadow: 0 4px 0 0 #e65100, 0 6px 0 0 #fff;
            margin: 1rem .75rem 1.25em;
        }

        .tt-nav__toggle:after {
            content: "Menu";
            position: absolute;
            margin-top: -1rem;
            color: #111;
            padding-left: .125rem;
        }

        .tt-nav__toggle:hover {
            text-decoration: none;
        }

    .tt-nav--open .tt-nav__toggle {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        /* Change hamburger icon to a close icon */
    }

        .tt-nav--open .tt-nav__toggle:before {
            content: " ×";
            border: 0;
            box-shadow: none;
            margin: 22% 30%;
            font-size: 1.5rem;
        }

    @media (min-width: 55em) {
        .tt-nav__toggle {
            display: none;
        }
    }

    /* Submenu */
    .tt-nav__submenu {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    @media (min-width: 55em) {
        .tt-nav__submenu {
            position: absolute;
            left: -9999px;
            top: 100%;
            height: 0;
            overflow: hidden;
            z-index: 9;
            background-color: #e65100;
            ! background-color: rgba(102, 51, 255, 0.875);
            margin-left: 2px;
            margin-right: 2px;
            transition: padding-bottom 0.4s cubic-bezier(0.6, 0.4, 0.25, 0.5), background-color 0.5s;
        }
    }

    @media (min-width: 55em) {
        .tt-nav__item:hover .tt-nav__submenu {
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.9);
        }
    }

    /* hide the submenu's on mobile when there is javascript */
    @media (max-width: 55em) {
        .js .tt-nav__submenu {
            height: 0;
            overflow: hidden;
            transition: padding-bottom 0.3s cubic-bezier(0.6, 0.4, 0.25, 0.75);
        }
    }

    /* show them when touched  fall-back */
    @media (max-width: 55em) {
        .is-active .tt-nav__submenu {
            padding-bottom: 150%;
        }
    }

    @media (max-width: 55em) {
        .is-active[class*="itemcount-1"] .tt-nav__submenu {
            padding-bottom: 46px;
        }
    }

    @media (max-width: 55em) {
        .is-active[class*="itemcount-2"] .tt-nav__submenu {
            padding-bottom: 92px;
        }
    }

    @media (max-width: 55em) {
        .is-active[class*="itemcount-3"] .tt-nav__submenu {
            padding-bottom: 138px;
        }
    }

    @media (max-width: 55em) {
        .is-active[class*="itemcount-4"] .tt-nav__submenu {
            padding-bottom: 184px;
        }
    }

    @media (max-width: 55em) {
        .is-active[class*="itemcount-5"] .tt-nav__submenu {
            padding-bottom: 230px;
        }
    }

    @media (max-width: 55em) {
        .is-active[class*="itemcount-6"] .tt-nav__submenu {
            padding-bottom: 276px;
        }
    }

    @media (max-width: 55em) {
        .is-active[class*="itemcount-7"] .tt-nav__submenu {
            padding-bottom: 322px;
        }
    }

    @media (max-width: 55em) {
        .is-active[class*="itemcount-8"] .tt-nav__submenu {
            padding-bottom: 368px;
        }
    }

    @media (max-width: 55em) {
        .is-active[class*="itemcount-9"] .tt-nav__submenu {
            padding-bottom: 414px;
        }
    }

    @media (max-width: 55em) {
        .is-active[class*="itemcount-10"] .tt-nav__submenu {
            padding-bottom: 460px;
        }
    }

    @media (min-width: 55em) {
        [class*="itemcount-1"]:hover .tt-nav__submenu {
            padding-bottom: 46px;
        }
    }

    @media (min-width: 55em) {
        [class*="itemcount-2"]:hover .tt-nav__submenu {
            padding-bottom: 92px;
        }
    }

    @media (min-width: 55em) {
        [class*="itemcount-3"]:hover .tt-nav__submenu {
            padding-bottom: 138px;
        }
    }

    @media (min-width: 55em) {
        [class*="itemcount-4"]:hover .tt-nav__submenu {
            padding-bottom: 184px;
        }
    }

    @media (min-width: 55em) {
        [class*="itemcount-5"]:hover .tt-nav__submenu {
            padding-bottom: 230px;
        }
    }

    @media (min-width: 55em) {
        [class*="itemcount-6"]:hover .tt-nav__submenu {
            padding-bottom: 276px;
        }
    }

    @media (min-width: 55em) {
        [class*="itemcount-7"]:hover .tt-nav__submenu {
            padding-bottom: 322px;
        }
    }

    @media (min-width: 55em) {
        [class*="itemcount-8"]:hover .tt-nav__submenu {
            padding-bottom: 368px;
        }
    }

    @media (min-width: 55em) {
        [class*="itemcount-9"]:hover .tt-nav__submenu {
            padding-bottom: 414px;
        }
    }

    @media (min-width: 55em) {
        [class*="itemcount-10"]:hover .tt-nav__submenu {
            padding-bottom: 460px;
        }
    }