/*-------------P R O D U C T S  G R I D--------------------*/

.parent {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, auto);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	background:none;
	width:60vw;
	position:absolute; 
	left:27vw; 
	top:30vw; 
	transition: 0.3s;
	}

.div1 { 
	grid-area: 1 / 1 / 2 / 4; 
	border-right:1px #e6e6e6 solid;
	border-bottom:1px #e6e6e6 solid;
	}

.div2 { 
	grid-area: 1 / 4 / 2 / 7; 
	border-bottom:1px #e6e6e6 solid;
	}

.div3 { 
	grid-area: 2 / 1 / 3 / 4;
	border-right:1px #e6e6e6 solid;
	}

.div4 { 
	grid-area: 2 / 4 / 3 / 7;
	}
	
.div1, .div2, .div3, .div4 {
	background-color:#fff;
	}

.div5, .div6, .div7, .div8, .div9, .div10, .div11 {
	background-color:#f1f1f1;
	}
	
.div5, .div6, .div7, .div8, .div9, .div10{
	cursor:pointer;
	}	

.div5 { /*Custom*/
	grid-area: 3 / 1 / 4 / 7; 
	}

.div6, .div7, .div8, .div9, .div10, .div11{
	height:18vw;
	}	
	
.div6 { 
	grid-area: 4 / 1 / 5 / 3; 
	}

.div7 { 
	grid-area: 4 / 3 / 5 / 5; 
	}

.div8 { 
	grid-area: 4 / 5 / 5 / 7; 
	}

.div9 { 
	grid-area: 5 / 1 / 6 / 3; 
	}

.div10 { 
	grid-area: 5 / 3 / 6 / 5; 
	}

.div11 { 	/*Blank (for now)*/
	grid-area: 5 / 5 / 6 / 7; 
	}

.div12 {  /*Copyright*/
	grid-area: 6 / 1 / 7 / 7; 
	background-color:#ccc;
	height:5vw;
	padding-top:3vw;
	margin:0;
	}

.thumbnail {	/*Large top images*/	
	object-fit: cover;
	width: 94%;
	max-height: 94%;
	padding-left:3%;
	padding-top:3%;
	transition: 0.1s;
	}

.thumbnail_div6, .thumbnail_div7, .thumbnail_div8, 
.thumbnail_div9, .thumbnail_div10, .thumbnail_div11 { /*Circular Custom thumbnails*/
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size: contain;
	width:82%;
	height:82%;
	max-height:82%;
	max-width:82%;
	}
	
.thumbnail_div6 {
	padding-left:4vw;
	background-image:url(images/circle_rom.png);
	}	
	
.thumbnail_div7 {
	padding-left:3vw;
	background-image:url(images/circle_tromini.png);
	}	
	
.thumbnail_div8 {
	padding-left:2vw;
	background-image:url(images/circle_carbon.png);
	}	
	
.thumbnail_div9 {
	padding-left:4vw;
	background-image:url(images/circle_spiralsystems.png);
	}
	
.thumbnail_div10 {
	padding-left:3vw;
	background-image:url(images/circle_tubular.png);
	}	
	
.thumbnail_div11 {
	padding-left:2vw;
	}	

.grid_image {
	position:relative;
	}

/*-------------------------T Y P O G R A P H Y-------------------------*/

.grid_header {
	height:auto;
	width:inherit;
	margin:0;
	padding-top:3vw;
	padding-left:3vw;
	padding-bottom:1vw;
	}
	
	
.grid_title2 {			/*Product grid titles: XF8, etc.*/
	font-family: 'Bungee';
	font-weight:400;
	font-size:2.5vw;
	color:#333;
	letter-spacing:0.1vw;
	z-index:50;
	width:auto;
	text-align:left;
	padding-bottom:0.4vw;
	line-height:105%;
	transition: 0.3s;
	}
	
.grid_description	{	/*Product grid descriptions: "Hybrid Tubular Reverse Osmosis Mini," etc.*/
	font-family: 'Titillium Web';
	font-size:1.1vw;
	font-weight:400;
	letter-spacing:0.1vw;
	color:#999;
	padding-left:0.1vw;
	padding-bottom:1vw;
	width:auto;
	transition: 0.3s;
	}	


/*-------------------------H O V E R S-----------------------------*/

.div1:hover .grid_title2, .div2:hover .grid_title2, .div3:hover .grid_title2, .div4:hover .grid_title2, .div5:hover .grid_title2  {
	color:#a23125;
	}
	
.div1:hover .grid_description, .div2:hover .grid_description, .div3:hover .grid_description, .div4:hover .grid_description, .div5:hover .grid_description {
	color:#a23125;
	}	
	
.div1:hover .link_icon, .div2:hover .link_icon, .div3:hover .link_icon, .div4:hover .link_icon, .div5:hover .link_icon {
	filter: invert(0) saturate(0) sepia(0.1) hue-rotate(0deg) brightness(1);       
	}	
	
.div1:hover .thumbnail, .div2:hover .thumbnail,.div3:hover .thumbnail, .div4:hover .thumbnail { 
	opacity:0.5!important;
	}	

.thumbnail_div6:hover, .thumbnail_div7:hover, .thumbnail_div8:hover, .thumbnail_div9:hover, .thumbnail_div10:hover, .thumbnail_div11:hover {	
opacity:0.5!important;
	}
	
/*------------------------------S V Gs----------------------------------*/
	
.link_icon {	/*">" svg icon*/
	width:2vw;
	height:2vw;
	transition: 0.3s;
	margin-left:-0.2vw;
	}
	
.link_icon:hover {
	filter: invert(0) saturate(0) sepia(0.1) hue-rotate(0deg) brightness(1);                                 
	}

	
/*-------------------------M E D I A-----------------------------------*/
/*Small laptops, landscape tablets*/
@media screen and (max-width: 1200px) and (min-width: 800px) {

/*------------P R O D U C T S  G R I D-------------*/
.parent {
	width:70vw;
	left:23vw; 
	top:34vw; 
	}

.div12 {  /*Copyright*/
	height:7vw;
	padding-top:4vw;
	}

/*------------C U S T O M  T H U M B N A I L S-------------*/
.div6, .div7, .div8, .div9, .div10, .div11{
	height:21vw;
	}	

.thumbnail_div6, .thumbnail_div7, .thumbnail_div8, 
.thumbnail_div9, .thumbnail_div10, .thumbnail_div11 { /*Circular Custom thumbnails*/
	width:86%;
	height:86%;
	max-height:86%;
	max-width:86%;
	}
	
.thumbnail_div6 {
	padding-left:4vw;
	}	
	
.thumbnail_div7 {
	padding-left:3vw;
	}	
	
.thumbnail_div8 {
	padding-left:2vw;
	}	
	
.thumbnail_div9 {
	padding-left:4vw;
	}
	
.thumbnail_div10 {
	padding-left:3vw;
	}	
	
.thumbnail_div11 {
	padding-left:2vw;
	}

/*------------T Y P O G R A P H Y-----------------*/

.grid_title2 {	
	font-size:2.8vw;
	padding-bottom:0;
	}
	
.grid_description	{	
	font-size:1.5vw;
	letter-spacing:0.1vw;
	padding-top:0.6vw;
	padding-bottom:1vw;
	}	
	
/*------------S V G s-----------------*/
	
.link_icon {	/*">" svg icon*/
	width:2.5vw;
	height:2.5vw;
	}
}


/*Tablets, phones*/
@media screen and (max-width: 800px) {

/*-------------P R O D U C T S  G R I D--------------------*/

.parent {
	grid-template-columns: repeat(2, 45vw);
	grid-auto-rows: minmax(auto);
	left:5vw; 
	top:36vw; 
	width:90%;
	}
	
.div1 { 
	grid-area: 1 / 1 / 2 / 2; 
	}

.div2 { 
	grid-area: 1 / 2 / 2 / 3; 
	}

.div3 { 
	grid-area: 2 / 1 / 3 / 2; 
	}
	
.div4 { 
	grid-area: 2 / 2 / 3 / 3; 
	}

.div5 { 
	grid-area: 3 / 1 / 4 / 3;
	padding-top:0;
	}

.div6 { 	/*Custom*/
	grid-area: 4 / 1 / 5 / 2;
	}
	
.div7 { 
	grid-area: 4 / 2 / 5 / 3; 
	}
	
.div8 { 
	grid-area: 5 / 1 / 6 / 2;
	}
	
.div9 { 
	grid-area: 5 / 2 / 6 / 3;
	}
	
.div10 { 
	grid-area: 6 / 1 / 7 / 2;
	}
	
.div11 { 	
	grid-area: 6 / 2 / 7 / 3;
	}

.div12 { 		/*Copyright*/
	grid-area: 7 / 1 / 8 / 3;
	height:7vw;
	padding-left:5vw;
	padding-top:2vw;
	}
	
.thumbnail {	
	object-fit: cover;
	width: 94%;
	max-height: 94%;
	padding-left:3%;
	padding-top:3%;
	}

/*------------C U S T O M  T H U M B N A I L S-------------*/
.div6, .div7, .div8, .div9, .div10, .div11{
	height:42vw;
	}	

.thumbnail_div6, .thumbnail_div7, .thumbnail_div8, 
.thumbnail_div9, .thumbnail_div10, .thumbnail_div11 { /*Circular Custom thumbnails*/
	width:84%;
	height:84%;
	max-height:84%;
	max-width:84%;
	}
	
.thumbnail_div6 {
	padding-left:8vw;
	}	
	
.thumbnail_div7 {
	padding-left:6vw;
	}	
	
.thumbnail_div8 {
	padding-left:8vw;
	}	
	
.thumbnail_div9 {
	padding-left:6vw;
	}
	
.thumbnail_div10 {
	padding-left:8vw;
	}	
	
.thumbnail_div11 {
	padding-left:6vw;
	}
	

/*-----------T Y P O G R A P H Y-------------*/

.grid_header {
	padding-top:5vw;
	padding-left:5vw;
	padding-bottom:0;
	}
	
	
.grid_title2 {			/*Product grid titles: XF8, etc.*/
	font-size:3vw;
	letter-spacing:0.1vw;
	padding-bottom:1vw;
	}
	
.grid_description	{	/*Product grid descriptions: "Hybrid Tubular Reverse Osmosis Mini," etc.*/
	font-size:1.8vw;
	letter-spacing:0.1vw;
	padding-left:0;
	padding-bottom:1vw;
	}	
	
/*------------------------------S V Gs----------------------------------*/
	
.link_icon {	/*">" svg icon*/
	width:3vw;
	height:3vw;
	padding-left:0;
	margin-left:-0.5vw;
	}
}

/*Portrait phones*/
@media screen and (max-width: 550px) and (orientation: portrait) {

/*-------------P R O D U C T S  G R I D--------------------*/

.parent {
	grid-template-columns: repeat(2, 45vw);
	grid-auto-rows: minmax(auto);
	left:5vw; 
	top:72vw;
	width:90vw;
	}

.div1 { 
	grid-area: 1 / 1 / 2 / 3; 
	border-right:0;
	}
	
.div2 { grid-area: 2 / 1 / 3 / 3; }

.div3 { 
	grid-area: 3 / 1 / 4 / 3; 
	border-right:0;
	border-bottom:1px #e6e6e6 solid;
	}

.div4 { grid-area: 4 / 1 / 5 / 3; }

.div5 { 		/*Custom*/
	grid-area: 5 / 1 / 6 / 3;
	padding-top:0;
	}

.div6 { 	
	grid-area: 6 / 1 / 7 / 2;
	}
	
.div7 { 
	grid-area: 6 / 2 / 7 / 3; 
	}
	
.div8 { 
	grid-area: 7 / 1 / 8 / 2;
	}
	
.div9 { 
	grid-area: 7 / 2 / 8 / 3;
	}
	
.div10 { 
	grid-area: 8 / 1 / 9 / 2;
	padding-bottom:2vw;
	}
	
.div11 { 		/*blank*/
	grid-area: 8 / 2 / 9 / 3;
	padding-bottom:2vw;
	}

.div12 { 		/*Copyright*/
	grid-area: 9 / 1 / 10 / 3;
	height:10vw;
	padding-left:0;
	padding-top:5vw;
	padding-bottom:2vw;
	}

.thumbnail {	
	object-fit: cover;
	width: 94%;
	max-height: 94%;
	padding-left:3%;
	padding-top:0;
	padding-bottom:0;
	}

/*------------C U S T O M  T H U M B N A I L S-------------*/
.div6, .div7, .div8, .div9, .div10, .div11{
	height:38vw;
	}	

.thumbnail_div6, .thumbnail_div7, .thumbnail_div8, 
.thumbnail_div9, .thumbnail_div10, .thumbnail_div11 { /*Circular Custom thumbnails*/
	width:86%;
	height:86%;
	max-height:86%;
	max-width:86%;
	}
	
.thumbnail_div6 {
	padding-left:10vw;
	}	
	
.thumbnail_div7 {
	padding-left:0;
	}	
	
.thumbnail_div8 {
	padding-left:10vw;
	}	
	
.thumbnail_div9 {
	padding-left:0;
	}
	
.thumbnail_div10 {
	padding-left:10vw;
	}	
	
.thumbnail_div11 {
	display:none;
	}
	

/*-------------------------T Y P O G R A P H Y-------------------------*/

.grid_header {
	padding-top:5vw;
	padding-left:0;
	padding-bottom:0;
	}


.grid_title2 {			/*Product grid titles: XF8, etc.*/
	font-size:4vw;
	letter-spacing:0.2vw;
	padding-left:5vw;
	width:70vw;
	padding-bottom:0.5vw;	
	padding-top:3vw;
	padding-left:8vw;
	}

	
.grid_description	{	/*Product grid descriptions: "Hybrid Tubular Reverse Osmosis Mini," etc.*/
	font-size:3.3vw;
	letter-spacing:0.2vw;
	padding-left:8vw;
	width:70vw;
	z-index:100;
	line-height:100%;
	padding-top:1.8vw;
	padding-bottom:3vw;
	}	
	

/*-----S V Gs---------*/
	
.link_icon {	/*">" svg icon*/
	width:4vw;
	height:4vw;
	padding-left:8vw;
	margin-top:-0.5vw;
	}
}