/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 



/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BUTTON --------*/

button{
	background-color: #AF0D22; 
	color: #fff;
	border: none;
	padding: 15px 40px;
	cursor: pointer;
	transition: .25s;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 16px;
}

button a{
	color: #fff;
}

button:hover{
	background-color: #8F0013; 
}

/*-------- Universal Settings --------*/
section{
	padding:65px 40px;
}

h1{
	font-weight: 400;
	font-size: 45px;
	line-height: 52px;
}

h2{
	font-weight: 400;
	font-size: 34px;
}

hr{
	border: 3px solid #AF0D22;
	width: 100px;
	margin-left: 0;
	margin-top: 10px !important;
	margin-bottom: 15px !important;
}

.flex{
	display: flex;
	justify-content: space-between;
}

.gap{
	gap: 30px;
}

.half-flex{
	width: 50%;
}

.red-background{
	background-color: #AF0D22;
}

.black-background{
	background-color: #000;
}

.white{
	color: #FFFFFF;
	border-color: #FFFFFF;
}

.text-center{
	text-align: center;
}

.margin-center{
	margin: 0 auto;
}

.no-margin-top{
	padding-top: 0px !important;
}

.vanderzanden{
	color: #fff;
}

.vanderzanden-logo{
  font-family: "Graduate", serif;
  font-weight: 700;
}

/*-------- BODY STYLES --------*/

body {

}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}

body{
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}


/*--- HEADER STYLES ---------------------*/
header {

}

nav.primary img.logo{
	max-width: 120px;
}

.right-menu{
	text-align: right;
}

.right-menu .phone a{
	font-size: 14px !important;
	line-height: 60px;
}

.mobile-phone{
	font-size: 16px;
	color: #000 !important;
}


/*---BODY--------------------------------*/




/*--------HOME STYLES--------------------*/



.cover-headings button{
	margin-top: 25px;
}

.inventory-buttons{
	display: flex;
	flex-direction: column;
	width: 200px;
	gap: 10px;
}

.cover-background{
	background-color: #00000075;
	width: 50%;
	height: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #000;
	background-position: center;
}

.cover-background img{
	width: 240px;
	height: auto;
}

.cover-background:hover{
	background-image: none !important;
}

.versatile-background{
	background-image: linear-gradient(170deg, rgba(0,0,0,.77) 90%, rgba(0,0,0,.77) 90%), url("/siteart/Versatile.jpg");
}

.degelman-background{
	background-image: linear-gradient(170deg, rgba(0,0,0,.77) 90%, rgba(0,0,0,.77) 90%), url("/siteart/Degelman-Speed-Disc.png");
}

.our-brand-logos{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4%;
	flex-wrap: wrap;
}

.our-brand-logos div{
	width: 175px;
	height: auto;
}

.our-brand-logos img{
	width: 100%;
	margin-top:50px;
	transition: .25s;
}

.our-brand-logos img:hover{
	opacity: 25%;
}

.inner-cover{
	border-top: 1px solid #00000010;
}

.mobile-image{
	width: 100%;
	display: none;
}

/*--------FORM STYLES--------------------*/
#formpage {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
}

input#fname{
	padding: 17px;
    background-color: #00000005;
    border: 1px solid #00000010;
	max-width: 100%;
	border-radius: 0px;
}

textarea#fname{
	padding: 17px 0px 5px 17px;
    background-color: #00000005;
    border: 1px solid #00000010;
	border-radius: 0px;
}

.form-field-flex input#fname{
	width: 100%;
}

.form-field-flex{
	display: flex;
	width: 100%;
	gap:10px;
}

input#fname::placeholder, textarea#fname::placeholder{
  color: black;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif" !important;
	font-size: 14px !important;
}

input.submit-button, .send-btn a{
	background-color: #AF0D22;
    color: #fff;
    border: none;
    padding: 15px 40px;
    cursor: pointer;
    transition: .25s;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 16px;
}


input.submit-button:hover, .send-btn a:hover{
	background-color: #8F0013;
}

.CaptchaPanel{
	margin: 0px !important;
	text-align: left !important;
	padding: 0px !important;
}

.CaptchaWhatsThisPanel a{
	color: #ffffff !important;
}

.send-btn{
	margin-top: 25px;
}


/*-------- FOOTER STYLES ----------------*/
footer{
	background: #000;
	padding: 50px 40px;
}

footer .logo{
	max-width: 150px;
}

.top-footer{
	color: #FFFFFF;
	display: flex;
	justify-content: space-between;
}

.logo-container a{
	color: #fff;
}

.bottom-footer{
		display: flex;
	justify-content: space-between;
	margin-top: 50px;
}

.bottom-footer i{
	color: #000;
	background-color: #818487; 
	padding: 5px 5px;
	border-radius: 5px;
	font-size: 12px;
}

.quick-links{
	display: flex;
	justify-content: space-around;
	gap: 50px;
	line-height: 30px;
}

.nav-footer{
	color: #FFFFFF;
	font-size: 12px;
}

.quick-links a{
	color: #FFFFFF;
	transition: .25s;
}

.quick-links a:hover{
	color: #FFFFFF75;
}

.fa-facebook-f{
	padding: 5px 7px !important;
	font-size: 13px !important;
}

/*----SLICK SLIDER----*/

.slick-slide{
	height: 60vh;
}

.slick-slide img{
	width: 100% !important;
}

ul.slick-dots{
	display: flex;
	justify-content: center;
	gap: 10px;
	padding-top: 25px;
}

.slick-dots button{
	background-color: #CDCDCD;
	color: #CDCDCD;
	border-radius: 150px;
	padding: 1px 3px;
	font-size: 5.5px !important;
}

.slick-dots button:focus{
	background-color: #9A9A9A;
	color: #9A9A9A;
}

.slider-container{
	position:relative;
}

.slider-container button{
	justify-content: center;
}

.header-slider{
	position: absolute;
	z-index:9999;
	padding: 25px 30px;
	width: 40%;
	color: #fff;
}

.header-button{
	position: absolute;
	left: 30px;
	bottom: 100px;
}

/*
.slider-container button{
	position: absolute ;
	left: 30px;
	bottom: 25px;
}

.header-slider{
	position: absolute;
	z-index:9999;
	padding: 25px 30px;
	width: 55%;
	color: #fff;
}

*/

.header-slider h1{
	color: #fff;

		text-shadow: 3px 3px 10px rgba(0,0,0,0.45);

}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.body-wrapper{
	border-top: 1px solid #00000010;
	padding: 50px 40px;

}
.body-wrapper section{
	padding: inherit;
}

.body-wrapper button{
	border-radius: 0px !important;
}

.body-wrapper .selected-facet{
	background-color: #AF0D22 !important;
}

.body-wrapper .view-listing-details-link{
	background-color: #AF0D22 !important;
}

.body-wrapper .selected-facets-container{
	background-color: #00000009;
}

.listing-top-right span a{
	border-radius: 0px !important;
}

p.disclaimer{
	font-size: 12px;
	padding-top: 25px;
}

/*---------- AOS STYLES ----------*/

.aos-init[data-aos].aos-animate {
   transform: unset;
}


/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1105px) {
	.header-slider{
		width: 65%;
	}
}

@media only screen and (max-width: 1002px) {
	h1{
		font-size: 40px;
		line-height: 50px;
	}
	
	.header-button{
		bottom: 85px;
	}
}


@media only screen and (max-width: 900px) {
	
	.slider-container{
		margin-top: 50px;
	}
	
	.header-button{
		bottom: 75px;
	}
}


@media only screen and (max-width: 850px) {
	.header-slider h1{
		font-size: 32px;
		line-height: 40px;
	}
	
	.header-slider{
		width: 70%;
	}
}

@media only screen and (max-width: 750px) {
	.header-slider{
		position:inherit;
		padding: 25px 0px;
		width: 80%;
	}
	
	.header-slider h1{
		text-shadow: none;
		color: #000;
	}
	
	.header-button{
		position: inherit;
		bottom: inherit;
		left: inherit;
		margin-top: 40px;
	}
}


@media only screen and (max-width: 700px) {
	
	.header-slider{
		
	}
	
	h1{
		font-size: 36px;
		line-height: 42px;
	}
	
	h2{
		font-size: 26px;
	}
	
	.flex{
		flex-direction: column;
		gap: 25px;
	}
	
	.gap{
		gap: 0px;
	}
	
	.half-flex{
		width: 100%;
	}
	
	.inventory-buttons{
		flex-direction: row;
	}
	
	.cover-background{
		width: 100%;
	}

}

@media only screen and (max-width: 621px){
	.inventory-buttons{
		flex-direction: column;
		width: 200px;
	}
}

@media only screen and (max-width: 585px){
	.header-slider{
		width: 100% !important;
		font-size: 32px;
		line-height: 40px;
	}
	
	section{
		padding: 40px 40px;
	}
	
	.top-footer{
		flex-direction: column;
		gap: 25px;
	}
	
	.quick-links{
		justify-content: flex-start;
	}
	
	/*
	.slick-slider{
		display: none !important;
	}
	*/
	
	.mobile-image{
		display:block !important;
	}
}

@media only screen and (max-width: 485px){

	
	.cover-background img{
		width: 200px;
	}
	
	.cover-background{
		height: 300px;
	}
	
	.form-field-flex {
    flex-direction: column;
    gap: 15px;
}
	
	.form-field-flex input#fname {
    max-width: 100%;
    width: auto;
}
	.inner-cover button{
	margin-bottom:10px;
}
}

@media only screen and (max-width: 400px){
	.cover-headings h1{
		font-size: 27px;
		line-height: 35px;
		width: 95% !important;
	}
	
	section{
		padding: 30px 25px;
	}
	
	.bottom-footer{
		flex-direction: column;
		gap: 25px;
	}
}

@media only screen and (max-width: 360px){
	.header-slider h1{
		font-size: 25px;
		line-height: 31px;
	}
}

@media only screen and (max-width: 340px){
	.quick-links{
		flex-direction: column;
		gap: 0px;
	}
}