/*Begin Band Together Styles*/

@font-face {
    font-family: 'Alba';
    font-style: normal;
    font-weight: normal;
    src: local('Alba'), url('../fonts/ALBA____.woff') format('woff');
}


@font-face {
    font-family: 'Alba Matter';
    font-style: normal;
    font-weight: normal;
    src: local('Alba Matter'), url('../fonts/ALBAM___.woff') format('woff');
}


@font-face {
    font-family: 'Alba Super';
    font-style: normal;
    font-weight: normal;
    src: local('Alba Super'), url('../fonts/ALBAS___.woff') format('woff');
}

:root {
    --purple: #7d6c98;
    --gradient: linear-gradient(90deg, rgba(125, 108, 152, 1) 0%, rgba(26, 173, 124, 1) 100%);
    --gradient-diagonal: linear-gradient(135deg, rgba(125, 108, 152, .75) 0%, rgba(26, 173, 124, .75) 100%);
    --gradient-solid: linear-gradient(135deg, rgba(125, 108, 152, 1) 0%, rgba(26, 173, 124, 1) 100%);
    --green: #1aad7c;
}

/*Basic Styles*/

html {
    scroll-behavior: smooth;
    /*scroll-padding-top: 117px;*/
}

body {
    font-family: 'Montserrat', sans-serif;
}

body.footer-visible .bar.in {
    opacity: 0;
    transform: translateX(102%);
}

/**, *::after, *::before {
    outline: 1px solid red;
}*/

#trigger {
    height: 0;
    top: 25vh
}

section {
    position: relative;
    padding: 3rem 0 5rem 0;
}

section:last-child {
    padding-bottom: 5.5rem;
}

h1.serif-regular {
    font-size: 3rem;
}

.section-bg {
    background-image: url(../images/band.png);
    background-position: center;
    background-size: 33%;
    background-repeat: no-repeat;
    opacity: .125;
    pointer-events: none;
}


/*Utilities*/

.bg-purple {
    background-color: var(--purple) !important;
}

.bg-green {
    background-color: var(--green) !important;
}

.bg-bt-gradient{
    background-image: var(--gradient-diagonal);
}

.border-purple {
    border-color: var(--purple) !important;
}

.border-green {
    border-color: var(--green) !important;
}

.green {
    color: var(--green) !important;
}

.purple {
    color: var(--purple) !important;
}

.break {
    width: 3.5rem;
    height: .375rem !important;
    margin: .625rem auto .75rem auto;
    opacity: .75;
    background-image: var(--gradient);
    border-radius: .25rem;
}

.serif {
    font-family: 'Alba Super', sans-serif;
}

.serif-regular {
    font-family: 'Alba', sans-serif;
}

.serif-2 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
}

.title {
    letter-spacing: -.099rem;
}

.text-outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--purple);
    text-stroke: 2px var(--purple);
}

.mission .text-outline {
    -webkit-text-stroke: 2px var(--purple);
    text-stroke: 2px var(--purple);
}

.gradient-text {
    color: transparent;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-image: var(--gradient);
}

.max {
    max-width: max-content;
}

.text-small {
    font-size: .875rem;
}

.carousel .text-small {
    font-size: .75rem;
}

.special {
    position: relative;
    max-width: max-content;
}

.special::after {
    content: "";
    display: block;
    width: 101%;
    height: 3px;
    background-image: var(--gradient);
    border-radius: .25rem;
    margin-top: -.1375rem;
}

.special.double::after,
.special.double::before {
    content: "";
    display: flex;
    border-top: 2px solid var(--purple);
    opacity: .5;
    align-self: center;
    flex: 1 1 auto;
}

.inset{
    inset:0;
    margin: 0;
}

.fit{
    object-fit: cover;
    object-position: center;
}

.z--1{
    z-index: -1;
}

.z-0{
    z-index: 0;
}

.z-1{
    z-index: 1;
}

.z-2{
    z-index: 2;
}

/*Transitions and Animations*/

.appear {
    /*transform: translateY(6rem);*/
    opacity: 0;
    transition: opacity 1s ease .75s;
}

.appear.in {
    opacity: 1;
    /*transform: translateY(0);*/
}

.long {
    line-height: 1;
}

/*Topbar stuff / Text shadow stuff*/

button[type="submit"] {
    text-shadow: 1px 1px rgb(0 0 0 / 13%);
}


/*Menu Stuff*/

nav.bg-dark,
footer.bg-dark {
    background-color: #0e0000 !important;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28121, 299, 38, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-toggler {
    border-color: rgb(121, 299, 38, .55);
    color: rgb(213 194 138 / 80%);
    font-size: 2.18rem;
}

.navbar-nav .nav-item .nav-link {
    position: relative;
    max-width: max-content;
    font-size: 1.125rem;
    font-weight: 700;
    color: rgb(255 255 255 / .85);
}

.navbar-nav .nav-item .nav-link:not(.trial)::before {
    position: absolute;
    content: '';
    height: .1325rem;
    background-color: var(--green);
    width: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s ease;
}

.nav-link.trial {
    font-family: 'Montserrat', sans-serif;
    color: rgb(255 255 255 / 1);
    scale: 1;
    transition: scale .35s ease-in-out;
}

.navbar-nav .nav-item .nav-link.trial:hover {
    scale: 1.03;
}

.collapse.show .nav-link.trial{
    animation: buttonFlash 1s 3 .2s;
}

.navbar-nav .nav-item .nav-link.active::before,
.navbar-nav .nav-item .nav-link:active::before,
.navbar-nav .nav-item .nav-link:hover::before {
    transform: scaleX(1.0);
}

.menu-socials a{
    color: rgb(255 255 255 / .85);
}

/*Banner Stuff*/

@keyframes buttonFlash {
    0% {
        transform: translateX(0%) scale(1.0);
    }

    50% {
        transform: translateX(0%) scale(1.05);
    }

    100% {
        transform: translateX(0%) scale(1.0);
    }
}

.banner {
    --bs-aspect-ratio: calc(3 / 4 * 100%);
}

.banner img {
    object-fit: cover;
    object-position: center top;
    filter: grayscale(1);
}

.banner img[src="images/dino.webp"],
.banner img[src="images/outdoor-concert.webp"]{
    object-position: center 40%;
}

.banner .carousel{
    /*transform: translate(0%, 0%);
    transition: transform ease;*/
    z-index: 0;
}

.carousel-item{
    transform: translate(0%, 0%);
    transition: opacity .6s ease-in-out, transform 0s ease;
}

.banner-text {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, .25) 100%);
    z-index: 2;
}

.banner-text h1 {
    font-size: 27.85px;
}

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

.banner-text h1,
.banner-text h2 {
    text-shadow: 2px 1px 3px rgb(0 0 0 / 75%);
    transform: translate(0%, 3rem);
    opacity: 0;
    transition: all 1s ease;
    font-weight: 700;
}

.banner-text.in h1,
.banner-text.in h2 {
    transform: translate(0%, 0rem);
    opacity: .9;
}

.banner-text a {
    font-size: .875rem;
    background-color: rgb(26 173 124 / .75) !important;
    margin-top: 1.25rem !important;
    border-radius: .125rem;
    color: rgb(255 255 255 / .9) !important;
    transform: translateX(-400%);
    opacity: 0;
    text-shadow: 1px 1px 2px rgb(0 0 0 / .66667);
    transition: all .5s ease-in-out;
    scale: 1;
}

.banner-text.in a.in {
    transform: translateX(0%);
    opacity: 1;
    animation-name: buttonFlash;
    animation-duration: .5s;
    animation-iteration-count: 3;
    animation-delay: .75s;
}

.banner-text a:hover {
    background-color: rgb(26 173 124 / .9) !important;
    scale: 1.05;
}

.banner-color{
    background-image: var(--gradient-solid);
    inset: 0;
    margin-top: 0;
    z-index: 1;
    mix-blend-mode: color;
}


.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.modal-header .btn-close{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}

#videoCarousel .carousel-item p{
    opacity: 0;
}

#videoCarousel .carousel-item.active p{
    opacity: .9;
}


/*Gallery Stuff*/

.pics .appear{
    transition-delay: 0s;
}

.thumb {
    transform: scale(0);
    transition: transform .75s ease;
    transform-origin: center;
}

.appear.in .thumb {
    transform: scale(1.0);
}

.thumb.ratio {
    background-size: 110%;
    background-position: center;
}

.thumb:hover {
    cursor: pointer;
}

.thumb a {
    /*    background-color: rgb(213 194 138 / 75%);*/
    transform: translateX(106%);
    transition: transform ease-in-out .25s .25s;
    z-index: 2;
    background-image: var(--gradient-diagonal);
}

.thumb:hover a,
.thumb a.clicked {
    transform: translateX(0);
}

#videoCarouselModal {
    background-color: rgb(0, 0, 0, .7);
}

.video-holder {
    aspect-ratio: 16 / 9;
}

.pics {
    scroll-snap-type: x proximity;
}

.pics .col-7 {
    scroll-snap-align: start;
}

#scroll-prompt {
    font-size: .8rem;
    line-height: 1.1;
}

#scroll-prompt::before,
#scroll-prompt::after {
    content: '\F12F';
    font-family: 'bootstrap-icons';
    color: var(--green);
    font-size: 1.5rem;
    margin: 0 .5rem;
}

#scroll-prompt::after {
    transform: rotate(180deg);
}

/*Form Stuff*/

.mt-6 {
    display: none;
}

input,
textarea {
    background-color: rgb(255, 255, 255, .25) !important;
}

label:not([for="appointment-time"]) {
    display: none;
}

.alert-success {
    background-color: var(--green);
    border-color: var(--ssLight) !important;
}

.spinner-border.fade:not(.show){
    animation-play-state: paused;
}

.spinner-border.visually-hidden:not(.fade){
    animation-play-state: paused;
}

#galleryCarouselModal .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

#responseModal .error .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f5c2c7'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.map {
    position: relative;
    aspect-ratio: 16 / 9;
}

.map iframe {
    filter: grayscale(1);
}

.map::before{
    content: '';
    position: absolute;
    background-image: var(--gradient-solid);
    inset: 0;
    margin-top: 0;
    opacity: .33;
    mix-blend-mode: color;
    z-index: 1;
    pointer-events: none;
}


/*Footer stuff*/

footer {
    border-top: .3125rem solid var(--green);
}

/*Bottom bar stuff*/

.bar {
    opacity: 0;
    transform: translateX(102%);
    transition: all .5s ease;
    pointer-events: none;
    right: 0 !important;
    bottom: 1rem;
    z-index: 100;
}

.bar.in {
    opacity: .85;
    transform: translateX(0);
    pointer-events: all;
}

.bar-icon {
    background-color: #0e0000;
}


/*Media Queries*/

/*// Small devices (landscape phones, 576px and up)*/
@media (max-width: 575.98px) {

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 173px;
    }

    .container {
        width: 90%;
    }

    .fs-3 {
        font-size: 2rem !important;
    }

}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

    #topbar .phone {
        font-size: 1rem;
    }

    ul.two-column {
        font-size: 1rem;
    }

    .banner {
        --bs-aspect-ratio: calc(3.25 / 6 * 100%);
    }

    .banner-text h1 {
        font-size: 42px;
    }

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

    .banner a {
        font-size: 1.25rem;
        margin-top: 1.875rem !important;
    }

    .section-bg {
        background-size: 60%;
    }

    .carousel .text-small {
        font-size: .875rem;
    }

    #scroll-prompt {
        font-size: 1rem;
    }
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

    .navbar-nav .nav-item .nav-link {
        font-size: .8rem;
    }

    .navbar-nav .nav-item .nav-link.trial {
        font-size: .75rem;
        animation: none;
    }

    .banner {
        --bs-aspect-ratio: calc(9 / 21 * 100%);
    }

    .section-bg {
        background-size: 33%;
    }

    h1.serif-regular {
        font-size: 4rem;
    }
}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

    .banner {
/*        background-attachment: fixed;*/
        --bs-aspect-ratio: calc(9 / 25 * 100%);
    }

    .banner-text h1 {
        font-size: 60px;

    }

    .banner-text h2 {
        font-size: 40.2px;

    }

    .banner a {
        font-size: 1.5rem;
        margin-top: 2.5rem !important;
    }

    .navbar-nav .nav-item .nav-link,
    .navbar-nav .nav-item .nav-link.trial {
        font-size: .8rem;
    }

    .menu-socials .fs-5{
        font-size: 1rem !important;
    }
}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
    .navbar-nav .nav-item .nav-link,
    .navbar-nav .nav-item .nav-link.trial {
        font-size: 1rem;
    }
    .menu-socials .fs-5{
        font-size: 1.25rem !important;
    }
}