/* CSS Document */
/* prefix with .navbar or .navbar-default for desktop view nav, followed by ul.nav or ul.navbar-nav */
/* for the floyout menus prefix with .js-offcanvas, followed by ul.nav or ul.navbar-nav */
/*Up to Flyout Menu, plus sort out what is used ex style.css and cull*/

#off-canvas > .navbar-nav {
    margin: -10.5px -20px 0 -10px;
}

.c-offcanvas {
	left: 0;
	padding: 1rem;
	overflow-y: scroll;
	background: #222;
	opacity: 1.0;
}

.js-offcanvas a {
	color: #fff;
	opacity: 1.0;
}

.js-offcanvas .nav > li > a:focus {
	opacity: 1.0;
	background-color: #222;
}

.js-offcanvas .nav > li > span.flyout-only > a {
	text-decoration: none;
}

/* Apply iOS specific styles */
@supports (-webkit-touch-callout: none) {
  .js-offcanvas .nav > li > a:focus {
    background-color: #222;
    outline: none; /* Remove default blue focus outline */
  }
}

.js-offcanvas .nav > li > a:hover {
	color: #fff;
	background-color: #9a1220;
	opacity: 1.0;
}

/* Navbar Styles */
.navbar .nav {
	margin: 0;
	float: left;
	background: #222;
	width: 100%;
	font-size: 13px;
}

/* Hide menu item in desktop view */
.navbar .nav > li > span.flyout-only {
    display: none;
}

.navbar {
	border: 0;
	margin-bottom: 0px;
}

/* remove background colors  */
.navbar-default, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > li > a, .navbar-default .navbar-brand, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
	background-color: transparent;
	border-color: transparent;
	color: #fff;
	outline: 0;
}

.bg-primary1 {
	color: #fff;
	background-color: #222;
	margin-top: 20px;
	margin-bottom: 20px;
}

@media (max-width:767.5px) {
	.bg-primary1 {
		margin-top: -81px;
		height: 81px;
	}

}

@media (max-width:346px) {
	.bg-primary1 {
		margin-top: -70px;
		height: 70px;
		margin-left: -15px;
		margin-right: -15px;
	}
}

.bg-primary1 > .container {
	padding-right: 0;
	padding-left: 0;
	width: auto;
}

.bg-primary1 .navbar > .container-fluid {
	padding-right: 0;
	padding-left: 0;
}

.navbar-collapse,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container > .navbar-header {
	margin-right: 0;
	margin-left: 0;
}

.navbar-collapse {
	padding-right: 0;
	padding-left: 0;
}

.navbar-default .navbar-nav > li {
	border-right: 1px solid #000;
	border-left: 1px solid #444;
}

.navbar .nav > li > a {
	position: relative;
	display: inline-block;
	padding: 0px 10px 0px;
}

.navbar .nav > li.dropdown > a {
	padding: 0 6px 10px 10px;
}

.js-offcanvas .nav > li a {
	display: inline;
}

.js-offcanvas .nav > li.dropdown a.dropdown-toggle,
.js-offcanvas .nav > li.dropdown a.dropdown-togglexx {
	margin-right: 0;
}

.navbar .nav > li > span.caret, .navbar .nav > li > a.dropdown-togglexx {
	float: right;
	padding: 0 5px 10px 1px;
}
.js-offcanvas .nav > li.dropdown {
	position: relative;
}
.js-offcanvas .nav > li.dropdown:hover {
	cursor: pointer;
}
.js-offcanvas .nav li.dropdown .caret {
	position: absolute;
	top: 20px;
	right: 20px;
	color: #fff;
}

.navbar-nav > li > a, .js-offcanvas .nav > li > span.flyout-only > a {
	padding-top: 12px;
    padding-bottom: 12px;
	padding-right: 15px;
	padding-left: 15px;	
}

#off-canvas > ul > li.nav-home > a {
padding-right: 45px;
}

.js-offcanvas .nav > li > span.flyout-only > a {
	border-left: 1px solid #444;
	position: relative;
	left: -4px;

}

.nav-home .navbar-nav > li.nav-home > a,
.nav-flights .navbar-nav > li.nav-flights > a,
.nav-scheduled .navbar-nav li.nav-scheduled > a,
.nav-scenic .navbar-nav li.nav-scenic > a,
.nav-charter .navbar-nav li.nav-charter > a,
.nav-shuttles .navbar-nav > li.nav-shuttles > a,
.nav-rentalcars .navbar-nav > li.nav-rentalcars > a,
.nav-heaphy .navbar-nav > li.nav-heaphy > a,
.nav-heaphywalk .navbar-nav li.nav-heaphywalk > a,
.nav-heaphybike .navbar-nav li.nav-heaphybike > a,
.nav-heaphyfaqs .navbar-nav li.nav-heaphyfaqs > a,
.nav-abeltasman .navbar-nav > li.nav-abeltasman > a,
.nav-abelwalk .navbar-nav li.nav-abelwalk > a,
.nav-abelpackages .navbar-nav li.nav-abelpackages > a,
.nav-abelfaqs .navbar-nav li.nav-abelfaqs > a,
.nav-heaphyfaqs .navbar-nav li.nav-heaphyfaqs > a,
.nav-goldenbay .navbar-nav > li.nav-goldenbay > a,
.nav-info .navbar-nav > li.nav-info > a,
.nav-passengerinfo .navbar-nav li.nav-passengerinfo > a,
.nav-terms .navbar-nav li.nav-terms > a,
.nav-enviro .navbar-nav li.nav-enviro > a,
.nav-aboutus .navbar-nav li.nav-aboutus > a,
.nav-deals .navbar-nav li.nav-deals > a,
.nav-blog .navbar-nav li.nav-blog > a {
	color: #fff;
	background-color: #9a1220;
	opacity: 0.7;	
}


.nav-home .navbar-nav > li.nav-home > a:focus,
.nav-home .navbar-nav > li.nav-home > a:hover,

.js-offcanvas .nav > li > span.flyout-only > a:hover,

.nav-flights .navbar-nav > li.nav-flights > a:focus,
.nav-flights .navbar-nav > li.nav-flights > a:hover,
.nav-scheduled .navbar-nav li.nav-scheduled > a:focus,
.nav-scheduled .navbar-nav li.nav-scheduled > a:hover,
.nav-scenic .navbar-nav li.nav-scenic > a:focus,
.nav-scenic .navbar-nav li.nav-scenic > a:hover,
.nav-charter .navbar-nav li.nav-charter > a:focus,
.nav-charter .navbar-nav li.nav-charter > a:hover,
.nav-shuttles .navbar-nav > li.nav-shuttles > a:focus,
.nav-shuttles .navbar-nav > li.nav-shuttles > a:hover,
.nav-rentalcars .navbar-nav > li.nav-rentalcars > a:focus,
.nav-rentalcars .navbar-nav > li.nav-rentalcars > a:hover,
.nav-heaphy .navbar-nav > li.nav-heaphy > a:focus,
.nav-heaphy .navbar-nav > li.nav-heaphy > a:hover,
.nav-heaphywalk .navbar-nav li.nav-heaphywalk > a:focus,
.nav-heaphywalk .navbar-nav li.nav-heaphywalk > a:hover,
.nav-heaphybike .navbar-nav li.nav-heaphybike > a:focus,
.nav-heaphybike .navbar-nav li.nav-heaphybike > a:hover,
.nav-heaphyfaqs .navbar-nav li.nav-heaphyfaqs > a:focus,
.nav-heaphyfaqs .navbar-nav li.nav-heaphyfaqs > a:hover,
.nav-abeltasman .navbar-nav > li.nav-abeltasman > a:focus,
.nav-abeltasman .navbar-nav > li.nav-abeltasman > a:hover,
.nav-abelwalk .navbar-nav li.nav-abelwalk > a:focus,
.nav-abelwalk .navbar-nav li.nav-abelwalk > a:hover,
.nav-abelpackages .navbar-nav li.nav-abelpackages > a:focus,
.nav-abelpackages .navbar-nav li.nav-abelpackages > a:hover,
.nav-abelfaqs .navbar-nav li.nav-abelfaqs > a:focus,
.nav-abelfaqs .navbar-nav li.nav-abelfaqs > a:hover,
.nav-goldenbay .navbar-nav > li.nav-goldenbay > a:focus,
.nav-goldenbay .navbar-nav > li.nav-goldenbay > a:hover,
.nav-info .navbar-nav > li.nav-info > a:focus,
.nav-info .navbar-nav > li.nav-info > a:hover,
.nav-passengerinfo .navbar-nav li.nav-passengerinfo > a:focus,
.nav-passengerinfo .navbar-nav li.nav-passengerinfo > a:hover,
.nav-terms .navbar-nav li.nav-terms > a:focus,
.nav-terms .navbar-nav li.nav-terms > a:hover,
.nav-enviro .navbar-nav li.nav-enviro > a:focus,
.nav-enviro .navbar-nav li.nav-enviro > a:hover,
.nav-aboutus .navbar-nav li.nav-aboutus > a:focus,
.nav-aboutus .navbar-nav li.nav-aboutus > a:hover,
.nav-deals .navbar-nav li.nav-deals > a:focus,
.nav-deals .navbar-nav li.nav-deals > a:hover,
.nav-blog .navbar-nav li.nav-blog > a:focus,
.nav-blog .navbar-nav li.nav-blog > a:hover {
	color: #fff;
	background-color: #9a1220;
	opacity: 1.0;
}

li.dropdown ul.dropdown-menu {
	color: #fff;
	background-color: #222;
	position: absolute;
}

/* ----- Flyout menu ----- */
.js-offcanvas .dropdown-menu > li > a {
	border-top: none;
	border-bottom: none;
}

.js-offcanvas ul.nav li {
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 10px 0;
}
.js-offcanvas ul.nav li:first-child {
	border-top: none
}
.js-offcanvas ul.nav li:last-child {
	border-bottom: none;
}

.js-offcanvas ul.nav li li {
	border: none;
	padding: 10px 15px 10px 15px;
}

/*space above first submenu flyout item */
.js-offcanvas ul.nav li.dropdown ul.dropdown-menu {
	border-top: none;
	background-color: #222;
	padding-top: 15px; 
}
.js-offcanvas ul.dropdown-menu {
	margin-top: 0px !important;
}
.js-offcanvas .caret {
	margin-left: 0;
	margin-left: -3px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
	background-color: none
}
.navbar-default .navbar-toggle .icon-bar {
	background-color: #fff;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

/*Animated hamburger*/
div.navbar-header > button {
	border-color: transparent;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
	top: 1px;
}
.navbar-toggle .icon-bar:nth-of-type(4) {
	top: 2px;
}
.navbar-toggle .icon-bar:nth-of-type(2) {}
.navbar-toggle .icon-bar {
	position: relative;
}
.navbar-toggle.is-active .icon-bar:nth-of-type(2) {
	top: 6px;
	transform: rotate(45deg);
	width: 23px;
}
.navbar-toggle.is-active .icon-bar:nth-of-type(4) {
	top: -6px;
	transform: rotate(-45deg);
	width: 23px;
}
.navbar-toggle.is-active .icon-bar:nth-of-type(3) {
	background-color: transparent;
}


/* rotate caret RM */
.js-offcanvas .nav li.dropdown.open .caret {
	transform: rotate(-180deg);
}
/* Getting lower level dropdowns to work */
.openopen > .dropdown-menu {
	display: block;
}
.js-offcanvas li.dropdown a.dropdown-togglexx {
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px 8px 10px 6px;
    height: 42.5px;
	background-color: #222;
}

/* nav element colours and background colours */
.navbar-default .navbar-nav li > a:focus,
.navbar-default .navbar-nav li > a:hover,
.navbar-default .navbar-nav li:focus,
.navbar-default .navbar-nav li:hover,
.navbar-default .navbar-nav li.active > a {
	color: #fff;
	background-color: #9a1220;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:active {
  color: #fff;
  background-color: #9a1220;
}




.navbar .nav .dropdown-toggle .caret {
	margin-top: 0;
}
/*Top level menu items*/
.navbar .nav > li > a, .navbar .nav > li > a:focus, .navbar .nav > li > a:hover {
	display: inline-block;
	color: #fff;
	height: 50px;
	line-height: 50px;
}

/* dropdown (submenus)*/
.dropdown-menu > li > a {
	color: #fff;
	border-top: 1px solid #444;
    border-bottom: 1px solid #000;
	background-color: #222;
	padding: 10px 20px;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
	color: #fff;
	background-color: #9a1220;
}
#off-canvas > ul > li > ul > li > a {
	border: none;
}
.dropdown-menu {
	padding: 0px;
	margin-left: -1px;
	margin-top: 0px;
}
.dropdown-menu li:last-child a {
	border-bottom: 0;
}