/* For mobiles at breakpoint 640px width */



@media only screen and (max-width: 640px) {
    
    /* HOME PAGE */
    
    .tall-head-container .blue-btn{
        display: inline-block;
        min-width: 40%;
        margin-bottom: 2vmin;
    }

    .tall-head{
        min-height: 100vh;
    }

    /* PLAYER PAGE */

    /* Section: Global Stuff */

    body{
        font-size: 4.5vmin;
    }

    h2{
        font-size: 6vmin;
    }

    .heading-style-1{
        font-size: 4vmin;
    }

    /* 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);
    }

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

    .player-nav{
        margin-left:-70vw;
        min-width: 54vw;
        /* 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-social-media-container{
        position: relative;
        margin-top: 3vmin;
        margin-left: 5vmin;
        text-align: unset;
        bottom:unset;
    }

    .player-nav .player-social-media-container a{
        font-size: 5vmin;
    }
    .player-nav .player-social-media-container a:first-child{
        margin-left:0;
    }

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

    
    #player_content{
        width: 100%;
        transition: width 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);        
        margin-top:10.5vmin;
        min-height: calc(100vh - 10.5vmin);
    }


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

    .pretty{
     
        font-size: 3.75vmin;
    }
    

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

    .small-head-container{
        padding-top:14vmin;
    }

    

    
    .small-head-container .left-side p.small-text{
        font-size: 5vmin;font-weight: bold;
    }
    

    #dashboard_widgets .widget h3 .blue-btn{
        max-width: auto;
        display: block;
        float:none;
        clear:both;
        margin-top: 2vmin;
    }

    /* now when hamburger menu is open */

    .hamburger-menu-open .top-bar{
        width: 46vw;
        left: 54vw;
    }

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


    /* Player nav font sizes */

    .player-nav a.nav-item, .player-nav a.nav-item.create-collection{
        font-size: 5vmin;
    }

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

    .player-nav a.nav-item.higher-one img{
        width: 6vmin;
        margin-right: 2vmin;
    }

    .player-nav h2{
        font-size: 5vmin;
    }

    /* Taking care of the top bar stuff */

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

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

    .filter-bar .view-description{
        font-size: 3.5vmin;
        font-weight: normal;
    }

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

    .filter-bar .sellect-container{
        width: 96%;
        margin-bottom: 2vmin;
        padding:2vmin;
        overflow-x: hidden;
    }

    .filter-bar .sellect-container .sellect-element{
        max-width: 100%;
    }
    .filter-bar .sellect-container .sellect-arrow-icon{
        top: 0;
    }

    .filter-bar .sellect-container .sellect-destination-list .sellect-trigger.sellect-item{
        margin-right: 0.5vmin;
        margin-bottom: 0.5vmin;
    }


    .filter-bar .sellect-destination-list .sellect-item i.fa{
        font-size: 4vmin;
        margin-left: 1.5vmin;
    }

    .top-bar .search-bar,
    #menu-mobile-toggle {
        height: 10.5vmin;
    }

    .top-bar .search-bar{
        background-size: 4.5vmin 3.6vmin;
        background-position: left 1vmin center;
        padding-left: 6vmin;
    }

    .user_profile .user_name{
        display: none;
    }
    .top-bar .user_profile{
        top: 1.25vmin;
    }

    .top-bar .user_profile img{
        width: 7vmin;
        height: 7vmin;
    }

    .top-bar #cart_icon{
        width: 6vmin;
        height: 6vmin;
        margin-top: 1.25vmin;
    }

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

    
    

    #hamburger-menu-icon {
        width: 6vmin;
        height: 4.5vmin;
        position: relative;
        margin: 2.75vmin auto;
    }

    #hamburger-menu-icon span:nth-child(2) {
        top: 1.8vmin;
    }

    #hamburger-menu-icon span:nth-child(3) {
        top: 3.6vmin;
    }

    .hamburger-menu-open #hamburger-menu-icon span:nth-child(1){
        top: -0.3vmin;
        left: .8vmin;
    }

    .hamburger-menu-open #hamburger-menu-icon span:nth-child(3){
        top: 3.9vmin;
        left: 0.8vmin;
    }
    

    #hamburger-menu-icon::after{
        content:'';
    }

    
    

    .transparent-btn {
        margin-top:1vmin;    
    }

    .small-btn{
        font-size: 4vmin;
        display: block;
        padding: 2.2vmin 3.4vmin;
    }

    .small-btn.inline-btn{
        display: inline-block;
        margin:1vmin;
    }

    #bio{
        padding-top: 6vmin;
        padding-bottom: 14vmin;
    }

    #mobile_bio{
        font-size: 4vmin;
    }



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

    .tippy-menu .tippy-menu-item .fas{
        padding-right: 1.5vmin;
    }




    /* General Collections Stuff */

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

    button.play-track.pause::after,
    button.play-track.play::after {
        font-size: 3vmin;
    }



    .action-control-title{
        display: none;
        text-align: center;
        font-size: 3vmin;
    }
    

    #search_display .nf404{
        font-size: 3.5vmin;
    }
    
    #search_display .nf404 .exclaim-icon i {
        font-size: 10vmin;
        padding-bottom: 4vmin;
    }

    #search_display .collection-tile .side-play-btn,
    #search_display .collection-tile .coll-heart-btn{
        display: none;
    }

    #search_display .collection-tile{
        height: 25vmin;
        width: 30vmin;
    }

    #search_display .collection-tile{
        height: 25vmin;
        width: 20vmin;
    }

    #search_display .collection-tile img.city-img{
        height: 20vmin;
        width: 20vmin;
    }

    #search_display .collection-tile::after {
        height: 20vmin;
    }

    .collection-tile{
        margin: 4vmin 2vmin;
        width:25vmin;
    }

    .collection-tile img.city-img{
        height: 25vmin;
        width: 25vmin;
    }


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

    .collection-tile::after{
        height: 25vmin;
        border-radius: 2vmin;
    }

    
    .collection-tile .side-play-btn{
        height: 7vmin;
        width: 7vmin;
        background-size: 9vmin;
        top: 16.75vmin;
        opacity: 0.9;
    }

    .collection-tile .coll-heart-btn{
        height: 10vmin;
        width: 10vmin;
        background-size: 10vmin;
        top: 2vmin;
        right: 2vmin;
    }

    .fake-link2{
        font-size: 5vmin;
        line-height: 5vmin;
        margin-bottom: 1.5vmin;
    }

    .small-text{
        font-size: 3vmin;
    }

    .add-to-collection-list{
        margin-bottom: 5vmin;
        max-height: 60vh;
        overflow-y: scroll;
    }
    .add-to-collection-list .pretty{
        margin: 5vmin 0;

    }


    .big-actions .big-action::before{
        font-size: 3vmin;
        margin-bottom: -4vmin;
    }

    input.search-filter-input{
        background-size: auto 80%;
        padding-left: 6.5vmin;
    }

    #all-tracks-list{
        width: 80%;
        height: calc(100vh - 10.5vmin);
        top: 10.5vmin;
    }

    .track-info-modal-content .dp-show-edit{
        height:30vmin;
        width: 30vmin;
        float:none;
        margin-right:auto;
        margin-left: auto;
    }

    #all-tracks-list .tracks-list .track.just-added .name::before{
        content: '';
    }

    textarea.feedback-text{
        min-height: 50vmin;
        min-width: 90vw;
        font-size: 4vmin;
    }

    /* Radio */

    .radio-popup .modal__container{
        min-width: 93vw;
    }

    .radio-popup button.play-btn{
        height: 10vmin;
        width: 10vmin;
    }

    /* Demo page */

    .demo-popup .modal__container{
        min-width: 98vw;
        
    }

    #demo_interface .artists-list{
        grid-template-columns: repeat( auto-fit, 30vmin );
    }

    #demo_interface .artists-list .artist-holder .artist-img{
        height:20vmin;
        width: 20vmin;
    }

    #demo_interface .artist-holder::after{
        padding-top: 5vmin;
        font-size: 10vmin;
    }
    #demo_tracks{
        padding-top:8vmin;
    }
    #demo_interface #subheading{
        padding-top: 5vmin;
    }
    #demo_interface div.track.currently-playing .demo-track-progress{
        height: 2px;
    }
    body.isSafari #demo_interface div.track.currently-playing .demo-track-progress{
        height: 6px;
    }



    /* Modal */
    .modal__container{
        min-width: 95vw;
    }

    .modal__header{
        margin-bottom: 5vmin;
    }

    .modal-back-btn{
        margin-right: 1vmin;
    }

    .modal__title{
        font-size: 1rem;
        position: absolute;
        right: 10vmin;
        max-width: 64%;
    }

    .content-container, .tracks-list{
        font-size: 4vmin;
    }

    .tracks-list .track-list-head, .tracks-list.in-coll-modal .track-list-head{
        font-size: 4.8vmin;
    }

    .tracks-list .track{
        font-size: 4vmin;
        padding: 4vmin 0;
    }

    .tracks-list .track:nth-child(2n){
        background-color: #f5a23612;
    }
    .tracks-list .track:nth-child(2n+1){
        background-color: #f5a23605;
    }

    



    /* View Collection  */
    .collection-deets .dp-show-edit{
        height: 15vmin;
        width: 15vmin;
        margin-right: 3vmin;
    }
    .collection-deets .collection-name{
        margin-bottom: 1vmin;
    }

    .collection-deets .artist-name, .collection-deets .city-name{
        font-size: 4vmin;
        padding-top:2vmin;
    }

    .big-actions .big-action img{
        height: 17vmin;
    }

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

    .track .actions span.track-action{
        padding:3vmin;
    }

    .track.actions span.track-action.more-ellipsis-actions{
        padding-top:1.5vmin;
        display: inline-block;
    }

    .tracks-list .track > div{
        padding: 3vmin 1vw;
        vertical-align: top;
    }

    .tracks-list .track .artist,
    .tracks-list .track .album{
        font-size: 3.5vmin;
    }

    .tracks-list .track .actions,
    .tracks-list.smaller-padding-in-tracks .track .actions {
        padding-right: 5vmin;
    }

    .tracks-list.smaller-padding-in-tracks .track > div{
        padding: 4vmin 1vw;
    }

    .track .year-n-price > *,
    .track .city,
    .track .artist .city{
        font-size: 3.25vmin;
    }

    .track .year-n-price .download-track{
        display: none;
    }
    

    
    /* Cities and Artists List */

    .content-container.cities-list ,
    .content-container.artists-list{
        padding-bottom: 10vmin;
    }

    .content-container.cities-list + .content-container ,
    .content-container.artists-list + .content-container{
        padding-bottom: 20vmin;
    }
    .artist-holder .artist-img,
    .city-holder .city-img{
        height: 25vmin;
        width: 25vmin;
    }

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

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

    .tabbed-nav{
        font-size: 5vmin;
    }

    .collection-list:empty::after,
    .artists-list:empty::after{
        font-size: 5vmin;
        background-size: 5vmin;
        padding-left: 6vmin;
    }

    .error_msg{
        font-size: 3.5vmin;
        max-width: 99%;
    }

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

    /* Section : City Listing */

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

    
    

    /* Section : Player */

    #all_collections  h1{
        font-size: 5vmin;
    }

    #player{
        max-height: 25vh;
    }

    #player .playlist-holder{
        bottom: 18vmin;
        width: 95vw;
        right: -95vw;
        background-color:black;
    }
    
    #player .track-dp{
        display: none;
    }

    #player .name-and-artist{
        max-width: 100%;
    }

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

    #player .artist-name{
        font-size: 3vmin;
    }

    #player .track-details{
        min-height: 15vmin;
        width: 25%;
    }
    
    #player .middle-controls{   
        width: 44%;
    }
    
    #player .end-controls{
        width: 29%;
    }

    #player .middle-controls button{
        font-size: 4vmin;
    }

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

    

    #player .middle-controls button.next-prev-btn i.fas {
        margin: 2vmin 1vmin; 
        /* Had to do this so that small iphones do not have controls in two lines */
    }

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

    #player .end-controls{
        font-size: 5vmin;
    }
    
    #player .playlist-holder .tracks-list .track{
        font-size: 5vmin;
    }
    #player .playlist-holder .tracks-list .track > div,
    #player .playlist-holder .tracks-list .track > span{
        padding: 2vmin 0;
        font-size: 5.5vmin;
    }

    #player .playlist-holder .playback-list .dp-show-edit{
        width:9vmin;
        min-width: 9vmin;
        min-height: 9vmin;
        height:9vmin;
    }
    
    #player .playlist-holder .playback-list .name{
        font-size: 5vmin;
    }

    #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: 5vmin;
    }

    #player .fullscreen-elements .fullscreen-track-runtime{
        font-size: 4vmin;
    }

    #player.fullscreen .fullscreen-elements .fullscreen-artwork{
        height: 40vh;
        width: 84%;
        margin-bottom:6vmin;
    }

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

    #player.fullscreen .fullscreen-top-nav{
        top:8%;
    }


    
    .footer{
        font-size: 3.75vmin;
    } 


}

/* a small fix for the artwork in fulscreen else it uses the potrait mobile less than 640px , ie. 85% of width instead of 50vmin */
@media only screen and (max-width: 640px) and (orientation: landscape) { 
    #player.fullscreen .fullscreen-elements .fullscreen-artwork{
        width: 50vmin;
    }

}