body {
    margin: 0;
    font-family: 'Open Sans'
}

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

ul,
ol {
    list-style-type: none;
    margin: 0;
    padding: 0
}

@font-face {
    font-family: 'Bowlby';
    src: url("../fonts/BowlbyOneSC-Regular.ttf")
}

@font-face {
    font-family: 'Bangers-Regular';
    src: url("../fonts/Bangers-Regular.ttf")
}

@font-face {
    font-family: 'Bebas';
    src: url("../fonts/BebasNeue Bold.otf")
}

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

@font-face {
    font-family: 'Poppins-Medium';
    src: url("../fonts/Poppins-Medium.ttf")
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url("../fonts/Poppins-SemiBold.ttf")
}

input[type=text],
input[type=tel],
input[type=email],
textarea {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.8rem;
    color: #6e6e6e;
    width: 100%;
    padding: 1rem;
    border-radius: 0.2rem;
    font-size: 1rem;
    margin: 0.6rem 0;
    border: solid 1px #ccc;
    -webkit-box-shadow: 0 0 3px 1px #9d9d9d;
    box-shadow: 0 0 3px 1px #9d9d9d;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

input:focus,
textarea:focus {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    outline: #ccc;
    -webkit-box-shadow: 0 0 1px 1px #E6380C;
    box-shadow: 0 0 1px 1px #E6380C
}

label {
    font-family: 'Poppins'
}

.active {
    color: #E6380C
}

.white {
    color: white
}

h1 {
    font-family: 'Bangers-Regular';
    font-size: 2rem
}

h2 {
    font-family: 'Bangers-Regular';
    font-size: 10rem;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg)
}

h3 {
    font-family: 'Bebas';
    font-size: 10rem;
    line-height: 9rem
}

h3 .bigger-font {
    font-size: 12.5rem
}

h4 {
    font-family: 'Bangers-Regular';
    font-size: 3rem;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg)
}

h5 {
    font-family: 'Bebas';
    font-size: 3rem;
    line-height: 4rem
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    line-height: 2rem
}

li {
    font-family: 'Poppins', sans-serif
}

.img-fit {
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    width: 100%
}

.fit-top {
    -o-object-position: top;
    object-position: top
}

.center {
    text-align: center
}

.desk {
    display: block
}

.mob {
    display: none !important
}

.spacer {
    height: 200px
}

.mt-1 {
    margin-top: 1rem !important
}

.mt-2 {
    margin-top: 2rem !important
}

.mt-3 {
    margin-top: 3rem !important
}

.mb-1 {
    margin-bottom: 1rem !important
}

.mb-2 {
    margin-bottom: 2rem !important
}

.mb-3 {
    margin-bottom: 3rem !important
}

.pl-2 {
    padding-left: 2rem !important
}

nav {
    width: 100%;
    height: 120px;
    background-color: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    position: fixed;
    top: 0;
    z-index: 100;
    -webkit-transition: ease-in-out .5s;
    transition: ease-in-out .5s
}

.nav__menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 40vw;
    max-width: 500px
}

.nav__menu li a {
    text-decoration: none;
    color: white
}

.nav__mobile {
    display: none
}

.nav__mobile>div {
    height: 0.25rem;
    margin: 0.3rem;
    background-color: #E6380C;
    width: 2rem
}

.logo {
    margin-top: 3rem;
    width: 150px;
    height: 150px;
    z-index: 10;
    -webkit-transition: ease-in-out .5s;
    transition: ease-in-out .5s;
    background-image: url(../img/beck-n-boys-white.svg);
    background-repeat: no-repeat
}

.insta__container {
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../img/icons/instagram.svg);
    background-size: cover
}

.blackInsta {
    background-image: url(../img/icons/instagram-black.svg)
}

.youtube__container {
    display: block;
    width: 35px;
    height: 35px;
    background-image: url(../img/icons/youtube.svg);
    background-size: cover
}

.blackYoutube {
    background-image: url(../img/icons/youtube-black.svg);
}

.compact {
    background-color: white;
    height: 70px;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4)
}

.compact .nav__menu li a {
    color: #000
}

.compact .logo {
    height: 60px;
    margin-top: .5rem;
    margin-bottom: 10px;
    background-image: url(../img/b-n-b-logo.svg)
}

.btn {
    height: 60px;
    width: auto;
    border: 4px solid #000;
    border-radius: 30px;
    font-family: 'Poppins-SemiBold';
    font-size: 1.4rem;
    padding: 0 2rem;
    -webkit-transition: ease-in-out .3s;
    transition: ease-in-out .3s
}

.btn:hover {
    background-color: #E6380C;
    color: white;
    border-color: #E6380C;
    -webkit-transform: scale(1.15) rotate(-2deg);
    transform: scale(1.15) rotate(-2deg)
}

.btn-center {
    height: 60px;
    width: auto;
    border: 4px solid #000;
    border-radius: 30px;
    font-family: 'Poppins-SemiBold';
    font-size: 1.4rem;
    padding: 0 2rem;
    -webkit-transition: ease-in-out .3s;
    transition: ease-in-out .3s;
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.btn-center:hover {
    background-color: #E6380C;
    color: white;
    border-color: #E6380C;
    -webkit-transform: scale(1.15) rotate(-2deg) translate(-50%);
    transform: scale(1.15) rotate(-2deg) translate(-50%)
}

.btn-white {
    border-color: white;
    color: white
}

.spotify-logo {
    width: 50px
}

@media screen and (max-width: 1110px) {
    .desk {
        display: none
    }

    .mob {
        display: block !important
    }

    body {
        overflow-x: hidden
    }

    .nav__mobile {
        display: block;
        cursor: pointer
    }

    .nav__menu {
        position: absolute;
        right: -100%;
        top: 120px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        height: 50vh;
        background-color: white;
        text-align: center;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        border-top: 3px solid #E6380C
    }

    .nav__menu li a {
        color: black;
        font-size: 1.5rem;
        font-weight: bold
    }

    .compact .nav__menu {
        top: 70px
    }
}

.nav__active {
    right: 0
}

header {
    height: 100vh;
    position: relative;
    top: 0
}

.header-left {
    -o-object-position: left;
    object-position: left
}

.header__headline {
    position: absolute;
    bottom: 2rem;
    left: 10%;
    color: white;
    z-index: 10;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg)
}

.lightning__box {
    position: absolute;
    bottom: -130px;
    width: 100%;
    height: 260px;
    background-image: url(../img/lightning-1.svg);
    background-repeat: no-repeat;
    background-position: auto;
    background-size: cover
}

.rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    position: relative;
    z-index: 11
}

.black-bg {
    height: auto;
    width: 100%;
    background-color: #2a2a2a;
    position: relative;
    z-index: 10
}

.gallery__grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: (500px 150px)[3];
    grid-template-rows: repeat(3, 500px 150px);
    -webkit-column-gap: 3rem;
    column-gap: 3rem;
    row-gap: 2rem
}

.gallery-img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative
}

.gallery-img:before {
    display: block;
    content: '';
    position: absolute;
    top: -1rem;
    left: 1rem;
    right: -1rem;
    bottom: 1rem;
    border: 2px solid #E6380C;
    z-index: -1
}

.gallery__grid__item-1,
.gallery__grid__item-3,
.gallery__grid__item-5 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2
}

.gallery__grid__item-2,
.gallery__grid__item-4,
.gallery__grid__item-6,
.gallery__grid__item-7 {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3
}

.gallery__grid__item-1 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3
}

.gallery__grid__item-2 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2
}

.gallery__grid__item-3 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    grid-row: 3/5
}

.gallery__grid__item-4 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4
}

.gallery__grid__item-5 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 2;
    grid-row: 5/7
}

.gallery__grid__item-6 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 2;
    grid-row: 4/6
}

.gallery__grid__item-7 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    grid-row: 6/7;
    width: 100%;
    height: auto;
    -ms-flex-item-align: end;
    align-self: flex-end
}

.event {
    border: 2px solid #E6380C;
    position: relative
}

.first-event {
    margin-top: 5rem
}

.second-event {
    margin-top: 2.5rem
}

.third-event {
    margin-top: 0rem
}

.cards {
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    height: auto;
    background-color: #E6380C;
    padding: 1.5rem 0 1rem 0;
    cursor: pointer
}

.cards:hover .cards__headline {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.cards .cards__headline {
    -webkit-transition: ease-in-out .3s;
    transition: ease-in-out .3s;
    width: 100%;
    text-align: center
}

.band-img {
    height: 800px;
    -o-object-position: top;
    object-position: top
}

.title {
    font-size: 2rem;
    font-weight: bold;
    color: #E6380C
}

footer {
    position: relative
}

.footer-inner {
    padding-top: 4rem;
    padding-bottom: 5rem;
    background-color: #E6380C
}

.footer-inner div {
    color: white
}

.footer-inner ul {
    color: white
}

.footer-inner li a {
    color: white
}

.imprint li {
    font-family: 'Poppins';
    font-size: 1.2rem;
    line-height: 2rem;
    list-style-type: disc
}

@media screen and (max-width: 1200px) {
    .gallery__grid {
        -ms-grid-rows: (minmax(300px, auto) 100px)[3];
        grid-template-rows: repeat(3, minmax(300px, auto) 100px)
    }
}

@media screen and (max-width: 992px) {
    h3 {
        font-size: 4rem;
        line-height: 4rem
    }

    h3 .bigger-font {
        font-size: 5rem
    }

    .lightning__box {
        height: 200px;
        bottom: -100px
    }

    .gallery__grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
        row-gap: 3rem
    }

    .gallery__grid__item-1,
    .gallery__grid__item-2,
    .gallery__grid__item-3,
    .gallery__grid__item-4,
    .gallery__grid__item-5,
    .gallery__grid__item-6,
    .gallery__grid__item-7 {
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1/2;
        grid-row: auto
    }

    h2 {
        font-size: 6rem
    }

    .band-img {
        height: 500px
    }

    .footer-inner {
        padding-top: 2rem
    }
}

@media screen and (max-width: 768px) {
    h2 {
        font-size: 5rem
    }

    header {
        height: 90vh
    }

    .header__headline {
        bottom: .5rem
    }

    .lightning__box {
        height: 100px;
        bottom: -50px
    }

    .wir .spacer {
        height: 150px
    }

    .wir h3 {
        margin-top: 3rem
    }

    .nav__menu {
        height: 100vh;
        padding-bottom: 120px;
        overflow-y: scroll
    }
}

@media screen and (max-width: 576px) {
    h2 {
        font-size: 3rem
    }

    .btn {
        font-size: 1rem;
        width: 100%
    }

    .container {
        width: 90%;
        margin: 0 auto
    }

    .spacer {
        height: 100px
    }

    .gallery__grid .btn {
        margin-top: 1rem
    }
}

/*# sourceMappingURL=style.min.css.map */