/*

 .oooooo..o ooooooooooooo oooooo   oooo ooooo        oooooooooooo  .oooooo..o           .oooo.   
d8P'    `Y8 8'   888   `8  `888.   .8'  `888'        `888'     `8 d8P'    `Y8         .dP""Y88b  
Y88bo.           888        `888. .8'    888          888         Y88bo.                    ]8P' 
 `"Y8888o.       888         `888.8'     888          888oooo8     `"Y8888o.              .d8P'  
     `"Y88b      888          `888'      888          888    "         `"Y88b 8888888   .dP'     
oo     .d8P      888           888       888       o  888       o oo     .d8P         .oP     .o 
8""88888P'      o888o         o888o     o888ooooood8 o888ooooood8 8""88888P'          8888888888 

													  :e
														'M$\
													   sf$$br
													 J\J\J$L$L
												   :d  )fM$$$$$r
											  ..P*\ .4MJP   '*\
									 sed"""""" ser d$$$F
								 .M\  ..JM$$$B$$$$BJ$MR  ...
								dF  nMMM$$$R$$$$$$$h"$ks$$"$$r
							  J\.. .MMM8$$$$$LM$P\..'**\    *\
							 d :d$r "M$$$$br'$M\d$R
							J\MM\ *L   *M$B8MM$B.**
						   :fd$>  :fhr 'MRM$$M$$"
						   MJ$>    '5J5..M8$$>
						  :fMM     d$Fd$$R$$F
						  4M$P .$$*.J*$$**
						  M4$> '$>dRdF
						  MMM\   *L*B.         
						 :$$F     ?k"Re
					   .$$P\        **'$$B...
					:e$F"               '""""
                                                                                                 
                                                                                                                                                                                                
This stylesheet was created on 10.26.23 by Marcus Nicolois for Velocity Micro.
Prior to this, new styles were localized on each page to avoid creating issues in our existing CSS.
Styles here are NOT INTENDED to override anything that already exists within the site.
If under any circumstance they do, unless perfectly intentional and monitored, styles should be renamed/id'd in order to avoid disrupting layouts in our many, many pages.
*/

html{
	scroll-behavior: smooth;
}

	.pageSubheadBold{
		font-weight: 600;
		font-size: 	clamp(1.25rem, 1.75vw, 2rem);
		font-family: "roboto", sans-serif;
	}
	
	.pageCopy{
		line-height: clamp(2rem, 2.5vw, 3rem); 
		font-weight: 300;
		font-size: clamp(1.15rem, 1.25vw, 1.5rem);
	}

	.sectionTitle{
		text-align: center;
	}	
	
	.sectionTitle h2{
		font-family: "roboto", sans-serif;
		font-weight: 600;
		font-size: 3rem;
		margin: 3rem;
	}	
	.sectionTitle h3{
		font-family: "roboto", sans-serif;
		font-weight: 600;
		font-size: 2.5rem;
		margin: 2.5rem;
	}

.pageTitle{
	font-family: "roboto", sans-serif;
	font-weight: 100;
	font-size: clamp(3rem,4vw,6rem);
}

.pageSubhead{
	font-family: "roboto", sans-serif;
	font-weight: 200;
	font-size: clamp(1.8rem, 2vw, 2.5rem);
}

a.pageSubhead{
	font-family: "roboto", sans-serif;
	font-weight: 100;
	font-size: 2.5rem;
}

.product-pairs{
	display: flex;
	width: 100%;
	height: auto;
}

.product-pairs .pair-block{
	display: flex;
	width: 100%;
	height: auto;
}

.pair-block .product-image{
	background-position: center;
	background-size: cover;
	width: 100%
}

.pair-block .product-copy{
	width: 100%;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-justify: left;
}

.pair-block	.product-copy p{
		font-size: 1rem;
		font-weight: 200px;
	}

.common-button{
	border-bottom-right-radius: 20px; 
	background-color: white; 
	border: solid 1px black; 
	text-align: center;
	padding: 10px;
	padding-left: 50px;
	padding-right: 50px;
	font-family: "roboto", sans-serif;
	font-weight: 300;
	font-size: 1rem;
	transition: ease-in .25s;
	align-self: flex-start;
}
				
a.common-button{
	color: black;
}
				
.common-button:hover{
	background-color:  hsla(0,0%,0%,1); 
	color: white;				
	transition: ease-in .25s;
}

	@media screen and (max-width: 1400px) {
		.pair-block{
			flex-direction: column;
		}
		
		.pair-block .product-image{
			min-height: 250px;
			width: 80%;
			margin-left: 10%;
			margin-right: 10%;
		}
	}

	@media screen and (max-width: 700px) {
		.product-pairs{
			flex-direction: column;
		}
		
		.pair-block .product-image{
			min-height: 300px;
		}
	}


.flex-banner{
	display: flex;
	align-content: center;	
	align-items: center;
	background-position: center;
	background-size: cover;
	height: 40vh;
	background-color: #141414;
}

.flex-banner-fade{
	display: none;
	margin-top: 0vh;
}

.flex-banner-copy{
	display: flex;
	align-content: center;	
	align-items: center;
	height: 40vh;
	width: 100%;
	z-index: 3;
	margin-top: -40vh;
	padding-left: 10vw;
	position: relative;
}



@media screen and (max-width: 992px) {
	.flex-banner-fade{
		display: flex; 
		height: 40vh;
		background-color: #141414;
		opacity: .6;
		margin-top: -40vh;
		z-index: 2;
		position: relative;
	}
}

.banner-title{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 800;
	font-size: 4rem;
	color: white;
}

.banner-caption{
	font-family: "roboto", sans-serif;
	font-weight: 100;
	font-size: 2rem;
	color: white;
}
	
.best-seller{
		display: flex;
		width: 100%;
		height: 300px;
		align-items: center;
	}
	
.best-seller-copy{
		font-family: "roboto", sans-serif;
		padding: 2.5rem;
	}

.btn41-43 {
  padding: 10px 25px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  background: black;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.btn-43 {
  border: 2px solid rgb(255, 255, 255);
  z-index: 1;
  color: white;
}

.btn-43:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: rgb(255, 255, 255);
  transition: all 0.3s ease;
}

.btn-43:hover {
  color: rgb(0, 0, 0);
}

.btn-43:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
	
@media screen and (max-width: 600px) {
	.best-seller{
		flex-direction: column;
	}	
}

.verticalCenter{
	height: inherit; 
	display: flex; 
	flex-direction: column; 
	justify-content: center
}

.desktop-only{
	display: contents;
}

@media screen and (max-width: 991px) {
	.desktop-only{
		display: none
	}
}

.mobile-only{
	display: none;
}

@media screen and (max-width: 991px) {
	.mobile-only{
		display: contents
	}
}


			.linkBar{
				font-family:'roboto', sans-serif;
				font-weight: 200;
				font-size: 2em;
				background-color: hsla(0,0%,46%,0.10);
				color: white;
				padding: 50px;
				text-align: center;
				transition: all 2.5s cubic-bezier(0,.94,.22,1.09);
				letter-spacing: auto;
				width: 100%;
				height: auto;
			}
			
			.linkBar a{
				color: white;
			}
			
			.linkBar:hover{
				letter-spacing: 4px;
				background-color:  hsla(0,0%,46%,0.33);
			}	
			
			.linkBar a:visited{
				color: hsla(265,92%,67%,0.91);
			}	
			
			.linkBar a:hover{
				color: hsla(48,100%,57%,1.00);
			}




	
			.flexBlock{
				width: 100%; 
				display: flex;
				font-weight: 300;
				background-color: hsla(0,0%,0%,0.06);
			}

			.flexBlock .kv{
				width: 50vw;
				height: inherit;
				background-position: center;
				background-size: cover;
			}
			
			.flexBlock .copy{
				width: 50vw;
				flex-grow: .3; 
				padding-left: 8rem;				
				padding-top: 8rem;				
				padding-bottom: 8rem;
				background-size: cover;
				font-family:'roboto', sans-serif;
				font-weight: 300;
				padding-right: 10vw;
			}
			

			@media screen and (max-width:1200px){
				.flexBlock{
					flex-direction: column;
				}
				
				.flexBlock .kv{
					width: 100%;
					height: 400px;
				}
				
				.flexBlock .kv img{
					width: 100%;
			}
				
				.flexBlock .copy{
					padding-top: 50px;
					width: 100%;
					padding-left: 2.5rem;
					padding-right: 2.5rem;
				}
			}

		.blockQuote{
			border-left: 1px solid gray; 
			padding-left: 1rem;
			font-family:'roboto', sans-serif;
			font-weight: 300;
			font-size: 2rem;
		}

/*
     .-.     .-.     .-.     .-.     .-.     .-.     .-.
`._.'   `._.'   `._.'   `._.'   `._.'   `._.'   `._.'   `._.'

				2026 PRODUCT PAGE FORMATTING
     .-.     .-.     .-.     .-.     .-.     .-.     .-.
`._.'   `._.'   `._.'   `._.'   `._.'   `._.'   `._.'   `._.'

*/

/* This formatting was created initially on the test page Promagix-HD60-Workstation-Pc-test-2.php.
	I haven't removed any of it from there - and it works there, last time I checked!
	*/

    /* --- ACTIVE HEADER CSS START --- */

/*
IMPORTANT NOTE: 
	the <body> of the page should have [overflow: visible] in order for this header to work.
*/
    
    /* The Header Container */
    .scroll-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
        
        /* Animation settings */
        transition: transform 0.4s ease-in-out;
        transform: translateY(-100%); /* Start hidden above screen */
    }

    /* The Active State */
    .scroll-header.active {
        transform: translateY(0); /* Slide down */
    }

    /* Layout for content inside */
    .header-content {
        max-width: 1000px;
        margin: 0 auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
    }

    /* Link Styling */
    .header-links a {
        text-decoration: none;
        color: #333;
        font-weight: 500;
        margin-right: 25px;
        font-size: 1.5rem;
		font-weight:300; 
        transition: color 0.2s;
    }

    .header-links a:hover {
        color: #007bff;
    }
    
	/* buy now button styling */
    .buy-now-btn {
		background-color: hsla(0,0%,55%,1.00);
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        text-decoration: none;
    }
	
	.buy-now-btn:hover{
		color: white;
	}	
	
    /* --- ACTIVE HEADER CSS END --- */


	/* Buy Now Button Styling */
	.buy-now-btn {
		background-color: #000;
		color: #fff;
		text-decoration: none;
		padding: 10px 24px;
		border-radius: 30px;
		font-weight: bold;
		transition: background-color 0.3s, transform 0.2s;
	}

	.buy-now-btn:hover {
		background-color: #333;
		transform: scale(1.05);
	}	
	
	.uncommon-button{
		border-bottom-right-radius: 20px; 
		background-color: #06384f;
		color: white;
		text-align: center;
		padding: 10px;
		padding-left: 50px;
		padding-right: 50px;
		font-family: "roboto", sans-serif;
		font-weight: 300;
		font-size: 1.5rem;
		transition: ease-in .25s;
		align-self: flex-start;
	}

	a.uncommon-button{
		color: white;
	}

	.uncommon-button:hover{
		background-color: #008AFF; 			
		transition: ease-in .25s;
	}	
	

	.fuckingCenterThis{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.flexBlock{
		min-height: 60rem;
		filter: saturate(0);
		transition: 1s ease-in-out;
	}


	.flexBlock:hover{
		filter: saturate(1);
	}

	.mobile-display{
		display: none;
		width: 100%;
	}
	
	.textBlock{
		margin-left: 5vw;
		margin-right: 5vw;
		margin-bottom: 5rem;
	}


	.logoCard{
		width: min(90vw, 1000px);
		height: auto;
		border-radius: 20px;
		transition: ease-in-out .5s;
		box-shadow: 0px 0px 36px 11px rgba(0,0,0,0.05);
	}		


	.logoCard:hover{
		box-shadow: 0px 0px 45px 11px rgba(0,0,0,0.20);
	}	


@media screen and (max-width:990px){
		.mobile-display{
			display: block;
		}
		.hero{
			background:none;
		}
}
	

	p.fine{
		color: #676767;
		font-size: 9px;
	}
			
			
	
	.main-flex{
		width=100%; 
		display: flex;
	}
	
	.main-flex .kv{
		flex-grow:.6
	}
	
	.main-flex .kv img{
		max-width: 60vw
	}
	
	.main-flex .copy{
		flex-grow: .4; 
		padding: 4vw;
		background-color: #ffffff;
		opacity: 1;
		background-image:  linear-gradient(30deg, #fafafa 12%, transparent 12.5%, transparent 87%, #fafafa 87.5%, #fafafa), linear-gradient(150deg, #fafafa 12%, transparent 12.5%, transparent 87%, #fafafa 87.5%, #fafafa), linear-gradient(30deg, #fafafa 12%, transparent 12.5%, transparent 87%, #fafafa 87.5%, #fafafa), linear-gradient(150deg, #fafafa 12%, transparent 12.5%, transparent 87%, #fafafa 87.5%, #fafafa), linear-gradient(60deg, #fafafa77 25%, transparent 25.5%, transparent 75%, #fafafa77 75%, #fafafa77), linear-gradient(60deg, #fafafa77 25%, transparent 25.5%, transparent 75%, #fafafa77 75%, #fafafa77);
		background-size: 80px 140px;
		background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;	
	}
	
	@media screen and (max-width:1500px){
		.main-flex{
			flex-direction: column;
		}
		
		.main-flex .kv{
			max-width: 100%;
		}
		
		.main-flex .kv img{
			max-width: 100vw
	}
		
		.main-flex .copy{
			padding: 10vw;
		}
	}	


	.card1{
		width: min(90vw, 1000px);
		height: auto;
		display: flex;
		flex-direction: column;
		transition: ease-in-out .5s;
		background-size: 35vw 35vw;
/*		box-shadow: 0px 0px 36px 11px rgba(0,0,0,0.05);*/
		border-radius: 20px;
	}
	
	.card1:hover{
/*		background-size: 37vw 37vw;*/
	}
	
	.card1 .imageSide{
		 mid-width: inherit;
		 min-height: 30rem;
		 border-top-right-radius: 2.5rem;
		 border-bottom-left-radius: 0rem;
		 background-size: cover;
	}
	
	.card1 .textSide{
		border-top-right-radius: 0;
		border-bottom-left-radius: 2.5rem;
		padding: 3rem
	}
	
	.card1 img{
		border-radius: 20px;
	}
	
	.card1 .textSide .text{
			max-width: 100%;
			border-left: solid 0px white;
			padding-left: 0rem;
			margin-left: 0rem;
	}		
	

	
	@media screen and (min-width: 991px){

		.card1{
			transition:
				width 1.1s cubic-bezier(.22,.61,.36,1),
				transform 1.1s cubic-bezier(.22,.61,.36,1);
		}

		.card1.expand-on-scroll{
			width: min(90vw, 1200px);
		}

		/* Image-specific animation with delay */
		.card1 img{
			transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
			transition-delay: .5s;
			transform-origin: center center;
		}

		.card1.expand-on-scroll img{
			transform: scale(1.04);
			transition-delay: 0.5s; /* 100ms delay */
		}
	}	


/*  reactive gallery styling */

	.reactiveGallery{
		width: min(90vw, 1000px);
		height: auto;
		display: flex;
		justify-content: center;
		border-radius: 20px;
		transition: ease-in-out .5s;
		box-shadow: 0px 0px 36px 11px rgba(0,0,0,0.05);
	}		
	
	.reactiveGallery:hover{
		box-shadow: 0px 0px 45px 11px rgba(0,0,0,0.20);
	}
	
	.reactiveGalleryItem{
		width: 25%;
		height: 300px;
		background-size: cover;
		background-position: center;
		transition: ease-in-out .5s;
	}
	
	.reactiveGalleryItem:hover{
		width: 30%;
		flex-grow: 2;
	}
	
	.galleryEdgeLeft{
		border-radius: 20px 0px 0px 20px;
	}	
	
	.galleryEdgeRight{
		border-radius: 00px 20px 20px 0px;
	}
	
	/* Lightbox overlay */
.lightbox-overlay{
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease, visibility .3s ease; 
		padding: min(10vw, 10rem);
    }

    .lightbox-overlay.active{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

	.lightbox-image{
		max-width: 90vw;
		max-height: 90vh;
		border-radius: 12px;
		box-shadow: 0 0 40px rgba(0,0,0,0.6);
	}

	/* Navigation arrows */
	.lightbox-nav{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		font-size: 3rem;
		color: white;
		cursor: pointer;
		user-select: none;
		padding: 1rem;
		opacity: 0.75;
		transition: opacity .2s ease;
	}

	.lightbox-nav:hover{
		opacity: 1;
	}

	.lightbox-prev{ left: 2vw; }
	.lightbox-next{ right: 2vw; }

	/* Improve click affordance */
	.reactiveGalleryItem{
		cursor: pointer;
	}	
	
	.lightbox-caption{
		position: absolute;
		bottom: 4vh;
		max-width: 80vw;
		color: #fff;
		font-size: 2rem;
		padding: 2rem;
		text-align: center;
		line-height: 1.4;
		opacity: 0.85;
		pointer-events: none;
	}

	@media (max-width: 768px){
		.lightbox-caption{
			font-size: 0.95rem;
			bottom: 3vh;
		}
	}
	
	 @media screen and (max-width: 990px){

		 .reactiveGalleryItem{
			height: 175px;
		 }
		 
	}	
	
	 @media screen and (max-width: 500px){
		 .reactiveGallery{
			 flex-direction: column;
		 }	 

		 .reactiveGalleryItem{
			 width: 100%;
			 height: 500px;
		 }
		 
		.reactiveGalleryItem:hover{
			width: 100%;
			height: 600px;
			flex-grow: 2;
		}
		 
	
		.galleryEdgeLeft{
			border-radius: 0px;
		}	

		.galleryEdgeRight{
			border-radius: 0px;
		}		 
		 
	}

	
	.fancySubhead{
		font-size: clamp(2rem, 3.5vw, 3.5rem);
		font-size: 72px;
		color: #181818;
		transition: ease-in-out 2s
	}
	
	.fancySubhead:hover{
		color: #14A3FF;
	}



/*
     .-.     .-.     .-.     .-.     .-.     .-.     .-.
`._.'   `._.'   `._.'   `._.'   `._.'   `._.'   `._.'   `._.'

			END OF: 2026 PRODUCT PAGE FORMATTING
     .-.     .-.     .-.     .-.     .-.     .-.     .-.
`._.'   `._.'   `._.'   `._.'   `._.'   `._.'   `._.'   `._.'

*/