@media screen and (max-width: 1300px) {
  .notation{
    width: 30%;
    /* margin-right: 5rem; */
  }

  .notation img{ 
    height: 72%;
  }
}



@media screen and (min-width: 1025px) and (max-width: 1121px) {
  aside {
    height: calc(100vh - 80px);
  }

}



@media screen and (max-width: 1024px) {

  header {
    left: 0rem;
  }
  
  
  #header .logo .open-icon i{
    padding: 8px 13px;
    margin-left: -3.5rem;
    display: flex;
    position: absolute;
    z-index: 100;
  }

  #header .logo{
    margin-left: 4rem;
  }

  #left-menu{
    margin-left: -21rem;
    transition: margin-left 0.5s ease-in-out;
    height: calc(100vh - 65px);
  }

  #left-menu.active{
    margin-left: -0rem;
    transition: margin-left 0.5s ease-in-out;
    height: calc(100vh - 65px);
  }

  #menu-control {
    margin-left: 0;
    transition: margin-left 0.5s ease-in-out;
    position: absolute;
  }

  #menu-control.active {
    margin-left: 20rem; 
  }



  #header .logo .top-open-icon #top-menu-icon{
    background-color: #f3c4c4;
    display: flex;
    position: fixed;
    right: 0.5rem;
    padding: 8px 13px;
  }





  .icons{
    position: absolute;
    width: 45%;
    background-color: #ffc0c0;
    box-shadow: 0 0 8px 0;
    z-index: 1000;
    margin-left: 46%;
    padding: 10px 30px;
    border-radius: 10px;

    margin-top: -60rem;
    transition: margin-top 0.5s ease-in-out;

  }

  .icons li{
    font-size: 15px;
    margin-right: 20px;
    margin-bottom: 20px;
    transition: margin-top 0.5s ease-in-out;
  }



  #category-list.active1{
    margin-top: 1rem;
    transition: margin-top 0.5s ease-in-out;
  }

  #category-list.active1::-webkit-scrollbar {
    display: none;
  }



  aside{
    width: 300px;
  }

  .song-name-heading{
    margin-left: 1rem;
    width: 58%;
  }


  .song-name-search input{
    font-size: 15px;
    padding: 10px 40px 10px 15px;
  }

  #left-menu ul li{
    font-size: 13.5px;
    }




  #content {
    margin-left: 0px;
    width: 92%;
    margin-top: -30px;
  }

  #content #banner .content h2{
    font-size: larger;
  }

  #content #banner .content h4{
    font-size: 16px;
  }
  
  #content #banner .content p{
    font-size: 14px; 
  }

  
  #content #banner .content ul li a{
    font-size: 15px;
    padding: 10px 20px;
  }


 .image-object{
    margin-right: 1rem;
  }
  
  .image-object img{
    box-shadow: 0 0 20px 0 rgb(248, 145, 145);
    border-radius: 10px;
    width: 200px;
  }


  #content #TeamUp .content{
    margin-top: -6rem;
  }

  #content #TeamUp .content h3{
    font-size: 19px;
  }

  #content #TeamUp .content .songtitle textarea{
    font-size: 14px;
    width: 90%;
  }

  #content .pause-play-controls i,
  #content .stop-controls i{
    font-size: 20px;
    margin-left: -0.5rem;
  }
  
  #content #TeamUp .content #slider{
    width: 65%;
    padding: 0.5px;
  }


  .notation{
    width: 26%;
  }
  
  .notation img{ 
    height: 85%;
  }

  
  footer p{
    font-size: 15px;
  }

  .fullscreen-overlay #image-icon{
    right: 2rem;
    top: 1rem;
  }

  .audio-controlls, .img-controlls  {
    font-size: 10px;
  }

  .parent-notation{
    width: 25%;

    position: absolute;
    right: 2rem;
    top: 17rem;
  }
  
  .img-view {
    width: 100%;
  }

  #content #TeamUp .content .music-player {
    width: 70%;
}



}






@media screen and (max-width: 768px) {

  .icons{
    width: 45%;
    margin-left: 45%;

  }

  .icons li{
    font-size: 14px;
  }

  .image-object{
    margin-right: 1rem;
  }

  
  #content #TeamUp .content .music-player{
    width: 80%;
  }


  .notation{
    width: 30%;
  }

  .notation img{ 
    height: 72%;
  }


  .img-view {
    width: 100%;
  }
  
  #video-container{
    right: 1rem;
  }

}








@media screen and (max-width: 742px) {
  #left-menu{
    height: calc(100vh - 85px);

  }

  #left-menu.active{
    height: calc(100vh - 85px);

  }
}