:root{
    overscroll-behavior: none;
    --slate: #344a53;
    --light-slate: #a3b6bd;
    --light-slate-alt: #58777a;
    --dark-blue: #1F3640;
    --darker-blue: #192c35;
    --light-blue: #7aaec4;
}

body{
    overflow-x: hidden;
    overscroll-behavior: none;
    background-color: var(--darker-blue);
}

.dark{
    background-color: var(--dark-blue);
}

body.dark p, body.dark div, body.dark span {
    color: #c1c1c1;
}
body.dark h1, body.dark h2, body.dark h3, body.dark h4 {
    color: #e2e2e2;
    font-weight: 400;
}

main{
    color: #616971;
    font-family: 'Mulish';
    line-height: 1.2;
    font-weight: 400;
    padding-top: 58px;
    overscroll-behavior: none;
}

body.scroll-nav main{
    padding-top: 0;
}

p{
    margin-top: 5px;
    margin-bottom: 15px;
}

.vh-100{
    min-height: 100vh;
}

.text-slate{
    color: var(--slate);
}

.text-offwhite{
    color: #e2e2e2;
}

.text-darker {
    color: var(--darker-blue) !important;
}

.bg-slate{
    background-color: var(--slate);
}

.bg-lightslate{
    background-color: var(--light-slate);
}

/* ============= HEADINGS ============= */

h1{
    padding: 0;
    margin: 0;
}
h1,h2,h3,h4{
    font-family: 'Alegreya';
    font-weight: 500;
    color: var(--slate);
}
.font-heading{
    font-family: 'Alegreya';
}

/* ============= UNDERLINES ============= */

.u{
    width: 30px;
    margin: auto;
    border-top: 1px solid #7a7a7a;
}
.underline-250{
    border-top: 2px solid var(--light-blue);
    margin: auto;
    max-width: 250px;
}
.underline-500{
    border-top: 2px solid var(--light-blue);
    width: 500px;
}
.underline{
    border-top: 2px solid var(--light-blue);
    margin: auto;
}

/* ============= HOMEPAGE ============= */

#social-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 8px;
    z-index: 50;
    background: var(--darker-blue);
    position: fixed;
    top: 40%;
    right: 0;
    border-radius: 8px 0 0 8px;
}
#social-links a {
    color: #e2e2e2;
}
#social-links a:hover, #social-links a:active {
    color: #cecece;
}

#bullets {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    height: 70px;
}

#bullets h2, #bullets svg {
    font-size: 1.2rem;
    color: var(--darker-blue);
    font-weight: 600;
    margin: 0;
}

@media (min-width: 450px){
    #bullets {
        gap: 15px;
    }
}

@media (min-width: 650px){
    #bullets {
        gap: 25px;
        height: 90px;
    }
    #bullets h2 {
        font-size: 1.4rem;
    }
}

@media (min-width: 900px){
    #bullets {
        gap: 50px;
    }
    #bullets h2 {
        font-size: 1.8rem;
    }
}

  
/*============= NAVIGATION =============*/

.navbar{
    font-family: 'Alegreya';
    font-weight: 700;
    z-index: 151;
    background-color: rgb(255, 255, 255);
    -webkit-box-shadow: 0px 7px 11px -4px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 7px 11px -4px rgba(0,0,0,0.1);
    box-shadow: 0px 7px 11px -4px rgba(0,0,0,0.1);
    min-height: 58px;
    width: 100%;
    --name-font-size: 2.5rem;
    --inner-margin: 0;
}

body.scroll-nav .navbar{
    z-index: 145;
    background-color: rgba(255, 255, 255, 0);
    -webkit-box-shadow: 0px 0px 8px 4px rgba(0,0,0,0);
    -moz-box-shadow: 0px 0px 8px 4px rgba(0,0,0,0);
    box-shadow: 0px 0px 8px 4px rgba(0,0,0,0);
    --name-font-size: 3.2rem;
    --inner-margin: 50px;
}

@media (max-width: 450px) {
    body.scroll-nav .navbar{
        --name-font-size: 2.5rem;
        --inner-margin: 30px;
    }
}

.navbar-brand h1, .navbar-brand:hover h1{
    color: #eaeaea !important;
    font-size: var(--name-font-size);
}

.navbar .container-fluid{
    margin-top: var(--inner-margin)
}

.nav-link{
    color: #ededed;
    display: inline-block;
    position: relative;
    font-family: 'Mulish';
    font-size: 0.95rem;
    letter-spacing: 0.05rem;
}
.nav-link:hover, .nav-link:focus{
    color: #ededed;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 7px;
    left: 0;
    background-color: var(--light-blue);
    transition: transform 0.25s ease-out;
}
.nav-link:hover::after {
    transform: scaleX(1);
}
.nav-link.open{
    background: linear-gradient(to right, var(--light-blue) 50%, var(--light-blue) 50%) no-repeat;
    background-size: 100% 2px;
    background-position: 0 29px;
}
.navbar-nav .dropdown-menu {
    background-color: var(--darker-blue);
}
@media (max-width: 1199.98px){
    .brand-center{
        width: 100%
    }  
    .navbar-collapse{
        background-color: var(--darker-blue);
    }
}

/*============= CAROUSEL =============*/

.carousel-item img{
    width: 100vw;
    max-height: calc(100vh - 58px);
    object-fit: cover;
    object-position: 50% 35%;
}
.carousel-item img.bottom{
    object-position: 50% 100%!important;
}
.carousel-item-prev,
.carousel-item-next,
.carousel-item.active{
    transition: transform 1.0s ease;
}

/*============= FOOTER =============*/

footer {
    background-color: var(--darker-blue);
    font-family: 'Mulish';
}
footer h2, footer h3, footer p, footer a, footer svg{
    color: var(--light-slate) !important;
    font-weight: 500 !important;
    transition: color 0.1s ease;
}
footer a:hover, footer svg:hover {
    color: var(--light-slate-alt) !important;
}

/*-- Bootstrap Mobile Gutter Fix --*/
.row, .container-fluid{
    margin-left: 0px !important;
    margin-right: 0px !important;
}

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

.gallery .image-container{
    padding: 8px;
    width: 100%;
}
.gallery img{
    width: 100%;
    border-radius: 3px;
    cursor: pointer;
}
.nav-tabs button h1{
    color: #686868!important;
}
.nav-tabs button.active h1{
    color: black!important;
}
.nav-tabs button .underline{
    border-top: 2px solid #c5c5c5;
}
.nav-tabs button.active .underline{
    border-top: 2px solid var(--light-blue);
}
.nav-tabs {
    border-bottom: 1px solid transparent;
}
.nav-tabs .nav-link {
    border: 0px solid transparent;
}

/* ====== BACKGROUND ====== */

/* Sam Kelly & TLB - B&W Stage Pic*/
.bg-1{
    background-image: url("/static/images/background/Sam Kelly & The Lost Boys - Photocredit Neil King1.jpg");
    background-position: 50% 50%;
}
.bg-1.blur{
    background-image: url("/static/images/background/Sam Kelly & The Lost Boys - Photocredit Neil King small.jpg");
    background-position: 50% 50%;
}
/* Sam Kelly Looe 3*/
.bg-2{
    background-image: url("/static/images/background/Looe 2015 3.jpg");
    background-position: 30% 9lvh;
}

/* Sam Kelly Looe 2*/
.bg-3{
    background-image: url("/static/images/background/Looe 2015 2.jpg");
    background-position: 20% 20%;
}
/* Sam B&W in studio */
#hero{
    object-fit: cover;
    object-position: 50% 20%;
    height: calc(100vh - 70px);
    width: 100vw;
}

@media (min-width: 650px){
    #hero{
        height: calc(100vh - 90px);
    }
}

.fixed-bg{
    width: 100vw;
    height: 100lvh;
    z-index: -1;
    position: fixed;
    left: 0;
    top: 0;
    background-size: cover;
}

.fixed-bg-spacer{
    height: 40lvh;
}

@media (max-aspect-ratio: 1.3/1){
    .fixed-bg-spacer{
        height: 32lvh;
    }
    .full{
        background-image: none!important;
    }
}

/*===== NAVBAR TOGGLE =====*/

.nav-toggle {
    background: transparent;
    border: 1px solid transparent;
    margin: 7px 0;
    padding: 10px
}
.nav-toggle:focus {
    outline-width: 0;
}
.nav-toggle [class*='bar-'] {
    background: #e9e9e9;
    display: block;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .2s ease all;
    transition: .2s ease all;
    border-radius: 2px;
    height: 2px;
    width: 33px;
    margin-bottom: 6px;
}
.nav-toggle .bar-bot {
    margin-bottom: 0;
}
.opened .bar-top {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 15% 15%;
            transform-origin: 15% 15%;
}
.opened .bar-mid {
    opacity: 0;
}
.opened .bar-bot {
    -webkit-transform: rotate(45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 15% 95%;
            transform-origin: 15% 95%;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    border: none;
    box-shadow: none;
}
.navbar-spacer{
    width: 55px;
    height: 40px;
}

/*======== BUTTONS ============*/

/* Transparent bg with black text, blue bg with white text on hover */
.btn-1{
    border-radius: 3px;
    border-color: #3a3a3a;
    font-weight: 600;
}
.btn-1:hover{
    border-color: var(--slate);
    background-color: var(--slate);
    color: #fff;
}
/* Blue bg with white text, darken on hover */
.btn-2{
    color: #fff;
    background-color: var(--slate);
    border-color: var(--slate);
    border-radius: 0px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-size: 0.95rem;
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-2:hover, .btn-2:active{
    border-color: var(--slate) !important;
    background-color: var(--darker-blue) !important;
    color: #fff !important;
}
@media (hover: none) {
    .btn-2:hover{
        background-color: var(--slate) !important;
    }
}
.btn-2-dark:hover, .btn-2-dark:active{
    border-color: var(--slate) !important;
    background-color: #435d68 !important;
    color: #fff !important;
}

.btn-2-dark.inactive{
    border-color: #202c31 !important;
    background-color: #202c31 !important;
    color: #d1d1d1 !important;
}
/* Transparent bg with blue text, double blue border, border fills on hover */
.btn-3{
    background-color: #ffffff00;
    color: var(--slate) !important;
    font-family: 'Alegreya';
    text-transform: uppercase;
    border: solid 2px #4c636c !important;
    border-radius: 0;
    outline: solid 2px #4c636c !important;
    outline-offset: -6px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.00rem;
    transition: outline ease 0.4s;
}
.btn-3:hover, .btn-3:active{
    color: var(--slate) !important;
    border: solid 2px var(--slate) !important;
    outline: solid 6px var(--slate) !important;
}
.btn-3:disabled{
    filter: opacity(60%)
}
@media (hover: none) {
    .btn-3:hover{
        color: var(--slate) !important;
        border: solid 2px #4c636c !important;
        outline: solid 2px #4c636c !important;
    }
}

/* Transparent bg with white text, white double border */
.btn-4{
    background-color: #ffffff00;
    color: #fff;
    font-family: 'Mulish';
    text-transform: uppercase;
    border: 4px double #fff;
    border-radius: 0px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
}
.btn-4:hover, .btn-4:active, .btn-4.inactive{
    border: 4px double #fff;
    border-radius: 0px;
    border-color: #c5c5c5;
    color: #c2c2c2;
}
.btn-4-sm{
    font-size: 1.2rem;
}

/* Links */
.link-1{
    font-size: 0.9em;
    color: rgb(83, 83, 83);
    text-decoration: none;
    font-weight: 600;
    padding: 0;
    display: inline-block;
    position: relative;
}
.link-1:hover{
    color: rgb(44, 44, 44);
    font-weight: 600;
}
.link-1::after {
    color: rgb(44, 44, 44);
    font-weight: 600;
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 3px;
    left: 0;
    background-color: var(--light-blue);
    transition: transform 0.2s ease-out;
}
.link-1:hover::after {
    transform: scaleX(1);
}
@media (hover: none){
    .link-1{
        font-weight: 600;
        border-bottom: 2px solid var(--light-blue) !important;
        color: rgb(95, 95, 95);
    }
    .link-1:after{
        display: none;
    }
    .link-1.link-1-dark{
        border-color: var(--darker-blue) !important;
    }
}

.link-1.link-1-dark, .link-1.link-1-dark:hover {
    color: var(--darker-blue);
}

.link-1.link-1-dark::after {
    color: var(--darker-blue);
    background-color: var(--darker-blue);
}

/*======== NEWS ============*/

.news.card p, .news.card div, .shop.card p, .shop.card div{
    color: #616971 !important;
}

.news.card h4, .news.card h3, .shop.card h4, .shop.card h3{
    font-weight: 500 !important;
}

@media (min-width: 992px){
    .news-image{
        height: 100%;
        object-fit: cover;
    }
}
@media (max-width: 991px){
    .news-image{
        max-width: 100%;
    }
}

@media (min-width: 1401px){
    .news-image-home{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
@media (max-width: 1400px){
    .news-image-home{
        max-width: 100%
    }
}

.news-image-container{
    position: relative;
}

.news-image-container .svg-container{
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    border: solid rgba(236, 236, 236, 0.4) 1px;
    border-radius: 3px;
    padding: 4px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.news-image-container svg{
    color: rgb(204, 204, 204);
    width: 30px;
    height: 30px;
}

@media (hover: hover) and (pointer: fine){
    .news-image-container .svg-container{
        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(8px);
        border: solid rgba(236, 236, 236, 0.4) 1px;
        border-radius: 3px;
        padding: 4px;
        position: absolute;
        bottom: 10px;
        right: 10px;
        opacity: 0;
        transition: opacity ease-in-out 0.12s;
    }
    .news-image-container:hover{
        cursor: pointer;
    }
    .news-image-container svg{
        color: rgb(236, 236, 236);
        width: 30px;
        height: 30px;
    }
    .card.news:hover .svg-container{
        opacity: 1;
    }
}
.news-detail-image{
    max-height: 60vh;
    cursor: pointer;
}
.news-detail .arrow svg{
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border-radius: 5px;
    border: solid rgba(236, 236, 236, 0.4) 1px;
    color: rgb(223, 223, 223)!important;
}
.news-detail .arrow:hover svg{
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255)!important;
}

/* ====== FULLSCREEN IMAGES ====== */

.fs-image-container.show{
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
    position: fixed;
    height: calc(100vh - 58px);
    width: 100vw;
    z-index: 100;
}
.fs-image{
    position: fixed;
    max-height: 90vh;
    max-width: 100vw;
    z-index: 101;
}
.fs-image-container .svg-container{
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 102;
}
.fs-image-container svg{
    height: 40px;
    width: 40px;
    color: white;
    cursor: pointer;
    z-index: 103;
    filter: drop-shadow(0 0 5px black)
}
@media (hover: none){
    .fs-image-container svg{
        height: 60px;
        width: 60px;
    }
}
body.scroll-nav .fs-image-container.show{
    height: 100vh;
    z-index: 160;
}

/* ====== LOADING OVERLAY ====== */

#loading{
    position: fixed;
    width: 100vw;
    height: 100vh;
    margin-top: 58px;
    z-index: 150;
    background-color: var(--darker-blue);
    color: #6c878a;
}
#loading.visible{
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}
#loading.hidden{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.4s, opacity 0.4s linear;
}
#loading.hidden .spinner-border{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s linear;
}
body.scroll-nav #loading{
    margin-top: 0;
}

/* ====== SCROLL DOWN ====== */

.scroll-container{
    bottom: 30px;
    right: 50px;
    cursor: pointer;
}
.scroll{
    opacity: 1;
    -webkit-transition: all .5s ease-in 3s;
    transition: all .5s ease-in 3s;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    border: solid rgba(236, 236, 236, 0.4) 1px;
    border-radius: 3px;
    z-index: 140;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.scroll:before {
    position: absolute;
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    content: "";
    border: 1px solid rgb(204, 204, 204);
    border-width: 0px 0 2px 2px;
}
@keyframes bounce {
    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    60% {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}
.scroll-down:before {
    top: calc(50% - 15px);
    transform: rotate(-45deg);
}
@media (max-aspect-ratio: 1/1){
    .scroll-down{
        display: none;
    }
}
.scroll-up:before {
    top: calc(50% - 5px);
    transform: rotate(135deg);
}

/* ====== AUTH ====== */

.auth form{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.auth ul.errorlist{
    list-style: none;
    padding: 0;
    margin-top: 1em;
    color: red;
}

/* ====== TOASTIFY ====== */

.toast-close:hover{
    opacity: 85%;
}

.toastify{
    padding: 1rem 0.5rem 1rem 1rem !important;
}

@media only screen and (max-width: 480px) {
    .toastify-left, .toastify-right {
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 95vw !important;
    }

    .toast-close{
        padding: 0.75rem !important;
        align-items: center;
    }
}

/* ====== ABOUT ====== */

#bio img {
    max-width: 30%;
    height: auto;
    display: block;
}

@media (max-width: 767px) {
    #bio p:first-child {
        margin-bottom: 0.4rem;
    }
    #bio.active p:first-child {
        margin-bottom: 15px;
    }
    #bio p:not(:first-of-type) {
        display: none;
    }
    #expand-bio {
        display: flex;
    }
    #bio.active p {
        display: block;
    }
    #bio img {
        max-width: 50%;
    }
    #bio:not(.active) img:not(:first-of-type) {
        display: none;
    }
    .quote .text {
        font-size: 0.9rem;
    }
}
@media (min-width: 768px) {
    #expand-bio{
        display: none;
    }
    .quote>div {
        border-left: 2px solid var(--light-blue);
    }
}


.project-image{
    max-width: 100%;
    max-height: 100%;
}

@media (min-width: 992px){
    .project-image{
        max-width: 20vw;
    }
}

.project.bg-white p {
    color: #616971;
}
.project.bg-white h1,.project.bg-white h2,.project.bg-white h3,.project.bg-white h4 {
    color: var(--slate);
    font-weight: 500;
}

/* ====== SHOWS ====== */

.bg-1.shows, .shows-list{
    min-height: 50vh;
}

.shows-list{
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    background-color: #000000a6;
}

.shows-list p, .shows-list h1, .shows-list h3, .shows-list h4, .shows-list h5, .shows-list h6{ 
    color: white !important;
}

.shows-page .shows-list, .news-detail{
    min-height: calc(100lvh - 321px)
}

@media (min-width: 576px){
    .shows-page .shows-list, .news-detail{
        min-height: calc(100lvh - 224px)
    }
}

@media (min-width: 768px){
    .shows-page .shows-list, .news-detail{
        min-height: calc(100lvh - 280px)
    }
}
/*=========================*/

iframe{
   max-width: 100%;
   border-radius: 5px;
}

.card{
    border-radius: 0px;
    border-color: #4c636c;
    margin-bottom: 1rem;
}

.pagination{
    color: #fff;
    background-color: var(--slate);
    border-radius: 0;
}
.pagination a{
    color: #fff;
}
.pagination a:hover{
    color: #c1c1c1;
}

@media (max-width: 767px){
    .w-md-100{
        width: 100%
    }
}

.form-control{
    margin-bottom: 16px;
}

label{
    margin: 0 0 5px 5px;
}

.display-5{
    margin-bottom: 20px;
}

.fw-demisemibold{
    font-weight: 500 !important;
}

.fs-small{
    font-size: 0.95rem;
}

.banner-image{
    width: 100%;
    max-height: 66vh;
    object-fit: cover;
}