@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&display=swap');

/* Root Tags */

body {
	overflow-x: hidden;
	animation:  fadeInAnimation ease 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Containers & Divs */

.body-container {
	width: 60% !important;
}

.container-nav {
	width: 60% important;
	max-width: 60%;
}

#main_container {
	margin-top: 50px;
}

.navbar {
	background-color: #FFFFC9 !important;
	padding-top: 50px;
	padding-bottom: 20px;
}

.nav-logo {
	max-width: 100px;
}

/* Main Logo */

#main-logo {
	position: absolute;
	top: 10px;
	left: 10px;
}


/* Classes & ID's */

.spacer25 {
	padding-top: 12.5px;
	padding-bottom: 12.5px;
}

.spacer50 {
	padding-top: 25px;
	padding-bottom: 25px;
}

.spacer100 {
	padding-top: 25px;
	padding-bottom: 25px;
	margin-top: 25px;
	margin-bottom: 25px;
}

#primary_nav_list {
	
}

#vw-image {
	max-height: 72px;
}

#ds-image {
	margin-top: 11px;
	width: 100%
}

.hh-nav {
	color: #000 !important;
	font-family: 'Poppins';
	font-weight: 700;
	font-size: 26px;
	letter-spacing: .05rem;
}


.hh-nav:hover {
	transition: all 0.5 ease;
	margin-top: -2px;
}

.btn-primary {
	color: #FFFFC9;
	background-color: #000;
	font-family: 'Poppins';
	font-weight: 600;
	border: 1px solid #000;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.btn-primary:hover {
	color: #000;
	background-color: #FFFFC9;
	border: 1px solid #000;
}

.hh-nav-phone {
	color: #000 !important;
	font-family: 'Poppins';
	font-weight: 700;
	font-size: 26px;
	position: absolute;
	top: 50px;
	right: 25px;
	text-decoration: none;
}

.hh-nav-phone:hover {
	transition: all 0.5 ease;
	margin-top: -2px;
}

.hh-h1 {
	font-family: 'Poppins';
	font-weight: 700;
	font-size: 60px;
	color: #000;
	padding-top: 25px;
	padding-bottom: 25px;
}

.hh-h2 {
	font-family: 'Poppins';
	font-weight: 700;
	font-size: 35px;
	color: #000;
	padding-bottom: 5px;
}

.hh-h2-alt {
	font-family: 'Poppins';
	font-weight: 500;
	font-size: 22px;
}

.card-body {
	background-color: #F7F7F7;
}

#quote {
	padding-top: 10px;
	padding-bottom: 10px;
}

.hh-h3 {
	font-family: 'Poppins';
	font-weight: 500;
	font-size: 22px;
	color: #000;
	padding-bottom: 20px;
}

.hh-h3-brand {
	font-size: 18px;
	font-family: 'Poppins';
	text-align: center;
}

#first-brand-col {
	border-left: 1px solid #E3E3E3;;
}

.brand-col {
	border-right: 1px solid #E3E3E3;
	padding: 20px;
}

.brand-col > a {
	display: block; 
	text-align: center;
}

.hh-p {
	font-family: 'Tinos', serif;
	font-size: 20px;
	color: #000;
}

.hh-p-brand {
	text-align: left;
	font-family: 'Tinos', serif;
	font-size: 20px;
}

#usa-made {
	width: 50%;
	height: 50%;
}

.colored-banner {
	background-color: #000;
	height: 10px;
}

.hh-footer {
	background-color: #FFFFC9;
}

.hh-foot-text {
	font-family: 'Poppins';
	color: #000;
	font-size: 24px;
	margin-top: 25px;
}

.brand-images {
	width: 90%;
}

.brand-url {
	text-align: center;
	padding-top: 15px;
	font-size: 20px;
}

.no-wrap {
	white-space: nowrap;
}

.navbar-toggler-icon {
	color: #000 !important;
	font-size: 25px;
}

#contact_hh {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Careers */

.jobpopup {display: none;width:90%;max-width:840px;}
.jobpopup li {margin-bottom: .3em;line-height: 1.3em;}
.jobpopup ul {font-size:0.9em;line-height:1.25em;margin-top:0;}
.jobpopup h4 {margin-bottom:.3em;}
.jobpopup h3 {margin-top:0;padding-top: 0;}
.job-titles {
	margin-right: 10px;
}

p {line-height: 1.4em;}

sup {font-size: 60%;}

label {
	/*font-family: 'Tinos', serif;*/
	display: block;
}

/* Responsiveness */

#nav-brand {
	display: none;
}

.hh-nav-phone2 {
	display: none;
}

@media only screen and (max-width: 1690px) {
	.hh-h3-brand {
		font-size: 16px;
	}
}

@media only screen and (max-width: 1585px) {
	#main-logo {
		display: none;
	}
	#nav-brand {
		display: inline;
	}
	.hh-h1 {
		font-size: 48px;
	}
	.navbar {
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

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

}

@media only screen and (max-width: 1527px) {
	.hh-h3-brand {
		font-size: 15px;
	}
}

@media only screen and (max-width: 1500px) {
	.brand-link {
		font-size: 18px;
	}
}

@media only screen and (max-width: 1446px) {
	.hh-h3-brand {
		font-size: 14px;
	}
}

@media only screen and (max-width: 1415px) {
	.brand-link {
		font-size: 17px;
	}
}

@media only screen and (max-width: 1390px) {
	.nav-blank {
		display: none;
	}
	.hh-nav-blank {
		display: none;
	}
}

@media only screen and (max-width: 1365px) {
	.hh-h3-brand {
		font-size: 13px;
	}
}

@media only screen and (max-width: 1330px) {
	.brand-link {
		font-size: 16px;
	}
}

@media only screen and (max-width: 1278px) {
	.hh-h1 {
		font-size: 32px;
	}
	.hh-h2 {
		font-size: 28px;
	}
	.hh-h3-brand {
		font-size: 15px;
	}
	.hh-nav-phone {
		font-size: 20px;
	}
	.hh-nav {
		font-size: 20px;
	}
	#nav-brand {
		width: 50%;
	}
	.body-container {
		width: 75% !important;
	}
	.hh-nav:hover {
		margin-top: 0px;
		color: #E3E3E3 !important;
	}
	.hh-nav-phone {
		padding: 0;
		margin-bottom: 5px;
		top: 25px;
		right: 25px;
	}
	.hh-nav-phone:hover {
		margin-top: 0px;
		color: #E3E3E3 !important;
	}
}

@media only screen and (max-width: 1160px) {
	.hh-h3-brand {
		font-size: 14px;
	}
}

@media only screen and (max-width: 1095px) {
	.hh-h3-brand {
		font-size: 13px;
	}
}

@media only screen and (max-width: 1080px) {
	.hh-nav-phone {
		font-size: 16px;
	}
	.hh-nav {
		font-size: 16px;
	}
	.body-container {
		width: 90% !important;
	}
	.hh-h3-brand {
		font-size: 15px;
	}
}

@media only screen and (max-width: 991px) {
	.hh-nav-phone {
		display: none;
	}
	.hh-nav-phone2 {
		display: inline;
		color: #FFC000 !important;
		font-family: 'Poppins';
		font-weight: 700;
	}
	.brand-link {
		font-size: 22px;
	}
	.hh-h3-brand {
		text-align: center;
		font-size: 20px;
	}
	.brand-col {
		border: 0;
	}
	#first-brand-col {
		border: 0;
	}
	#vw-image {
		max-height: 100%;
		margin-right: 24px;
	}
}

@media only screen and (max-width: 585px) {
	.hh-h1 {
		font-size: 28px;
		margin: 0;
		padding: 0;
	}
	.hh-h2 {
		font-size: 24px;
	}
	.hh-h3 {
		font-size: 20px;
	}
	.hh-p {
		font-size: 18px;
	}
}

@media only screen and (max-width: 518px) {
	.hh-h1 {
		font-size: 25px;
	}
	.hh-h2 {
		font-size: 22px;
	}
	.hh-h3 {
		font-size: 18px;
	}
}