
div#products {
    font-family: Cabin, Helvetica, sans-serif;
    color:#000000;
    background-color:#EEEEEE;
    width:calc(100% - 20px);
    margin: 0 auto;
    padding: 0;
    display: block;
    float: none;
    line-height: 1.4;
    font-size: 0.88888888888em;
}

div#products > div, div#products > div > div {
    display: block;
    float: left;
    width: 100%;
}
div#products > div {
     max-width: 100%;
     min-width: 300px;
    background-color: #EEEEEE;
    border-bottom: 1px #ddd solid;
 }
div#products > div:first-child, div#products > div:nth-child(2) {
    background-color:#FFF;
    text-transform:uppercase;
}

div#products > div:nth-child(3) > div {
    color:#FFFFFF;
    background-color:#444444;
    font-size:1em;
    height:36px;
    max-height: 36px;
    margin: 0;
    padding: 6px 0 0 2%;
    width: 30%;
}
div#products > div:nth-child(3) > div:nth-child(3) {
    text-align: right;
}
div#products > div > div {
    font-size: 1em;
/*    height:43px;
    max-height: 43px;
    border-bottom: 1px #ddd solid;*/
    margin: 0;
    padding: 6px 0 0 2%;
}
/*div#products > div:nth-child(3) > div:first-child, div#products > div > div:first-child {
    max-width: 100px;
}*/
/*
div#products > div:first-child > div:first-child {
    max-width: 100%;
    width: 100%;
    height:auto;
    border: 0;
    border-bottom: 1px #454545 solid;
    padding: 12px 0 0 0;
    font-size:0.75em;
    color:#454545;
}
*/
div#products div:nth-child(3) div:nth-child(2), div#products div > div:nth-child(2) { /* description */
    /*
    min-width: 350px;
    max-width: 400px;
    */
}
div#products div:nth-child(3) div:nth-child(3), div#products div > div:nth-child(3) { /* quantity */
    /*
    max-width: 55px;
    */
}
div#products div:nth-child(3) div:nth-child(4), div#products div > div:nth-child(4) { /* add button */
    /*
    min-width: 50px;
    max-width: 55px;
    */
}
div#products div:nth-child(3) div:nth-child(5){

}
div#products div > div:nth-child(5) { /* delete button */
    max-width: 0;
    visibility: hidden;
}

div#products > div:nth-child(2) {
    margin:0;
    padding:0;
}
/*
div#products > div:nth-child(2) > div {
    height:auto;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    margin:0;
    padding:0 0 20px 0;
    line-height: 1;
    color:#000;
    font-size:1.125em;
    text-transform: none;
}
*/
div#products > div:nth-child(2) > div > h2 {
    color:#595aa0;
    font-size:1.66666666667em;
    text-transform: capitalize;
    margin-top: 15px;
}



div#products > div > div input[type="text"] {
    display: block;
    float: right;
    width:60px;
    height:27px;
    border: 1px #ddd solid;
    background-color:#FFF;
    line-height: 1;
    padding: 4px;
}
div#products > div > div input[type="button"][name^="add_"] {
    width:38px;
    height:20px;
    font-size: 0.81481481481em;
    line-height: 1.1;
    color: #FFF;
    text-align: center;
    background-color: #505aa0;
    text-transform: capitalize;
    margin: 4px 0 0 0;
}
div#products > div > div input[type="button"][name^="add_"]:hover {
    width:36px;
    height:18px;
    margin: 4px 2px 0 0;
    color: #505aa0;
    background-color: #FFF;
    border:1px #505aa0 solid;
}
div#products > div > div input[type="button"][name^="del_"] {
    width: 21px;
    background-image: url(../../images/trash-can.png);
    background-size: 120%;
    background-position: -2px -1px;
    background-repeat: no-repeat;
    margin: 2px 9px 0 0;
    padding: 0;
}
div#products > div > div input[type="button"][name^="del_"]:hover {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

div#products input {
    min-height: 12px;
    line-height: 1.6;
}



div#products > div > div:first-child, div#products > div > div:first-child {max-width: 20%;width: 20%;}
div#products > div > div:nth-child(2), div#products > div > div:nth-child(2) { /* description */max-width: 38%;width: 38%;}
div#products > div > div:nth-child(3), div#products > div > div:nth-child(3) { /* quantity */max-width: 22.6666666667%;width: 22.6666666667%;}
div#products > div > div:nth-child(4), div#products > div > div:nth-child(4) { /* add button */width: 17%;max-width: 17%;    padding-left: 0.66666666666%;}
div#products > div > div:nth-child(5) { width: 0%;max-width: 0%; padding: 0;}


div#products > div:first-child > div:first-child, div#products > div > div:first-child {max-width: 21.3333333333%;width: 21.3333333333%;overflow: hidden;}
div#products > div:first-child > div:nth-child(2), div#products > div > div:nth-child(2) { /* description */max-width: 38%;width: 38%;}
div#products > div:first-child > div:nth-child(3), div#products > div > div:nth-child(3) { /* quantity */max-width: 24%;width: 24%;}
div#products > div:first-child > div:nth-child(4), div#products > div > div:nth-child(4) { /* add button */width: 16.6666666667%;max-width: 16.6666666667%; padding-left: 0.66666666666%; text-align: center;}
div#products > div:first-child > div:nth-child(5){ width: 0%;max-width: 0%; padding: 0;    }


div#products > div:nth-child(2) > div {
    height:auto;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    margin:0;
    padding:0 0 20px 0;
    line-height: 1;
    color:#000;
    font-size:1.125em;
    text-transform: none;
}

div#products > div:first-child > div:first-child {
    max-width: 100%;
    width: 100%;
    height:auto;
    border: 0;
    border-bottom: 1px #454545 solid;
    padding: 12px 0 0 0;
    font-size:0.75em;
    color:#454545;
}


div#products > div > div input[type="text"] {
    display: block;
    float: right;
    width:60px;
    height:27px;
    border: 1px #ddd solid;
    background-color:#FFF;
    line-height: 1;
    padding: 4px;
}
@media only screen and (min-width: 374px) {
    div#products > div > div input[type="button"][name^="add_"] {
        width:50px;

    }
    div#products > div > div input[type="button"][name^="add_"]:hover {
        width:48px;
    }
}
@media only screen and (min-width: 760px) {
    div#products {
        max-width: 300px;
    }
}
@media only screen and (min-width: 900px) {
    div#products {
        max-width: 440px;
    }
}
@media only screen and (min-width: 940px) {
    div#products {
        max-width:500px;
    }
}

@media only screen and (min-width: 1190px) {
    div#products {
        max-width:600px;
    }
}
