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

body{
    background-color: #2e2e2e;
    color: #ffffff;
    overflow-x: hidden;
    font-family: 'Mulish';
}

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

h1{
    padding: 0;
    margin: 0;
}
h2{
    font-size: 2rem;
}
h4{
    font-size: 1.2rem;
}
h1,h2,h3,h4{
    font-family: 'Alegreya';
    font-weight: 500;
    color: white;
}
.font-heading{
    font-family: 'Alegreya';
}

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

.u{
    width: 30px;
    border-top: 1px solid #7a7a7a;
}
.underline-250{
    border-top: 2px solid #7aaec4;
    max-width: 250px;
}
.underline-500{
    border-top: 2px solid #7aaec4;
    max-width: 500px;
}
.underline{
    border-top: 2px solid #7aaec4;
}

/* ============= TOP BAR HEADER ============= */

.top-bar{
    background: #7aaec4;
    height: 2.8rem;
    padding: .5rem 0;
}
.top-bar a{
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
}
.top-bar a:hover, .top-bar a:active{
    color: rgb(223, 223, 223);
}
  
/*============= NAVIGATION =============*/
  
.navbar{
    font-family: 'Alegreya';
    font-weight: 500;
    z-index: 1;
    -webkit-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.3);
}
.nav-link{
    padding: 0;
    color: #cecece;
    display: inline-block;
    position: relative;
}
.nav-link:hover{
    color: #cecece;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 8px;
    left: 0;
    background-color: #7aaec4;
    transition: transform 0.25s ease-out;
}
.nav-link:hover::after {
    transform: scaleX(1);
}

/*============= CAROUSEL =============*/
  
.carousel-inner{
    max-height: 43rem!important;
}

/*---Change Carousel Transition Speed --*/
.carousel-item-prev,
.carousel-item-next,
.carousel-item.active{
    transition: transform 1.2s ease;
}

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

footer{
    background-color: #212529;
}
footer h2,footer h3,footer p,footer a, footer svg{
    color: #9b9b9b;
    transition: color 0.1s ease;
}
footer svg:hover, footer a:hover {
    color: #808080;
}
  
/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

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

.fixed-background{
    min-height: 32vh;
}
#bg-1{
    background-image: url("/static/images/the_lost_boys/5.jpg");
    background-size: cover;
    background-position: 50% 100%;
}
#bg-2{
    /* background-image: url("/static/images/the_lost_boys/sk-1.jpg"); */
    background-image: url("/static/images/the_lost_boys/1.jpg");
    background-size: cover;
    background-position: 60% 0%;
}
#bg-3{
    background-image: url("/static/images/background/Sam Kelly & The Lost Boys - Photocredit Neil King small.jpg");
    background-size: cover;
    background-position: 50% 60%;
}

@media (hover: hover) and (pointer: fine){
    #bg-1,#bg-2,#bg-3{
        background-attachment: fixed;
    }
    .fixed-background{
        min-height: 40vh;
    }
}
@media (max-aspect-ratio: 1.3/1){
    .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: #a0a0a0;
    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;
}


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

.btn-1{
    border-radius: 3px;
    border-color: #3a3a3a;
    font-weight: 600;
}
.btn-1:hover{
    border-color: #344a53;
    background-color: #344a53;
    color: #fff;
}
.btn-2{
    color: #000;
    background-color: #fff;
    border-radius: 3px;
    border-color: #fff;
    font-weight: 600;
}
.btn-2:hover{
    border-color: #d3d3d3;
    background-color: #d3d3d3;
    color: #000;
}
.btn-3{
    color: #fff;
    background-color: #344a53;
    border-radius: 3px;
    border-color: #344a53;
    font-weight: 600;
}
.btn-3:hover{
    border-color: #344a53;
    background-color: #192c35;
    color: #fff;
}
.btn-4{
    background-color: #ffffff00;
    color: #fff;
    font-family: 'Alegreya';
    text-transform: uppercase;
    border: 4px double #fff;
    border-radius: 0px;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.02rem;
}
.btn-4:hover, .btn-4:active{
    border: 4px double #fff;
    border-radius: 0px;
    border-color: #c5c5c5;
    color: #c2c2c2;
}
.btn-4-sm{
    font-size: 1.2rem;
}

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

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

.venue{
    font-size: 1.3rem;
    font-weight: 500;
    color: #e7e7e7;
    letter-spacing: -0.02rem;
}
.date{
    font-size: 0.95rem;
}
.info{
    font-size: 0.95rem;
    color: #d6d6d6;
}

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

.shows-list{
    backdrop-filter: blur(3px);
    background-color: #00000094;
}

/*======== SHOP ============*/

@media (max-width: 767px){
    .shop-item{
        width: 100%;
    }
}

@media (min-width: 768px){
    .shop-item{
        width: 50%;
    }
}

.text-grey{
    color: #d6d6d6;
}
a.text-grey:hover{
    color: #b1b1b1;
}

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

/* ====== 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;
    }
}