/* reset */
*, *::before, *::after {box-sizing: border-box;}body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {margin: 0;}ul[role='list'], ol[role='list'] {list-style: none;}html:focus-within {scroll-behavior: smooth;}body {min-height: 100vh;text-rendering: optimizeSpeed;line-height: 1.5;}a:not([class]) {text-decoration-skip-ink: auto;}img, picture {max-width: 100%;display: block;}input, button, textarea, select {font: inherit;}@media (prefers-reduced-motion: reduce) {html:focus-within {scroll-behavior: auto;}*, *::before, *::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}}

@font-face {
    font-family: 'Condensed';
    src: url('fonts/barlowcondensed-semibold-webfont.woff2') format('woff2'),
        url('fonts/barlowcondensed-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Condensed';
    src: url('fonts/barlowcondensed-semibolditalic-webfont.woff2') format('woff2'),
        url('fonts/barlowcondensed-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url('fonts/barlow-medium-webfont.woff2') format('woff2'),
        url('fonts/barlow-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Barlow';
    src: url('fonts/barlow-mediumitalic-webfont.woff2') format('woff2'),
        url('fonts/barlow-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;

}

body {
    background-color: #F9F5ED;
    font-family: "Barlow", sans-serif;
}

i {
    font-style:italic;
}

#content {
    overflow: visible;
}

#cover {
    background-image: url('/noise.png');
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: repeat;
    pointer-events: none;
    position: fixed;
    z-index: 4;
    top: 0;
}

#menu {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #F6DBA6;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #318D7C;
    text-align: center;
    font-family: "Condensed", sans-serif;
    margin-left: 100%;
    transition: all .2s;
}

#menu.show {
    margin-left: 0;
}

#menu #navigation a {
    color: #318D7C;
    text-decoration: none;
    font-size: 28px;
    line-height: 200%;
    text-transform: uppercase;
}

#menu #navigation a:hover {
    opacity: .8;
}

#menu #close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
    line-height: 10px;
}

#menu_social {
    margin-top: 40px;
}

.menu_social {
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    position: relative;
    transition: all;
    transition-duration: .25s;
    background-size: 60%;
    width: 40px;
    height: 45px;
}

.close {
    position: relative;
    right: 0px;
    top: 0px;
    width: 32px;
    height: 32px;
}

.close:hover {
    opacity: .5;
    cursor: pointer;
}

.close:before,
.close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #318D7C;
}

.close:before {
    transform: rotate(45deg);
}

.close:after {
    transform: rotate(-45deg);
}





.section_header {
    padding: 50px 30px 10px 30px;
    max-width: 100%;

    display: flex;
    position: relative;
    align-items: center;
}

.section_header h2 {
    font-size: 66px;
    letter-spacing: -2px;
    color: #F9F5ED;
    font-style: italic;
    text-shadow: -1.2px -1.2px 0 #318D7C, 1.2px -1.2px 0 #318D7C, -1.2px 1.2px 0 #318D7C, 1.2px 1.2px 0 #318D7C;
    /* -webkit-text-stroke: #318D7C 1.2px; */
}

.section_header h2 img {
    max-width: 85%
}

#schedule_wrapper {
    position: relative;
}

.subheader {
    margin-top: 25px;
    font-size: 26px;
    font-family: "Condensed", sans-serif;
    padding-left: 30px;
    color: #318D7C;
    margin-bottom: 10px;
}

.subheader .right_detail {
    font-size: 26px;
    opacity: .5;
    position: absolute;
    right: 30px;
    font-style: italic;
    color: #318D7C;
}

.day_set {
    padding: 0px 30px;
    width: 100%;
    margin-bottom: 40px;
}

.event_list_item {
    border-top: 1px solid #E3EDEC;
    padding: 22px 0px 26px 0px;
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
}

.event_list_item a {
    position: absolute;
    width: 100%;
    height: 100%;
    display:block;
}


.event_list_item .time {
    color: #318D7C;
    font-family: "Condensed", sans-serif;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 26px;
    max-width: 50px;
    line-height: 100%;
}

.event_list_item .title {
    padding-left: 50px;
    font-size: 18px;
    color: #ACB7B1;
    max-width: 90%;
    line-height: 125%;
}

.event_list_item .arrow {
    position: absolute;
    right: 0;
    top: 22px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 2px solid #E3EDEC;
    color: #318D7C;
    text-align: center;
    line-height: 26px;
    font-size: 16px;
}

.event_list_item:hover .arrow {
    border: 2px solid #318D7C;
}

.social {
    border-bottom: 1px solid #E3EDEC;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    position: relative;
    transition: all;
    transition-duration: .25s;
    background-size: 30%;
}

.social a,
.menu_social a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#follow {
    border-bottom: 1px solid #E3EDEC;
    text-align: center;
}

#follow img {
    margin: 55px auto;
}

.instagram {
    background-image: url('instagram.svg')
}

.facebook {
    background-image: url('facebook.svg')
}

.youtube {
    background-image: url('youtube.svg')
}

.email {
    background-image: url('em.svg')
}

.section_header .right_link {
    font-family: "Condensed", sans-serif;
    font-size: 30px;
    color: #318D7C;
    position: absolute;
    right: 30px;
    border-bottom: 1px solid #318D7C;
}



.set {
    padding-right: 30px;
    padding-left: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
    margin-top: 20px;
}

#all_events {
    cursor: pointer;
    color: #318D7C;
    margin-right: 30px;
    margin-left: 30px;
    display: flex;
    border: 1px solid #E3EDEC;
    text-align: center;
    justify-content: center;
    padding: 20px 0px;
    font-family: "Condensed", sans-serif;
    font-size: 28px;
    margin-bottom: 70px;
    position:relative;
}

#all_events:hover {
    /* border: 2px solid #318D7C; */
    box-shadow: inset 2px 0px 10px #ddd;
}

#all_events a {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    display:block;
}

#footer {
    width: calc(100% - 60);
    display: block;
    padding: 60px 0px 30px 0px;
    background-color: #318D7C44;
    margin: 0 30px 30px 30px;
}

#footer img {
    display: block;
    text-align: center;
    width: auto;
    max-width: 50%;
    margin: 30px auto 60px auto;
}

.event_item {
    flex-grow: 1;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    aspect-ratio: 1;
    display: inline-block;
    border: 1px solid #E3EDEC;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    /* background: #E3EDEC22; */
    transition: all;
    transition-duration: .25s;
}

.question {
    font-style: italic;
color: #318D7C;
margin-top: 35px;
margin-bottom: 10px;
}

.event_item a {
    position:absolute;
    top: 0;
    left:0;
    display:block;
    width:100%;
    height: 100%;
}

.event_item:hover {
    /* border: 1px solid #318D7C; */
    /* background: #E3EDEC66; */
    box-shadow: inset 2px 0px 10px #ddd;

}

.event_item:hover .arrow {
    border: 2px solid #318D7C;
}

.event_item .arrow {
    position: absolute;
    bottom: 7%;
    right: 7%;
    width: 28px;
    height: 28px;
    line-height: 22px;
    border-radius: 100%;
    border: 2px solid #E3EDEC;
    color: #318D7C;
    text-align: center;
    font-size: 20px;
}

.event_item .content {
    position: absolute;
    top: 7%;
    left: 7%;
}

.event_item .day {
    font-family: "Condensed", sans-serif;
    color: #318D7C;
    font-size: 20px;
    margin-bottom: 5px;
}

.event_item .title {
    color: #ACB7B1;
    font-size: 24px;
    line-height: 110%;
    font-style: italic;
    width: 90%;
}

#category_bar {
    overflow-x: scroll;
    display:block;
    padding: 20px 30px 0px 30px;
    white-space: no-wrap;
    position: sticky;
    top: 0px;
    height: 85px;
    border-bottom: 1px solid #E3EDEC;
    background-color: #F9F5ED;
    z-index: 1;
}

#category_wrapper {
    position: absolute;
    white-space: nowrap;
}

#category_wrapper .category a {
    position:absolute;
    top: 0;
    left:0;
    display:block;
    width:100%;
    height: 100%;
}

.category {
    display: inline-block;
    margin-right: 10px;
    padding: 7px 10px;
    font-family: "Condensed", serif;
    cursor: pointer;
    position:relative;
}

#cat_all {
    color: #232A46;
    border: 2px solid #232A46;
}

#cat_all.active {
    color: white;
    background: #232A46;
}

#cat_sports {
    color: #E83461;
    border: 2px solid #E83461;
}

#cat_sports.active {
    color: white;
    background: #E83461;
}

#cat_family {
    color: #CB9165;
    border: 2px solid #CB9165;
}

#cat_family.active {
    color: white;
    background: #CB9165;
}

#cat_arts {
    color: #9E57A5;
    border: 2px solid #9E57A5;
}

#cat_arts.active {
    color: white;
    background: #9E57A5;
}

#cat_community {
    color: #4E5053;
    border: 2px solid #4E5053;
}

#cat_community.active {
    color: white;
    background: #4E5053;
}

#cat_culture {
    color: #046D32;
    border: 2px solid #046D32;
}

#cat_culture.active {
    color: white;
    background: #046D32;
}

#cat_entertainment {
    color: #A53B62;
    border: 2px solid #A53B62;
}

#cat_entertainment.active {
    color: white;
    background: #A53B62;
}

#cat_music {
    color: #20B8D9;
    border: 2px solid #20B8D9;
}

#cat_music.active {
    color: white;
    background: #20B8D9;
}

#cat_food {
    color: #F2AE3B;
    border: 2px solid #F2AE3B;
}

#cat_food.active {
    color: white;
    background: #F2AE3B;
}



.hide {display:none;}

#event_wrapper {
    display: block;
    position: relative;
    border-bottom: 1px solid #E3EDEC;
    margin-bottom:30px;
}

#event_content {
    padding-left: 30px;
    padding-top: 30px;
}

#event_details {
    margin-top: 25px;

}

#event_title {
    text-transform: uppercase;
    font-family: "Condensed", sans-serif;
    font-style: italic;
    font-size: 36px;
    color: #318D7C;
    max-width: 90%;
    line-height: 105%;
    margin-bottom: 3%;
}

#event_time {
    font-family: "Condensed", sans-serif;
    font-size: 19px;
    /* color: #8E1C2C; */
    color: #CD9D9F;
    max-width: 180px;
    line-height: 100%;
    margin-bottom: 15px;
    background-image: url('time.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 24px;
    position: relative;
    padding-left: 40px;
    display: inline-block;
    margin-right: 20px;
}

#event_location {
    color: #CD9D9F;
    font-family: "Condensed", sans-serif;
    font-size: 19px;
    font-style: italic;
    max-width: 180px;
    line-height: 100%;
    background-image: url('location.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 24px;
    position: relative;
    padding-left: 40px;
    display: inline-block;
    margin-bottom: 25px;
    vertical-align: top;
    min-height: 35px;
}

#event_description {
    color: #ACB7B1;
    line-height: 115%;
    font-size: 19px;
    max-width: 80%;
    padding-bottom: 50px;
}

#event_description a {
    color: #318D7C;
}

.event_link {margin-top:40px;}

#event_description .event_link a {
    background: #318D7C;
    color: #fff;
    padding: 10px 12px 12px 12px;
    font-size: 19px;
    text-decoration:none;
}

#hp_schedule {
    display: none;
    white-space: nowrap;
}



#sidebar {
    display: none;
    border-left: 1px solid #E3EDEC;
    bottom: 0;
}

#header {
    display: table;
    margin: 0 auto;
    position: relative;
    border-bottom: 1px solid #E3EDEC;
}

#mobile_hamburger {
    min-width: 100px;
    display: table-cell;
    background-image: url('hamburger.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 40%;
    border-left: 1px solid #E3EDEC;
}

#mobile_hamburger:hover {
    box-shadow: inset 2px 0px 10px #ddd;
    cursor: pointer;
}

#header_logo {
    display: table-cell;
    width: 100%;
    position: relative;
    padding: 30px 30px 30px 30px;
    cursor: pointer;
}

#header_logo img {
    max-width: 100%;
    cursor:pointer;
}

#birds {
    display: none;
}

#three_day {
    padding: 0px 0px 50px 0px;
    text-align: right;
    display: flex;
    width: 100%;
    overflow: visible;
    border-bottom: 1px solid #E3EDEC;
    flex-wrap: wrap;
    position: relative;
}

#three_day #bottom_bird {
    position: absolute;
    bottom: -3%;
    left: 0;
    width: 46%;
}

.square {
    padding: 7%;
}

#three_day .text img {
    padding-top: 50px;
    padding-right: 30px;
    width: 90%;
    float: right;
}

#slideshow {
    width: 50%;
    border-right: 1px solid #E3EDEC;
}

#controls {
    display: none;
}

#yellow_bird {
    width: 50%;
    position: relative;
}

#yellow_bird img {
    position: absolute;
    left: 17%;
    bottom: 0;
    width: 65%;
}

#yellow_bird a, .programme_link {
    position: absolute;
    top: 0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    z-index:1;
}

.programme_link {
    width: 40%;
    right:0;
    left: auto;
    display:none;
}

#three_day .text {
    border-top: 1px solid #E3EDEC;
    width: 100%;
}

@media only screen and (min-width: 400px) {

    #three_day #bottom_bird {
        width: 40%;
    }

    .event_item {
        flex-grow: 1;
        width: calc(50% - 20px);
        height: calc(50% - 20px);
        aspect-ratio: 1;
        display: inline-block;
        border: 1px solid #E3EDEC;
        flex-direction: column;
        position: relative;
    }

    #sidebar {
        min-width: 100px;
    }

    .event_item .title {
        font-size: 20px;
    }

    #event_description {
        max-width: 80%;
    }

    .event_list_item .time {
        font-size: 17px;
    }

    .event_list_item .title {
        font-size: 21px;
        padding-left: 60px;
    }
}


@media only screen and (min-width: 600px) {
    #content {
        overflow: visible;
    }

    #main_wrap {
        display: table;
        max-width: 1200px;
        margin: 0 auto;
    }

    #sidebar {
        min-width: 100px;
        display: table-cell;
        vertical-align: top;
    }

    .social {
        height: 100px;
    }

    #sidebar_wrapper {
        position: sticky;
        top: 0;
    }

    #content {
        display: table-cell;
        width: 100%;
    }

    #mobile_hamburger {
        display: none;
    }

    #header {
        display: block;
    }

    #desktop_hamburger {
        display: block;
        height: 155px;
        border-bottom: 1px solid #E3EDEC;
        background-image: url('hamburger.svg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 40%;
        transition: all;
        transition-duration: .25s;
        cursor: pointer;
    }

    #desktop_hamburger:hover,
    .social:hover {

        box-shadow: inset 2px 0px 10px #ddd;
    }

    #header_logo {
        padding: 6.5% 0px 6.5% 45px;
    }

    #header_logo {
        padding-left: 30px;
    }

    #header_logo img {
        max-width: 50%;
    }

    #birds {
        display: block;
        position: absolute;
        max-height: 65%;
        height: auto;
        right: 30px;
        top: 17%;
        z-index: 2;
        pointer-events: none;
    }

    .section_header {
        padding: 50px 30px 10px 30px;
    }

    .section_header h2 {
        font-size: 66px;
    }

    .section_header .right_link {
        display: none;
        font-size: 32px;
        border-bottom-width: 4px;
    }

    #yellow_bird {
        display: none;
    }

    #slideshow {
        width: 32%;
        position: relative;
    }

    #three_day {
        padding-bottom: 0;
    }

    #three_day .text {
        width: 68%;
        border-top: none;
    }

    #three_day .text img {
        width: 90%;
        padding-top: 14%;
        padding-bottom: 14%;
    }

    #three_day #bottom_bird {
        display: none;
    }

    .square {
        padding: 30px;
        position: relative;
    }

    #controls {
        display: block;
        text-align: center;
        position: absolute;
        bottom: 25px;
        left: 0;
        width: 100%;
    }

    .slide_circle {
        display: inline-block;
        border-radius: 100%;
        border: 1px solid #318D7C;
        margin: 0 4px;
        width: 10px;
        height: 10px;
    }

    .slide_circle.active {
        background: #318D7C;
    }

    .event_item {

        width: calc(50% - 20px);
        height: calc(50% - 20px);

    }

    .event_item .day {
        font-size: 20px;
    }

    .event_item .title {
        font-size: 24px;
    }

    .event_item .arrow {
        width: 36px;
        height: 36px;
        line-height: 30px;
    }

    #menu #navigation a {
        color: #318D7C;
        text-decoration: none;
        font-size: 40px;
        line-height: 200%;
        text-transform: uppercase;
    }

    .menu_social {
        width: 50px;
    }

    .section_header h2 img {
        width: 70%;
    }

    .section_header.schedule h2 img {
        width: 100%;
    }

    #footer img {
        display: inline-block;
        max-width: 20%;
        margin: 15px 14% 15px 14%;
    }

    #event_title {
        max-width: 75%;
        margin-bottom: 25px;
    }

    #event_details {
        margin-top: 0;
    }

    #event_content {
        padding-top: 6.5%;
        margin-left: 100px;
        border-left: 1px solid #E3EDEC;
        min-height: 500px;
    }

    #event_description {
        max-width: 70%;
        font-size: 24px;
    }

    .category {
        margin-right: 10px;
        padding: 10px 15px;
    }

    #category_bar {
        padding: 30px 30px 0px 30px;
        height: 105px;
    }

    .programme_link {
        display:block;
    }

}

@media only screen and (min-width: 800px) {


    #hp_schedule {
        display: block;
        opacity: .7;
    }

    #hp_schedule a {
        position:absolute;
        top: 0; left: 0; width:100%; height: 100%; display:block;
    }

    .event_item {

        width: calc(33% - 20px);
        height: calc(33% - 20px);

    }

    .event_item .title {
        font-size: 24px;
    }

    .section_header .right_link {
        font-size: 32px;
        border-bottom-width: 4px;
    }

    .section_header {
        padding: 80px 30px 30px 30px;
    }

    .section_header.schedule {
        padding: 50px 30px 20px 30px;
    }

    .section_header h2 img {
        width: 70%;
    }

    .section_header.schedule h2 img {
        width: 80%;
        padding-left: 15px;
    }

    .subheader {
        padding-left: 45px;
    }

    .day_set {
        padding: 0 45px;
    }

    .subheader .right_detail {
        right: 45px;
    }

    #category_bar {
        padding-left: 45px;
    }

    #event_time {

        max-width: 180px;

        margin-bottom: 25px;
        padding-left: 35px
    }

    #event_location {

        max-width: 180px;

        padding-left: 35px
    }

    #event_details {
        position: absolute;
        left: 50px;
        top: 60px;
    }

    #event_content {
        margin-left: 250px;
        border-left: 1px solid #E3EDEC;
        padding-left: 5%;
        padding-top: 50px;
        min-height: 400px;
        display: block;
    }

    #event_title {

        font-size: 36px;

        max-width: 75%;
        line-height: 105%;
        margin-bottom: 25px;

    }

    #event_time,
    #event_location {
        display: block;
    }

    #header_logo {
        padding: 6.5% 0px 6.5% 45px;
    }

    #homepage #header_logo {
        padding-left:30px;
    }

    #homepage #content {
        overflow:visible;
    }

    .event_list_item .time {
        max-width:100px;
    }

    .event_list_item .title {
        padding-left: 100px;
        max-width: 80%;
    }

    #cat_food:hover {
        color: white;
        background: #F2AE3B;
    }
    
    #cat_music:hover {
        color: white;
        background: #20B8D9;
    }
    
    #cat_all:hover {
        color: white;
        background: #232A46;
    }
    
    #cat_sports:hover {
        color: white;
        background: #E83461;
    }
    
    #cat_family:hover {
        color: white;
        background: #CB9165;
    }
    
    #cat_arts:hover {
        color: white;
        background: #9E57A5;
    }
    
    #cat_community:hover {
        color: white;
        background: #4E5053;
    }
    
    #cat_culture:hover {
        color: white;
        background: #046D32;
    }
    
    #cat_entertainment:hover {
        color: white;
        background: #A53B62;
    }
}

@media only screen and (min-width: 900px) {
    .section_header h2 img {
        width: 90%;
    }

    .section_header.schedule h2 img {
        max-width: 80%;
    }

    .event_item .title {
        font-size: 27px;
    }

    .social {
        height: 155px;
        background-size: 28%;
    }

    #sidebar {
        min-width: 155px;
    }
}

@media only screen and (min-width: 1000px) {
    .section_header h2 img {
        width: 100%;
    }

    .section_header.schedule h2 img {
        max-width: 80%;
    }

    .event_item .title {
        font-size: 29px;
    }
}

@media only screen and (min-width: 1199px) {
    #main_wrap {
        border: 1px solid #E3EDEC;
        margin: 20px auto;
    }

}