/* ------------------------------------------------------------------
 * products.css  --  was inlined into every products.asp response via
 * <!--#include file="products-style.asp"--> (16,927 bytes, uncacheable).
 * Must be served from the same directory as products.asp, because the
 * url(images/header/product.jpg) reference on the .intro rule below is
 * resolved relative to THIS file once it is external.
 * ------------------------------------------------------------------ */

	#SelectItemsCollect {margin-top:3px;padding-left:5px;}
	#SelectItemsCollect > div {margin:5px;}
	#SelectItemsCollect span[style="font-weight: bold;"] {
		color: #002f7b;
		display: inline-block;
		margin-top: 12px;
		padding-bottom: 2px;
	}
	.SelectImg {clear:both;float:left;margin-top:2px;}
	.SelectItems {padding: 10px 0px 10px 20px;}
	.SelectItems label {transition: .3s;}
	.SelectItems label:hover {color: #79bd28;transition: .2s;}
	
	.col-sm-3 form input:focus {background:#eee;}
	#ProductsList {
		border:none;
		text-align:center;
		border-radius:0px;
		background:none;
		padding-top:5px;
		z-index:-1;
		margin-left: 0;
	}
	#ProductsSelection {z-index:1;}
	.btnSelection {
		float:left;
		font:bold 12px arial;
		line-height:40px;
		padding-right:12px;
		padding-left:12px;
		cursor:pointer;
		z-index:1;
		margin-right:1px;
	}
	.btnSelection:hover {color:#002f7b;}
	.btnSelectionOn {
		float:left;
		font:bold 13px arial;
		line-height:40px;
		padding-right:12px;
		padding-left:10px;
		border-bottom:0px;
		background:#002f7b;
		color:#FFF;
		border-radius: 10px;
		transition: .2s ease-in-out;
	}
	.btnSelectionOn:hover {
		color: #FFF;
		background: #79bd28;
	}
	.ProductsItems {
		height: 320px;text-decoration:none;
		display: grid;
		grid-template-columns: 180px 1fr;
		grid-template-rows: 50px 1fr;
		background-image: radial-gradient(circle 1224px at 10.6% 8.8%, rgba(255, 255, 255, 1) 0%, rgb(192 216 255) 100.2%);
		background: #FFF;
		margin: 20px 0px;
		box-shadow: 0px 0px 12px -3px rgba(0, 47, 123, 0.5);
		border-radius: 10px;
	}
	.ProductsItems.bto{
		box-shadow: 0px 0px 6px -3px #000 !important; 
		.ModelName { background: #DDD !important;}
	} 
	.ModelPic {
		grid-row-start: 1;
		grid-row-end: 3;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		padding-top: 60px;
	}

	.select-search {
		display: flex;
		margin: 10px 0px;
		border-bottom: 1px solid #ddd;
		div {
			padding: 5px 10px 0px;
			cursor: pointer;
			background: #FFF;
			margin: 0 5px;
			border-radius: 5px 5px 0px 0px;
			letter-spacing: 0.05em;
			font-family: var(--brand-font);
			border: 1px solid #ddd;
			position: relative;
			top: 1px;
		}
		.active {
			background: linear-gradient(90deg, #DDD 30%, transparent 100%);
			font-weight: 700;
		}
		span {
			display: flex;
			align-items: center;
			font-weight: 600;
			font-size: 0.9em;
			padding-top: 3px;
			margin-right: 5px;
		}
	}
	
	.ModelName {
		width:100%;
		font:bold 20px 'acumin-pro';
		padding:10px 0px 12px 10px;
		text-shadow:none;
		text-align:left;
		display: grid;
		align-items: center;
    	grid-template-columns: 1fr 60px 170px;
		a {
			color:#002f7b;
			position: relative;
			top: 3px;
			left: 5px;
	        display: flex;
        	align-items: center;
		}
		a:hover {
			color:rgb(121, 189, 40);
			text-decoration:none;
		}
		font {
			margin: 6px 15px 0 0;
		}
		img {display: none;}
		.new, .archive {
			color: #FFF;
			font-family: var(--brand-font);
			width: 50px;
			margin: 0px auto;
			padding: 4px 6px 0px;
			border-radius: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
		}
		.new {
			grid-column-start: 2;
			grid-column-end: 3;
			grid-row-start: 1;
			background: linear-gradient(90deg, #c6aa76 0%, #c6aa7666 120%);
		}
		.archive {
			background: linear-gradient(90deg, #555555 0%, #cccccc 120%);
		}
	}

	.no-Preliminary {
		grid-template-columns: 1fr 80px;
		.new { margin: 0;}
	}
	
	.ModelSpec {
		float:right;
		width:100%;
		padding-right:10px;
		text-align:left;
		border-left: 1px solid #DDD;
		position: relative;
	}
	
	.ModelSpec ul {
		list-style-type: circle;
		display: grid;
		max-height: 240px;
		align-content: space-evenly;
		padding: 10px 15px;
		overflow-y: auto;
		scrollbar-color: rgba(22, 50, 118, 1) transparent;
		scrollbar-width: thin;
		margin-top: 8px;
	}
	.ModelSpec li {margin-left:24px; font:normal 12.5px 'acumin-pro'; line-height:16px; letter-spacing: 0.07em; margin-top: 1px;}
	.ModelPic img {
		filter: drop-shadow(2px 4px 4px #FFF);
	}
	
	.CompBtn, .CompNow {font-family:'Trebuchet MS', arial, helvetica, sans-serif; font-size:.3cm; float: center; text-align:center; color:#001871; text-decoration: underline; width:100px; line-height:22px; transition: all 0.3s ease-in-out;}
	.CompBtn:hover, .CompNow:hover {color:#78BE20; cursor:pointer; transition: all 0.3s ease-in-out;}
	.ResetBtn {
		font-family:'Trebuchet MS', arial, helvetica, sans-serif; 
		width: 100%; 
		font-size:.3cm; 
		text-align:right; 
		color:#001871; 
		text-decoration: underline; 
		line-height:22px; 
		transition: all 0.3s ease-in-out;}
	.ResetBtn:hover {color:#78BE20; cursor:pointer; transition: all 0.5s ease-in-out;}
	
	.PreBtn {font-family:'Trebuchet MS', arial, helvetica, sans-serif; font-size:.3cm; padding: 5px 1px;background:#808080; border:1px solid #555; border-radius:6px; text-align:center; text-shadow:1px 1px #000; color:#fff; width:100px; line-height:22px; transition: all 0.3s ease-in-out;}
	
	div.Preliminary {
		float: right;
		background: radial-gradient(circle farthest-corner at -10% 20%, #0f1835 0%, #4370b7 90%);
		font-family: var(--brand-font);
		font-weight: 500;
		padding: 3px 0px 1px 0px;
		font-size: 12px;
		width:150px;
		margin-left:3px; margin-right:10px;
		border-radius:6px; text-align:center;
		color:#fff; line-height:22px; transition: all 0.3s ease-in-out;
		border: .1em solid #FFF;
		letter-spacing: .07em;
		background: radial-gradient(circle farthest-corner at -10% 20%, rgb(69, 72, 84) 10%, #aaa 100%);
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 1;
	}

	#search-bar {
		display: grid;
		grid-template-columns: 1fr 32px;
		margin: 5px 0;
	}

	.col-sm-3 {
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: #CCC transparent;
	}
	
	.col-sm-3 form {
		display: flex;
		justify-content: space-between;
		width: 100%;
		input, input::placeholder {
			color: #666;
			background: transparent;
			border: none;
		}
		input {
			padding: 4px 10px 0px;
			font-family: var(--brand-font);
			width: 100%;
			font-size: 15px;
			letter-spacing: .05em;
			border: 1px solid #CCC;
			height: 35px;
		}
		button {
			border: none;
			padding: 3px 5px 0px;
			display: flex;
			align-items: center;        
			background: #DDD;
			border: 1px solid #CCC;
			border-left: none;
			svg {
				filter: drop-shadow(0px 0px .1em #333);
			}
		}
	}
	
	.ProductCategory {
		padding: 0px 0px 3em;
		h2 {
			font-family: var(--brand-font);
			font-weight: 800;
			border-bottom: 1px solid #78BE20;
			margin-top: 30px;
			padding: 0px 8px;
			display: flex;
			justify-content: space-between;
		}
		span {
			cursor: pointer;
			display: none;
		}
	}
	.Category {
		padding: 13px 10px 10px;
		font-family: var(--brand-font);
		font-weight: 400;
		font-size: 1.2em;
		color: #aaa;
		font-weight: 300;
	}
	.Category[onclick] {cursor: pointer;color: #444; transition: all .2s ease-in-out;}
	.Category[onclick]:hover {background: #f2f2f2;}
	.Category.title {font-weight: 700;}
	
	#FilterDisplay {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
		align-items: center;
		border-bottom: 1px solid #78BE20;
		font: 300 1em var(--brand-font);
		letter-spacing: 1px;
		padding-bottom: 2px;
		.between { margin: 0px 10px; }
		span { white-space: nowrap; }
		svg { width: 20px; transition: all .2s ease-in-out; }
		a:hover svg { opacity: .6; }
	}
	#NowCategory {
		font-family: var(--brand-font);
		text-wrap-mode: nowrap;
		position: relative;
    	top: 1px;
	}
	.FilterList {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		#Filter {
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			margin-bottom: 5px;
		}
		.filter-button {
			background: #ddd;
			padding: 6px 10px 3px;
			font-family: var(--brand-font);
			font-weight: 300;
			border-radius: 5px;
			letter-spacing: .05em;
			margin: 5px 5px 0;
			text-wrap-mode: nowrap;
			cursor: pointer;
		}
		.filter-button::after {
			content: '×';
			margin-left: 10px;
			color: #b00;
			font-weight: 600;
			font-size: large;
		}
	}
	
	.right {float:right;}
	.left {float:left;}
	
	.CompBtn {
		font-size: 14px;
		text-decoration: none;
		font-family: 'acumin-pro';
		margin-top: 20px;
		font-variant: all-small-caps;
		line-height: 18px;
		border-bottom: 1px solid #333;
		width: max-content;
	}
	
	#ProductsList input {
		border-image: linear-gradient(298deg, rgba(121, 189, 40, 1) 0%, rgba(121, 189, 40, 1) 50%, rgba(0, 47, 123, 1) 50%, rgba(0, 47, 123, 1) 100%) 1;
		border-style: solid;
		border-width: 2px;
		background: none;
	}
	input#Model, div#ProductType_chosen, select#ProductType {
		max-width: 100%;
	}
	video.BGVideo {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	@media (max-width: 991px) {
		.container {width: 100%;}
		.ProductsItems {
			grid-template-columns: 150px 1fr;
		}
		.filter .container > div {width: calc(33% - 8px) !important;}
		.ModelName {
			grid-template-columns: 1fr 40px 100px;
			div.Preliminary {width: 90px;}
			.new {
				font-size: .6em;
        		width: 40px;
			}
		}
		.no-Preliminary {grid-template-columns: 1fr 65px;}
	}
	@media (max-width: 767px) {
		.menu {
			display: grid;
			grid-auto-flow: column;
        	grid-template-rows: repeat(7, 1fr);
		}
		.Category {
			margin-left: 10px;
			width: calc(100% - 20px);
			line-height: 2ch;
		}
		.ModelSpec {border: none;}
	}
	@media (max-width: 680px) { .filter .container > div { width: calc(50% - 8px) !important; } }
	@media (max-width: 540px) {
		.ModelPic {
			grid-row-start: 2;
			padding: 10px 15px 0;
		}
		.ModelName {
			grid-column-start: 1;
			grid-column-end: 3;
			padding: 10px 15px 30px;
			a {
				display: flex;
				align-items: center;
			}
		}
		.ProductsItems {
			height: 360px;
			grid-template-columns: 130px 1fr;
			grid-template-rows: 80px 1fr;
		}
		div#ProductsSelection {
			padding: 1em;
			box-shadow: 0px 0px 12px -1px rgba(0, 47, 123, 0.5);
			margin: 1em 0em;
		}
	}
	@media (max-width: 450px) {
		.ProductsItems {
			grid-template-columns: 1fr;
			height: auto;
		}
		.filter .container > div {
			width: calc(90% - 8px) !important;
		}
		.Category { padding: 13px 4px 10px; }
		.ModelName {
			grid-row-start: 1;
			grid-row-end: 2;
			a {
            	grid-column-start: 1;
				grid-column-end: 4;
				padding-bottom: 5px;
			}
			div {
				height: 4ch;
				grid-row-start: 2 !important;
			}
		}
		.ModelSpec {
			grid-row-start: 3;
		}
		.ModelPic {
			padding: 0;
			margin-bottom: 2em;
		}
		.ModelSpec li {
			margin-bottom: 5px;
		}
		.CompBtn {
			margin: 10px;
		}
	}
.Buttons {border-radius:1em; cursor:pointer; font-weight:bold; margin:.2em; padding:.8em 1.6em; text-align:center; background:#ccc; border:1px solid #444; box-shadow:1px 1px 2px rgba(100,100,100, 0.5); color:#555555; outline:0;}
.Buttons:hover {background:#666; text-shadow:1px 1px #000; box-shadow:2px 2px 8px rgba(255,255,255, 0.6); border:1px solid #888; color:#ff0;} .Buttons:active {background:#aaa; color:#0ff;}
.Buttons:disabled {background:#333; border:1px solid #000; color:#666; cursor:not-allowed;}

.catalogBtn {
	width:100%;
	color: #fff;
	padding:10px;
	text-align:center;text-decoration: none;
	display:inline-block;
	font:18px var(--brand-font);
	font-weight: 600;
	margin: 4px 2px;
	cursor:pointer;
	transition: .2s ease-in-out;
	border-radius: 5px;
	margin-top: 15px;
	border: none;
	background: #002f7b;
	letter-spacing: 1px;
	font-variant: all-small-caps;
	background: radial-gradient(circle farthest-corner at -10% 20%, rgb(80, 80, 80) 10%, #eee 100%);
}

.col-sm-3 input[type="submit"]:hover, .catalogBtn:hover {background: #78BE20;}
.sub a {
  font-size: 11px;
  padding: 8px 18px !important;
}

:root {
	--latest-platform-width: 50vw;
	--brand-font: 'acumin-pro', sans-serif;
	--filter-button-size: 24px;

	/* Published by products.js from the elements' real border-box heights.
	   These values are only the pre-JS fallback -- --nav-h must be the EXPANDED
	   navbar height, because that is its state at first paint. */
	--nav-h: 116px;
	--filter-menu-h: 0px;
}
header {
	background-image: url(images/header/product.jpg);
	background-size: cover;
}

.intro-body {
	padding: 100px 50px 120px !important;
	h1, h2, h3, h4, h5, h6 { 
		font-family: var(--brand-font);
		color: #FFF;
	}
	h1 {
		font-size: 40px;
		line-height: 54px;
		font-weight: 800;
		text-shadow: none;
		margin-top: 2em;
		@media (max-width: 540px) {
			font-size: 30px;
            line-height: 40px;
		}
	}
	img { filter: drop-shadow(1px 3px 4px rgba(0 0 0 /.5)); max-width: 100%; max-height: 120%; padding-top: 20px;}

	.col-sm-6 {height: 400px;}
	.col-sm-6:not(.text-left) {
		display: flex;
		align-items: center;
	}

	h4 {margin-left: 10px;}

	h4 span {
		color: #002f7b;
		font-weight: 800;
		display: none;
	}
}

.page-nav h6 {
	margin-left: 10px;
	font-weight: 300;
}

.title-desc {
	margin: 80px 0px;
	h4 {text-transform: none;}
}
.platform {
	margin-left: 5px;
	h6 {
		width: var(--latest-platform-width);
		border-image: linear-gradient(90deg,rgba(117, 179, 46, 1) 0%, rgba(22, 50, 118, 1) 100%) 1;
		border-color: transparent;
		border-style: solid;
		border-width: 0 0 1px 0;
	}
	div {
		width: var(--latest-platform-width);
		margin: 0;
	}
	div button {
		background: rgba(255 255 255 / .25);
		border: none;
		border-radius: 5px;
		color: #FFF;
		font-family: var(--brand-font);
		letter-spacing: 1px;
		padding: 4px 12px 0;
		margin: 5px 4px;
		backdrop-filter: blur(3px);
		width: max-content;
		transition: all .2s;
		&:hover {background: rgba(255 255 255 / .4);}
	}
}

.filter {
	background-color: #eee;
	position: relative;
	top: 0;
	left: 0;
	padding: 10px;
	.container::after, .container::before {display: none;}
	.container {
		display: flex;
		flex-wrap: wrap;
	}
	.container > div {
		background: #FFF;
		width: calc(25% - 8px);
		border-radius: 5px;
		margin: 4px;
		border: 1px solid #CCC;
		padding: 3px 10px;
	}
	.SelectCat {
		position: relative;
		font-family: var(--brand-font);
		padding: 4px 0 0;
		cursor: pointer;
		font { padding-right: 10px;}
		input {
			border: none;
			margin: 0;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			width: 0px;
		}
	}
	.SelectCat::after {
		content: '▼';
		position: absolute;
		right: 0px;
		font-size: smaller;
	}
	.SelectItems {
		display: none;
		position: absolute;
		background: #FFF;
		border-radius: 5px;
        border: 1px #000 solid;
        box-shadow: 5px 5px 7px 0px rgba(0 0 0 / .2);
		max-height: 280px;
        overflow: auto;
		margin-top: 3px;
		z-index: 10;
	}
}

.filter.unable::after {
    content: '';
    background: rgba(204 204 204 / 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.border {
	border-image: linear-gradient(90deg,rgba(117, 179, 46, 1) 40%, rgba(22, 50, 118, 1) 80%) 1;
	border-color: transparent;
	border-style: solid;
	border-width: 0 0 2px 0;
}

/* Pinned by the browser, not by a scroll handler. section.main is
   position:relative with no clipping ancestor, so it is the sticky containing
   block and the menu releases naturally at the end of the product list.

   DESKTOP ONLY. The filter bar is ~335px tall when the groups are expanded,
   which on a 500px-tall phone viewport would occupy about two thirds of the
   screen permanently. The original JS only pinned it when
   rect.bottom >= winH + 500, a condition that is almost never true on a short
   viewport, so on phones the bar scrolled away - preserve that. */
@media (min-width: 768px) {
	.filter-menu {
		position: sticky;
		top: var(--nav-h);
		width: 100%;
		z-index: 10;
	}

	/* Retained only so stale markup or a cached older products.js that still
	   adds .fixed stays harmless. Nothing sets this class any more. */
	.filter-menu.fixed {
		position: sticky;
		top: var(--nav-h);
	}
}

/* The left column pins below the filter menu and scrolls internally. Was three
   inline styles written from JS on every scroll event. */
@media (min-width: 768px) {
	.container .col-sm-3 {
		position: sticky;
		top: calc(var(--nav-h) + var(--filter-menu-h));
		max-height: calc(100vh - var(--nav-h) - var(--filter-menu-h));
		overflow-y: auto;
	}
}

#filter-button {
	width: calc(var(--filter-button-size) + 50px);
	height: var(--filter-button-size);
	background: rgba(22, 50, 118, 1);
	display: block;
	color: #FFF;
	text-align: center;
	border-radius: 0px 0px 5px 5px;
	font-size: smaller;
	margin: 0 0 20px auto;
	cursor: pointer;
}

input[type=checkbox], input[type=radio] {
	accent-color: #609919;
    filter: brightness(1.2);
}

.col-sm-9 {
    display: flex;
    flex-direction: column;
}

#ResetSearch {
    font-family: var(--brand-font);
	letter-spacing: .1em;
	padding: 0px 6px;
    display: inline-flex;
    border: 1px solid #CCC;
    border-left: none;
	svg {
		width: 20px;
		filter: drop-shadow(0px 0px 1px black);
	}
}

#type div, span div[onclick] {
    color: #000;
    cursor: pointer;
    padding-bottom: 2px;
	transition: all .2s ease-in-out;
	&:hover {opacity: .6;}
}

.catalogBtn, .new, .Preliminary, .archive {
    text-shadow: 0px 0px .15em #000, 0px 0px .05em #000;
}

.loader {
  border: 15px solid #f3f3f3;
  border-radius: 50%;
  border-top: 15px solid #c6aa76;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
  margin-top: 2em;
  transform: scale(.5);
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}