/*
  ==========================
  colours
  ==========================
*/
/*
  ==========================
  general page structure
  ==========================
*/
/* page boundary */
/* ------------- */
.wrapper {
  padding: 0 20px;
}
/*
  ==========================
  header
  ==========================
*/
#page-head {
  min-width: 320px;
}
#page-head > .wrapper {
  display: table;
  table-layout: fixed;
  height: 120px;
}
#page-head > .wrapper > * {
  display: table-cell;
  vertical-align: middle;
}
/* logo */
/* ---- */
#logo {
  width: auto;
  padding: 0 20px;
}
#logo a {
  width: 180px;
  height: 93px;
}
/* page head search */
/* ---------------- */
#page-head-search {
  position: static;
  overflow: visible;
  width: 1%;
  height: auto;
  padding: 0 20px;
  text-align: right;
}
#page-head-search > a,
#page-head-search .inner button {
  position: static;
  z-index: 1;
}
#page-head-search > a {
  width: auto;
  height: auto;
  padding: 4px 0;
  overflow: visible;
  color: #003f85;
  background-color: transparent;
  line-height: 1;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -ms-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
#page-head-search > a:hover,
#page-head-search > a:focus {
  color: #1894d3;
}
#page-head-search > a:before {
  font-size: 30px;
}
#page-head.alt #page-head-search > a {
  color: #ffffff;
}
#page-head.alt #page-head-search > a:hover,
#page-head.alt #page-head-search > a:focus {
  color: #1894d3;
}
#page-head-search > .inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  min-width: 320px;
  overflow: auto;
  background-color: rgba(228, 229, 230, 0.94);
  text-align: left;
  -webkit-transform: translate3d(0, -101%, 0);
  -moz-transform: translate3d(0, -101%, 0);
  -ms-transform: translate3d(0, -101%, 0);
  -o-transform: translate3d(0, -101%, 0);
  transform: translate3d(0, -101%, 0);
  -webkit-transition: -webkit-transform 0.3s 0.2s;
  -moz-transition: -moz-transform 0.3s 0.2s;
  -ms-transition: -ms-transform 0.3s 0.2s;
  -o-transition: -o-transform 0.3s 0.2s;
  transition: transform 0.3s 0.2s;
}
#page-head-search > .inner form {
  padding: 36px 20px;
  height: 120px;
  background-color: #003066;
}
#page-head-search .inner input {
  width: auto;
  height: auto;
  margin-right: 0;
  border: solid 1px #e4e5e6;
  border-radius: 5px;
}
#page-head-search .inner input:focus {
  border-color: #969da3;
}
#page-head-search .inner input,
#close-search {
  display: inline-block;
  width: 88%;
  padding: 8px 6px;
  vertical-align: middle;
}
#page-head-search .inner button {
  display: none;
}
#close-search {
  width: 11%;
  text-align: center;
}
#close-search > a {
  font-family: vaudregular;
  color: #ffffff;
  text-decoration: none;
}
#close-search > a:hover,
#close-search > a:focus {
  background-color: transparent;
}
/* toggle state */
/* ------------ */
.page-search-active #page-head-search > a {
  opacity: 1;
}
/*
  ==========================
  primary navigation
  ==========================
*/
#primary-nav-holder {
  width: 1%;
  padding: 0 20px;
}
/* primary nav toggle element */
/* -------------------------- */
#primary-nav-toggle {
  display: block;
  margin: 0;
  padding: 0 0 3px 0;
  width: auto;
  height: auto;
  line-height: 1.5;
  background: none;
}
#primary-nav-toggle .lines {
  position: relative;
  vertical-align: middle;
  -webkit-transition: background-color 0.3s ease;
  -moz-transition: background-color 0.3s ease;
  -ms-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
#primary-nav-toggle .lines,
#primary-nav-toggle .lines:before,
#primary-nav-toggle .lines:after {
  display: inline-block;
  width: 30px;
  height: 4px;
  border-radius: 1.5px;
  background-color: #003f85;
  transform-origin: 50% 50%;
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  -moz-transform: rotate3d(0, 0, 1, 0deg);
  -ms-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
#page-head.alt #primary-nav-toggle .lines,
#page-head.alt #primary-nav-toggle .lines:before,
#page-head.alt #primary-nav-toggle .lines:after {
  background-color: #ffffff;
}
#primary-nav-toggle .lines:before,
#primary-nav-toggle .lines:after {
  position: absolute;
  left: 0;
  content: '';
}
#primary-nav-toggle .lines:before {
  top: -8px;
  -webkit-transition: top 0.3s ease 0.3s, -webkit-transform 0.3s ease 0s, background-color 0.3s ease;
  -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease 0s, background-color 0.3s ease;
  -ms-transition: top 0.3s ease 0.3s, -ms-transform 0.3s ease 0s, background-color 0.3s ease;
  transition: top 0.3s ease 0.3s, transform 0.3s ease 0s, background-color 0.3s ease;
}
#primary-nav-toggle .lines:after {
  bottom: -8px;
  -webkit-transition: bottom 0.3s ease 0.3s, -webkit-transform 0.3s ease 0s, background-color 0.3s ease;
  -moz-transition: bottom 0.3s ease 0.3s, -moz-transform 0.3s ease 0s, background-color 0.3s ease;
  -ms-transition: bottom 0.3s ease 0.3s, -ms-transform 0.3s ease 0s, background-color 0.3s ease;
  transition: bottom 0.3s ease 0.3s, transform 0.3s ease 0s, background-color 0.3s ease;
}
.primary-nav-active #primary-nav-toggle .lines,
.primary-nav-active #primary-nav-toggle:hover .lines,
.primary-nav-active #primary-nav-toggle:focus .lines {
  background-color: transparent !important;
}
.primary-nav-active #primary-nav-toggle .lines:before {
  top: 0;
  background-color: #003f85;
  -webkit-transition: top 0.3s ease 0s, -webkit-transform 0.3s ease 0.3s, background-color 0.3s ease;
  -moz-transition: top 0.3s ease 0s, -moz-transform 0.3s ease 0.3s, background-color 0.3s ease;
  -ms-transition: top 0.3s ease 0s, -ms-transform 0.3s ease 0.3s, background-color 0.3s ease;
  transition: top 0.3s ease 0s, transform 0.3s ease 0.3s, background-color 0.3s ease;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  -moz-transform: rotate3d(0, 0, 1, 45deg);
  -ms-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
}
.primary-nav-active #primary-nav-toggle .lines:after {
  bottom: 0;
  background-color: #003f85;
  -webkit-transition: bottom 0.3s ease 0s, -webkit-transform 0.3s ease 0.3s, background-color 0.3s ease;
  -moz-transition: bottom 0.3s ease 0s, -moz-transform 0.3s ease 0.3s, background-color 0.3s ease;
  -ms-transition: bottom 0.3s ease 0s, -ms-transform 0.3s ease 0.3s, background-color 0.3s ease;
  transition: bottom 0.3s ease 0s, transform 0.3s ease 0.3s, background-color 0.3s ease;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  -moz-transform: rotate3d(0, 0, 1, -45deg);
  -ms-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
}
#primary-nav-toggle:hover .lines,
#primary-nav-toggle:focus .lines,
#primary-nav-toggle:hover .lines:before,
#primary-nav-toggle:focus .lines:before,
#primary-nav-toggle:hover .lines:after,
#primary-nav-toggle:focus .lines:after,
#page-head.alt #primary-nav-toggle:hover .lines,
#page-head.alt #primary-nav-toggle:focus .lines,
#page-head.alt #primary-nav-toggle:hover .lines:before,
#page-head.alt #primary-nav-toggle:focus .lines:before,
#page-head.alt #primary-nav-toggle:hover .lines:after,
#page-head.alt #primary-nav-toggle:focus .lines:after {
  background-color: #1894d3;
}
/* core styles and layout */
/* ---------------------- */
#primary-nav-holder nav {
  position: fixed;
  top: 120px;
  bottom: auto;
  left: 0;
  right: 0;
  max-height: calc(100% - 120px);
  height: auto;
  overflow: auto;
  background-color: #e4e5e6;
  line-height: 1.2 !important;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(-101%, 0, 0);
  -moz-transform: translate3d(-101%, 0, 0);
  -ms-transform: translate3d(-101%, 0, 0);
  -o-transform: translate3d(-101%, 0, 0);
  transform: translate3d(-101%, 0, 0);
  -webkit-transition: transform 0.2s;
  -moz-transition: transform 0.2s;
  -ms-transition: transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
}
#primary-nav-holder nav a {
  color: #003f85;
}
.primary-nav-active #primary-nav-holder nav {
  -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);
}
#primary-nav-top-level a {
  color: #003f85;
}
/* top tier of navigation */
/* ---------------------- */
#primary-nav-top-level > li {
  position: static;
  display: block;
  margin-left: 0;
}
#primary-nav-top-level > li > .inner > a.level-toggle {
  display: table-cell;
}
#primary-nav-top-level > li > .inner > a:first-child {
  display: table-cell;
  height: auto;
  padding: 0;
}
#page-head.alt #primary-nav-top-level > li > .inner > a:first-child,
#primary-nav-top-level > li.active > .inner > a:first-child {
  background-color: transparent;
  color: #003f85;
}
#primary-nav-top-level > li.parent > .inner > a:first-child:after {
  display: none;
  content: none;
}
/* all nav levels */
/* -------------- */
#primary-nav-top-level ul {
  margin-top: 0 !important;
}
#primary-nav-top-level ul li + li {
  margin-top: 0;
}
#primary-nav-top-level li > .inner > * {
  height: 23px;
}
#primary-nav-top-level li > .inner > *:first-child {
  padding: 10px 34px 10px 10px !important;
}
#primary-nav-top-level li.parent > .inner > *:first-child {
  padding: 10px !important;
}
#primary-nav-top-level li > .inner > a.level-toggle {
  padding: 10px 10px 0 10px !important;
  text-align: center;
}
/* desktop dropdowns */
/* ----------------- */
#primary-nav-top-level > li ul {
  position: relative;
  opacity: 0;
  visibility: hidden;
  left: -99999em;
  max-height: 0;
  line-height: 1.14;
  -webkit-transition: all 0s 0.3s, opacity 0.3s 0s;
  -moz-transition: all 0s 0.3s, opacity 0.3s 0s;
  -ms-transition: all 0s 0.3s, opacity 0.3s 0s;
  -o-transition: all 0s 0.3s, opacity 0.3s 0s;
  transition: all 0s 0.3s, opacity 0.3s 0s;
}
#primary-nav-top-level li.active > ul {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  left: 0;
  max-height: 9999em;
  -webkit-transition: all 0s 0s, opacity 0.3s 0s;
  -moz-transition: all 0s 0s, opacity 0.3s 0s;
  -ms-transition: all 0s 0s, opacity 0.3s 0s;
  -o-transition: all 0s 0s, opacity 0.3s 0s;
  transition: all 0s 0s, opacity 0.3s 0s;
}
#primary-nav-top-level > li > ul {
  position: relative;
  top: 0;
  width: auto;
  padding: 0;
  margin: 0;
  background-color: #f7f8f8;
}
/* lower levels */
/* ------------ */
#primary-nav-top-level li.active > ul {
  padding-left: 12px;
}
/* hidden levels - level 4 and deeper - show for tablet/phone */
#primary-nav-top-level > li > ul > li > ul > li > .inner > a.level-toggle {
  display: table-cell;
}
#primary-nav-top-level > li > ul > li > ul > li > ul {
  position: relative;
  z-index: 1;
}
/*
  ==========================
  main body
  ==========================
*/
#main-page-area {
  margin-top: 120px;
  margin-bottom: 40px;
}
/* layout of main page */
/* ------------------- */
#main-page-area > .inner {
  padding-top: 20px;
}
#secondary-nav {
  display: none;
}
#main-page-area > .inner > main {
  float: none;
  width: auto;
}
/*
  ===============================================================================
  TYPOGRAPHY
  ===============================================================================
*/
/*
  ==========================
  page intro section
  ==========================
*/
#page-intro {
  min-height: 350px;
  padding: 40px 0;
}
#page-intro .image-holder {
  left: 63%;
}
#page-intro > .wrapper > .inner {
  width: 65%;
}
/*
  ==========================
  side column icon
  ==========================
*/
.side-icon {
  display: none;
}
/*
  ===============================================================================
  PAGE TYPE SPECIFIC STYLES / OVERRIDES
  ===============================================================================
*/
/*
  ==========================
  home page
  ==========================
*/
/* promo tiles */
/* ----------- */
.promo-tiles-wrapper > article {
  padding: 20px;
  font-size: 16px;
  float: none;
  width: 100%;
}
.promo-tiles-wrapper > article h3 {
  font-size: 18px;
}
/*
  ==========================
  footer
  ==========================
*/
#page-foot > .lower .nz-govt-logo {
  display: block;
  text-align: center;
  margin-top: 10px;
}