@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Open+Sans:wght@300;400;700&family=Raleway&family=Roboto:wght@100;400;700&display=swap');
    /* font-family: 'Lato', sans-serif; | font-family: 'Open Sans', sans-serif | font-family: 'Raleway', sans-serif; | font-family: 'Roboto', sans-serif; */
    :root{
    --url-logo:	url(https://www.nawic.com.au/images/nawic2021/logo.png);
    --url-icon-edit: url(https://www.nawic.com.au/images/nawic2021/icon-edit-navy.svg);
    --url-icon-headphones: url(https://www.nawic.com.au/images/nawic2021/icon-headphones-navy.svg);
    --url-icon-search: url(https://www.nawic.com.au/images/nawic2021/icon-search-navy.svg);
    --url-icon-shopping-cart: url(https://www.nawic.com.au/images/nawic2021/icon-shopping-cart-navy.svg);
    --heading-font-family:		'Lato', sans-serif;
    --body-font-family:			'Open Sans', sans-serif;
    --logo-font-family:			'Raleway', sans-serif;
    --alt-font-family:			'Roboto', sans-serif;
    --default-font-colour:		#444444;
    /* primary palette */
    --plum:						#581121;
    --navy:						#132a4c;
    --aegean:					#004f6d;
    --cerise:					#a40234;
    /* secondary palette */
    --quartz:					#c77780;
    --dark-cyan:				#436870;
    /* accent palette - for social and collateral use only */
    --khaki:					#d2af5e;
    --steel-blue:				#8dafb9;
    --brick:					#8b341e;
    --shell:					#f6f2f3;
    }
    html{ font-size: 16px; }
    body{ padding-top: 137px; color: var(--default-font-colour); font-family: var(--body-font-family); font-size: 1rem; }
    h1,h2,h3,h4,h5,h6{ font-family: var(--heading-font-family); }
    h1{ color: var(--cerise); font-size: 2.4rem; font-weight: 700; }
    h2{ color: var(--navy); font-size: 1.6rem; font-weight: 400; text-transform: uppercase; }
    h2+p{ margin-top: 2rem; }
    h3{ color: var(--cerise); font-size: 1.4rem; font-weight: 700; }
    h3+p{ margin-top: 1.5rem; }
    h4{ color: var(--aegean); font-size: 1.2rem; font-weight: 700; }
    h4+p{ margin-top: 1.3rem; }
    a,input,button{ cursor: pointer; transition: all 0.3s; }
    .col-primary a{ color: var(--aegean); font-weight: 700; text-decoration: none; }
    .col-primary a:hover{ color: var(--cerise); font-weight: 700; text-decoration: none; }
    .backToTop{ display: none; }
    /* easy edit */
	/* body.EasyEditOn{ padding-top: 0px; }*/
	#ste_container_ciFullWidthContent.EasyEditContent{ margin-top: 240px; }
    /* general layout */
    .wrapper .main-container{ margin-bottom: 0; }
    .inner{ display: block; width: 100%; max-width: 1360px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
    .container{ max-width: 1360px; padding-left: 15px; padding-right: 15px; }
    .iMIS-WebPart > .ContentItemContainer, .WebPartZone > .ContentItemContainer{ margin-bottom: 0; }
    .panel-body, .PanelBody{ padding: 0; }
    .col-primary{ display: block; padding: 0; }
    .has-secondary-col .body-container .col-primary{ grid-column: 2 / span 2; padding-top: 1rem; padding-bottom: 3rem; }
    .has-secondary-col .body-container .col-secondary{ display: none; }
    .has-secondary-col .main-container{ background: none; }
    #masterMainBreadcrumb{ display: block; margin-bottom: 1rem; }
    .breadcrumb{ font-size: 0.8rem; }
    .breadcrumb li:not(:last-of-type):after{ padding: 0 0.7rem; }
    .breadcrumb a{ color: var(--navy); font-weight: 700; text-decoration: none; }
    .breadcrumb a:hover{ color: var(--cerise); font-weight: 700; text-decoration: none; }
    /* general content */
    .content{  }
    .content p{ font-size: 0.8rem; line-height: 1.6rem; }
    .padtop{ padding-top: 2rem; }
    .padtop.bigpad{padding-top: 4rem;}
    .padbottom{ padding-bottom: 2rem; }
    .padbottom.bigpad{padding-bottom: 4rem;}
    .sideimage{ display: flex; flex-wrap: nowrap; gap: 4rem; }
    .sideimage>.image{ flex-basis: 40%; background-position: center; background-repeat: no-repeat; background-size: cover; }
    .sideimage>.text{ flex-basis: 60%; }
    a.linkbutton{ display: inline-block; padding: 0.5rem 1rem; margin: 0 1rem 1rem 0; font-size: 0.8rem; font-weight: 700; border-radius: 2px; text-decoration: none; text-transform: uppercase; }
    a.linkbutton.whiteoutline{ background-color: transparent; color: #ffffff; border: solid 2px #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.6); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
    a.linkbutton.whiteoutline:hover{ background-color: #ffffff; color: var(--cerise); text-shadow: none; }
    /* header */
    header.header{ position: fixed; left: 0; top: 0; right: 0; z-index: 100; display: block; grid-template: none; height: 137px; min-height: 0 !important; margin: 0; background-color: #ffffff; color: var(--plum); border: none; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
    header.header>.inner{ display: flex; justify-content: space-between; flex-wrap: wrap; }
    header.header .header-logo-container{ position: relative; z-index: 20; display: block; margin-top: 1rem; grid-area: none; align-self: auto; }
    #masterHeaderImage{ margin-bottom: 1rem; background-image: var(--url-logo); }
    header.header .header-aux-container{ padding-top: 0.5rem; }
    .UtilityNavigation .account-menu > li > a, .UtilityNavigation .account-menu > li > a:hover, .UtilityNavigation .account-menu > li > a:visited, .UtilityNavigation .account-menu > li > a:active{ color: var(--navy); }
    .header-aux-container .UtilityAuthentication a, .header-aux-container a.NavigationLink, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link, .header-aux-container .account-toggle .nav-text{ color: var(--navy); }
    .UtilitySearch #SimpleSearchBlock .search-field, .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text, .navbar-toggle, .obo-toggle, .ste-toggle, .page-statistics-toggle{  }
    .obo-toggle{ background: transparent var(--url-icon-headphones) center no-repeat; }
    .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text{ background: transparent var(--url-icon-shopping-cart) center no-repeat; }
	#ctl01_ciUtilityNavigation_ctl03__rptWrapper__rptWrapper_rpt_ctl01_NavigationListItem{ display: inline-block; }
	#ctl01_ciUtilityNavigation_ctl01_ProfileMenu{ display: none; }
    .UtilitySearch #SimpleSearchBlock .search-field{ background: transparent var(--url-icon-search) left 10px center no-repeat; color: var(--navy) !important; font-family: var(--body-font-family); text-indent: 10px; }
    a.ste-toggle, a.ste-toggle.on{ background: transparent var(--url-icon-edit) center no-repeat; }
    a.ste-toggle:hover, a.ste-toggle:focus, .obo-toggle:hover, .obo-toggle:focus{ transform: scale(1.05); }
    .nav-auxiliary .nav-aux-button.nav-aux-cart:hover{ transform: scale(1.05); }
    #pc-mobile-nav-link{ display: none; margin-left: 1rem; color: #150b8b; font-size: 1.5rem; }
    header.header .header-primary-nav-container{ display: block; width: 100%; max-width: 100%; grid: none; grid-template: none; background-color: var(--navy); }
    #pc-primary-nav{ display: flex; margin: 0; padding: 0; list-style: none; }
    #pc-primary-nav>li{ position: relative; display: block; justify-content: space-between; transition: all 0.3s; }
    #pc-primary-nav>li>a.pc-navitem{ display: block; padding: 0.5rem 1rem; color: #ffffff; font-size: 0.8rem; font-weight: 400; text-decoration: none; text-transform: uppercase; }
    #pc-primary-nav>li>a.pc-navitem .hasChildren{ float: right; margin-left: 1rem; }
    #pc-primary-nav>li>a.pc-navitem:hover{ background-color: var(--aegean); box-shadow: 0 0 10px rgba(0,0,0,0.3); }
    #pc-primary-nav>li>a.indicator{ display: none; }
    #pc-primary-nav>li>ul{ position: absolute; left: 0%; top: 100%; display: block; width: 250px; max-height: 0; margin: 0; padding: 0; background-color: var(--navy); box-shadow: 0 5px 10px rgba(0,0,0,0.3); list-style: none; overflow: hidden; /*transform: translateX(-50%);*/ transition: all 0.3s; }
    #pc-primary-nav>li:focus>ul,#pc-primary-nav>li.active>ul,#pc-primary-nav>li:hover>ul{ max-height: 450px; overflow: unset; }
    #pc-primary-nav>li>ul>li{ position: relative; display: block; justify-content: space-between; transition: all 0.3s; }
    #pc-primary-nav>li>ul>li>a.pc-navitem{ display: block; padding: 0.5rem 1rem; color: #ffffff; font-size: 0.8rem; font-weight: 400; text-decoration: none; text-transform: uppercase; }
    #pc-primary-nav>li>ul>li>a.pc-navitem .hasChildren{ float: right; margin-left: 1rem; }
    #pc-primary-nav>li>ul>li>a.pc-navitem .hasChildren .fa{ transform: rotateZ(-90deg); }
    #pc-primary-nav>li>ul>li>a.pc-navitem:hover{ background-color: #ffffff; color: var(--navy); }
    #pc-primary-nav>li>ul>li>a.indicator{ display: none; }
    #pc-primary-nav>li>ul>li>ul{ position: absolute; left: 100%; top: 0; display: block; width: 250px; max-height: 0; margin: 0; padding: 0; background-color: var(--navy); box-shadow: 0 5px 10px rgba(0,0,0,0.3); list-style: none; overflow: hidden; /*transform: translateX(-50%);*/ transition: all 0.3s; }
    #pc-primary-nav>li>ul>li:focus>ul,#pc-primary-nav>li>ul>li.active>ul,#pc-primary-nav>li>ul>li:hover>ul{ max-height: 450px; }
    #pc-primary-nav>li>ul>li>ul>li{  }
    #pc-primary-nav>li>ul>li>ul>li>a.pc-navitem{ display: block; padding: 0.5rem 1rem; color: #ffffff; font-size: 0.8rem; font-weight: 400; text-decoration: none; text-transform: uppercase; }
    #pc-primary-nav>li>ul>li>ul>li>a.pc-navitem:hover{ background-color: #ffffff; color: var(--navy); }
    #pc-primary-nav>li>ul>li>ul>li>a.indicator{ display: none; }
    #pc-primary-nav.active{  }
    /* footer */
    footer.footer{ background: var(--navy); color: #ffffff; border-top: solid 10px var(--cerise); }
    footer.footer .footer-content{ margin-bottom: 4rem; }
    footer.footer .footer-content > .container{ display: block; grid-template: none; font-family: var(--body-font-family); font-size: 1rem; }
    footer.footer .footer-content .footercontent{ display: grid; grid-template-columns: 2fr 1fr 1fr; }
    footer.footer .footer-content .footercontent .logo img{ max-width: 250px; }
    footer.footer .footer-content .footercontent .tagline{ font-size: 1.2rem; font-weight: 700; line-height: 2rem; text-align: right; }
    .footer-copyright{ text-align: right; }
    .footer-copyright .copyright{ font-size: 0.8rem; font-weight: 300; }
    .footer-copyright .copyright a:hover{ text-decoration: underline; }
    /* banner area */
    .bannerarea{ display: block; margin-top: -1px; background-color: var(--plum); }
    .carousel-inner.bg-img > .item:after{ content: ''; position: absolute; inset: 0; display: block; /*background-color: rgba(0,0,0,0.3);*/
    /*background: linear-gradient(to right, rgba(19,42,76,0.9) 0%, rgba(164,2,52,0.3) 100%);*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#004f6d+0,a40234+100&0.9+0,0.3+100 */
    background: -moz-linear-gradient(left,  rgba(0,79,109,0.9) 0%, rgba(164,2,52,0.3) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(0,79,109,0.9) 0%,rgba(164,2,52,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(0,79,109,0.9) 0%,rgba(164,2,52,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6004f6d', endColorstr='#4da40234',GradientType=1 ); /* IE6-9 */
    }
    .home-page-header-container .carousel .carousel-caption{position: relative;display: block;width: 100%;max-width: 1360px;margin: 0 auto;padding: 8% 30% 0 30px;}
    .home-page-header-container .carousel .carousel-caption h2{ font-family: var(--heading-font-family); font-size: 3rem; line-height: 4rem; text-transform: uppercase; }
    .home-page-header-container .carousel .carousel-caption p{ font-family: var(--body-font-family); font-size: 1rem; font-weight: 400; line-height: 1.5rem; }
    .carousel-control{ width: 5%; }
    .carousel-indicators{ left: 0; right: 0; bottom: 0; display: flex; justify-content: stretch; flex-wrap: nowrap; width: 100%; margin: 0; }
    .carousel-indicators li{ display: block; width: 100%; border: none; background-color: var(--aegean); border-radius: 0; transition: all 0.3s; }
    .carousel-indicators li:hover{ background-color: var(--plum); }
    .carousel-indicators .active{ display: block; width: 100%; border: none; background-color: var(--cerise); }
    .pagebanner{ display: block; width: 100%; height: 0; padding: 0 0 20%; background-position: center; background-repeat: no-repeat; background-size: cover; }
    .Wrapper-HomePage .home-page-header-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding-top: 0px;
    padding-bottom: 0px;
    }
    /* homepage */
    #quicklinks{ display: block; background-color: var(--dark-cyan); }
    .quicklinks{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2rem; }
    .quicklinks a{ display: block; background-color: #ffffff; color: var(--default-font-colour); border-radius: 2px; box-shadow: 0 0 10px rgba(0,0,0,0.3); text-decoration: none; }
    .quicklinks a .image{ display: block; height: 0; padding: 0 0 55%; background-position: center; background-repeat: no-repeat; background-size: cover; }
    .quicklinks a .text{ display: block; }
    .quicklinks a .text .title{ display: block; padding: 0.5rem 1rem; color: #ffffff; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
    .quicklinks a:nth-child(1) .text .title{ background-color: var(--cerise); }
    .quicklinks a:nth-child(2) .text .title{ background-color: var(--aegean); }
    .quicklinks a:nth-child(3) .text .title{ background-color: var(--plum); }
    .quicklinks a:nth-child(4) .text .title{ background-color: var(--navy); }
    .quicklinks a .text .description{ display: block; padding: 1rem 1rem 1.5rem; font-size: 0.8rem; line-height: 1.2rem; }
    .quicklinks a:hover{ box-shadow: 0 0 20px rgba(0,0,0,0.8); text-decoration: none; transform: scale(1.05); }
    #ctalist{ display: block; background-color: var(--plum); }
    #ctalist ul{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 0; padding: 0; list-style: none; }
    #ctalist ul li{  }
    #ctalist ul li a{ display: block; height: 100%; padding: 6rem 2rem; color: #ffffff; font-size: 1rem; text-align: center; text-decoration: none; }
    #ctalist ul li a .iconblock{ display: block; margin: 0 0 2rem; }
    #ctalist ul li a .iconblock .icon{ display: inline-block; width: 4rem; height: 4rem; background-color: #ffffff; color: var(--plum); border-radius: 100%; line-height: 4.3rem; transition: all 0.3s; }
    #ctalist ul li a .iconblock .icon .fa{ font-size: 2rem; }
    #ctalist ul li a .title{ display: block; font-size: 1rem; line-height: 1.7rem; font-weight: 700; }
    #ctalist ul li a:hover{ background-color: var(--cerise); }
    #ctalist ul li a:hover .iconblock .icon{ color: var(--cerise); }
    #joinbar{ position: relative; display: block; min-height: 40vh; padding: 30vh 0; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 0 4rem rgba(0,0,0,0.8); }
    #joinbar:after{ content: ''; position: absolute; inset: 0; z-index: 1;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#004f6d+0,a40234+100&0.9+0,0.3+100 */
    background: -moz-linear-gradient(left,  rgba(0,79,109,0.9) 0%, rgba(164,2,52,0.3) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(0,79,109,0.9) 0%,rgba(164,2,52,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(0,79,109,0.9) 0%,rgba(164,2,52,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6004f6d', endColorstr='#4da40234',GradientType=1 ); /* IE6-9 */
    }
    #joinbar .inner{ position: relative; z-index: 10; }
    #joinbar h2{ color: #ffffff; font-family: var(--heading-font-family); font-size: 3rem; font-weight: 700; line-height: 4rem; text-shadow: 0 1px 2px rgba(0,0,0,0.6); text-transform: uppercase; }
    #MainPanel{ margin-top: -96px; }
	@media(max-width: 1024px){
    body{ padding-top: 96px; }
    header.header{ height: 96px; }
    #pc-mobile-nav-link{ display: inline-block; }
    #pc-primary-nav{ position: absolute; right: 0; top: 96px; flex-direction: column; width: 300px; max-height: 0; background-color: var(--navy); overflow: hidden; transition: all 0.3s; }
    #pc-primary-nav.active{ max-height: 100vh; overflow: unset; }
    #pc-primary-nav>li{ display: flex; }
    #pc-primary-nav>li>a.pc-navitem{ flex-basis: 75%; }
    #pc-primary-nav>li>a.pc-navitem .hasChildren{ display: none !important; }
    #pc-primary-nav>li>a.indicator{ display: block; padding: 0 1.5rem; flex-basis: 25%; color: #ffffff; font-size: 1.2rem; }
    #pc-primary-nav>li>ul{ z-index: 100; width: 100%; }
    .carousel-control{ display: none; }
    }
    @media(max-width: 769px){
    .quicklinks{ grid-template-columns: 1fr 1fr; }
    #ctalist ul{ grid-template-columns: 1fr 1fr; }
    footer.footer .footer-content .footercontent{ grid-template-columns: 1fr 1fr 1fr; }
    footer.footer .footer-content .footercontent .logo img{ max-width: 180px; }
	#ctl01_ciUtilityNavigation_ctl03__rptWrapper__rptWrapper_rpt_ctl01_NavigationListItem{ display: none; }
	#ctl01_ciUtilityNavigation_ctl01_ProfileMenu{ display: inline-block; }
    }
    @media(max-width: 700px){
    body{ padding-top: 137px; }
    header.header{ height: 137px; }
    .padtop.bigpad{ padding-top: 2rem; }
    .padbottom.bigpad{ padding-bottom: 2rem; }
    header.header .header-logo-container{ display: block; width: 100%; }
    #masterHeaderImage{ display: block; width: 100%; height: 50px; background-position: center; background-size: contain; }
    header.header .header-aux-container{ margin: 0 auto; }
    .UtilitySection.UtilityNavigationToggle{ display: none; }
    #pc-primary-nav{ top: 140px; }
    .home-page-header-container .carousel .carousel-caption{ padding: 10vh 30px 0; }
    .home-page-header-container .carousel .carousel-caption h2{ font-size: 2rem; line-height: 2.5rem; }
    .sideimage{ flex-direction: column; gap: 2rem; }
    .sideimage>.image{ height: 300px; }
    .quicklinks{ grid-template-columns: 1fr; }
    #ctalist ul{ grid-template-columns: 1fr; }
    #ctalist ul li a{ padding: 2rem 2rem; }
    footer.footer .footer-content .footercontent{ grid-template-columns: 1fr; }
    .footercontent .logo{ margin-bottom: 3rem; }
    .footercontent .contact{ margin-bottom: 3rem; }
    footer.footer .footer-content .footercontent .tagline{ text-align: center; }
    .footer-copyright .copyright{ text-align: center; }
    }