#gridHolder {
	display: grid;
	width: 80vw;
	margin: 0px auto;
	grid-template-columns: 0fr 1fr;

	/* part of the IE11 grid fix */
    display: -ms-grid;
	-ms-grid-columns:  1fr 5fr;
	
}

.J2-product-filters__checkbox.js-filter-capability-checkbox {
	width: intrinsic;           /* Safari/WebKit uses a non-standard name */
	width: -moz-max-content;    /* Firefox/Gecko */
	width: -webkit-max-content; /* Chrome */
	width: 9em; /*IE Fallback I guess*/
}

.showOptions {
	display: table;
}

.hiddenCard {
	display: none;
}

#custom_body {
	padding-top: 2em;
}

#filterHeaderLine {
	padding-bottom: 12px;
	min-width: 9em;
}

#reset {
	background-color: #da291c;
    color: white;
    text-align: center;
    font-weight: 100;
	margin-bottom: 1em;
	font-size: 1.5em;
	padding: .5em .5em;
	min-width: 6em;
}

/* This will functionally hide anything, plz only use if you would otherwise need to use !important */
/* It's *technically* slower than just hiding it, not all css manipulations take the same time */
div.megaHidden {
    width: 0px;
    visibility: hidden;
}

.contentCards {
    margin-bottom: 1em;
	margin-left: 1em;
	padding: .5em;
    background-color: #f8f8f8;
}

div#titleDiv {
    display: grid;
    text-align: center;
	font-size: 4em;
}

.selected {
	color: #da291c;
}

.displayCards {
	display: grid;
	grid-template-rows: 20% 80%;
	height: fit-content;
	/* part of the IE11 grid fix */
	display: -ms-grid;
	-ms-grid-rows: 20% 80%;
}

.filterHolder {
    display: grid;
	grid-template-rows: 1fr;
	
	/* part of the IE11 grid fix */
	display: -ms-grid;
	-ms-grid-rows: 1fr;
}

div#contentDiv {
	/* part of the IE11 grid fix */
	display: flex;
    justify-content: space-evenly;
	flex-wrap: wrap;
	

	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;	
}

#homeButton {
	visibility: hidden;
	margin-left: 10vw;
}

.cardNameRow {
	font-weight: bold;
	height: fit-content;
    border-width: 0px 0px 1px 0px;
    border-color: #707070;
    border-style: solid;
}

.sectionHolder {
	display: grid;
	padding-top: 1em;
	grid-template-columns: 1fr 1fr;

	/* part of the IE11 grid fix */
	display: -ms-grid;
	-ms-grid-columns: 1fr 1fr;
}

img.sectionIcon {
	width: 1.5vw;
}

.dataRow {
    display: grid;
	grid-template-columns: 1fr 3fr;
	
	/* part of the IE11 grid fix */
	display: -ms-grid;
	-ms-grid-columns: 1fr 3fr;
}

#optionsDiv {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

	/* part of the IE11 grid fix */
	display: -ms-grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.filterOptionIcon {
	margin: 0px auto;
	height: 5em;
}

.filterOptionText {
	margin:0px auto;
}

.filterOption {
	display: grid;
	grid-template-columns: 1fr;

	/* part of the IE11 grid fix */
	display: -ms-grid;
	-ms-grid-columns: 1fr;
}

div#unitSwapper {
	width: 80vw;
    margin: 0px auto;
    display: flex;
    justify-content: flex-end;
}

#unitSwapper p {
	background-color: #da291c;
    color: white;
    text-align: center;
    font-weight: 100;
	margin-bottom: 1em;
	font-size: 1.25em;
	padding: .75em;
}

.is-open > ul {
    overflow: visible;
}

#legend{
	display: flex;
	flex-wrap: wrap; 
	margin-top: 1em;
}

.legendLabel{
	display: flex;
	margin-top: .5em;
}

.legendLabel > img{
	width: 1.25vw
}

@media (max-width: 1200px) {
	div#contentDiv {
		display: flex !important
	}
	.contentCards{
		padding: .75em;
	}

	.legendLabel > img{
		width: 2vw;
	}
	.dataRow > img{
		width: 2vw;
	}
}