@media all and (max-width: 1400px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 1000px) {

  /*prevent browser swipe down refresh page
    combined with addEventListener(..,touchstart,{passive:true})
  */ 
  html{
    overflow: hidden;
    width: 100%;
  }
  body{
    /* overscroll-behavior-y: contain; */
    height: 100%;
    /* position: fixed; */
    /* overflow-y: scroll; */
    /* overflow-y: scroll; */
    -webkit-overflow-scrolling: touch;
    /* iOS velocity scrolling */
  }

  input,
  textarea,
  button,
  select,
  li,
  .burger-toggle,
  .track-info-btn,
  .star, .ctrl, .track,.progress,
  a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  header {
  top:0;
  height: 3rem;
  }
  main {
    top: 4rem;
    height: calc(100vh - 16.5rem);
    z-index: -1;
  }
  .scrollbox {
    z-index: -2;
  }
  main .bnabbot-logo {
    /* top: 30rem; */
    background-position: 100% calc(100% - 2rem);
  }
  header {
    margin-top: 0.6rem;
  }

  .pagination {
    display: none;
  }
  .pagination.active{
    display: none;
  }

  div.lng-socials img {
  top: 0.1rem;
  }
  .subnav.subcat {
    display: none;
    line-height: 2.5rem;
  }

  .subnav.subnav-prodevents{
    display: none;
  }

  .subnav.subnav-database{
    display: block;
  }
  .subnav .search, .subnav .filter-toggle{
    display: none;
  }
  .subnav ul li#albums-toggle,.subnav ul li#tracks-toggle{
    /* padding:1.6rem; */
  }
  div.subnav ul {
    font-size: 2rem;
    height: auto;
  }

  div.subnav ul{
    margin-bottom: 1rem;
  }



  /* static burger toggle */
  /* body .burger-toggle{
        position: absolute;
        display: inline-block;
        width: 2.5rem;
        height: 0.9rem;
        margin-right: 0.3rem;
        border-top: 0.3rem solid rgb(0, 0, 0);
        border-bottom: 0.3rem solid rgb(0, 0, 0);
        top: 1rem;
    }

    burger-toggle:before {
      content: "";
      position: absolute;
      top: -0.9rem;
      left: 0px;
      width: 100%;
      border-top: 0.3rem solid rgb(0, 0, 0);  
    */

  .pagination {
    display: none;
  }

  #scroll-indicator-left-container.w-pagination, #scroll-indicator-right-container.w-pagination{
    height: calc(100% - 10rem);
  }
  #scroll-indicator-left-container, #scroll-indicator-right-container{
    height: calc(100% - 10rem);
    background-color: inherit;
  }
  #scroll-indicator-right, #scroll-indicator-left{
    top:45%;
  }
  #basic-cat-zone.tmpl-flow{
    /* uncomment to have one column layout */
    column-width: unset;
  }
  
  div.content{
    position: relative;
    padding: 0;
    height: calc(100% - 1rem);
  }
  div.content.tmpl-boxes.database{
    max-height: calc(100% - 7rem);
  }

  div.content.tmpl-boxes article{
        
    flex: 0 0 var(--column-width);
    max-height:100%;
    
  }

  div.content.tmpl-flow{
    padding-top: 0.6rem;
    height: 100%;
  }

  div.content.tmpl-flow::-webkit-scrollbar {
    display: none;
  }

  section.player .track div{
    top:0;
  }

  .button{
    top:-0.6rem;
  }

  .button.pause{
    top:-0.7rem;
  }
  .button.loading{
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 52%;
    -moz-transform-origin: 50% 52%;
    -o-transform-origin: 50% 50%;
  }
  .button.currently {
    top: -0.6rem;
    background: transparent;
  }
  .tmpl-boxes ul.sounds-website .button.play{
    top:-0.7rem;
  }
  .button.title-track {
    top: 0rem;
    /* top:0; */
  }
  .button.favorite.album {
    /* top: 0; */
  }
  .button.favorite{
    top:-0.8rem;
  }
  .button.favorite::after{
    font-size: 2.3rem;
  }
  .button.favorite.loading{
    /* padding:0; */
    /* padding-bottom:0; */
    /* padding-top: 0; */
    /* padding-right: 0.48rem; */
    /* padding-left: 0.3rem; */
transform-origin: 50% 52%;
-webkit-transform-origin: 50% 53%;
-moz-transform-origin: 50% 56%;
-o-transform-origin: 50% 52%;
  }
  section.player {
    top: calc(100vh - 12.5rem);
  }
  #favorites-detail-zone{
    /* margin-top: 4rem; */
  }

  section.player #favorites-list button{
    /* top:0.4rem; */
    /* top:0; */
    align-items: center;
  }

  section.player #favorites-list button::after {
    top:-0.4rem;
  }

  section.player #favorites-list button.button.play{
    top:0.2rem;
  }
  section.player #favorites-list button.button.favorite{
    top:-0.05rem;
  }
  section.player #favorites-list button.button.button.pause{
    top:0.1rem;
  }
  section.player #favorites-list li div.handle{
    top:-0.3rem;
    /* top:0.1rem; */
  }

  #favorites-list ul.sounds-website {
    display: inline-block;
    padding: 0rem 0 2rem 3.5rem;
  }
  section.player .player-content {
    /* height: calc(100% - 13.5rem); */
    /* height: calc(100% - 4.5rem); */
    display: block;
    /* top:3rem; */
    /* padding-top:1rem;
     */

  }
  
  section.player .player-content>div {
    height: calc(100vh - 17rem);
    padding: 0 4rem 4rem 1rem;
    
  }
  section.player .ctrl div {

    /* width: 5rem; */
    /* padding:0 0.6em; */
    padding: 0;
  }
  .favorites-btn span.fav-btn-text{
    display: none;
  }

  section.player .ctrl div.favorites-btn .star {
    display: inline-block;
    font-size: 2.5rem;
    line-height: 3.3rem;
    
  }
  .favorites-btn.loading .star {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 52%;
    -o-transform-origin: 50% 50%;

  }

  section.player .ctrl .track-info-btn{
    visibility: hidden;
    position: relative;
  }
  section.player .ctrl .track-info-btn:after{
    visibility: visible;
    position:absolute;
    left:2.8rem;
    padding:0 0.65rem;
    content:'INFO';
    border-left: solid white 2px;
    color:white;
    background-color: black;
  }
  section.player .ctrl .track-info-btn.active:after{
    color:black;
    background-color: white;
  }
  

  /* burger animation */
  body .burger-toggle {
    transform: scale(0.7) scaleY(0.9);
    display: inline-block;
    position: absolute;
    width: 5rem;
    height: 6rem;
    top: -2.3rem;
    left: 0.3rem;
    transition-duration: 0.1s;
  }
  .burger-toggle .icon-left {
    transition-duration: 0.4s;
    position: absolute;
    height: 3px;
    width: 15px;
    top: 30px;
    background-color: #212121;
  }
  .burger-toggle .icon-left:before {
    transition-duration: 0.4s;
    position: absolute;
    width: 15px;
    height: 3px;
    background-color: #212121;
    content: "";
    top: -10px;
  }
  .burger-toggle .icon-left:after {
    transition-duration: 0.4s;
    position: absolute;
    width: 15px;
    height: 3px;
    background-color: #212121;
    content: "";
    top: 10px;
  }
  .burger-toggle .icon-left:hover {
    cursor: pointer;
  }
  .burger-toggle .icon-right {
    transition-duration: 0.4s;
    position: absolute;
    height: 3px;
    width: 15px;
    top: 30px;
    background-color: #212121;
    left: 15px;
  }
  .burger-toggle .icon-right:before {
    transition-duration: 0.4s;
    position: absolute;
    width: 15px;
    height: 3px;
    background-color: #212121;
    content: "";
    top: -10px;
  }
  .burger-toggle .icon-right:after {
    transition-duration: 0.4s;
    position: absolute;
    width: 15px;
    height: 3px;
    background-color: #212121;
    content: "";
    top: 10px;
  }
  .burger-toggle.open .icon-left {
    transition-duration: 0.4s;
    background: transparent;
  }
  .burger-toggle.open .icon-left:before {
    transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
    background: var(--selected);
  }
  .burger-toggle.open .icon-left:after {
    transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
    background: var(--selected);
  }
  .burger-toggle.open .icon-right {
    transition-duration: 0.4s;
    background: transparent;
  }
  .burger-toggle.open .icon-right:before {
    transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
    background: var(--selected);

  }
  .burger-toggle.open .icon-right:after {
    transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
    background: var(--selected);

  }
  .burger-toggle:hover {
    cursor: pointer;
  }

  /* end of burger animation */

  body .mobile-filter-toggle.mobile-visible {
    display: inline-block;
  }

  body .mobile-filter-toggle {
    /* display: inline-block; */
    display: none;
    position: absolute;
    background: #fff;
    border-radius: 30rem;
    height: 1.7rem;
    width: 1.7rem;
    border: 0.25rem solid #090909;
    transform: scale(0.9);
    left: 5rem;
    top: 0.2rem;
  }
  .mobile-filter-toggle:after {
    content: "";
    height: 0.25rem;
    width: 1.2rem;
    background: #2b2828;
    position: absolute;
    top: 1.4rem;
    left: 0.9rem;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
  }
  .mobile-filter-toggle.active{
    border-color: var(--selected);
  }
  .mobile-filter-toggle.active::after{
    background: var(--selected);
  }
  .mobile-filter-toggle.filled{
    border-color: var(--selected-focus);
  }
  .mobile-filter-toggle.filled::after{
    background: var(--selected-focus);
  }




  section.player.opened {
    top: 4rem;
  }

  nav.topnav {
    visibility: hidden;
    opacity: 0;
    /* width: calc(100vw - 2rem); */
    transition: visibility 0s, opacity 0.2s linear;
  }
  nav.topnav.active {
    visibility: visible;
    opacity: 1;
    display: flex;
    background: white;
    position: relative;
    line-height: 3rem;
    font-size: 2.6rem;
    padding: 0;
    height: 100vh;
    border-top: 2px solid black;
    position: relative;
    z-index: 2000;
    top: 0.4rem;
  }
  nav.topnav ul {
    /* width:var(--column-width); */
    display: block;
    height: 100%;
  }
  nav.topnav ul li.menu-item, nav.topnav ul li.menu-link {
    width: 100%;
    display: block;
    position: relative;
    background: var(--white);
    cursor: pointer;
    border-left: none;
    border-bottom: 2px solid black;
    text-transform: uppercase;
    padding: 1rem;
    white-space: normal;
  }

  
  nav.topnav ul li a {
    text-decoration: none;
  }
  nav.topnav ul li ul {
    display: inline-block;
  }

  nav.topnav ul li ul li {
    /* padding-left: 2rem; */
    margin-bottom: 1rem;
    background-color: var(--white);
  }
  nav.topnav ul li ul li a{
    color:var(--black);
    text-transform: lowercase;
  }
  nav.topnav ul li.has-sub ul{
    margin-top: 1rem;
  }
  nav.topnav ul li.active {
    background: var(--selected);
  }
  nav.topnav ul li.active a {
    text-decoration: none;
    color: white;
  }
  nav.topnav ul li.active.has-sub {
    background-color: var(--white);
  }
  nav.topnav ul li.active.has-sub a{
    color:black;
  }


  nav.topnav ul li.has-sub.active ul li a {
    color: var(--black);
    text-transform: lowercase;
  }

  nav.topnav ul li.has-sub.active ul li.active a {
    color: var(--white);
  }


  .browse-menu-db .facets-list.tmpl-flow{
      column-width: unset;
  }
  div.browse-menu-db.active {
    height: calc(100% - 8.7rem);
  }

  .mobile-search.mobile-visible{
    display: flex;
    width: auto;
    background: white;
  }

  .mobile-search.mobile-visible button.clear-search-mobile{
    display: none;
    position: relative;
    top:-0.2rem;
    background: transparent;
    /* line-height: 4.5rem; */
    font-weight: bold;
    margin-left: 1rem;

  }
  
  .mobile-search #form_search{
    flex:0.7;

  }
  .mobile-search .input_search{
    /* background-color: white; */
    width:100%;
    font-size: var(--h2-font-size);
text-transform: uppercase;
  }

  #tip {
    top: -5rem;
    /* font-size: 2.5rem; */
    right:0rem;
  }
  #tip.active{
    right: 0rem;
  }

  #tip::after {
    top: 2.9rem;
    right: 1rem;
  }

  ul.sounds-website {
    padding: 2rem 0 0 2rem;
}
  ul.sounds-website li div.tracklist-title{
    top: -0.75rem;
    position: relative;
  }
  ul.sounds-website li .marquee-summary{
    display: none;  
  }

  .track-timer{
    display: none;
  }

  .tmpl-flow article > .text-title-mobile{
    display: block;
    padding: 1rem 2rem;

    text-transform: uppercase;
  }
  article .text-image .filtered {
    max-width: 80%;
  }
  div.content.tmpl-flow article .text-image img{
    /* width:60rem; */
    /* max-width: 50rem; */
     /* padding: 0 2rem; */
    max-width: 100%;
/* padding: 0 2rem; */
/* max-height: 26rem;  */

}
div.content.tmpl-boxes article .text-image img{
    /* max-width: 20rem; */
    /* max-width: 90%; */
    max-height: 26rem;

}
div.content.tmpl-flow article .logos-images img{
  max-height: 20rem;
  padding: 2rem 2rem 1rem 5rem;
  max-width: 26rem;
}

  .subnav ul li.search{
    display: none;
  }

  
.marquee-container{
  top:-1rem;
  height: 2.8rem;
}
.summary-message{

}
  @keyframes marquee-animation {
    from {
      /* Start a bit further from the right */
      transform: translate3d(calc(100% - 20rem), 0, 0);
    }
    
    to {
      /* Animate to the left of the container width */
      transform: translate3d(-200px, -0, 0);
    }
  }


  .arrow-indicator{
    display: none;
  }
  
  .arrow-indicator.active{
    display: block;
  }
}