.clr {clear: both;}
table#resp-comp { border: none; }

#resp-comp h6 {font-size: 1em; text-align: center;}

#resp-comp td {
    border: 1px solid #ddd;
    padding: 0.5em 0;
vertical-align: top;
text-align: center;
}
#resp-comp li {text-align: left; margin: 0 0 1em;}

#resp-comp td {width: 20%; padding: 0.5em;}

#resp-comp h3 {font-size: 1.2em; line-height: 1.4em; text-align: center; padding-bottom: 0.5em; text-indent: 0;}

.need-column tr:nth-child(1) td, td .checkgood, td .checkbad, td .addonup, #resp-comp th, #resp-comp ::before { font-size: 1.25em; font-weight: bold; color: #fff; background-color: #001133; padding: 0.5em 50px 0.5em 1em; text-align: center; vertical-align: middle;}


#resp-comp th.comp2two, #resp-comp th.comp3three { text-align: left; background-image: url("compareseal.jpg"); background-position: right; background-repeat: no-repeat;}

#resp-comp th.comp1one, 
#resp-comp td.comp1one::before, 
td .checkbad {background-color: #221111;}
#resp-comp th.comp1one {background-image: none; text-align: left; padding-right: 0.25em;}

#resp-comp th.comp4four, 
#resp-comp td.comp4four::before, 
td .addonup {background-color: #122; background-image: url("comparesilh.jpg"); background-position: right; background-repeat: no-repeat; text-align: left;}

.need-column tr:nth-child(even)  { background-color: #efefef; }

.need-column tr:nth-child(odd)  { background-color: #fff; }

#resp-comp tbody td.comp2two,
#resp-comp tbody td.comp3three {background-color: #fff;}

#resp-comp tbody td.comp1one {background-color: #eee6e6;}

#resp-comp tbody td.comp4four {background-color: #eeeedd;}

.need-column {display: block; padding: 0; margin: 0 0 2em; float: left; width: 15%; border: collapse; margin: 0;}
#wide-labels {width: 19%;}

.need-column table {width: 100%; border: collapse; margin: 0; padding: 0;}
.need-column td { padding: 1em; white-space: nowrap; text-align: center;}
.need-column tr:nth-child(1) td {white-space: normal; height: 4em; vertical-align: middle; padding: 0 0.25em;}
#wide-labels td {text-align: left;}

td .checkyes, td .checkgood, .checkgood {color: #00cc00; font-weight: bold;}
td .checkno, td .checkbad, .checkbad {color: red; font-weight: bold;}
td .salaryup, td .addonup, .addonup {color: green; }
td .checkyes, td .checkno, td .salaryup { display: inline;}
td .checkgood, td .checkbad, td .addonup { display: none;}

@media print
{    
td .checkgood, td .checkbad, td .addonup
    {
        display: none !important;
    }
}

@media screen and (max-width: 800px) {

td .checkgood, td .checkbad, td .addonup { display: block; padding-right: 1em;}
#resp-comp ::before {padding-right: 1em;}
#resp-comp tbody td.comp4four::before, td .addonup  {background-image: none; text-align: center; padding-right: 1em;}
.need-column {width: 95%; float: none; border: 1px solid #ccc;}

#wide-labels {display: none;}

.need-column td::before {content: attr(data-th); display: inline-block; font-weight: bold; width: 14em; padding-right: 3em; text-align: right;}
.need-column td {text-align: left;}
.need-column tr:nth-child(1) td::before {display: none;}
.need-column tr:nth-child(1) td { text-align: center; padding-left: 0; padding-right: 0;}

	table#resp-comp {
		overflow-x: auto;
		display: block;
		border: none;
	}

	#resp-comp thead {display: none;}

	#resp-comp td::before {content: attr(data-th); display: block;}
	#resp-comp td {display: block; width: 95%; }


}