.nav-down {
	top: -32px;
}
.colour {
	background-color: #fff;
}
#logo {
	padding-top: 20px;
	width: 190px;
	position: absolute;
}
#apple {
	padding-top: 43px;
	width: 28px;
	float: left;
	height: 30px;
	position: absolute;
	display: none;
}

.nav-out {
	left: 0px;
}
/* Content wrapper */
.wrapper {
	width: 100%;
	margin: 0 auto;
}
.nav-up {
    top: -108px;
}
#nav-wrap {
	padding-left: 30px;
	margin: 0;
	padding-right: 30px;
	z-index: 999;
	height: 108px;
	background-color: #FFFFFF;
	width: 100%;
	position: relative;
}
#nav {
	max-width: 1366px;
	margin-left: auto;
	margin-right: auto;
	height: 108px;
	padding-top: 35px;
}

.wrapper-small {
  max-width: 640px;
}

.wrapper-flush {
  width: 100%;
}

/**
 * Navigation
 */
.nav {
	top: 0;
	left: 0;
	z-index: 10000;
}

/** 
* Nav container 
* 1. Ensure this slides in below parent
* 2. Hide by default
* 3. Smoother scrolling experience on iOS
*/
.nav-container {
	position: fixed; /* 1 */
	left: 0;
	z-index: 9999;
	overflow-y: auto;
	visibility: hidden; /* 2 */
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
	transform: translateX(-100%);
	-webkit-overflow-scrolling: touch; /* 3 */
	top: 0px;
	background-color: #FFFFFF;
}

/* 1. Show when `.is-visible` class is added */
.nav-container.is-visible {
  visibility: visible; /* 1 */
  transform: translateX(0); /* 1 */
}

/* Nav toggle */
.nav-toggle {
	line-height: 1;
	display: inline-block;
	border: 0;
	float: right;
	background-color: transparent;
	padding-top: 3px;
}

/* Nav toggle icon */
.nav-toggle .icon-menu {
	position: relative;
	display: inline-block;
	width: 25px;
	height: 20px;
	vertical-align: middle;
	fill: none;
}

/* Nav toggle icon lines */
.icon-menu .line {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
	background-color: #767676;
}

/* Nav toggle icon line 1 */
.icon-menu .line-1 {
  top: 0;
}

/* When active, rotate line 1 to be lefthand part of X 
.is-active .icon-menu .line-1 {
  transform: translateY(8px) translateX(0) rotate(45deg);
}*/

/* Nav toggle icon line 2 */
.icon-menu .line-2 {
	top: 50%;
	margin-top: -1px;
}

/* When active, hide line 2 
.is-active .icon-menu .line-2 {
  opacity: 0;
}*/

/* Nav toggle icon line 3 */
.icon-menu .line-3 {
  bottom: 0;
}

/* When active, rotate line 3 to be righthand part of X 
.is-active .icon-menu .line-3 {
  transform: translateY(-8px) translateX(0) rotate(-45deg);
}*/

/* Remove default list styles for menus */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/** 
* 1. Give menu a lighter background than its container 
* 2. Prevent menu text from being accidentally highlighted
*/
.nav-menu {
	user-select: none;
}

/* Give menu items a top border */
.nav-menu .menu-item {
	border-bottom: 1px solid #DBDBDB;
}

/* Give last menu item a bottom border */
.nav-menu > .menu-item:last-child {
}

/* Darker background color on hover, and when toggled */
.nav-menu > .menu-item:hover,
.nav-menu > .menu-item.is-active {
}

/* 1. Menu links are block level, by default */
.nav-menu .menu-link {
	display: block; /* 1 */
	text-decoration: none;
	color: #585858;
	font-size: 18px;
	padding-left: 30px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 0;
	padding-right: 30px;
	font-weight: 300;
}
.drop-link {
	color: #585858;
	font-size: 14px;
	text-decoration: none;
	margin: 0;
	display: block;
	padding-top: 20px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 20px;
	font-weight: 300;
}
.drop-link:hover {
	text-decoration: none;
}

/* 1. Menu items with dropdowns appear clickable */
.has-dropdown {
	position: relative; /* 1 */
	cursor: pointer;
}

/* 1. Parent menu links inlined so you can toggle the dropdown */
.has-dropdown > .menu-link {
  display: inline-block;
}

/* 1. Add an icon to menu items that have sub menus */
.has-dropdown:after {
	font-size: 32px;
	position: absolute;
	top: 0;
	bottom: 0;
	content: "+"; /* 1 */
	color: #BDBDBD;
	padding-right: 30px;
	right: 0px;
	padding-top: 5px;
}

/* 1. Switch icon to n-dash when toggled */
.has-dropdown.is-active:after {
	content: "\2013";
}

/**
 * Dropdowns
 * 1. Hide dropdowns by default
 */
.nav-dropdown {
	display: none; /* 1 */
	background-color: #eeeeee;
}

/* 1. Show dropdown when toggled */
.has-dropdown.is-active > .nav-dropdown {
	display: block;
}

/* 2nd level dropdown */
.nav-dropdown .nav-dropdown {
	background-color: #AB4ABD;
}

.nav-dropdown .menu-item {
	border-color: #a0a0a0 #a0a0a0 #E0E0E0;
}

.nav-dropdown .nav-dropdown .menu-item {
	background-color: #91D095;
	border-color: #909090 #909090 #E3E3E3;
}

/* Main content area */
.content {
  margin-top: 60px;
}

.content .wrapper {
  padding: 1rem 0;
}
.logo {
	float: left;
	padding-top: 0px;
}
#nav-wrap .close-style {
	margin: 0;
	padding-top: 55px;
	padding-right: 30px;
	padding-left: 0px;
	padding-bottom: 0px;
	height: 108px;
	text-align: right;
}
.nav-menu.menu .menu-item.hide-close .menu-link.nav-close.close-style {
	text-align: right;
	margin-top: 13px;
}

@media (min-width:1000px){
	#logo-wrap {
	float: left;
	position: relative;
}
	#logo {
	width: 241px;
}
#apple {
}
.nav-up {
    top: -151px;
}
	
  .nav {
	float: right;
  }
  
  .nav,
  .nav-container,
  .nav-container.is-visible {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    transform: translateX(0);
  }
  
  .nav-container,
  .nav-container.is-visible {
    visibility: visible;
    height: auto;
    min-height: 0;
    overflow-y: visible;
  }
  
  .nav-toggle {
    display: none;
  }
  
  /* 1. Display menu items inline */
  .nav-menu > .menu-item,
  .nav-menu > .menu-item.is-active {
	display: inline-block;
	border: 0;
  }
  
  /* Remove bottom border on last child */
  .nav-menu > .menu-item:last-child {
    border: 0;
  }
  
  .nav-menu .menu-item {
	margin: 0;
	padding: 0;
	transition: background-color 0.15s ease-in-out, 
      color 0.15s ease-in-out;
  }
  
  /* Remove +/- icons */
  .has-dropdown:after {
	content: "" !important;
  }
  
  
  
  /* Re-style dropdowns for larger screens */
  .nav-dropdown {
	display: block;
	opacity: 0;
	position: absolute;
	top: 80px;
	margin: 0;
	padding-top: 25px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 18px;
	visibility: hidden;
	transition: visibility 0s linear 0.25s,
      opacity 0.25s linear;
	text-align: center;
	background-repeat: no-repeat;
	background-color: transparent;
	background-image: url(../img/drop-bgr.png);
	background-position: left top;
  }
  
  .has-dropdown:hover > .nav-dropdown {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
  }
  
  .nav-dropdown .menu-item {
    border: 0;
  }
  
  .nav-dropdown .menu-item:hover,
  .nav-dropdown .nav-dropdown .menu-item:hover {
  }

  .nav-dropdown .nav-dropdown,
  .nav-dropdown .nav-dropdown .menu-item {
	background-color: #3BCA2B;
  }
  
  .nav-dropdown .nav-dropdown {
    z-index: 9998;
    top: 0;
    left: 100%;
  }
  
  .content {
    margin-top: 0;
  }
.nav-menu {
	float: right;
	background-color: transparent;
}
.menu-item a:hover {
}
.nav-menu .menu-link {
	padding-top: 45px;
	padding-bottom: 16px;
	padding-left: 12px;
	padding-right: 12px;
	margin: 0;
	font-size: 18px;
	font-weight: 300;
	color: #4F4F4F;
}
.nav-container .nav-menu.menu .menu-item.hide-close {
	display: none;
}
.nav-container .nav-menu.menu .menu-item.end-li {
}
.nav-menu > .menu-item:hover , .nav-menu > .menu-item.is-active  {
	border-bottom: 1px solid #FFFFFF;
}
.drop-link {
	padding-top: 7px;
	padding-right: 30px;
	padding-bottom: 7px;
	padding-left: 30px;
	font-size: 14px;
	color: #4F4F4F;
	text-align: left;
}
.drop-link:hover {
	color: #87C66B;
}
.top-link {
	padding-top: 15px;
	padding-right: 30px;
	padding-bottom: 7px;
	padding-left: 30px;
	font-size: 12px;
	color: #636363;
	background-color: #cddef3;
}
.top-link:hover {
	color: #EC6407;
}
#nav {
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	padding: 0;
}
.drop {
	white-space: nowrap;
}
.logo {
	padding-top: 30px;
}
.nav-menu.menu .menu-item #h {
	background-color: #F7F7F7;
}
}