.left {
  position: absolute;
  left: 0;
  /*top: 50%;*/
  transform: translateY(-50%);
}
.right {
  position: absolute;
  right: 0;
  /*top: 50%;*/
  transform: translateY(-50%);
}
.td{
	height: 0px;
}

@media (pointer: coarse)  {
	/* mobile device */
	/* .row > div {
		margin-bottom: 20px; The margin-bottom needs to be applied here for it to work properly
	}
		
	.tr {
  		pointer-events: none;
		margin-bottom: 20px;		
	}
	*/
	#scrollspan::after{
		content: "\a";
		white-space: pre;
	}	
	a:hover { color: blue; }	
    .supports-touch .product-container:hover .reveal .hidden-feature_img {
        visibility: hidden;
        opacity: 0;
        transform: none;
    }
    .supports-touch .product-container:hover .product-additional img {
        visibility: visible;
        transform: none;
    }
    .supports-touch .products .product-container:hover .ImageOverlayCa {
        opacity: 0;
    }
		
}

@media (pointer: fine), (pointer: none) {
	/* desktop */
/* The webkit settings are used the horizontal scrollbar for gridScroll
	/* width */
	::-webkit-scrollbar:horizontal {
		 width: 20px;
		 height: 25px;		
	}

	/* Track */
	::-webkit-scrollbar-track:horizontal {
		 box-shadow: inset 0 0 5px black; 
		 border-radius: 20px;
	}

	/* Handle */
	::-webkit-scrollbar-thumb:horizontal {
		 background-color: red; 
		 border-radius: 20px;
	}
	
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover:horizontal {
		 background: #b30000; 
	}	
}



 
/* This is the setting for the lazy loading images for fixed set in addToGallery*/
img.lazy {
width: 150px;
height: 150px;
display: inline-block;
/*background-color: #fff;*/
border: solid 1px rgb(0,0,0,0.2);
cursor: pointer;
margin: 2px;	
}

/* This is the setting for the lazy loading images for scrolling set in addToGallery*/
img.lazyscroll {
width: 150px;
height: 150px;
display: inline-block;
/*background-color: #fff;*/
/*border: solid 1px rgb(0,0,0,0.2);*/
/*margin-bottom: 20px;*/
cursor: pointer;	
border-bottom-color: red;
}

/* This is the setting for the non slectable images set in addToGallery*/
img.noselect {
width: 150px;
height: 150px;
display: inline-block;
pointer-events: none;
border-bottom-color: red;
}

img.lazy:active {
  cursor: grab;
}

img.lazyscroll:active {
  cursor: grab;
}

.grid-square {
	width: 150px;
	height: 150px;
	display: inline-block;
	background-color: #fff;
	border: solid 1px rgb(0,0,0,0.2);
	margin: 2px;	
}

/* gridScroll scrolling wrapper */
.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  background-color:white;
	
/*
  .card {
    display: inline-block;
  }
*/
}
/*
div.scrollmenu {
  background-color: #333;
  overflow-x: scroll;
  white-space: nowrap;
  height: auto;
  width: 500px;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}
*/
/*
.card {
    display: inline-block;
  }
*/