/*********************************************************
    		LAST MODIFIED: 05/30/2014
*********************************************************/
/* Media Querie Min-Width */
/* Colors */
.clearfix:after {
  content: "";
  display: table;
  clear: both; }

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100000; }

.header {
  /*border-bottom: 1px solid #ccc;*/ 
}
.background-img{height: 30%;
    overflow: hidden;
    width: 100%;
    max-height: 168px;
    max-width: 1360px;
    display: block;
    margin: 0 auto;}
  .header .container {
    background-color: transparent;
    margin-right: auto;
    margin-left: auto;
    padding: 0; }
/*
    @media only screen and (min-width: 320px) {
      .header .container {
        max-width: 580px; } }
*/
/*
    @media only screen and (min-width: 580px) {
      .header .container {
        max-width: 580px; } }
*/
    @media screen and (min-width: 768px) {
      .header .container {
        max-width: 1150px;
            min-width: 950px;} }
  @media screen and (min-width: 768px) {
    .header .header-info {
      display: table;
    height: 35px;
    width: 1225px; } }
  .header .header-info .label {
    color: #FFF;
    text-align: center;
    vertical-align: center;
    line-height: 35px; }
    @media screen and (min-width: 768px) {
      .header .header-info .label {
        display: table-cell;
        width: 50%;
        text-align: left;
        padding-left: 10px;
        vertical-align: top; } }
  .header .header-info .search-bar {
    display: none; }
    @media screen and (min-width: 768px) {
      .header .header-info .search-bar {
        display: table-cell;
        text-align: right;
        width: 50%;
        padding-left: 37%;
    padding-right: 3%;
        vertical-align: top; }
        .header .header-info .search-bar input[type="text"] {
          height: 23px;
          width: 200px;
          padding-left: 10px; 
        outline:none;}
        input[type="text"].search-input{
              background: #eee none repeat scroll 0 0;
              border-color: #FFF;
              border-radius: 5px;
              border-style: solid;
              border-width: 1px;
              color: black;
              font-weight: bold;
        }
        input[type="text"].search-input::selection {
          background: #fff; /* WebKit/Blink Browsers */
        }
        input[type="text"].search-input::-moz-selection {
          background: #fff; /* Gecko Browsers */
        }
        .search-button{ 
    display: block;
    font-size: 0.8em;
    height: 19px;
    left: 95%;
    padding: 4px 1px 0;
    position: relative;
    top: -26px;
    width: 19px;}
        .header .header-info .search-bar  {
          width:auto;
    }
          .header .header-info .search-bar .search-button a.button {
            background-image: url(../images/search-btn.png);
            width: 25px;
            height: 25px;
            background-size: 25px 25px;
            background-repeat: none;
            padding-top:3px;
            display: block; } }

@media screen and (min-width: 768px) {
  .search-bar {
    display: none; } }
.search-bar .search-bar-info input[type="text"] {
  display: block;
  width: 100%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.row {
  margin-right: auto;
  margin-left: auto; }
  @media only screen and (min-width: 320px) {
    .row {
      max-width: 580px; } }
  @media only screen and (min-width: 580px) {
    .row {
      max-width: 768px; } }
  @media screen and (min-width: 768px) {
    .row {
      max-width: 1280px; } }

@media screen and (min-width: 768px) {
  .body-wrap {
    display: table;
    width: 96%;
    height: 620px; } }
.body-wrap .filters.tablet {
  display: none; }
@media screen and (min-width: 768px) {
  .body-wrap .filters.mobile {
    display: none; }
  .body-wrap .filters.tablet {
    display: table-cell;
    padding-left:4%;
    vertical-align: top;
    min-width:400px;
    width:58%;
    background-color: transparent;
    cursor:hand; }
    .body-wrap .filters.tablet .container {
      padding: 0; 
      margin-right: -40px;
      margin-left: -14px;}
    .body-wrap .filters.tablet .filter-info {
      border-collapse: collapse; }
      .body-wrap .filters.tablet .filter-info .genre, .body-wrap .filters.tablet .filter-info .keywords {
          border-left: 1px solid #000;
          display: table-cell;
          font-family: "Raleway",sans-serif;;
          font-size: 1.4em;
          min-width: 183px;
          padding-left: 0;
          padding-right: 74px;
          vertical-align: top;
          width: 52%;
          padding-top: 0;
    }
      .body-wrap .filters.tablet .filter-info .keywords .selected {
        text-align: center;
        padding: 5px;
        line-height: 50px; }
      .body-wrap .filters.tablet .filter-info .genre .selected {
        display: none; }
      .body-wrap .filters.tablet .filter-info ul {
        letter-spacing: 5px;
        list-style: none;
        margin: 0;
        padding: 0;
        }
    .filter-item {
        font-size:1em;
        letter-spacing: 2px;
        width: 190px;
    }
        .body-wrap .filters.tablet .filter-info ul li.active {
         /* background-color: rgba(148,148,148,.1);*/
         
          
          background-color:#eee;
          margin: 1px;

          }
        .body-wrap .filters.tablet .filter-info  ul li a {
          display: block;
          height: 32px;
          line-height: 33px;
          border-bottom: 1px solid black;
          border-radius: 0px;
          text-align: left; 
          outline: 0 none;
          white-space: nowrap;
          overflow: hidden;
        }
          .body-wrap .filters.tablet .filter-info ul li a span {
            margin-left: 15px; }
        .body-wrap .filters.tablet .filter-info ul li .sub-genre {
          width: 90%;
          display: none;
          border-bottom: 1px solid transparent;
          padding-top: 0;
          padding-bottom: 0;
          background-color: transparent; }
          .body-wrap .filters.tablet .filter-info ul li .sub-genre.active {
            display: block; }
        
          .body-wrap .filters.tablet .filter-info ul li .sub-genre ul {
            padding-top: 5px;
            padding-left: 18px;
            padding-bottom: 5px;
            margin-left: -29px;}
            .body-wrap .filters.tablet .filter-info ul li .sub-genre ul li a {
               border: medium none;
                font-size: 0.7em;
                height: 24px;
                line-height: 24px;
                padding-left: 34px;
                width: 199px;
                margin-left: 1px;
                letter-spacing: 4px;    
            }
      .body-wrap .filters.tablet .filter-info .keywords {
        width: 50%;
        border-left: 1px solid #000;
        background-color: transparent; }
        .body-wrap .filters.tablet .filter-info .keywords ul li a {
         /* border-bottom: solid 1px black;*/
          border-top: none;
          text-align: left;
           padding-left: 15px;
          display:inline-block;
          width: 96%;
          margin-left: 1px;} }
.body-wrap .filters .filter-info {
  display: table;
  width: 87%;
  border-collapse: separate;
  border-spacing: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .body-wrap .filters .filter-info .genre, .body-wrap .filters .filter-info .sub-genre, .body-wrap .filters .filter-info .keywords {
    width: 33%;
    display: table-cell;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    background-color: transparent;
     }
    @media screen and (min-width: 768px) {
      .body-wrap .filters .filter-info .genre, .body-wrap .filters .filter-info .sub-genre, .body-wrap .filters .filter-info .keywords {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        -ms-border-radius: 0px;
        -o-border-radius: 0px;
        border-radius: 0px; } }
    .body-wrap .filters .filter-info .genre select.list, .body-wrap .filters .filter-info .sub-genre select.list, .body-wrap .filters .filter-info .keywords select.list {
      display: none; }
.body-wrap .library {
  margin-bottom: 120px;
  margin-top: 10px; }
  @media screen and (min-width: 768px) {
    .body-wrap .library {
      vertical-align: top;
      display: table-cell;
      width: auto;
      margin-bottom: 0px; 
      padding-top:7%;
      margin-left: auto;
    }
      .body-wrap .library .container {
        padding: 0; } }
  @media screen and (min-width: 768px) {
    .body-wrap .library .library-info .player {
      height: 115px;
      overflow: hidden; 
      padding-bottom:18px;} }
  .body-wrap .library .library-info .player .custom-content {
    display: none; }
    @media screen and (min-width: 768px) {
      .body-wrap .library .library-info .player .custom-content {
        background-image: url(http://www.w8themes.com/wp-content/uploads/2013/08/Musical-Notes-Wallpaper.jpg);
        background-size: cover;
        display: block;
        height: 280px;
        border-right: 1px solid #222;
        border-left: 1px solid #495359;
        border-bottom: 1px solid #495359;
        background-color: #222; }
        .body-wrap .library .library-info .player .custom-content.player-active {
          background-image: url(http://www.w8themes.com/wp-content/uploads/2013/08/Musical-Wallpapers.jpg); } }
  @media screen and (max-width: 700px) {
    
    .track-name{
      margin-left:5%;
    }
    .button-holder{
      width:30%;
    }
    .track-text{
        font-size:.8em;
    }
    .tracklist-icon{
       font-size: 1.6em;
      }

  }
  
  @media screen and (min-width: 768px) {
    .body-wrap .library .library-info .library-list-holder {
      height: 100%;
      overflow: hidden;
      margin-left: 7%;
      margin-right: 3%; 
      width: 108%;} }
  .body-wrap .library .library-info ul.library-list {
    background-color: transparent;
    list-style: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 318px;
}
    @media screen and (min-width: 768px) {
      .body-wrap .library .library-info ul.library-list {
        overflow: auto;
        height: 100%;
        width: 100%;
        min-width: 444px;
        float:left;
        margin-right: 0px; 
       } }
    @media screen and (min-width: 768px) {
      .body-wrap .library .library-info ul.library-list {
        /*-webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;*/
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        -ms-border-radius: 0px;
        -o-border-radius: 0px;
        border-radius: 0px; 
        margin-top:5px;} }
    .body-wrap .library .library-info ul.library-list li {
       background: #555 none repeat scroll 0 0;
      margin: 1px;

    border-radius: 3px;
    box-sizing: border-box;
    color: white;
    font-size: 1.1em;
    
    margin: 0 2px 1px;}
      .body-wrap .library .library-info ul.library-list li.track.header {
        display: none; }
        @media screen and (min-width: 768px) {
          .body-wrap .library .library-info ul.library-list li.track.header {
            display: table;
            width: 100%;
            background-color: rgba(204,204,204,0.5);
            /*border-top: 1px solid #495359;*/
            padding-top: 1.5%;
            line-height: 30px; } }

      .body-wrap .library .library-info ul.library-list li:last-child {
        border: none; }
      .body-wrap .library .library-info ul.library-list li.track .track-genre, .body-wrap .library .library-info ul.library-list li.track .track-sub-genre {
        display: none; }
      .body-wrap .library .library-info ul.library-list li.track .track-controls {
        padding: 5px; }

        .body-wrap .library .library-info ul.library-list li.track .track-controls .controls {
          display: table;
          margin-left: auto;
          width: 200px; }
        @media screen and (min-width: 768px) {
          .body-wrap .library .library-info ul.library-list li.track .track-controls .controls {
             display: table;
             
              margin-right: 15px;
              padding: 0;
              width: 126px;
             

             } }
        
        .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder {
          display: table-cell;
    width: 16%; }
          @media screen and (min-width: 768px) {
            .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder {
              /*width: 33%; */} }
          .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder .button {
            display: block; }
            @media screen and (min-width: 768px) {
              .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder .button {
                margin: auto 0; } }
            .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder .button.play {
                  width: 25px;
                  height: 25px; }
            .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder .button.pause {
                 width: 25px;
                height: 25px; }
            .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder .button.like {
              width: 25px;
                height: 25px; }
            .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder .button.download {
              width: 25px;
                height: 25px; margin-top: 1%;}
              @media screen and (min-width: 768px) {
                .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder .button.download {
                  float: none;
                  margin: auto; } 
          .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder.play, .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder.like {
            /*width: 25%;*/ }
                  }
            @media screen and (min-width: 768px) {
              .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder.play, .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder.like {
                /*width: 33%;*/ } }
      @media screen and (min-width: 768px) {
        .body-wrap .library .library-info ul.library-list li.track {
          display: table;
          width: 99%;
           background: #555555 none repeat scroll 0 0;
          border-radius: 4px;
          color:white; }
          .body-wrap .library .library-info ul.library-list li.track.header {
            color: #FFF; }
            .body-wrap .library .library-info ul.library-list li.track.header .item {
              border-right: 1px solid #ccc; 
           }
          .body-wrap .library .library-info ul.library-list li.track .item {
            display: table-cell;
            padding: 2px;
               font-weight: 300;
                   text-align: center;
          }
          .body-wrap .library .library-info ul.library-list li.track .track-genre {
            width: 25%; }
          .body-wrap .library .library-info ul.library-list li.track .track-sub-genre {
            width: 20%; }
          .body-wrap .library .library-info ul.library-list li.track .track-name {
            width: 63%; }
          /*.body-wrap .library .library-info ul.library-list li.track .track-controls {
            width: 50%; } */}
          @media screen and (min-width: 768px) and (min-width: 768px) {
            .body-wrap .library .library-info ul.library-list li.track .item {
                  padding: 2%;
               line-height: 1.8em;
              vertical-align: middle;} 
     a.keyword-label.active{
        background:#eee;
        border-bottom:0px solid #ddd;
        border-top:0px solid #ddd;
        /*box-shadow: 1px 2px 8px -5px #555;*/
    }
    a.sub-genre-label.active{
        background:#eee;
        border-bottom:0px solid #ddd;
        border-top:0px solid #ddd;
         margin-left: 1px;
        /*box-shadow: 1px 2px 8px -5px #555;*/
    }
    a.genre-label.active{
        background:#eee;
        border-bottom:0px solid #ddd;
        border-top:0px solid #ddd;
        /*box-shadow: 1px 2px 8px -5px #555;*/
    }
    .track-text{
    /*font-family: "Raleway",sans-serif;*/
    }
    .tracklist-icon{
      color:#FFF;
      font-size:1.8em;    }
    .track-length-span{
    font-size: 1.2em;
    float:right;
     width: 40px;
    margin-right: 0px;
    margin-top: -1px;
              }
    .track-name-span{
    padding-left: 7%;
    font-size: 1.2em;
    float: left;
    text-align: left;
        width: 77%;
    }
}
              .spacer{width:50px; height:350px;position:relative;z-index: -1}
.vertical-text-genres {
  
 
  margin-left: 76%;
    margin-top: 423%;
 

  font-size:3em;
  font-family: 'Poiret One', cursive;
  letter-spacing: 15px;
text-shadow: 0 0 0 #000;
  /* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 40% 15%;
  -moz-transform-origin: 40% 15%;
  -ms-transform-origin: 40% 15%;
  -o-transform-origin: 40% 15%;
  transform-origin: 35% 15%;


}

.vertical-text-keywords {
  
 
  margin-left: 76%;
    margin-top: 423%;
 

  font-size:3em;
  font-family: 'Poiret One', cursive;
  letter-spacing: 15px;
text-shadow: 0 0 0 #000;
  /* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 40% 16%;
  -moz-transform-origin: 40% 16%;
  -ms-transform-origin: 40% 16%;
  -o-transform-origin: 40% 16%;
  transform-origin: 40% 16%;


}

#mobile-menu{display:none;visibility: hidden;}
 #menu-content{
    display:none;
  }
ul.list{
    margin-top:-2px;
}

/* Mobile */
@media screen and (max-width: 768px) {
  #mobile-menu{
     background: #555 none repeat scroll 0 0;
    border-radius: 5px 5px 3px 3px;
    display: inline-block;
    height: 35px;
    margin: 0 3px 0 4px;
    visibility: visible;
    width: 98%;
    min-width: 323px;
  }
  #menu-content{
    display:none;
    border-radius:0 0 5px 5px;
    background:#ccc;
    border: solid 1px #ccc;
    border-top:none;
    margin: 0 5px;
    min-width: 336px;
    width: 97%;
  }
  .menu-back{
    display:none;
    border-radius:5px;
    background:rgba(0,0,0,.4);
    border: solid 1px #ccc;
    border-top:none;
  }
  .icon-mobile{
    color: #f2f2f2;
    font-size: 1.5rem;
    margin-bottom: 2px;
    margin-right: 2px;
    margin-top: 2px;
    opacity: 1;
    text-shadow:0 0 0 #000;
  }

  .genre-head{
    color: #000;
    font-family: "Poiret One",cursive;
    font-weight: 600;
    margin-bottom: 5px;
    margin-top: 0;
    padding: 2px;
    text-align: left;
    width: 100%;
  }
    h3 {
        font-size: 1.2em;
        line-height: 1.2em;
    }
  .keyword-head{
    color: #000;
    font-family: "Poiret One",cursive;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 0;
    padding: 2px;
    text-align: left;
    width: 100%;
  }
    .genre{
        color:#FFF;
        font-family: "Poiret One",cursive;
        font-size: 18px;
        font-weight: bold;
        margin-left: 17px;
    }
    .keyword{
        color:#FFF;
        font-family: "Poiret One",cursive;
        font-size: 18px;
        font-weight: bold;
        margin-left: 130px;
    }
    .menubar{
        line-height: 15px;
        margin-top: 10px;
    }
    .genre-mobile{
    float: left;
    font-size: 1.1em;
    margin: 0 12px 15px;
    padding: 5px;
    width: 51%;
  }
  .keyword-mobile{
    5px 4px;
    margin:0 10px 15px 10px;
    float:right;
    width:31%;
    font-size:1.1em;

  }
    #menu-button{
        float:right;
        margin-right: 6px;
        margin-top: -3px;
    }
  ul.list-mobile{list-style: none outside none;width:100%;}
  ul.list{list-style: none outside none;width:100%;}
 
  li.genre-item{margin-left: 7%;
    padding-right: 20%;}
    li.filter-item{margin-left: -3%;}
/*
     li.genre-item.active{
        background:transparent;
        font-weight: bold;
    }
*/
    a.genre-label.active{
        background:transparent;
        font-weight: bold;
    }
    a.sub-genre-label.active{
        background:transparent;
        font-weight: bold;
    }
    a.keyword-label.active{
        background:transparent;
        font-weight: bold;
    }
  .track-length-span{ 
      /*font-size:1.1em;
      float: right;
      padding-right: 5%;*/
      visibility: hidden;
      display: none;
     
    }
    .track-controls {
         margin-top: -30px;
    }
    .tracklist-icon{
      color:#FFF;
     
    }
    .track-name{
        padding-bottom: 3px;
    padding-top: 2%;
    }
    .track-text{font-size:1em;}
    .track-name-span{
        padding-right:25%;
    }
    .sub-genre-label{font-size:.9em;}
    .body-wrap .library .library-info ul.library-list li.track .track-controls .controls {
        display: table;
        margin-left: auto;
        width: 40%;
        margin-top: -1px;
    }
    .body-wrap .library .library-info ul.library-list li.track .track-controls .button-holder .button.pause .button.play  {
         height: auto;
        width: auto;
    }
    .icon .icon-play-new .icon-pause2 .tracklist-icon {
        height: auto;
        width: auto;
    }
/*
    .icon-play-new::before {
         font-size: 1.5em;
    }
    .icon-pause2::before {
        font-size: 1em;
    }
*/
}

.liked{
  opacity:1;
  color:gold;
  text-shadow: 1px 1px #000;
}
.un-liked{
  opacity:.5;
}
/*.tracklist-icon:hover{
  color: #eee;
  opacity: 1;
}*/
.traclist-icon-active{
  opacity:.9;
  color:rgba(100, 150, 255, 0.4);
}
.tracklist-search{
  float:right;
  font-size:1.6em;
  color:#000;
  margin-right: 10%;
  /*background-color: rgba(210, 210, 210, 0.5);*/
  height: 100%;
  padding:0 5px;

}
.conditional{
  color:#FFF;
  letter-spacing: 0px;
}
 @media screen and (max-width: 768px) {
#jp_container_1 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; 
 }
}

  @media screen and (min-width: 768px) {
    #jp_container_1 {
      position: static; 
      bottom: 0;
      left: 0;
     width: 97%; } }
.track-length{
  float: right;
    font-size: 1.1em;
    padding-right: 7%;
}
.play{
  color:#FFF;
}
.play:hover{
  color:#FFF;
  opacity:.8;
};
.filter-item{
  border-bottom:1px solid black;
  width:100%; 
}
.filter-active{
  background: rgba(9,9,9,.5);
  color:white;
  line-height: 1em;
}
.library-info {
  cursor:hand;
}
.footnote{font-size: 0.85em;
    letter-spacing: 1px;
    font-weight: normal;
    margin-left:1%;
  }


.filter-item-sub{
    width:192px;
}

.fa-sort{
    color: white;
    font-size: 21px;
}

/*IPAD*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
    .body-wrap .filters.tablet .filter-info .genre, .body-wrap .filters.tablet .filter-info .keywords {
        padding-right: 5%;
    }
    .header .header-info .search-bar {
        padding-right: 17%;
    }
    .body-wrap .filters.tablet {
    padding-left: 7px;
    }
    .body-wrap .filters.tablet .filter-info .keywords {
        padding-right: 3%;
    }
    .body-wrap .library .library-info .library-list-holder {
        margin-left: 1%;
    }
}
#rotate{
    display:none;
}
.rotate-msg {
    display:none;
}
/*Ipad Mini*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation:portrait) {
    #rotate {
            display: block;
            z-index: 1000;
            background-color: rgba(0,0,0,1);
            height: 100%;
            width: 100%;
            min-width: 768px;
            min-height: 1366px;
            margin-top: -101%;
            position: relative;
            padding-top: 58%;
            padding-left: 12%;
    }
    .rotate-msg{
        color: white;
        font-size: 24px;
        height: 100%;
        width: 100%;
        display: inherit;
    }
}
/*Ipad Pro*/
@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1366px) and (orientation:portrait) {
   .rotate-msg {
        padding-left: 9%;
        padding-top: 20%;
        font-size:2em;
    }
}
/*Iphone 5*/
@media only screen and (device-aspect-ratio: 40/71) {
    .keyword{
        margin-left:25%;
    }
    #mobile-menu{
        min-width: 310px;
        width: 98%;
      }
}
@media only screen and (device-aspect-ratio: 71/40) and (orientation:landscape) {
    .keyword{
        margin-left:55%;
    }
    #mobile-menu{
        min-width: 310px;
        width: 98%;
      }
}
/*Iphone 6plus*/
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 3)
{ 
    .keyword{
        margin-left: 39%;
    }
    #mobile-menu{
        width: 98%;
      }
}
/* iPhone 6plus landscape */
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 3)
    {
        .keyword{
            margin-left: 59%;
        }
        .track-controls {
            margin-top: -24px;
        }
        .track-name {
            padding-left: 2%;
        }
        .icon{
            font-size:1.5em;
        }
        .body-wrap .library .library-info ul.library-list li.track .track-controls .controls {
            width: 212px;
            margin-top: -7px;
        }

        #mobile-menu 
        {
            width:99%;
        }
    }

/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
{ 
    .keyword{
            margin-left: 47%;
        }
}