/*
 * Globals
 */



@font-face {
  font-family: 'handelson'; /* Name your font family */
  src: url('../fonts/handelsonsix.otf'); /* Locate the .ttf file within your directory*/
}

/*
 * Base structure
 */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0);
  height: auto;
}


@media (max-height: 759px) {
   .nav-link {
      font-size: 10px;
    }

}


@media (min-height: 760px) {
   .nav-link {
      font-size: 15px;
    }

}


.bm-text {
  font-color: #efc2c2;
}

@media (min-width:100px) and (max-width: 768px) {

   .bm-bg-main {
    background-image: url( '../assets/bm_logo.png' ); 
    background-size: cover;
    height:45vh;
    width: 45vh;
    margin-left:2vh;
    }

  .bm-bg-promo1 {
    background-image: url( '../assets/allt_promo_mobile.png' ); 
    background-size: cover;
    min-height:90vh;
    min-width: 90vw;
    /*margin-left:2vh;*/
    }

    .bm-bg-promoDevil {
    background-image: url( '../assets/devil_mobile_bg.png' ); 
    background-size: cover;
    min-height:90vh;
    min-width: 90vw;
    /*margin-left:2vh;*/
    }

  .bm-main-row {
    width:auto;
    margin-top:3vh;
  }
  .bm-bg {
    background-color: #000000;
    margin-right:1px;
    background-image: url( '../assets/mobile_bg.png' );
    background-size: 140%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .bm-col-right {
    width:1vh;
  }
  .bm-col-left {
    width:3vh;
  }
  .bm-spotify-embed-mobile {
    width:80%;
    margin-top:5vh;
  }
   .bm-main-description-desktop {
    display:none;
  }

  .bm-bottom {
   margin-left:1vh;
  }
  .bm-main-description-mobile {
    margin-top:3vh;
  }
    .bm-side-content-desktop
    {
      display: none;
    }

  .bm-promo-row-mobile
  {
    margin-top:55vh;
  }

  .bm-text-footer
  {
    font-size:2vh;
  }

.bm-header-links-desktop {
    
    display: none;
  }

 .bm-mobile-header-row
{
    width:auto;
    margin-top:0vh;
}

.bm-omslag-desktop{
  display: none;
}

  .bm-cover {
    display: block;
    margin: auto;
    width: 80vw;
    border-style: solid;
    border-color: #FFFFFF;
  }


  .bm-button
  {
    margin:auto;
    display:block;
    width:40vh;
    height:8vh;
    border-radius: 10px;
  }

  .bm-button-black
  {
    background-color: #000000;
    color:#FFFFFF;
    border-color: #FFFFFF;
  }

  .bm-button:hover {background-color: #f02f61;}



  .kb-bg {
    padding-bottom: 37.5%; 
    background-image: url( '../assets/landingPage.png' );
    background-size: cover;
    height:80vh;
    }
    
    .kb-text-main {
    font-family: "Poppins";
    font-size:12px;
   /*  color: #F0E0F9; */
    
    }

  .promo-row-desktop
  {
    display:none;
  }

  .kb-main {
    max-width:100%;
    max-height:100%;
  }
    .kb-main-row {
      margin-top:30vw;
    }

    .kb-text-header {
  /*  text-decoration: underline; */
   color: #FFFFFF;
   position:sticky;

    } 

  h1 {
    font-size: 24px;


  }

.h1-header {
  font-size:6vh;
  text-align: center;
}

.h3-header {
  font-size:2vh;
  text-align: center;
}


.h2-header {
  font-size:2vw;
}

 /* .h2-header {
   font-size:20px;
 } */

  .bm-header {
    margin-top:1vh;
    height:auto;
  }

  .bm-header-links {
    display: block;
    margin: auto;
  }

.bm-promo-banner-header {
  display: none;
}

  .bm-desktop-links {
    display:none;
  }
  .bm-promo-links {
    margin-bottom:-1vh;
  }

  .kb-header {

    /*  padding-top:1vh; */
   /* position: fixed;
    display: block;
    z-index: 10;
overflow:visible; 
   top: 0;
    left: 0;
    width: 100%;
    background-color: #000;
    text-align: center;
    letter-spacing: -0.32em;
    white-space: nowrap */
   
  }

  .kb-header-fix{
    margin-top:5vh;
  }


}

@media (min-width:760px) {
  .kb-bg {
    padding-bottom: 37.5%; 
    background-image: url( '../assets/landingPage.png' ); 
    background-size: cover;
    height:80vh;
    }

 .bm-bg-main {
    background-image: url( '../assets/bm_logo.png' ); 
    background-size: cover;
    height:100vh;
    width: 100vh;
    }
  .bm-bg {
    background-color: #300000;
    background-image: url( '../assets/hemsida_stor.png' ); 
    background-size: cover;
    background-repeat: no-repeat;
  }

  .bm-bg-promo1 {
    background-image: url( '../assets/allt_desktop_2.png' ); 
    background-size: cover;
   /* height:auto; */
    max-height:80vh;
    padding-bottom: 37.5%; 
    width:100%;
  }

     .bm-bg-promoDevil {
    background-image: url( '../assets/devil_bakgrund.png' ); 
    background-size: cover;

    height:85vh;

    /*margin-left:2vh;*/
    }

   .bm-omslag-desktop {
      max-width:50;
      height:auto;
      margin-left:5vw;
      margin-top:5vw;
    }
   .bm-header-links-desktop {
    padding-top:1vh;   
    display: block;
    margin: auto;
  }

  .bm-main-row
  {
    margin-bottom: 3vh;
  }

  .bm-cover {
    display: block;
    margin: auto;
    width: 60vw;
    border-style: solid;
    border-color: #FFFFFF;
    border-radius: 10px;

  }
  .bm-promo-row-mobile
  {
    display:none;
  }

  .bm-button
  {
    margin:auto;
    display:block;
    width:100%;
    height:8vh;
    border-radius: 10px;
  }

  .bm-button-black
  {
    background-color: #000000;
    color:#FFFFFF;
    border-color: #FFFFFF;
  }

    .bm-button:hover {background-color: #f02f61;;}

    .kb-main {
    max-width:100%;
    height:100em;
  }
    .bm-spotify-embed-mobile {
    display:none;
  }
   .bm-spotify-embed-desktop {
     /*width:40%; */
     /*margin-top:75vh; */
     opacity: 0.8;
  }
    .bm-main-description-mobile {
    display:none;
  }

  .bm-main-description-desktop {
    margin-left:3vh;
    text-align: center;

  }

  .bm-side-content-desktop {
    padding-top:45vh;
    margin-left:3vh;
    text-align: center;

  }
  .bm-desktop-links {
    
    margin-left:3vh;
  }
    .nav-link {
      font-size: 20px;
    }

    .kb-text-main {
      font-family: "Poppins";
     
      font-size:14px; 
    /*  color: #F0E0F9; */

      }
    .kb-main-row {
      margin-top:2%;
      
    }
    .kb-text-header {
  /*  text-decoration: underline; */
   padding-top:3;
   color: #FFFFFF;
   }
.bm-promo-col {
  min-width:570px; 
  height:auto;
}
.bm-header-links-mobile
{
  display: none;
}

.bm-promo-banner-text {
  /* display: table; */
  /*margin-top:54vh; */
  margin-left:2vh;
  margin-right:2vh;
  text-shadow: 1px 1px #000000;
  margin-top:5vh;
}

.bm-promo-banner-header {
  margin-top:20vh;
  margin-left:2vh;
  margin-right:2vh;
  text-shadow: 1px 1px #000000;
}


.kb-header {
    padding-top: 1vh;
    margin-top: 0;
}


/* .h2-header {
  font-size: 8vh; 
}*/

.h1-header {
  font-size:6vw;
  text-align: center;

}

.h3-header {
  font-size:1vw;
  text-align: center;
  margin-top:-2vh;
}


.h2-header {
  font-size:2vw;
}


  .bm-text-footer
  {
    font-size:3vh;
  }

  .kb-map{
  width:20vh;
  height:20vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

  #listenModal .modal {
    max-width: 1500px;
    margin: 8vh auto;
    background-color: #000000;

    /* display:block; */
  }


} 
/* 
.kb-bg {
    padding-bottom: 37.5%;
    background-image: url( 'assets/KB_2024.png' );
    background-size: cover;
    height:80vh; 
    } */

h1, h2, h3, h4, h5, h6 { 
  /* text-shadow: 1px 1px #F0E0F9; */
 /*  letter-spacing: .1rem; */
}


.kb-list-item {
  margin-bottom: 2vh;
}

.kb-header {
  margin-bottom: 1%;
  padding-right: 10%;
  padding-left: 10%;
}

.kb-banner-text {
  /* display: table; */
  /*margin-top:54vh; */
  margin-left:2vh;
  margin-right:2vh;
  text-shadow: 1px 1px #000000;
}

.bm-banner-text {
  /* display: table; */
  /*margin-top:54vh; */
  margin-left:2vh;
  margin-right:2vh;
  text-shadow: 1px 1px #000000;
  margin-top:5vh;
}

.banner-header {
  margin-top:30vh;
  margin-left:2vh;
  margin-right:2vh;
  text-shadow: 1px 1px #000000;
}



.kb-border {
  border-bottom-style:solid;
  border-radius: 5px;
  border-color: #F0E0F9;
  border-width: 3px;
}

.kb-banner-button {
  /* display: table; */
   color: #FFFFFF; 
   border-color: #FFFFFF; 
   opacity: 1;
   background: rgba(200, 80, 250, 0.3);
   font-size: 30pt;
  line-height: 50px; /* <- changed this */
  box-sizing: border-box; /* <- added this */

}

.btn-lg
{
  width:200px;
  height:70px;
}

.kb-banner-button:hover,
.kb-banner-button:focus {
  color: #FFFFFF;
  text-shadow: none; /* Prevent inheritance from `body`  */
  border-color: #FFFFFF;
  background: rgba(240, 224, 249, 1);

} 

.kb-content {
  /* background: rgba(198, 132, 231, .1) */
  height:500em;
  margin-bottom:3vh;
}

.kb-left-col {
  width:5vh;
}

.kb-right-col {
  width:5vh;
}

.kb-text {
 /* font-family: bevan; */
 font-family: "handelson";
}


/*
 * Header
 */

.nav-masthead .nav-link , nav-link:active {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
 /*  color: rgba(240, 224, 249, 1); */
  background-color: transparent;
  border-bottom: .25rem solid transparent;
  letter-spacing: 0.5px;

}

.nav-masthead .nav-link:hover {
  border-bottom-color: rgba(240, 224, 249, 1);
  color: #f02f61;
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}


.icon {
  color:#FFFFFF;
  font-size: 3vh;
  margin:auto;
 /* border-radius: 50%; */
  line-height: 75px;
}

.icon-middle {
  color:#FFFFFF;
  font-size: 3vh;
  padding-right:2vh;
  padding-left:2vh;

 /* border-radius: 50%; */
  line-height: 75px;
}

a.icon:link {
   text-decoration: none;
}

a.icon:hover, a.icon:active, a.icon:focus,
    {
        text-decoration: none;
        background-color: #f2f0e1;
        color: #f02f61;

    }

.card-link:hover
{
  color: #f02f61;
}


/* MODAL CSS */

.bm-modal-header
{
  margin-top:1.5vh;
}

#listenModal .modal-content, #buyModal .modal-content {
  /* background-color: #f02f61; */
  background-image: url( '../assets/mobile_bg.png' );
  background-position: center;
  border-radius: 20px;
  border-style:solid;
  border-color: #ffffff;
  border-size: 0.5px;
}

  .bm-modal-option {
    border-radius: 1px;
    box-shadow: 0px 3px 1px -1px rgba(255,255,255,0.8);
    width:90%;
    height:5vh;
    display:block;
    margin-top:2vh;
    margin-left: auto;
    margin-bottom: auto;
    margin-right:auto;
    padding-bottom:0.5vh;
    font-size:15pt;
}

  .bm-modal-first-option {
    border-radius: 1px;
    box-shadow: 0px 3px 1px -1px rgba(255,255,255,0.8);
    width:90%;
    height:5vh;
    display:block;
    margin-left: auto;
    margin-bottom: auto;
    margin-right:auto;
    padding-bottom:0.5vh;
    font-size:15pt;
}

.bm-modal-selection
{
  display:block;
  text-align: center;
  height: 100%;
}

.bm-modal-selection-content
{
  padding:auto;
}

.modal-option-img {
  height:100%;
  width:auto;
}

.bm-modal-selection-link:link, .bm-modal-selection-link:visited
{
  height:100%;
  width:100%;
  display:block;
  color: #FFFFFF;
  text-decoration: none;
}

.bm-modal-selection-link:hover, .bm-modal-selection-link:active, .bm-modal-selection-link:focus
{

  color: #0000000;
  background-color: #000000;
  border-radius: 10px;
}

.bm-modal-subheader
{
  margin-top:1vh; 
  font-size:1.5vh; 
  text-decoration: underline;
}

@media (min-width:100px) and (max-width: 768px) {

  #listenModal .modal-content ,#buyModal  .modal-content {
    max-width: 1000px;
    margin: 8vh auto;
    width: 40vh;
    height:70vh;

  }

  #listen-modal .modal-body {
    position: relative;
    padding-top: 0px;
    min-height: 400px;
    background: #ccc;
  }

  #listenModal .btn-close, #buyModal .btn-close {
    position: absolute;
    right: -10px;
    top: -15px;
    font-size: 1rem;
    font-weight: normal;
    opacity: 1;
  }


  .bm-modal-image{
    object-fit: contain;
    width: 98%;
    height: auto;
    border-style: solid;
    border-color: #FFFFFF;
    border-radius: 20px;
}

  .bm-modal-option {
    
}

}

@media (min-width:769px) {

  #listenModal .modal-content, #buyModal .modal-content {
    max-width: 1000px;
    margin: 8vh auto;
    width: 40vh;
    height:70vh;
    opacity: 0.80;

    /* display:block; */
  }

  #listenModal .modal-body, #buyModal .modal-body {
    position: relative;
    padding-top: 20px;
    min-height: 400px;
  }

  #listenModal .btn-close, #buyModal .btn-close {
    position: absolute;
    right: -60px;
    top: -24px;
    font-size: 1rem;
    font-weight: normal;
    opacity: 1;
  }


  .bm-modal-image{
    object-fit: contain;
    width: 98%;
    height: auto;
    border-style: solid;
    border-color: #FFFFFF;
    border-radius: 20px;
}

.bm-modal-option {
  
}



}



}