/* ==========================================
   LAIDBACK OLD SIX
   STYLE.CSS
   ========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#0d0d0d;

    color:#ffffff;

    font-family:'Oswald',sans-serif;

    line-height:1.6;

}

/* ===============================
   LINKS
================================ */

a{

    color:white;

    text-decoration:none;

    transition:.3s;

}

a:hover{

    color:#c00000;

}

/* ===============================
   AFBEELDINGEN
================================ */

img{

    max-width:100%;

    display:block;

}

/* ===============================
   CONTAINER
================================ */

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:80px 0;

}

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

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:rgba(0,0,0,.90);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 50px;

    z-index:999;

    border-bottom:2px solid #990000;

}

.logo img{

    height:70px;

}

.navbar ul{

    display:flex;

    list-style:none;

    gap:30px;

}

.navbar a{

    font-size:18px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.navbar a:hover{

    color:#d40000;

}

.active{

    color:#d40000;

}

.backstage{

    background:#990000;

    padding:10px 20px;

    border-radius:25px;

}

.backstage:hover{

    background:white;

    color:black;

}

/* ===============================
   HERO
================================ */

.hero{

    height:100vh;

    background:url("../images/hero.jpg") center center;

    background-size:cover;

    position:relative;

}

.overlay{

    width:100%;

    height:100%;

    background:rgba(0,0,0,.65);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.hero-logo{

    width:240px;

    margin-bottom:25px;

}

.hero h1{

    font-family:'Bebas Neue',sans-serif;

    font-size:90px;

    letter-spacing:5px;

}

.hero h2{

    color:#d40000;

    font-size:36px;

    margin-top:15px;

}

.hero p{

    margin-top:20px;

    font-size:24px;

}

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

.button{

    display:inline-block;

    margin-top:35px;

    padding:16px 38px;

    background:#d40000;

    color:white;

    border-radius:40px;

    transition:.3s;

    font-size:20px;

}

.button:hover{

    background:white;

    color:black;

    transform:translateY(-3px);

}

.button.rood{

    background:white;

    color:black;

}

.button.rood:hover{

    background:#d40000;

    color:white;

}

/* ===============================
   TITELS
================================ */

h2{

    font-size:52px;

    font-family:'Bebas Neue';

    letter-spacing:3px;

    margin-bottom:35px;

    text-align:center;

}

h3{

    font-size:30px;

    margin-top:15px;

}

/* ===============================
   PARAGRAFEN
================================ */

p{

    font-size:20px;

    margin-bottom:20px;

}

/* ===============================
   CARDS
================================ */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    margin-top:50px;

}

.card{

    background:#181818;

    padding:25px;

    border-radius:12px;

    text-align:center;

    transition:.4s;

    border:1px solid #2b2b2b;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 0 25px rgba(212,0,0,.45);

}

.card img{

    border-radius:10px;

}

/* ===============================
   INTRO
================================ */

.intro{

    max-width:900px;

    margin:auto;

    text-align:center;

}
/* ==========================================
   AGENDA
========================================== */

.agenda-home{

    background:#111;

}

.agenda-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#181818;

    margin-bottom:25px;

    padding:25px;

    border-left:6px solid #b30000;

    border-radius:8px;

    transition:.3s;

}

.agenda-item:hover{

    background:#202020;

    transform:translateX(8px);

}

.agenda-datum{

    font-size:34px;

    font-family:'Bebas Neue',sans-serif;

    color:#d40000;

}

.agenda-locatie{

    font-size:22px;

}

/* ==========================================
   BAND
========================================== */

.band-home{

    background:#0b0b0b;

}

.band-home .card{

    overflow:hidden;

}

.band-home .card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.5s;

}

.band-home .card:hover img{

    transform:scale(1.08);

}

.band-home h3{

    margin-top:20px;

    color:#d40000;

}

/* ==========================================
   MUZIEK
========================================== */

.muziek-home{

    background:#141414;

}

audio{

    width:100%;

    margin-top:20px;

}

.track{

    background:#181818;

    border-radius:10px;

    padding:20px;

    margin-bottom:30px;

}

/* ==========================================
   VIDEO'S
========================================== */

.video-home{

    background:#101010;

}

.video-home img{

    width:100%;

    height:230px;

    object-fit:cover;

    border-radius:10px;

}

.video-home .card{

    overflow:hidden;

}

/* ==========================================
   GALERIJ
========================================== */

.gallery-home{

    background:#080808;

}

.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

}

.gallery img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:10px;

    transition:.4s;

    cursor:pointer;

}

.gallery img:hover{

    transform:scale(1.05);

    box-shadow:0 0 25px #b30000;

}

/* ==========================================
   BOEKING
========================================== */

.booking{

    background:#141414;

    text-align:center;

}

.booking p{

    max-width:800px;

    margin:auto;

}

/* ==========================================
   CONTACT
========================================== */

.contact{

    background:#111;

}

.contact-form{

    max-width:700px;

    margin:auto;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px;

    margin-bottom:20px;

    background:#1d1d1d;

    color:white;

    border:1px solid #333;

    border-radius:8px;

    font-size:18px;

}

.contact-form textarea{

    min-height:180px;

    resize:vertical;

}

.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border:1px solid #d40000;

}

/* ==========================================
   SOCIAL
========================================== */

.social{

    background:#090909;

    text-align:center;

}

.socialbuttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin-top:40px;

}

.socialbuttons a{

    background:#d40000;

    color:white;

    padding:15px 35px;

    border-radius:40px;

    transition:.3s;

}

.socialbuttons a:hover{

    background:white;

    color:black;

}

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

footer{

    background:#000;

    border-top:2px solid #b30000;

}

.footer{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:60px 0;

    text-align:center;

}

.footer img{

    width:180px;

    margin:auto;

    margin-bottom:20px;

}

.footer hr{

    border:none;

    height:1px;

    background:#333;

    margin:30px 0;

}

.footer p{

    color:#bdbdbd;

}

/* ==========================================
   LOGIN
========================================== */

.login-box{

    max-width:420px;

    margin:120px auto;

    background:#181818;

    padding:40px;

    border-radius:12px;

    text-align:center;

    box-shadow:0 0 30px rgba(180,0,0,.35);

}

.login-box input{

    width:100%;

    padding:15px;

    margin:20px 0;

    border:none;

    border-radius:6px;

    background:#252525;

    color:white;

    font-size:18px;

}

.login-box button{

    width:100%;

}

/* ==========================================
   ANIMATIES
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero h1,

.hero h2,

.hero p,

.button{

    animation:fadeUp 1.2s ease;

}

.card{

    animation:fadeUp .8s ease;

}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#a00000;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#d40000;

}
/* ==========================================
   HERO EFFECTEN
========================================== */

.hero{

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.75)
    );

    z-index:1;

}

.overlay{

    position:relative;

    z-index:2;

}

.hero-logo{

    filter:drop-shadow(0 0 20px rgba(200,0,0,.7));

    animation:logoFloat 4s ease-in-out infinite;

}

@keyframes logoFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ==========================================
   GLOW EFFECTEN
========================================== */

.button{

    box-shadow:0 0 20px rgba(180,0,0,.35);

}

.button:hover{

    box-shadow:0 0 35px rgba(255,0,0,.75);

}

.backstage{

    box-shadow:0 0 20px rgba(200,0,0,.5);

}

.backstage:hover{

    box-shadow:0 0 35px rgba(255,255,255,.7);

}

.card:hover{

    border:1px solid #c00000;

}

/* ==========================================
   TITELS
========================================== */

h1{

    text-shadow:

        0 0 10px rgba(255,255,255,.25),

        0 0 25px rgba(200,0,0,.4);

}

h2{

    text-shadow:

        0 0 8px rgba(255,0,0,.25);

}

/* ==========================================
   FOTO EFFECT
========================================== */

.gallery img{

    transition:.45s;

}

.gallery img:hover{

    transform:scale(1.05) rotate(-1deg);

}

/* ==========================================
   VIDEO EFFECT
========================================== */

.video-home .card{

    position:relative;

}

.video-home .card::after{

    content:"▶";

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    font-size:70px;

    color:white;

    opacity:0;

    transition:.4s;

}

.video-home .card:hover::after{

    opacity:1;

}

.video-home .card img{

    transition:.4s;

}

.video-home .card:hover img{

    filter:brightness(.55);

}

/* ==========================================
   BANDLEDEN
========================================== */

.band-home .card{

    position:relative;

}

.band-home .card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.65)

    );

    opacity:0;

    transition:.4s;

}

.band-home .card:hover::before{

    opacity:1;

}

/* ==========================================
   AUDIO
========================================== */

audio{

    border-radius:30px;

    filter:drop-shadow(0 0 8px rgba(200,0,0,.35));

}

/* ==========================================
   BOOKING
========================================== */

.booking{

    background:

    linear-gradient(

    rgba(0,0,0,.85),

    rgba(0,0,0,.85)

    ),

    url("../images/stage.jpg");

    background-size:cover;

    background-position:center;

}

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

.footer{

    position:relative;

}

.footer::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:220px;

    height:3px;

    background:#c00000;

    transform:translateX(-50%);

}

/* ==========================================
   HOVER LINKS
========================================== */

.navbar a{

    position:relative;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#c00000;

    transition:.3s;

}

.navbar a:hover::after{

    width:100%;

}

/* ==========================================
   BACK TO TOP
========================================== */

#topButton{

    position:fixed;

    right:30px;

    bottom:30px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#b30000;

    color:white;

    border:none;

    cursor:pointer;

    display:none;

    font-size:26px;

    z-index:999;

    transition:.3s;

}

#topButton:hover{

    transform:scale(1.1);

    background:white;

    color:black;

}

/* ==========================================
   SELECTIE
========================================== */

::selection{

    background:#b30000;

    color:white;

}

/* ==========================================
   HR
========================================== */

hr{

    border:none;

    height:2px;

    background:#b30000;

    margin:40px auto;

    width:180px;

}

/* ==========================================
   EIND
========================================== */

body{

    overflow-x:hidden;

}