hr {
	margin-top: 8px;
	margin-bottom: 8px;
	border-top: 1px solid #ddd;
}

#mainpanel {
  display: inline-block;
  float: right;
  transition: 0.5s;
  min-width: 720px;
}

#sidepanel  {
  display: inline-block;
  float: left;
  overflow-x: hidden;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  background-color: white;
  box-shadow: 0 3px 16px -2px rgba(0,0,0,.15);
  top: 64px;
  transition: 0.5s;
}

#glazesidepanel {
    width: 140px;
    height: 0px;
    display: inline-block;
    float: left;
}

#wideblock {
	min-width: 500px;
}
#scrollpanel {
    overflow-x: scroll;
    width: calc(100vw - 140px);
    top: 0px;
    position: relative;
    display: inline-block;
    float: left;
    left: 120px;
    -webkit-overflow-scrolling: touch;
}

#glazespectrumcontainer {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border-collapse: collapse;
  height: 100%;
}

#methodtable {
	border-top: 1px solid #E2E2E2;
	border-bottom: 1px solid #E2E2E2;
	width: 100%;
	border-collapse: collapse;
}

#methodtable td {
	border-top: 1px solid #E2E2E2;
	border-bottom: 1px solid #E2E2E2;
	width: 50%;
	padding: 4px;
}

#glazeimage{
	width: 100% !important;
	height: auto !important;
}

#glazename{
	text-align: center;
	width: 100%;
}

#glazenotes{
	text-align: center;
	width: 100%;
}

.glazeicon{
	width: 96px;
	height: auto;
}

/*.glazeobject:hover{
	transform: scale(1.1);
	transition: 0.25s;
	transition-timing-function: ease;
}*/

.hideimage {
	display: none !important;
}

.inputclass{
	margin: 4px 4px 4px !important;
}

.innerpanel{
	width: 110px;
	margin: 2px;
	display: inline-table;
}

.glazeseriesselect{
	width: 100%;
	height: 60px;
}

.claybodyselect{
	width: 100%;
	height: 60px;
}

.spectrumoption{
	width: 100%;
	height: 60px;
}

.glazename
{
	border-top: 1px #f3f3f3 solid;
}

.menuobject{
	display: inline-table;
	vertical-align: top;
	width: 110px;
	height: 60px;
	position: relative;
	padding: 2px;
	margin: 2px;

	background-color: white;
	box-shadow: 0 3px 16px -2px rgba(0,0,0,.15);
	border: 1px solid #ddd;
	cursor: pointer;
	transform: scale(1);
	transition: 0.25s;
	transition-timing-function: ease;
}

@media screen and (min-width: 801px) {
	.glazeobject{
		display: inline-table;
		vertical-align: top;
		width: 110px;
		height: 180px;
		position: relative;
		padding: 2px;
		margin: 2px;

		background-color: white;
		box-shadow: 0 3px 16px -2px rgba(0,0,0,.15);
		border: 1px solid #ddd;
		transform: scale(1);
		transition: 0.25s;
		transition-timing-function: ease;
	}

	.openside {
		width: 33% !important;
		border-radius: 4px;
	}

	.closedside {
		width: 0% !important;
		border-radius: 4px;
	}

	.openmain {
		width: 100% !important;
	}

	.closedmain {
		width: 67% !important;
	}
	
	#conepanel{
	width: 98%;
	left: 0%;
	margin: 1%;
	display: inline-block;
	}

	#colorpanel{
		width: 98%;
		left: 0%;
		margin: 1%;
		display: inline-block;
	}

	#surfacepanel{
		width: 98%;
		left: 0%;
		margin: 1%;
		display: inline-block;
	}

	#transparencypanel{
		width: 98%;
		left: 0%;
		margin: 1%;
		display: inline-block;
	}
	
	#claypanel{
		width: 98%;
		left: 0%;
		margin: 1%;
		display: inline-block;
	}
	
	.filterpanel{
		background-color: white;
		box-shadow: 0 3px 16px -2px rgba(0,0,0,.15);
		border: 1px solid #ddd;
		padding: 4px;
	}
	
	.filterblock{
		display: inline-table; 
		width: 12.5%; 
		text-align: left;
	}
}

@media screen and (max-width: 800px) {
	.glazeobject{
		display: inline-table;
		vertical-align: top;
		width: 110px;
		height: 180px;
		position: relative;
		padding: 2px;
		margin: 2px;

		background-color: white;
		box-shadow: 0 3px 16px -2px rgba(0,0,0,.15);
		border: 1px solid #ddd;
		transform: scale(1);
		transition: 0.25s;
		transition-timing-function: ease;
	}
	
	.filterblock{
		display: inline-table; 
		width: 33%; 
		text-align: left;
	}
	
	.openside {
	width: 100% !important;
	border-radius: 4px;
	}

	.closedside {
		width: 0% !important;
		border-radius: 4px;
	}

	.openmain {
		width: 100% !important;
	}

	.closedmain {
		width: 0% !important;
		height: 0% !important;
		overflow: clip;
		display: none !important;
	}
	
	#conepanel{
	width: 98% !important;
	left: 0%;
	margin: 1%;
	display: inline-block;
	}

	#colorpanel{
		width: 98% !important;
		left: 0%;
		margin: 1%;
		display: inline-block;
	}

	#surfacepanel{
		width: 98% !important;
		left: 0%;
		margin: 1%;
		display: inline-block;
	}

	#transparencypanel{
		width: 98% !important;
		left: 0%;
		margin: 1%;
		display: inline-block;
	}
	
	#claypanel{
		width: 98% !important;
		left: 0%;
		margin: 1%;
		display: inline-block;
	}
	
	.filterpanel{
		background-color: white;
		box-shadow: 0 3px 16px -2px rgba(0,0,0,.15);
		border: 1px solid #ddd;
		padding: 4px;
	}
}