/*************************
==============================
TABLE OF CONTENTS
==============================
01A. General
02B. General Layout
03C. Forms / Buttons
04D. Header
05E. Navigation
    05Ea. Mobile Navigation
    05Eb. Mobile Nav Panels
    05Ec. Main Nav
    05Ed. Drop Downs
06F. Content
07G. Footer
08H. Login Page
09I. Contact Page
10J. Categories / Subpages
*************************/

/*************************01A. General *************************/
body {
    background: #fff;
    color: #4d4d4d;
    font: 17px/1.2 'Helvetica', 'Open Sans', arial, sans-serif;
}

p {
    margin: 15px 0;
    line-height: 1.5;
}

    p:first-of-type {
        margin-top: 0;
    }

.image img, .icon svg, .logo svg, .logo img, .arrow svg {
    display: block;
}

.st0 {
    fill: #F15F26;
}

.st1 {
    fill: #FFFFFF;
}

.st2 {
    fill: #202020;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

a {
    color: #F15F26;
}

    a:visited {
        color: #F15F26;
    }

    a:hover, a:focus {
        color: #999;
    }


/* bringing down all heading sizes by 5 pixels for headings 1 through 4*/
h1, h2, h3, h4, h5, h6 {
    margin: 15px 0 25px;
}

    h1:first-of-type, h2:first-of-type, h3:first-of-type, h4:first-of-type, h5:first-of-type, h6:first-of-type {
        margin-top: 0;
    }

h2 {
    /*font-size: 30px;*/
    font-size:25px;
}

h3 {
    /*font-size: 26px;*/
    font-size: 21px;
}

h4 {
    /*font-size: 24px;*/
    font-size: 19px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

.section-header {
    border-bottom: 1px solid #ccc;
}

@media only screen and (min-width : 700px) {
    h1 {
        /*font-size: 42px;*/
        font-size: 37px;
    }

    h2 {
        /*font-size: 36px;*/
        font-size: 31px;
    }

    h3 {
        /*font-size: 32px;*/
        font-size: 27px;
    }

    h4 {
        /*font-size: 28px;*/
        font-size: 23px;
    }

    h5 {
        font-size: 22px;
    }

    h6 {
        font-size: 20px;
    }
}

/* Skip link for accessibility*/
#skip a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

    #skip a:focus {
        position: static;
        width: auto;
        height: auto;
    }

/************************* 02B. General Layout *************************/
.full {
    margin: 0 auto;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    z-index: 2;
}

.inner {
    margin: auto;
    padding: 30px 15px;
    max-width: 1070px;
    width: 100%;
}

.fr, .fl {
    width: 100%;
    float: none;
    margin: 15px auto;
}

@media only screen and (min-width : 900px) {
    .full {
        padding-top: 171px;
    }

    .fr, .fl {
        width: 50%;
    }

        .fr {
            float: right;
            margin: 0 0 15px 20px;
        }

        .fl {
            float: left;
            margin: 0 20px 15px 0;
        }
}

@media only screen and (min-width : 1100px) {
    .interior .inner {
        padding: 50px 0;
    }

    .inner {
        padding: 0;
    }
}

/************************* 03C. Forms / Buttons *************************/
/*
    reset.css and forms.css has base styles for buttons and form elements.  To override them, put them here, do not edit those stylesheets.
    To override styles properly, you need to grab the exact class/elements listed in those base stylesheets.  Below are some of them sans styles.
    If you don't need to override anything, delete the empty classes, don't leave unnecessary codes.
*/
button.btn, .btn a, a.btn, input[type="submit"], button[type="submit"] {
    background: transparent;
    border: 5px solid #c0c0c0;
    color: #4d4d4d;
    font-weight: 700;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

    button.btn-secondary, .btn-secondary a, a.btn-secondary, input[type="submit"].btn-secondary, button[type="submit"].btn-secondary {
        border: 5px solid #fff;
    }

    button.btn-cancel, .btn-cancel a, a.btn-cancel, input[type="submit"].btn-cancel, button[type="submit"].btn-cancel {
    }

    button.btn-small, .btn-small a, a.btn-small, input[type="submit"].btn-small, button[type="submit"].btn-small {
    }

    button:hover.btn, .btn a:hover, a:hover.btn, input[type="submit"]:hover, button[type="submit"]:hover,
    button:focus.btn, .btn a:focus, a:focus.btn, input[type="submit"]:focus, button[type="submit"]:focus {
        border: 5px solid #F15F26;
        background: #F15F26;
        color: #fff;
    }

input[type=submit][disabled], input[type=button][disabled], button[disabled], a[disabled],
input[type=submit][disabled]:hover, input[type=button][disabled]:hover, button[disabled]:hover, a[disabled]:hover
/* Usually the stylings are the same as the button styles from above so there is no hover styles, or you can do a separate syle for disabled buttons */ {
}

    button[disabled].btn-secondary:hover, .btn-secondary a.disabled:hover, a.btn-secondary.disabled:hover, input[type="submit"][disabled].btn-secondary:hover, input[type="button"][disabled].btn-secondary:hover, button[type="submit"][disabled].btn-secondary:hover {
    }

/************************* 04D. Header *************************/
header.main {
    padding: 60px 0 20px;
    text-align: center;
    background: #fff;
}

    header.main .inner {
        max-width: 1000px;
        padding: 0;
    }

    header.main .logo {
        max-width: 125px;
        margin: 0 auto 20px;
    }

    header.main .top-btns ul {
        display: inline-block;
        margin: 0 10px;
    }

    header.main .top-btns li {
        display: inline-block;
        margin: 0 0 0 15px;
        vertical-align: middle;
    }

        header.main .top-btns li:first-child {
            margin-left: 0;
        }

    header.main .top-btns a {
        font-weight: 700;
        text-decoration: none;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

        header.main .top-btns a .fa {
            height: 35px;
            width: 25px;
            color: #F15F26;
            font-size: 25px;
            font-weight: normal;
            vertical-align: middle;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

        header.main .top-btns a .fa:before {
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }

            header.main .top-btns a:hover .fa, header.main .top-btns a:focus .fa, header.main .top-btns li:last-child a:hover, header.main .top-btns li:last-child a:focus {
                color: #c0c0c0;
            }

@media only screen and (min-width: 900px) {
    header.main {
        padding: 20px 20px 0;
        position: fixed;
        top: 0;
        z-index: 999999;
        width: 100%;
        background: #fff;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

        header.main.change-it {
            border-bottom: 1px solid #4d4d4d;
        }

    header.main .logo {
        max-width: none;
        width: 125px;
        float: left;
        margin: 0;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

        header.main.change-it .logo {
            width: 80px;
        }

        header.main .right {
            width: calc(100% - 125px);
            float: right;
            text-align: right;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

        /*header.main.change-it .right {
            width: calc(100% - 125px);
        }*/

        header.main .top-btns {
            margin-top: 10px;
            margin-bottom: 60px;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

        header.main.change-it .top-btns {
            margin-bottom: 20px;
        }

    header.main .main-nav {
        text-align: right;
    }
}

@media only screen and (min-width: 1350px) {
    header.main .inner {
        max-width: 1200px;
    }
}

@media only screen and (min-width: 1650px) {
    header.main .inner {
        max-width: 1500px;
    }
}

/************************* 05E. Navigation *************************/
.main-nav,
#main-nav ul p, .main-nav ul br {
    display: none;
}

/* 05Ea. Mobile Navigation */
.toggle-menu {
    background: #333;
    color: #fafafa;
    font-size: 16px;
    left: 0;
    position: fixed;
    text-decoration: none;
    text-transform: uppercase;
    top: 0;
    width: 100%;
    z-index: 10;
}

    .toggle-menu .icon, .toggle-menu .menu-text {
        display: inline-block;
        vertical-align: middle;
    }

    .toggle-menu p {
        margin: 0;
    }

    .toggle-menu a {
        color: #fafafa;
        display: block;
        padding: 10px 15px;
        text-decoration: none;
    }

    /* Hamburger menu icon */
    .toggle-menu .icon, .toggle-menu .icon:after, .toggle-menu .icon:before {
        background: #fafafa;
        -webkit-transition: all 0s .3s;
        transition: all 0s .3s;
        width: 18px;
        height: 2px;
    }

        .toggle-menu .icon:after, .toggle-menu .icon:before {
            background: #fafafa;
            content: "";
            position: absolute;
            left: 0;
        }

        .toggle-menu .icon:before {
            bottom: 5px;
            -webkit-transition: bottom .3s .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: bottom .3s .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .toggle-menu .icon:after {
            top: 5px;
            -webkit-transition: top .3s .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: top .3s .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1);
        }

    /* When clicked, hamburger icon animates into an X */
    .toggle-menu .is-clicked .icon {
        background: rgba(255, 255, 255, 0);
    }

        .toggle-menu .is-clicked .icon:after {
            background: #F15F26;
            top: 0;
            -ms-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transition: top .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: top .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .toggle-menu .is-clicked .icon:before {
            background: #F15F26;
            bottom: 0;
            -ms-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transition: bottom .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: bottom .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1);
        }

/* 05Eb. Mobile Nav Panels */
[id$="nav-copy"] {
    background: #fff;
    box-shadow: 5px 0 5px -5px rgba(0,0,0,.5);
    left: 0;
    overflow-y: auto;
    padding: 42px 0;
    position: fixed;
    top: 0;
    -webkit-transform: translateX(-280px);
    -ms-transform: translateX(-280px);
    transform: translateX(-280px);
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
    transition: transform .4s 0s, visibility 0s .4s;
    width: 230px;
    height: 100%;
    z-index: 9;
}

    [id$="nav-copy"] ul li a {
        border-bottom: 1px solid #e3e3e3;
        color: #202020;
        display: block;
        padding: 15px;
        text-decoration: none;
    }

        [id$="nav-copy"] ul li a:hover {
            background: #F15F26;
            color: #fff;
        }

    [id$="nav-copy"] ul li ul {
        font-size: 14px;
        line-height: 1.2;
    }

        [id$="nav-copy"] ul li ul li a {
            padding-left: 30px;
        }

    [id$="nav-copy"].open-menu {
        -webkit-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        transform: translateX(0) !important;
        -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
        transition: transform .4s 0s, visibility 0s 0s;
        -webkit-overflow-scrolling: touch;
    }

.dd-wrap {
    display: block;
    width: 100%;
}

.open-dd {
    background: #e3e3e3;
    cursor: pointer;
    display: block;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px;
    height: 100%;
    z-index: 10;
}

    /* Icon to indicate there's drop downs to open */
    .open-dd::after {
        content: "\f103";
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .open-dd:hover, .open-dd:focus {
        background: #F15F26;
        color: #fff;
    }

.has-sub ul {
    display: none;
}

.has-sub span {
    display: block;
}

.has-sub > span {
    height: 100%;
}

/* 05Ec. Main Nav */
.main-nav {
    font-size: 18px;
    margin: 20px auto 0;
    z-index: 15;
}

    .main-nav ul li {
        display: inline-block;
        margin: 0;
    }

        .main-nav ul li a {
            display: block;
            text-decoration: none;
            padding: 0 0 20px 20px;
            color: #333;
            text-transform: uppercase;
        }

            .main-nav ul li a:hover, .main-nav ul li a:focus {
                color: #F15F26;
            }

    /* 05Ed. Drop Downs */
    .main-nav ul > li > ul {
        background-color: none;
        display: block;
        font-size: 16px;
        left: 0;
        line-height: 1.2;
        margin: -3px 0 0 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        pointer-events: none;
        position: absolute;
        text-align: left;
        top: auto;
        -webkit-transition: max-height .1s ease-in-out 0s, opacity .1s ease-in-out 0s;
        transition: max-height .1s ease-in-out 0s, opacity .1s ease-in-out 0s;
        width: 230px;
        height: auto !important;
        z-index: 100;
    }

        .main-nav ul > li > ul li {
            display: inline-block;
            height: auto !important;
            margin: 0;
            padding: 0;
            position: relative;
            width: 100%;
        }

            .main-nav ul > li > ul li:last-child {
                border-bottom: 0;
            }

            .main-nav ul > li > ul li a {
                background: transparent;
                color: #fff !important;
                display: block;
                padding: 12px !important;
                -webkit-transition: none;
                transition: none;
            }

            .main-nav ul > li > ul li:last-of-type a {
                border-bottom: 0;
            }

            .main-nav ul > li > ul li:hover a, .main-nav ul > li > ul li a:focus {
                color: #F15F26 !important;
            }

    .main-nav ul > li:hover > ul, .main-nav ul > li > a:focus + ul {
        max-height: 700px;
        opacity: 1;
        pointer-events: visible;
        -webkit-transition: max-height .7s ease-in-out 0s;
        transition: max-height .7s ease-in-out 0s;
    }

    /*Full Screen Overlay when hovering Main Nav <li>*/
    .main-nav ul li.overlay div {
        background: -webkit-linear-gradient(rgba(0,0,0,.95),rgba(0,0,0,.15));
        background: -o-linear-gradient(rgba(0,0,0,.95),rgba(0,0,0,.15));
        background: -moz-linear-gradient(rgba(0,0,0,.95),rgba(0,0,0,.15));
        background: linear-gradient(rgba(0,0,0,.95),rgba(0,0,0,.15));
        position: fixed;
        bottom: 0;
        left: 0;
        height: calc(100% - 171px);
        width: 100%;
        z-index: 22;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: visibility .2s linear,opacity .3s linear;
        -moz-transition: visibility .2s linear,opacity .3s linear;
        -o-transition: visibility .2s linear,opacity .3s linear;
        transition: visibility .2s linear,opacity .3s linear;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

        header.main.change-it .main-nav ul li.overlay div {
            height: calc(100% - 130px);
        }

    .main-nav ul li.has-ul:hover ~ li.overlay div {
        visibility: visible;
        opacity: 1;
        z-index: 22;
        -webkit-transition: visibility .5s linear,opacity .4s linear;
        -moz-transition: visibility .5s linear,opacity .4s linear;
        -o-transition: visibility .5s linear,opacity .4s linear;
        transition: visibility .5s linear,opacity .4s linear;
    }

@media only screen and (min-width : 900px) {
    [id$="nav-copy"], .toggle-menu {
        display: none; /* Hide mobile menus */
    }

    .main-nav {
        display: block; /* Unhide desktop menu */
    }
}

@media only screen and (min-width: 1650px) {
    .main-nav {
        font-size: 24px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    header.main.change-it .main-nav {
        font-size: 18px;
    }

    .main-nav ul li.overlay div {
        height: calc(100% - 178px);
    }

    header.main.change-it .main-nav ul li.overlay div {
        height: calc(100% - 131px);
    }
}

/************************* 06F. Content *************************/
.banner {
    max-width: 1000px;
    margin: 0 auto 40px;
    background: #c0c0c0;
}

.banner .arrow {
    top: 0;
    position: absolute;
    background: rgba(255,255,255,0.75);
    padding: 10px;
    z-index: 11;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

    .banner .arrow.arrow-prev {
        left: 0;
    }

    .banner .arrow.arrow-next {
        right: 0;
    }

.banner .arrow svg {
    width: 20px;
    height: 37px;
}

    .banner .arrow:hover {
        background: #F15F26;
    }

        .banner .arrow:hover .st2 {
            fill: #fff;
        }

.banner .text {
    padding: 20px;
}

    .banner .text h2 {
        color: #4d4d4d;
        font-size: 24px;
        font-weight: normal;
    }

    .banner .text p {
        color: #000;
    }

@media only screen and (min-width: 1350px) {
    .banner {
        max-width: 1200px;
    }

        .banner .text {
            width: 350px;
            display: inline-block;
            vertical-align: middle;
            float: left;
            position: absolute;
            top: 50%;
            -ms-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            left: 0;
        }

    .banner .image {
        width: calc(100% - 360px);
        border-left: 10px solid #fff;
        display: inline-block;
        vertical-align: middle;
        float: right;
    }

        .banner .arrow svg {
            width: 30px;
            height: 55px;
        }

        .banner .arrow {
            top: 50%;
            -ms-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

            .banner .arrow.arrow-prev {
                left: -65px;
            }

            .banner .arrow.arrow-next {
                right: -65px;
            }

            .banner .arrow:hover {
                background: none;
            }

                .banner .arrow:hover .st2 {
                    fill: #F15F26;
                }
}

@media only screen and (min-width: 1650px) {
    .banner {
        max-width: 1500px;
    }

    .banner .text {
        width: 490px;
        padding: 50px;
    }

        .banner .text h2 {
            font-size: 34px;
        }

    .banner .image {
        width: calc(100% - 490px);
    }
}

.main-info {
    max-width: 1040px;
    padding: 0 20px;
    margin: auto;
}

    .main-info ul li header {
        position: absolute;
    }

        .main-info ul li:nth-of-type(3) header {
            top: 120px;
            left: -15px;
        }

    .main-info ul li:nth-of-type(2) header {
        top: 80px;
        left: -15px;
    }

    .main-info ul li:nth-of-type(1) header {
        top: 110px;
        left: -15px;
    }

    .main-info ul li header h3 {
        /* Abs positioning makes it not take up vert space */
        position: absolute;
        top: 0;
        left: 0;
        /* Border is the new background */
        background: none;
        padding-bottom: 5px;
        border-bottom: 1px solid #F15F26;
        /* Rotate from top left corner (not default) */
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
    }

    .main-info ul li {
        margin: 0 auto 40px;
        max-width: 300px;
        display: block;
        padding-left: 20px;
        font-size: 17px;
        text-transform: uppercase;
        color: #999;
        font-weight: 700;
    }

        .main-info ul li span.icon {
            display: inline-block;
            margin-right: -5px;
            width: 50px;
        }

        .main-info ul li:last-child span.icon {
            display: inline-block;
            margin-right: -5px;
            width: 37px;
        }

        .main-info ul li:last-child {
            margin-bottom: 70px;
        }

    .main-info ul li svg {
        width: 50px;
        height: 50px;
    }

        .main-info ul li:last-child svg {
            width: 37px;
            height: 50px;
        }

    .main-info ul li h3 {
        font-size: 21px;
        color: #4d4d4d;
        text-transform: uppercase;
        display: inline-block;
        vertical-align: bottom;
        margin: 0;
        margin-left: 10px;
    }

    .main-info .content ul li {
        margin-bottom: 10px;
    }

@media only screen and (min-width: 680px) {
    .main-info ul li {
        margin: 0 auto 40px;
        padding: 0 20px 0 35px;
        max-width: none;
        width: 50%;
        float: left;
    }

        .main-info ul li:last-child {
            clear: both;
            float: none;
        }

        .main-info .content ul li {
            width: 100%;
            padding: 0;
        }

            .main-info .content ul li:last-child {
                clear: none;
            }
}

@media only screen and (min-width: 1000px) {
    .main-info ul li {
        width: 33.3333%;
    }
    
    .main-info ul li:last-child {
        clear: none;
        float: left;
        width: 33.3333%;
    }

    .main-info .content ul li:last-child {
        clear: none;
        float: none;
        width: auto;
    }
}

@media only screen and (min-width: 1350px) {
    .main-info {
        max-width: 1240px;
    }

        .main-info ul li {
            font-size: 20px;
        }

    .main-info > ul li:nth-of-type(1) {
        width: 30%;
    }

        .main-info > ul li:nth-of-type(2) {
            width: 25%;
        }

        .main-info > ul li:last-child {
            width: 45%;
        }

        .main-info > ul li .content li {
            width: 100%;
        }
}

@media only screen and (min-width: 1650px) {
    .main-info {
        max-width: 1540px;
    }
}

.ongoing, .upcoming {
    max-width: 725px;
    padding: 0 20px;
    margin: auto;
}

.ongoing .main-exhibit {
    margin-bottom: 40px;
}

.ongoing .text {
    background: #c0c0c0;
    padding: 20px;
}

    .ongoing h2, .upcoming h2 {
        font-size: 24px;
        color: #4d4d4d;
        font-weight: normal;
    }

    .ongoing .text h3 {
        color: #fff;
        font-size: 21px;
    }

    .ongoing .btn {
        text-align: right;
    }

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    opacity: 0.75;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

    .play-btn .fa {
        position: absolute;
        top: 50%;
        left: 55%;
        -ms-transform: translate(-50%,-55%);
        -webkit-transform: translate(-50%,-55%);
        transform: translate(-50%,-55%);
        color: #fff;
    }

    .play-btn:before {
        width: 50px;
        height: 50px;
        background: #F15F26;
        border-radius: 25px;
        content:'';
        display: block;
    }

    .play-btn:hover {
        opacity: 1;
    }

.get-involved .block {
    position: relative;
    margin-bottom: 40px;
}

    .get-involved .block .overlay {
        background: rgba(241,95,38,0.70);
        position: absolute;
        height: 80px;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        display: block;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .get-involved .block h3 {
        margin: 0;
        font-size: 21px;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .get-involved .block img {
        display: block;
    }

    .get-involved .block a:hover .overlay {
        height: 100%;
    }

    .get-involved .block a:hover h3 {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

.upcoming li {
    max-width: 340px;
    margin: 0 auto 30px;
}

.upcoming .image .cat {
    position: absolute;
    display: inline-block;
    width: auto;
    background: rgba(192,192,192,0.7);
    bottom: 0;
    left: 0;
    color: #fff;
    text-transform: uppercase;
    padding: 5px;
}

    .upcoming .image {
        width: 250px;
        margin: 0 auto 15px;
    }

        .upcoming .image img {
            width: 100%;
        }

    .upcoming .meta p {
        line-height: 1;
        margin: 0 0 5px;
        font-weight: bold;
        color: #999;
    }

    .upcoming .content h3 {
        font-size: 21px;
        color: #4d4d4d;
        margin: 10px 0;
    }

    .upcoming .content .btn {
        text-align: right;
    }

    .upcoming .calendar-btn {
        text-align: center;
        clear: both;
        max-width: 320px;
        margin: auto;
    }

    .calendar-btn .icon .st1 {
        fill: #F15F26;
    }
        
        .upcoming .calendar-btn a {
            display: block;
            text-decoration: none;
            color: #F15F26;
            text-transform: uppercase;
            font-weight: bold;
            padding: 10px 15px;
            -webkit-transition: background 0.3s;
            transition: background 0.3s;
        }

            .upcoming .calendar-btn a:hover {
                color: #c0c0c0;
            }

                .upcoming .calendar-btn a:hover .st1 {
                    fill: #c0c0c0;
                }

    .upcoming .calendar-btn .icon {
        width: 50px;
        margin: 0 auto 10px;
    }

.upcoming .calendar-btn .icon svg {
    width: 50px;
    height: 50px;
}

@media only screen and (min-width: 400px) {
    .upcoming .calendar-btn .icon {
        display: inline-block;
        vertical-align: middle;
        margin: 0 -5px 0 0;
    }

    .upcoming .calendar-btn span {
        display: inline-block;
        vertical-align: middle;
        padding-left: 10px;
        width: calc(100% - 50px);
        text-align: left;
    }
}

@media only screen and (min-width: 680px) {
    .get-involved .block {
        width: 50%;
        float: left;
    }

        .get-involved .block:first-of-type {
            padding-right: 20px;
        }

        .get-involved .block:last-of-type {
            padding-left: 20px;
        }

    .play-btn:before {
        width: 100px;
        height: 100px;
        border-radius: 50px;
    }

    .play-btn .fa {
        font-size: 35px;
    }

    .upcoming {
        max-width: 725px;
    }

        .upcoming li {
            max-width: none;
            width: 100%;
        }

        .upcoming li .image {
            float: left;
            padding-right: 15px;
        }

        .upcoming li .text {
            width: calc(100% - 250px);
            float: right;
        }

    .upcoming .calendar-btn {
        max-width: none;
        width: 100%;
    }

        .upcoming .calendar-btn span {
            max-width: 250px;
        }

        .upcoming .image .cat {
            bottom: auto;
            top: 0;
            left: auto;
            right: 15px;
        }
}

@media only screen and (min-width: 1240px) {
    .all-events {
        max-width: 1500px;
        margin: auto;
    }
    
    .ongoing, .upcoming {
        width: 50%;
        float: left;
        margin: auto;
    }

        .ongoing h2, .upcoming h2 {
            font-size: 34px;
        }

        .upcoming .calendar-btn a {
            padding: 20px;
        }
}

.large-img {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 300px;
}

@media only screen and (min-width: 800px) {
    .large-img {
        height: 500px;
    }
}

.sponsors {
    padding: 40px 20px;
}

.sponsors .inner {
    max-width: 1375px;
    margin: auto;
    text-align: center;
}

    .sponsors .inner ul li {
        max-width: 150px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 10px;
        font-size: 10px;
        font-weight: 700;
    }

        .sponsors .inner ul li img {
            max-width: 150px;
            margin: auto;
        }

.map iframe {
    width: 100%;
    height: 300px;
    display: block;
}

@media only screen and (min-width: 800px) {
    .map iframe {
        height: 500px;
    }
}

/************************* 07G. Footer *************************/
footer.main {
    padding: 15px 0;
    text-align: center;
    width: 100%;
    background: #eee;
}

    footer.main .inner {
        max-width: 1375px;
    }

    footer.main nav {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 5px solid #fff;
    }

        footer.main nav li {
            display: inline-block;
            margin: 0 10px 5px;
        }

            footer.main nav li a {
                text-decoration: none;
                text-transform: uppercase;
                color: #4d4d4d;
            }

                footer.main nav li a:hover, footer.main nav li a:focus {
                    color: #999;
                }

    footer.main .block {
        text-align: left;
        max-width: 300px;
        margin: 0 auto 40px;
    }

    footer.main h3 {
        font-size: 21px;
        text-transform: uppercase;
        color: #202020;
        padding-bottom: 10px;
        border-bottom: 5px solid #fff;
        margin-bottom: 15px;
    }

    footer.main .bottom {
        clear: both;
        width: 100%;
    }

    footer.main .block li {
        margin-bottom: 10px;
    }

    .copyright, .manwaringSignature {
        display: inline-block;
        margin-bottom: 0;
    }

@media only screen and (min-width: 680px) {
    footer.main .block {
        max-width: none;
        width: 50%;
        float: left;
        padding: 0 20px;
    }

        footer.main .block:nth-of-type(3) {
            clear: both;
        }
}

@media only screen and (min-width: 1240px) {
    footer.main .block {
        width: 25%;
        padding: 0 20px;
    }

        footer.main .block:nth-of-type(3) {
            clear: none;
        }
}

/************************* 08H. Login Page *************************/
.login-wrapper {
    max-width: 350px;
}

.login-form {
    margin-bottom: 30px;
}

.login-create-link a {
    text-decoration: none;
}

@media only screen and (min-width : 800px) {
    .login-wrapper {
        max-width: none;
    }

    .login-form, .login-create-link {
        float: left;
        margin-bottom: 0;
        max-width: 350px;
        width: 50%;
    }

    .login-create-link {
        padding-left: 50px;
    }
}

/*********************** 09I. Contact Page ***********************/
.contact-content {
    margin-bottom: 40px;
}

@media only screen and (min-width: 850px) {
    .contact-form, .contact-content {
        float: left;
        width: 45%;
    }

    .contact-form {
        padding-left: 30px;
        width: 55%;
    }
}

@media only screen and (min-width : 900px) {
    .contact-form, .contact-content {
        float: left;
        width: 45%;
    }

    .contact-form {
        padding-left: 30px;
        width: 55%;
    }
}

/*********************** 10J. Categories / Subpages ***********************/
.categories {
    margin-top: 30px;
    text-align: center;
}

    .categories a {
        text-decoration: none;
        color: #fff;
    }

    .categories li {
        margin: 0 auto 30px;
        max-width: 350px;
        width: 100%;
        position: relative;
    }

    .categories li .title {
        background: rgba(241,95,38,0.70);
        position: absolute;
        height: 60px;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        display: block;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

        .categories li h3 {
            margin: 0;
            font-size: 18px;
            color: #fff;
            text-transform: uppercase;
            text-align: center;
            width: 100%;
            position: absolute;
            padding: 0 10px;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

    .categories li img {
        display: block;
    }

    .categories li a:hover .title {
        height: 100%;
    }

@media only screen and (min-width : 550px) {
    .categories li {
        float: left;
        margin-left: 15px;
        margin-right: 15px;
        max-width: none;
    }
}

@media only screen and (min-width : 550px) and (max-width : 850px) {
    .categories li {
        width: calc(100% / 2 - 16px);
    }

        .categories li:nth-of-type(2n+1) {
            clear: both;
            margin-left: 0;
        }

        .categories li:nth-of-type(2n+2) {
            margin-right: 0;
        }
}

@media only screen and (min-width : 851px) and (max-width : 1050px) {
    .categories li {
        width: calc(100% / 3 - 21px);
    }

        .categories li:nth-of-type(3n+1) {
            clear: both;
            margin-left: 0;
        }

        .categories li:nth-of-type(3n+3) {
            margin-right: 0;
        }
}

@media only screen and (min-width : 1051px) {
    .categories li {
        width: calc(100% / 4 - 24px);
    }

        .categories li:nth-of-type(4n+1) {
            clear: both;
            margin-left: 0;
        }

        .categories li:nth-of-type(4n+4) {
            margin-right: 0;
        }
}

.gallery-slider {
    margin: 0 auto 40px;
    background: none;
}

/*Calendar*/
.calendar {
    width: 100%;
}

.interior .upcoming {
    width: 100%;
}

.calendar .nav-buttons ul li {
    display: inline-block;
}

    .calendar .nav-buttons ul li:first-child {
        display: block;
    }

.calendar-header {
    margin-bottom: 0;
}

    .calendar-header .right {
        margin-top: 20px;
    }

.calendar td {
    background: #eee;
    text-align: left;
    vertical-align: initial;
}

    .calendar td.current .number {
        background: #F15F26;
    }

    .calendar td span.counter {
        display: none;
    }

.calendar ul {
    padding: 10px;
    margin: 0;
    list-style: none;
}

    .calendar ul li {
        margin-bottom: 10px;
    }

        .calendar ul li:last-child {
            margin-bottom: 0;
        }

.calendar .number {
    background: #4d4d4d;
    color: #fff;
    display: block;
    padding: 5px;
    text-align: center;
}

.chart {
    font-size: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    max-width: 600px;
    width: 100%;
}

.event-details, .event-wrap {
    max-width: 800px;
}

    .event-wrap table {
        margin-bottom: 20px;
    }

.hint img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.chart-wrap {
    width: 600px;
}

.chart .head {
    background: #005335 !important;
    border-bottom: 3px solid #003e28;
    color: #fff;
}

    .chart .head th {
        border: 1px solid #003e28;
        padding: 10px;
    }

.chart tr:nth-child(even) {
    background: #eee;
}

.chart tr:nth-child(odd) {
    background: #e3e3e3;
}

.chart tr:hover {
    background: #F15F26;
    color: #fff !important;
}

    .chart tr:hover a {
        color: #fff;
    }

        .chart tr a:hover, .chart tr a:focus {
            color: #ccc;
        }

.chart td {
    border: 1px solid #cec4b7;
    padding: 5px 10px;
}

.event-details th {
    border-right: 1px solid #cec4b7;
    text-align: left;
    padding: 10px;
}

.event-details td {
    border: none;
}

.event-details img {
    margin-right: 10px;
}

.ex-heading .icon {
    float: left;
    width: 35px;
}

.ex-heading h5 {
    margin-top: 10px;
}

.ex-heading .nm {
    margin-top: 0;
}

.ui-widget-content li.community a, .interior .upcoming li.community a {
    background: url(../Images/icon-community.png) no-repeat 8px 2px;
    padding: 5px 0 5px 40px;
}

.ui-widget-content li.bands a, .interior .upcoming li.bands a {
    background: url(../Images/icon-bands.png) no-repeat 8px 2px;
    padding: 5px 0 5px 40px;
}

.ui-widget-content li.restaurant-specials a, .interior .upcoming li.restaurant-specials a {
    background: url(../Images/icon-restaurant.png) no-repeat 8px 2px;
    padding: 5px 0 5px 40px;
}

.ui-widget-content li.lakeside-events a, .interior .upcoming li.lakeside-events a {
    background: url(../Images/icon-lakeside-events.png) no-repeat 0 2px;
    padding: 5px 0 5px 40px;
}

.ui-widget-content a {
    color: #660000 !important;
}

    .ui-widget-content a:hover {
        color: #a09383 !important;
    }

@media only screen and (min-width : 550px) {
    .calendar {
        font-size: 14px;
    }

    .calendar-header {
        margin-bottom: 20px;
    }
}

@media only screen and (min-width : 650px) {
    .hint {
        display: none;
    }

    .chart {
        font-size: 16px;
    }

        .chart td {
            padding: 10px 20px;
        }
}

@media only screen and (min-width : 800px) {
    .calendar {
        width: 50%;
        float: left;
        padding-right: 20px;
    }

    .interior .upcoming {
        width: 50%;
        float: right;
        z-index: 2;
    }
}

@media only screen and (min-width : 900px) {
    .calendar .number {
        width: 50px;
        height: 50px;
    }

    .calendar td span.counter {
        display: block;
        position: absolute;
        padding: 0 6px;
        margin: 0;
        border-radius: 50%;
        z-index: 2;
        top: 85%;
        left: 50%;
        -webkit-transform: translate(-50%,-85%);
        transform: translate(-50%,-85%);
    }
}

@media only screen and (min-width : 1000px) {
    .ex-heading .icon {
        width: 50px;
    }

    .ex-heading .nm {
        margin-top: 10px;
    }
}

@media only screen and (min-width :1250px) {
    .calendar .number {
        width: 65px;
        height: 65px;
    }

    .calendar td span.counter {
        top: 83%;
        font-size: 40px;
        color: #fff;
        padding: 0 9px;
        -webkit-transform: translate(-50%,-75%);
        transform: translate(-50%,-75%);
    }
}

.interior .calendar-header select {
    width: 100%;
    height: 42px;
}

.interior .upcoming ul {
    padding-left: 0;
    list-style: none;
}

    .interior .upcoming ul li {
        margin-bottom: 20px;
    }

.interior .upcoming .image {
    width: 100%;
    padding: 10px 10px 0;
    background: #eee;
}

.interior .upcoming .image img {
    width: 150px;
    margin: auto;
}

    .interior .upcoming .image .cat {
        left: 50%;
        -ms-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

@media only screen and (min-width: 500px) {
    .calendar .right .half .half {
        width: 50%;
        float: left;
    }

        .calendar .right .half .half:nth-of-type(1) {
            padding-right: 10px;
        }

        .calendar .right .half .half:nth-of-type(2) {
            padding-left: 10px;
        }
}

@media only screen and (min-width: 680px) {
    .interior .upcoming .image {
        width: 150px;
        margin: auto;
        padding: 0;
        background: none;
    }

        .interior .upcoming .image img {
            width: 100%;
            margin: auto;
        }

        .interior .upcoming .image .cat {
            bottom: auto;
            top: 0;
            left: auto;
            right: 0;
            -ms-transform: none;
            -webkit-transform: none;
            transform: none;
        }

    .interior .upcoming li .text {
        width: calc(100% - 170px);
    }
}


.banner .text p {
    color: #000;
    line-height: 1.2;
}


/************************* 11K. Page Layouts *************************/
/* 11Ka. Half Content with Image */
ul.half-content-with-image.lr {
    margin-bottom: 40px;
}

@media only screen and (min-width : 800px) {
    .half-content-with-image > li {
        float: left;
        width: 50%;
    }

        .half-content-with-image > li:first-of-type {
            padding: 0 20px 0 0;
        }
}

@media only screen and (min-width : 1000px) {
    ul.half-content-with-image.lr {
        margin-bottom: 60px;
    }

    .half-content-with-image > li:first-of-type {
        padding-right: 25px;
    }

    .half-content-with-image > li:last-of-type {
        padding-left: 25px;
    }
}

@media only screen and (min-width : 1300px) {
    .half-content-with-image > li:first-of-type {
        padding-right: 40px;
    }

    .half-content-with-image > li:last-of-type {
        padding-left: 40px;
    }
}

/* 11Kb. Three Column Content */
ul.three-column-content.lr {
    margin-bottom: 40px;
}

@media only screen and (min-width : 900px) {
    .three-column-content {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

        .three-column-content > li {
            display: table-cell;
            padding: 0 25px;
            width: 33.33%;
        }

            .three-column-content > li:first-of-type {
                /*border-right: 2px solid #38556A;
                padding-left: 0;*/
            }

            .three-column-content > li:last-of-type {
                /*border-left: 2px solid #38556A;
                padding-right: 0;*/
            }
}

@media only screen and (min-width : 1000px) {
    ul.three-column-content.lr {
        margin-bottom: 60px;
    }
}

@media only screen and (min-width : 1300px) {
    .three-column-content > li {
        padding: 0 40px;
    }

        .three-column-content > li:first-of-type {
            /*border-right: 4px solid #38556A;
            padding-left: 0;*/
        }

        .three-column-content > li:last-of-type {
            /*border-left: 4px solid #38556A;
            padding-right: 0;*/
        }
}

/* 11Kc. Two Column Content */
ul.two-column-content.lr {
    margin-bottom: 40px;
}

@media only screen and (min-width : 650px) {
    .two-column-content > li {
        float: left;
        padding: 0 25px;
        width: 50%;
    }

        .two-column-content > li:first-of-type {
            /*border-right: 2px solid #38556A;*/
            /*padding-left: 0;*/
        }

        .two-column-content > li:last-of-type {
            padding-right: 0;
        }
}

@media only screen and (min-width : 1000px) {
    ul.two-column-content.lr {
        margin-bottom: 60px;
    }
}

@media only screen and (min-width : 1300px) {
    .two-column-content > li {
        padding: 0 40px;
    }

        .two-column-content > li:first-of-type {
            /*border-right: 4px solid #38556A;*/
            /*padding-left: 0;*/
        }

        .two-column-content > li:last-of-type {
            padding-right: 0;
        }
}

/* 11Kd. Bordered Sections */
ul.sections-with-borders.lr {
    margin-bottom: 40px;
}

.sections-with-borders > li {
    border-bottom: 2px solid #38556A;
    padding: 25px 5px;
}

    .sections-with-borders > li:first-of-type {
        padding-top: 0;
    }

    .sections-with-borders > li:last-of-type {
        border-bottom: 0;
        padding-bottom: 0;
    }

@media only screen and (min-width : 600px) {
    .sections-with-borders > li {
        padding: 25px;
    }
}

@media only screen and (min-width : 1300px) {
    .sections-with-borders > li {
        border-bottom: 4px solid #38556A;
        padding: 40px;
    }

        .sections-with-borders > li:first-of-type {
            padding-top: 0;
        }

        .sections-with-borders > li:last-of-type {
            border-bottom: 0;
            padding-bottom: 0;
        }
}

/* 11Ke. 3 Columns for Buttons */
ul.three-columns-for-buttons.lr {
    margin-bottom: 40px;
}

.three-columns-for-buttons {
    text-align: center;
}

    .three-columns-for-buttons > li:not(:last-of-type) {
        margin-bottom: 20px;
    }

@media only screen and (min-width : 700px) {
    .three-columns-for-buttons > li {
        display: inline-block;
        padding: 0 10px;
        vertical-align: middle;
        width: calc(100% / 3 - 3.01px);
    }

        .three-columns-for-buttons > li:not(:last-of-type), .three-columns-for-buttons > li {
            margin-bottom: 0;
        }
}

@media only screen and (min-width : 1000px) {
    ul.three-columns-for-buttons.lr {
        margin-bottom: 60px;
    }
}

#map div {
    position:initial;
}