/* resets */
html {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

*,
*:before, *:after {
	-webkit-box-sizing:inherit;
	-moz-box-sizing:inherit;
	-ms-box-sizing:inherit;
	-o-box-sizing:inherit;
	box-sizing:inherit;
}

article, aside, figure, footer, header, main, nav, section, time, picture {
	display:block;
}

body, html {
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-o-text-size-adjust:100%;
	text-size-adjust:100%;
}

body {  
    background-color:#fefefe;
    color:#333;
    font-family: Verdana, Arial, sans-serif;
    font-size:100%;
    line-height:1.5;
}

.submit-button {
    background-color:#227e95;
    border:none;
    border-radius:0.2rem;
    color:#fefefe;
    padding:0.5rem 1rem;
}

.submit-button:hover {
    background-color:#61c2db;
    color:#333;
}

a img {
	border:0;
	display:block;
	text-decoration:none;
}

a {
    color:#333333;
    text-underline-offset:0.3rem;
}

a:hover {
	color:#227e95;
}

h1 {
    color:#005295;
}

h2 {
	color:#227e95;
}

img {
	border:none;
}

p {
    margin:0 0 1rem 0;
}

.body-wrapper {
	margin:0 auto;
	max-width:1200px;
}

header#main-header a {
    font-weight:bold;
    letter-spacing:-0.05rem;
    line-height:0.8;
	text-decoration:none;
	text-transform:uppercase;
}

.sitename--color1 {
    color:#333;
    display:inline-block;
    font-size:1.655rem;
}

.sitename--color2 {
    color:#ff5845;
    display:inline-block;
    font-size:2.3rem;
}

.logo-sitename {
    display:grid;
    grid-template-columns:auto 1fr;
    padding:2rem 0 0.5rem 0;
}

.logo-sitename img {
    padding-right:0.5rem;
    width:4.35rem;
}

main {
	border:3px solid #005295;
	border-radius:1rem;
	padding:1.5rem;
}

header#article-header {
    align-items:end;
    display:grid;
    gap:0.8rem;
    grid-template-columns:1fr auto;
    grid-template-areas:'header-left header-right' 'breadcrumbs breadcrumbs';
}

#article-header--left {
    grid-area:header-left;
    
    align-items:end;
    display:grid;
    grid-template-columns:auto 1fr;
}

.Section #article-header--left {
    grid-template-columns:1fr;
}

#article-header--right {
    grid-area:header-right;
}

.home header#article-header {
    align-items:start;
    border-bottom:3px solid #005295;
    grid-template-areas:'header-left header-right';
    padding-bottom:1.5rem;
}

.home #article-header--left {
    display:block;
}

header#article-header h1 {
    font-size:2rem;
    line-height:1;
    margin:0;
    text-transform:uppercase;
}

.home header#article-header h1 {
    font-size:1.5rem;
    line-height:1.5;
    margin:0;
    text-transform:none;
}

.home header#article-header h2 {
    color:#333;
    font-size:1rem;
}

.category-icon {
    height:auto;
    max-width:150px;
    padding-right:1rem;
}

.Section .category-icon {
    display:none;
}

#slideshow {
    height:185px;
    width:315px;
}

/* home page embedded YT video */
.YTborder {
    aspect-ratio:16/9;
    border:3px solid #005295;
    border-radius:0.8rem;
    max-height:312px;
    max-width:556px;
    overflow: hidden;
}

.YTborder iframe {
    aspect-ratio:16/9;
    border-radius:12px;
    height:101%;
    left:-2px;
    max-width:556px;
    position: relative;
    top:-2px;
    width:101%;
}

#breadcrumbs {
    grid-area:breadcrumbs;
    
    border-top:3px solid #005295;
    padding-top:1rem;
}

.housingSection #breadcrumbs {
    border-top:3px solid #f29239;
}

.electricitySection #breadcrumbs {
    border-top:3px solid #93a532;
}

.transportSection #breadcrumbs {
    border-top:3px solid #24b7d9;
}

.educationSection #breadcrumbs {
    border-top:3px solid #ac9819;
}

.healthSection #breadcrumbs {
    border-top:3px solid #ae4994;
}

.licencesSection #breadcrumbs {
    border-top:3px solid #d0422d;
}

.vehiclesSection #breadcrumbs {
    border-top:3px solid #3b82c4;
}

.parksSection #breadcrumbs {
    border-top:3px solid #76886f;
}

.propertySection #breadcrumbs {
    border-top:3px solid #644b84;
}

.otherSection #breadcrumbs {
    border-top:3px solid #ccc171;
}

#breadcrumbs ol {
    display:flex;
    flex-wrap:wrap;
    font-size:0.8rem;
    gap:0.8rem;
    list-style-type:none;
    margin:0;
    padding:0;
}

#breadcrumbs ol li {
    line-height:1;
}

#breadcrumbs ol li:before {
    content:'>';
    margin-right:0.8rem;
}

#breadcrumbs ol li:first-child:before {
    content:none;
}

.home ul.how-to {
    list-style-type:disc;
    margin:0;
    padding-left:1rem;
}

.home ul.how-to li {
    padding:0 0 0.5rem 1.8rem;
    position:relative;
}

.home ul.how-to li:before {
    background-color:#227e95;
    border-radius:0.2rem;
    color:#fefefe;
    left:0;
    padding:0 0.4rem 0.1rem 0.4rem;
    position:absolute;
    top:0;
}

.home ul.how-to li.one:before {
    content:'1';
}

.home ul.how-to li.two:before {
    content:'2';
}

.home ul.how-to li.three:before {
    content:'3';
}

#body-content {
    display:grid;
    grid-template-columns:1fr 315px;
    grid-template-areas:'body-left body-right';
    padding-top:1.5rem;
}

#body-content--left {
    grid-area:body-left;
    padding-right:3rem;
}

#body-content--right {
    grid-area:body-right;
}

/* home page categories */
#catSearch, #cardSearch, #download {
    <!--padding:0 0 0 6rem;-->
    padding:0;
    position:relative;
}

<!--#catSearch:before, #cardSearch:before, #download:before {-->
<!--    color:#efefef;-->
<!--    font-size:8rem;-->
<!--    left:0;-->
<!--    position:absolute;-->
<!--    top:0;-->
<!--}-->

#catSearch h2, #cardSearch h2, #download h2 {
    margin-top:0;
    padding-top:0;
}

/* home page - browse by category */
#catSearch {
    margin:0;
    position:relative;
}

<!--#catSearch:before {-->
<!--    content:'1';-->
<!--    top:-2.75rem;-->
<!--}-->

#catSearch ul {
    display:grid;
    gap:2rem;
    grid-template-columns:1fr 1fr;
    list-style-type:none;
    margin:0;
    padding:1rem 0 0;
    text-transform:capitalize;
}

#catSearch li a {
    align-items:center;
    display:flex;
    flex-direction:column;
    height:100%;
    justify-content:flex-end;
    text-decoration:none;
}

#catSearch li img {
    height:auto;
    margin:0;
    padding:0;
    width: 100%;
}  

#catSearch li .link-text {
    font-size:1rem;
    text-align:center;
    text-transform:uppercase;
}

/* home page - search by card */
#cardSearch {
    padding-top:2rem;
}

<!--#cardSearch:before {-->
<!--    content:'2';-->
<!--    top:-0.65rem;-->
<!--}-->

#cardSearch .no-card {
    color:#005295;
    font-weight:bold;
}

#cardSearch label {
    font-size:0.8rem;
}

.concession-cards {
    display:grid;
    gap:1rem;
    grid-template-columns:1fr 1fr 1fr;
    padding:1rem 0 1.5rem 0;
}

.concession-cards img {
    width:100%;
}

/* home page - download guide */
#download {
    padding-top:2rem;
}

<!--#download:before {-->
<!--    content:'3';-->
<!--    top:-0.65rem;-->
<!--}-->

.download-content {
	display:grid;
	grid-template-columns:auto 1fr;
	grid-template-areas:'download-image download-text' 'download-image download-button';
}

.download-content .guide-img {
	grid-area:download-image;
	padding-right:1rem;
}

.download-content .guide-text {
	grid-area:download-text;
}

.download-content .guide-text p:first-child {
    margin-top:0;
}

.btn-download {
    grid-area:download-button;
    justify-self:end;
}

.btn-download a {
	background-color:#227e95;
	border-radius:0.2rem;
	color:#fefefe;
	display:flex;
	flex-direction:column;
	font-size:0.8rem;
	max-width:13rem;
	padding:0.2rem;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
}

.btn-download a .line1 {
    font-size:0.7rem;
}

.btn-download a .line2 {
	font-weight:bold;
	letter-spacing:0.04rem;
}

.btn-download a:hover {
    background-color:#61c2db;
    color:#333;
}

/* section concessions lists */
.toggle {
    padding:0 0 1rem 0;
}

.concessions > div {
    padding-top:1rem;
}

.concessions > div:first-child {
    padding-top:0;
}

details.concession {
	margin:0 0 1rem 0;
	border:2px solid #eee;
	border-radius:0.4rem;
}

details.concession summary {
    cursor:pointer;
    font-size:0.9rem;
    font-weight:bold;
    max-width:100%;
    padding:0.8rem 1rem;
}

details.concession summary::marker {
    color:#005295;
}

.housingSection details.concession summary::marker {
    color:#f29239;
}

.electricitySection details.concession summary::marker {
    color:#93a532;
}

.transportSection details.concession summary::marker {
    color:#24b7d9;
}

.educationSection details.concession summary::marker {
    color:#ac9819;
}

.healthSection details.concession summary::marker {
    color:#ae4994;
}

.licencesSection details.concession summary::marker {
    color:#d0422d;
}

.vehiclesSection details.concession summary::marker {
    color:#3b82c4;
}

.parksSection details.concession summary::marker {
    color:#76886f;
}

.propertySection details.concession summary::marker {
    color:#644b84;
}

.otherSection details.concession summary::marker {
    color:#ccc171;
}

details.concession div.concession--content {
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto;
    grid-template-areas:'text text' 'print key';
    padding:0 1rem 1.5rem 1rem;
}

.concession--text {
    grid-area:text;
    
    border-top:1px solid #eee;
    padding-top:0.8rem;
}

.housingSection .concession--text {
    border-top:1px solid #f29239;
}

.electricitySection .concession--text {
    border-top:1px solid #93a532;
}

.transportSection .concession--text {
    border-top:1px solid #24b7d9;
}

.educationSection .concession--text {
    border-top:1px solid #ac9819;
}

.healthSection .concession--text {
    border-top:1px solid #ae4994;
}

.licencesSection .concession--text {
    border-top:1px solid #d0422d;
}

.vehiclesSection .concession--text {
    border-top:1px solid #3b82c4;
}

.parksSection .concession--text {
    border-top:1px solid #76886f;
}

.propertySection .concession--text {
    border-top:1px solid #644b84;
}

.otherSection .concession--text {
    border-top:1px solid #ccc171;
}

.concession--key {
    grid-area:key;
    
    align-self:end;
    display:none;
    justify-self:end;
}

.concession--print {
    grid-area:print;
    
    align-self:end;
	background-color:#227e95;
	border-radius:0.2rem;
	color:#fefefe;
	display:flex;
	flex-direction:column;
	font-size:0.8rem;
	max-width:13rem;
	padding:0.2rem;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
}

.concession--print:hover {
    background-color:#61c2db;
    color:#333;
}

.concession--key img {
    margin: 0.5rem 0 0 0.2rem;
}

/* search box */
.search-narrow {
    display:none;
}

.search-box {
    background-color:#eee;
    border-radius:1rem;
    padding:1rem;
}

.search-box h2 {
    color:#333;
    margin:0;
    padding:0;
}

.search-box form {
    display:flex;
    padding-bottom:0.5rem;
}

.search-box .text-input {
    border:1px solid #aaa;
    border-radius:0.2rem 0 0 0.2rem;
    color:#333;
    flex:0 1 100%;
    margin:0;
    padding:0.2rem;
}

.search-box .submit-button {
    border-radius:0 0.2rem 0.2rem 0;
    flex:0 1 auto;
}

/* more info boxes (news etc) */
.more h2 {
    margin-bottom:0;
}

.more ul {
    font-size:0.9rem;
    list-style-type:none;
    margin:0;
    padding:0;
}

.more ul li {
    margin-bottom:0.2rem;
}

.more ul li a::before {
	border-bottom: .4rem solid transparent;
	border-left: .4rem solid #227e95;
	border-top: .4rem solid transparent;
	content: "";
	display: inline-block;
	height: 0;
	margin:0 0.4rem -0.05rem 0;
	width: 0;
}

/* request hard copy of guide */
#request {
    padding:1.5rem 0;
}

/* contact info */
#contact {
    background-color:#eee;
    border-radius:1rem;
    font-size:0.9rem;
    padding:1rem;
}

#contact h2 {
    color:#333;
    margin:0;
    padding:0;
}

/* jump to section */
#goto {
    padding:0 0 0.5rem 0;
}

.Section #goto {
    display:none;
}

#goto select#category {
    margin:0;
    padding:0.4rem;
    width:75%;
}

/* concessions key */
.Section #key {
    display:none;
}

.key--instructions {
    font-size:0.8rem;
}

.key--icons {
    padding-bottom:0.4rem;
}

.key--row {
    display:grid;
    font-size:0.7rem;
    gap:0.4rem;
    grid-template-columns:auto 1fr;
    padding-bottom:0.4rem;
}

.key--row p {
    margin:0;
}

/* concession card pages */
.inline-card-image {
    float:right;
    padding:0 0.5rem 0.5rem 0;
}

footer {
    display:grid;
    font-size:0.8rem;
    grid-template-columns:1fr auto;
    padding:1.2rem 1.5rem 0.8rem 1.5rem;
}

.footer-text {
    padding-right:2rem;
}

ul.footer-text--links {
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    list-style-type:none;
    margin:0;
    padding:0 0 1rem 0;
}

ul.footer-text--links li:before {
    content:'|';
    margin-right:1rem;
}

ul.footer-text--links li:first-child:before {
    content:none;
}

/* media queries */
@media screen and (max-width:1250px) {
    .body-wrapper {
    	max-width:100%;
    }
}

@media screen and (max-width:68rem) {
    #catSearch ul {
        grid-template-columns:1fr 1fr 1fr 1fr;
    }
}

@media screen and (max-width:62rem) {
    header#article-header {
        grid-template-columns:1fr;
        grid-template-areas:'header-left' 'breadcrumbs';
    }
    
    #article-header--right {
        display:none;
    }
    
    #catSearch, #cardSearch, #download {
        <!--padding-left:3rem;-->
    }
    
    #catSearch:before, #cardSearch:before, #download:before {
        font-size:3rem;
    }
    
    #catSearch:before {
        top:-0.7rem;
    }
    
    #cardSearch:before {
        top:1.35rem;
    }
    
    #download:before {
        top:1.35rem;
    }
    
    details.concession div.concession--content {
        grid-template-columns:1fr;
        grid-template-areas:'text' 'key' 'print';
    }
    
    .concession--key {
        justify-self:start;
    }
    
    .concession--print {
        margin-top:1.5rem;
    }
    
    ul.footer-text--links {
        gap:0.5rem;
    }
    
    ul.footer-text--links li:before {
        margin-right:0.5rem;
    }
}

@media screen and (max-width:56rem) {
    #body-content {
        grid-template-columns:1fr;
        grid-template-areas:'body-left' 'body-right';
    }
    
    #body-content--left {
        padding-bottom:1.5rem;
        padding-right:0;
    }
    
    .Section #body-content--left {
        padding-bottom:0;
    }
    
    #body-content--right {
    	border-top:3px solid #005295;
    }
    
    .Section #body-content--right {
        border-top:none;
    }
    
    .Section.home #body-content--left {
        padding-bottom:1.5rem;
    }
    
    .Section.home #body-content--right {
        border-top:3px solid #005295;
    }
    
    .search-narrow {
        display:block;
        padding-bottom:2rem;
    }
    
    .search-wide {
        display:none;
    }

    #catSearch ul {
        grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    }
    
    .inline-card-image {
        padding:0 0 0.5rem 0.5rem;
    }
}

@media screen and (max-width:42rem) {
    header#article-header h1 {
        font-size:1.8rem;
    }
    
    #catSearch ul {
        grid-template-columns:1fr 1fr;
    }
    
    .concession-cards {
        grid-template-columns:1fr 1fr;
    }
    
    .download-content {
    	grid-template-columns:1fr;
    	grid-template-areas:'download-text' 'download-button';
    }
    
    .download-content .guide-img {
        display:none;
    }
    
    .btn-download {
        justify-self:start;
    }
    
    .inline-card-image {
        float:none;
    }
    
    ul.footer-text--links {
        flex-direction:column;
    }
    
    ul.footer-text--links li:before {
        content:none;
    }
}

@media screen and (max-width:34rem) {
    #article-header--left {
        grid-template-columns:1fr;
    }
    
    .category-icon {
        justify-self:center;
        padding-bottom:1rem;
    }
}

@media screen and (max-width:23rem) {

}