@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&display=swap');

.in-app .in-app-hidden {
    display: none !important;
}
.in-app .in-app-show {
    display: block !important;
}
.in-app-show {
    display: none !important;
}
.in-app #footerContainer {
    display: none !important;
}

section#mobile-header {
    display: none;
}

div#contentContainer .search-show {
    display: none;
}
div#contentContainer.search-active .search-show {
    display: block;
}
div#contentContainer.search-active .search-hidden {
    display: none;
}

a.anchor-target {
    display: block;
    visibility: hidden;
    position: relative;
    top: -100px;
}

section#title-area {
    background: linear-gradient(90deg, #1FB3C7 0%, #00C2B6 100%);
    text-align: center;
    color: #ffffff;
    padding: 80px 0;
}
section#title-area h1 {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #ffffff;
    margin: 0;
}
section#title-area div.search-area {
    margin: 28px 0;
    display: inline-block;
    position: relative;
    max-width: calc(100% - 66px);
}
section#title-area div.search-area ion-icon {
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 17px;
    transform: translateY(-50%);
    font-size: 27px;
}
section#title-area div.search-area input {
    font-family: 'Albert Sans', sans-serif;
    width: 508px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 64px;
    outline: none;
    padding: 9px 15px 9px 56px;
    color: #ffffff;
    font-size: 20px;
    line-height: 36px;
    font-weight: 600;
}
section#title-area div.search-area input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

input[type="search"] {
    -webkit-appearance: none;
}
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    background: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5909 12L18.0441 7.54687C18.2554 7.3359 18.3743 7.04962 18.3745 6.75099C18.3748 6.45237 18.2564 6.16587 18.0455 5.95453C17.8345 5.74319 17.5482 5.62431 17.2496 5.62404C16.951 5.62378 16.6645 5.74215 16.4531 5.95312L12 10.4062L7.54687 5.95312C7.33553 5.74178 7.04888 5.62305 6.75 5.62305C6.45111 5.62305 6.16447 5.74178 5.95312 5.95312C5.74178 6.16447 5.62305 6.45111 5.62305 6.75C5.62305 7.04888 5.74178 7.33553 5.95312 7.54687L10.4062 12L5.95312 16.4531C5.74178 16.6645 5.62305 16.9511 5.62305 17.25C5.62305 17.5489 5.74178 17.8355 5.95312 18.0469C6.16447 18.2582 6.45111 18.3769 6.75 18.3769C7.04888 18.3769 7.33553 18.2582 7.54687 18.0469L12 13.5937L16.4531 18.0469C16.6645 18.2582 16.9511 18.3769 17.25 18.3769C17.5489 18.3769 17.8355 18.2582 18.0469 18.0469C18.2582 17.8355 18.3769 17.5489 18.3769 17.25C18.3769 16.9511 18.2582 16.6645 18.0469 16.4531L13.5909 12Z" fill="white"/></svg>') no-repeat 50% 50%;
    background-size: contain;
    opacity: 1;
    pointer-events: all;
}

section#title-area div.intro {
    font-family: 'Albert Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
}
section#title-area div.intro p {
    margin: 0;
}
section#title-area div.intro a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 700;
}

section.visitable-items {
    padding: 50px 0;
}
section.visitable-items div.content {
    max-width: 1000px;
}
section.visitable-items a.back-button {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
}
section.visitable-items h2 {
    font-family: 'Albert Sans', sans-serif;
    color: var(--color-dark);
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    text-align: left;
}
section.visitable-items h3 {
    font-family: 'Albert Sans', sans-serif;
    color: #616C7A;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    margin: 0;
}
section.visitable-items div.items div.category {
    margin-bottom: 50px;
}
section.visitable-items div.item {
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    line-height: 140%;
    max-width: 100%;
    margin: 10px auto;
    background: #F8F9FA;
    border-radius: 12px;
    text-align: left;
    border: none;
    cursor: pointer;
}

section.visitable-items div.item-inner {
    padding: 20px 30px;
}

section.visitable-items div.item a {
    width: 100%;
    height: 100%;
}

section.visitable-items div.item.expanded {
    cursor: unset;
    padding: 40px 30px;
}

section.visitable-items div.item h4 {
    font-family: 'GaretHeavy', sans-serif;
    color: var(--color-dark);
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 30px;
    width: 100%;
    position: relative;
}
section.visitable-items div.item h4 ion-icon {
    position: absolute;
    top: calc(50% - 8px);
    right: 0;
    transition: transform 200ms;
    color: #A0A8B2;
    font-size: 17px;
}

section.visitable-items div.item img {
    width: 100%;
}

section#search-results h2#results-header {
    color: #A0A8B2;
}

section#fallback-ctas {
    padding: 0 0 50px;
}
section#fallback-ctas div.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 26px;
    max-width: 620px;
}
section#fallback-ctas ion-icon {
    font-size: 50px;
    color: #1E2E42;
}
section#fallback-ctas h2 {
    margin: 0;
    color: #1E2E42;
    font-size: 26px;
    font-weight: 800;
    line-height: 26px;
}
section#fallback-ctas button {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    padding-top: 14px;
    padding-bottom: 14px;
    margin: 8px 0;
    width: 300px;
    max-width: 100%;
}
section#fallback-ctas button ion-icon, section#fallback-ctas button img {
    color: #ffffff;
    display: inline-block;
    font-size: 24px;
    width: 24px;
    height: 24px;
    margin-right: 13px !important;
    vertical-align: middle;
}
section#fallback-ctas button span {
    display: inline-block;
    vertical-align: middle;
}
section#fallback-ctas p {
    font-size: 20px;
    color: #616C7A;
    line-height: 140%;
    font-weight: 500;
    margin: 0;
}

/* Handle small screens (phones) */
@media (max-width: 800px) {

    div.content {
        padding: 0 20px;
    }

    div#headerContainer {
        display: none;
    }

    div#contentContainer.fixed-header {
        margin-top: 0;
    }

    section#mobile-header {
        display: block;
        position: fixed;
        background: linear-gradient(90deg, #1FB3C7 0%, #00C2B6 100%);
        height: 80px;
        padding-top: 30px;
        width: 100%;
        z-index: 1;
    }

    section#mobile-header .back-button {
        background: none;
        position: absolute;
        top: calc(36px);
        left: 2px;
    }

    section#mobile-header ion-icon {
        color: #ffffff;
        font-size: 22px;
    }

    section#title-area div.content {
        position: relative;
        z-index: 1;
    }

    section#title-area {
        padding: 80px 0 40px;
    }

    section#title-area h1 {
        font-size: 22px;
    }

    section#title-area div.intro {
        font-size: 16px;
    }

    section#title-area div.search-area {
        margin: 15px 0;
    }

    section#title-area div.search-area ion-icon {
        font-size: 20px;
        left: 14px;
    }

    section#title-area div.search-area input {
        font-size: 16px;
        line-height: 22px;
        font-weight: 500;
        padding-left: 44px;
        padding-right: 8px;
    }

    section.visitable-items {
        padding: 30px 0;
    }

    section.visitable-items h2 {
        font-size: 15px;
        margin-bottom: 25px;
    }

    section.visitable-items h3 {
        font-size: 15px;
    }

    section.visitable-items div.items {
        margin-bottom: 30px;
    }

    section.visitable-items div.item {
        padding: 15px 20px;
    }

    section.visitable-items div.item h4 {
        font-size: 15px;
    }

    section.visitable-items div.item > div.collapsible {
        font-size: 15px;
    }

    section.visitable-items div.item p {
        font-size: 15px;
    }

    section#search-results div#no-results h2 {
        font-size: 22px;
    }

    section#search-results div#no-results p {
        font-size: 15px;
    }

    section#fallback-ctas h2 {
        font-size: 22px;
    }

    section#fallback-ctas p {
        font-size: 16px;
    }
}