@media screen and (max-width : 768px){
    /** LAYOUT **/
    .hide-phone{display : none !important;}
    .hide-desktop{display:block;}
    .show-phone{display:block;}
    .no-phone-side-margin{margin-left:0 !important; margin-right:0 !important;}
    .no-phone-side-padding{padding-left:0 !important; padding-right:0 !important;}
    body{
        background-image : none;
        background-color : #eee7c7;

    }
    .row-100-fullContentCentered{
        display : block;
        height : auto;
    }

    /** MENU **/
    #left-side{
        display : flex;
        align-items : center;
        justify-content : center;
        height : auto;
        /*text-align : left;*/
    }
    #left-side.menu{
        padding-top : 50px;
        margin-bottom : 20px;
    }
    #left-side.menu img.logo{
        width : 100px;
    }
    #left-side .hide-desktop{
        display : inline-block !important;

    }
    #left-side.menu .items-wrapper{
        display : flex;
        align-items : center;
        justify-content : center;
    }
    #left-side.menu .item{
        width : 80px;
        height : 80px;
        background-color : #361d1b;
        border-radius : 50%;
        margin-left : 10px;
        font-size : 20px;
        font-family: 'Adventure';
        /*line-height : 20px;*/
        /*padding-top : 18px;*/
        /*padding-right : 8px;*/
        color : #ffaa7a;
    }
    #right-side{
        height : auto;
    }
    #choose-genre{
        display : flex;
        align-items : center;
        justify-content : center;
        flex-wrap: wrap;
        background-color : #361d1b;
        width : 90%;
        margin: -25px auto 25px;
        border-radius : 20px;
        color : #ffaa7a;
        font-family: 'alice';
        font-size : 20px;
        max-width : 100%;
        -webkit-transition: height .3s ease;
        transition: height 0.2s ease;
        height: 0;
        overflow: hidden;
    }
    #choose-genre.active{
        height : 180px;
    }
    #choose-genre a{
        margin : 10px;
    }
    #bottom-mentions{
        position : relative;
        width : 200px;
        height : 30px;
        bottom : 0;
        margin: 40px auto 40px;
        font-size : 12px;
        text-align : center;
        color : #703e2e;
    }

    /** TRACKS CARD **/
    .track-card{
        display : flex;
        align-items : center;
        justify-content: center;
        clear : both;
        margin-top : 50px;
        text-align: left;
    }
    .track-card:first-of-type{margin-top : 0;}
    .track-card:last-of-type{margin-bottom : 80px;}
    .track-card a{
        width : 320px;
    }
    .track-card .cover{
        border-radius : 10px;
    }
    .track-card .top-wrapper .foliage{
        display : none;
    }
    .track-card:hover .cover{
        background-position : inherit;
    }
    .track-card:hover .enter{
        display : none;
    }
    .track-card .top-wrapper{
        float : left;
    }
    .track-card .bottom-wrapper{
        padding-top : 20px;
        float: left;
        margin-top : 0;
        margin-left : 10px;
    }

    /** PATH PAGE **/
    #path-page{
        margin-top : 0;
        padding-top : 0;
    }

    /** TRACK CONTENT **/
    #track-content{
        width : 100%;
    }

    .track-page{
        padding-bottom : 40px;
    }

    #social-corner{
        position : fixed;
        right : 5px;
        bottom : 110px;
    }
    .track-page  #social-corner{
        bottom : 10px;
    }

    #social-corner img{
        width : 50px;
        height : 50px;
    }

}