/* ============================================================
   FONTS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

.work-sans-<uniquifier> {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* ============================================================
   BODY & GLOBAL
   ============================================================ */

body {
  font-family: "Work Sans", Arial, Helvetica, sans-serif;
  overflow-wrap: break-word;
  color: #171717;
}

@supports (font-variation-settings: normal) {
  body {
    letter-spacing: revert;
  }
}

input {
  font-family: "Work Sans", Arial, Helvetica, sans-serif;
}

select {
  font-family: "Work Sans", Arial, Helvetica, sans-serif;
}

option {
  font-family: "Work Sans", Arial, Helvetica, sans-serif;
}

main article {
  padding-bottom: 0;
}

h1 {
  letter-spacing:revert;
}

/* ============================================================
   HEADER & NAV
   ============================================================ */

header#main-header {
  --c-link: #fff;
  --c-link-hvr: #fff;
  --c-nav-dk: white;
  background-color: #000;
}

header#main-header .header-row-logo {
  padding: 0.5rem 0 1rem 0;
}

header#main-header .header-row-logo .header-row-logo--inner .search-box {
  border-radius: 0;
}

header#main-header .header-row-logo .header-row-logo--inner .logo-sitename {
  grid-template-columns: 10rem 1fr;
}

header#main-header .header-row-logo .header-row-logo--inner .logo-sitename .tas-gov-logo {
  border-right: none;
  filter: invert(100);
}

header#main-header .header-row-logo .header-row-logo--inner .logo-sitename .tas-gov-logo img {
  width: 9rem;
  filter: brightness(0);
}

header#main-header .header-row-logo .header-row-logo--inner .logo-sitename .sitename {
  font-size: 0.9rem;
  padding: 0.2rem 0 0 1.2rem;
  margin-top: 1rem;
  border-left: 2px solid #fff;
  max-width: 10rem;
}

header#main-header .header-row-logo .header-row-logo--inner .nav-toggle .icon-bar {
  height: 2px;
}

header#main-header .header-row-logo .header-row-logo--inner .nav-toggle .text-bar {
  filter: invert(1);
  font-weight: 500;
}

header#main-header .header-row-logo .header-row-logo--inner .nav-toggle.collapsed .icon-bar.top-bar {
  filter: invert(.9);
}

header#main-header .header-row-logo .header-row-logo--inner .nav-toggle.collapsed .icon-bar.middle-bar {
  filter: invert(.9);
}

header#main-header .header-row-logo .header-row-logo--inner .nav-toggle.collapsed .icon-bar.bottom-bar {
  filter: invert(.9);
}

.header-login-image {
  filter: invert(100);
  padding-top: 1rem;
}

.site-navigation.top-right {
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  color: #272727;
}

.site-navigation.top-right .disclosure-nav button {
  color: var(--c-nav-lt);
}

.site-navigation.top-right .disclosure-nav .main-link a {
  color: var(--c-nav-lt);
}

.site-navigation.top-right .disclosure-nav button:before {
  border-color: var(--c-nav-lt);
}

/* ============================================================
   HERO / TITLE BANNER
   ============================================================ */

main article header#article-header .banner.title-image {
  min-height: 500px;
}

main article header#article-header .banner.title-image .title-box {
  background-color: transparent;
}

.home #main-page-title {
  background-color: black;
  max-width: 15.2ch;
  padding: 0.1rem 0 0.3rem 1rem;
  margin-bottom: 0.5rem;
}

.page-type-landing #main-page-title {
  background-color: black;
  max-width: 15.2ch;
  padding: 0.1rem 0 0.3rem 1rem;
  margin-bottom: 0.5rem;
}

#main-page-title.offset {
  max-width: 15.5ch;
  margin-left: 3.6ch;
  margin-top: 0;
}

/* ============================================================
   PAGE BACKGROUND & LAYOUT
   ============================================================ */

.body-content.breakout.bkgd-light {
  background-color: #F4F7F8;
  box-shadow: 0px 0.5rem 2rem #00000006, inset 0px 0rem 0.125rem #2e4249;
}

.body-content.breakout.bkgd-dark {
  background-color: black;
}

/* ============================================================
   JOB SEARCH COMPONENT
   ============================================================ */

.job-search-wrapper {
  max-width: 965px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2rem;
  margin-top: 5rem !important;
  margin-bottom: 5.5rem !important;
  background-color: #F4F7F8;
  box-shadow: 0px 0.5rem 2rem #00000006, inset 0px 0rem 0.125rem #2e4249;
  border-radius: 4px;
}

.job-search {
  width: 900px;
  color: black;
  background: transparent;
  box-sizing: border-box;
}

.job-search * {
  box-sizing: inherit;
}

.job-search h1 {
  font-size: 1.5rem;
  font-weight: var(--f-medium);
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.job-search .field {
  background: #fff;
  border: 1px solid #2e424966;
  height: 2.7rem;
  display: flex;
  align-items: center;
}

.job-search .select {
  background: #fff;
  border: 1px solid #2e424966;
  height: 2.7rem;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 0 0 1rem;
}

.job-search .field:focus-within {
  border-color: black;
}

.job-search .select:focus-within {
  border-color: black;
}

.job-search .keyword {
  position: relative;
  padding: 0 3rem 0 1rem;
  flex: 1 1 auto;
}

.job-search .keyword input {
  border: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 1rem;
  outline: none;
}

.job-search .keyword::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  transform: translateY(-50%);
  background-image: url("https://www.tas.gov.au/__data/assets/git_bridge/0030/284097/images/default/google-icon-search_400_48.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5rem 1.5rem;
  opacity: 0.9;
  pointer-events: none;
}

.job-search .row {
  display: flex;
  gap: 1rem;
}

.job-search .row.filters {
  margin-top: 1rem;
}

.job-search .row.filters .select {
  flex: 1 1 0;
}

.job-search .select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  outline: none;
  color: black;
}

.job-search .select::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.job-search .button-wrap {
  margin-top: 18px;
}

.job-search .search-btn {
  display: inline-block;
  width: 8.5rem;
  height: 2.7rem;
  background: black;
  color: #fff;
  border: 1px solid #000;
  font-weight: 500;
  cursor: pointer;
  font-size: 1rem;
  font-family: "Roboto Flex", Arial, Helvetica, sans-serif;
  letter-spacing: .025rem;
}

.job-search .search-btn:hover {
  background-color: #fff;
  color: #000;
}

.button-wrap .subscribe-link {
  float: right;
  padding: 1rem 0 1rem 1rem;
}

/* ============================================================
   TILES (general)
   ============================================================ */

ul.tile-listing li {
  box-shadow: 0px 0.5rem 2rem #00000006, 0px 0rem 0.125rem #2e4249;
  border-radius: 4px;
}

ul.tile-listing a.tile {
  border: 0;
  border-radius: 4px;
}

ul.tile-listing div.tile {
  border: 0;
  border-radius: 4px;
}

ul.tile-listing a.tile .tile-image img {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

ul.tile-listing div.tile .tile-image img {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

ul.tile-listing a.tile .tile-text {
  margin-bottom: 2rem;
  padding: 1.5rem 1.5rem 0 1.5rem;
  font-weight: 500;
}

ul.tile-listing div.tile .tile-text {
  margin-bottom: 2rem;
  padding: 1.5rem 1.5rem 0 1.5rem;
  font-weight: 500;
}

ul.tile-listing a.tile .tile-text .tile-title {
  font-size: 1.3rem;
}

ul.tile-listing div.tile .tile-text .tile-title {
  font-size: 1.3rem;
}

ul.tile-listing a.tile .tile-text .tile-summary {
  border-top: 0;
}

ul.tile-listing div.tile .tile-text .tile-summary {
  border-top: 0;
}

ul.tile-listing a.tile:hover {
  background-color: black;
}

ul.tile-listing a.tile::after {
  bottom: 1rem;
  right: 1.5rem;
}

ul.tile-listing a.tile.no-description .tile-text {
  margin-bottom: 1.25rem;
}

ul.tile-listing a.tile.no-description::after {
  bottom: 1.25rem;
}

ul.tile-listing.col1 a.tile.no-description .tile-text {
  margin-bottom: 0;
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  background-color: #F4F7F8;
  border-radius: 4px;
}

ul.tile-listing.col1 a.tile.no-description:hover .tile-text {
  background-color: black;
}

ul.tile-listing.col2 {
  grid-gap: 2rem;
}

/* ============================================================
   WORKING TILES
   ============================================================ */

.workingtiles ul.tile-listing.col2 {
  grid-gap: 2rem;
}

.workingtiles ul.tile-listing a.tile .tile-text {
  padding: 1.5rem 1.5rem 0;
}

.workingtiles ul.tile-listing a.tile .tile-image {
  aspect-ratio: 2;
}

.workingtiles ul.tile-listing div.tile .tile-image {
  aspect-ratio: 2;
}

.workingtiles ul.tile-listing a.tile.external::after {
  display: none;
}

.workingtiles ul.tile-listing a.tile.external:hover::after {
  display: none;
}

.workingtiles ul.tile-listing a.tile:hover {
  background-color: #fff;
}

.workingtiles ul.tile-listing li:hover a.tile {
  color: #000;
}

.workingtiles .button-link.has-text {
  margin-top: 1.5rem;
}

/* ============================================================
   AGENCY TILES
   ============================================================ */

.agencytiles ul.tile-listing a.tile {
  background-color: #F4F7F8;
  color: #000;
  border: none;
  box-shadow: none;
}

.agencytiles ul.tile-listing div.tile {
  background-color: #F4F7F8;
  color: #000;
  border: none;
  box-shadow: none;
}

.agencytiles ul.tile-listing a.tile .tile-text {
  padding: 1.5rem;
}

.agencytiles ul.tile-listing div.tile .tile-text {
  padding: 1.5rem;
}

.agencytiles ul.tile-listing a.tile .tile-text .tile-title {
  font-size: 1.2rem;
  font-weight: 500;
}

.agencytiles ul.tile-listing div.tile .tile-text .tile-title {
  font-size: 1.2rem;
  font-weight: 500;
}

.agencytiles ul.tile-listing a.tile:hover {
  background-color: black;
}

.agencytiles ul.tile-listing li:hover a.tile {
  color: #fff;
}

/* ============================================================
   JOB OPPORTUNITIES TILES
   ============================================================ */

.jobopportunities ul.tile-listing a.tile .tile-text {
  margin-bottom: 0;
  padding: 1.5rem;
}

.jobopportunities ul.tile-listing div.tile .tile-text {
  margin-bottom: 0;
  padding: 1.5rem;
}

.jobopportunities ul.tile-listing a.tile:hover {
  background-color: #fff;
}

.jobopportunities ul.tile-listing li:hover a.tile {
  color: #000;
}

/* ============================================================
   SPECIFIC TILE OVERRIDES
   ============================================================ */

ul.tile-listing a#tile479738 .tile-image img {
  object-position: bottom;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.button-link a {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 0;
}

.button-link:hover a {
  background-color: white;
  color: black;
}

.styled-box.text-btn-link {
  border: none;
}

.styled-box.text-btn-link .styled-box--inner .styled-box--button a {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 0;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
}

.alt-feature-boxes .alt-feature-box .alt-feature-box--text a.box-button {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 0;
}

.alt-feature-boxes .alt-feature-box .alt-feature-box--text a.box-button:hover {
  background-color: black;
  color: white;
  border: 1px solid white;
}

.pills-banner ul li a {
  background-color: black;
  border: 1px solid black;
  border-radius: 0;
}

/* ============================================================
   ALT FEATURE BOXES
   ============================================================ */

.alt-feature-boxes .alt-feature-box .alt-feature-box--image img {
  max-height: 600px;
}

.alt-feature-boxes .alt-feature-box .alt-feature-box--text .box-headline {
  font-size: 3.5rem;
  font-weight: var(--f-medium);
  line-height: 1.1;
  max-width: 35rem;
}

.box-description p {
  font-size: 1.2rem;
}

.bkgd-dark .alt-feature-boxes .alt-feature-box .alt-feature-box--text a.box-button {
  background-color: #F4F7F8;
  border: 1px solid #F4F7F8;
  color: black;
  font-weight: 500;
}

.bkgd-dark .alt-feature-boxes .alt-feature-box .alt-feature-box--text a.box-button:hover {
  background-color: black;
  border: 1px solid white;
  color: white;
}

/* ============================================================
   LOREM FEATURE
   ============================================================ */

.loremfeature .alt-feature-boxes {
  color: #fff;
}

.loremfeature .alt-feature-boxes .alt-feature-box {
  background-color: transparent;
}

.loremfeature .styled-box.text-btn-link .styled-box--inner .styled-box--button a {
  background-color: #F4F7F8;
  color: #000;
}

/* ============================================================
   SEE AGENCIES
   ============================================================ */

.seeagencies .styled-box {
  padding: 1rem 0;
}

.seeagencies .styled-box.text-btn-link.no-icon {
  max-width: 40rem;
}

.seeagencies .styled-box h2 {
  font-size: 2.5rem;
  font-weight: var(--f-medium);
  margin-bottom: 0;
}

.seeagencies .styled-box--text p {
  font-size: 1.1rem;
}

/* ============================================================
   STYLED BOX
   ============================================================ */

.styled-box--text h2 {
  padding-top: 0.125rem;
}

.styled-box.more-info {
  border-radius: 4px;
}

.one-column .styled-box {
  max-width: var(--max-width);
}

/* ============================================================
   CONTENT PAGE LAYOUT
   ============================================================ */

.page-type-content main article header#article-header {
  background-color: #F4F7F8;
  background-image: none;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0px 0.5rem 2rem #00000006, inset 0px 0rem 0.125rem #2e4249;
}

.page-type-content main article header#article-header .banner.title-only .title-box .title-box--inner h1 {
  font-size: 2.5rem;
  font-weight: var(--f-medium);
  margin: 0.75rem 0 0.75rem;
}

.page-type-content main article header#article-header .banner.title-only .title-box .title-box--inner {
  padding: 0 1rem 0 0;
}

.page-type-content main article header#article-header .breadcrumbs-bar {
  background-color: #F4F7F8;
  padding: 1rem 0 0;
}

.page-type-content #content-wrapper.two-columns #body-content-wrapper .body-content.contain {
  margin-bottom: 4rem;
}

#content-wrapper.three-columns #body-content-wrapper .body-content.contain {
  margin-bottom: 4rem;
}

.page-type-content #maincontent::before {
  content: "";
  height: 300px;
  display: block;
  background-image: url(https://www.tas.gov.au/__data/assets/image/0027/483507/BrandTasmania_Bob-Muller_Work_100.jpg);
  background-position: 0% 52%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: brightness(1.2) contrast(.9);
  box-shadow: inset 0px 1.625rem .5rem -16px #0006;
}

.page-type-content .button-link a {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 0;
}

.page-type-content .button-link:hover a {
  background-color: white;
  color: black;
}

main article #content-wrapper.one-column #body-content-wrapper .body-content .styled-box--text p {
  max-width: var(--max-width);
}

/* ============================================================
   SECONDARY NAV
   ============================================================ */

#secondary-nav .secondary-menu {
  background-color: #F4F7F8;
  box-shadow: 0px 0.5rem 2rem #00000006, inset 0px 0rem 0.125rem #2e4249;
  border-radius: 4px;
  text-shadow: 0 0 1.5rem #fff;
}

.page-type-content #secondary-nav .secondary-menu {
  background-color: #F4F7F8;
}

.page-type-content #secondary-nav .secondary-menu li {
  margin: 0.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
}

.page-type-content #secondary-nav .secondary-menu li:last-child {
  margin: 0.5rem 0;
  padding-bottom: 0;
}

.secondary-menu.secondary-menu-siblings {
  margin-bottom: 4rem !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

#breadcrumbs span {
  display: none;
}

/* ============================================================
   DETAILS / ACCORDION
   ============================================================ */

details {
  border: none;
  box-shadow: 0px 0.5rem 2rem #00000006, 0px 0rem 0.125rem #2e4249;
  border-radius: 4px;
}

.page-type-content details summary {
  display: flex;
  justify-content: space-between;
  padding: 1rem 4rem 1rem 1.5rem;
  background-color: #F4F7F8;
  border-radius: 4px;
}

.page-type-content details summary::after {
  content: "+";
  font-size: 2.5rem;
  font-weight: 200;
  line-height: 0.6;
  margin-right: -2.5rem;
  padding-left: 1rem;
}

.page-type-content details[open] > summary {
  border-bottom: 1px solid #2e424944;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.page-type-content details[open] > summary::after {
  content: "–";
  margin-right: -2.375rem;
}

.page-type-content details summary:hover {
  background-color: black;
}

.page-type-content details summary:focus {
  background-color: black;
}

/* ============================================================
   FEATURED DOC
   ============================================================ */

.featured-doc {
  border: none;
  box-shadow: 0px 0.5rem 2rem #00000006, inset 0px 0rem 0.125rem #2e4249;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.featured-doc.no-thumb.small-feature {
  padding: 0.25rem;
}

.featured-doc .featured-doc--inner {
  padding: 1rem 1rem 1rem 5.5rem;
}

.featured-doc .featured-doc--inner::before {
  height: 5rem;
  left: 1.25rem;
  top: 1rem;
  width: 3.4rem;
  filter: opacity(75%);
}

.featured-doc .featured-doc--inner .file-title {
  font-weight: var(--f-semi-bold);
}

.featured-doc .featured-doc--inner .file-links a:hover {
  background-color: white;
  color: var(--c-blue);
  text-shadow: 0px 0px 1px #32629566;
}

/* ============================================================
   IFRAME
   ============================================================ */

#content-wrapper.two-columns iframe {
  max-width: var(--max-content);
  border-radius: 4px;
  box-shadow: 0px 0.5rem 2rem #00000006;
  aspect-ratio: 1.5;
}

/* ============================================================
   MEANINGFUL WORK FOOTER
   ============================================================ */

.meaningful-work-footer-outer {
  background-color: black;
  color: white;
}

.meaningful-work-footer-inner {
  display: grid;
  grid-template-areas: "title text";
  grid-auto-columns: 1fr 1.5fr;
}

.meaningful-work-footer-inner-title {
  grid-area: title;
  padding-right: 4.5rem;
  padding-left: 1.125rem;
}

.meaningful-work-footer-inner-title h2 {
  font-size: 3.2rem;
  margin-top: 1.125rem;
  padding-top: 0;
}

.meaningful-work-footer-inner-text {
  grid-area: text;
  padding-right: 3rem;
}

.meaningful-work-footer-inner-text p {
  font-size: 1.125rem;
  font-weight: 450;
}

/* ============================================================
   FOOTER
   ============================================================ */

footer {
  display: flex;
  flex-direction: column;
}

footer #custom-footer {
  order: 1;
  background-color: black;
}

footer #acknowledgement {
  order: 2;
  background-color: #272727;
}

footer #acknowledgement .acknowledgement-wrapper .acknowledgement-border {
  padding: 0;
  font-size: 1rem;
  border: none;
}

footer #mandatory-footer {
  order: 3;
  background-color: #171717;
}

.acknowledgement-border p {
  margin: 0;
}

/* ============================================================
   RESPONSIVE — max-width: 1500px
   ============================================================ */

@media screen and (max-width: 1500px) {
  main article header#article-header .banner.title-image {
    grid-template-columns: 3rem 70% auto 3rem;
  }
}

/* ============================================================
   RESPONSIVE — min-width: 74rem (layout: sidebar)
   ============================================================ */

@media screen and (min-width: 74rem) {
  .page-type-content main article #content-wrapper.two-columns.has-left-sidebar {
    grid-template-columns: 1fr 345px;
    grid-template-areas: "body-content left-sidebar";
  }

  .page-type-landing main article #content-wrapper.two-columns.has-left-sidebar {
    grid-template-columns: 1fr 345px;
    grid-template-areas: "body-content left-sidebar";
  }

  .page-type-content main article #content-wrapper .left-sidebar {
    margin-right: 0;
    margin-left: 3rem;
  }
}

/* ============================================================
   RESPONSIVE — max-width: 94rem
   ============================================================ */

@media (max-width: 94rem) {
  .acknowledgement-border p {
    display: inline;
  }
}

/* ============================================================
   RESPONSIVE — max-width: 74rem
   ============================================================ */

@media (max-width: 74rem) {
  main article header#article-header .banner.title-image {
    min-height: 300px;
  }

  .meaningful-work-footer-inner {
    grid-template-areas: "text";
    grid-auto-columns: auto;
  }

  .meaningful-work-footer-inner-title {
    grid-area: text-start;
    padding-left: 0;
  }

  .meaningful-work-footer-inner-text {
    grid-area: unset;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-right: 0;
  }

  header#main-header .header-row-logo .header-row-logo--inner .nav-toggle.collapsed .icon-bar.top-bar {
    filter: invert(.1);
  }

  header#main-header .header-row-logo .header-row-logo--inner .nav-toggle.collapsed .icon-bar.middle-bar {
    filter: invert(.1);
  }

  header#main-header .header-row-logo .header-row-logo--inner .nav-toggle.collapsed .icon-bar.bottom-bar {
    filter: invert(.1);
  }

  header#main-header .header-row-logo .header-row-logo--inner .nav-toggle .text-bar {
    filter: invert(0);
  }
}

/* ============================================================
   RESPONSIVE — min-width: 63rem and max-width: 74rem
   ============================================================ */

@media (min-width: 63rem) and (max-width: 74rem) {
  main article header#article-header .banner.title-image .title-box .title-box--inner h1 {
    font-size: 3.4rem;
  }

  main article header#article-header .banner.title-image .title-box .title-box--inner .slogan {
    font-size: 3.4rem;
  }

  main article header#article-header .banner.title-colour .title-box .title-box--inner h1 {
    font-size: 3.4rem;
  }

  main article header#article-header .banner.title-colour .title-box .title-box--inner .slogan {
    font-size: 3.4rem;
  }
}

/* ============================================================
   RESPONSIVE — max-width: 70rem
   ============================================================ */

@media (max-width: 70rem) {
  main article header#article-header .banner.title-image .title-box .title-box--inner h1 {
    font-size: 2.2rem;
  }

  main article header#article-header .banner.title-colour .title-box .title-box--inner h1 {
    font-size: 2.2rem;
  }
}

/* ============================================================
   RESPONSIVE — max-width: 62rem
   ============================================================ */

@media screen and (max-width: 62rem) {
  header#main-header .header-row-logo .header-row-logo--inner .nav-toggle {
    filter: invert(1);
  }
  
 .page-type-content #maincontent::before {
  height: 200px;
}

  .title-box--inner {
    max-width: 100%;
  }

  .meaningful-work-footer-inner-title {
    padding-right: 0;
  }

  .meaningful-work-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  #content-wrapper.one-column #body-content-wrapper .body-content.breakout .component-wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .body-content.breakout.bkgd-white {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .alt-feature-boxes .alt-feature-box .alt-feature-box--text {
    align-content: center;
    grid-area: text;
    padding: 2rem 1.5rem;
  }
  
  .body-content.breakout.bkgd-light {
    padding-left: 1rem;
    padding-right: 1rem;
    }
}

/* ============================================================
   RESPONSIVE — max-width: 62rem (job search wrapper)
   ============================================================ */

@media (max-width: 62rem) {

  .job-search {
    width: 100%;
  }

  .job-search .row {
    flex-wrap: wrap;
  }

  .job-search .row.filters .select {
    flex: 1 1 220px;
  }
  
  .job-search-wrapper {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
  }

  .button-wrap .subscribe-link {
    padding: 1rem 0 0 0;
    display: block;
    text-align: right;
    font-size: 0.75rem;
  }
}

/* ============================================================
   RESPONSIVE — max-width: 34rem
   ============================================================ */

@media (max-width: 34rem) {
  header#main-header .header-row-logo {
    padding: 0.5rem 0 0.5rem 0;
  }

  header#main-header .header-row-logo .header-row-logo--inner {
    min-height: 60px;
  }

  header#main-header .header-row-logo .header-row-logo--inner .logo-sitename {
    grid-template-columns: 7rem 1fr;
  }

  header#main-header .header-row-logo .header-row-logo--inner .logo-sitename .tas-gov-logo img {
    width: 6rem;
  }

  header#main-header .header-row-logo .header-row-logo--inner .logo-sitename .sitename {
    font-size: 0.625rem;
    padding: 0.2rem 0 0 0.75rem;
    margin-top: .5rem;
  }

  .header-login-image {
    padding-top: 0.75rem;
    margin-right: 0.25rem;
    max-width: 3.5rem;
  }

  main article header#article-header .banner.title-image {
    min-height: 200px;
    grid-template-rows: 0 auto 0;
  }

  main article header#article-header .banner.title-image .title-box .title-box--inner {
    padding: 2rem 0rem 2rem 0;
  }

  main article header#article-header .banner.title-colour .title-box .title-box--inner {
    padding: 2rem 0rem 2rem 0;
  }

  main article header#article-header .banner.title-image .title-box .title-box--inner h1 {
    font-size: 1.6rem;
  }

  main article header#article-header .banner.title-colour .title-box .title-box--inner h1 {
    font-size: 1.6rem;
  }

  .home #main-page-title {
    max-width: 16.2ch;
    padding: 0.1rem 0 0.3rem 0.5rem;
  }

  .page-type-landing #main-page-title {
    max-width: 16.2ch;
    padding: 0.1rem 0 0.3rem 0.5rem;
  }

  .home #main-page-title.offset {
    max-width: 16.5ch;
  }

  .page-type-landing #main-page-title.offset {
    max-width: 16.5ch;
  }

  .contain {
    padding: 0 1rem;
  }

  .body-content.contain {
    padding: 0 1.5rem;
  }
}