#canvas_cont {
    left: 0px;
    top: 350px;
    position: absolute;
    width:1024px;
    height:300px;
    overflow: hidden
}

#canvas_eq{
    position: absolute;
    left: 0px;
    top: 620px;
}

.db {
    position: absolute;
    left: 0px;
    color: #aaa;
    font-family: 'Roboto', sans-serif;
    width: 35px;
    text-align: right;
/*    opacity: 0.5;*/
    line-height: 1.2;
    font-size: 12px;
}

.db4 {
    top: 144px;
}

.db1 {
    top: 2px;
}

.db2 {
    top: 49px;
}

.db3 {
    top: 97px;
}

.db5 {
    top: 191px;
}

.db6 {
    top: 238px;
}

.db7 {
    top: 284px;
}

.line {
    position: absolute;
    left: 40px;
    height: 1px;
    background-color: rgba(256,256,256,0.2);
    width: 100%;
    pointer-events: none;
    opacity: 0.4;
}

.l1 {
    top: 8px;
}

.l2 {
    top: 55px;
}

.l3 {
    top: 103px;
}

.l4 {
    top: 150px;
}

.l5 {
  top: 197px;  
}

.l6 {
    top: 244px;
}

.l7 {
    top: 291px;
}

.eqalizers {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 350px;
    width: 1024px;
}

.controls {
    position: absolute;
    top: 30px;
    left: 20px;
    height: 283px;
}

.regulators {
    display: inline-block;
    height: 283px;
    width: 28px;
}

.markers {
    background-size: 100% 100%;
    background-image: url(../images/markers.png);
    display: inline-block;
    height: 283px;
    width: 15px;
}

.base {
    background-size: 100% 100%;
    position: relative;
    background-image: url(../images/base.png);
    top: 0px;
    left: 8px;
    height: 283px;
    width: 13px;
}

.handle {
    background-size: 100% 100%;
    position: relative;
    background-image: url(../images/handle.png);
    top: -167px;
    left: 0px;
    height: 51px;
    width: 28px;
}

.octave{
    position: absolute;
    top: 295px;
    color: black;
    font-family: 'Roboto', sans-serif;
    width: 30px;
    text-align: center;
    opacity: 0.5;
    line-height: 1.2;
    font-size: 12px;
}

.wrapper {
    position: relative;
    width:1024px;
/*    height: 920px;*/
    margin: 0 auto;
    opacity: 0;
}

.audio_controls {
    position: absolute;
    margin-top: 30px;
    right: 0px;
    width: 500px;
}

.fake_btn{
    width: 500px;
    color: rgba(0, 0, 0, 0.5);
    font-family: 'Roboto', sans-serif;
    line-height: 1.8;
    font-size: 16px;
    text-align: center;
    border: 1px solid rgba(143, 150, 154, 0.5);
    border-radius: 2px;
    background-color: rgba(222, 226, 227, 0.8);
}

.input_block{
    position: relative;
    top: 0px;
    width: 500px;
}

input {
    position: absolute;
    top: 0px;
    width: 500px;
    height: 30px;
    opacity: 0;
    cursor: pointer;
}

audio {
    width: 500px;
}

.vline {
    position: absolute;
    top: 20px;
    width: 1px;
    background-color: rgba(170,170,170,0.2);
    height: 100%;
    pointer-events: none;
}

.vl1 {
    left: 129px;
}

.vl2 {
    left: 218.5px;
}

.vl3 {
    left: 308px;
}

.vl4 {
    left: 397.5px;
}

.vl5 {
    left: 487px;
}

.vl6 {
    left: 576.5px;
}

.vl7 {
    left: 666px;
}

.vl8 {
    left: 755.5px;
}

.vl9 {
    left: 845px;
}

.vl10 {
    left: 934.5px;
}

.ttl {
    text-align: center;
    top: -18px;
    left: -15px;
}

#loop {
    background-size: 100% 100%;
    position: absolute;
    background-image: url(../images/loop_btn.png);
    top: 17px;
    left: 453px;
    height: 60px;
    width: 60px;
}

#loop.active {
    background-image: url(../images/loop_btn_active.png);
}

#cancel {
    background-size: 100% 100%;
    position: absolute;
    background-image: url(../images/cancel.png);
    top: 77px;
    left: 453px;
    height: 60px;
    width: 60px;
}

#cancel.active {
    background-image: url(../images/cancel_active.png);
}

#playlist {
    position: relative;
    width: 500px;
    height: 240px;
    margin-top: 5px;
    border: 1px solid rgba(143, 150, 154, 0.5);
    border-radius: 2px;
    overflow-y: auto;
}

.list_line{
    color: rgba(0, 0, 0, 0.5);
    font-family: 'Roboto', sans-serif;
    line-height: 1.2;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    padding: 4px;
}

.playlist-cont {
    position: relative;
    width: 100%;
    top: 0px;
    left: 0px;
}

.fadeIn {
   animation-name: fadeIn;
   -webkit-animation-name: fadeIn;
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
    animation-duration: .3s;
    -webkit-animation-duration: .3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

-webkit-@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}