/* This file will hold styles for the mobile version of your website (mobile first). */
/* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
.global-navigation .content .menu, .global-navigation .content .menu > li, .region-footer-first .links-nsc .menu,
.region-footer-first .block-menu .menu, .region-footer-first .links-nsc .menu li,
.region-footer-first .block-menu .menu li, .secondary-menu ul.menu li, ul.social, .view-content .item-list li, .view-content .item-list ul, .image-search .views-exposed-form .views-exposed-widgets, .image-search .views-exposed-form .views-exposed-widget, .image-search .views-exposed-form .views-submit-button .form-submit, .media-gallery-media .media-gallery-item p {
  padding: 0;
  margin: 0;
}

.copyright-block .niwa-logo,
.region-footer-second .niwa-logo {
  display: block;
  width: 250px;
  height: 63px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../images/sprite@2x/niwa-logo.png');
}

ul.bulleted li, .view .node-publication ul li.collapsed, .view .node-publication ul li.expanded, .view .node-publication ul li.leaf, .view .node-publication li, .field-type-text-long ul li,
.field-name-body ul li, .panel-panel .pane-content .content ul li, .view-mode-3_column_pane ul li,
.node-teaser ul li, .user-profile .field ul li {
  list-style: disc;
  margin: 0;
}

.pane-menu-children-menu-child-links:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.pane-node-body.with-bg_image_formatter .field-name-body {
  font-family: "Sentinel SSm A", "Sentinel SSm B", georgia, "times new roman", times, serif;
  font-weight: 700;
  font-style: normal;
  text-rendering: optimizeLegibility;
}

.node-news.view-mode-news_no_image, .node-news.view-mode-short_teaser, .rainbow-featured.panel-pane .field-name-body {
  padding-bottom: 1em !important;
  /* !important to override panel.css */
  border-bottom: 1px dashed black;
  margin-bottom: 1em !important;
  /* !important to override panel.css */
}

@font-face {
  font-family: 'symbols';
  src: url("../fonts/WebSymbolsLiga/websymbolsligaregular.eot");
  src: url("../fonts/WebSymbolsLiga/websymbolsligaregular.eot?#iefix") format("embedded-opentype"), url("../fonts/WebSymbolsLiga/websymbolsligaregular.woff") format("woff"), url("../fonts/WebSymbolsLiga/websymbolsligaregular.ttf") format("truetype"), url("../fonts/WebSymbolsLiga/websymbolsligaregular.svg#WebSymbolsRegular") format("svg");
}
/*
@font-face{ 
	font-family: 'Arbutus';
		src: url('../fonts/arbutus_slab/arbutusslab-regular-webfont.eot');
		src: url('../fonts/arbutus_slab/arbutusslab-regular-webfont.eot?#iefix') format('embedded-opentype'),
			url('../fonts/arbutus_slab/arbutusslab-regular-webfont.woff') format('woff'),
			url('../fonts/arbutus_slab/arbutusslab-regular-webfont.ttf') format('truetype'),
			url('../fonts/arbutus_slab/arbutusslab-regular-webfont.svg#Arbutus') format('svg');
}


@font-face{ 
	font-family: 'Tex';
		src: url('../fonts/tex-gyre-heros/regular/texgyreheros-regular-webfont.eot');
		src: url('../fonts/tex-gyre-heros/regular/texgyreheros-regular-webfont.eot?#iefix') format('embedded-opentype'),
			url('../fonts/tex-gyre-heros/regular/texgyreheros-regular-webfont.woff') format('woff'),
			url('../fonts/tex-gyre-heros/regular/texgyreheros-regular-webfont.ttf') format('truetype'),
			url('../fonts/tex-gyre-heros/regular/texgyreheros-regular-webfont.svg#Tex') format('svg');

    font-weight:normal;
    font-style: normal;
}

@font-face{ 
	font-family: 'Tex';
		src: url('../fonts/tex-gyre-heros/bold/texgyreheros-bold-webfont.eot');
		src: url('../fonts/tex-gyre-heros/bold/texgyreheros-bold-webfont.eot?#iefix') format('embedded-opentype'),
			url('../fonts/tex-gyre-heros/bold/texgyreheros-bold-webfont.woff') format('woff'),
			url('../fonts/tex-gyre-heros/bold/texgyreheros-bold-webfont.ttf') format('truetype'),
			url('../fonts/tex-gyre-heros/bold/texgyreheros-bold-webfont.svg#Tex') format('svg');

    font-weight:500;
    font-style: normal;
}

@font-face{ 
	font-family: 'Tex';
		src: url('../fonts/tex-gyre-heros/italic/texgyreheros-italic-webfont.eot');
		src: url('../fonts/tex-gyre-heros/italic/texgyreheros-italic-webfont.eot?#iefix') format('embedded-opentype'),
			url('../fonts/tex-gyre-heros/italic/texgyreheros-italic-webfont.woff') format('woff'),
			url('../fonts/tex-gyre-heros/italic/texgyreheros-italic-webfont.ttf') format('truetype'),
			url('../fonts/tex-gyre-heros/italic/texgyreheros-italic-webfont.svg#Tex') format('svg');

    font-weight:normal;
    font-style: italic;
}

@font-face{ 
	font-family: 'Tex';
		src: url('../fonts/tex-gyre-heros/bolditalic/texgyreheros-bolditalic-webfont.eot');
		src: url('../fonts/tex-gyre-heros/bolditalic/texgyreheros-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
			url('../fonts/tex-gyre-heros/bolditalic/texgyreheros-bolditalic-webfont.woff') format('woff'),
			url('../fonts/tex-gyre-heros/bolditalic/texgyreheros-bolditalic-webfont.ttf') format('truetype'),
			url('../fonts/tex-gyre-heros/bolditalic/texgyreheros-bolditalic-webfont.svg#Tex') format('svg');

    font-weight:bold;
    font-style: italic;
}*/
.icons-sprite, .icons-bullet_triangle, .icons-email, .icons-facebook, .icons-google, .icons-linkedin, .icons-message-24-error, .icons-message-24-help, .icons-message-24-info, .icons-message-24-ok, .icons-message-24-warning, .icons-placeholder, .icons-rss, .icons-search, .icons-twitter {
  background-image: url('../images/icons-s1a91d84ab2.png');
  background-repeat: no-repeat;
}

.icons-bullet_triangle {
  background-position: 0 0;
}

.icons-email {
  background-position: 0 -9px;
}

.icons-facebook {
  background-position: 0 -41px;
}

.icons-google {
  background-position: 0 -76px;
}

.icons-linkedin {
  background-position: 0 -108px;
}

.icons-message-24-error {
  background-position: 0 -140px;
}

.icons-message-24-help {
  background-position: 0 -164px;
}

.icons-message-24-info {
  background-position: 0 -188px;
}

.icons-message-24-ok {
  background-position: 0 -212px;
}

.icons-message-24-warning {
  background-position: 0 -236px;
}

.icons-placeholder {
  background-position: 0 -260px;
}

.icons-rss {
  background-position: 0 -285px;
}

.icons-search {
  background-position: 0 -320px;
}

.icons-twitter {
  background-position: 0 -345px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

html {
  background: #fff;
  color: #000;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

body {
  margin: 0;
}

a {
  background: transparent;
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

q:before,
q:after {
  content: '';
  content: none;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
  white-space: normal;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul li.leaf,
ul li.expanded,
ul li.collapsed {
  list-style-image: none;
  list-style-type: none;
}

.form-submit, input[type=submit] {
  text-shadow: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  border: none;
  background: none;
}

/* 20180621 - NIWA - import Roboto fonts, use 400 for normal, 700 for bold */
/* NIWA rebrand - color changes
* global navigation, prominent borders #003366, darkest blue present in new logo
* #42b5c3 becomes #006699
* in-page links, button outline and text, blockquote left-margin #0078BC - to improve legibility when inline with very dark grey body text
* in-page link hovers: #006699
* button hover swap white with background color #0078BC - the lightest blue present in new logo
*/
body {
  font-size: 15px;
  line-height: 23px;
  color: #666;
}

#skip {
  display: none;
}

h1, h2 {
  /*NIWA rebrand has us remove this SCSS class but keep a couple of the
  styles... @extend %sentinel; */
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-weight: 700;
  color: #111;
}

h3, h4, h5, h6 {
  font-weight: normal;
}

h1.title {
  font-size: 30px;
  line-height: 35px;
  margin: 0 0 30px 0;
  padding: 18px 0 18px 0;
  border-bottom: solid 1px #111;
  border-top: 3px solid #111;
  letter-spacing: -0.04em;
}

h2 {
  font-size: 20px;
  line-height: 26px;
  margin: 20px 0 10px 0;
}

h3 {
  font-size: 20px;
  line-height: 22px;
  font-weight: 600;
  margin: 20px 0 12px 0;
}

h4 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  margin: 1.4em 0 .4em 0;
}

.region-content h2, .region-content h3, .region-content h4 {
  color: #222;
  font-weight: bold;
}
.region-content h2 {
  font-size: 22px;
}
.region-content h3 {
  font-size: 15px;
}
.region-content h4 {
  font-size: 15px;
  font-style: italic;
}

a {
  color: #0078BC;
  text-decoration: none;
  /* @see anti_accessibility */
  /*
  border-bottom: 1px solid $transparentblue;
  */
}
a:hover {
  color: #006699;
}
a:active, a:selected, a:visited {
  border: none;
  outline: none;
}
a:focus {
  background-color: transparent;
  outline: none;
  color: black;
}

.view-homepage-news-panes h2 a {
  color: #0078BC;
}
.view-homepage-news-panes h2 a:hover {
  color: #0078BC;
}

b, strong, label {
  font-weight: bold;
}

b, strong {
  font-weight: bold;
}

p, ul, ol {
  font-size: 15px;
  line-height: 23px;
  margin: 0 0 12px 0;
}

p.intro {
  /*NIWA rebrand has us remove this SCSS class but keep a couple of the
    styles... @extend %sentinel; */
  text-rendering: optimizeLegibility;
  font-weight: normal;
  color: #111;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.04em;
}

p.cleared {
  clear: both;
}

ul.menu {
  margin-left: 10px;
}
ul.menu li {
  margin-left: 10px;
}

.node-teaser p.intro,
.view-mode-teaser p.intro,
.view-mode-gallery_teaser p.intro,
.view-mode-3_column_pane p.intro {
  font-size: 15px;
  line-height: 23px;
  margin: 0 0 12px 0;
  font-weight: bold;
  color: #666;
  letter-spacing: normal;
}

ol {
  list-style: decimal;
  padding-left: 25px;
}

ul {
  margin-left: 2rem;
  list-style: disc;
}

input:focus, textarea:focus {
  outline: none;
  box-shadow: none;
}

.blur {
  color: #666 !important;
  font-weight: bold;
}

.field .field-label {
  font-weight: bold;
}

.site-name {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  margin: 0;
}
.site-name > a {
  background-image: none;
  background-size: cover !important;
  margin: 20px auto;
  display: none;
}
.custom-banner .site-name > a {
  background-image: url('../images/sprite@1x-s5fea3c5b15.png');
  background-position: 0 -100px;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
  height: 63px;
  width: 252px;
  background-image: none;
  display: none;
  position: relative;
  z-index: 100;
}
@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
  .custom-banner .site-name > a {
    background-image: url('../images/sprite@2x-sd9ec00c1d1.png');
    background-size: 252px 234px;
    background-position: 0 -108px;
    height: 63px;
    width: 252px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
  .site-name > a {
    background-image: none;
    background-size: 252px 234px;
    background-position: 0 0;
    height: 47.5px;
    width: 200px;
  }

  .custom-banner .site-name > a {
    background-image: none;
  }
}
.strapline h1 {
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  margin: 0;
  display: block;
  text-align: center;
}
.strapline span {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.4) !important;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 2px;
  padding: 6px 12px;
}

/* CSS FROM NIWA - take care of placement and alignment of logo image */
.logo-img {
  text-align: center;
  padding-top: 30px;
}

.logo-img img {
  width: 250px;
}

.section-header {
  margin-bottom: 40px;
}
.section-header .zone-branding-wrapper {
  background: url(/sites/niwa.co.nz/files/niwa-header-water-ripple.jpg);
  background-position: center;
  height: 150px;
}
.section-header .zone-menu-wrapper {
  background-color: #ececec;
}
.section-header .aux-menu {
  margin-top: 20px;
  display: none;
}
.section-header .aux-menu .menu {
  padding: 0;
  font-size: 11px;
}
.section-header .aux-menu .menu li {
  display: inline;
}
.section-header .aux-menu .menu li a {
  color: #333;
  border-bottom: 1px solid #333;
}
.section-header .aux-menu .menu li a:hover, .section-header .aux-menu .menu li a:focus {
  color: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.4);
}

.page-node-113017 .section-header .zone-branding-wrapper, .page-taxonomy-term-1039 .section-header .zone-branding-wrapper {
  background-image: url(/sites/niwa.co.nz/files/climate-change-banner-clouds_DSC_3961_credit_dave_allen_NIWA-crop.jpg) !important;
  height: 350px;
  overflow: hidden;
}

.block-sci-centre-descr-block,
.block-term-summary-block {
  display: block;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 15px 0 15px;
  margin-left: 0;
  margin-top: 30px;
}

.block-sci-centre-descr-block h1, .block-sci-centre-descr-block p,
.block-term-summary-block h1, .block-term-summary-block p {
  color: #FFFFFF;
}

.block-sci-centre-descr-block h1.page-title, .block-term-summary-block h1.page-title {
  line-height: 1em;
  font-size: 26px;
}

/* don't display page title or body field on panel pages that have a custom banner - these are displayed in a view block */
.custom-banner-header #page-title {
  display: none;
}

.custom-banner-header .pane-node-body .field-name-body {
  display: none;
}

/* look after header with custom banner image mobile-first */
.section-header .zone-branding-wrapper.custom-banner {
  background-size: cover;
  overflow: hidden;
  height: 350px;
}

.front .section-header .zone-branding-wrapper.custom-banner {
  height: 200px;
  overflow: hidden;
}

.mobile-menu-trigger {
  display: inline-block;
  vertical-align: top;
  width: 49%;
}
.mobile-menu-trigger, .mobile-menu-trigger * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.mobile-menu-trigger .content {
  font-weight: bold;
  font-size: 14px;
  text-align: right;
}
.mobile-menu-trigger .content a, .mobile-menu-trigger .content span {
  color: #999;
  display: inline-block;
  vertical-align: middle;
  padding-top: 10px;
  padding-bottom: 10px;
}
.mobile-menu-trigger .content span {
  text-overflow: hidden;
  overflow: hidden;
}
.mobile-menu-trigger .content > a {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  color: transparent;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/burger_menu.png");
  background-size: 11px 11px;
  -moz-transition: background-color 0.15s ease;
  -o-transition: background-color 0.15s ease;
  -webkit-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
}
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
  .mobile-menu-trigger .content > a {
    background-image: url("../images/burger_menu@2x.png");
    background-size: 11px 11px;
  }
}
.mobile-menu-trigger .content > a.is-open {
  background-image: url("../images/close.png");
  background-size: 11px 11px;
}
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
  .mobile-menu-trigger .content > a.is-open {
    background-image: url("../images/close@2x.png");
    background-size: 11px 11px;
  }
}
.mobile-menu-trigger .content > a + span {
  margin-left: 5px;
}

/*.section-header .zone-branding-wrapper {
  @include background(linear-gradient(left, $blue, $lime));
  background-position: center ;
  background-repeat: repeat-x;
  background-color: $blue;
}*/
.region-menu.grid-12 {
  margin: 0;
}

/* Global navigation */
.global-navigation, .global-navigation * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.global-navigation .content .menu {
  -moz-transition: max-height 0.3s ease;
  -o-transition: max-height 0.3s ease;
  -webkit-transition: max-height 0.3s ease;
  transition: max-height 0.3s ease;
  max-height: 0;
  overflow: hidden;
}
.global-navigation .content .menu > li > a.active-trail.active {
  color: #FFFFFF !important;
  background-color: #006699 !important;
}
.global-navigation .content .menu > li > a.active + .menu,
.global-navigation .content .menu > li > a.active-trail + .menu {
  max-height: 100vh;
}
.global-navigation .content .menu > li a {
  font-weight: bold;
  display: block;
  padding: 6px 10px;
  font-size: 15px;
}
.global-navigation .content .menu > li .menu {
  background: #0078BC;
}
.global-navigation .content .menu > li .menu .menu {
  border-top: 1px rgba(255, 255, 255, 0.4) solid;
  border-bottom: 1px rgba(255, 255, 255, 0.4) solid;
}
.global-navigation .content .menu > li .menu .menu a {
  font-size: 12px;
}
.global-navigation .content .menu > li .menu .menu a:before {
  content: "\2013";
  margin-right: .5em;
}
.global-navigation .content .menu > li .menu .menu .menu a:before {
  content: "\2013\2013";
}
.global-navigation .content .menu > li .menu .menu .menu .menu a:before {
  content: "\2013\2013\2013";
}
.global-navigation .content .menu > li .menu > li > a {
  color: white;
}
.global-navigation .content > .menu > li > a {
  color: #888;
}
.global-navigation .content > .menu > li > a.active-trail, .global-navigation .content > .menu > li > a.active, .global-navigation .content > .menu > li > a:hover, .global-navigation .content > .menu > li > a:focus {
  color: #FFFFFF;
  background-color: #003366 !important;
}
.global-navigation.is-open .content > .menu {
  max-height: 100vh;
}

.global-navigation .content > .menu > li .menu {
  background-color: #003366;
}

.global-navigation .content .menu > li .menu a.active:before {
  content: '\25b8';
  margin-right: 5px;
}

/*
 *  20180621 Changes form NIWA for rebrand - changes to Roboto, 400, 700 weight
 *  This could be optimized for sure into proper SCSS. For now just put the vanilla CSS in. - Daniel.
 */
body,
.region-footer-first p, .region-footer-first .content a,
.view-image-search-d7 .views-row .file-image .field-name-media-description,
.page-search-google .cse .gsc-control-cse,
.page-search-google .gsc-control-cse {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.global-navigation .content .menu > li a,
.panel-pane h2.pane-title,
h1, h2, p.intro, .node-news.view-mode-news_no_image h2,
.view-niwa-news-list h3,
.pane-node-body.with-bg_image_formatter .field-name-body,
.view-mode-3_column_pane h2, .node-teaser h2,
.follow-us .pane-title,
.region-footer-first .block-title,
.node-news.node-teaser h2,
.node-feature-article.node-teaser h2,
.secondary-menu h2,
.image-search h2,
.image-search h2,
.panel-pane h2.pane-title,
.view-niwa-menu-link-child-nodes .views-row h2,
.node-news.view-mode-news_no_image h3,
.view-related-content .field-name-title h2, .region-content h2 span {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

.node-feature-article.node-teaser h2 {
  border-bottom: none;
}

/* Global Search */
.global-search {
  width: 49%;
  display: inline-block;
  vertical-align: top;
}
.global-search label {
  display: none;
}
.global-search, .global-search * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.global-search .views-exposed-widgets {
  display: flex;
  width: 200px;
  background: #D5D5D5;
  height: 42px;
  padding-left: 10px;
  margin-bottom: 0;
}
.global-search .container-inline {
  display: table;
  width: 100%;
  background: #D5D5D5;
  height: 45px;
  padding-left: 10px;
  padding-right: 10px;
}
.global-search .container-inline > .form-item, .global-search .container-inline > .form-actions {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}
.global-search .container-inline > .form-item + .form-actions {
  width: 25px;
}
.global-search .form-text {
  background: transparent;
  border: none;
  color: #333;
  outline: none;
  font-size: 14px;
  font-weight: bold;
  width: 80%;
  padding: 0;
}
.global-search .form-text:hover, .global-search .form-text:focus {
  background-color: transparent !important;
}
.global-search .form-submit {
  width: 30px;
  height: 30px;
  color: transparent;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: none;
  background-color: #999;
  background-image: url('../images/icons/search.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  margin: 0;
  font-size: 0;
  padding: 0;
  -moz-transition: background-color 0.15s ease;
  -o-transition: background-color 0.15s ease;
  -webkit-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
  float: left;
}
.global-search .form-submit:hover, .global-search .form-submit:active {
  background-color: #1a1a1a;
  background-image: url('../images/icons/search.png');
  background-position: center;
}

@media (min-device-width: 740px) and (min-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation: landscape) {
  figcaption, .file-image .field-name-media-description, .field-name-field-creator {
    line-height: 15px !important;
    font-size: 13px !important;
  }
}
#graphic-introduction, .front .panel-display .grid-12 .inside {
  display: none;
}

/* Breadcrumbs */
.breadcrumb {
  font-size: 13px;
}

/* Front page right hand news articles */
.col-sidebar .panel-pane {
  clear: both;
}

.pane-niwa-news-list-latest-news-teasers .pane-title {
  padding-left: 20px;
}

/* Specific variant of .view-niwa-news-list */
.view-display-id-latest_news_teasers {
  padding: 0 !important;
}
.view-display-id-latest_news_teasers .view-header {
  overflow: hidden;
  border-bottom: 1px black solid;
  padding: 0 20px;
}
.view-display-id-latest_news_teasers .view-content {
  padding: 0 20px 0 20px;
}
.view-display-id-latest_news_teasers .field-name-body {
  line-height: 1.5;
}
.view-display-id-latest_news_teasers div.node {
  margin-bottom: 25px;
}

.front .pane-homepage-news-panes-panel-pane-2 h2.pane-title {
  border-top: none;
  border-bottom: 3px solid #003366;
  padding-bottom: 12px;
}

/* follow-us links were originally front-page only. Now may be re-used */
.follow-us .pane-title {
  font-size: 22px;
  line-height: 26px;
  display: block;
  margin: 10px 0;
  float: left;
}
.follow-us .social {
  float: right;
  margin: 10px 0;
}
.follow-us .social li:last-child {
  margin-right: 0;
}
.col-sidebar .follow-us {
  *zoom: 1;
}
.col-sidebar .follow-us:after {
  content: "";
  display: table;
  clear: both;
}
.col-sidebar .follow-us .pane-title, .col-sidebar .follow-us .social {
  margin-bottom: 0;
}
.col-sidebar .follow-us .pane-title {
  line-height: 26px;
}

.view-display-id-latest_news_teasers .more-link {
  text-align: left;
  padding: 0 20px;
  font-weight: bold;
}

/* Blocks embedded in the column (front page quick links, follow us and latest news)
   Client changes #9878 and #9877
 */
.col-sidebar .panel-pane h2.pane-title {
  color: #222;
}
.col-sidebar .panel-pane ul.menu {
  margin-top: 1em;
}

/*
  region-content was maybe originally intended to mean 'in the page'
  However, that gets fuzzy with panels and views.
  May be redundant now - Needs review.
  */
.region-content {
  padding: 26px 0 40px 0;
  font-size: 14px;
  overflow: hidden;
}
.region-content ul
li a {
  /* color: #999; */
  line-height: 24px;
  font-weight: normal;
}
.region-content ul
li a:hover {
  color: #0078BC;
  text-decoration: underline;
}
.region-content table {
  border-collapse: collapse;
  margin: 10px 0;
  border-top: 1px solid #333;
}
.region-content table.display_data_left * {
  text-align: left;
}
.region-content table h2, .region-content table h3, .region-content table h4 {
  margin: 0;
}
.region-content table tr.even,
.region-content table tr:nth-child(even) {
  background-color: transparent;
}
.region-content table tr.odd,
.region-content table tr:nth-child(odd) {
  background-color: #f7f7f7;
}
.region-content table td, .region-content table th {
  padding: 10px;
  border-bottom: 1px #ccc solid;
  line-height: 18px;
  vertical-align: middle;
}
.region-content table td, .region-content table td *, .region-content table th, .region-content table th * {
  font-size: 12px;
}
.region-content table td ul, .region-content table th ul {
  padding-left: 20px;
}
.region-content table thead th {
  font-weight: bold;
  font-size: 14px;
}

.field-type-text-long,
.field-name-body {
  clear: both;
}

/* Footer */
.zone-footer-nav-wrapper,
.zone-footer-wrapper {
  padding: 30px 0;
}

.zone-footer-nav-wrapper {
  background-color: #303030;
}

.region-footer-first .copyright-block .niwa-logo {
  display: block;
  width: 140px;
  height: 51px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover !important;
  background-image: url(/sites/niwa.co.nz/files/styles/media_gallery_large/public/NIWA_Rev_Hor.png);
}

.zone-footer-wrapper {
  background-color: #010101;
}

.region-footer-first {
  color: #fff;
}
.region-footer-first p, .region-footer-first .content a {
  font-size: 13px;
  color: #fff;
}
.region-footer-first .content a:hover {
  color: #006699;
}
.region-footer-first .block {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.region-footer-first .copyright-block {
  width: 100%;
}
.region-footer-first .useful-links {
  width: 180px;
}
.region-footer-first .contact {
  width: 180px;
  margin-right: 0;
}
.region-footer-first .block-title {
  color: #fff;
  margin: 0;
  font-size: 17px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px #888888 solid;
}
.region-footer-first .links-nsc .block-title {
  border: none;
  margin-bottom: 0;
}
.region-footer-first .links-nsc .menu li a,
.region-footer-first .block-menu .menu li a {
  display: block;
  padding: 2px 0;
}

.copyright-block,
.region-footer-second {
  text-align: center;
}
.copyright-block p,
.region-footer-second p {
  color: #666;
  font-size: 13px;
}
.copyright-block .niwa-logo,
.region-footer-second .niwa-logo {
  text-indent: -5000em;
  margin: 0 auto;
}

/* Sidebar Navigation */
.secondary-menu h2 {
  margin: 0;
  font-size: 14px;
}
.secondary-menu h2 a {
  display: block;
  padding-left: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: url('../images/nav-icon.png') no-repeat left center;
}
.secondary-menu ul.menu {
  padding: 12px 0 0 0;
  border-top: solid 1px #666;
  margin: 10px 0 0 0;
  font-size: 14px;
  display: none;
}
.secondary-menu ul.menu li {
  background: none;
  padding: 0 !important;
}
.secondary-menu ul.menu li ul.menu {
  border: none;
  padding: 6px 0 12px 20px;
  display: none;
}
.secondary-menu ul.menu li ul.menu li.active {
  border-bottom: 1px dashed #aaa;
}
.secondary-menu ul.menu li ul.menu li.active a.active {
  border-bottom: 1px solid #333;
}
.secondary-menu ul.menu li ul.menu li li a:hover {
  color: #999;
}
.secondary-menu ul.menu li a {
  color: #999;
  line-height: 24px;
  font-weight: normal;
  display: block;
  text-decoration: none;
}
.secondary-menu ul.menu li a.active-trail {
  color: #000;
  font-weight: bold;
}
.secondary-menu ul.menu li a.active {
  color: #33b2df;
  font-weight: bold;
}
.secondary-menu ul.menu li a:hover {
  color: #006699;
  text-decoration: underline;
}
.secondary-menu ul.menu li a.active-trail {
  font-weight: bold;
  color: #333;
}
.secondary-menu ul.menu li .active-trail a.active-trail {
  color: #0078BC;
  font-weight: bold;
}
.secondary-menu ul.menu li.active-trail ul.menu {
  display: block;
}
.secondary-menu ul.menu > li.active-trail a.active-trail {
  border-bottom: 1px solid #333;
}
.secondary-menu ul.menu > li.active-trail li.active a.active {
  border: none !important;
}

.panel-panel .pane-content .content ul.menu {
  padding-left: 0;
}
.panel-panel .pane-content img {
  max-width: 100%;
  height: auto;
}
.panel-panel .pane-content .secondary-menu {
  border-color: red;
}

/* Views */
.view .feed-icon {
  clear: both;
}

.views-field-created,
.field-name-post-date,
.field-name-changed-date {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #999;
}

/* News item and its listing view */
.node-news .field-name-field-news-type {
  float: right;
  padding: 2px;
  color: #999;
  font-size: 14px;
  margin: 0 0 10px 1em;
}
.node-news .field-name-field-news-type a {
  color: #999;
}
.node-news .field-name-field-news-type a:hover, .node-news .field-name-field-news-type a:active {
  color: #33b2df;
}

.node-news.node-teaser h2 {
  line-height: 1.3;
  font-size: 20px;
}

.node-news.node-teaser {
  /* News teasers are more subtle with their underlines and title stuff */
  border-top: 1px solid #aaa;
}
.node-news.node-teaser h2 {
  line-height: 1.3;
  font-size: 20px;
}
.node-news.node-teaser h2 a {
  margin-bottom: 0;
  line-height: inherit;
}
.node-news.node-teaser .field-name-post-date {
  margin-bottom: 5px;
}
.node-news.node-teaser .field-name-field-news-type {
  margin-bottom: 5px;
}
.node-news.node-teaser .file-image {
  margin: 0;
}
.node-news.node-teaser h2 {
  border-bottom: none;
  margin-bottom: .2em;
}
.node-news.node-teaser h2 a {
  padding: 0;
}

/*
  Crunched up teaser style, no image, smaller text.
  Initially Used on the front page for news summaries
  .view-niwa-news-list
 */
.node-news.view-mode-news_no_image {
  font-size: 14px;
}
.node-news.view-mode-news_no_image h2 {
    /*NIWA rebrand has us remove this SCSS class but keep a couple of the
	styles... @extend %sentinel; */
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.3;
  padding: 0 0;
  margin: 0;
}
.node-news.view-mode-news_no_image h2 a {
  color: #666;
  margin-bottom: 0;
  line-height: inherit;
}
.node-news.view-mode-news_no_image h2 a:hover {
  color: black;
}
.node-news.view-mode-news_no_image h3 {
  font-size: 18px;
  line-height: 26px;
  display: block;
  margin: 10px 0;
  float: left;
}
.node-news.view-mode-news_no_image p.intro {
  font-size: 14px;
}
.node-news.view-mode-news_no_image .field-name-post-date {
  margin-bottom: 2px;
}
.node-news.view-mode-news_no_image .field-name-field-news-type {
  margin-bottom: 2px;
}

/*
  Small/short teaser style, micro image, title and date, no text.
  Was originally used in other places, now repurposed for
  the science landing pages.
  .view-niwa-news-list

  Issue #19225
  This teaser is now wrapped entirely in an anchor,
  @see ds_layouts twocol_33_66
  so the markup nesting
  may be different from other types of teaser.
 */
.node-news.view-mode-short_teaser {
  font-size: 14px;
}
.node-news.view-mode-short_teaser .field-name-title,
.node-news.view-mode-short_teaser h3 {
  font-size: 17px;
  padding: 0 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 3px;
  color: #666;
  line-height: inherit;
  font-weight: normal;
}
.node-news.view-mode-short_teaser .field-name-title:hover,
.node-news.view-mode-short_teaser h3:hover {
  color: black;
}
.node-news.view-mode-short_teaser a:focus h3 {
  outline: 3px solid #ffbf47;
}
.node-news.view-mode-short_teaser .field-name-field-media-images {
  margin-bottom: 0;
}
.node-news.view-mode-short_teaser .field-name-post-date {
  margin-bottom: 2px;
}
.node-news.view-mode-short_teaser .field-name-body {
  color: #666;
}

/* http://www.niwa.co.nz/news http://www.niwa.co.nz/climate/news etc */
.view-niwa-news-list h3 {
    /*NIWA rebrand has us remove this SCSS class but keep a couple of the
	styles... @extend %sentinel; */
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  margin: 0 0 4px 0;
  font-weight: bold;
}
.view-niwa-news-list p {
  margin-bottom: 6px;
}
.view-niwa-news-list .view-footer a,
.view-niwa-news-list .more a {
  font-weight: bold;
}
.view-niwa-news-list .view-footer {
  border-top: 1px solid #010101;
  padding: 6px 0;
  clear: both;
}
.view-niwa-news-list .view-footer p {
  float: left;
}
.view-niwa-news-list .view-footer ul.social {
  float: right;
}
.view-niwa-news-list .view-footer ul.social li {
  background: none;
  padding: 0;
}

ul.social li {
  list-style-image: none;
  list-style: none;
  float: left;
  margin-right: 10px;
}
ul.social li a {
  width: 25px;
  height: 25px;
  display: block;
  text-indent: -5000em;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  background-color: #b2b2b2;
  background-repeat: no-repeat;
  background-position: center;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
ul.social li a:hover, ul.social li a:focus {
  background-color: #333;
}

ul.social a[href*=facebook] {
  background-image: url('../images/icons/icon--facebook.svg');
  background-size: 70% auto;
}

ul.social a[href*=twitter] {
  background-image: url('../images/icons/icon--twitter.svg');
  background-size: 60% auto;
}

ul.social a[href*=instagram] {
  background-image: url('../images/icons/icon--instagram.svg');
  background-size: 60% auto;
}

ul.social a[href*=rss] {
  background-image: url('../images/icons/icon--rss.svg');
  background-size: 52% auto;
}

/* Views (and Drupal core) RSS links as seen on /news /node and other views */
/* Extended ul.social icons by copying as the markup is different, could probably be re-combined. */
.feed-icon a {
  padding: 0;
  width: 25px;
  height: 25px;
  display: block;
  text-indent: -5000em;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  background-color: #b2b2b2;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../images/icons/rss.png');
  -moz-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
.feed-icon a:hover, .feed-icon a:focus {
  background-color: #333;
}

.field-type-addthis .field-label {
  text-transform: uppercase;
  font-weight: bold;
  line-height: 2.2em;
}

/**
 * Special freetext rss link.
 If they make the link class feed-link, add this icon
 */
.feed-link:before {
  content: attr(data-icon);
  width: 1.4em;
  height: 1.4em;
  display: block;
  float: left;
  line-height: 3em;
  padding: 0;
  margin-right: 0.5em;
  overflow: hidden;
  -moz-border-radius: 0.7em;
  -webkit-border-radius: 0.7em;
  border-radius: 0.7em;
  background-color: #b2b2b2;
  background-size: 1.4em 1.4em;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../images/icons/rss.png');
  -moz-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
.feed-link:before:hover, .feed-link:before:focus {
  background-color: #333;
}

.more-link {
  text-align: left;
}

/* Our Science styles */
.view-niwa-menu-link-child-nodes {
  /*
  #node-panel-81069 h2 a {@include background-image-retina('../images/icn-aquaculture', 'png', 30px, 30px);}
  #node-panel-81077 h2 a {@include background-image-retina('../images/icn-atmosphere', 'png', 30px, 30px);}
  #node-panel-81082 h2 a {@include background-image-retina('../images/icn-climate', 'png', 30px, 30px);}
  #node-panel-81106 h2 a {@include background-image-retina('../images/icn-coasts', 'png', 30px, 30px);}
  #node-panel-81088 h2 a {@include background-image-retina('../images/icn-information', 'png', 30px, 30px);}
  #node-panel-81094 h2 a {@include background-image-retina('../images/icn-fisheries', 'png', 30px, 30px);}
  #node-panel-81100 h2 a {@include background-image-retina('../images/icn-freshwater', 'png', 30px, 30px);}
  #node-panel-81116 h2 a {@include background-image-retina('../images/icn-te-kuwaha', 'png', 30px, 30px);}
  #node-panel-81103 h2 a {@include background-image-retina('../images/icn-hazards', 'png', 30px, 30px);}
  #node-panel-81109 h2 a {@include background-image-retina('../images/icn-pacific-rim', 'png', 30px, 30px);}
  #node-panel-81122 h2 a {@include background-image-retina('../images/icn-vessels', 'png', 30px, 30px);}*/
}
.view-niwa-menu-link-child-nodes .views-row {
  margin-bottom: 20px;
  border-top: 4px solid #333;
}
.view-niwa-menu-link-child-nodes .views-row .field {
  clear: both;
}
.view-niwa-menu-link-child-nodes .views-row .view-mode-linked_icon {
  width: 30px;
  float: left;
  margin-right: 10px;
  line-height: 34px;
}
.view-niwa-menu-link-child-nodes .views-row .view-mode-linked_icon .field-name-field-icon {
  width: 100%;
}
.view-niwa-menu-link-child-nodes .views-row .view-mode-linked_icon img {
  width: 100%;
  height: auto;
}
.view-niwa-menu-link-child-nodes .views-row h2 {
  margin: 0;
  line-height: 35px;
}
.view-niwa-menu-link-child-nodes .views-row h2 a {
  display: block;
  padding: 7px 0;
  line-height: 1;
  color: #33b2df;
}
.view-niwa-menu-link-child-nodes .views-row .field-name-field-icon,
.view-niwa-menu-link-child-nodes .views-row .field-name-title {
  float: left;
  clear: none;
  line-height: 34px;
  margin-bottom: 8px;
}
.view-niwa-menu-link-child-nodes .views-row .file-image {
  margin-bottom: 0;
}
.view-niwa-menu-link-child-nodes .views-row .field-name-body {
  border-top: 1px #333 solid;
}
.view-niwa-menu-link-child-nodes .views-row .field-name-body {
  padding: 10px 0;
  border-bottom: 1px dashed #333;
}
.view-niwa-menu-link-child-nodes .views-row .field-name-body p {
  margin: 0;
}
.view-niwa-menu-link-child-nodes .views-row ul.items-children, .view-niwa-menu-link-child-nodes .views-row ul.item-children {
  margin: 0;
  padding-left: 0;
}
.view-niwa-menu-link-child-nodes .views-row ul.items-children.col1, .view-niwa-menu-link-child-nodes .views-row ul.item-children.col1 {
  margin-top: 12px;
}
.view-niwa-menu-link-child-nodes .views-row ul.items-children a, .view-niwa-menu-link-child-nodes .views-row ul.item-children a {
  color: #a7a7a7;
}
.view-niwa-menu-link-child-nodes .views-row ul.items-children a:hover, .view-niwa-menu-link-child-nodes .views-row ul.item-children a:hover {
  color: #5bbab3;
}
.view-niwa-menu-link-child-nodes .views-row img {
  max-width: 100%;
  height: auto;
}

.view-niwa-sciencecentre-list-pages .view-content {
  margin-bottom: 20px;
}

.field-name-upload .field-item {
  margin-bottom: 6px;
  line-height: 1;
}

.group-right img, .group-left img {
  max-width: 100%;
}

.view-mode-3_column_pane,
.node-teaser {
  border-top: 3px solid #003366;
  margin: 0 auto 30px auto;
  padding-bottom: 20px;
}
.view-mode-3_column_pane h2,
.node-teaser h2 {
  font-size: 20px;
  line-height: 22px;
  color: #111;
  border-bottom: 1px solid #111;
  margin: 0 0 10px 0;
  padding: 7px 0 12px 0;
}
.view-mode-3_column_pane h2 a,
.node-teaser h2 a {
  display: block;
  line-height: 1;
  text-decoration: none;
}
.view-mode-3_column_pane img,
.node-teaser img {
  max-width: 100%;
  height: auto;
  /*
     This vertical-align addresses hairline cracks at some browser resolutions
     and layouts that use % widths.
     .. probably due to maths pixel rounding errors
  */
  vertical-align: top;
}
.view-mode-3_column_pane .field-name-field-pi-issues,
.node-teaser .field-name-field-pi-issues {
  line-height: 1.2;
}
.view-mode-3_column_pane .field-name-field-pi-issues .field-item,
.node-teaser .field-name-field-pi-issues .field-item {
  display: block !important;
}

.pane-node .view-mode-3_column_pane,
.pane-node .node-teaser {
  /* unset top border if inside panels pane, as it is its own block */
  border-top: none;
}

/* Design changes 2015-11 #13924 */
/* As seen on our-science */
.view-mode-teaser_with_children .field-name-body {
  color: black;
  font-weight: bold;
}

/* As seen on our-science and publications - the teaser-with-children look.  */
.children-list {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed black;
}
.children-list ul {
  margin-bottom: 0;
}

.field-name-field-teaser-image,
.field-name-field-media-images {
  margin-bottom: 5px;
}
.field-name-field-teaser-image img,
.field-name-field-media-images img {
  width: 100%;
  height: auto;
}

.media-element-container p, .field-name-field-creator {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2em;
  font-style: normal !important;
  /* normal font-style so we can have distinction for species names, boats that should be in italics */
}

.field-name-field-creator {
  text-align: right;
}

footer.submitted {
  color: #888;
  font-style: italic;
  margin: 10px 0;
}

/* Key contacts page */
.field-name-field-key-contacts-users .profile {
  margin: 0 0 20px 0;
  padding-bottom: 20px;
  overflow: hidden;
}
.field-name-field-key-contacts-users .profile .field-name-field-givenname,
.field-name-field-key-contacts-users .profile .field-name-field-honorificprefix,
.field-name-field-key-contacts-users .profile .field-name-field-familyname {
  margin-right: 5px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  line-height: 22px;
  float: left;
}
.field-name-field-key-contacts-users .profile .field-name-field-photo {
  margin-bottom: 20px;
}
.field-name-field-key-contacts-users .profile .field-name-field-photo img {
  width: 100%;
  height: auto;
}
.field-name-field-key-contacts-users .profile .field-name-field-jobtitle,
.field-name-field-key-contacts-users .profile .field-name-field-telephone,
.field-name-field-key-contacts-users .profile .field-name-field-email,
.field-name-field-key-contacts-users .profile .field-name-field-areasofexpertise,
.field-name-field-key-contacts-users .profile .field-name-field-biography-teaser {
  clear: left;
  line-height: 23px;
}
.field-name-field-key-contacts-users .profile .field-name-field-jobtitle,
.field-name-field-key-contacts-users .profile .field-name-field-telephone,
.field-name-field-key-contacts-users .profile .field-name-field-email {
  padding-left: 15px;
  background: url('../images/../images/grey_single_guillemet.png') no-repeat left 7px;
}
.field-name-field-key-contacts-users .profile .field-name-field-email {
  margin-bottom: 15px;
}
.field-name-field-key-contacts-users .profile .field-label {
  display: none;
}

.field-type-taxonomy-term-reference {
  line-height: 1.3;
}

/* Video for Marco */
.media-vimeo-preview-wrapper, .media-youtube-video, .media-vimeo-video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
  max-width: inherit;
  min-height: inherit;
  margin-bottom: 10px;
}
.media-vimeo-preview-wrapper iframe, .media-vimeo-preview-wrapper embed, .media-vimeo-preview-wrapper object, .media-youtube-video iframe, .media-youtube-video embed, .media-youtube-video object, .media-vimeo-video iframe, .media-vimeo-video embed, .media-vimeo-video object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* override ds styles, which aren't responsive friendly */
.node-type-page .node-teaser {
  width: 100%;
}

.ds-twocol-66-33-stacked .ds-left,
.ds-twocol-66-33-stacked .ds-right {
  width: 100%;
  margin-bottom: 20px;
}

.ds-2col-stacked-fluid > .group-left,
.ds-2col-stacked-fluid > .group-right {
  width: 100%;
}

.container-12 .grid-12 .node-teaser {
  margin-bottom: 30px;
}

.field-name-field-pi-articles .field-items div.field-item {
  display: inline;
}

.front .grid-12 .view-niwa-news-list {
  padding: 10px 0;
}
.front .grid-12 .view-niwa-news-list .node-teaser {
  margin: 0 0 20px 0;
  width: 100%;
  border: none;
  overflow: hidden;
}

/* Galleries page /news-publications/photo-gallery */
.view-node-gallery-gallery-summaries,
.view-niwa-videos-list {
  overflow: hidden;
}
.view-node-gallery-gallery-summaries .file-video .content a,
.view-niwa-videos-list .file-video .content a {
  position: relative;
  display: block;
}
.view-node-gallery-gallery-summaries .file-video .content a:hover .overlay,
.view-niwa-videos-list .file-video .content a:hover .overlay {
  color: #fff;
}
.view-node-gallery-gallery-summaries .file-video .overlay,
.view-niwa-videos-list .file-video .overlay {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -30px;
  width: 100%;
  height: 100%;
  font-family: 'symbols';
  font-size: 60px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.view-node-gallery-gallery-summaries .file-video img,
.view-niwa-videos-list .file-video img {
  width: 100%;
  height: auto;
}
.view-node-gallery-gallery-summaries .file-video h2,
.view-niwa-videos-list .file-video h2 {
  margin: 0 0 10px 0;
}

/* Galleries */
.view-node-gallery-gallery-summaries {
  margin-bottom: 30px;
}
.view-node-gallery-gallery-summaries .views-row {
  padding-bottom: 10px;
}
.view-node-gallery-gallery-summaries .views-field-field-media-images {
  margin-bottom: 10px;
}
.view-node-gallery-gallery-summaries h3 {
  margin: 0;
  font-weight: bold;
  font-size: 14px;
}
.view-node-gallery-gallery-summaries h3 a {
  color: #333;
}
.view-node-gallery-gallery-summaries h3 a:hover {
  text-decoration: underline;
}

/* Videos listing page */
.view-niwa-videos-list .views-row {
  padding-bottom: 20px;
}
.view-niwa-videos-list .views-field-body {
  line-height: 20px;
}
.view-niwa-videos-list .views-field-title h3 {
  font-size: 14px;
  margin: 10px 0 6px 0;
}
.view-niwa-videos-list .views-field-title h3 a {
  color: #333;
}
.view-niwa-videos-list .views-field-title h3 a:hover {
  text-decoration: underline;
}

/* Image Search results */
.view-image-search-d7 {
  margin-bottom: 30px;
}
.view-image-search-d7 .views-row {
  margin-bottom: 20px;
}
.view-image-search-d7 .views-row .field-name-media-title {
  font-weight: 900;
}
.view-image-search-d7 .views-row img {
  width: 100%;
  height: auto;
  margin-bottom: 18px;
}
.view-image-search-d7 .views-row .file-image .field-name-media-description {
  font-style: normal;
}

/* ensure captions have top margin on mobile - CSS done by NIWA */
figcaption, .media .file-image .field-name-media-description, .ds-right .field-name-media-description {
  padding: 10px 0 20px 0;
}

/* look after photo competition images in mobile - CSS done by NIWA */
article.node-photo-comp img {
  width: 100%;
  height: auto;
}

/* User profiles */
.user-profile > .group-left {
  width: 100%;
  margin-bottom: 20px;
}
.user-profile > .group-right {
  width: 100%;
}
.user-profile .field {
  line-height: 23px;
}
.user-profile .field ul {
  padding-left: 10px;
}
.user-profile .field-name-field-photo {
  margin-bottom: 20px;
}
.user-profile .field-name-field-photo img {
  max-width: 100%;
  height: auto;
}

/* Individual galleries */
.media-gallery-media .media-gallery-item-wrapper {
  margin: 0;
}
.media-gallery-media .media-gallery-item {
  border: none;
}

/* Node tags */
/* science centre icons */
.field-name-taxonomy-vocabulary-1 {
  margin: 6px 0;
}
.field-name-taxonomy-vocabulary-1 .field-label {
  line-height: 42px;
  margin-right: 6px;
}
.field-name-taxonomy-vocabulary-1 .view-mode-linked_icon a {
  width: 42px;
  height: 42px;
  display: inline-block;
}
.field-name-taxonomy-vocabulary-1 img {
  width: 100%;
  height: auto;
}

/* Full page titles : When the title and the tags are in the same row */
/* This is either when
using ds to put things in a horizontal header, OR
a field group edited manually. Either may be used.
http://projects.sparksinteractive.co.nz/issues/8318
*/
.group-title-wrapper {
  padding: 1.10em 0 1.25em 0;
  border-bottom: solid 1px #111;
  border-top: 3px solid #111;
  margin: 0 0 2.15em 0;
}
.group-title-wrapper .field-name-title h1, .group-title-wrapper h1.page-title {
  font-size: 2em;
  line-height: 1.25em;
  margin: 0.1em 0 0 0;
}
.group-title-wrapper .field-name-taxonomy-vocabulary-1 {
  float: right;
  margin: 0;
  margin-left: 15px;
}
.group-title-wrapper .field-name-taxonomy-vocabulary-1 .field-item {
  float: left;
}
.group-title-wrapper .field-name-taxonomy-vocabulary-1 .field-item ~ .field-item {
  margin-left: 8px;
}
.group-title-wrapper .field-name-post-date {
  margin-bottom: 0;
}

/* Other misc tags */
.field-type-taxonomy-term-reference {
  margin: 6px 0;
}

.view-node-gallery-gallery-summaries .views-row .media-gallery-media .field-item {
  width: auto;
  margin: 0;
}

.node-media .field-name-field-user-reference {
  line-height: 23px;
}
.node-media .field-name-field-user-reference .field-item {
  display: inline-block !important;
  *display: inline !important;
  zoom: 1;
  margin-right: 6px;
}

.columns {
  clear: both;
}

.sigimg,
.right150 {
  float: right;
  font-size: 12px;
  clear: right;
  display: block;
  margin: 10px 0 10px 10px;
  padding: 5px;
  border: 1px #eee solid;
  text-align: center;
  max-width: 150px;
  line-height: 1.3;
}

.image-search {
  margin-top: 15px;
}
.image-search h2 {
  margin: 0;
  border-top: 3px solid #006699;
  border-bottom: 1px #010101 solid;
  padding: 10px 0 10px 0;
  font-size: 18px;
  color: #0078BC;
}
.image-search label {
  display: none;
}
.image-search .views-exposed-form {
  background: #ececec;
  border-bottom: 1px #010101 solid;
  padding: 6px 0;
}
.image-search .views-exposed-form .views-exposed-widgets input {
  height: 28px;
  line-height: 28px;
}
.image-search .views-exposed-form .views-exposed-widget {
  margin: 0;
  float: left;
  width: 210px;
}
.image-search .views-exposed-form .views-exposed-widget input {
  border: none;
  background: #ececec;
  color: #999;
}
.image-search .views-exposed-form .views-submit-button {
  float: right;
  width: auto;
  margin-right: 6px;
}
.image-search .views-exposed-form .views-submit-button .form-submit {
  background-color: #999999;
  border: none;
  color: #fff;
  font-size: 12px;
  width: 28px;
  padding: 0 5px;
  text-align: center;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
.image-search .views-exposed-form .views-submit-button .form-submit:hover, .image-search .views-exposed-form .views-submit-button .form-submit:active {
  background-color: #1a1a1a;
}

/**
 * All Panel panes on mobile should be full width when they go into their one big column.
 * These tiles get overridden by almost all page widths, this is just for mobile-level.
 */
.panel-pane,
.masonry-item {
  width: 100%;
}

/* External Links */
.field-name-body a[href^="http://"]:after,
.field-name-body a[href^="https://"]:after,
.field-name-body a.external:after {
  content: ' o';
  font-family: 'symbols';
  text-rendering: optimizeLegibility;
}

/* Reset dev/test/live sites */
a[href^="http://dev.niwa"]:after,
a[href^="http://test.niwa"]:after,
a[href*="sparksinteractive"]:after,
a[href^="http://dev2.niwa"]:after,
a[href^="http://www.dev2.niwa"]:after,
a[href^="http://www.niwa"]:after,
a[href^="http://niwa"]:after,
.node-teaser .field a:after {
  content: none !important;
}

.eco-voyage {
  display: block;
  width: 100%;
  background: #0F1E3D;
  font-size: 20px;
  text-align: center;
  text-rendering: optimizeLegibility;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  color: #33b2df;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
  padding: 20px;
  box-sizing: border-box;
}
.eco-voyage:hover, .eco-voyage:focus {
  color: rgba(255, 255, 255, 0.9);
}

.reversed-logo #logo {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(/sites/niwa.co.nz/files/NIWA_Rev_Hor.png) no-repeat;
  width: 250px;
  height: 92px;
  padding-left: 250px;
  background-size: cover;
  margin: 0 auto;
}

.page-user-edit fieldset {
  background-color: #fafafa;
}
.page-user-edit .hidden, .page-user-edit .hidden-niwa-d7 {
  display: none;
}
.page-user-edit .field-name-taxonomy-vocabulary-1 .form-checkboxes .form-item, .page-user-edit .field-name-taxonomy-vocabulary-8 .form-checkboxes .form-item {
  display: inline-block;
  width: 20%;
}
.page-user-edit .field-name-taxonomy-vocabulary-1 .description {
  clear: left;
  padding-top: 10px;
}
.page-user-edit #field-biography-teaser-values, .page-user-edit #field-external-profile-link-values, .page-user-edit #field-recent-research-articles-values, .page-user-edit #field-recent-work-values {
  width: 100%;
}
.page-user-edit #user-profile-form input[type=submit] {
  margin: 0;
  padding: 3px 10px 4px;
}
.page-user-edit #user-profile-form #edit-submit {
  padding: 15px 20px;
}
.page-user-edit #user-profile-form fieldset {
  margin: 15px 0;
}
.page-user-edit #user-profile-form fieldset legend {
  font-weight: bold;
  font-size: 20px;
}
.page-user-edit textarea, .page-user-edit .form-text {
  background: #FFFFFF;
}
.page-user-edit .fieldset-description {
  font-weight: bold;
  margin-top: 15px;
}

.page-user .group-sm-title .hidden {
  display: none;
}

.panel-pane {
  /* somehow this adds margin/padding at the top of panes? */
  /*
  margin-bottom: 1em;
  */
}
.panel-pane.no-margin {
  margin-bottom: 0;
}
.panel-pane h2.pane-title {
  border-top: 3px solid #006699;
  border-bottom: 1px #010101 solid;
  padding: 10px 0 10px 0;
  font-size: 22px;
  margin: 0px;
  margin-bottom: 0.5em;
  color: #0078BC;
}
.panel-pane h2.pane-title a {
  color: #0078BC;
}
.panel-pane h2.pane-title a:hover {
  color: #006699;
}

/*
  Over-specific selectors here needed to compete with the base panels.css
  This rule has quite wide-reaching effects throughout the site.
*/
div.panel-pane div.node {
  margin-bottom: 20px;
}

/* A node may be 'promoted' (Drupal internals) or 'featured' (custom class)
   when shown in (eg) the front page.
   This gets rendered with a different color.
   http://projects.sparksinteractive.co.nz/issues/8317
   */
.node-promoted h2.pane-title,
.panel-display .featured h2.pane-title {
  border-top: 3px solid #010101;
  color: #010101;
}
.node-promoted h2.pane-title a,
.panel-display .featured h2.pane-title a {
  color: #010101;
}
.node-promoted h2.pane-title a:hover, .node-promoted h2.pane-title a:focus,
.panel-display .featured h2.pane-title a:hover,
.panel-display .featured h2.pane-title a:focus {
  color: #006699;
}

/* Node panes may start with an image immediately after the title, so don't add margin there. */
.pane-node h2.pane-title {
  margin-bottom: 0;
}

/*
 Placing body content right in the panel usually deserves significant margins.
 From the visuals provided Issue #13924
 */
.pane-node-body {
  margin: 1.7em 0;
}
.pane-node-body.with-bg_image_formatter .field-name-body a {
  color: #0078BC;
}

/*
  I don't usually trust panel-separators, but it looks like
  (in vertical columns especially) it may help to let them give us our margins.
  Not going to add margins to the panes themselves, as that will have effects
  on rows, which we do not want.
*/
.panel-separator {
  margin-bottom: 1em;
}

/**
 * Media and Media Gallery display
 * including CC license icons (@see media_gallery.css)
 */
.mg-col {
  margin: 0;
}

.mg-col-4 > .field-items > .field-item,
.mg-col-4 .mg-gallery {
  width: 100% !important;
}

.mg-col-4 .mg-gallery {
  overflow: hidden;
  border-bottom: 1px #333 solid;
}

.media-collection-item-wrapper {
  padding: 0;
  overflow: hidden;
}
.media-collection-item-wrapper .stack-image {
  display: none;
}

.meta-wrapper {
  left: 0;
  border: none;
  top: 0;
  padding: 5px 0;
  color: #fff;
  text-align: center;
  min-width: auto;
  position: relative !important;
  display: block !important;
  text-align: left;
}
.meta-wrapper.hover {
  margin: 8px 0;
  top: inherit;
  left: 0;
}
.meta-wrapper .media-title {
  color: #333;
  font-weight: bold;
  font-size: 14px;
}
.meta-wrapper .media-title:hover {
  text-decoration: underline;
}
.meta-wrapper .slider {
  background: none !important;
  padding: 0;
}
.meta-wrapper .slider.top-inner {
  display: none;
}
.meta-wrapper .slider.bottom, .meta-wrapper .slider.meta-inner, .meta-wrapper .slider.meta-outer {
  background: none !important;
  padding: 0 !important;
}

.media-gallery-detail-wrapper .field-name-media-description {
  line-height: 1.3;
}

#media-gallery-media-3,
#media-gallery-media-7,
#media-gallery-media-11,
#media-gallery-media-15 {
  margin-right: 0;
}

.media-gallery-media .media-gallery-item {
  padding: 0;
}
.media-gallery-media .media-gallery-item img {
  width: 100%;
  height: auto;
}

/* Don't upscale image on full page view */
.media-gallery-detail img {
  width: auto;
  max-width: 100%;
}

/* cc license alt icons from client request .
 * See also template.php:niwa_d7_media_gallery_license()
 */
.media-gallery-detail-info .media-license.large {
  position: relative;
}

.media-license.large {
  font-size: 0;
  line-height: 0px;
}

.media-license.large span {
  background: url("../images/creative-commons-sprite.png") no-repeat left top transparent;
  padding: 71px 44px;
}

.media-license.large span + span {
  margin-left: 0px;
}

.media-license.large .copyright {
  background-position: -95px 0px;
}

.media-license.large .attribution {
  background-position: -130px 0px;
}

.media-license.large .non-commercial {
  background-position: -220px 0px;
}

.media-license.large .share-alike {
  /* unsupported by NIWA policy 2015. Just hide it */
  padding: 0;
}

.media-license.large .copyright {
  background-position: 0px 0px;
  padding: 25px;
  background-image: url("../images/copyright-50px.png");
}

.media-license.large .no-deriv {
  background-position: -310px 0px;
}

.media-license.large .before {
  background-position: 0px 0px;
  padding: 71px 65px;
}

.media-license.large .after {
  background-position: -398px -0px;
  padding: 71px 3px;
}

.form-text, .form-textarea, textarea, input[type=text], input[type=email], input[type=password] {
  display: block;
  outline: none;
  border: solid 1px #ddd;
  margin: 0;
  background: #eee;
  width: 100%;
  padding: 0 8px;
  font-size: 13px;
  color: #006699;
}

.form-text, input[type=text], input[type=email], input[type=password] {
  height: 28px;
  line-height: 28px;
}

.form-textarea, textarea {
  padding: 8px;
}

label {
  color: #333;
  margin: 20px 0 8px 0;
}

form .description {
  font-size: 12px;
  margin: 10px 0;
}

.webform-component-fieldset {
  margin-bottom: 20px;
}

.form-submit, input[type=submit] {
  width: auto;
  color: #ffffff;
  background: #0078BC;
  padding: 15px 20px;
  margin: 40px 0;
  cursor: pointer;
  border-top: solid 1px #0078BC;
  border-bottom: solid 1px #0072AE;
  font-size: 15px;
}
.form-submit:hover, .form-submit:active, input[type=submit]:hover, input[type=submit]:active {
  background: #0078BC;
}

.search .views-exposed-widgets {
  display: flex;
}
.search .views-exposed-widgets .views-exposed-widget {
  display: flex;
  align-items: center;
  padding: 0;
}
.search .views-exposed-widgets .views-exposed-widget label {
  margin-right: 15px;
}
.search .views-exposed-widgets .views-exposed-widget .form-submit {
  height: 28px;
  padding: 0 12px;
  margin: 0;
}
.search ol {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.search ol li.search--result {
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
  position: relative;
  margin: 0.5rem;
  padding: 1rem;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(163, 163, 163, 0.39);
  -moz-box-shadow: 0px 1px 3px 0px rgba(163, 163, 163, 0.39);
  box-shadow: 0px 1px 3px 0px rgba(163, 163, 163, 0.39);
  /* transform: scale(0.9); */
  transition: all 0.3s ease-in-out;
}
.search ol li.search--result:first-child {
  margin-top: 15px;
}
.search ol li.search--result a:hover h3 {
  text-decoration: underline;
}
.search ol .search__title {
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 0;
  margin: 0;
}
.search ol .views-field-taxonomy-vocabulary-1 li, .search ol .views-field-taxonomy-vocabulary-8 {
  background: blue;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1rem;
  height: 1 rem;
  display: inline-block;
  margin: 10px;
}
.search .search-snippet-info {
  padding: 0;
}
.search .search-result-image {
  float: right;
  margin: 0 0 1rem 1rem;
  padding: 0;
}
.search .search-result-path {
  font-size: 0.7rem;
  line-height: 1rem;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search .search-result-excerpt {
  color: #444;
  margin: 0;
}
.search .search-result-relevance {
  position: absolute;
  top: 0;
  font-size: 1.5rem;
  line-height: 2rem;
  color: fuchsia;
}
.search .search-result-science-centres, .search .search-result-research-projects {
  border-top: 1px solid #efefef;
  padding: 1rem 0 0 0;
}
.search .search-result-science-centre {
  background: #0078BC;
  color: #eee;
  padding: 0.3rem;
  line-height: 0.8rem;
  font-size: 0.8rem;
  border-radius: 3px;
  margin: 0.5rem;
}
.search .search-result-science-centre:hover {
  text-decoration: underline;
  background: #3393c9;
  color: #fff;
}
.search .search-result-science-centre:first-of-type {
  margin-left: 0;
}
.search h3 {
  color: #0078BC;
  margin: 1rem 0;
  font-size: 1.3rem;
  line-height: 1.6rem;
  padding: 0;
}

.search-info {
  display: none;
}

#search-form .form-item-keys label {
  display: block;
}

.region-content .search-form {
  margin: 0;
}
.region-content .search-form .form-wrapper {
  width: auto;
}
.region-content .search-form .form-wrapper > .form-item {
  margin: 0;
}
.region-content .search-form .form-wrapper > .form-item > label,
.region-content .search-form .form-wrapper > .form-item > input {
  margin: 0;
  height: 32px;
  line-height: 32px;
  display: table-cell !important;
  vertical-align: middle;
}
.region-content .search-form .form-wrapper > .form-item > label + input {
  padding: 0 8px;
}
.region-content .search-form .form-submit {
  margin: 8px 0 0 0;
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
}
.region-content .search-form + div {
  margin-top: 1.2em;
}

.page-search-google .cse .gsc-control-cse,
.page-search-google .gsc-control-cse {
  padding: 0;
  border: none;
  background-color: transparent;
}
.page-search-google .gsc-tabData td, .page-search-google .gsc-tabData th, .page-search-google .gsc-tabData tr,
.page-search-google .gsc-above-wrapper-area-container td,
.page-search-google .gsc-above-wrapper-area-container th,
.page-search-google .gsc-above-wrapper-area-container tr {
  border: none;
  background-color: transparent !important;
  padding: 0;
}
.page-search-google .gsc-results {
  clear: both;
  margin-top: 30px;
  float: left;
  width: 100%;
}
.page-search-google .gsc-above-wrapper-area,
.page-search-google .gsc-refinementsArea,
.page-search-google .gsc-above-wrapper-areahang o {
  display: none;
}
.page-search-google .gsc-tabsArea {
  margin: 22px 0 0 0;
  float: left;
  clear: both;
  width: 100%;
  border-color: #111;
}
.page-search-google .gsc-tabsArea .gs-spacer {
  display: none;
}
.page-search-google .gsc-tabsArea .gsc-tabHeader {
  font-weight: bold;
}
.page-search-google .gsc-tabsArea .gsc-tabhInactive {
  background-color: #ececec;
  border-color: #ececec;
}
.page-search-google .gsc-tabsArea .gsc-tabhInactive:hover, .page-search-google .gsc-tabsArea .gsc-tabhInactive:focus {
  background-color: #1a8db6;
  border-color: #1a8db6;
  color: white;
}
.page-search-google .gsc-tabsArea .gsc-tabhActive {
  background-color: #33b2df;
  border-color: #33b2df;
  color: white;
}
.page-search-google .gsc-resultsHeader {
  border: none;
  clear: both;
}
.page-search-google .gs-webResult, .page-search-google .gs-promotion {
  margin-left: 0;
}
.page-search-google .gsc-webResult.gsc-result ~ .gsc-webResult.gsc-result,
.page-search-google .gsc-expansionArea {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px #ececec solid;
}
.page-search-google .gsc-imageResult-popup + .gsc-expansionArea {
  border: none;
  margin: 0;
  padding: 0;
}
.page-search-google .gsc-webResult.gsc-result,
.page-search-google .gsc-imageResult,
.page-search-google .gsc-table-result {
  padding: 0;
  margin: 0;
}
.page-search-google .gsc-webResult.gsc-result,
.page-search-google .gsc-table-result {
  border: none;
}
.page-search-google .gsc-webResult.gsc-result td,
.page-search-google .gsc-table-result td {
  vertical-align: top;
}
.page-search-google .gs-web-image-box,
.page-search-google .gs-promotion-image-box {
  max-width: 62px;
  width: 100%;
  padding: 0;
  margin-right: 10px;
}
.page-search-google .gsc-webResult.gsc-result:hover,
.page-search-google .gsc-imageResult:hover {
  border: none;
  background-color: transparent;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.page-search-google a.gs-image {
  display: block;
}
.page-search-google a.gs-title, .page-search-google a.gs-title > b {
  color: #33b2df !important;
}
.page-search-google a.gs-title:hover, .page-search-google a.gs-title:hover > b, .page-search-google a.gs-title:focus, .page-search-google a.gs-title:focus > b {
  color: #1a8db6 !important;
  text-decoration: underline;
}
.page-search-google .gsc-results .gsc-cursor-box {
  margin-top: 1.5em;
}
.page-search-google .gsc-results .gsc-cursor-box .gsc-cursor-page {
  text-decoration: none;
  margin: 0 3px;
  display: inline-block;
  vertical-align: top;
  color: #33b2df;
  border: 1px #33b2df solid;
}
.page-search-google .gsc-results .gsc-cursor-box .gsc-cursor-current-page, .page-search-google .gsc-results .gsc-cursor-box .gsc-cursor-page:hover {
  background-color: #33b2df;
  color: white;
  text-shadow: none;
}

ul.pager li {
  margin: 0 2px;
}

/*
Sources - 
https://www.drupal.org/node/418356
http://support.addthis.com/customer/portal/articles/381236-custom-buttons

The pngs are actually transparent+white, while changing the background-color shows through as a fade.
*/
.addthis_toolbox.addthis_32x32_style a {
  padding: 0 0 0 4px;
}
.addthis_toolbox.addthis_32x32_style a span {
  width: 25px;
  height: 25px;
  display: block;
  text-indent: -5000em;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  background-color: #b2b2b2;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
.addthis_toolbox.addthis_32x32_style a span:hover {
  background-color: #333;
}
.addthis_toolbox.addthis_32x32_style .addthis_button_facebook span {
  background-image: url(../images/icons/facebook.png);
}
.addthis_toolbox.addthis_32x32_style .addthis_button_twitter span {
  background-image: url(../images/icons/twitter.png);
}
.addthis_toolbox.addthis_32x32_style .addthis_button_google span {
  background-image: url(../images/icons/google.png);
}
.addthis_toolbox.addthis_32x32_style .addthis_button_email span {
  background-image: url(../images/icons/email.png);
}
.addthis_toolbox.addthis_32x32_style .addthis_button_linkedin span {
  background-image: url(../images/icons/linkedin.png);
}

.field-type-addthis .field-label {
  text-transform: uppercase;
  font-weight: bold;
  line-height: 2.2em;
}

/*
  To introduce Masonry layouts to some bags of teasers, we need to unset some
  of the other magic that was re-flowing teasers in the responsive views.

  UNSET some of those margins and flow tricks.
  */
.panels-masonry-container .node-teaser {
  margin-right: 0 !important;
  clear: none !important;
  float: none !important;
}

.masonry-item .node-teaser {
  margin-right: 0 !important;
  /* clear:none !important; */
}

/*
  Unset whatever other rules like this we have for components that may now use
  masonry, like media-gallery-media-item-thumbnail
  Note that masonry-brick class is dynamically applied by the script,
  so only triggers when masonry is actually working.
*/
.masonry-brick {
  margin-right: 0 !important;
  clear: none !important;
  float: none !important;
}
.masonry-brick .media-gallery-media-item-thumbnail {
  margin: 0 !important;
}

/*
Small additions to retroactively support layout styles
 used in previous versions and imported.
*/
.right100 {
  float: right;
  margin-left: 20px;
}

.field-name-field-key-contacts {
  display: none;
}

/**
 * Styles for the 2015-11 science centre page remodels.
 * Issue #13924 and onwards.
 * @see https://projects.sparksinteractive.co.nz/issues/14203
 *
 * As an inconsistant rule, many HORIZONTAL widths are pixels (because grid),
 * many VERTICAL heights are in em.
 * Apart from cases where prior designer already had vertical
 * in px.
 */
/* Menu child links */
/* Slat-layout menu items to show links to additional child items.
 These are explicitly given the css class menu-item-slats via pane management
 as there is no semantic reason for them to exist.
 (be sure not to use the 'no markup' option on that pane).

 The flow is horizontal, so most styling goes to the li itself.
 */
.pane-menu-children-menu-child-links {
  margin-bottom: 2em;
}

/* Custom list style for menu children here */
.menu-item-slats .item-list li {
  border-bottom: 1px solid grey;
}
.menu-item-slats .item-list li, .menu-item-slats .item-list li * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.menu-item-slats .item-list li a {
  display: block;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-right: 2.4em;
  font-size: 1.2em;
  font-weight: bold;
  color: black;
  position: relative;
  /* Put the 'external link' indicator here - no reason */
}
.menu-item-slats .item-list li a:after {
  content: '\00d5';
  font-family: 'symbols';
  text-rendering: optimizeLegibility;
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  line-height: 1;
  right: 20px;
  font-size: 1.25em;
}

.menu-item-slats .item-list li:nth-child(1) {
  border-top: 1px solid grey;
}
.menu-item-slats .item-list li:nth-child(2) {
  border-top: 1px solid grey;
}

/* Menu item slats: Reflow rules - various fixed-widths */
/* But basically 2-up in whatever grid fits all the time */
/* The unique part here is that it goes 2-across when given space for two columns */
.menu-item-slats .item-list li {
  /* Reflow rules when mobile */
  /* 2-up flexible */
  /* Reflow rules when narrow */
  /* 2-up tiny */
  /* Reflow rules when normal */
  /* 2-up */
  /* Reflow rules when wide */
  /* 2-up */
}
@media (max-width: 740px) {
  .menu-item-slats .item-list li {
    width: 47%;
    float: left;
    margin-right: 6%;
  }
  .menu-item-slats .item-list li:nth-child(2n-1) {
    clear: left;
  }
  .menu-item-slats .item-list li:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-device-width: 740px) and (min-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation: landscape) {
  .menu-item-slats .item-list li {
    float: left;
    width: 250px;
    margin-right: 20px;
  }
  .menu-item-slats .item-list li:nth-child(2n-1) {
    clear: left;
  }
  .menu-item-slats .item-list li:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-device-width: 980px) and (min-width: 980px), (max-device-width: 1024px) and (min-width: 1024px) and (orientation: landscape) {
  .menu-item-slats .item-list li {
    width: 220px;
    float: left;
    margin-right: 20px;
  }
  .menu-item-slats .item-list li:nth-child(2n-1) {
    clear: left;
  }
  .menu-item-slats .item-list li:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 1220px) {
  .menu-item-slats .item-list li {
    width: 280px;
    float: left;
    margin-right: 20px;
  }
  .menu-item-slats .item-list li:nth-child(2n-1) {
    clear: left;
  }
  .menu-item-slats .item-list li:nth-child(2n) {
    margin-right: 0;
  }
}

/* Feature colors */
.rainbow-coloured .node-teaser, .rainbow-coloured .panel-pane {
  border-top: none;
  background-color: #ECECEC;
  /* padding the teaser would bust the reflow widths. margin the contents instead. */
}
.rainbow-coloured .node-teaser h2, .rainbow-coloured .panel-pane h2 {
  color: black;
  border-top: none;
}
.rainbow-coloured .node-teaser h2 a, .rainbow-coloured .panel-pane h2 a {
  color: black;
  margin-top: 10px;
}
.rainbow-coloured .node-teaser a, .rainbow-coloured .node-teaser a:hover, .rainbow-coloured .panel-pane a, .rainbow-coloured .panel-pane a:hover {
  color: #005ae2;
}
.rainbow-coloured .node-teaser:nth-child(1), .rainbow-coloured .panel-pane:nth-child(1) {
  background-color: #ECECEC;
}
.rainbow-coloured .node-teaser:nth-child(2), .rainbow-coloured .panel-pane:nth-child(2) {
  background-color: #ECECEC;
}
.rainbow-coloured .node-teaser:nth-child(3), .rainbow-coloured .panel-pane:nth-child(3) {
  background-color: #ECECEC;
}
.rainbow-coloured .node-teaser .pane-title,
.rainbow-coloured .node-teaser .pane-content,
.rainbow-coloured .node-teaser .field, .rainbow-coloured .panel-pane .pane-title,
.rainbow-coloured .panel-pane .pane-content,
.rainbow-coloured .panel-pane .field {
  margin-left: 10px;
  margin-right: 10px;
}
.rainbow-coloured .node-teaser .pane-content, .rainbow-coloured .panel-pane .pane-content {
  padding-bottom: 10px;
}
.rainbow-coloured .node-teaser .field-name-field-media-images, .rainbow-coloured .panel-pane .field-name-field-media-images {
  display: none;
}

/*
  Seeing as the nth child logic is tricky, allow arbitrary overrides
  anywhere you prefer. There is no semantic meaning to be attached to these.
  */
.rainbow-coloured-1 {
  background-color: #ECECEC !important;
}

.rainbow-coloured-2 {
  background-color: #ECECEC !important;
}

.rainbow-coloured-3 {
  background-color: #ECECEC !important;
}

/* Our Science page */
/* Icons in the teasers for science centres */
.view-mode-teaser_with_children .field-name-taxonomy-vocabulary-1 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
}
.view-mode-teaser_with_children .field-name-title {
  text-align: center;
}

/* But these icons are presented differently (only) when in the rainbow-coloured teasers */
.rainbow-coloured .view-mode-teaser_with_children {
  padding-top: 1em;
}
.rainbow-coloured .view-mode-teaser_with_children .field-name-taxonomy-vocabulary-1 {
  text-align: left;
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 0;
  float: left;
}
.rainbow-coloured .view-mode-teaser_with_children .field-name-title {
  text-align: left;
  margin-top: 0;
  margin-left: 60px;
}
.rainbow-coloured .view-mode-teaser_with_children .field-name-title h2 {
  margin-top: 0;
  padding: 0;
  border: none;
}
.rainbow-coloured .view-mode-teaser_with_children .field-name-title a {
  margin-top: 0;
}
.rainbow-coloured .view-mode-teaser_with_children .field-name-body {
  padding-top: 10px;
  border-top: 1px solid black;
}

/* Banner image block - using bg_image_formatter */
/* /our-science page.
   .with-bg_image_formatter is a custom class
   added using panels UI
*/
.pane-node-body.with-bg_image_formatter {
  padding: 20px;
  margin-bottom: 20px;
  background-size: cover;
}
.pane-node-body.with-bg_image_formatter .field-name-body {
  background-color: rgba(33, 33, 33, 0.66);
  padding: 20px;
  width: 50%;
  color: white;
  font-weight: normal;
  font-size: 17px;
}
.pane-node-body.with-bg_image_formatter .field-name-body p {
  color: white;
  font-weight: normal;
}
.pane-node-body.with-bg_image_formatter .field-name-body p.intro {
  font-size: 17px;
}
.pane-node-body.with-bg_image_formatter .field-name-body h1, .pane-node-body.with-bg_image_formatter .field-name-body h2, .pane-node-body.with-bg_image_formatter .field-name-body h3 {
  color: white;
  padding-bottom: .8em;
  border-bottom: 0.5px solid white;
  margin-bottom: .8em;
  font-weight: normal;
  margin-top: 0;
}
.pane-node-body.with-bg_image_formatter .field-name-body a {
  color: #42b5c3;
}

/*
  Design review introduces a "rainbow-featured" panel pane.
*/
.rainbow-featured.panel-pane {
  background-color: #ececec;
}
.rainbow-featured.panel-pane h2.pane-title {
  background-color: #003366;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  float: none;
  display: block;
  border: none;
}
.rainbow-featured.panel-pane h2.pane-title a, .rainbow-featured.panel-pane h2.pane-title a:link, .rainbow-featured.panel-pane h2.pane-title a:visited {
  color: white;
}
.rainbow-featured.panel-pane .field-name-title, .rainbow-featured.panel-pane .field-name-body, .rainbow-featured.panel-pane .field-name-node-link {
  margin: 0.70em 10px;
}
.rainbow-featured.panel-pane .field-name-node-link {
  line-height: 1em;
}
.rainbow-featured.panel-pane .field-name-title h2 {
  font-weight: normal;
  margin-top: 0.70em;
  border-bottom: 1px solid #111;
}
.rainbow-featured.panel-pane .field-name-title h2 a, .rainbow-featured.panel-pane .field-name-title h2 a:link, .rainbow-featured.panel-pane .field-name-title h2 a:visited {
  color: black;
}
.rainbow-featured.panel-pane .view-mode-3_column_pane {
  border-top: none;
}

.header-with-icon h2 {
  display: block;
  padding-left: 32px !important;
  background: url("../images/nav-icon-black.png") no-repeat left center;
}
.header-with-icon h2 a {
  color: black !important;
}

/*
 * Additions to the node sidebar.
 * 2016 Design Review https://projects.sparksinteractive.co.nz/issues/13735
 */
.field-name-field-related {
  margin-bottom: 1em;
}
.field-name-field-related .field-label {
  background-color: #003366;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  float: none;
  display: block;
}
.field-name-field-related .view-mode-teaser {
  background-color: #ececec;
  padding: 20px 20px;
  display: block;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  border-top: none;
  padding: none !important;
}

.field-name-field-sidebar {
  border: 2px solid silver;
  padding: 8px 18px;
  margin-bottom: 1em;
}
.field-name-field-sidebar h2, .field-name-field-sidebar h3 {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0.1em;
}

/**
 * Additions to override lightbox.css from lightbox2.module
 *
 * Lightbox is seen as a pop-up for some images embedded or attached
 * to stories.
 */
#lightbox a:focus {
  /*
   * The accessibility :focus causes browser rendering bug on lightbox slideshow prev/next hotspots
   * https://projects.sparksinteractive.co.nz/issues/17687#note-5
   */
  background-color: unset !important;
}

blockquote {
  font-size: 18px;
  padding: 40px;
  border-left: 6px solid #0078BC;
  margin-bottom: 30px;
  margin-top: 30px;
}

blockquote p {
  font-size: 18px;
  margin: 0;
}

blockquote cite {
  display: block;
  margin-top: 15px;
  font-style: italic;
  font-size: 15px;
}

.field-name-taxonomy-vocabulary-8 a {
  color: #00a1e4;
  background-color: #fff;
  border: 1px solid #008fcb;
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1.33;
}

.field-name-taxonomy-vocabulary-8 a:hover, .field-name-taxonomy-vocabulary-8 a:focus {
  background-color: #00a1e4 !important;
  color: #fff !important;
  outline: none;
}

.view-related-content .views-row {
  margin-bottom: 15px;
}

.view-related-content .field-name-title h2 {
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  padding: 7px 0 12px 0;
}

.field-name-media-gallery-file img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 740px) {
  .view-related-content .views-row {
    height: 325px;
    overflow: hidden;
  }
}
.view-related-content .view-content {
  margin-left: -10px;
  margin-right: -10px;
}

.container-12 .region.grid-9 .view-related-content .node-teaser {
  width: 100% !important;
}

.border-top {
  border-top: 1px solid #003366;
  padding-top: 15px;
}

.node-teaser.no-top-border {
  border: none;
}

.btn-primary {
  color: #fff;
  background-color: #0078BC;
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1.33;
  margin-right: 10px;
  display: inline-block;
  margin-bottom: 5px;
}
.btn-primary.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #006699 !important;
  color: #fff !important;
  outline: none;
}

/* add in btn and btn-default classes - CSS from NIWA */
.btn {
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1.33;
  margin-right: 10px;
  display: inline-block;
  margin-bottom: 5px;
}

.btn-default {
  color: #FFFFFF;
  background-color: transparent;
  border: 2px solid #FFFFFF;
}

.btn-default:hover, .btn-default:focus {
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.4) !important;
  outline: none;
  border: 2px solid #FFFFFF;
}

.page-user .field-name-taxonomy-vocabulary-8 .field-item {
  display: inline-block;
  float: left;
}
.page-user .field-name-taxonomy-vocabulary-8 a {
  color: #0078BC;
  background-color: #ffffff;
  border: 2px solid #0078BC;
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1.33;
  margin-right: 10px;
  display: inline-block;
  margin-bottom: 5px;
}
.page-user .field-name-taxonomy-vocabulary-8 a:hover {
  background-color: #0078BC !important;
  color: #ffffff !important;
}
.page-user .field-name-taxonomy-vocabulary-1 .field-label {
  line-height: 23px;
  margin-right: 0;
}
.page-user .field-label-inline .field-label {
  width: 120px;
}
.page-user .field-label-above .field-label,
.page-user .field-name-backref-research-projects h2.block-title {
  font-size: 15px;
  color: #222222;
  margin: 20px 0 12px 0;
}
.page-user.not-logged-in .tabs {
  display: none;
}

.user-image {
  display: inline-block;
  width: 250px !important;
}

.user-search-view,
.contacts_cards_view {
  padding: 0;
  margin: 0;
}
.user-search-view .item-list,
.contacts_cards_view .item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0;
}
.user-search-view .cardx,
.contacts_cards_view .cardx {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  max-width: 240px;
  flex: 1;
  min-height: calc(100% - 1rem);
  flex-basis: 240px;
  margin: 1rem;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(163, 163, 163, 0.39);
  -moz-box-shadow: 0px 1px 3px 0px rgba(163, 163, 163, 0.39);
  box-shadow: 0px 1px 3px 0px rgba(163, 163, 163, 0.39);
  /* transform: scale(0.9); */
  transition: all 0.3s ease-in-out;
}
.user-search-view .cardx .staff,
.contacts_cards_view .cardx .staff {
  display: block;
  width: 240px;
  height: 240px;
  background-image: url("../images/user-profile-placeholder.jpg");
}
.user-search-view .cardx .card-header,
.contacts_cards_view .cardx .card-header {
  display: block;
}
.user-search-view .cardx .card-body,
.contacts_cards_view .cardx .card-body {
  padding: 0 1rem;
}
.user-search-view .cardx .card-body .svg-inline--fa,
.contacts_cards_view .cardx .card-body .svg-inline--fa {
  margin-right: 1rem;
}
@media screen and (min-width: 740px) {
  .user-search-view .cardx,
  .contacts_cards_view .cardx {
    max-width: 228px;
    width: 100%;
    flex-basis: auto;
  }
}
@media screen and (min-width: 981px) {
  .user-search-view .cardx,
  .contacts_cards_view .cardx {
    max-width: 240px;
    width: 100%;
    flex-basis: auto;
  }
}
.user-search-view .cardx:hover,
.contacts_cards_view .cardx:hover {
  /* transform: scale(1); */
  -webkit-box-shadow: 0px 5px 7px 0px rgba(163, 163, 163, 0.39);
  -moz-box-shadow: 0px 5px 7px 0px rgba(163, 163, 163, 0.39);
  box-shadow: 0px 5px 7px 0px rgba(163, 163, 163, 0.39);
}
.user-search-view .cardx img,
.contacts_cards_view .cardx img {
  filter: grayscale(20%);
  filter: saturate(90%);
  transition: all 0.1s ease-in-out;
  width: 100%;
}
.user-search-view .cardx:hover img,
.contacts_cards_view .cardx:hover img {
  filter: grayscale(0%);
  filter: saturate(120%);
}
.user-search-view .region-content ul.cardx-list li.cardx a:hover div.summary,
.contacts_cards_view .region-content ul.cardx-list li.cardx a:hover div.summary {
  text-decoration: none;
}
.user-search-view .cardx a,
.contacts_cards_view .cardx a {
  display: block;
  margin: 0;
}
.user-search-view .blue-title,
.contacts_cards_view .blue-title {
  padding: 0 1rem;
  font-size: 1.2rem !important;
  line-height: 1.5rem;
  color: #0078BC;
}
.user-search-view .cardx a p,
.contacts_cards_view .cardx a p {
  padding: 0 1rem 1rem 1rem;
  color: #333;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
}
.user-search-view .cardx a:hover + div.summary,
.contacts_cards_view .cardx a:hover + div.summary {
  text-decoration: none !important;
}
.user-search-view .panel-panel .pane-content .content .sibling_pages ul li,
.contacts_cards_view .panel-panel .pane-content .content .sibling_pages ul li {
  background: none;
  padding: 0;
  margin: 1rem;
}
.user-search-view .single-line,
.contacts_cards_view .single-line {
  max-width: calc(240px - 2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-search-view .contact,
.contacts_cards_view .contact {
  background: #0078BC;
  color: #fff;
  display: inline-block;
  position: absolute;
  bottom: 0;
  line-height: 2rem;
  height: 2rem;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
}
.user-search-view .contact svg,
.contacts_cards_view .contact svg {
  height: 1rem;
}
.user-search-view .contact a,
.user-search-view .contact a:hover,
.contacts_cards_view .contact a,
.contacts_cards_view .contact a:hover {
  color: #fff;
  display: inline-block;
}

.views-submit-button {
  float: none;
}

.user-search-view .summary {
  margin-bottom: 2rem;
}

.form-reset {
  width: auto;
  color: #ffffff;
  background: #0078BC;
  padding: 15px 20px;
  margin: 40px 1rem;
  cursor: pointer;
  border-top: solid 1px #0078BC;
  border-bottom: solid 1px #0072AE;
  font-size: 15px;
}
.form-reset:hover {
  text-decoration: underline;
  color: #fff;
}

/**
 *  Used for issuu iframes.
 *  Just add the class and no other inline styles.
 */
.issuu {
  border: none;
  width: 100%;
  height: 245px;
}
@media (min-width: 441px) {
  .issuu {
    height: 400px;
  }
}
@media (min-width: 581px) {
  .issuu {
    height: 500px;
  }
}
@media (min-width: 981px) {
  .issuu {
    height: 580px;
  }
}

.go-top {
  cursor: pointer;
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 30px;
  position: fixed;
  bottom: -40px;
  right: 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #003366;
  color: #b5e2fc;
  text-decoration: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  z-index: 999999;
  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.8);
}

.go-top.show {
  bottom: 20px;
}

.go-top:hover {
  background-color: #0078BC;
  color: #fefefe;
}

/* 
Generic Styling, for Desktops/Laptops 
*/
table {
  min-width: 500px;
  width: 100%;
  border-collapse: collapse;
}

/* Zebra striping */
tr:nth-of-type(odd) {
  background: #eee;
}

th {
  background: #333;
  color: white;
  font-weight: bold;
}

td, th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}

.table-wrap {
  overflow: auto;
}

.video_view {
  padding: 0;
  margin: 0;
}
.video_view .item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0;
}
.video_view .item {
  border-radius: 3px;
  overflow: hidden;
  max-width: 280px;
  flex: 1;
  flex-basis: 280px;
  margin: 1rem;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(163, 163, 163, 0.39);
  -moz-box-shadow: 0px 1px 3px 0px rgba(163, 163, 163, 0.39);
  box-shadow: 0px 1px 3px 0px rgba(163, 163, 163, 0.39);
  /* transform: scale(0.9); */
  transition: all 0.3s ease-in-out;
}
@media screen and (min-width: 601px) {
  .video_view .item {
    max-width: 250px;
    flex-basis: 250px;
  }
}
@media screen and (min-width: 740px) {
  .video_view .item {
    max-width: 228px;
    width: 100%;
    flex-basis: auto;
  }
}
@media screen and (min-width: 981px) {
  .video_view .item {
    max-width: 250px;
    width: 100%;
    flex-basis: auto;
  }
}
.video_view .item:hover {
  /* transform: scale(1); */
  -webkit-box-shadow: 0px 5px 7px 0px rgba(163, 163, 163, 0.39);
  -moz-box-shadow: 0px 5px 7px 0px rgba(163, 163, 163, 0.39);
  box-shadow: 0px 5px 7px 0px rgba(163, 163, 163, 0.39);
}
.video_view .item img {
  filter: grayscale(20%);
  filter: saturate(90%);
  transition: all 0.1s ease-in-out;
  width: 100%;
}
.video_view .item:hover img {
  filter: grayscale(0%);
  filter: saturate(120%);
}
.video_view .region-content ul.item-list li.item a:hover p.summary {
  text-decoration: none;
}
.video_view .item a {
  display: block;
  margin: 0;
  height: 100%;
}
.video_view .blue-title {
  padding: 0 1rem;
  font-size: 1.2rem !important;
  line-height: 1.5rem;
  color: #0078BC;
}
.video_view .item a p {
  height: 100px;
  padding: 0 1rem 1rem 1rem;
  color: #333;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
}
.video_view .item a:hover + p.summary {
  text-decoration: none !important;
}
.video_view .panel-panel .pane-content .content .sibling_pages ul li {
  background: none;
  padding: 0;
  margin: 1rem;
}