/* For smaller tablets at breakpoint 1024px width - these are treated very similar to mobile eg ipadmini */
@media only screen and (max-width: 1024px) {

    /* WEBSITE PAGES */
    /* For website pages we just break down on tablets, and then mobiles are the almost similar with another breakdown at 640px*/
    body{
        font-size: 2.5vmin;
    }

    @media (orientation: landscape) {
        
        body .player-nav a.nav-item,
        body .player-nav a.nav-item.create-collection{
            padding: 2% 10%;
        }

        body .player-nav .player-social-media-container{
            position: relative;
            margin-top: 3vmin;
            margin-left: 5vmin;
            text-align: unset;
            bottom:unset;
        }

        body .player-nav .player-nav-container {
            max-height: 80vh;
        }

        body.player-open .player-nav .player-nav-container {
            max-height: 70vh;
        }

        @media (max-height: 660px) {
            body.player-open .player-nav .player-nav-container {
                max-height: 55vh;
            }
        }

        ul.jazzi-list-style li::before {
            left: 3vmin;
            top:10%;
        }
    }

    .pretty{
        font-size: 2.75vmin;
    }

    .hide-on-mobile{
        display: none;
    }

    .header .logo_img{
        height: 6vmin;
        vertical-align: middle;
        margin-top: 0.8vmin;
    }

    .header .menu a.header-link{
        font-size: min(3.5vmin, 18px);
        padding: 2.5vmin;
    }

    .tall-head{
        background-size: cover;
    }

    .tall-head-container .blue-btn{
        display: inline-block;
        min-width: 30vmin;
    }

    .tall-head img.homepage-logo {
        left: unset;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        display: block;
      }

    .tall-head-container{
        bottom: 10%;
        padding:2vmin 6vmin;
    }

    .blue-btn{
        font-size: min(4vmin,20px);
        padding: min(3vmin,20px) min(5vmin,28px);
    }

    .sub-not-active{
        max-width: 90vmin;
    }
    .sub-not-active .small-btn{
        margin-top:2vmin;
        margin-bottom: 2vmin;
    }

    .section{
        padding:7vmin 2.5vmin;
    }
    .section p{
        font-size: min(3vmin, 17px);
        line-height: unset;;
    }
    .hero-img-description{
        font-size: min(3vmin, 17px);
    }
    .footer{
        font-size: 2.5vmin;
    }
    .footer.wedge-footer::before{
        top: -23vmin;
    }

    .footer_menus{
        flex-wrap: wrap;
    }

    .footer_menus > div{
        flex: 50%; 
        text-align: center;
    }

    .footer_menus p{
        font-size: 3vmin;
    }

    /* Jazzi Radio Popup */
    #jazzi_radio .track-name{
        font-size: 5vmin;
    }

    #jazzi_radio .track-artist,
    #jazzi_radio .track-album,
    #jazzi_radio .track-city,
    #jazzi_radio .radio-runtime{
        font-size: 3vmin;
    }
    

    /* Dashboard */

    .displayPp img{
        height: 6vmin;
        width: 6vmin;
        border-radius: 6vmin;;
    }


    /* Registration/Login Page */
    form{
        font-size: 3.5vmin;;
    }

    form label .text-input{
        padding:min(3.2vmin,17px) min(2.5vmin,12px);
        font-size: min(3vmin,18px);
        margin-top: 2vmin;
    }


    /* PLAYER PAGE */
    /* Section: Global Stuff */

    div.hide-on-desktop{
        display: block;
    }
    span.hide-on-desktop{
        display: inline-block;
    }

    .filter-bar .filter-tools input{
        padding-left:unset; 
        padding-right: unset;
    }
    .filter-bar .view-description{
        font-size: 2.5vmin;
        font-weight: normal;
    }
    

    /* Taking care of hamburger meun and nav menu for player */

    .top-bar{
        width: 100vw;
        left: 0;
        /* ensure transition is same for all elements animating */
        transition: width 0.25s cubic-bezier(0.075, 0.82, 0.165, 1),
                    left 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
    }


    .player-nav{
        margin-left:-30vw;
        min-width: 30vw;
        /* ensure transition is same for all elements animating */
        transition: margin-left 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .player-nav .player-nav-container{
        width: 30vw;
    }

    
    #player_content{
        width: 100%;
        transition: width 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
        margin-left:unset;
        padding-bottom: 20vmin;
    }


    .top-bar .search-bar{
        width: calc( 100% - ( 15vmin + 15vmin ) );
    }

    #menu-mobile-toggle{
        cursor: pointer;
        width: 10vmin;
        display: inline-block;
        background-color: #F5A136;
        color: black;
        height: 5.5vmin;
        vertical-align: top;
        
    }

    

    /* now when hamburger menu is open */

    .hamburger-menu-open .top-bar{
        width: 70vw;
        left: 30vw;
    }

    .hamburger-menu-open .player-nav{
        margin-left:0;
    }


    
    /* Section: Dashboard */

    #huge_user_info .mid-info-holder{
        padding-left:5vmin;
    }

    #huge_user_info{
        flex-wrap: wrap;
        justify-content: space-evenly;
        padding-left: 2vmin;
    }

    #huge_user_info > div:last-child{
        flex-basis: 100%;
        margin-top:10vmin;
    }


    #huge_user_info .huge-name{
        font-size: 9.5vmin;
    }

    #huge_user_info .user-type{
        font-size: 3.5vmin;
        font-weight: 100;
    }

    #dashboard_widgets .widget h3{
        border:0;
        font-size: 5vmin;
    }

   
    


  

    /* Section: Hamburger Menu  */
    /* Icon 4 from https://codepen.io/designcouch/pen/Atyop */

    
    #hamburger-menu-icon {
        width: 3vmin;
        height: 2.25vmin;
        position: relative;
        margin: 1.5vmin 1vmin;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
        cursor: pointer;
        font-size: 1.7vmin;
    }

    #hamburger-menu-icon::after{
        content:'Menu';
        display:inline-block;
        padding-left:3.65vmin;
        font-weight: 500;
    }

    #hamburger-menu-icon span{
        display: block;
        position: absolute;
        height: .45vmin;
        width: 100%;
        background: black;
        border-radius: .45vmin;
        opacity: 1;
        left: 0;
    }

    #hamburger-menu-icon span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }

    #hamburger-menu-icon span:nth-child(2) {
    top: .9vmin;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }

    #hamburger-menu-icon span:nth-child(3) {
    top: 1.8vmin;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }

    .hamburger-menu-open #hamburger-menu-icon span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -0.15vmin;
    left: .4vmin;
    }

    .hamburger-menu-open #hamburger-menu-icon span:nth-child(2) {
    width: 0%;
    opacity: 0;
    }

    .hamburger-menu-open #hamburger-menu-icon span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 1.95vmin;
    left:0.4vmin;
    }

    .player-nav a.nav-item.higher-one img{
        width: 3vmin;
    }
    .player-nav h2{
        font-size: 2vmin;
        margin-top: 6.5vmin;
    }
    .player-nav a.nav-item, .player-nav a.nav-item.create-collection{
        font-size: 2.5vmin;
        padding: 4% 10%;
    }

    .player-nav a.nav-item.create-collection::after {
        font-size: 4.5vmin;
    }

    .content-container, .content-container.padded-10{
        padding:2vmin;
    }

    .top-bar .search-bar, .top-bar .user_profile .user_name{
        font-size: 2.25vmin;
    }
    

    .top-bar #cart_icon{
        width: 3vmin;
        height: 3vmin;
    }

    #empty_cart_btn{
        margin-top: 5vmin;
    }

    .cart-checkout-info .cart-total{
        font-size: 6vmin;
    }

    .cart-checkout-info .track-count{
        font-size: 3vmin;
    }

    .cart-checkout-container > div.payment-disclaimer{
        font-size: 3vmin;
    }

    body .bv_ul_inner li{
        font-size: inherit;
    }
    
    .simple-flex{
        display: block;
        /* we do no more of the left side and right side stuff on a smaller display */
    }

    .cities-list, .artists-list{
        margin-left:unset;
        margin-right:unset;
    }

    .artist-holder, .city-holder{
        margin: 3vmin;
    }

    .simple-flex > div{
        clear: both;
        overflow: unset;
    }

    .simple-flex .right-side:not(:empty){
        margin-top:4vmin;
    }

    #bio{
        padding-bottom: 10vh;
    }

    
    #mobile_bio{
        max-height: 1000px;
        transition: max-height 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
        font-size: 2vmin;
        font-weight: normal;
        margin-top:1vmin;
        line-height: 1.5rem;
    }
    #mobile_bio a{
        color: white;
        text-decoration: underline;
    }
    #mobile_bio.collapsed{
        max-height: 60px;
        mask: linear-gradient(#fff 25%,transparent);
        -webkit-mask: linear-gradient(#fff 25%,transparent);
        transition: max-height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        /* overflow: hidden; */
        /* This was making it shift it when overflow got set to auto on uncollapse */
    }

    #toggle_mobile_bio {
        display: none;
    } 

    .collection-list{
        margin-left:unset;
        margin-right:unset;
    }

    .big-actions{
        position: relative;
        bottom:unset;
        margin-top:-2vmin;
        padding-bottom: 3vmin;   
    }
    .big-actions .big-action{
        margin-right: 2vmin;
    }

    .big-actions .big-action::before{
        position: absolute;
        bottom: 0;
        content: '';
        font-size: 2vmin;
        text-align: center;
        margin-bottom: -2.5vmin;
        font-weight: normal;
        color: #ffffffe6;
    }
    
    .big-actions #play_collection.big-action::before{
        content: 'Play all tracks';
    }
    .big-actions #add_all_to_collection.big-action::before{
        content: 'Add all to collection';
    }

    .big-actions #add_all_to_cart.big-action::before{
        content: 'Add all to cart';
    }
    .big-actions #set_fav_artist.big-action::before{
        content: 'Make favorite';
    }


    
    .filter-bar .filter-tools{
        height:5vmin;
    }

    .tracks-list .track{
        font-size: 2.5vmin;
    }

    .small-btn{
        font-size: 2.5vmin;
    }

    .filter-bar .sellect-destination-list .sellect-item i.fa{
        font-size: 2vmin;
    }

    .small-text{
        font-size: min(2.5vmin,21px);
    }


    /* Tippy the tooltip stuff */

    .tippy-menu .tippy-menu-item{
        font-size: 2.5vmin;
    }


    /* Albums  */

    .collection-deets .city-curator,
    .collection-deets .artist-associated-city,
    .collection-deets .album-associated-artist,
    .collection-deets .album-ensemble-name{
        font-size: 2vmin;
    }

    /* Cities List */

    .city-holder, .artist-holder{
        font-size: 2.25vmin;
    }

    .city-holder .city-name,
    .artist-holder .artist-name{
        padding-top:1.5vmin;
    }

    .city-holder .city-curator, .artist-holder .artist-associated-city{
        font-size:2vmin;
    }

    .cities-list, .artists-list{
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax(25vmin, 1fr) );
    }


    /* Modals */
    .modal__container{
        min-width: 85vw;
    }
    
    .modal.hide-back-on-mobile .modal-back-btn{
        display: none;
    }

    .big-img-modal-content img{
        max-height: unset;
    }
    .modal.zoomed-img-modal .modal__close{
        right: 4.5vmin;
        top: 4vmin;
    }

    .modal.zoomed-img-modal .modal__header{
        margin-bottom: 0;
    }

    .modal.zoomed-img-modal .modal__content{
        font-size:0;
    }

    /* Tabbed navigation */
    .tabbed-nav{
        font-size: 2.75vmin;
    }


    .filter-bar.shaded-in-red{
        padding-bottom: 0.5vmin;
    }

    .filter-bar.collection-deets .filter-tools{
        height:unset;
    }

    .collection-deets .breadcrumbs{
        padding-top: 0.5vmin;
    }

    .collection-deets .dp-show-edit {
       
        height: 9vmin;
        width: 9vmin;
       
    }


    /* General Collections Stuff */
    
    button.play-track{
        /* inside the collection popup */
        margin:0;
        vertical-align: middle;
        height: 6.5vmin;
        width: 6.5vmin;
    }
    

    .collection-tile .side-play-btn{
        height:6vmin;
        width: 6vmin;
        background-size: 6vmin 6vmin;
        top: 13vmin;
    }

    #search_display .collection-tile .side-play-btn{
        height: 5vmin;
        width: 5vmin;
        background-size: 5vmin 5vmin;
        top: 9.5vmin;
    }

    .collection-tile .coll-heart-btn{
        height: 4vmin;
        width: 4vmin;
        background-size: 4vmin 4vmin;
    }



    .collection-tile .name{ 
        font-size: 3vmin;
    }


    .fake-link2{
        font-size: 2.5vmin;
    }

    .tracks-list.tracks-list.in-coll-modal .track > div, .tracks-list.tracks-list.in-coll-modal .track-list-head > *{
        padding: 2vmin 2vw;
    }


    .track .actions{
        font-size: 3vmin;
    }

    #all-tracks-list{
        width: 70%;
    }

    .edit-collection .simple-flex{
        display: flex;
        align-items: center;
        margin-bottom: 2vmin;
        /* padding-top:2vmin; */
    }

    
    /* Section : Player */

    #player{
        max-height: 15vh;
    }

    #player .progress,
    #player:hover .progress{
        height: 3vmin;
    }

    

    #player .playlist-holder{
        bottom: 12vmin;
        width: 75vw;
        right: -75vw;
    }

    #player .track-dp{
        width: 6.5vmin;
        height: 6.5vmin;
        margin-top: 0.5vmin;
    }

    #player .name-and-artist{
        max-width: calc(100% - 8vmin);
    }

    #player .track-name{
        font-size: 2.5vmin;
    }

    #player .artist-name{
        font-size: 2vmin;
        margin-left:0;
        padding: 1vmin 0;
        display: block;
    }

    #player .track-details{
        padding: 2vmin 0;
        min-height: 12vmin;
    }

    #player .middle-controls button{
        font-size: 3vmin;
        vertical-align: middle;
    }

    #player .middle-controls button.play-btn{
        height:7vmin;
        width: 7vmin;
        font-size: 2.5vmin;
    }
    #player .middle-controls button.play-btn::after{
        padding-left: 2px;
    }

    #player .volume-button{
        display: none;
    }


    #player .shuffle-btn, #player .end-controls .show-playlist{
        padding:0 5%;
    }

    #player .end-controls{
        font-size: 4vmin;
    }
    
    #player .end-controls .repeat-btn{
        display: none;
    }

    h1 .show-tippy-from-title.fas{
        font-size: 0.75em;
    }


    /* Section: Fullscreen Player */

    #player.fullscreen .fullscreen-elements{
        width: 100%;
        top: 11%;
    }

    #player.fullscreen .fullscreen-elements .fullscreen-artwork{
        margin-left: auto;
        margin-right: auto;
        height: 51vh;
        width: 84%;
    }

    #player.fullscreen .fullscreen-elements{
        margin-left:0;
    }

    #player .fullscreen-elements .fullscreen-track-details{
        text-align: center;
        margin-top: 3vmin;
        display: block;
        width: 100%;;
    }

    #player .fullscreen-elements .fullscreen-track-details .track-name,
    #player .fullscreen-elements .fullscreen-track-details .track-artist,
    #player .fullscreen-elements .fullscreen-track-details .track-album{
        font-size: 3vmin;
    }

    #player .fullscreen-elements .fullscreen-track-runtime{
        text-align: center;
        width: 100%;
        margin-top: 3vmin;
        font-size: 3vmin;
    }

    #player.fullscreen .fullscreen-top-nav{
        font-size: 4vmin;
        top: 10px;
        max-height: 9vh;
    }

    #player.fullscreen .fullscreen-playlist-nav{
        font-size: 4vmin;
        text-align: center;
        width: 100%;
        top: 80vh;
        right: unset;
        margin-top: unset;
    }

    #player.fullscreen .fullscreen-playlist-nav .fullscreen-playlist-runtime{
        display: none;
    }

    /* Artists */
    .socials-embed{
        display: none;
    }   
    
}


/* only small tablet landscape */
@media only screen and (max-width: 1024px) and (orientation: landscape) { 
    #player.fullscreen .fullscreen-elements .fullscreen-artwork{
        float: left;
        width: 50vmin;
        margin-right:4vmin;
        margin-left:2vmin;
        margin-bottom:0;
    }

    #player.fullscreen .fullscreen-elements{
        top:18%;
    }

    #player .fullscreen-elements .fullscreen-track-details{
        text-align: left;
        margin-top:0;
        margin-left:5vmin;
    }

    #player.fullscreen .fullscreen-top-nav{
        max-height: 11vh;
        padding: 3vmin 3%;
    }

    #player .fullscreen-elements .fullscreen-track-runtime{
        display: inline-block;
        padding-top: 0;
        margin-top: 5vmin;
        width: auto;
    }

    #player.fullscreen .fullscreen-playlist-nav{
        top: 52vh;
        left: 55vmin;
        text-align: left;
    }
}