/*
  Running Squiz Matrix
  Developed by Squiz - http://www.squiz.net
  Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd
  Page generated: 27 February 2020 14:10:06
*/


@font-face {
  font-family: 'MuseoSans-300';
  src: url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0009/6975/MuseoSans-300.eot?v=0.2.1');
  src: url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0009/6975/MuseoSans-300.eot?v=0.2.1?#iefix') format('embedded-opentype'),
       url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0003/6978/MuseoSans-300.woff?v=0.2.1') format('woff'),
       url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0011/6977/MuseoSans-300.ttf?v=0.2.1') format('truetype'),
       url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0010/6976/MuseoSans-300.svg?v=0.2.1#wf') format('svg');
}

@font-face {
  font-family: 'Bebasneue-Bold';
  src: url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0010/6967/bebasneue_bold-webfont.eot?v=0.2.1');
  src: url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0010/6967/bebasneue_bold-webfont.eot?v=0.2.1?#iefix') format('embedded-opentype'),
       url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0004/6970/bebasneue_bold-webfont.woff?v=0.2.1') format('woff'),
       url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0003/6969/bebasneue_bold-webfont.ttf?v=0.2.1') format('truetype'),
       url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0011/6968/bebasneue_bold-webfont.svg?v=0.2.1#wf') format('svg');
}

@font-face {
  font-family: 'icomoon';
  src: url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0005/6971/icomoon-WAL.eot?v=0.2.1');
  src: url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0005/6971/icomoon-WAL.eot?v=0.2.1?#iefix') format('embedded-opentype'),
       url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0008/6974/icomoon-WAL.woff?v=0.2.1') format('woff'),
       url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0007/6973/icomoon-WAL.ttf?v=0.2.1') format('truetype'),
       url('https://www.wearalifejacket.vic.gov.au/__data/assets/file/0006/6972/icomoon-WAL.svg?v=0.2.1#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}




.aspect-box { position: relative; width: 100%; }
.aspect-box:before { content: ""; display: block; }
.aspect-box > div:first-child,
.aspect-box > iframe:first-child { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: none; width:100%; height: 100%; }

.aspect-box:before           { padding-top: 56.25%; }     /* 16:9 (default) */
.aspect-box.ratio_1_1:before { padding-top: 100%;   }   /* 1:1 */
.aspect-box.ratio_2_1:before { padding-top: 50%;    }   /* 2:1 */
.aspect-box.ratio_4_3:before { padding-top: 75%;    }   /* 4:3 (TV letterbox) */
.aspect-box.ratio_1_2:before { padding-top: 200%;   }   /* 1:2 */





html { font: 120%/1.5 "MuseoSans-300", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font: 100%/0.9 "Bebasneue-Bold", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; letter-spacing: 0; -webkit-font-smoothing: antialiased; color: #fe8321; }
h1 { margin: 0.8em 0 0.5em 0; font-size: 3em; }
h2 { margin: 1em 0 0.5em 0; font-size: 2em; }
h3 { margin: 1em 0 0.5em 0; font-size: 1.4em; }
h4 { margin: 1em 0 0.5em 0; }
p  { margin: 0 0 1.4em 0; }
ul { margin: 0 0 1em 0; }
li { margin: 0 0 0.3em 0; }
a { color: #0070C6; }
a:hover { color: #3D68BF; text-decoration: none; }
blockquote { margin: 0 3em 1em 3em; padding:2em 6em; font-style: italic; color: #666666; background-repeat: repeat-y; background-position: left -3px center; }
table { border-collapse: collapse; border: 1px solid #ddd; width:100%; margin:0; margin-bottom:1em;}
table th { background-color:#eee; border: 1px solid #ddd; text-align:left; padding:5px 7px; color: #000000; vertical-align: top; font-weight: bold; }
table td { border: 1px solid #ddd; padding: 5px 7px; vertical-align:top; }
table th p {margin-bottom:inherit !important;} /* TODO check if this is really needed */
table caption { font-style: italic; margin-bottom: 0.4em; text-align: left; }



nav li, footer li { margin-bottom: 0; } /* exceptions to above li margin - TD these are better in relevant sections TODO */



/* Box Sizing (define here rather than against individual elements in the site) - some specificity required to override normalize.css */
div, p, li, form, input, input[type="search"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}


.no-padding { padding: 0 !important; }
.text-centre { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.hidden { display: none !important; }
.visuallyhidden, .visually-hidden { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; }
.wrap { min-width: 150px; margin: 0 auto; max-width: 1300px; padding:0 1em; position: relative; }

.tablesmalltext { font-size: 11px; } /* use relative em?? TODO is this required */

button, .button, .button-alt {
    padding: 0.5em 1em; 
    display: block; 
    text-decoration: none; 
    text-transform: uppercase;
  text-align: center;    
    margin: 1em 0 0 0;
    -webkit-transition: color .1s linear, background-color .1s ease-in-out;
    -moz-transition: color .1s linear, background-color .1s ease-in-out;
    -o-transition: color .1s linear, background-color .1s ease-in-out;
    transition: color .1s linear, background-color .1s ease-in-out;
}

button:hover, .button:hover, .button-alt:hover {
    -webkit-transition: color .1s linear, background-color .1s ease-in-out;
    -moz-transition: color .1s linear, background-color .1s ease-in-out;
    -o-transition: color .1s linear, background-color .1s ease-in-out;
    transition: color .1s linear, background-color .1s ease-in-out
}

button, .button { border: none; color: #fff; background: #30a0f6; }
button:hover, .button:hover { background: #0070c6; text-decoration: none; color: #fff; }

.button-alt { border: 1px solid #000; color: #000; background: transparent; }
.button-alt:hover { background: #666; text-decoration: none; color: #fff; }

/* Icon buttons */
.button-icon { cursor: pointer; color: #fff; width: 40px; height: 40px; padding: 0; line-height: 40px !important; display: inline-block; outline: 0 none; text-align: center; font-family: 'icomoon'; font-size: 30px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-decoration: none; text-transform: none; line-height: 1; border: none; background-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.button-icon:before {font-family: 'icomoon';}
.button-icon:hover {color: #fff; background-color: rgba(238,238,238,.5); }

/* Inline lists */
.inline-list { list-style: none; display: inline; padding: 0; }
.inline-list > li { list-style: none; display: inline; padding: 0; }

/* Video Player */
.video-player { max-width: 560px; margin-left: auto; margin-right: auto; }
.video-player + .caption { max-width: 560px; background: #eee; padding: 0.8em 1em; font-size: 0.8em; margin-left: auto; margin-right: auto; position: relative; }

/* Highlight */
.highlight { margin-bottom: 1em; padding: 1.4em 2.5em 0.2em 2.5em; color: #fff; background: #491600; }
.highlight p,
.highlight h1,
.highlight h2,
.highlight h3,
.highlight h4 { color:#fff; }

.word-break { 
  -ms-word-break: break-all;
  word-break: break-all;

  /* Non standard for webkit */
  word-break: break-word;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* phone styles */
@media (max-width: 480px) {
  .phone-hidden { display: none !important; }
}

/* tablet styles */
@media (min-width: 481px) and (max-width: 1023px) {
  .tablet-hidden { display: none !important; }
}

/* desktop styles */
@media (min-width: 1024px) {
  .desktop-hidden { display: none !important; }
  .desktop-grid, .desktop-grid-fixed { display: table; width: 100%; box-sizing: border-box; }
  .desktop-grid > [class*="grid-col"], .desktop-grid-fixed > [class*="grid-col"] { display: table-cell; vertical-align: top; overflow: hidden; box-sizing: border-box; }
  .desktop-grid-fixed { table-layout: fixed; }
  .desktop-grid-fixed > .grid-col    { width:  8.33333%; }
  .desktop-grid-fixed > .grid-col-2  { width: 16.66667%; }
  .desktop-grid-fixed > .grid-col-3  { width: 25%;       }
  .desktop-grid-fixed > .grid-col-4  { width: 33.33333%; }
  .desktop-grid-fixed > .grid-col-5  { width: 41.66667%; }
  .desktop-grid-fixed > .grid-col-6  { width: 50%        }
  .desktop-grid-fixed > .grid-col-7  { width: 58.33333%; }
  .desktop-grid-fixed > .grid-col-8  { width: 66.66667%; }
  .desktop-grid-fixed > .grid-col-9  { width: 75%;       }
  .desktop-grid-fixed > .grid-col-10 { width: 83.33333%; }
  .desktop-grid-fixed > .grid-col-11 { width: 91.66667%; }
}

header { border-bottom: 1px solid #ff8421; position: fixed; top: 0; width: 100%; /* height: 3.5em; */ line-height: 3.5em; background:#fff; z-index: 999; }
  

header nav img { vertical-align: middle; }
header nav button { display: block; color: #FFF; background: #666666; top: 0; right: 0; padding: 4px 40px 4px 20px; margin: 1em; line-height: 1.5; border: none; position: absolute; }
header nav button:hover { color: #FFF; background: #333; }
header nav button:after { font-family: "icomoon"; content: "\f105"; position: absolute; top: 0; right: 0; font-size: 1.5em; line-height: 32px !important; display: block; width: 32px; height: 32px; }
header nav button.active:after { content: "\f107"; }
header nav ul { position: absolute; left: 0; right: 0; margin: 1px 0 0 0 !important; padding: 0; z-index: 1; list-style: none; background: white; line-height: 1.5; }
header nav ul { display: none; } /* TODO - check this, default state maybe? */
header nav ul a { text-decoration: none; padding: 1em 1.4em; font-size: 0.8em; text-transform: uppercase; }
header nav ul a:hover,nav ul a.selected  { background: #eee; }
header nav ul li { display: block; text-align: center; overflow: hidden; border-bottom: solid 1px #EEEEEE; }
header nav ul li a { display: block; }
  
/* desktop styles */
@media (min-width: 1024px) {
  header nav .wrap { display: table; width: 100%; padding-right: 0; }
    header nav .wrap > a { display: table-cell; vertical-align: middle; }
    header nav .wrap > .link-wrapper { display: table-cell; vertical-align: middle; }
    header nav ul { display: table !important; position: relative; float: right; padding: 0; margin:0; text-align: right; vertical-align: middle; } /* important forces menu to display in desktop mode */
    header nav ul li { display: table-cell; padding: 0; border: none; vertical-align: middle; }
  header nav ul li a { display: inline-block; }
}

main { padding-top: 3.5em; }

.banner { position: relative; }
.banner img { width: 100%; display: block; }
.banner p { font: 100%/0.9 "Bebasneue-Bold", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; letter-spacing: 0; -webkit-font-smoothing: antialiased; color: #fff; position: absolute; left: .4em; text-transform: uppercase; top: 1em; width: 50%; font-size: 4vw; margin-top: 0 !important; }
.banner p > span { display: block; font-size: 0.4em; margin-top: 0.5em; }

.home .banner p { color: #fe8321; font-size: 5vw; } /* TODO refactor into home style group */


.wizard-container { padding: 1em 0 2em 0; margin: 1.4em 0; }

.description-container { background: #ecebea; padding: 2em 0; margin: 1.4em 0; }
.description-container  img { width: 100%; }
.description-container .description-image  { position:relative; }
.description-container .description-image h2 { position: absolute; bottom: 100%; left: 4%; font-size: 3vw; margin: 0; padding: 0; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 3px #000; }
.description-container .description-image:hover img { opacity: 0.9; }
.description-container p.description { min-height: 7em; padding-top: 1em; }
    
.social-container { background: #fff; padding: 2em 0; }
.social-container h2 { margin: 0 0 0.4em 0; }
.social-icons { margin: -1em 0 2em 0; padding: 0 0 2em 0; border-bottom: 1px solid #eee; }
    
.twitter-timeline { height: 400px; width: 100% !important; }

ol.labels-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
    margin: 0 2em;
    padding: 2em;
    counter-reset: li-counter;
}

ol.labels-list > li {
    display:table;
    width: 100%;
    position: relative;
    margin-top: 3em;
    padding: 1.5em 0 2em 1.6em;
    border-bottom: 1px solid #ddd;
}

ol.labels-list > li:first-child { margin-top: 0; }

ol.labels-list > li:before {
    position: absolute;
    top: -0.3em;
    left: -1em;
    width: 1.8em;
    height: 1.2em;

    font-size: 2em;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: #fe8321;

    transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    z-index: 99;
    overflow: hidden;

    content: counter(li-counter);
    counter-increment: li-counter;

}

.labels-list img { display:table-cell; vertical-align: top; padding-left: 1em; background-color: #fff; }
.labels-list p { display: table-cell; vertical-align: top; width: 85%; }


/* phone styles */
@media (max-width: 480px) {
    ol.labels-list  { margin: 0; padding: 0; }
    .labels-list img { margin: 0 auto; display: block; padding-right:3em; }
    .labels-list p { display: block; }
}


footer { color: #ddd; padding: 1.5em 0; background: #3e3e3c; text-align: center; }
footer a { color: #ddd; text-decoration: none; }
footer a:hover { color: #ddd; text-decoration: underline; }

footer p { margin: 0; }
footer ul { list-style: none; margin: 1em 0; padding: 0;}
footer ul li { border-bottom: 1px dashed #555; }
footer ul li:first-child { border-top: 1px dashed #555; }
footer ul li a { display: block; padding: 0.4em 0; }
footer ul li a:hover { background: #444; text-decoration: none; }

/* desktop styles */
@media (min-width: 1024px) {
  footer ul li { border: none;  display: inline-block; margin: 0 1em; }
  footer ul li:first-child { border: none; }
  footer ul li a { display: inline; padding: 0; }
  footer ul li a:hover { color: #ddd; background: #333; text-decoration: underline; }
  footer .logo-links { position: absolute; right: 1em; }
  footer .logo-links a { display: block; text-align: right; }
}

/* Override to prevent the text getting too big on very wide screens and extending below the image. */
@media (min-width: 2200px) {
  .banner-container p.home-message { font-size: 550%; }
}

#sa-login-bar { top: 4.3em; z-index: 1; } /* special rules for login bar, resolves issues with fixed positioned header */

.home .grid-col { padding-right: 1em; }
.home .grid-col + .grid-col { padding-left: 1em; padding-right: 0; }

/* tablet styles */
@media (min-width: 481px) and (max-width: 1023px) {
   .home .grid-col + .grid-col { padding-left: 0; padding-right: 1em; }
}

/* phone styles */
@media (max-width: 480px) {
   .home .grid-col + .grid-col { padding-left: 0; padding-right: 1em; }
}

.wrap > p:first-child { margin-top: 1.4em; }