/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    tr {
        margin: 0 0 1rem 0;
    }

        tr:nth-child(odd) {
            background: #ccc;
        }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 58%;
    }

        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 0;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }
    .trMobile {
      /*  visibility: visible;*/
        visibility: hidden!important;
        width:0px!important;
        height:0px!important;
        margin:0px!important;
    }
    /*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
    /*  td:nth-of-type(1):before {
            content: "First Name";
        }

        td:nth-of-type(2):before {
            content: "Last Name";
        }

        td:nth-of-type(3):before {
            content: "Job Title";
        }

        td:nth-of-type(4):before {
            content: "Favorite Color";
        }

        td:nth-of-type(5):before {
            content: "Wars of Trek?";
        }

        td:nth-of-type(6):before {
            content: "Secret Alias";
        }

        td:nth-of-type(7):before {
            content: "Date of Birth";
        }

        td:nth-of-type(8):before {
            content: "Dream Vacation City";
        }

        td:nth-of-type(9):before {
            content: "GPA";
        }

        td:nth-of-type(10):before {
            content: "Arbitrary Data";
        }*/
    td:nth-of-type(1):before {
        content: "№";
        font-weight: bold;
    }

        td:nth-of-type(2):before {
            content: "Material/service";
            font-weight: bold;
        }

        td:nth-of-type(3):before {
            content: "Unit";
            font-weight: bold;
        }

        td:nth-of-type(4):before {
            content: "Single price(with VAT)";
            font-weight: bold;
        }
    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
        border: 0px solid #ddd !important;
        padding: 0px; padding-left: 56%;
    }
    .col-md-12 {
        padding-right: 0px;
        padding-left: 0px;
    }
    
}
.trMobile {
      visibility: visible;
    /*visibility: hidden;*/
}