/* sm Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) 
{ 
    .w-sm-auto {
        width: auto !important;
    }

    .w-sm-75 {
        width: 75% !important;
    }

    .mw-sm-75 {
        max-width: 75% !important;
    }
      
    .mw-sm-50 {
        max-width: 50% !important;
    }
      
    .mw-sm-25 {
        max-width: 25% !important;
    }

    .break-spaces-sm {
        word-spacing: 9999px;
        overflow: hidden;
    }
}

/* md Medium devices (tablets, 768px and up) */
@media (min-width: 768px) 
{ 
    .w-md-auto {
        width: auto !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-100 {
        width: 100% !important;
    }

    .mw-md-100 {
        max-width: 100% !important;
    }

    .mw-md-75 {
        max-width: 75% !important;
    }
      
    .mw-md-50 {
        max-width: 50% !important;
    }
      
    .mw-md-25 {
       max-width: 25% !important;
    }

    .vh-md-auto {
        height: auto !important;
    }

    .break-spaces-md {
        word-spacing: 9999px;
        overflow: hidden;
    }

}

/* lg Large devices (desktops, 992px and up) */
@media (min-width: 992px) 
{    
    #menu-main-menu {
        font-size: inherit !important; 
    }

    .w-lg-auto {
        width: auto !important;
    }

    .w-lg-100 {
        width: 100% !important;
    }

    .mw-lg-100 {
        max-width: 100% !important;
    }

    .mw-lg-75 {
        max-width: 75% !important;
      }
      
    .mw-lg-50 {
        max-width: 50% !important;
    }
      
    .mw-lg-25 {
        max-width: 25% !important;
    }

    .vh-lg-auto {
        height: auto !important;
    }

    .break-spaces-lg {
        word-spacing: 9999px;
        overflow: hidden;
    }
}

/* xl X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) 
{ 
    .w-xl-auto {
        width: auto !important;
    }

    .w-xl-100 {
        width: 100% !important;
    }

    .mw-xl-100 {
        max-width: 100% !important;
    }

    .mw-xl-75 {
        max-width: 75% !important;
      }
      
      .mw-xl-50 {
        max-width: 50% !important;
      }
      
      .mw-xl-25 {
        max-width: 25% !important;
      }

    .break-spaces-xl {
        word-spacing: 9999px;
        overflow: hidden;
    }
}

/* xxl XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) 
{ 
    .w-xxl-auto {
        width: auto !important;
    }

    .w-xxl-100 {
        width: 100% !important;
    }

    .mw-xxl-100 {
        max-width: 100% !important;
    }

    .mw-xxl-75 {
        max-width: 75% !important;
    }
    
    .mw-xxl-50 {
        max-width: 50% !important;
    }
    
    .mw-xxl-25 {
        max-width: 25% !important;
    }

    .break-spaces-xxl {
        word-spacing: 9999px;
        overflow: hidden;
    }
}

@media only screen and (max-width: 576px) 
{
    #gb_hero .display-1 {
        font-size: calc(1.625rem + 1.9vw);
    }

    #gb_hero h2 {
        font-size: 4.5vw;
    }

    #discography h2 {
        font-size: 5.5vw;
    }

    #music .btn-primary {
        --bs-btn-padding-y:1rem;
    }
}

@media only screen and (max-width: 992px) 
{
    #site_navigation {
        transition: height 0.3s ease; 
        overflow: hidden;       
    }

    #site_navigation.opened {
        background-color: var(--gb-color-purple-dark);        
        height: 100% !important;
    }

    #site_navigation #main_navbar {
         opacity: 0;
         transition: opacity var(--gb-transition-speed) ease-in-out;
    }

    #site_navigation.opened #main_navbar {
         opacity: 1;
    }

    #site_navigation.opened #main_navbar  {
        display: flex;
        flex-direction: column;
        height: 80% !important;
    }

}

@media only screen and (max-width: 767px) 
{
    #product_wrapper {
        background-image: none;
    }

    #product_content_wrapper {
        margin-top: 0;
        margin-bottom:0;
    }

    #gb-products-image {
        width: 100%;
        background-image: var(--gb-products-img);
        background-position: center right;
        background-size: contain;
        background-repeat: no-repeat;        
    }

    #product_wrapper * {
        z-index: 2;
    }

}

/* iOS */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {

    body {
        background-image: none;
        --background-position-y: 0px;
    }
    
    body:before {
      content: "";
      position: fixed;
      z-index: 0;
      top: 0px;
      left: 0px;
      width: 100vw;
      height: 100vh;
      background-image: var(--gb-bg-img);      
      background-size: cover;
      background-position: top calc(-3.5vw + var(--background-position-y)) center;
      background-repeat: no-repeat;
      transition: background-position 0.1s ease-out;
    }
}