.LibraryContainer {
    background-color: white;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../Images/SonyHandyCam_HDR_CX560_60_Opacity.jpg');
    max-width: 800px;
    height: 600px;
    margin: 10px auto 10px auto;
    padding: 20px;
    -moz-box-shadow: 10px 10px 20px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 10px 10px 20px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 10px 10px 20px 4px rgba(0, 0, 0, 0.4);
    border: .5px solid rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.Logo {
    background-image: -webkit-linear-gradient(top, #444444, #999999);
    background-image: linear-gradient(to bottom, #404242, #999999);
    background-size: auto;
    width: 100%;
    height: 75px;
    margin-bottom: 0;
}

.col-style1 {
    float: left;
}

.col-style2 {
    padding-left: 10px;
    float: left;
}

.col-style3 {
    padding-right: 26px;
    float: right;
}

.DataListTitle {
    font-family:Lucida Sans Unicode;
    font-size:24px;
    color:rgba(0, 0, 0, 0.4);
    font-weight:normal;
    opacity:1;
}

.DataListTitle-xs {
    font-family: Lucida Sans Unicode;
    font-size:22px;
    color: rgba(0, 0, 0, 0.4);
    font-weight:normal;
    opacity: 1;
}

.DataListDesc {
    font-family:Lucida Sans Unicode;
    font-size:12px;
    color:rgb(0, 0, 0);
    font-weight:normal;
    opacity:.8;
}

.albumImage {
    height: 83px; 
    width: 110px;
}

@media (min-width: 768px) {
    .Title {
        text-align: left;
        font-family: Verdana;
        font-size: 16pt;
        font-weight: bold;
        color: White;
    }
}

@media (min-width: 567px) and (max-width: 767px) {
    .Title {
        text-align: left;
        font-family: Verdana;
        font-size: 14pt;
        font-weight: bold;
        color: White;
    }

    .col-style2 {
        /*padding-left: 60px;
        float: left;*/
    }

    /*.albumImage {
        height: 63px;
        width: 83px;
    }*/
}

/* Extra Small Devices, Phones */
@media (max-width: 600px) {
    .LibraryContainer {
        background-color: white;
        background-image: none;
        height: 600px;
        margin: 10px auto 10px auto;
        padding: 20px;
        -moz-box-shadow: 10px 10px 20px 4px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: 10px 10px 20px 4px rgba(0, 0, 0, 0.4);
        box-shadow: 10px 10px 20px 4px rgba(0, 0, 0, 0.4);
        border: .5px solid rgba(0, 0, 0, 0.4);
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }

    .Title {
        text-align: left;
        font-family: Verdana;
        font-size: 11pt;
        font-weight: bold;
        color: White;
        padding-top: 5px;
    }
}


@media (max-width : 500px) {
    .col-style1 {
        visibility: hidden;
        width: 0;
    }

    /*.col-style2 {
        column-width: auto;
        margin-left: 5px;
    }*/

    .col-style2 {
        column-width: auto;
    }

    .Title {
        float: left;
        text-align: left;
        font-family: Verdana;
        font-size: 11pt;
        font-weight: bold;
        color: White;
        padding-top: 5px;
    }
}

@media screen and (max-width: 767px) {
    .albumImage {
        height: 63px;
        width: 83px;
    }
}

@media (max-width : 396px) {
    .Logo {
        background-image: -webkit-linear-gradient(top, #444444, #999999);
        background-image: linear-gradient(to bottom, #404242, #999999);
        background-size: auto;
        width: 100%;
        height: 110px;
        margin-bottom: 0;
    }

    .col-style2 {
        height: 40px;
    }

    .col-style3 {
        height: 30px;
    }
}