/*

 .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;
}

	.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: 100;
	font-size: 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;
	}
	
@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;
		}