@font-face {
    font-family: 'EncodeSans-Medium';
    src: url('../fonts/EncodeSans-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Raleway-Regular';
    src: url('../fonts/Raleway-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-Regular';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Comfortaa-Regular';
    src: url('../fonts/Comfortaa-Regular.ttf') format('truetype');
}

/*@font-face {
    font-family: 'Material Icons';
    src: url('../fonts/MaterialIcons-Regular.ttf') format('truetype'); /* For IE6-8 
    
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size 
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. 
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. 
text-rendering: optimizeLegibility;
/* Support for Firefox. 
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. 
    font-feature-settings: 'liga';
}*/
.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.50);
}

    .material-icons.md-dark.md-inactive {
        color: rgba(0, 0, 0, 0.26);
    }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

    .material-icons.md-light.md-inactive {
        color: rgba(255, 255, 255, 0.3);
    }

:root {
    --main-bg-color: rgba(154,47,55,1);
    --main--tint-bg-color: #333;
    --alternate-bg-color: royalblue;
}

.alt-theme {
    --bs-body-bg: #fff; /* Light background */
    --bs-body-color: #212529; /* Dark text */
    --bs-primary: var(--main-bg-color); /* Orange primary color */
    --bs-secondary: var(--alternate-bg-color); /* Blue-grey secondary */
    --bs-link-color: var(--main-bg-color);
    --bs-link-hover-color: var(--main--tint-bg-color);
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    /*padding-top: 50px;*/
    padding-bottom: 0;
    /*font-family: 'Poppins-Regular';*/
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: 13px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

a {
    -webkit-text-decoration: none;
    text-decoration: none;
}

.text-white{
    color: white;
}

.align-middle{
    vertical-align: middle;
}


.validation-summary-errors > ul{
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    text-decoration: none;
}

@media (min-width: 992px) {
    navbar2 > .container {
        width: 90% !important;
    }
}

@media (min-width: 768px) {
    .navbar2 > .container {
        width: 90% !important;
    }
}

.navbar2 > .container {
    padding: 0px;
    /* background-image: linear-gradient(to right, transparent 0%, var(--alternate-bg-color), var(--main-bg-color), transparent 30% ); */
    /* background-image: linear-gradient(to bottom, transparent, rgba(154,47,55,0.9), transparent 90%); */
    border-radius: 40px;
}

.container > .navbar-header {
    margin-left: 0px !important;
}

.navbar-nav {
    /*font-family: 'EncodeSans-Medium';*/
    /*float: right !important;*/
    /*text-align: right;*/
    /*width: auto !important;*/
    margin-right: 0 !important;
    /*margin: 7.5px 10px !important;*/
}

    .navbar-nav > li > a {
        color: aliceblue;
    }

        .navbar-nav > li > a:hover, 
        .navbar-nav > li > a:hover {
            color: white;
        }

.nav.navbar-nav > li {
    /*margin-left: 3px;*/
    /*border-radius:5px;*/
}

    .nav.navbar-nav > li > a {
        color: white;
        text-shadow: 0 0 3px #333;
        /*background: rgba(255,255,255,1);*/
        padding: 8px;
        /*padding-right: 20px;
        padding-left: 20px;*/
        border-radius: 3px;
        text-align: center;
    }

.navbar-brand {
    letter-spacing: 4px;
    /*background: rgba(154,47,55,0.6);*/
    border-radius: 30px;
    padding: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: auto;
    margin: 0;
    /*box-shadow: 0 0 2px #333;*/
}

    .navbar-brand > span {
        font-size: 120%;
        color: white;
        /*text-shadow: 0 0 10px #333;*/
    }

.navbar {
    background-color: transparent /*rgba(15,15,15,0.9)*/;
    border-color: transparent;
    /*padding-top: 35px;*/
    padding-top: 20px;
    transition: all linear 0.4s;
    -webkit-transition: all linear 0.4s;
    -moz-transition: all linear 0.4s;
    -o-transition: all linear 0.4s;
    /*padding-bottom: 18px;*/
}

    .navbar .navbar-collapse > .close {
        text-shadow: none;
        color: #fff;
        font-size: 200%;
        font-family: Calibri;
        float: left;
        margin-top: 8px;
        display: none;
    }

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: aliceblue !important;
}

/*AUTHENTICAION BIT*/

#menuDrop > .dropdown, #menuDrop > .dropup {
    position: relative;
    float: right;
    margin-top: 8px;
}

.dropdown-toggle {
    border: none;
    /*-moz-border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    border-radius: 1.5em;*/
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
    background-color: var(--main--tint-bg-color) !important;
}

button.dropdown-toggle {
    background-color: var(--main--tint-bg-color);
    color: #fff;
}

.dropdown-menu-dark {
    --bs-dropdown-bg: var(--main--tint-bg-color) !important;
}


.dropdown-menu {
    --bs-dropdown-font-size: .rem !important;
    /*background-color: var(--main--tint-bg-color);
    border: none;
    float: right;
    right: 0;
    left: auto;*/
}

    .dropdown-menu > li > a {
        color: #fff;
    }

        .dropdown-menu > li > a:hover {
            background-color: var(--main--tint-bg-color);
            color: #fff;
        }

    .dropdown-menu > li:last-child {
        margin-top: 10px;
        /*background-color: var(--main-bg-color);*/
    }

        .dropdown-menu > li:last-child > a {
            /*background-color: var(--main-bg-color);
            color: #fff;
            padding: 10px;
            text-align: center;
            width: 100%;*/
        }

            .dropdown-menu > li:last-child > a:hover {
                /*background-color: var(--main-bg-color);*/
            }

.navbar-right {
    margin-right: 0;
}

/*BIT ENDS*/


@keyframes out {
    from {
        right: -100%;
    }

    to {
        right: 0;
    }
}

@keyframes in {
    from {
        right: 0;
    }

    to {
        right: -100%;
    }
}

@-moz-keyframes out {
    from {
        right: -100%;
    }

    to {
        right: 0;
    }
}

@-webkit-keyframes out {
    from {
        right: -100%;
        display: none;
    }

    to {
        display: block;
        right: 0;
    }
}

        .navbar-inverse .navbar-collapse.out{
            animation: out ease-in-out 0.5s forwards;
            -webkit-animation: out ease-in-out 0.5s forwards;
            -moz-animation: out ease-in-out 0.5s forwards;
            -o-animation: out ease-in-out 0.5s forwards;
        }

        .navbar-inverse .navbar-collapse.in{
            animation: in ease-in-out 0.5s forwards;
            -webkit-animation: in ease-in-out 0.5s forwards;
            -moz-animation: in ease-in-out 0.5s forwards;
            -o-animation: in ease-in-out 0.5s forwards;
        }

        .navbar-inverse .navbar-toggler:hover, .navbar-inverse .navbar-toggler:focus {
            background-color: transparent;
        }

.navbar-relative {
    background: var(--main-bg-color);
    padding-top: 0;
    position:relative;
}

.navbar-relative > .container {
    padding: 0;
    /*background: transparent;*/
}

.navbar-toggler{
    border: none;
    margin-right: 30px;
}

.reNavbar {
    background: var(--main-bg-color);
    padding-top: 0px !important;
    padding-bottom: 0;
}

.navbar-expanded {
    background: var(--main-bg-color);
    padding-top: 0px !important;
    padding-bottom: 0;
}

.reNavbar > .container {
    padding: initial;
}

.segment-container {
    display: flex;
    flex-direction: column;
}

.flex-segment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin: 40px 0;*/
    min-height: 400px; /* Adjust height as needed */
}

    .flex-segment > div {
        /*flex: 0 0 50% !important;*/
    }

.text-side {
    flex: 0 0 60%;
    padding: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9); /* Default non-transparent background */
}

.text-side.img{
    background-image: none;
}


    .text-side p, .text-side div, .text-side li {
        font-size: 120%;
    }

    .text-side ol, .text-side ul {
        margin-top: 0;
        margin-bottom: 10px;
        padding-inline: 0;
        list-style: circle;
    }

    .text-side .text-side li {
        font-size: 120%;
    }

    .text-side .segment-title {
        font-size: 240%;
        margin-bottom: 10px;
    }


.image-side {
    flex: 0 0 40%;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    min-height: 500px;
}

.img-1 {
    background-image: url('../Resx/Banners/m-dir-1.jpg');
}

.img-2 {
    background-image: url('../Resx/Banners/m-dir-2.jpg');
}

.img-3 {
    background-image: url('../Resx/Banners/m-dir-3.jpg');
}

.img-4 {
    background-image: url('../Resx/Banners/m-dir-4.jpg');
}

.img-5 {
    background-image: url('../Resx/Banners/m-dir-5.jpg');
    background-position: top;
}

.image-side.img-4, .image-side.img-5 {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* Alternate layout: Flip text and image */
.flex-segment:nth-child(even) {
    flex-direction: row-reverse;
    background: linear-gradient(to right, ivory, silver) !important;
    background: var(--main-bg-color) !important; 
    color: white;
}

.flex-segment:nth-child(even) > .text-side {
    background: var(--main-bg-color) !important;
    /*background: rgba(154,47,55,.9) !important;*/
    color: white;
}


.page-banner {
    min-height: 500px;
    background: var(--main-bg-color);
    position: relative;
    /*background-image: linear-gradient(to right, var(--alternate-bg-color), transparent 40%, rgba(154,47,55,0.0) 20%) !important;
    background-image: -webkit-linear-gradient(to right, var(--alternate-bg-color), transparent 40%, rgba(154,47,55,0.5) 20%) !important;*/
    clear: both;
    overflow: hidden;
    z-index: 1;
}

.page-banner.small {
    display: none;
}

    .page-banner.sub, .page-banner.mdir {
        min-height: 400px;
        /*background-color:  ;*/
        background-image: url('../Resx/Banners/Grazioso_110_2.jpg');
        background-repeat: no-repeat;
        /*     background-size: contain;
        background-position: inherit;
        background-blend-mode: normal;
        background-attachment: fixed;*/

        background-repeat: repeat-y;
        background-size: cover;
        /*background-position: center right;*/
        background-attachment: scroll;
        background-blend-mode: normal;
    }

    .page-banner.mdir {
        /*background-image: url('../Resx/Banners/m-dir-2.jpg');
            background-position: top;
            background-attachment: fixed;*/

        background-image: url(../Resx/Banners/m-dir-5.jpg);
        background-position: top right;
        background-attachment: fixed;
        background-size: 50%;
    }

    .page-banner.gallery {
        min-height: 350px;
        background-color: var(--main-bg-color) !important;
        background-image: url('../Resx/Banners/141_E.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: scroll;
        background-blend-mode: normal;
    }

    .page-banner.events {
        min-height: 350px;
        background-color: rgba(154,47,55,.7) !important;
        background-image: url('../Resx/Banners/SYMGH-199.jpg');
        background-repeat: repeat-y;
        background-size: cover;
        background-position: center right;
        background-attachment: scroll;
        background-blend-mode: multiply;
    }

        .page-banner.gallery > .b-text, .page-banner.events > .b-text, .page-banner.sub > .b-text, .page-banner.mdir > .b-text {
            top: 70%;
        }

        /*.page-banner.gallery > .b-text{
            top: 60%;
        }*/

.b-text {
    position: absolute;
    left: 7%;
    bottom: 5%;
    color: white;
    z-index: 1001;
}


    .b-text.large {
        display: block;
    }

    .b-text > .main {
        font-size: 380%;
        font-weight: 600;
        line-height: 1em;
    }

    .b-text > .sub {
        font-size: 110%;
    }

.slider-wrapper {
    /* left: 45%;
    width: 55%;*/
    left: 0;
    width: 100%;
    position: relative;
    /*border-radius: 10% 0 0 10%;*/
    overflow: hidden;
    /*box-shadow: 0 0 10px #333;*/
    /*margin-right: -100%;*/
}

.scroll-strip {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    padding: 0 !important;
    list-style: none;
    overflow: hidden;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 10px !important;
    padding-right: 20px !important;
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    position: relative;
    /*border-radius: 10px;*/
    /*background: transparent;*/
}

.scroll-item {
    flex: 0 0 auto;
    /*display: inline-block;*/
    width: 200px;
    /*box-shadow: 0 0 10px #999;*/
    /*border: 1px solid #ddd;*/
    /*border-radius: 50px 50px;*/
    -moz-border-radius: 10%;
    -webkit-border-radius: 10%;
    border-radius: 10%;
    background: white;
    overflow: hidden;
    padding: 0;
    margin-right: 10px;
    /*margin-left: 10px;*/
}

.p-wrapper {
    padding: 8px;
    padding-left: 20px;
    padding-right: 20px;
    /*background: var(--alternate-bg-color);*/
}

.p-name {
    font-size: 105%;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0;
    color: var(--main-bg-color);
}

.p-role {
    font-size: 95%;
    margin-top: 0;
}

.p-joined {
    font-size: 93%;
    margin-top: 0;
}

.p-image {
    height: 150px;
    padding: 2px;
    background-color: gray;
    background-size: cover;
    background-image: url('../img/Image_01.svg');
}

#btnSaveEvent{
    /*display: none;*/
}

.slider {
    padding: 0;
    /*padding: 5%;*/
    /*padding-top: 5%;*/
    height: 600px;
    width: 100%;
    margin-left: 0;
    /*margin-left: 50%;*/
    background-image: linear-gradient(to right, rgba(154,47,55,0.6), transparent 50%, var(--alternate-bg-color)) !important;
    background-image: -webkit-linear-gradient(to right, rgba(154,47,55,0.6), transparent 50%, var(--alternate-bg-color)) !important;
    display: flex;
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-margin-start: 0;
    position: relative;
    /*float: right;*/
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
}

    .slider > span {
        height: 100%;
        width: 100%;
        background-size: cover !important;
        background-position: center !important;
        /*float: left;*/
        /*display: inline-block;*/
        flex: 0 0 auto;
        transition: all linear 0.3s;
        -webkit-transition: all linear 0.3s;
        -o-transition: all linear 0.3s;
        -moz-transition: all linear 0.3s;
    }

#slider0 {
    /* background: url("../Resx/Banners/IMG_3636.JPG") no-repeat;*/
    background: url('../aniversary/logo_anime.webp') no-repeat;
}
/*#slider2 {
    background: url("images/11.jpg") no-repeat;
}*/

.slide-cover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(15,15,15,0.3);*/
    background-image: -webkit-linear-gradient(to bottom, var(--main-bg-color) 2%, transparent, rgba(154, 47, 55, 0.2)) !important;
    /*background-image: linear-gradient(to right, var(--main-bg-color) 45%, transparent, rgba(154,47,55,0.2)) !important;*/
    background-image: linear-gradient(to bottom, var(--main-bg-color) 2%, transparent, rgba(154, 47, 55, 0.2)) !important;
    z-index: 1000;
    /*display:none;*/
}

.slide-cover-2 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(15,15,15,0.3);*/
    background-image: -webkit-linear-gradient(to top,var(--main-bg-color)1%, transparent 90%, var(--main-bg-color)) !important;
    background-image: linear-gradient(to top, var(--main-bg-color) 1%, transparent, transparent 90%, transparent, var(--main-bg-color)) !important;
    z-index: 1000;
    /*display:none;*/
}

.container.body-content {
    width: 100%;
    padding: 0;
}

.body-content {
    width: 100%;
}

.dir {
    /*position: absolute;
    bottom: 15%;*/
    font-size: 250%;
    /*width: 40px;*/
    background: rgb(255, 255, 255, .5);
    border-radius: 100%;
    cursor: pointer;
    /*color: white;*/
    /*box-shadow: 0 0 3px #fff;*/
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
}

    .dir:hover {
        background: rgba(255, 255, 255,0.9);
    }

    .dir > img {
        width: 100%;
    }

.prev {
    /*float: left;
    left: 47%;*/
    transform: rotate(180deg);
}

.next {
    /*float: right;
    right: 47%;*/
}

.d-flex.justify-content-center {
    
}

.dir-wrapper {
    -webkit-text-decoration: none;
    text-decoration: none;
    list-style: none;
    position: absolute;
     right: 7%; 
    /* right: 0; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    bottom: 10%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
}


    .dir-wrapper > li:first-child {
        margin-right: 20px;
    }

.inner-container {
    position: relative;
    padding: 8%;
    padding-top: 0;
}

.slim-content{
    padding: 5% !important;
}

.inner-container.about, .membership, .feature-item {
    padding: 5%;
    /*border-top: 3px solid var(--alternate-bg-color);*/
    position: relative;
    z-index: 20;
    /*overflow-x: hidden;*/
}

    .inner-container.about.mdir{
        padding: 8%;
    }

    .inner-container.upnext, .inner-container.calevents {
        padding: 0;
    }

.about {
    background: linear-gradient(to right, ivory, silver);
    background: -webkit-linear-gradient(ivory silver);
}

.about > .page-intro > .page-title {
    font-size: 200%;
}

.about > .page-intro > .page-header-text {
    font-size: 110%;
}

    .about.mdir > .page-intro > .page-header-text {
        font-size: 130%;
    }

.inner-container.events {
    padding: 8%;
    /* background: linear-gradient(to right,white -25%,transparent, var(--main-bg-color)); */
}

.inner-container.events.hom {
    display: none;
}

    .inner-container.events.hom.visible {
        display: block;
    }

    .inner-container.events.live{
        background: black !important;
        color: white !important;
    }

        .inner-container.events.live > .portioner > .status > p{
            color: wheat !important;
        }

            .inner-container.events.live > .portioner > .status > p.btn {
                border-color: wheat !important;
            }


.inner-container.events > .page-title {
    font-size: 400%;
    text-align: center;
    width: 100%;
}

.portioner{
    display: block;
    text-align: center;
}

    .portioner.prog-download, portioner.prog-watch{
        display: block;
    }
    .portioner > div{
        width: 50%;
        flex: 0 0 auto;
        
    }

    .portioner.prog-download > div, portioner.prog-watch > div{
        width: 100%;
        /*flex: 0 0 auto;*/
    }

    .portioner > .status > p {
        /*padding-left: 5% !important;*/
        color: black;
    }


    .portioner.prog-download > .status > p, portioner.prog-watch > .status > p {
        padding-left: 0 !important;
    }

        .portioner > .status > p.btn {
            padding: 10px 16px !important;
            border: 0px solid black;
            border-radius: 10em;
            /*margin-left: 5%;*/
            display: none;
            background: var(--alternate-bg-color);
            color: white;
        }

    .portioner > .status > div.btn {
        padding: 10px 16px !important;
        border: 1px solid black;
        border-radius: 0;
        margin-left: 5%;
        color: black;
        vertical-align: super;
    }

        .portioner > .status > p.btn.visible {
            display: inline-block;
        }

    .portioner > div > .page-title-sub {
        flex: 0 0 auto;
        font-size: 200% !important;
        text-align: right;
    }

#program {
    display: none;
    background: var(--alternate-bg-color);
    color: white !important;
    opacity: 0;
}

.program-file.home {
    margin-left: auto !important;
    margin-right: auto;
}

.program-file.hide{
    display: none !important;
}

    #program:before {
        content: "";
        top: -30px;
        left: 47%;
        background: none;
        position: absolute;
        border-right: 30px solid transparent;
        border-left: 30px solid transparent;
        border-bottom: 30px solid var(--alternate-bg-color);
        /*border-top: 45px none transparent;*/
    }

#program.rollDown {
    display: block;
    opacity: 1;
    text-align: center !important;
}

.btn.do {
    max-width: 280px;
    width: 100%;
    border-radius: 0;
    border: 1px solid white;
    padding: 9px;
}

.btn-primary {
    background: var(--alternate-bg-color);
}

.status.prog {
    /*border-left: 1px solid #fff !important;
    margin-left: -18px;*/
    width: fit-content;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.page-title.prog {
    text-align: center !important;
    padding-bottom: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-title-sub.prog {
    padding-right: 0;
    text-align: center !important;
    line-height: 1.2;
}

.program-file {
    position: relative;
    width: 200px;
    height: 40px;
    background: white;
    /* border: 1px solid #eee; */
    box-shadow: 0 0 3px #666;
    overflow: hidden;
    border-radius: 5em;
    cursor: pointer;
    margin-left: 18px;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

        .program-file > a {
            color: white;
            cursor: pointer;
            text-decoration: none;
        }

            .program-file > a:hover, .program-file > a:focus {
                color: aliceblue;
            }

        .program-file.prog-download, .program-file.prog-watch {
            width: auto;
            height: auto;
            background: transparent;
            margin-left: 0 !important;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
            border: none !important; /*1px solid white !important;*/
            color: white !important;
            display: block !important;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 150%;
        }

        .program-file.prog-watch {
            /*background: var(--main-bg-color);*/
        }


        .program-file > .p-image {
            width: 40px;
            height: 100%;
            background-repeat: no-repeat;
            background-size: contain;
            background-color: var(--main-bg-color);
            float: left;
            display: inline-block;
            overflow: hidden;
        }

        .program-file.file > .p-image {
            background-image: url('../img/file_pdf_white.svg');
        }

        .program-file.url > .p-image {
            background-image: url('../img/video_record_white.svg');
        }

        .program-file > .p-text {
            width: 100%;
            height: 100%;
            background: var(--main-bg-color);
            vertical-align: middle;
            padding: 10px;
            padding-left: 15px;
            padding-right: 8px;
            margin-left: 60px;
            font-size: 100%;
            -moz-transition: all .3s ease;
            -o-transition: all .3s ease;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            color: white;
        }

        .program-file.home > .p-text {
            margin-left: auto !important;
            /*margin-right: auto;*/
        }

        .program-file > .p-text:hover, .program-file > .p-text:focus {
            background: #ccc;
        }

@keyframes rollIn {
    from {
        right: -100%;
        /*opacity: 0;*/
    }

    to {
        right: 0;
        opacity: 1;
    }
}

@-moz-keyframes rollIn {
    from {
        right: 100%;
        opacity: 0;
    }

    to {
        right: 0;
        opacity: 1;
    }
}

@-webkit-keyframes rollIn {
    from {
        right: 100%;
        opacity: 0;
    }

    to {
        right: 0;
        opacity: 1;
    }
}

@keyframes rollDown {
    from {
        height: 0;
    }

    to {
        height: auto;
    }
}

@-moz-keyframes rollDown {
    from {
        height: 0;
    }

    to {
        height: auto;
    }
}

@-webkit-keyframes rollDown {
    from {
        height: 0;
    }

    to {
        height: auto;
    }
}

    .upnext {
        background: linear-gradient(to right,var(--main-bg-color), var(--alternate-bg-color));
        padding: 10%;
        display: flex;
        overflow: hidden;
        color: white !important;
        transition: all linear .3s;
        -webkit-transition: all linear .3s;
        -moz-transition: all linear .3s;
        -o-transition: all linear .3s;
        height:0;
        opacity: 0;
    }

.rollDown {
    display: normal;
    height: auto;
    opacity: 1;
    /*animation: rollDown .8s ease-in forwards;
        -webkit-animation: rollDown .8s ease-in forwards;
        -moz-animation: rollDown .3s ease-in forwards;
        -o-animation: rollDown .3s ease-in forwards;*/
}

.upnext > div{
    width: 38%;
    flex: 0 0 auto;
    padding: 5%;
    padding-top: 8%;
    padding-left: 8%;

}
    .upnext > .page-title, .calevents > .page-title{
        position: absolute !important;
        width: 100%;
        padding: 4%;
        display: block !important;
        margin-top: -2%;
        text-align: left;
        font-size: 350%;
        padding-left: 15%;
    }

.slim-content > .page-title{
    font-size: 290%;
}

.upDate {
    width: auto !important;
    text-align: left;
    font-size: 950%;
    line-height: .7;
    /*padding-top: 9% !important;*/
    padding-top: 7% !important;
    padding-right: 0% !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.upDate > .month{
    font-size: 51%;
    text-align: center;
}

.upDetails {
    text-align: left;
    line-height: 5px;
    padding-left: 8% !important;
    padding-right: 2% !important;
    vertical-align: top !important;
}

.upDetails > .title{
    font-size: 290%;
    line-height: 35px;
}

.upDetails > .venue{
    /*color: #333;*/
    /*margin-top: -20px;*/
    line-height:1;
    font-size: 130%;
}

.upDetails > p{
    line-height: 15px;
}

.upDesc {
    text-align: left;
    padding-left: 0 !important;
}

.calevents{
    color: #666;
    padding: 10% !important;
    padding-top: 5% !important;
    background: repeating-linear-gradient(to right, white, rgba(225,225,225,0.7), whitesmoke, white);
}

    .calevents > .page-title {
        text-align: right;
        padding-left: 0;
        padding-right: 5%;
        margin-top: 0;
        position: relative !important;
    }

    .calevents > .back-blur {
        top: 0;
        left: 0;
        margin-left: 0;
        margin-top: 0;
        filter: blur(170px);
        -webkit-filter: blur(170px);
    }

    .calevents > .dir{
        bottom: 50%;
        
    }


    .membership, .singers, .patrons, .album-menu, .feature-item {
        /*box-shadow: 0 0 5px #666;*/
        z-index: 20;
        padding: 0;
        padding-left: 8%;
        padding-right: 8%;
        padding-bottom: 4%;
        /*transition: all linear 0.3s;
    -webkit-transition: all linear 3s;
    -moz-transition: all linear 3s;
    -o-transition: all linear 3s;*/
    }

        .membership, .feature-item.left {
            /*background: linear-gradient(to right, var(--main-bg-color), var(--main-bg-color) 90%);*/
            background: linear-gradient(to right, white,rgba(154,47,55,0.3), white);
            background-size: cover;
            background-position: center;
            padding-top: 4%;
        }


    .membership > .page-intro,
    .singers > .page-intro,
    .patrons > .page-intro,
    .feature-item.left > .page-intro {
        text-align: left;
        width: 100%;
        /*color: white;*/
    }
        .membership > .page-intro > .page-title,
        .feature-item.left > .page-intro > .page-title {
            /*color: white;*/
            margin-bottom: 4%;
            margin-left: 6%;
            margin-right: 6%;
        }

        .singers > .page-intro > .page-title,
        .membership > .page-intro > .page-title,
        .patrons > .page-intro > .page-title,
        .feature-item.left > .page-intro > .page-title {
            font-size: 400% !important;
        }

        .singers,
        .feature-item.right {
            /*box-shadow: 0 0 5px #666;*/
            z-index: 200;
            padding: 0;
            padding-top: 0 !important;
            /*height: 400px;*/
        }



.feature-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 10% !important;
    padding-top: 10% !important;
}

    .feature-item > .page-intro > .content {
        font-size: 150% !important;
    }

    .feature-item > .page-intro > .page-title {
        font-size: 300% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }


.back-blur {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    /* background: url(../img/image-595847.png), url(../img/music-notes-vector-art-free_55168.jpg), whitesmoke; */
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: multiply;
    filter: blur(80px);
    -webkit-filter: blur(80px);
    transform: rotate(180deg);
    z-index: -1;
}

.singers > .page-intro,
.patrons > .page-intro,
.feature-item.right > .page-intro {
    /*box-shadow: 0 0 5px #666;*/
    z-index: 200;
    padding: 8%;
    padding-top: 4% !important;
    padding-bottom: 4% !important;
    background: radial-gradient(silver, transparent);
}

    .singers > .page-intro > .page-title,
    .patrons > .page-intro > .page-title,
    .feature-item.right > .page-intro > .page-title {
        line-height: 25px !important;
        text-align: right;
        padding-right: 5%;
    }

.gallery-items {
    background: round /*linear-gradient(var(--main-bg-color) 0.5%,black 30%, black, var(--main-bg-color) 98%)*/ /*var(--main-bg-color)*/;
    margin-top: 0;
    padding: 0;
    margin-top: -10px;
    margin-bottom: -10px;
    padding-bottom: 3%;
    padding-top: 0;
}

.gallery-items > .page-intro{
    /*padding-top: 4%;*/
    width: auto;
}

    .gallery-items > .page-intro > .sub-page{
        display: block;
        text-align: center;
        padding-top: 3px;
        /*padding-left: 15px;*/
    }

    .gallery-items > .page-intro > .sub-page > .member-tile {
        width: auto;
        margin-right: 0px;
        display: inline-block;
        box-shadow: 0 0 2px #666;
        /*border: 1px solid rgba(230,230,230,1);*/
        cursor: pointer;
    }

        .gallery-items > .page-intro > .sub-page > .member-tile:hover {
            box-shadow: 0 0 15px #333;
        }

.gallery-items > .page-intro > .sub-page > .member-tile > .p-image {
    width: 180px;
    height: 180px;
    /*background-color: rgba(0,0,0,1);*/
}

.album-menu {
    padding-bottom: 0;
    /*background: var(--main-bg-color);*/
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 0;
}

.album-menu > .dir {
    position: absolute;
    background: var(--main-bg-color);
    color: rgba(255, 255, 255, 0.6);
    bottom: 30.5%;
    /*width: 25px;*/
    /*background: rgba(255, 255, 255, 0.4);*/
    box-shadow: 0 0 3px #333;
}

    .album-menu > .dir:hover {
        /*background: rgba(255, 255, 255, 1);*/
        color: rgba(255, 255, 255, 1);
    }

.album-menu > .next{
    right: 2%;
}
.album-menu > .prev{
    left: 2%;
}

.album-menu > .sub-menu{
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 15px;
    padding-left: 0px;
    margin-left: 30px;
    margin-right: 30px;
}

    .album-menu > .sub-menu > li > p-image {
        
    }

.album-menu > .sub-menu > li {
    flex: 0 0 auto;
    border-radius: 20px;
    padding: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: solid 1px #aaa;
    /*box-shadow: 0 0 3px #333;*/
    /*background: var(--main-bg-color);*/
    /*color: white;*/
}

    .album-menu > .sub-menu > li:hover {
        background: rgba(154,47,55,0.3);
        color: #333;
    }

.form-control {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    border: 0;
    border-bottom: 1px solid var(--alternate-bg-color);
    border-radius: 0px;
    background: white;
    /*color: white;*/
    padding: 18px;
    padding-left: 0;
    box-shadow: none;
    max-width: 380px;
    -moz-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

    .form-control:hover, .form-control:focus{
        padding-left: 8px;
    }

    .page-intro > p > .btn {
        max-width: 380px;
        width: 100%;
        border-radius: 0;
        border: 1px solid white;
    }

.btn-primary {
    background: var(--alternate-bg-color);
    padding: 12px;
}

.overlay-page {
    background: #333;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1031;
    background: rgba(0,0,0,.99);
    display: none;
}

    .overlay-page.about, .overlay-page.events {
        color: #333;
        left: auto;
        right: -100%;
        background: rgba(245,245,245,1);
        display: none;
        overflow: hidden;
        overflow-y: auto;
        padding-bottom: 40px;
        /*padding-top: 8%;*/
        padding-left: 7%;
        padding-right: 7%;
    }

    .overlay-page.events {
        text-align: center;
        background: linear-gradient(white 70%, whitesmoke);
        padding-top: 4%;
        padding-bottom: 4%;
        display: block;
        height: 100%;
        width: 100%;
        position: fixed;
    }

    .overlay-page.about > .page-title, .overlay-page.events > .page-title {
        background: rgba(245,245,245,1) /*var(--main-bg-color)*/;
        position: relative;
        width: 100%;
        text-align: center;
        border-radius: 0;
        padding: 2% 20px 25px 15px;
        box-shadow: none;
        color: #333;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }

        .overlay-page.events > .page-title {
            background: transparent;
            /*color: #fff;*/
            font-size: 150%;
        }

        .overlay-page.about > .close, .overlay-page.events > .close {
            position: fixed;
            padding-right: 8px;
            padding-left: 8px;
        }

    .overlay-page.events > .close {
        position: absolute;
    }

        .overlay-page.about > .close:hover, .overlay-page.events > .close:hover {
            opacity: 1;
            color: #333;
        }

    .overlay-page.show {
        display: inline-block;
        animation: fadeIn 0.3s ease-in-out forwards;
        -webkit-animation: fadeIn 0.3s ease-in-out forwards;
        -moz-animation: fadeIn 0.3s ease-in-out forwards;
        -o-animation: fadeIn 0.3s ease-in-out forwards;
    }

    .overlay-page.hide {
        animation: fadeOut 0.3s ease-in-out forwards;
        -webkit-animation: fadeOut 0.3s ease-in-out forwards;
        -moz-animation: fadeOut 0.3s ease-in-out forwards;
        -o-animation: fadeOut 0.3s ease-in-out forwards;
        display: none;
    }

    .overlay-page.rollIn {
        display: block;
        animation: rollIn 0.3s ease-in-out forwards;
        -webkit-animation: rollIn 0.3s ease-in-out forwards;
        -moz-animation: rollIn 0.3s ease-in-out forwards;
        -o-animation: rollIn 0.3s ease-in-out forwards;
    }

.overlay-page > .dir{
    bottom: 50%;
    background: var(--main-bg-color);
    box-shadow: none;
    /*border: 1px solid #fff;*/
}

    .overlay-page > .dir:hover {
        background: rgba(255,255,255,0.3);
        border: 1px solid transparent;
    }

    .overlay-page > .page-title {
        font-size: 110%;
        padding: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
        position: absolute;
        background: rgba(32,32,32,0.9);
        z-index: 190;
        border-radius: 0px 0px 30px 0;
        padding-left: 15px;
        margin-top: 0;
        /*width: 100%;*/
        display: block;
        box-shadow: 0 0 20px #000;
    }

    .overlay-page > .list-wrapper {
        list-style: none;
        display: flex;
        width: 80%;
        height: 100%;
        margin: 10%;
        margin-top: 0;
        margin-bottom: 0;
        z-index: -1;
        background: black;
        /*box-shadow: 0 0 20px #111;*/
        text-align: center;
        align-content: center;
        align-items: center;
        align: center;
        vertical-align: middle;
        overflow: hidden;
        padding-left:0;
    }

.overlay-page > .close {
    font-family:  Calibri;
    font-size: 220% !important;
    right: 20px !important;
    top: 10px !important;
    color: #ccc;
    display: inline-block;
    position: absolute;
    font-weight: normal;
    text-shadow: none;
    opacity: 0.8;
    z-index: 200;
}

    .overlay-page > .close:hover {
        color: #fff;
        opacity: 1;
    }
    .overlay-page > .list-wrapper > .img-wrapper {
        width: 100%;
        height: 100%;
        display: inline-block;
        background: black;
        flex: 0 0 auto;
        /*box-shadow: 0 0 20px #111;*/
        text-align: center;
        align-content: center;
        align-items: center;
        align: center;
        vertical-align: middle;
        margin: 0;
        transition: all linear .2s;
        -webkit-transition: all linear .2s;
        -moz-transition: all linear .2s;
        -o-transition: all linear 2s;
    }

.img-wrapper > .full-img {
    position: relative;
    max-height: 100%;
    max-width: 100%;
    align-content: center;
    align: center;
    padding-top: 3%;
    padding-bottom: 3%;
    /*box-shadow: 0 0 20px #333;*/
    vertical-align: central;
    transition: all linear .2s;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    -o-transition: all linear 2s;
}

.calendar{
    /*height: 350px;*/
    /*padding: 10px;*/
    /*background: lightblue;*/
    display: flex;
    overflow: hidden;
    list-style: none;
    text-decoration: none;
    margin: 0 !important;
    position: relative;
}

.cal-month {
    flex: 0 0 auto;
    width: 450px;
    margin: 0 !important;
    /*background: black;*/
}

.cal-month > .title {
    font-size: 200%;
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 8px;
}

.cal-days, .cal-dsow {
    list-style: none;
    text-decoration: none;
    padding: 0 !important;
    display: block;
}

.cal-day, .cal-dow {
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    align-content: center;
    margin: 3px;
    font-size: 120%;
    font-weight: 600;
    padding: 5px;
    display: inline-block;
    background: whitesmoke;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-font-smoothing: antialiased;
}

    .cal-day{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 2.5;
        transition: all linear 0.2s;
       -webkit-transition: all linear 0.2s;
       -moz-transition: all linear 0.2s;
       -o-transition: all linear 0.2s;
       border-radius: 8%;
       /*font-size: 140%;*/
    }

.cal-day.has-event {
    background: var(--alternate-bg-color) !important;
    color: white;
    font-weight: normal;
}

.cal-day:focus, .cal-day:hover{
    background: lightskyblue;
}

.cal-dow{
    background: transparent;
    color: var(--main-bg-color);
    font-weight: 400;
    height: auto;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        /*top: -10%;*/
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.pop-cover{
    position: fixed;
    background: rgba(255,255,255,0.9);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1999;
    display: none;
}

.pop-wrapper {
    position: fixed;
    opacity: 0;
    display: none;
    list-style: none;
    text-decoration: none;
    font-weight: 400;
    z-index: 2000;
    background: linear-gradient(whitesmoke, white 90%);
    background: -webkit-linear-gradient(white, whitesmoke);
    width: 400px;
    /*width: 35%;*/
    /*height: 100vh;*/
    box-shadow: 0 0 25px #aaa;
    /*left: 32.5%;
    right: 32.5%;*/
    top: 0;
    padding-bottom: 3%;
    border-radius: 3px;
}

.pop-wrapper.show {
    display: inline-block;
    animation: fadeIn 0.3s forwards;
    -webkit-animation: fadeIn 0.3s ease-in-out forwards;
    -moz-animation: fadeIn 0.3s forwards;
}

.popup {
    /*display: none;*/
   position: relative;
   width: 100%;
   height: 100%;
   /*left:-28%;*/
}

    .popup .pop-image {
        width: 100%;
        height: 200px;
        background-color: rgba(154,47,55,0.5);
        background-image: url('../img/Image_01.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }

.popup > .close {
    font-family: Calibri;
    font-size: 230% !important;
    right: 2% !important;
    top: 10px !important;
    color: #666666;
    display: inline-block;
    position: absolute;
    font-weight: 200;
    text-shadow: none;
    opacity: 0.8;
    padding: 0px 6px 0px 6px;
    z-index: 200;
    /*background: white;*/
    border-radius: 100%;
}

    .popup > .close:hover {
        color: #333;
        opacity: 1;
    }

    .popup .pop-content {
        padding: 10%;
        padding-bottom: 20px;
        text-align: left;
        line-height: 0.6;
        list-style: none;
        text-decoration: none;
        font-size: 120%;
        -webkit-font-smoothing: antialiased;
    }

        .popup .pop-content .title {
            font-size: 130%;
            font-weight: 600;
            margin-bottom: 14px;
            line-height: 1.1;
        }

    .popup .pop-content .venue {
        vertical-align: text-top;
    }

    .popup .pop-content .date {
        vertical-align: text-top;
        font-weight: bolder;
    }

    .popup .pop-content .time {
        vertical-align: text-top;
    }

    .popup .pop-content .tickets {
        vertical-align: text-top;
    }

    .popup .pop-content .desc {
        vertical-align: text-top;
        line-height: 18px;
        font-size: 90%;
        font-weight: normal;
    }

    .popup .content .save {
        background: var(--alternate-bg-color);
        color: white;
        padding: 2px;
    }



    .object {
        height: 150px;
        width: 50%;
        bottom: -110px;
        background: white;
        box-shadow: 0 0 7px #fff;
        z-index: 2000;
        transform: rotate(10deg);
        position: absolute;
        left: -20px;
        margin-right: auto;
    }

.object-r {
    height: 150px;
    width: 50%;
    bottom: -110px;
    background: white;
    box-shadow: 0 0 7px #fff;
    z-index: 2000;
    transform: skew(-100deg);
    position: absolute;
    right: -20px;
    margin-right: auto;
}

.middle-sticker {
    width: 40%;
    margin-right: auto;
    margin-left: auto;
    margin-top: -30px;
    background: white;
    list-style: none;
    text-decoration: none;
    position: relative;
    z-index: 1000;
    padding: 0 !important;
    /*border: 1px solid var(--alternate-bg-color);*/
    min-width: 400px;
    box-shadow: 0 0 10px #999;
    background-image: linear-gradient(to top, white 60%, transparent, whitesmoke) !important;
    background-image: -webkit-linear-gradient(to top, white 60%, transparent, var(--main-bg-color)) !important;
    margin-bottom: 70px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -o-transition: all linear .3s;
    /*height: 0;*/
    opacity: 0;
}

.middle-sticker.rollDown{
    /*height: auto;*/
    opacity: 1;
    display: block;
}

.sticker-item {
    vertical-align: top;
    padding: 10px;
    display: inline-block;
    min-height: 120px;
    padding: 20px;
    line-height: 35px;
    overflow: hidden;
    text-wrap: normal;
    margin: 0 !important;
}

#evt_date, #evt_item {
    font-size: 150%;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#evt_date {
    font-size: 280%;
    background: var(--alternate-bg-color);
    color: white;
    text-align: center;
    box-shadow: 0 0 15px #333;
    text-transform: uppercase;
    float: right;
    position: absolute;
    top: 0;
    right: 0;
    /*background-image: linear-gradient(to top, var(--alternate-bg-color) 60%, transparent, var(--main-bg-color)) !important;
    background-image: -webkit-linear-gradient(to top, var(--alternate-bg-color) 60%, transparent, var(--main-bg-color)) !important;*/
}

.bold-event {
    font-weight: 600;
    /*background: var(--main-bg-color);*/
}

#evt_item {
    text-align: center;
    width: 100%;
    display: none;
}

#evt_date_month, .evt_date_month {
    font-size: 78%;
    background: var(--alternate-bg-color);
    color: white;
    line-height: 39px;
    text-align: right;
}

#evt_date {
    /*font-family: 'Comfortaa-Regular';*/
}

.tag {
    font-size: 150%;
    line-height: 25px;
    background: rgba(154,47,55,.2);
    width: 100%;
    /*background-image: linear-gradient(to top, whitesmoke 60%, transparent, var(--main-bg-color)) !important;
    background-image: -webkit-linear-gradient(to top, var(--alternate-bg-color) 60%, transparent, var(--main-bg-color)) !important;*/
}

.pointer, .pointer-main {
    cursor: pointer;
}

.pointer {
    font-size: 50%;
    cursor: pointer;
}

.pointer-main {
    font-size: 110%;
    color: var(--alternate-bg-color);
}

    .pointer-main.adjust {
        font-size: 30%;
        color: whitesmoke;
        font-weight: 400;
    }

    .pointer-main.load {
        display: none;
        margin-top: 16px;
        padding: 4px;
        padding-left: 14px;
        padding-right: 8px;
        -moz-border-radius: 45px;
        -webkit-border-radius: 45px;
        border-radius: 45px;
        border: 1px solid #666;
        color: #666;
        -webkit-text-decoration: none;
        text-decoration: none;
    }



.h-venue {
    color: var(--alternate-bg-color);
    font-size: 60%;
    line-height: 20px;
    padding: 0;
    margin: 0;
    text-align: center;
}

.first-home {
    /*box-shadow: 0 0 20px #333;*/
    background-image: linear-gradient(to bottom, whitesmoke 60%, transparent) !important;
    background-image: -webkit-linear-gradient(to top, transparent, var(--alternate-bg-color) 60%, transparent, var(--main-bg-color)) !important;
    /*margin-bottom: 10px;*/
    /*z-index: 6;*/
}

.page-title {
    font-size: 380%;
    line-height: 1;
}

.page-title-sub {
    font-size: 280%;
}

.page-title-2 {
    font-size: 200%;
    line-height: 35px;
}

.page-header-text {
    font-size: 130%;
}

.page-intro {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

    .page-intro > .dir {
        position: absolute;
        bottom: 35%;
        background: whitesmoke;
        box-shadow: 0 0 5px #666;
    }

        .page-intro > .dir.prev {
            float: left;
            left: 4%;
            transform: rotate(180deg);
        }

        .page-intro > .dir.next {
            float: right;
            right: 4%;
        }

/*#img1 {
    background: url('../Resx/images/16.jpg') no-repeat;
}
#img2 {
    background: url('../Resx/images/21.jpg') no-repeat;
}

#img3 {
    background: url('../Resx/images/27.jpg') no-repeat;
}

#img4 {
    background: url('../Resx/images/6.jpg') no-repeat;
}

#img5 {
    background: url('../Resx/images/27.jpg') no-repeat;
}*/

.image-items {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    /*overflow-x: auto;*/
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
}

.image-item {
    height: 100%;
    width: 400px;
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom center;
    display: inline-block;
    flex: 0 0 auto;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    filter: grayscale(50%);
}

.title-overlay {
    position: absolute;
    display: inline-block;
    width: 60%;
    color: white;
    left: 20%;
    right: 20%;
    top: 42%;
    vertical-align: middle;
    text-align: center;
    line-height: 45px;
    z-index: 10;
}

.big-text {
    font-size: 400%;
    font-weight: 600;
    line-height: 45px;
}

.status > .big-text {
    font-size: 250%;
}

.sub-text {
    font-size: 45%;
}

.sub-menu {
    display: block;
    list-style: none;
    text-decoration: none;
    padding: 0;
    min-height: 30px;
}

    .sub-menu > li {
        display: inline-block;
        text-decoration: none;
        font-size: 120%;
        margin-right: 10px;
        cursor: pointer;
        font-weight: 500;
        height: 100%;
        padding: 0;
        transition: all linear 0.3s;
        -webkit-transition: all linear 0.3s;
        -moz-transition: all linear 0.3s;
        -o-transition: all linear 0.3s;
    }

.selected-sub-item {
    padding-bottom: 5px;
    border-bottom: solid 2px var(--alternate-bg-color);
    font-size: 150% !important;
}

.selected-album-item {
    background: var(--main-bg-color) !important;
    color: white;
}

    .selected-album-item:hover, .selected-album-item:focus {
        background: var(--main-bg-color) !important;
        color: navajowhite !important;
    }


.sub-page {
    display: flex;
    list-style: none;
    text-decoration: none;
    padding: 0;
    min-height: 30px;
    overflow: hidden;
    width: 100%;
    position: relative;
    /*background: red;*/
}

.sub-page > li{
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    /*background: blue;*/
}

    .sub-page > li > ul {
        list-style: none;
        text-decoration: none;
        padding: 10px;
        width: 100%;
        height: 100%;
        /*background: green;*/
    }

.member-tile {
    /*display: inline-block;*/
    width: 200px;
    /*box-shadow: 0 0 20px #999;*/
    /*border: 1px solid #ddd;*/
    /*border-radius: 50px 50px;*/
    -moz-border-radius: 10%;
    -webkit-border-radius: 10%;
    border-radius: 10%;
    background: white;
    overflow: hidden;
    padding: 0;
    margin-right: 5px;
    display: inline-block;
    transition: all ease-in 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    /*margin-left: 10px;*/
}

    .member-tile.empty {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        background: transparent;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none !important;
        font-size: 110%;
        padding: 20px;
        cursor: default !important;
    }

        .member-tile.empty:hover, .member-tile.empty:focus {
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .member-tile.gallery-item {
            -moz-border-radius: 0 !important;
            -webkit-border-radius: 0 !important;
            border-radius: 0 !important;
            -moz-box-shadow: none !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
        }

    .member-tile > .p-wrapper {
        /*padding: 5px;
        padding-left: 10px;
        padding-right: 10px;*/
        background: var(--main-bg-color);
    }

.member-tile > .p-wrapper > .p-name {
    font-size: 100%;
    font-weight: 400;
    line-height: 15px;
    margin-bottom: 0;
    color: var(--main-bg-color);
    color: white;
}

.member-tile > .p-wrapper > .p-role {
    font-size: 90%;
    margin-top: 0;
    margin-bottom: 0;
    color: lightskyblue;
}

.member-tile > .p-wrapper > .p-joined {
    font-size: 87%;
    margin-top: 0;
    margin-bottom: 0;
    color: white;
}
    .member-tile > .p-image {
        height: 140px;
        padding: 2px;
        background-color: whitesmoke;
        background-size: cover;
        background-image: url('../img/Image_01.svg');
        /*background-image: url('../Resx/images/27.jpg');*/
        /*filter: blur(8px);
        -webkit-filter: blur(8px);*/
    }

.selected-sub-page {
    /*display: block;*/
}

.section-overlay {
    position: absolute;
    background: linear-gradient(to bottom, white, rgba(154,47,55,.5) 50%, rgba(10,10,10,.7));
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* display: none; */
}

.gall-excerpts {
    position: relative;
    background: rgba(12,12,12,1);
    height: 500px;
    width: 100%;
    z-index: 5;
}

.section-next {
    z-index: 12;
    /*box-shadow: 0 0 20px #111;*/
    padding: 0;
    background: url('../img/blur-close-up-depth-of-field-2090877.jpg') no-repeat, linear-gradient(to right, white 50%, rgba(255,255,255,.5));
    background-size: cover;
    background-blend-mode: difference;
    background-position: top bottom;
    background: var(--alternate-bg-color);
    color: white;
    overflow: hidden;
    clear: both;
    display: flex;
    position: relative;
}

.section-social {
    background: white;
    padding: 1%;
    padding-top: 10px;
    padding-bottom: 2px;
    padding-left: 5.5%;
}

.social-icon-wrapper {
    display: inline-block;
    list-style: none;
    text-decoration: none;
    padding-left: 0;
    margin-left: 0;
}

    .social-icon-wrapper > li {
        display: inline-block;
        list-style: none;
        text-decoration: none;
    }

.social-icon {
    color: white;
    width: 40px;
    display: inline-block;
    padding: 0;
}

    .social-icon > img {
        width: 100%;
    }

    .social-icon#img_youtube {
        margin-right: 5px;
    }

    .social-icon > #img_youtube {
        padding: 3px;
        padding-left: 8px;
    }

    .social-icon > #img_twitter {
    }

.section-caption {
    /*background: white;*/
    color: #fff;
    width: 52%;
    padding: 6%;
    padding-top: 8%;
    line-height: 50px;
    display: block;
}

    .section-caption > .pointer-main.adjust {
        color: navajowhite;
        line-height: 30px;
        padding-top: 0;
    }

.yout{
    position: relative;
}

@keyframes pulsate {
    from {
        width: 22%;
        /*margin-top: 18%;
        margin-left: 0%;*/
        opacity: 1;
    }

    to {
        width: 21%;
        /*margin-left: -.1%;
        margin-top: 18.5%;*/
        /*opacity: 0.5;*/
    }
}

@-moz-keyframes pulsate {
}

@-webkit-keyframes pulsate {
}

.yout{
    display: block;
}

.section-caption > .sub-text{
    line-height: 1;
    cursor: pointer;
    width: auto !important;
    display: none;
    vertical-align: middle;
}

.yout > img {
    margin-top: 30%;
    margin-left: 50%;
    margin-right: auto;
    width: 22%;
    box-shadow: 0 0 20px #666;
    border: 0;
    cursor: pointer;
    /* transition: all ease-in-out 2s; */
    animation: pulsate .4s ease-in-out infinite alternate;
    border-radius: 20%;
    padding: 1%;
}

.section-caption > .sub-text > img {
    width: 20%;
}


.bubble {
    width: 80%;
    height: 100%;
    margin: auto;
    top: 0;
    background-image: url('../Resx/Banners/Image-2024-02-20.jpeg');
    position: absolute;
    background-position: center;
    background-size: cover;
    background-blend-mode: color-burn;
    right: 0px;
    /*border-radius: 50% 0% 0% 100%;*/
    z-index: -1;
}

    .bubble.bubble-1 {
        width: 90%;
        right: -35px;
        background: var(--main-bg-color) !important/*linear-gradient(to right, white, transparent 59%)*/;
        z-index: -2;
        border-radius: 100% 100% 0% 100%;
    }


.video-wrapper {
}

.videoIO {
    display: block;
    text-align: center;
    overflow: hidden;
    position: relative;
    padding-top: 5%;
    padding-left: 0 !important;
    width: 100%;
    clear: both;
    /*position: absolute;*/
    height: 100%;
    /*background: darkgray;*/
}

.overlay-page > .pointer-main.adjust{
    position: absolute;
    bottom: 10%;
    font-size: 150%;
    color: var(--alternate-bg-color);
    text-align: center;
    width: 100%;
}

.videoIO-4x3 {
    padding-top: 75%;
}

.videoIO > iframe {
    width: 70%;
    left: 15%;
    /*right: 10%;*/
    text-align: center;
    vertical-align: central;
    border: 15px solid rgba(12,12,12,0.5);
    vertical-align: middle;
    /*max-width: 400px;*/
    min-width: 400px;
    /*bottom: 25%;*/
    height: 70%;
    position: absolute;
}

footer {
    padding: 1%;
    padding-top: 3%;
    padding-left: 6%;
    padding-right: 6%;
    background: linear-gradient(to bottom, white, rgba(154,47,55,.4));
    color: #111;
}

.footer-sections {
    list-style: none;
    text-decoration: none;
    display: flex;
    flex-wrap: nowrap;
    padding: 0 !important;
    padding: 17px;
}

.footer-section {
    display: flex;
    text-decoration: none;
    width: 33.3333%;
    margin: 0 !important;
    flex: 0 0 auto;
    vertical-align: baseline;
    font-weight: 500;
    color: #000;
}

.title-icon-text {
    font-size: 130%;
    font-weight: 600;
    color: rgba(154,47,55,.8);
    display: block;
    vertical-align: text-bottom;
    margin-bottom: 10px;
}

    .title-icon-text > img {
        width: 28px;
        margin-left: -5px;
        margin-right: 5px;
        display: none;
    }

.btn.iconbtn {
    vertical-align: super;
    display: inline-block;
    padding-bottom: 5px;
}

.iconbtn > span {
    vertical-align: middle;
}

.page-link {
    color: var(--main-bg-color) !important;
}

    .active > .page-link, .page-link.active {
        background: var(--main-bg-color) !important;
        color: white !important;
        border: var(--main-bg-color) !important;
    }


/*#paginator, .paginator{
    display: block;
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

    #paginator > li, .paginator > li {
        background: transparent;
        border: 1px solid var(--main-bg-color);
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        padding: 4px;
        cursor: pointer;
        margin-right: 5px;
        color: var(--main-bg-color);
        text-align: center;
        width: 25px;
        height: 25px;
        text-align: center;
    }

        .paginator > li.active {
            background: var(--main-bg-color) !important;
            color: white !important;
            border: none !important;
        }*/

        /*============================ MEDIA QUERIES =================================*/

@media screen and (max-device-width: 1024px), 
    screen and (max-width: 1024px) {
        body, html{
            font-size: 13px !important;
        }

        .page-banner.sub, .page-banner.mdir {
            min-height: 300px;
            background-color: var(--main-bg-color) !important;
            background-repeat: no-repeat;
            /*background-position: center center;*/
            background-attachment: scroll;
            background-blend-mode: normal;
        }


        .page-banner.sub {
            background-image: url('../Resx/Banners/110_E.jpg');
        }

        .page-banner.mdir {
            /*background-image: url('../Resx/Banners/m-dir-2.jpg');*/
            background-repeat: no-repeat;
            background-position: top right;
            background-attachment: fixed;
        }

        .text-side{
            padding: 3rem;
        }

    .page-banner.gallery {
        min-height: 350px;
        background-color: var(--main-bg-color) !important;
        background-image: url('../Resx/Banners/141_E.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-blend-mode: normal;
    }

    .page-banner.events {
        min-height: 350px;
        background-color: rgba(154,47,55,.7) !important;
        background-image: url('../img/28.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-blend-mode: normal;
    }
}

        @media screen and (max-width:994px) {
            html, body {
            /*font-size: 12px;*/
        }

        .scroll-item {
            width: 170px;
        }

        .p-image {
            height: 120px
        }

        .singers > .page-intro > .page-title, .membership > .page-intro > .page-title {
            font-size: 350% !important;
        }

        .membership > .page-intro > .page-title {
            /* color: white; */
            margin-bottom: 2%;
            margin-left: 6%;
            margin-right: 6%;
        }

        .page-title-sub {
            font-size: 230%;
        }

        .member-tile {
            width: 180px;
        }

            .member-tile > .p-image {
                height: 130px;
            }

            .member-tile > .p-wrapper {
                min-height: 80px;
            }

        .navbar-brand > span {
            font-size: 100%;
        }

        .navbar2 > .container {
            padding: 0px;
            /* background-image: linear-gradient(to right, transparent 0%, var(--alternate-bg-color), var(--main-bg-color), transparent 30% ); */
            /* background-image: linear-gradient(to bottom, transparent, rgba(154,47,55,0.9), transparent 90%); */
            border-radius: 40px;
        }

        .page-banner {
            min-height: 300px;
        }

            .page-banner.sub, .page-banner.mdir {
                min-height: 250px;
                /*background-image: url('images/7s.jpg');*/
            }

            .page-banner.gallery {
                min-height: 250px;
            }

            .page-banner.events {
                min-height: 250px;
            }

                .page-banner.gallery > .b-text, .page-banner.events > .b-text {
                    top: 70%;
                }

            .b-text {
                left: 8%;
                top: auto;
                /*top: 40%;*/
                bottom: 5%;
            }

            .b-text > .main {
                font-size: 230%;
                font-weight: 600;
                line-height: 1em;
            }

            .b-text > .sub {
                font-size: 100%;
            }

        /*.slider-wrapper {
            left: 20%;
            width: 80%;
        }*/

        .slider {
            height: 450px;
        }

        .slide-cover-null {
            background-image: -webkit-linear-gradient(to right, var(--main-bg-color) 25%, transparent, rgba(154,47,55,0.2)) !important;
            background-image: linear-gradient(to right, var(--main-bg-color) 25%, transparent, rgba(154,47,55,0.2)) !important;
            /*display:none;*/
        }

        .slide-cover-2-null {
            background-image: -webkit-linear-gradient(to top,var(--main-bg-color)1%, transparent 90%, var(--main-bg-color)) !important;
            background-image: linear-gradient(to top, var(--main-bg-color) 1%, transparent, transparent 90%, transparent, var(--main-bg-color)) !important;
            /*display:none;*/
        }

        .dir {
            /*width: 30px;*/
        }

        .page-title {
            font-size: 320%;
        }

        .page-header-text {
            font-size: 110%;
        }

        .big-text {
            font-size: 250% !important;
            font-weight: 600;
            line-height: 1;
        }

        .pointer-main.adjust {
            font-size: 40%;
            color: whitesmoke;
            font-weight: 400;
        }

        #evt_item {
            font-size: 120%;
        }

        #evt_date {
            /*font-family: 'Product Sans';*/
            font-weight: 600;
        }

        .h-venue {
            font-size: 80%;
        }

        .gall-excerpts {
            background: rgba(12,12,12,1);
            height: 300px;
        }

        .upnext > .page-title, .calevents > .page-title {
            /*position: absolute !important;*/
            font-size: 300%;
        }

        .inner-container.events > .page-title {
            font-size: 330%;
        }

        .portioner > div > .page-title-sub {
            font-size: 170% !important;
            line-height: 1;
        }

        .cal-month {
            width: 350px;
        }

            .cal-month > .title {
                font-size: 150%;
            }

        .cal-day, .cal-dow {
            width: 36px;
            height: 36px;
            line-height: normal;
            font-size: 120%;
        }

        .yout > img {
            margin-top: 26%;
        }

        .image-item {
            width: 250px;
        }
    }


@media (min-width: 895px) {
    .navbar-toggler {
        display: none !important;
    }
}

    @media screen and (max-width: 894px) {
/*
        .navbar-toggler {
            display: block !important;
        }*/

.navbar-header{
    width: 100%;
}

        .sub-menu > li {
            font-size: 100%;
            margin-right: 6px;
            cursor: pointer;
            font-weight: 500;
            height: 100%;
            padding: 0;

        }

        /*.navbar-inverse .navbar-collapse {
        /*transition: all linear 0.5s;
        -webkit-transition: all linear 0.5s;
        -moz-transition: all linear 0.5s;
        -o-transition: all linear 0.5s;
        position: fixed;
        right: -100%;
        top: 0;
        height: 100vh;
        display: block;
    }*/
        .slide-cover-2 {
            background: rgba(15,15,15,0.3);
        }

        .navbar-inverse .navbar-collapse, .navbar-inversen .navbar-formh {
            position: fixed;
            top: 0;
            width: 40%;
            margin: 0;
            right: -100%;
            height: 100vh;
            bottom: 0;
            background: var(--main-bg-color);
            box-shadow: 0 0 10px #333;
            display: block;
        }

        /*.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse{
            max-height: 100vh !important;
        }*/

        .navbar-form {
            font-size: 80%;
            margin: 0;
            /*margin-bottom: 8px;*/
            border: none;
            box-shadow: none;
            padding: 0;
            width: auto;
        }

        .dropdown-menu {
            position: relative;
            float: none;
            right: auto;
            left: auto;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            padding: 0;
            border-radius: 1.5em;
            min-width: auto;
            /*max-width: 100px;*/
        }

            .navbar-inverse .navbar-collapse > .close {
                display: block;
            }

        #menuDrop > .dropdown, #menuDrop > .dropup {
            float: none; 
            text-align: center;
        }

        #mAbout.dropdown{
            margin-top: 0 !important;
        }

        .navbar-nav {
            /*margin-top: 40px !important;
            float: none !important;
            margin: 0;*/
        }

        .navbar-nav > li{
            float: none !important;
        }

        .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
            max-height: 100vh !important;
        }

        .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse{
            padding-right: 15px;
            padding-left: 15px !important;
        }

        .navbar-toggler {
            margin-bottom: -1px;
        }

        .page-title {
            font-size: 300%;
            /*width: 70%;*/
        }

        .singers > .page-intro > .page-title, .membership > .page-intro > .page-title {
            font-size: 340% !important;
            width: 100%;
        }

        .page-title-sub {
            font-size: 210%;
        }

        .page-intro {
            text-align: left;
            width: 95%;
        }

        .first-home > .page-intro {
            text-align: center
        }

            .first-home > .page-intro > .page-title {
                text-align: center;
                width: 100%;
            }

        .sub-page > li > ul {
            text-align: center;
        }

        .gallery-items > .page-intro > .sub-page > .member-tile {
            width: 130px;
        }

            .gallery-items > .page-intro > .sub-page > .member-tile > .p-image {
                width: 130px;
                height: 130px;
            }

        .upnext {
            display: block;
        }

            .upnext > div {
                display: inline-block;
                width: 30%;
                vertical-align: text-top;
            }

        .upDate {
            text-align: right;
            font-size: 850%;
            line-height: .7;
            padding-top: 5% !important;
        }

        .upDetails {
            width: 65% !important;
            text-align: left;
        }

            .upDetails > .title {
                font-size: 210%;
                line-height: 1;
            }

        .upDesc {
            width: 100% !important;
            display: block !important;
            padding: 8% !important;
            padding-top: 0 !important;
            font-size: 90% !important;
        }

        .footer-sections {
            display: block;
            margin-bottom: 6%;
        }

        .footer-section {
            display: block;
            flex: none;
            width: 100%;
        }

        .yout > img {
            margin-top: 35%;
        }

        .inner-container.events {
            padding: 8%;
            background: none;
        }

        .portioner {
            display: block;
        }

            .portioner > div {
                width: 100%;
            }

            .portioner > .status > p {
                padding-left: 0 !important;
            }

                .portioner > .status > p.btn {
                    padding: 10px 16px !important;
                    border: 1px solid black;
                    border-radius: 8em;
                    margin-left: 0;
                }

            .portioner > div > .page-title-sub {
                text-align: left;
            }

        .form-control {
            margin-left: 0;
            margin-right: auto;
        }

    }

    @media screen and (max-width: 625px) {
        .singers > .page-intro > .page-title {
            text-align: left;
        }

        .singers > .page-intro > .page-title, .membership > .page-intro > .page-title {
            font-size: 320% !important;
        }


        .page-title {
            text-align: left;
            margin-top: 20px;
            margin-bottom: 0;
        }

        .videoIO > iframe {
            width: 87%;
            left: 6%;
            right: 6%;
            text-align: center;
            vertical-align: central;
            min-width: initial;
            height: 70%;
            position: absolute;
        }

        .yout > img {
            margin-top: 52%;
        }


        /* ---- About Segments ---- */


        .flex-segment {
            flex-direction: column; /* Stack the image and text */
        }

        .image-side {
            display: none; /* Hide the image-side */
        }

        .text-side {
            flex: 1;
            background-size: cover; /* Add the image as a background */
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: scroll; /* No fixed background on mobile */
            position: relative;
            height: 100%;
            padding: 3rem;
        }

            .text-side.img-1 {
                background-image: url('../Resx/Banners/m-dir-1.jpg');
            }

            .text-side.img-2 {
                background-image: url('../Resx/Banners/m-dir-2.jpg');
            }

            .text-side.img-3 {
                background-image: url('../Resx/Banners/m-dir-3.jpg');
            }

            .text-side.img-4 {
                background-image: url('../Resx/Banners/m-dir-4.jpg');
            }

            .text-side.img-5 {
                background-image: url('../Resx/Banners/m-dir-5.jpg');
            }

            /* Semi-transparent background over the image */
            .text-side::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 0;
                background-color: rgba(255, 255, 255, 0.8); /* Adjust opacity to make it more or less transparent */
            }

        .flex-segment:nth-child(even) .text-side::before {
            background-color: rgba(154, 47, 55, .8) !important; /* Adjust opacity to make it more or less transparent */
        }

        .text-side .segment-title, .text-side p, .text-side div {
            position: relative; /* Ensure text stays above the background */
            z-index: 1;
        }

    }

    @media only screen and (max-width: 567px) {

        .dir-wrapper {
            left: 7%;
            width: 90%;
            justify-content: space-between;
        }

        .navbar-toggler {
            position: relative;
            float: right;
            padding: 3px 10px;
            margin-top: 8px;
            margin-right: 25px;
            margin-bottom: 8px;
            /*background: linear-gradient(to right,transparent 30%, var(--main-bg-color), transparent 90%)*/ /*var(--main-bg-color)*/
        }

        .navbar-inverse .navbar-toggler .icon-bar {
            box-shadow: 0 0 8px #111;
            /*background-color:  var(--main-bg-color);*/
        }

        .navbar-brand > span {
            font-size: 104%;
            margin-left: 10px;
        }

            .navbar-brand > span.navbar-brand-name {
                margin-left: 4px;
                text-shadow: 0 0 5px black;
                margin-left: 4px;
                text-shadow: 0 0 8px #000;
                font-weight: 600;
            }

        .scroll-item {
            width: 170px;
        }

            .scroll-item > .p-image {
                height: 130px;
            }

        .p-wrapper {
            padding: 4px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .p-image {
            height: 90px
        }

        .p-name {
            font-size: 100%;
            line-height: 1.2;
        }

        .singers > .page-intro > .page-title, .membership > .page-intro > .page-title {
            font-size: 250% !important;
        }

        .title-overlay {
            top: 30%;
            text-align: left;
        }

        .section-overlay {
            /*background: linear-gradient(to right, transparent, rgba(0,0,0,.7), transparent);*/
        }

        .inner-container.first-home {
            padding: 0;
            padding-bottom: 5%;
        }

            .inner-container.first-home > .page-intro {
                padding-top: 5%;
            }

                .inner-container.first-home > .page-intro > .page-title {
                    width: 100%;
                    margin-bottom: 15px;
                }

        .first-home > .page-intro {
            text-align: left;
        }

            .first-home > .page-intro > .page-title {
                text-align: left;
                width: 100%;
            }

        .page-title-sub {
            font-size: 200%;
        }

        .member-tile {
            width: 180px;
        }

            .member-tile > .p-image {
                height: 130px;
            }


        .slider-wrapper {
            left: 20%;
            width: 80%;
        }

        .slider {
            height: 300px;
        }

        .slide-cover {
            background-image: linear-gradient(to right, var(--main-bg-color) 25%, transparent, rgba(154,47,55,0.2)) !important;
            background-image: -webkit-linear-gradient(to right, var(--main-bg-color) 25%, transparent, rgba(154,47,55,0.2)) !important;
            /*display:none;*/
        }

        .page-banner.home > .slide-cover {
            background: none !important;
            background-image: none;
        }

        .page-banner.small {
            display: block;
            min-height: 30px;
            padding-top: 5%;
            padding-bottom: 10%;
        }

            .page-banner.small > .b-text {
                position: relative;
                left: 0;
                padding-left: 8%;
                padding-right: 8%;
                font-size: 120%;
            }

        .b-text.large {
            display: none;
        }

        .slide-cover-2 {
            /*background-image: linear-gradient(to top, var(--main-bg-color) 1%, transparent, transparent 90%, transparent, var(--main-bg-color)) !important;*/
            /*background-image: -webkit-linear-gradient(to top,var(--main-bg-color)1%, transparent 90%, var(--main-bg-color)) !important;*/
            /*display:none;*/
        }

        .dir {
            /*width: 30px;*/
        }


        .slider-wrapper {
            left: 0;
            width: 100%;
        }

        .first-home > .page-intro {
            padding-left: 5.5%;
            padding-right: 5.5%;
        }

        .middle-sticker {
            min-width: 200px;
            width: 100%;
            margin-top: -10px;
            margin-bottom: 10px;
            box-shadow: none;
        }

        .tag {
            /*margin-top: 5px;
       margin-bottom: 5px;
       min-height: 50px;*/
            line-height: 1;
            padding-left: 8%;
            background-color: var(--alternate-bg-color);
            background: linear-gradient(to right, var(--main-bg-color), var(--alternate-bg-color));
            color: ivory;
            padding-top: 35px;
        }

            .tag > .pointer {
                font-size: 80%;
                color: white;
            }

        #evt_item {
            text-align: left;
            line-height: 1;
            display: none;
        }

        .h-venue {
            text-align: left;
        }

        #evt_date {
            font-size: 220%;
            box-shadow: none;
            margin-right: 0 !important;
            padding-top: 25px;
        }

        /*#evt_date {
        position: relative;
        width: 100%;
        text-align: left;
        float: none;
        padding-top: 25px;
        box-shadow: none;
    }

    #evt_date_month, .evt_date_month{
        width: 100%;
        text-align: left;
    }*/

        .title-overlay {
            color: white;
            left: 6%;
            right: 6%;
            text-align: left;
            width: 80%;
            top: 30%;
        }

        .yout {
            display: none;
        }

        .section-caption {
            width: 80%;
        }

            .section-caption > .sub-text > img {
                width: 10%;
            }

            .section-caption > .sub-text {
                line-height: 1;
                cursor: pointer;
                width: auto !important;
                display: inline;
            }

        .program-file.home {
            margin-left: 0 !important;
            width: 200px;
            height: 40px;
            /*margin-right: auto;*/
        }

            .program-file.home > .p-image {
                width: 40px;
                /*margin-right: auto;*/
            }

            .program-file.home > .p-text {
                margin-left: 40px !important;
                font-size: 100%;
                padding: 10px;
                /*margin-right: auto;*/
            }
    }

    @media screen and (max-width:547px) {

        .overlay-page > .dir {
            border-radius: 0;
        }

            .overlay-page > .dir.next {
                right: 0;
            }

            .overlay-page > .dir.prev {
                left: 0;
            }

        html, body {
            /*font-size: 12px;*/
        }

        .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
            border-color: transparent;
            background: var(--main-bg-color);
        }

        .navbar-brand > span {
            font-size: 90%;
            margin-left: 10px;
        }

            .navbar-brand > span.navbar-brand-name {
                margin-left: 4px;
                text-shadow: 0 0 5px black;
                margin-left: 4px;
                text-shadow: 0 0 8px #000;
                font-weight: 600;
            }

            .navbar-brand > span > img {
                width: 40px !important;
                height: 35px !important;
            }

        .navbar2 > .container {
            padding: 0px;
            padding-top: 5px;
            padding-bottom: 5px;
            /*background-image: linear-gradient(to right, transparent 0%, var(--alternate-bg-color), var(--main-bg-color), transparent 50% );*/
            /* background-image: linear-gradient(to bottom, transparent, rgba(154,47,55,0.9), transparent 90%); */
            border-radius: 40px;
        }

        .page-banner {
            min-height: 300px;
        }

            .page-banner.sub, .page-banner.mdir {
                min-height: 250px;
                /*background-image: url('images/7s.jpg');*/
            }

            .page-banner.gallery {
                min-height: 250px;
            }

            .page-banner.events {
                min-height: 250px;
            }

                .page-banner.gallery > .b-text, .page-banner.events > .b-text, .page-banner.sub > .b-text, .page-banner.mdir > .b-text {
                    /*top: 50%;*/
                }

        .b-text {
            left: 8%;
            top: auto;
            /*top: 40%;*/
            bottom: 5%;
        }

            .b-text > .main {
                font-size: 230%;
                font-weight: 600;
                line-height: 1em;
            }

            .b-text > .sub {
                font-size: 100%;
            }

        /*.slider-wrapper {
        left: 20%;
        width: 80%;
    }*/

        .slider {
            height: 300px;
        }

        /*.slide-cover {
        background-image: linear-gradient(to right, var(--main-bg-color) 25%, transparent, rgba(154,47,55,0.2)) !important;
        background-image: -webkit-linear-gradient(to right, var(--main-bg-color) 25%, transparent, rgba(154,47,55,0.2)) !important;
        /*display:none;
    }

    .slide-cover-2 {
        background-image: linear-gradient(to top, var(--main-bg-color) 1%, transparent, transparent 90%, transparent, var(--main-bg-color)) !important;
        background-image: -webkit-linear-gradient(to top,var(--main-bg-color)1%, transparent 90%, var(--main-bg-color)) !important;
        /*display:none;
    }*/

        /*.dir {
        width: 30px;
    }*/

        .page-title {
            font-size: 230%;
        }

        .page-header-text {
            font-size: 110%;
        }

        .big-text {
            font-size: 250% !important;
            font-weight: 600;
            line-height: 1;
        }

        .pointer-main.adjust {
            font-size: 40%;
            color: whitesmoke;
            font-weight: 400;
        }

        #evt_item {
            font-size: 120%;
        }

        #evt_date {
            font-family: 'Product Sans';
            font-weight: 600;
        }

        .h-venue {
            font-size: 80%;
        }

        .gall-excerpts {
            background: rgba(12,12,12,1);
            height: 300px;
        }

        .upnext > .page-title, .calevents > .page-title {
            /*position: absolute !important;*/
            font-size: 270%;
            text-align: left;
        }

        .inner-container.events {
            background: round;
        }

            .inner-container.events > .page-title {
                font-size: 320%;
            }

        .portioner > div > .page-title-sub {
            font-size: 170% !important;
            line-height: 1;
        }

        .cal-month {
            width: 450px;
        }

            .cal-month > .title {
                font-size: 150%;
                padding-left: 8px;
            }

        .cal-day, .cal-dow {
            width: 50px;
            height: 50px;
            line-height: normal;
            font-size: 120%;
        }

        .cal-dow {
            height: auto;
        }

        .status > .btn-link {
            font-size: 100% !important;
            /*width: 50%;*/
            text-align: center !important;
            background: transparent;
            border: 1px solid;
            border-radius: 0;
        }

        .upnext {
            display: block;
        }

            .upnext > div {
                display: inline-block;
                width: 30%;
                vertical-align: text-top;
            }

        .upDate {
            text-align: right;
            font-size: 850%;
            line-height: .7;
            /*padding-top: 5% !important;*/
            padding-top: 7% !important;
        }

        .upDetails {
            width: 60% !important;
            text-align: left;
        }

            .upDetails > .title {
                font-size: 210%;
                line-height: 1;
            }

        .upDesc {
            width: 100% !important;
            display: block !important;
            padding: 8% !important;
            padding-top: 0 !important;
            font-size: 90% !important;
        }
    }

    @media screen and (max-width:514px) {

        .upnext > .page-title, .calevents > .page-title {
            /*position: absolute !important;*/
            font-size: 260%;
            text-align: left;
        }

        .inner-container.events > .page-title {
            font-size: 290%;
        }

        .portioner > div > .page-title-sub {
            font-size: 170% !important;
            line-height: 1;
        }

        .cal-month {
            width: 350px;
        }

            .cal-month > .title {
                font-size: 150%;
                padding-left: 8px;
            }

        .cal-day, .cal-dow {
            width: 40px;
            height: 40px;
            line-height: normal;
            font-size: 110%;
        }

        .selected-sub-item {
            font-size: 120% !important;
        }

        .sun-menu > li {
            font-size: 100%;
        }

        .member-tile {
            width: 180px;
        }

        .image-item{
            width: 150px;
        }

        .page-banner.sub, .page-banner.mdire {
            background-position: center center;
        }
    }

    @media screen and (max-width:476px) {

        .page-banner.events {
            background-position: revert;
        }

        .page-title {
            text-align: left;
            margin-top: 20px;
            margin-bottom: 0;
        }

        .about > .page-intro > .page-header-text {
            font-size: 100%;
            text-align: left;
        }


        .page-title-sub {
            font-size: 170%;
        }

        .selected-sub-item {
            font-size: 120% !important;
        }

        .sun-menu > li {
            font-size: 100%;
        }

        .member-tile {
            width: 160px;
            box-shadow: 0 0 1px #777;
        }

        .p-image {
            height: 90px;
        }

        .middle-sticker{
            /*height: auto;*/
            display: none;
        }
    }

    @media screen and (max-width:443px) {
        .singers > .page-intro > .page-title {
            text-align: left;
        }

        .page-title-sub {
            font-size: 170%;
        }

        .selected-sub-item {
            font-size: 120% !important;
        }

        .sun-menu > li {
            font-size: 100%;
        }

        .member-tile {
            width: 48%;
            box-shadow: 0 0 1px #777;
        }

            .member-tile > .p-image {
                height: 140px;
            }

        .navbar-brand {
            letter-spacing: 2px;
        }

        .navbar-brand > span {
            font-size: 92%;
        }
    }

    @media screen and (max-width:424px) {

        .upnext > .page-title, .calevents > .page-title {
            /*position: absolute !important;*/
            font-size: 230%;
            text-align: left;
        }

        .inner-container.events > .page-title {
            font-size: 260%;
        }

        .portioner > div > .page-title-sub {
            font-size: 140% !important;
            line-height: 1;
        }

        .cal-month {
            width: 320px;
        }

            .cal-month > .title {
                font-size: 150%;
                padding-left: 8px;
            }

        .cal-day, .cal-dow {
            width: 32px;
            height: 32px;
            line-height: normal;
            font-size: 110%;
        }


        .footer-sections {
            display: block;
        }

        .footer-section {
            display: inline-block;
            width: 100%;
            margin-top: 10px !important;
        }

        .title-icon-text {
            color: var(--main-bg-color);
        }
    }

    @media screen and (max-width:410px) {

        home, body {
            font-size: 12px;
        }

        .upnext > .page-title, .calevents > .page-title {
            /*position: absolute !important;*/
            font-size: 180%;
            text-align: left;
            line-height: 1;
        }

        .inner-container.events {
            background: round;
        }

            .inner-container.events > .page-title {
                font-size: 230%;
            }

        .portioner {
            display: block
        }

            .portioner > div {
                width: 100%;
                text-align: center;
            }

                .portioner > div > .page-title-sub {
                    font-size: 120% !important;
                    line-height: 1;
                    text-align: left;
                }

            .portioner > .status > p {
                padding-left: 0 !important;
                text-align: left;
                padding: 8px;
            }

        .cal-month {
            width: 280px;
        }

            .cal-month > .title {
                font-size: 150%;
                padding-left: 8px;
            }

        .cal-day, .cal-dow {
            width: 28px;
            height: 28px;
            line-height: normal;
            font-size: 100%;
        }

        .status > .big-text {
            font-size: 120% !important;
        }

        .status > .btn-link {
            font-size: 100% !important;
            /*width: 50%;*/
            text-align: center !important;
            background: transparent;
            border: 1px solid;
            border-radius: 0;
        }

        .upnext {
            display: block;
        }

            .upnext > div {
                display: inline-block;
                width: 30%;
                vertical-align: text-bottom;
            }

        .upDate {
            text-align: right;
            font-size: 550%;
            line-height: .7;
            padding-top: 5% !important;
            padding-top: 9% !important;
        }

        .upDetails {
            width: 65% !important;
            text-align: left;
        }

            .upDetails > .title {
                font-size: 150%;
                line-height: 1;
            }

            .upDetails > .venue {
                line-height: 1;
                font-size: 100%;
            }

        .upDesc {
            width: 100% !important;
            display: block !important;
            padding: 8% !important;
            padding-top: 0 !important;
            font-size: 100% !important;
        }

        .pop-wrapper {
            width: 320px;
        }
    }

    @media screen and (max-width: 384px) {
        .member-tile > .p-image {
            height: 120px;
        }

        .pop-wrapper {
            width: 290px;
        }

        .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
            width: 60%;
        }
    }

    @media screen and (max-width: 335px) {

        .member-tile {
            width: 132px;
        }

            .member-tile > .p-image {
                height: 120px;
            }

        .pop-wrapper {
            width: 290px;
        }

        .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
            width: 60%;
        }
    }

    @media screen and (max-width:320px) {

        .overlay-page > .page-title {
            font-size: 100%;
        }

        .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
            width: 100%;
        }

        .singers > .page-intro > .page-title {
            text-align: left;
        }

        .page-title-sub {
            font-size: 170%;
        }

        .selected-sub-item {
            font-size: 120% !important;
        }

        .sun-menu > li {
            font-size: 100%;
        }

        .sub-page > li > ul {
            padding: 0;
        }

        .member-tile {
            width: 127px;
            box-shadow: 0 0 1px #777;
        }

            .member-tile > .p-image {
                height: 100px;
                background-image: url('../Resx/images/Image_01.svg');
            }

        .scroll-item {
            width: 170px;
        }

            .scroll-item > .p-image {
                height: 130px;
            }

        .tag {
            font-size: 120%;
        }
    }

    @media screen and (max-width: 318px) {
        .sub-page > li > ul {
            padding: 0;
        }
    }

    @media screen and (max-width: 316px) {
        .member-tile {
            width: 200px;
            box-shadow: 0 0 1px #777;
        }

            .member-tile > .p-image {
                height: 140px;
                background-image: url('../Resx/images/Image_01.svg');
            }
    }