/* CONSTANTS */
:root {
	/* Viewport */
	--min-viewport-px: 320px;
	--max-viewport-px: 1920px; /* Color */
	/* Color	*/
	--text-white: #FFFFFF;
	--text-black: #000000;
	--body-background-color: #FFFFFF;
	--header-highlight-color: #374B92;
	--header-background-color: #E6E6E6;
	--footer-background-color: #E6E6E6;
	/* Font	*/
	--text-16pt: clamp(13px, 1.09vw, 21px); /*Regular text, 10-16pt*/
	--text-18pt: clamp(13px,1.25vw, 24px); /*Header address, 10-18pt*/
	--text-20pt: clamp(13px,1.40vw, 27px); /*Main page statement, 10-20pt*/
	--text-30pt: clamp(16px,2.08vw, 40px); /*Header Tag Line, 12-30pt*/
	--text-navmenu: clamp(13px, 1.09vw, 21px); /*Regular text, 10-16pt*/
	--text-middlepage-lineheight: clamp(18px,2vw, 32px); /*Middle page line height, 12-20pt*/
	--text-footer-lineheight: clamp(13.5px, 1.5vw, 22.5px); /*Regular text, 10-16pt*/
	/* Image */
	--rightpage-image-min-size: 80px;
	--rightpage-image-max-size: 200px;
	/* Other */
	--footer-min-height: 120px;
	--footer-max-height: 200px;
}

/* INITIALIZATION */
html {
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
}

*,				/* Include padding and border in every element's total width and height */
*::before,		/* Include padding and border in every psuedo-element's total width and height */
*::after {
	box-sizing: inherit;
}

body {
	position: relative;
	width: 100%;
	min-width: var(--min-viewport-px); 
	max-width: var(--max-viewport-px);
	margin: auto;
	border: 0;
	background-color: var(--body-background-color);
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 0;
	color: #000000;
}

.regular-text {
	color: var(--text-black);
	font-size: var(--text-16pt);
}

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

h1 {
	color: var(--text-black);
	font-size: var(--text-20pt);
}

h2 {
	color: var(--text-black);
	font-size: var(--text-20pt);
}

img {
	width:100%;
	height: auto;
}

table {
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

td {
	vertical-align: top;
	padding: 0 1% 4% 0;
}
/* COMMON PAGES*/
.page-content-container {
	width: 100%;
	padding: 0;
	text-align: center;
}

.nothomepg-key-page-image {
	width: 100%;
	border: solid;
}

.nothomepg-page-title {
	padding: 2%;
	margin: 0;
	font-size: var(--text-30pt);
	text-align: left;
}

.nothomepg-p {
	margin: 0;
}

.noborder {
	border:none;
}

.textalignleft {
	text-align: left;
}

.underline {
	text-decoration: underline;
}

.leftpage-container {
	display: inline-block;
	vertical-align: top;
	width: 25%;
	min-width: 175px;
	margin: 0 auto;
	padding: 0 2% 2% 2%;
}

.middlepage-container {
	display: inline-block;
	vertical-align: top;
	width: 55%;
	min-width: 300px;
	padding: 2% 2% 6% 2%;
	margin: 0;
	font-size: var(--text-20pt);
	text-align: left;
	line-height: var(--text-middlepage-lineheight);
}

.rightpage-container {
	display: inline-block;
	vertical-align: top;
	width: 15%;
	padding: 0 0 6% 0%;
	margin: 0;
}

.rightpage-image-container {
	margin: 0 0 20% 0;
}

.rightpage-image {
	border: solid;
}

.rightpage-image:last-child {
	margin: 0;
}

/* HOME PAGE */
.homepg-title {
	font-size: var(--text-30pt);
	text-align: left;
}

.homepg-statement {
	display: block;
	width: 75%;
	margin: auto;
	color: var(--header-highlight-color);
	font-size: var(--text-20pt);
	font-weight: bold;
	font-style: italic;
	text-align: center;
}

.homepg-statement-alt {
	display: none;
}

.homepg-whatsnew-container {
	display: inline-block;
	vertical-align: top;
	width: 30%;
	min-width: 275px;
	padding: 2.5% 3% 2% 4%;
}

.homepg-whatsnew-img {
	width: 100%;
	margin: 4% auto 0 auto;
	border-style: solid;
}

.homepg-sel-image-container:link,
.homepg-sel-image-container:visited,
.homepg-sel-image-container {
	display: inline-block;
	width: 25%;
	min-width: 125px;
	margin: 2.5% 2% 2.5% 2%;
	font-size: 0;
	border-style: solid;
	text-decoration: none;
	color: black;
}

.homepg-selections {
	display: inline-block;
	width: 70%;
	min-width: 300px;
	padding: 2% 2.5% 2% 2.5%;
	text-align: center;
}

/* CLOTHING PAGE & PROMOTIONAL PAGE */
.promopg-h2,
.clothingpg-h2 {
	margin: 5% auto 5% auto;
	font-size: var(--text-20pt);
}
.promopg-image-container:link,
.promopg-image-container:visited,
.promopg-image-container,
.clothingpg-image-container:link, 
.clothingpg-image-container:visited, 
.clothingpg-image-container {
	display: inline-block;
	position: relative;
	width: 15%;
	min-width: 110px;
	max-width: 250px;
	margin: 1% 2% 1% 2%;
	text-decoration: none;
	border: solid;
	color: black;
}

.promopg-image,
.clothingpg-image {
	display: block;
	width: 100%;
	margin: 0 auto 0 auto;
}

.promopg-bottomtext-container,
.clothingpg-bottomtext-container {
	position: relative;
	margin: 2%;
	width: 50%;
	position: relative;
}
.promopg-bottomtext,
.clothingpg-bottomtext {
	font-size: var(--text-16pt);
	text-align: left;
}

/* EMBROIDERY PAGE */
#dakota-collectibles-logo {
	display: block;
	width: 65%;
	max-width: 350px;
	margin: 0 auto 0 auto;
}

/* PRINTING PAGE */
/* VARSITY JACKET PAGE */

/* CONTACT US PAGE */
.contactpg-middlepage-container {
	display: inline-block;
	vertical-align: top;
	width: 55%;
	min-width: 260px;
	padding: 0% 2% 6% 2%;
	margin: 0;
	text-align: center;
	font-size: var(--text-20pt);
	line-height: var(--text-middlepage-lineheight);
}

.contactpg-middlepage-image {
	display: inline-block;
	width: 100%;
	min-width: 80px;
	border: solid;
	color: black;
}

.contactpg-col {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	min-width: 235px;
}

/* FAQ PAGE */
.faqpg-content-container {
	width: 100%;
	padding: 0% 4% 2% 4%;
	font-size: var(--text-20pt);
	text-align: left;
	line-height: var(--text-middlepage-lineheight)
}

/* PAGE HEADER */
.header {
	position: relative;
	width: 100%;
	min-height: 105px;
	margin: 0 0 2%;
}

.header-nav-bkgd {
	position: relative;
	width: 100%;
	min-height: 27px;
	max-height: 50px;
	background-color: var(--header-highlight-color);
}

.header-mainbkgd-text {
	position: relative;
	width: 100%;
	min-height: 54px;
	max-height: 100px;
	background-color: var(--header-background-color);
}

.header-hrpe-address {
	position: absolute;
	width: 99%;
	top: 5%;
	color: var(--text-black);
	font-size: var(--text-18pt);
	font-weight: bold;
	text-align: right;
}

.header-tagline {
	display: block;
	position: absolute;
	top: 30%;
	left: 20%;
	margin: auto;
	color: var(--text-black);
	font-size: var(--text-30pt);
	font-weight: bold;
	font-style: italic;
}

.header-companyname {
	display: none;
}

.hamburger-menu-icon-open {
	display: none;
}

.hamburger-menu-icon-close {
	display: none;
}

.navigation {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	text-align: right;
}

.header-logo {
	position: absolute;
	top: 8.562691131498470%;
	left: 3.177083333333330%;
	width: 10.15625%;
	min-width: 95px;
}

.nav-menu li {
	display: inline-block;
	white-space: pre;
}

.nav-menu li a {
	display: block;
	padding: 0 10px;
	color: var(--text-white);
	font-size: var(--text-16pt);
	line-height: clamp(24px, 2.604vw, 2.604vw);
	text-align: center;
	text-decoration: none;
}

.nav-menu li a:hover {
	background-color: var(--text-black);
}

/* PAGE FOOTER */
.footer {
	width: 100%;
	max-width: var(--max-viewport-px);
	color: var(--text-black);
	background-color: var(--footer-background-color);
	line-height: var(--text-footer-lineheight);
}

.footer-makeyourmark-div {
	display: inline-block;
	vertical-align: top;
	width: 27%;
	max-width: 518px;
	max-height: var(--footer-max-height);
}

.footer-nav-div {
	display: inline-block;
	vertical-align: top;
	width: 15%;
	max-width: 288px;
	max-height: var(--footer-max-height);
}

ul.footer-nav {
	display: inline-block;
	vertical-align: top;
	max-height: var(--footer-max-height);
	margin: 0;
	padding: 0;
	padding: 1.5% 0 0 0;
	list-style-type: none;
	text-decoration: none;
	font-size: var(--text-16pt);
}

.footer-hours-div {
	display: inline-block;
	vertical-align: top;
	width: 15%;
	max-width: 288px;
	min-height: var(--footer-min-height);
	max-height: var(--footer-max-height);
	font-size: var(--text-16pt);
}

.footer-hoursday {
	display: inline-block;
	vertical-align: top;
	max-height: var(--footer-max-height);
	margin: 0;
	padding: 1.5% 1% 0 0;
	font-size: var(--text-16pt);
}

.footer-hourstime {
	display: inline-block;
	vertical-align: top;
	min-height: var(--footer-min-height);
	max-height: var(--footer-max-height);
	margin: 0;
	padding: 1.5% 0 0 0;
	font-size: var(--text-16pt);
}

.footer-location-div {
	display: inline-block;
	vertical-align: top;
	width: 18%;
	min-height: var(--footer-min-height);
	max-height: var(--footer-max-height);
}

.footer-location {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding: 1.5% 0 0 0;
	font-size: var(--text-16pt);
}

.footer-logos-div {
	display: inline-block;
	width: 25%;
	vertical-align: top;
	max-width: 537px;
	min-height: var(--footer-min-height);
	max-height: var(--footer-max-height);
}

.footer-nneplogo {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	min-width: 100px;
	max-width: 300px;
	padding: 1.5% 4%;
}

.footer-facebooklogo {
	display: inline-block;
	vertical-align: top;
	width:25%;
	min-width: 35px;
	max-width: 125px;
	padding: 1.5% 4%;
}

.footer-rotarylogo {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	min-width: 100px;
	max-width: 300px;
	padding: 1.5% 4%;
}

.footer-copyright-div {
	width: 100%;
	max-height: 50px;
	background-color: var(--footer-background-color);
}

#footer-copyright {
	position: relative;
	font-size: var(--text-16pt);
	text-align: center;
}

/* MEDIA QUERIES */
@media screen and (max-width: 928px) {
	/* HOME PAGE: Change page selector column to 50%. 
	   LEFT-MIDDLE-RIGHT PAGE: Adjust Left and Middle page containers to 88% 
	   CONTACT PAGE: Increase contactpg-col to 88% */

	/* HOME PAGE:   Reduce homepg-selector to 50% */
	.homepg-selections {
		width: 50%;
	}
	
	/* LEFT-MIDDLE-RIGHT PAGE: Adjust Left and Middle page containers to 88% */
	.middlepage-container,
	.contactpg-middlepage-container {
		width: 55%;
	}

	/* CONTACT PAGE: Increase contactpg-col to 88% */
	.contactpg-col {
		width: 88%;
	}
}

@media screen and (max-width: 739px) {
	/* PAGE HEADER: Change navigation bar to hamburger menu. 
	   PAGE FOOTER: Hide the "Make Your Mark" logo and center remaining footer elements */

	/* PAGE HEADER */
	.navigation {
		width: 110px;
		position: absolute;
		z-index: 99999;
		top: 0;
		right: 0;
		background: var(--header-highlight-color);
	}

	.hamburger-menu-icon-open {
		display: block;
		float: right;
		width: 26px;
		margin: 0 auto;
	}

	.hamburger-menu-icon-close {
		display: none;
		float: right;
		width: 26px;
		margin: 0 auto;
	}

	.nav-menu {
		display: none;
		padding: 0;
	}

	.nav-menu li {
		display: block;
		margin: 0;
		background-color: var(--header-highlight-color);
	}

	.nav-menu li a {
		display: block;
		text-align: left;
		padding: 5px 0 5px 10px;
		color: var(--text-white);
		text-decoration: none;
	}

	/* PAGE FOOTER */
	.footer {
		display: inline-block;
	}

	.footer-makeyourmark-div {
		display: none;
	}

	.footer-nav-div {
		margin: 0 0 0 5%;
		width: 20%;
	}

	.footer-hours-div {
		width: 20%;
	}

	.footer-location-div {
		width: 25%;
	}

	.footer-logos-div {
		width: 30%;
	}
}

@media screen and (max-width: 615px) {
	/* PAGE HEADER: Hide the header tagline and HRPE address, display alternate tagline
	   PAGE FOOTER: Hide the footer logos, resize remaining footer elements
	   LEFT-MIDDLE-RIGHT PAGE: Hide right container and adjust middle to 60%
	   HOME PAGE:     Hide the homepage statement
	   CLOTHING PAGE: Increase bottom text box to 80% */

	/* PAGE HEADER */
	.header {
		margin: 0 0 25px;
	}

	.header-hrpe-address {
		display: none;
	}

	.header-tagline {
		display: none;
	}

	.header-companyname {
		display: block;
		position: absolute;
		top: 30%;
		left: 35%;
		margin: auto;
		color: var(--text-black);
		font-size: var(--text-30pt);
		font-weight: bold;
		font-style: italic;
	}

	/* HOME PAGE */
	.homepg-statement {
		display: none;
	}

	.homepg-statement-alt {
		display: block;
		margin: auto;
		color: var(--header-highlight-color);
		font-size: var(--text-30pt);
		font-weight: bold;
		font-style: italic;
	}

	/* CLOTHING PAGE */
	.clothingpg-bottomtext-container {
		width: 80%;
	}
		
	/* LEFT-MIDDLE-RIGHT CONTAINER PAGE */
	.middlepage-container {
		width: 60%;
	}

	.rightpage-container {
		display: none;
	}

	/* PAGE FOOTER */
	.footer-nav-div {
		margin: 0 0 0 8%;
		width: 30%;
	}

	.footer-hours-div {
		width: 28%;
	}

	.footer-location-div {
		width: 33%;
	}

	.footer-logos-div {
		display: none;
	}
}

@media screen and (max-width: 474px) {
	/* LEFT-MIDDLE-RIGHT PAGE: Adjust Left and Middle page containers to 88% */
	.leftpage-container,
	.middlepage-container,
	.contactpg-middlepage-container {
		width: 88%;
	}
}