@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	list-style: none;
	/*text-transform: lowercase;*/
}

/*colors light*/

.color-none {
	background-color: hsla(0,0%,95%,0);
}

.color-grey {
	background-color: hsla(0,0%,95%,1.00);
}

.color-yellow {
	background-color: hsla(45,5%,95%,1.00);
}

.color-yelloworange {
	background-color: hsla(48,7%,95%,1.00);
}

.color-orange {
	background-color: hsla(24,7%,95%,1.00);
}

.color-red {
	background-color: hsla(348,7%,95%,1.00);
}

.color-magenta {
	background-color: hsla(285,5%,95%,1.00);
}

.color-violet {
	background-color: hsla(255,5%,95%,1.00);
}

.color-blueviolet {
	background-color: hsla(225,5%,95%,1.00);
}

.color-blue {
	background-color: hsla(216,7%,95%,1.00);
}

.color-cyan {
	background-color: hsla(195,6%,95%,1.00);
}

.color-teal {
	background-color: hsla(176,6%,95%,1.00);
}

.color-green {
	background-color: hsla(135,5%,95%,1.00);
}


.color-yellowgreen {
	background-color: hsla(90,5%,95%,1.00);
}


/*colors dark*/

.color-grey-dark {
	background-color: hsla(0,0%,85%,1.00);
}

.color-yellow-dark {
	background-color: hsla(45,5%,85%,1.00);
}

.color-yelloworange-dark {
	background-color: hsla(48,7%,85%,1.00);
}

.color-orange-dark {
	background-color: hsla(24,7%,85%,1.00);
}

.color-red-dark {
	background-color: hsla(348,7%,85%,1.00);
}

.color-magenta-dark {
	background-color: hsla(285,5%,85%,1.00);
}

.color-violet-dark {
	background-color: hsla(255,5%,85%,1.00);
}

.color-blueviolet-dark {
	background-color: hsla(225,5%,85%,1.00);
}

.color-blue-dark {
	background-color: hsla(216,7%,85%,1.00);
	
}

.color-cyan-dark {
	background-color: hsla(195,6%,85%,1.00);
}

.color-teal-dark {
	background-color: hsla(176,6%,85%,1.00);
}

.color-green-dark {
	background-color: hsla(135,5%,85%,1.00);
}


.color-yellowgreen {
	background-color: hsla(90,5%,85%,1.00);
}



#loading {
	display: flex;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100vh;
	width: 100vw;
	background-color: black;
	justify-content: center;
	align-items: center;
	z-index: 999;
	visibility: visible;
}


.img-container img {
	display: block;
	width: 100%;
}  

header {
	padding-top: .9em;
	padding-bottom: .9em;
	margin: 1% 1% 0;
	border-top: solid 2px black;
	border-bottom: solid 2px black;
}
.land-header {
	padding-top: .9em;
	padding-bottom: .9em;
	margin: 1% 1% 0;
	border-top: solid 2px white;
	border-bottom: solid 2px white;
}

.panel {
	
}

.fullscreenhero {
      position: absolute;
	width: 100vw;
	height: 100vh;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
	opacity: 90%;
    filter: brightness(40%) blur(0px) grayscale(0%);
	background-image: url("../img/work/paintings/CS_P_24_010_BlossomingPlumTreefromStudioWindow3_2.jpg");
	background-repeat: repeat;
	background-size: cover;
	z-index: -999;
	background-position: center;

}

.fullscreenhero2 {
      position: absolute;
	width: 100vw;
	height: 100vh;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
	opacity: 60%;
    filter: brightness(30%) blur(0px) grayscale(95%);
	background-image: url("../img/Hero17.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -999;
	background-position: center;

}

h1, h2 {
	font-size: 3.5vw;
	line-height: 2vw;
	letter-spacing: -.2vw;
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	color: black;
	text-decoration: none;
}

h1, h2, h3, h4, h5, p, a, li, input {
	font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	text-transform: lowercase;
	
}

h4 {
	font-size: 2.75vw;
	letter-spacing: -.175vw;
	line-height: 1.4vw;
}

h3, h5, p, a, li {
	font-size: .9vw;
	letter-spacing: 0;
	line-height: 1.4vw;
	
}


.paypal-wrapper input{
	text-transform: lowercase;
}


.loadingp {color: white;}

a {
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	color: black;
	text-decoration: none;
}

a:hover {
	color: hsla(0,0%,10%,1.00);
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

li {
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	color: black;
	
}

.bodydm {
	color: white !important;
}


.header-elements {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 1.75vw 1vw;
	width: 100%;
	padding: 0;
	
}

.header-list-1 {
	grid-column: 10 / span 1;
	grid-row: 2;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
	
}

.header-list-2 {
	grid-column: 11 / span 2;
	grid-row: 2;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}

.header-list-2 a {
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.header-list-2 a:hover {
	color: hsla(0,0%,66%,1.00) !important;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	
}

.header-list-3 {
	grid-column: 10 / span 1;
	grid-row: 1 / span 1;
	align-self: flex-start;
	text-transform: lowercase;
	margin-top:-.4vw;
}


.h3work {
	grid-column: 6 / span 1;
	grid-row: 2;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}


.h3statement {
	grid-column: 6 / span 1;
	grid-row: 1;
	margin-top: -.4vw;
	text-transform: lowercase;
}

.logo h2 {
}

.logo h1 {
	align-self: flex-end;
	margin-bottom: .5vw;
}


.logo {
	display: grid;
	grid-column: span 2;
	grid-row: 1;
}

.statement {
	display: block;
	grid-column: 7 / span 2;
	grid-row: 1;
	column-count: 1;
	column-gap: 20px;
	margin-top: -.4vw;
}

.catnav {
	display: block;
	grid-column: 7 / span 1;
	grid-row: 2;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}

.catnav-col2 {
	display: block;
	grid-column: 8 / span 1;
	grid-row: 2;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}

.active a {
	color: hsla(0,0%,66%,1.00) !important;

}



.catnav li a {
	
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.catnav li a:hover {
	color: hsla(0,0%,66%,1.00) !important;
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}


.catnav-col2 li a {
	
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}
	


.catnav-col2 li a:hover {
	color: hsla(0,0%,66%,1.00) !important;
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}


.active a:hover {
	cursor: default !important;
}



/*landing header*/

.land-header-elements {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 1.75vw 1vw;
	width: 100%;
	padding: 0;
	height: 85vh;
	
}

.land-header-list-1 {
	grid-column: 7 / span 1;
	grid-row: 1;
	align-self: center;
	margin-bottom: -.4vw;
	margin-left: .4vw;
	text-transform: lowercase;
	
}

.land-header-list-2 {
	grid-column: 8 / span 1;
	grid-row: 1;
	align-self: center;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}

.land-header-list-2 a {
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	color: hsla(48,7%,95%,1.00) !important;
	
}

.land-header-list-2 a:hover {
	color: hsla(0,0%,80%,1.00) !important;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	
}

.land-header-list-3 {
	grid-column: 7 / span 2;
	grid-row: 2 / span 1;
	align-self: flex-end;

	text-transform: lowercase;
}








.land-h3work {
	grid-column: 7 / span 1;
	grid-row: 1;
	align-self: flex-start;
	margin-bottom: -.4vw;
	margin-left: .4vw;
	text-transform: lowercase;
}



.land-logo {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1.75vw 1vw;
	grid-column: 1 / span 4;
	grid-row: 1;
	color: hsla(48,7%,95%,1.00) !important;
}

.land-logo h2 {
	font-size: 4.5vw;
	line-height: 2.7vw;
	letter-spacing: -.3vw;
	grid-column: 1 / span 2;
	color: hsla(48,7%,95%,1.00) !important;
}

.land-logo h1 {
	font-size: 4.5vw;
	line-height: 2.7vw;
	letter-spacing: -.3vw;
	grid-column: 3 / span 2;
	margin-bottom: .5vw;
	color: hsla(48,7%,95%,1.00) !important;
}

.land-h3statement {
	grid-column: 1 / span 2;
	grid-row: 2;
	margin-top: -.4vw;
	text-transform: lowercase;
}


.land-statement {
	display: block;
	grid-column: 1 / span 4;
	grid-row: 2;
	column-count: 1;
	column-gap: 1vw;
	margin-top: -.4vw;
	padding-right: 8.2vw;
	letter-spacing: 0;
	align-self: flex-end;
	font-size: 1.3vw;
	line-height: 2vw;
}

.land-catnav {
	display: block;
	grid-column: 8 / span 1;
	grid-row: 1;
	align-self: flex-start;
	margin-bottom: -.4vw;
	color: hsla(48,7%,95%,1.00) !important;
	text-transform: lowercase;
}


.land-catnav li {
	color: hsla(48,7%,95%,1.00) !important;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	
}


.land-catnav a {
	color: hsla(48,7%,95%,1.00) !important;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	
}

.land-catnav a:hover {
	color: hsla(0,0%,80%,1.00) !important;
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}


.land-signup-wrapper {
	display: block;
	grid-column: 7 / span 2;
	grid-row: 2 / span 1;
	margin-top: -.4vw;
	letter-spacing: 0;
	align-self: flex-end;
}

.form-input {
	background: transparent;
	border: 1.5px solid hsla(0,0%,95%,1.00);
	border-radius: .4vw;
	padding: 8px 14px;
	font-size: .9vw;
	letter-spacing: 0;
	line-height: 1.4vw;
	color: hsla(0,0%,95%,1.00);
	width: 90%;
	margin-bottom: 10px;
}

.form-input:hover {
	border: solid 1.5px hsla(0,0%,95%,1.00);
	border-radius: .4vw;
	color: black;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	background: none hsla(0,0%,95%,1.00);
}

.form-input:focus {
	border: solid 1.5px hsla(0,0%,95%,1.00);
	border-radius: .4vw;
	color: black;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	background: none hsla(0,0%,95%,1.00);
}



.form-btn {
	-webkit-appearance: none;
  	appearance: none;
	font-weight: 400;
	font-family: "franklin-gothic-urw", sans-serif;

	display: inline-block;
	font-size: .9vw;
	letter-spacing: .0vw;
	line-height: 1.4vw;
	color: black;
	text-align: center;
	padding: 8px 14px;
	border: solid 1.5px hsla(0,0%,95%,1.00);
	cursor: pointer;
	outline: none;
	background: none hsla(0,0%,95%,1.00);
	border-radius: .4vw;
	transition: all ease-in-out 1s;
}
.form-btn:hover {
	background: none;
	border: solid 1.5px hsla(0,0%,95%,1.00);
	border-radius: .4vw;
	color: hsla(0,0%,95%,1.00);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}


/* Error message */
.form-message {
  display: none;
  margin-top: 10px;
  font-size: .85vw;
  line-height: 1.2vw;
  color: hsla(0,0%,95%,1.00); /* matches your palette */
}

.newsletter-form.is-error .form-message {
  display: block;
}

/* Optional: error outline on input */
.newsletter-form.is-error .form-input {
  border-color: hsla(0,0%,95%,1.00);
}

/* Loading state: lock interaction */
.newsletter-form.is-loading .form-btn {
  pointer-events: none;
  opacity: 0.9;
	
}
/*

.btn-spinner {
  display: none;
  width: 0.9vw;
  height: 0.9vw;
  border: 2px solid hsla(0,0%,95%,1.00);
  border-right-color: transparent;
  border-radius: 999px;
  margin-left: 0.6vw;
  vertical-align: middle;
  animation: spin 0.8s linear infinite;
}
*/

.ml-form-embedSubmitLoad {
  	border-right-color: transparent;
  	border-radius: 999px;
  	vertical-align: middle;
  	width: 1.5vw;
  	height: 1.5vw;
  	border: 1.5px solid hsla(0,0%,95%,1.00);
  	border-top-color: transparent;
  	animation: ml-spin 0.8s linear infinite;
}
.submitload-dark  {
  	border: 1.5px solid black;
}

@keyframes ml-spin {
  to { transform: rotate(360deg); }
}


.newsletter-form.is-loading .ml-form-embedSubmitLoad {
  display: inline-block;
}

.loading {display: none;}

/* Remove MailerLite loading button visuals */
button.loading {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Hide the "Loading..." text but keep it for screen readers */
button.loading .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}















.signup-wrapper {
	display: block;
	grid-column: 11 / span 2;
	grid-row: 1 / span 1;
	margin-top: -.4vw;
	letter-spacing: 0;
	align-self: flex-start;
}




.form-input-dark {
	background: transparent;
	border: 1.5px solid black;
	border-radius: .4vw;
	padding: 8px 14px;
	font-size: .9vw;
	letter-spacing: 0;
	line-height: 1.4vw;
	color: black;
	width: 85%;
	margin-bottom: 10px;
}

.form-input-dark:hover {
	border: solid 1.5px black;
	border-radius: .4vw;
	color: hsla(0,0%,95%,1.00);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	background: none black;
}

.form-input-dark:focus {
	border: solid 1.5px black;
	border-radius: .4vw;
	color: hsla(0,0%,95%,1.00);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	background: none black;
}



.form-btn-dark {
	display: inline-block;
	font-size: .9vw;
	letter-spacing: .0vw;
	line-height: 1.4vw;
	color: hsla(0,0%,95%,1.00);
	text-align: center;
	padding: 8px 14px;
	border: solid 1.5px black;
	cursor: pointer;
	outline: none;
	background: none black;
	border-radius: .4vw;
	transition: all ease-in-out 1s;
}
.form-btn-dark:hover {
	background: none;
	border: solid 1.5px black;
	border-radius: .45vw;
	color: black;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}


/* Error message */
.form-message-dark {
  display: none;
  margin-top: 10px;
  font-size: .85vw;
  line-height: 1.2vw;
  color: black; /* matches your palette */
}

.newsletter-form.is-error .form-message {
  display: block;
}

/* Optional: error outline on input */
.newsletter-form.is-error .form-input-dark {
  border-color: black;
}

/* Loading state: lock interaction */
.newsletter-form.is-loading .form-btn {
  pointer-events: none;
  opacity: 0.9;
}

/* Spinner: inherits button color */
.btn-spinner {
  display: none;
  width: 0.9vw;
  height: 0.9vw;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  margin-left: 0.6vw;
  vertical-align: middle;
  animation: spin 0.8s linear infinite;
}


















/* End landing header */








.main-content {
	display: grid;
	padding: 0 1%;
	min-height: 100vh;
}
.main-content-404 {
	display: grid;
	padding: 0 1%;
}




body {
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-webkit-transition: background 1s ease;
	transition: background 1s ease;
}

.panel-content {
	/* min height incase content is higher than window height */
	width: 100%;
	/*height: 1fr;*/
	padding: 1vw 0;
	border-bottom: solid 2px black;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1vw;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}




.page-signup-wrapper {
	display: block;
	grid-column: 7 / span 3;
	grid-row: 3 / span 1;
	margin-top: -.4vw;
	letter-spacing: 0;
	align-self: flex-end;
}




.success-panel {
	height: 50vh;
	width: 100%;
	/*height: 1fr;*/
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 1vw;
	grid-column: 1 / span 12;
}

.success-panel h2 {
	grid-column: 7 / span 6;
	grid-row: 1 / span 1;
	align-self: flex-end;
}

.success-h3 {
	grid-column: 7 / span 3;
	grid-row: 2 / span 1;
	align-self: flex-start;
	font-size: 1.6vw;
	letter-spacing: -.05vw;
	line-height: 1.4vw;
	
}

.success-body {
	grid-column: 7 / span 5;
	grid-row: 2 / span 1;
	align-self: flex-end;
	margin-bottom: 2vw;
}




.success-links {
	
	grid-row: 3 / span 1;
	align-self: flex-start;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(1, 1fr);
	grid-gap: 1vw;
	grid-column: 7 / span 6;
	margin-top: -5vw;
	
}


.success-link-2 {
	grid-column: 2 / span 2;
}

.panel-content-slideshow {
	/* min height incase content is higher than window height */
	width: 100%;
	
	padding: 1% 0;
	border-bottom: solid 2px black;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1vw;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}

.slideshow-vertical {
	height: 40vw;
	
}

.slideshow-horizontal {
	height: 35vw;
	
}
	

.panel:first-child {
	border-top: none;
}

.panel:last-child {
	border: none;
}


.panel-content-404 {
	/* min height incase content is higher than window height */
	width: 100%;
	height: 57vh;
	padding: 1% 0;
	border-bottom: solid 2px black;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1vw;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}
	

.fourzerofour {
	grid-column: span 6;
	font-size: 7vw;
	font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	letter-spacing: -.125vw;
	line-height: 5vw;
}

.fourzerofour2 {
	grid-column: 7 / span 6;
	font-size: 7vw;
	font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	letter-spacing: -.125vw;
	line-height: 5vw;
}

.fourzerofour2:hover {
	color: hsla(0,0%,50%,1.00);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.shop-item-photo {
		grid-column: 1 / span 7;
		
	}
	
	

.shop-item-photo figure {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url("../img/store/hanford/Hanford_RightAligned.png");
	-webkit-transition: none;
	transition: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	
}
  

.shop-item-photo figure:hover {
	-webkit-transition: none;
	transition: none;
	overflow: hidden;
	-webkit-animation: item-one-hover 5s infinite; /* Chrome, Safari, Opera */ 
	animation: item-one-hover 5s infinite;
	animation-timing-function: step-start;
	background-repeat: no-repeat;
}








/*scroll animation*/

.scroll-animation {
	opacity: 0;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
	-moz-transform: translate3d(0px, 100px, 0px);
	-webkit-transform: translate3d(0px, 100px, 0px);
	-o-transform: translate(0px, 100px);
	-ms-transform: translate(0px, 100px);
	transform: translate3d(0px, 100px, 0px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	transition-delay: .1s;

}

.scroll-animation.in-view {
	opacity: 1;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	transition-delay: .1s;
}


footer {
	margin-bottom: 1%;
	/*display: flex;
	align-content: space-between;
	justify-content: space-between;
	padding: 1%;*/
}



.footer-elements {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 1.5vw 1vw;
	width: 100%;
	padding: 1% 0 1.5%;
	border-bottom: solid 2px black;
	
}


.h3work-footer {
	grid-column: 7 / span 1;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}


.catnav-footer {
	display: block;
	grid-column: 8 / span 3;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}

.catnav-col2-footer {
	display: block;
	grid-column: 8 / span 3;
	align-self: flex-end;
	margin-top: -1.05vw;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}

.catnav-footer li {
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.catnav-footer li a:hover {
	color: hsla(0,0%,66%,1.00) !important;
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.catnav-col2-footer li {
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.catnav-col2-footer li a:hover {
	color: hsla(0,0%,66%,1.00) !important;
	cursor: pointer;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}





.footer-list-1 {
	grid-column: 7 / span 1;
	align-self: flex-end;
	margin-bottom: -.4vw;
	 text-transform: lowercase;
	
}

.footer-list-2 {
	grid-column: 8 / span 3;
	align-self: flex-end;
	margin-bottom: -.4vw;
	text-transform: lowercase;
}


.footer-list-2 a {
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

.footer-list-2 a:hover {
	color: hsla(0,0%,66%,1.00) !important;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
	
}






.brightness {
	position: fixed;
	rotate: -90deg;
	bottom: 40%;
	left: 1%;
	width: 30px;
	height: 40px;
	cursor: pointer;
	display: block;
	}





/*start of back to top*/

.top {
	position: fixed;
  	top: 34.2vh;
  	right: 1%;
	cursor: pointer;
	background-color: transparent;  /* No background color */
	color: black;
	border: 3px solid black;  /* Border color */
	padding: 8px;  /* Padding to make it a rectangle */
	border-radius: 8px;  /* Rounded corners */
	visibility: hidden;
	opacity: 0;
	justify-content: center;
	align-items: center;
}


/* Increase the hitbox size without affecting visible button */
.top::before {
	content: "";
	position: absolute;
	top: -20px; /* Adjust this value to control the expansion of the hitbox */
	left: -20px;
	right: -20px;
	bottom: -20px;
	background-color: transparent;
	border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
}


.top.topbtnEntrance {
	opacity: 1;
	visibility: visible;
	transition: transform 0.3s ease 0.2s, background-color .6s ease, opacity 2s ease;
}

.top.topbtnExit {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease-in-out, visibility 0s linear .3s;
}



.top:hover {
	background-color: black;
	transform: translateY(-5px);
	/*border-color: hsla(0,0%,66%,1.00);   */
}


/* Arrow styling using lines */
.toparrow {
	position: relative;
	width: 28px;
	height: 28px;
}

/* Top diagonal line (45 degrees for upward pointing) */
.toparrow::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 3px;
	top: 13px;
	left: -2.5px;
	transform: rotate(-45deg);  /* Arrowhead, top left to bottom right */
	background-color: black;
}

/* Bottom diagonal line (-45 degrees for upward pointing) */
.toparrow::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 3px;
	top: 13px;  /* Positioned just below the first line */
	left: 10.5px;
	transform: rotate(45deg);  /* Arrowhead, top right to bottom left */
	background-color: black;
}

/* Arrow stem (regular div) */
.toparrow .topstem {
	width: 3px;
	height: 20px;  /* Stem height */
	top: 10px;  /* Align it vertically with the center of the arrow */
	left: 12.25px;  /* Center stem horizontally */
	background-color: black;  /* Stem color */
	position: absolute;
}

.toparrow .topstem::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 30px;
  top: -24px; /* Position after original stem */
  left: 0px;  /* Align with the original stem */
  background-color: black;
	  transform: rotate(90deg);  /* Arrowhead, top right to bottom left */

}

/* Hover effect for the arrow */
.top:hover .toparrow::before,
.top:hover .toparrow::after,
.top:hover .toparrow .topstem, 
.top:hover .toparrow .topstem::after {
	transition: background-color .1s ease;
	background-color: hsla(0,0%,95%,1.00);
	/* background-color: hsla(0,0%,66%,1.00); */
}




/*start of bottom*/

.bottom {
	position: fixed;
  	top: 41vh;
  	right: 1%;
	cursor: pointer;
  	background-color: transparent;  /* No background color */
  	color: black;
  	border: 3px solid black;  /* Border color */
	padding: 8px;
  	border-radius: 8px;  /* Rounded corners */
  	visibility: hidden;
	opacity: 0;
  	justify-content: center;
  	align-items: center;
}


/* Increase the hitbox size without affecting visible button */
.bottom::before {
  content: "";
  position: absolute;
  top: -20px; /* Adjust this value to control the expansion of the hitbox */
  left: -20px;
  right: -20px;
  bottom: -20px;
  background-color: transparent;
  border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
}



.bottom.bottomBtnEntrance {
  opacity: 1;
  visibility: visible;
  transition: transform 0.3s ease 0.2s, background-color .6s ease, opacity 2s ease;
}

.bottom.bottomBtnExit {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-in-out, visibility 0s linear .3s;
}




.bottom:hover {
	background-color: black;
  transform: translateY(5px);
  /*border-color: hsla(0,0%,66%,1.00);   */
}




/* Arrow styling using lines */
.bottomarrow {
  position: relative;
  width: 28px;
  height: 28px;
}

/* Top diagonal line (45 degrees for upward pointing) */
.bottomarrow::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 3px;
  top: 13px;
  left: -2.5px;
  transform: rotate(45deg);  /* Arrowhead, top left to bottom right */
  background-color: black;
}

/* Bottom diagonal line (-45 degrees for upward pointing) */
.bottomarrow::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 3px;
  top: 13px;  /* Positioned just below the first line */
  left: 10.5px;
  transform: rotate(-45deg);  /* Arrowhead, top right to bottom left */
  background-color: black;
}

/* Arrow stem (regular div) */
.bottomarrow .bottomstem {
  width: 3px;
  height: 20px;  /* Stem height */
  top: -1px;  /* Align it vertically with the center of the arrow */
  left: 12.25px;  /* Center stem horizontally */
  background-color: black;  /* Stem color */
  position: absolute;
}


.bottomarrow .bottomstem::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 30px;
  top: 13px; /* Position after original stem */
  left: 0.5px;  /* Align with the original stem */
  background-color: black;
	transform: rotate(90deg);  /* Arrowhead, top left to bottom right */

}

/* Hover effect for the arrow */
.bottom:hover .bottomarrow::before,
.bottom:hover .bottomarrow::after,
.bottom:hover .bottomarrow .bottomstem,
.bottom:hover .bottomarrow .bottomstem::after {
	transition: background-color .1s ease;
  background-color: hsla(0,0%,95%,1.00);
	/* background-color: hsla(0,0%,66%,1.00); */
}





.info-hr {
	width: 100%;
	display: block;
	height: 100%;
}


hr {
	outline: solid 2px black;
}

.info-wrapper {
	grid-column: span 4;
	display: block;
	height: 100%;
}

.info-wrapper-horizontal {
	grid-column: 9 / span 4;
	display: block;
	height: 100%;
}

.info-element {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1vw;
	margin-bottom: 1vw;
}

.info-element h5 {
	grid-column: 1 / span 1;
	margin-top: -.4vw;
}

.info-element p {
	grid-column: 2 / span 4;
	margin-top: -.4vw;
}

.sales-button {
	grid-column: 2 / span 2;
	
	
}
.sales-button p{
	grid-column: 2 / span 2;
	margin-top: -0.5vw;
	margin-bottom: .75vw;

}



.info-wrapper-product {
	grid-column: span 6;
	display: block;
	height: 100%;
}

.info-wrapper-product .info-element {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 2vw;
	margin-bottom: 2vw;
}

.info-wrapper-product .info-element h5 {
	grid-column: 1 / span 1;
	margin-top: -.4vw;
}

.info-wrapper-product .info-element p {
	grid-column: 2 / span 4;
	margin-top: -.4vw;
}









.gallery {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 1vw;
	grid-column: 1 / span 6;
	height: 100%;
	width: 100%;
	grid-row: 1 / span 2;
	
}

.gallery-horizontal {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 1vw;
	
	grid-column: 1 / span 8;
	height: 100%;
	width: 100%;
	
	grid-row: 1 / span 2;
	
}



.imgBox {
	grid-column: 2 / span 4;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.imgBox img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.imgBox-horizontal {
	grid-column: 2 / span 6;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.imgBox-horizontal img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.imgBox-vertical {
	grid-column: 2 / span 4;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.imgBox-vertical img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}



.thumbnails {
	grid-column: 1 / span 1;
	/*display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-flow: row wrap;*/

}

/*.thumbnail:first-child {
	margin-left: 0;
}

.thumbnail:last-child {
	margin-right: 0;
}*/

.thumbnail {
	margin-bottom: 1.075vw;
	/*display: flex;
	align-items: center;
	justify-content: center;*/
	overflow: hidden;
	width: 100%;
	height: 7.25vw;
  	vertical-align: middle;
  	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
  	-webkit-transition-property: transform;
  	transition-property: transform;
  	-webkit-transition-timing-function: ease-out;
  	transition-timing-function: ease-out;
}


.thumbnail img { 
	width: 100%;
	height: 100%;
	object-fit: cover;

}


/*.thumbnail:hover, .thumbnail:focus, .thumbnail:active {
  -webkit-transform: translateX(1vw);
  transform: translateX(1vw);
}*/


.gallery .thumbnails .thumbnail.selected a {
  opacity: 0.33;
  pointer-events: none; /* Optional: Disable clicks on the selected thumbnail */
}

/* Prevent the hover effect on the selected (active) thumbnail */
.gallery .thumbnails .thumbnail.selected:hover,
.gallery .thumbnails .thumbnail.selected:focus,
.gallery .thumbnails .thumbnail.selected:active {
  -webkit-transform: none !important;
  transform: none !important;
}

/* Hover effect for other thumbnails */
.gallery .thumbnails .thumbnail:hover, 
.gallery .thumbnails .thumbnail:focus, 
.gallery .thumbnails .thumbnail:active {
  -webkit-transform: translateX(1vw);
  transform: translateX(1vw);
}



.gallery-horizontal .thumbnails .thumbnail.selected a {
  opacity: 0.33;
  pointer-events: none; /* Optional: Disable clicks on the selected thumbnail */
}

/* Prevent the hover effect on the selected (active) thumbnail */
.gallery-horizontal .thumbnails .thumbnail.selected:hover,
.gallery-horizontal .thumbnails .thumbnail.selected:focus,
.gallery-horizontal .thumbnails .thumbnail.selected:active {
  -webkit-transform: none !important;
  transform: none !important;
}

/* Hover effect for other thumbnails */
.gallery-horizontal .thumbnails .thumbnail:hover, 
.gallery-horizontal .thumbnails .thumbnail:focus, 
.gallery-horizontal .thumbnails .thumbnail:active {
  -webkit-transform: translateX(1vw);
  transform: translateX(1vw);
}







/* Lightbox Gallery */

/* Gallery container with CSS columns for masonry effect */
.lbgallery {
    column-count: 6; /* 6 columns for the gallery */
    column-gap: 1vw; /* Space between columns */
    padding: 1vw 0;
    width: 100%;
    display: block;
    margin: 0 auto;
	border-bottom: solid 2px black;
}

/* Image container for each gallery item */
.lbgallery-item {
    break-inside: avoid; /* Prevent items from breaking in the middle */
    margin-bottom: 1vw; /* Space between images vertically */
    position: relative;
	overflow: hidden;
}

/* Image itself with object-fit to retain aspect ratio */
.lbgallery-image {
    width: 100%; /* Ensure the image takes the full width of the container */
    height: auto; /* Height is auto so that the aspect ratio is maintained */
    object-fit: contain; /* Ensure image fits within container without stretching */
    transition: transform 15s ease, filter .3s ease;
}

/* Hover effect: zoom-in effect */
.lbgallery-item:hover .lbgallery-image {
    transform: scale(1);
    filter: brightness(1.5);
	cursor: pointer;
}

/* Responsive grid - adjusts the number of columns based on viewport size */
@media (max-width: 1200px) {
    .lbgallery {
        column-count: 4; /* 4 columns on medium screens */
    }
}

@media (max-width: 900px) {
    .lbgallery {
        column-count: 3; /* 3 columns on smaller screens */
    }
}

@media (max-width: 600px) {
    .lbgallery {
        column-count: 2; /* 2 columns on very small screens */
    }
}















/* When swiping to the left (previous image) */
.slide-out-left {
    transform: translateX(-100%);
}

/* When swiping to the right (next image) */
.slide-out-right {
    transform: translateX(100%);
}

/* When the image is entering */
.slide-in-left {
    transform: translateX(-100%);
}

/* When the image is entering from the right */
.slide-in-right {
    transform: translateX(100%);
}

/* To hide images during transition */
.lightbox-image.hidden {
    opacity: 0;
}








/* Lightbox style */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 97.5%;
    height: 98%;
   	background-color: hsla(0,0%,95%,.98);
    display: none;
    align-items: center;
    justify-content: center;
	flex-direction: column;
    z-index: 1000;
	padding: 1vw 1vw 1vw 1.5vw;
}

/* Lightbox content container */
.lightbox-content {
    position: relative;
    text-align: center;
    background-color: transparent; /* No background color around image */
    padding: 1vw;
    width: 100%;
    height: 100%;
    overflow: hidden;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	transition: transform 0.5s ease;
    will-change: transform;
}





/* Lightbox image styling */
.lightbox-image img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
	box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1), /* main shadow */
              0px 3px 5px rgba(0, 0, 0, 0.175);  /* subtle, softer second shadow */
	transition: opacity 0.3s ease;
    opacity: 1;
}






/* Lightbox Navigation */


.lightbox-nav {
	position: relative;
	width: 100%;
	border-bottom: 2px solid black;
	height: auto;
	display: flex;
	align-content: flex-end;
	align-items: flex-end;
	justify-content: space-between;
	flex-direction: row;
	flex-flow: row;
	padding: 0 0 1vw 0;
	
}

.lbkey {
	display: flex;
		/*flex: 1;*/
		flex-flow: row;
	flex-direction: row;
	flex-wrap: nowrap;
	
}

.lightbox-nav p { 
	font-size: .7vw;
	letter-spacing: .04vw;
	line-height: 1.4vw;
	margin-right: 1vw;
}

.lightbox-nav .lbpmargin {
	margin-right: 5vw;
}

.arrow-btns {
	display: flex;
	flex-flow: row;
	flex-direction: row;
	flex-wrap: nowrap;
}


.nav-btn {
  position: relative;
  z-index: 1;
  cursor: pointer;
  background-color: transparent;
  color: black;
  border: 3px solid black;  /* Border color */
  border-radius: 8px;  /* Rounded corners */
  justify-content: center;
  align-items: center;
  display: flex;  /* Flexbox to align arrow properly */
  width: 50px;    /* Adjust the width for button size */
  height: 50px;   /* Adjust the height for button size */
  visibility: visible;  /* Always visible */
  opacity: 1;  /* Always visible */
  transition: background-color .2s ease;
}

/* Hover effect for navigation buttons */
.nav-btn:hover {
  background-color: black;
}

/* Arrow base styling */
.arrow-nav-stem {
  height: 3px;
  width: 20px;
  top: 20px; /* Align vertically */
  left: 16px;  /* Center stem horizontally */
  background-color: black;
  position: absolute;
}



/* Arrow head (diagonal line) */
.arrow-nav-head::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 3px;
  top: 0px;
  left: 0px;
  transform: rotate(0deg);  /* Default arrowhead direction */
  background-color: black;
}

.arrow-nav-head::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 3px;
  top: 0px; /* Below the top line */
  left: 0px;
  transform: rotate(0deg);  /* Default arrowhead direction */
  background-color: black;
}


/* First button - Rotate the arrow to point to the right */
#first-image .arrow-nav-first .arrow-nav-stem {
  left: 17px;  /* Move the stem horizontally */
  top: 20px; /* Adjust vertical position */
}




/* Add duplicate stem only for the first and previous buttons */
#first-image .arrow-nav-first .arrow-nav-stem::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 30px;
  top: -13px; /* Position after original stem */
  left: -10px;  /* Align with the original stem */
  background-color: black;
}

/* Individual Button Variations (ID-based) */




/* First button - Rotate the arrow to point to the right */
#first-image .arrow-nav-first .arrow-nav-head::before {
  	transform: rotate(-45deg); /* Arrowhead points right */
	top: 14.5px; /* Position after original stem */
  	left: 11px;  /* Align with the original stem */
}

#first-image .arrow-nav-first .arrow-nav-head::after {
 	transform: rotate(45deg); /* Arrowhead points right */
	top: 26.5px; /* Position after original stem */
  	left: 11px;  /* Align with the original stem */
}

/* Previous button - Rotate the arrow to point left */
#prev-image .arrow-nav-stem {
  left: 13px;  /* Move the stem horizontally */
  top: 20px; /* Adjust vertical position */
}

/* Previous button - Rotate the arrow to point up */
#prev-image .arrow-nav-prev .arrow-nav-head::before {
  	transform: rotate(-45deg); /* Arrowhead points up */
	top: 14.5px; /* Position after original stem */
  	left: 7px;
}

#prev-image .arrow-nav-prev .arrow-nav-head::after {
  transform: rotate(45deg); /* Arrowhead points up */
	top: 26.5px; /* Position after original stem */
  	left: 7px;
}

/* Next button - Rotate the arrow to point left */
#next-image .arrow-nav-stem {
  left: 11px;  /* Move the stem horizontally */
  top: 20px; /* Adjust vertical position */
}

/* Next button - Rotate the arrow to point down */
#next-image .arrow-nav-next .arrow-nav-head::before {
  	transform: rotate(45deg); /* Arrowhead points down */
	top: 14.5px; /* Position after original stem */
  	left: 17px;
}

#next-image .arrow-nav-next .arrow-nav-head::after {
  transform: rotate(-45deg); /* Arrowhead points down */
	top: 26.5px; /* Position after original stem */
  	left: 17px;
}

/* Last button - Rotate the arrow to point left */
#last-image .arrow-nav-last .arrow-nav-head::before {
  transform: rotate(45deg); /* Arrowhead points left */
	top: 14.5px; /* Position after original stem */
  	left: 14px;
}

#last-image .arrow-nav-last .arrow-nav-head::after {
  transform: rotate(-45deg); /* Arrowhead points left */
		top: 26.5px; /* Position after original stem */
  	left: 14px;
}

/* Last button - Rotate the arrow to point left */
#last-image .arrow-nav-last .arrow-nav-stem {
  left: 7px;  /* Move the stem horizontally */
  top: 20px; /* Adjust vertical position */
}

#last-image .arrow-nav-last .arrow-nav-stem::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 30px;
  top: -13px; /* Position after original stem */
  left: 27px;  /* Align with the original stem */
  background-color: black;
}



/* Hover effect for arrow */
.nav-btn:hover .arrow-nav-head::before,
.nav-btn:hover .arrow-nav-head::after,
.nav-btn:hover .arrow-nav-stem,
.nav-btn:hover .arrow-nav-stem::after {
  background-color: hsla(0, 0%, 95%, 1.00);  /* Light hover effect for the arrow */
}

#first-image:hover .arrow-nav-stem::after {
	  background-color: hsla(0, 0%, 95%, 1.00);  /* Light hover effect for the arrow */
}

#last-image:hover .arrow-nav-stem::after {
	  background-color: hsla(0, 0%, 95%, 1.00);  /* Light hover effect for the arrow */
}




#prev-image {
   margin-left: 1vw;
}

#first-image {
   margin-left: 1vw;
}


/* Position Next and Last buttons */
#next-image {
    margin-left: 1vw;
	
}



/* Position Next and Last buttons */
#last-image {
   margin-left: 1vw;
}












/* Close button (X) using pseudo-elements */
.close-btn {
	margin-left: 1vw;
    position: relative;
	width: 28px; 
  	height: 28px;  
	padding: 8px;
    cursor: pointer;
    z-index: 10;
	border: 3px solid black;  /* Border color */
	border-radius: 8px;
  	background-color: transparent;  /* No background color */
  	color: black;
	transition: background-color .2s ease;
}

.close-btn:hover {
	background-color: black;
	transition: background-color .2s ease;
  /*border-color: hsla(0,0%,66%,1.00);   */
}

/* Using pseudo-elements to create the X (cross) */
.close-btn::before, .close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px; /* Length of the cross lines */
    height: 3px; /* Width of the cross lines */
    background-color: black; /* White color for the X */
    transform-origin: center;
    transform: translate(-50%, -50%); /* Centering the lines */
	transition: background-color .2s ease;
}

/* First line of the X (diagonal top-left to bottom-right) */
.close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg); /* Rotate to create the first diagonal */
}

/* Second line of the X (diagonal top-right to bottom-left) */
.close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg); /* Rotate to create the second diagonal */
}

/* Hover effect for the arrow */
.close-btn:hover::before, .close-btn:hover::after {
	transition: background-color .2s ease;
  background-color: hsla(0,0%,95%,1.00);
	/* background-color: hsla(0,0%,66%,1.00); */
}



































.paypal-wrapper {
	
	grid-column: 7 / span 4;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1vw;
}

.paypal-btn-wrapper {
	display: flex;
	align-items: flex-end;
	grid-column: 1 / span 1;
	
}

.paypal-cart-wrapper {
	display: flex;
	align-items: flex-end;
	grid-column: 2 / span 1;
	
	
}


.paypal_btn {
	display: inline-block;
	font-size: .9vw;
	letter-spacing: 0vw;
	line-height: 1.4vw;
	color: #e6e6e6;
	text-align: center;
	padding: 10px 14px;
	border: solid 2px black;
	cursor: pointer;
	outline: none;
	background: none black;
	border-radius: .45vw;
	transition: all ease-in-out 1s;
}
.paypal_btn:hover {
	background: none;
	border: solid 2px black;
	border-radius: .45vw;
	color: black;
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}

#paypal_btn_blue-dark {
	color: hsla(216,7%,85%,1.00);
}

#paypal_btn_blue-dark:hover {
	color: black;
}




.paypal_cart {
	display: inline-block;
	font-size: .9vw;
	letter-spacing: .045vw;
	line-height: 1.4vw;
	color: black;
	text-align: center;
	padding: 13px 5px 10px 22px;
	border: none;
	cursor: pointer;
	outline: none;
	background: none;
	-o-transition: all ease-in-out .7s;
	-ms-transition: all ease-in-out .7s;
	-moz-transition: all ease-in-out .7s;
	-webkit-transition: all ease-in-out .7s;
	transition: all ease-in-out .7s;
	border-radius: 0!important;
}

.paypal_cart:hover {
	color: hsla(0,0%,66%,1.00);
	-o-transition: all ease-in-out .3s;
	-ms-transition: all ease-in-out .3s;
	-moz-transition: all ease-in-out .3s;
	-webkit-transition: all ease-in-out .3s;
	transition: all ease-in-out .3s;
}






.paypal-opt {
	color: black;
	font-size: .98vw;
	line-height: 1.25vw;
	
}
/*
.paypal-list {
	color: black;
	font-size: .98vw;
	line-height: 1.25vw;
	width: 15vw;
   	height: 1.25vw;
   	overflow: hidden;
   	background: url("../img/icons/CS_Dropdown_Icon_Normal.png") no-repeat right;
	background-size: contain;
	margin-bottom: 3%;
	
}

.paypal-list select {
	color: black;
	font-size: .98vw;
	line-height: 1.25vw;
	background: transparent;
	width: 15vw;
	height: 1.25vw;	
	border: 0;
	border-radius: 0;
	margin-left: -.2vw;
	-webkit-appearance: none;
}

.paypal-list select:hover {
	color: white;
	cursor: pointer;
	
}

.paypal-list:hover {
	background: url("../img/icons/CS_Dropdown_Icon_Hover.png") no-repeat right;
	background-size: contain;
}*/






@media (max-width: 1100px) {
	
	.header-elements {
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-gap: 2vw;
	}
	
	header {
		margin: 2.5% 2.5% 0%;
	}
		
	.main-content {
		display: grid;
		padding: 0 2.5%;
		min-height: 100vh;
	}
	
	h1, h2 {
		font-size: 7vw;
		line-height: 5vw;
		letter-spacing: -.5vw;
	}

	
	h3, p, a, li, h5 {
		font-size: 1.75vw;
		letter-spacing: 0vw;
		line-height: 2.5vw;
	
	}
	
	.h3work {
		grid-column: 1 / span 1;
		grid-row: 2;
		margin-bottom: -.4vw;
		/*margin-top: 23vw;*/
	}
	
	
	.catnav {
		display: block;
		grid-column: 2 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
		margin-left: -2vw;
		
	}
	
	
	.catnav-col2 {
		display: block;
		grid-column: 3 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	}
	
	
		
	.header-list-1 {
		grid-column: 5 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	
	}

	.header-list-2 {
		grid-column: 6 / span 2;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	
	}
	
		

	.header-list-3 {
		grid-column: 7 / span 1;
		grid-row: 1 / span 1;
		align-self: flex-start;
		margin-top:-.4vw;
	}


	.h3statement {
		display: none;
	
	}

	.statement {
		grid-column: 5 / span 2;
		grid-row: 1;
		column-count: 1;
		column-gap: 10px;
		margin-top: -.4vw;
		align-self: flex-start;
	}
		
	.logo {
		grid-column: span 3;
		grid-row: 1;
	}
	
	
	
	.signup-wrapper {
		display: block;
		grid-column: 7 / span 2;
		grid-row: 1 / span 1;
		margin-top: -.4vw;
		letter-spacing: 0;
		align-self: flex-end;
	}
	
	
	.signup-wrapper p {
		margin-top: 5vw;
		margin-bottom: -3.5vw;
	}

	


	.page-signup-wrapper {
		display: block;
		grid-column: 5 / span 3;
		grid-row: 3 / span 1;
		margin-top: -.4vw;
		letter-spacing: 0;
		align-self: flex-start;
	}
	
	
	
	
	.success-panel {
		height: 50vh;
		width: 100%;
		/*height: 1fr;*/
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-gap: 2vw;
		grid-column: 1 / span 12;
	}
	
	.success-panel h2 {
		grid-column: 5 / span 4;
		grid-row: 1 / span 1;
		align-self: flex-end;
	}
	
	.success-h3 {
		grid-column: 5 / span 4;
		grid-row: 2 / span 1;
		align-self: flex-start;
		font-size: 3.5vw;
		letter-spacing: -0.2vw;
		line-height: 1.4vw;
		margin-top: -.5vw;
		
	}
	
	.success-body {
		grid-column: 5 / span 4;
		grid-row: 2 / span 1;
		align-self: flex-end;
		margin-bottom: 7vw;
	}




	.success-links {
		grid-column: 5 / span 2;
		grid-row: 3 / span 1;
		align-self: flex-start;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-gap: 2vw;
		margin-left: 0;
	}
	
	.success-link-2 {
		grid-column: 1 / span 1;
	}

		
	
	
	
	/*landing header*/
	
	.land-header-elements {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-gap: 1.75vw 1vw;
		width: 100%;
		padding: 0;
		height: 94vh;
		
	}
	
	.land-header-list-1 {
		grid-column: 3 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
		margin-left: .4vw;
		text-transform: lowercase;
	}
	
	.land-header-list-2 {
		grid-column: 4 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
		text-transform: lowercase;
	}

	
	
	
	.land-logo {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1.75vw 1vw;
		grid-column: 1 / span 2;
		grid-row: 1;
		align-self: flex-end;
	}
	
	.land-logo h2 {
		font-size: 7vw;
		line-height: 4vw;
		letter-spacing: -.5vw;
		grid-column: 1 / span 1;
	}
	
	.land-logo h1 {
		font-size: 7vw;
		line-height: 4vw;
		letter-spacing: -.5vw;
		grid-column: 2 / span 1;
		margin-bottom: .5vw;
	}

	
	
	.land-h3work {
		grid-column: 1 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
		margin-left: .4vw;
		text-transform: lowercase;
	}
	
	.land-catnav {
		display: block;
		grid-column: 2 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
		text-transform: lowercase;
	}
	
	
	.land-statement {
		display: block;
		grid-column: 1 / span 2;
		grid-row: 2 / span 1;
		column-count: 1;
		column-gap: 1vw;
		margin-top: -.4vw;
		padding-right: 0;
		font-size: 1.75vw;
		letter-spacing: .0vw;
		line-height: 2.5vw;
	}
	
	.land-signup-wrapper {
		display: block;
		grid-column: 4 / span 1;
		grid-row: 2 / span 1;
		margin-top: -.4vw;
		letter-spacing: 0;
		align-self: flex-end;
	}

	
	.form-input {
		background: transparent;
		border: 1.5px solid hsla(0,0%,95%,1.00);
		border-radius: .4vw;
		padding: 8px 14px;
		font-size: 1.75vw;
		letter-spacing: 0;
		line-height: 1.4vw;
		color: hsla(0,0%,95%,1.00);
		width: 30vw;
		margin-bottom: 10px;
	}
	
	
	
	
	.form-btn {
		display: inline-block;
		font-size: 1.5vw;
		letter-spacing: .0vw;
		line-height: 1.4vw;
		color: black;
		text-align: center;
		padding: 8px 14px;
		border: solid 1.5px hsla(0,0%,95%,1.00);
		cursor: pointer;
		outline: none;
		background: none hsla(0,0%,95%,1.00);
		border-radius: .4vw;
		transition: all ease-in-out 1s;
	}
	
	.form-input-dark {
		background: transparent;
		border: 1.5px solid black;
		border-radius: .4vw;
		padding: 8px 14px;
		color: black;
		width: 85%;
		margin-bottom: 10px;
		font-size: 1.75vw;
		letter-spacing: 0vw;
		line-height: 2.5vw;
	}
	
	
	
	
	.form-btn-dark {
		display: inline-block;
		color: hsla(0,0%,95%,1.00);
		text-align: center;
		padding: 8px 14px;
		border: solid 1.5px black;
		cursor: pointer;
		outline: none;
		background: none black;
		border-radius: .4vw;
		transition: all ease-in-out 1s;
		font-size: 1.75vw;
		letter-spacing: 0vw;
		line-height: 2.5vw;
	}
	

	
	/* End landing header */
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		
	
	
	.lbkey {
		display: none;
		
	}
		
	
	
	
	
	
	
	
	
	.panel-content {
	  /* min height incase content is higher than window height */
		padding: 2vw 0;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		/*grid-template-rows: repeat(3, 1fr);*/
		grid-gap: 2vw;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}
	
	
		
		
	
	
	.gallery {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 2vw;
		grid-column: 1 / span 6;
		height: 100%;
		width: 100%;
		grid-row: 1 / span 2;
		
	}
	
	.gallery-horizontal {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-gap: 2vw;
		
		grid-column: 1 / span 8;
		height: 100%;
		width: 100%;
		
		grid-row: 1 / span 2;
		
	}
	
	
	
	.imgBox {
		grid-column: 2 / span 4;
		grid-row: 1 / span 1;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		height: auto;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox img {
		display: block;
		height: auto;
		width: 100%;
		object-fit: cover;
	}
	
	.imgBox-horizontal {
		grid-column: 2 / span 6;
		grid-row: 1 / span 2;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		height: auto;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox-horizontal img {
		display: block;
		height: auto;
		width: 100%;
		object-fit: cover;
	}
	
	.imgBox-vertical {
		grid-column: 2 / span 4;
		grid-row: 1 / span 2;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		height: auto;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox-vertical img {
		display: block;
		height: auto;
		width: 100%;
		object-fit: cover;
	}
	
	
	
	.thumbnails {
		grid-column: 1 / span 1;
		/*display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-flow: row wrap;*/
	
	}
	
	/*.thumbnail:first-child {
		margin-left: 0;
	}
	
	.thumbnail:last-child {
		margin-right: 0;
	}*/
	
	.thumbnail {
		margin-bottom: 2vw;
		/*display: flex;
		align-items: center;
		justify-content: center;*/
		overflow: hidden;
		width: 100%;
		height: 6.5vw;
	  	vertical-align: middle;
	  	-webkit-transition-duration: 0.3s;
	  	transition-duration: 0.3s;
	  	-webkit-transition-property: transform;
	  	transition-property: transform;
	  	-webkit-transition-timing-function: ease-out;
	  	transition-timing-function: ease-out;
	}
	
	.thumbnail:last-child {
		margin-bottom: 0;
	}
	
	.thumbnail img { 
		width: 100%;
		height: 100%;
		object-fit: cover;
	
	}
	
		
		
		
		
	
	
	.info-wrapper {
		grid-column: span 4;
		display: block;
		height: 100%;
	}
	
	.info-wrapper-horizontal {
		grid-column: span 4;
		display: block;
		height: 100%;
	}
	
	.info-element {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2vw;
		margin-bottom: 2vw;
	}
	
	.info-element h5 {
		grid-column: 1 / span 2;
		margin-top: -.4vw;
	}
	
	.info-element p {
		grid-column: 3 / span 2;
		margin-top: -.4vw;
	}
	
	.sales-button {
		grid-column: 3 / span 2;
		
		
	}
	.sales-button p{
		grid-column: 2 / span 2;
		margin-top: -0.5vw;
		margin-bottom: 1vw;
	
	}
	
	
	
	
	.info-wrapper-product {
		grid-column: span 6;
		display: block;
		height: 100%;
	}
	
	.info-wrapper-product .info-element {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 2vw;
		margin-bottom: 2vw;
	}
	
	.info-wrapper-product .info-element h5 {
		grid-column: 1 / span 2;
		margin-top: -.4vw;
	}
	
	.info-wrapper-product .info-element p {
		grid-column: 3 / span 4;
		margin-top: -.4vw;
	}
	
	
	
	
	.paypal-wrapper {
		grid-column: 7 / span 4;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2vw;
	}
	
	.paypal-btn-wrapper {
		display: flex;
		align-items: flex-end;
		grid-column: 1 / span 2;
		
	}
	
	.paypal-cart-wrapper {
		display: flex;
		align-items: flex-end;
		grid-column: 3 / span 2;
		
		
	}
	
	
	.paypal_btn {
		display: inline-block;
		font-size: 1.75vw;
		letter-spacing: .075vw;
		line-height: 2.25vw;
		
		text-align: center;
		padding: 10px 14px;
		border: solid 2px black;
		cursor: pointer;
		outline: none;
		background: none black;
		border-radius: .45vw;
		transition: all ease-in-out 1s;
	}
	.paypal_btn:hover {
		background: none;
		border: solid 2px black;
		border-radius: .45vw;
		color: black;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	#paypal_btn_blue-dark {
		color: hsla(216,7%,85%,1.00);
	}
	
	#paypal_btn_blue-dark:hover {
		color: black;
	}
	
	
	
	
	.paypal_cart {
		display: inline-block;
		font-size: 1.75vw;
		letter-spacing: .075vw;
		line-height: 2.25vw;
		color: black;
		text-align: center;
		padding: 13px 5px 10px 22px;
		border: none;
		cursor: pointer;
		outline: none;
		background: none;
		-o-transition: all ease-in-out .7s;
		-ms-transition: all ease-in-out .7s;
		-moz-transition: all ease-in-out .7s;
		-webkit-transition: all ease-in-out .7s;
		transition: all ease-in-out .7s;
		border-radius: 0!important;
	}
		
		
		
		
		
		
	
	
	
	
	
	
	
	
	
	
	
	
	

	.shop-item-photo {
		grid-row-start: 2;
		grid-column: 1 / span 12;
		grid-row: 2 / span 2;
	}
	
	.horizontal {
		grid-row-start: 2;
		grid-column: 2 / span 10;
		grid-row: 2 / span 2;
	}
	
	.vertical {
		padding-bottom: .5vw;
		grid-row-start: 2;
		grid-column: 3 / span 8;
		grid-row: 2 / span 2;
	}
	
		
	.vertical-tall{
		margin-bottom: 3.5vw;
		grid-row-start: 2;
		grid-column: 7 / span 6;
		grid-row: 2 / span 2;
	}
	
	.square {
		grid-row-start: 2;
		grid-column: 5 / span 8;
		grid-row: 2 / span 2;
	}

	
	.yeardiv {
		padding: 2.5% 0% 1.75%;
		display: block;
		height: 2.5vw;
	}
	
	h4 {
		display: block;
		font-size: 5.5vw;
		letter-spacing: -.5vw;
	}
/*
	footer {
		display: flex;
		align-content: space-between;
		justify-content: space-between;
		padding: 2.5%;
	}*/
	
	
	footer {
		margin-bottom: 1%;
		/*display: flex;
		align-content: space-between;
		justify-content: space-between;
		padding: 1%;*/
	}
	
	
	
	.footer-elements {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-gap: 4vw 2vw;
		width: 100%;
		padding: 1% 0 1.5%;
		border-bottom: solid 2px black;
		
	}
	
	
	.h3work-footer {
		grid-column: 7 / span 1;
		margin-bottom: -.4vw;
	}
	
	
	.catnav-footer {
		display: block;
		grid-column: 8 / span 3;
		align-self: flex-end;
		margin-bottom: -.4vw;
	}
	
	.catnav-col2-footer {
		display: block;
		grid-column: 8 / span 3;
		align-self: flex-end;
		margin-top: -3.5vw;
		margin-bottom: -.4vw;
	}
	
	.catnav-footer li {
		color: hsla(0,0%,66%,1.00);
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-footer li:hover {
		color: hsla(0,0%,66%,1.00) !important;
		cursor: pointer;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-col2-footer li {
		color: hsla(0,0%,66%,1.00);
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-col2-footer li:hover {
		color: hsla(0,0%,66%,1.00) !important;
		cursor: pointer;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	
	
	
	
	.footer-list-1 {
		grid-column: 7 / span 1;
		align-self: flex-end;
		margin-bottom: -.4vw;
		
	}
	
	.footer-list-2 {
		grid-column: 8 / span 3;
		align-self: flex-end;
		margin-bottom: -.4vw;
		
	}
	
	
	.footer-list-2 a {
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.footer-list-2 a:hover {
		color: hsla(0,0%,66%,1.00) !important;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
		
	}

	

	
	
	
	
	
	
	
	/* Lightbox style */
	.lightbox {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 96vw;
	    height: 98%;
	   	background-color: hsla(0,0%,95%,.98);
	    display: none;
	    align-items: center;
	    justify-content: center;
		flex-direction: column;
	    z-index: 1000;
		padding: 2vw;
	}
	
	/* Lightbox content container */
	.lightbox-content {
	    position: relative;
	    text-align: center;
	    background-color: transparent; /* No background color around image */
	    padding: 2vw;
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
	}
		

	
	#prev-image {
	   margin-left: 1.75vw;
	}
	
	#first-image {
	   margin-left: 0vw;
	}
	
	
	/* Position Next and Last buttons */
	#next-image {
	    margin-left: 1.75vw;
		
	}
	
	
	
	/* Position Next and Last buttons */
	#last-image {
	   margin-left: 1.75vw;
	}

		
	
	.arrow-btns {
		margin-left: 0vw;
	}
	
	.lightbox-nav {

		padding: 0 0 2vw 0;
		
	}

	
	
	
	
	
	
	
	
	
	
	
		
		
	/*start of back to top*/
	
	.top {
		position: fixed;
	  	top: 40.75vh;
	  	right: 2.5vw;
		border: 3px solid black;  /* Border color */
		padding: 8px;  /* Padding to make it a rectangle */
		border-radius: 8px;  /* Rounded corners */
	}
	
	
	/* Increase the hitbox size without affecting visible button */
	.top::before {
		content: "";
		position: absolute;
		top: -20px; /* Adjust this value to control the expansion of the hitbox */
		left: -20px;
		right: -20px;
		bottom: -20px;
		border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
	}
	
	/* Arrow styling using lines */
	.toparrow {
		position: relative;
		width: 28px;
		height: 28px;
	}
	
	/* Top diagonal line (45 degrees for upward pointing) */
	.toparrow::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 3px;
		top: 13px;
		left: -2.5px;
		transform: rotate(-45deg);  /* Arrowhead, top left to bottom right */
	}
	
	/* Bottom diagonal line (-45 degrees for upward pointing) */
	.toparrow::after {
		content: "";
		position: absolute;
		width: 20px;
		height: 3px;
		top: 13px;  /* Positioned just below the first line */
		left: 10.5px;
		transform: rotate(45deg);  /* Arrowhead, top right to bottom left */
	}
	
	/* Arrow stem (regular div) */
	.toparrow .topstem {
		width: 3px;
		height: 20px;  /* Stem height */
		top: 10px;  /* Align it vertically with the center of the arrow */
		left: 12.25px;  /* Center stem horizontally */
	}
	
	.toparrow .topstem::after {
	  content: "";
	  position: absolute;
	  width: 3px;
	  height: 30px;
	  top: -24px; /* Position after original stem */
	  left: 0px;  /* Align with the original stem */
		transform: rotate(90deg);  /* Arrowhead, top right to bottom left */
	
	}

	
	
	
	/*start of bottom*/
	
	.bottom {
		position: fixed;
	  	top: 47vh;
	  	right: 2.5vw;
	  	border: 3px solid black;  /* Border color */
		padding: 8px;
	  	border-radius: 8px;  /* Rounded corners */
	}
	
	
	/* Increase the hitbox size without affecting visible button */
	.bottom::before {
	  content: "";
	  position: absolute;
	  top: -20px; /* Adjust this value to control the expansion of the hitbox */
	  left: -20px;
	  right: -20px;
	  bottom: -20px;
	  border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
	}

	/* Arrow styling using lines */
	.bottomarrow {
	  position: relative;
	  width: 28px;
	  height: 28px;
	}
	
	/* Top diagonal line (45 degrees for upward pointing) */
	.bottomarrow::before {
	  content: "";
	  position: absolute;
	  width: 20px;
	  height: 3px;
	  top: 13px;
	  left: -2.5px;
	  transform: rotate(45deg);  /* Arrowhead, top left to bottom right */
	}
	
	/* Bottom diagonal line (-45 degrees for upward pointing) */
	.bottomarrow::after {
	  content: "";
	  position: absolute;
	  width: 20px;
	  height: 3px;
	  top: 13px;  /* Positioned just below the first line */
	  left: 10.5px;
	  transform: rotate(-45deg);  /* Arrowhead, top right to bottom left */
	}
	
	/* Arrow stem (regular div) */
	.bottomarrow .bottomstem {
	  width: 3px;
	  height: 20px;  /* Stem height */
	  top: -1px;  /* Align it vertically with the center of the arrow */
	  left: 12.25px;  /* Center stem horizontally */
	  position: absolute;
	}
	
	.bottomarrow .bottomstem::after {
	  content: "";
	  position: absolute;
	  width: 3px;
	  height: 30px;
	  top: 13px; /* Position after original stem */
	  left: 0.5px;  /* Align with the original stem */
		transform: rotate(90deg);  /* Arrowhead, top left to bottom right */
	
	}
	
	

}


@media (max-width: 500px) {
	

	
	.header-elements {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 4% 2.5%;
		width: 100%;
		padding: 0;
		grid-template-rows: repeat(4, 45vw);
		margin-bottom: 7vw;
	}
	
	.news-header-elements {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 45vw);
		margin-bottom: -1vw;
	}
	
	
	h1, h2 {
		font-size: 12vw;
		line-height: 7.75vw;
		letter-spacing: -1vw;
	}

	
	h3, h5, p, a, li {
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 4vw;
	
	}
		
	.logo {
		display: flex;
		grid-column: 1 / span 4;
		align-self: flex-end;
	}
	
	.logo h1 {
		width: 50%;
		flex-grow: 1;
	}
	
	.logo h2 {
		width: 50%;
		flex-grow: 1;
	}
	
	.h3statement {
		display: block;
		grid-column: 2 / span 1;
		grid-row: 3;
		margin-top: -.4vw;
		align-self: flex-start;
	}

	.statement {
		letter-spacing: 0;
		grid-column: 3 / span 2;
		grid-row: 3;
		column-count: 1;
		column-gap: 20px;
		margin-top: -.4vw;
		align-self: flex-start;
	}
	
	.news-h3statement {
		display: none;
	}
	.news-statement {
		display: none;
	}
	
	
	.h3work {
		grid-column: 2 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	}
	
	.catnav {
		grid-column: 3 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
		margin-left: 0;
	}
	
	.catnav-col2 {
		display: block;
		grid-column: 4 / span 1;
		grid-row: 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	}
	
	.news-h3work {
		display: none;
	}
	
	.news-catnav {
		display: none;
	}
	
	.news-catnav-col2 {
		display: none;
	}
	
	.header-list-1 {
		grid-column: 2 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-top: -1.75vw;
		
	}
	
	.header-list-2 {
		grid-column: 3 / span 2;
		grid-row: 1;
		align-self: flex-start;
		margin-top: -1.75vw;
		
	}
	
	.header-list-3 {
		grid-column: 1 / span 1;
		grid-row: 4 / span 1;
		align-self: flex-start;
		margin-top:-.4vw;
	}
	
	.signup-wrapper {
		display: block;
		grid-column: 2 / span 3;
		grid-row: 4 / span 1;
		margin-top: -5.45vw;
		letter-spacing: 0;
		align-self: flex-start;
	}	

	.signup-wrapper p {
		margin-bottom: -5vw;
	}	
	
	
	
	
	
	.news-header-list-3 {
		display: none;
	}
	
	.news-signup-wrapper {
		display: none;
	}
	
	
	
	
	.page-signup-wrapper {
		display: block;
		grid-column: 1 / span 2;
		grid-row: 3 / span 1;
		margin-top: -.4vw;
		margin-bottom: 2.5vw;
		letter-spacing: 0;
		align-self: flex-end;
	}
	
	
	
	
	.success-panel {
		height: 50vh;
		width: 100%;
		/*height: 1fr;*/
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-gap: 2vw;
		grid-column: 1 / span 4;
	}
	
	.success-panel h2 {
		grid-column: 1 / span 3;
		grid-row: 1 / span 1;
		align-self: flex-end;
		line-height: 9vw;
	}
	
	.success-h3 {
		grid-column: 1 / span 3;
		grid-row: 2 / span 1;
		align-self: flex-start;
		font-size: 6vw;
		letter-spacing: -0.2vw;
		line-height: 5vw;
		margin-top: 1vw;
		
	}
	
	.success-body {
		grid-column: 1 / span 2;
		grid-row: 2 / span 1;
		align-self: flex-end;
		margin-bottom: 0vw;
	}




	.success-links {
		grid-column: 1 / span 2;
		grid-row: 3 / span 1;
		align-self: flex-start;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-gap: 1vw;
		grid-column: 1 / span 4;
	}
	
	.success-link-2 {
		grid-column: 2 / span 1;
	}

	


		
	
	
	
	
	
	
	/*landing header*/
	
	.land-header-elements {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
		grid-gap: 3vw 2vw;
		width: 100%;
		padding: 0;
		height: 94vh;

		
	}
	
	.land-header-list-1 {
		grid-column: 1 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
		margin-left: .4vw;
		
	}
	
	.land-header-list-2 {
		grid-column: 2 / span 1;
		grid-row: 1;
		align-self: flex-start;
		margin-bottom: -.4vw;
	}
	
	.land-header-list-1 h3 {
		font-size: 3vw !important;
		letter-spacing: 0;
		line-height: 4.5vw !important;
		text-transform: lowercase;
	}
	
	.land-header-list-2 li a {
		font-size: 3vw !important;
		letter-spacing: 0;
		line-height: 4.5vw !important;
		text-transform: lowercase;
	}
	
		
	.land-header-list-2 li {

		line-height: 4.5vw !important;

	}
	
	
	
	.land-logo {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 3vw 2vw;
		grid-column: 1 / span 2;
		grid-row: 3;
		align-self: flex-end;
	}
	
	.land-logo h2 {
		font-size: 12vw;
		line-height: 7.75vw;
		letter-spacing: -1vw;
		grid-column: 1 / span 1;

	}
	
	.land-logo h1 {
		font-size: 12vw;
		line-height: 7.75vw;
		letter-spacing: -1vw;
		grid-column: 2 / span 1;
		margin-bottom: .5vw;
	}

	
	
	.land-h3work {
		grid-column: 1 / span 1;
		grid-row: 2;
		align-self: flex-start;
		margin-bottom: -.4vw;
		margin-left: .4vw;
		font-size: 3vw !important;
		letter-spacing: 0;
		line-height: 4.5vw !important;
		text-transform: lowercase;
	}
	
	.land-catnav {
		display: block;
		grid-column: 2 / span 1;
		grid-row: 2;
		align-self: flex-start;
		margin-bottom: -.4vw;
		column-count: 2;
		column-gap: 2vw;

	}
	
	.land-catnav li a{
		font-size: 3vw !important;
		letter-spacing: 0;
		line-height: 4.5vw !important;
		text-transform: lowercase;
	}	
	.land-catnav li{
		font-size: 2.5vw !important;
		letter-spacing: 0;
		line-height: 4.5vw !important;
		text-transform: lowercase;
	}
	
	
	.land-statement {
		display: block;
		grid-column: 1 / span 2;
		grid-row: 4 / span 1;
		column-count: 1;
		column-gap: 2vw;
		margin-top: -.4vw;
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 4.5vw;
		
	}
	
	
	
	
	
	
	.land-signup-wrapper {
		display: block;
		grid-column: 1 / span 2;
		grid-row: 6 / span 1;
		margin-top: -.4vw;
		letter-spacing: 0;
		align-self: flex-end;
	}
	
	.land-signup-wrapper p {
		margin-bottom: -2vw;
		margin-top: -5vw;
	}

	
	.form-input {
		background: transparent;
		border: 1.5px solid hsla(0,0%,95%,1.00);
		border-radius: .4vw;
		padding: 8px 14px;
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 4.5vw;
		color: hsla(0,0%,95%,1.00);
		width: 89vw;
		margin-bottom: 10px;
	}
	
	
	
	
	.form-btn {
		
		display: inline-block;
		font-size: 3vw;
		letter-spacing: .0vw;
		line-height: 4.5vw;
		color: black;
		text-align: center;
		padding: 8px 14px;
		border: solid 1.5px hsla(0,0%,95%,1.00);
		cursor: pointer;
		outline: none;
		background: none hsla(0,0%,95%,1.00);
		border-radius: .4vw;
		transition: all ease-in-out 1s;
	}
	
	.form-input-dark {
		background: transparent;
		border: 1.5px solid black;
		border-radius: 1vw;
		padding: 8px 14px;
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 5vw;
		color: black;
		width: 85%;
		margin-bottom: 10px;
	}
	
	
	
	
	.form-btn-dark {
		display: inline-block;
		font-size: 3vw;
		letter-spacing: 0;
		line-height: 5vw;
		color: hsla(0,0%,95%,1.00);
		text-align: center;
		padding: 8px 14px;
		border: solid 1.5px black;
		cursor: pointer;
		outline: none;
		background: none black;
		border-radius: 1vw;
		transition: all ease-in-out 1s;
	}
	
	
	
	
	/* End landing header */
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	.yeardiv {
		height: 9vw;
	}

	.year {
		margin-top: 2.3vw;
	}
	
	h4 {
		display: block;
		font-size: 9vw;
		letter-spacing: -.75vw;
	}
	
	.fourzerofour {
		font-size: 12vw;
		line-height: 7.75vw;
	}
	.fourzerofour2 {
		font-size: 12vw;
		line-height: 9vw;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.panel-content {
	  /* min height incase content is higher than window height */
		padding: 3vw 0 0vw;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		/*grid-template-rows: repeat(3, 1fr);*/
		grid-gap: 3vw;
	  /*outline: 10px solid hotpink;*/
	  /* turn above on to see the edge of panels */
	}
	
	
		
		
	
	
	.gallery {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2.5vw;
		grid-column: 1 / span 4;
		height: 100%;
		width: 100%;
		grid-row: 1 / span 2;
		
	}
	
	.gallery-horizontal {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2.5vw;
		
		grid-column: 1 / span 4;
		height: 100%;
		width: 100%;
		
		grid-row: 1 / span 2;
		
	}
	
	
	
	.imgBox {
		grid-column: 2 / span 3;
		grid-row: 1 / span 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox img {
		display: block;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
	
	.imgBox-horizontal {
		grid-column: 2 / span 3;
		grid-row: 1 / span 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox-horizontal img {
		display: block;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
	
	.imgBox-vertical {
		grid-column: 2 / span 3;
		grid-row: 1 / span 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	.imgBox-vertical img {
		display: block;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
	
	
	
	.thumbnails {
		grid-column: 1 / span 1;
		/*display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-flow: row wrap;*/
	
	}
	
	/*.thumbnail:first-child {
		margin-left: 0;
	}
	
	.thumbnail:last-child {
		margin-right: 0;
	}*/
	
	.thumbnail {
		margin-bottom: 2.5vw;
		/*display: flex;
		align-items: center;
		justify-content: center;*/
		overflow: hidden;
		width: 100%;
		/*height: 22.5vw;*/
		
		height: 11vw;
	  	vertical-align: middle;
	  	-webkit-transition-duration: 0.3s;
	  	transition-duration: 0.3s;
	  	-webkit-transition-property: transform;
	  	transition-property: transform;
	  	-webkit-transition-timing-function: ease-out;
	  	transition-timing-function: ease-out;
	}
	
	.thumbnail:last-child {
		margin-bottom: 0;
	}
	
	.thumbnail img { 
		width: 100%;
		height: 100%;
		object-fit: cover;
	
	}
	
		
		
		
		
	
	
	.info-wrapper {
		grid-column: span 4;
		display: block;
		height: 100%;
	}
	
	.info-wrapper-horizontal {
		grid-column: span 4;
		display: block;
		height: 100%;
	}
	
	.info-element {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2vw;
		margin-bottom: 2vw;
	}
	
	.info-element h5 {
		grid-column: 1 / span 1;
		margin-top: -.4vw;
	}
	
	.info-element p {
		grid-column: 2 / span 2;
		margin-top: -.4vw;
	}
	
	
		
	.sales-button {
		grid-column: 2 / span 2;
		
		
	}
	.sales-button p {
		grid-column: 2 / span 2;
		margin-top: -0.5vw;
		margin-bottom: 0vw;
	
	}
	
	
	
	.info-wrapper-product {
		grid-column: span 4;
		display: block;
		height: 100%;
	}
	
	.info-wrapper-product .info-element {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2vw;
		margin-bottom: 2vw;
	}
	
	.info-wrapper-product .info-element h5 {
		grid-column: 1 / span 1;
		margin-top: -.4vw;
	}
	
	.info-wrapper-product .info-element p {
		grid-column: 2 / span 2;
		margin-top: -.4vw;
	}
	
	
	
	
	.paypal-wrapper {
		grid-column: 1 / span 4;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 2vw;
		margin-top: 3vw;
		margin-bottom: 2.5vw;
	}
	
	.paypal-btn-wrapper {
		display: flex;
		align-items: flex-start;
		grid-column: 1 / span 1;
		
	}
	
	.paypal-cart-wrapper {
		display: flex;
		align-items: flex-start;
		grid-column: 3 / span 1;
		
		
	}
	
	
	.paypal_btn {
		display: inline-block;
		font-size: 3vw;
		letter-spacing: .045vw;
		line-height: 4vw;
		
		text-align: center;
		padding: 10px 14px;
		border: solid 2px black;
		cursor: pointer;
		outline: none;
		background: none black;
		border-radius: 1vw;
		transition: all ease-in-out 1s;
	}
	.paypal_btn:hover {
		background: none;
		border: solid 2px black;
		border-radius: .45vw;
		color: black;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	#paypal_btn_blue-dark {
		color: hsla(216,7%,85%,1.00);
	}
	
	#paypal_btn_blue-dark:hover {
		color: black;
	}
	
	
	
	
	.paypal_cart {
		display: inline-block;
		font-size: 3vw;
		letter-spacing: .045vw;
		line-height: 4vw;
		color: black;
		text-align: center;
		padding: 13px 5px 10px 22px;
		border: none;
		cursor: pointer;
		outline: none;
		background: none;
		-o-transition: all ease-in-out .7s;
		-ms-transition: all ease-in-out .7s;
		-moz-transition: all ease-in-out .7s;
		-webkit-transition: all ease-in-out .7s;
		transition: all ease-in-out .7s;
		border-radius: 0!important;
	}
		
		
		
		
	

	/* Lightbox Gallery */
	
	/* Gallery container with CSS columns for masonry effect */
	.lbgallery {
	    column-count: 2; /* 6 columns for the gallery */
	    column-gap: 2.5vw; /* Space between columns */
	    padding: 2.5vw 0;
	    width: 100%;
	    display: block;
	    margin: 0 auto;
		border-bottom: solid 2px black;
	}
	
	/* Image container for each gallery item */
	.lbgallery-item {
	    break-inside: avoid; /* Prevent items from breaking in the middle */
	    margin-bottom: 2.5vw; /* Space between images vertically */
	    position: relative;
		overflow: hidden;
	}	
		
	
	
	
	
	
	
	
	
	
	
	
	footer {
		margin-bottom: 3vw;
		/*display: flex;
		align-content: space-between;
		justify-content: space-between;
		padding: 1%;*/
	}
	
	
	
	.footer-elements {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 4vw 2vw;
		width: 100%;
		padding: 2.25vw 0 2.75vw;
		border-bottom: solid 2px black;
		
	}
	
	
	.h3work-footer {
		grid-column: 2 / span 1;
		margin-bottom: -.4vw;
	}
	
	
	.catnav-footer {
		display: block;
		grid-column: 3 / span 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
	}
	
	.catnav-col2-footer {
		display: block;
		grid-column: 3 / span 2;
		align-self: flex-end;
		margin-top: -3.5vw;
		margin-bottom: -.4vw;
	}
	
	.catnav-footer li {
		color: hsla(0,0%,66%,1.00);
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-footer li:hover {
		color: hsla(0,0%,66%,1.00) !important;
		cursor: pointer;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-col2-footer li {
		color: hsla(0,0%,66%,1.00);
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.catnav-col2-footer li:hover {
		color: hsla(0,0%,66%,1.00) !important;
		cursor: pointer;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	
	
	
	
	.footer-list-1 {
		grid-column: 2 / span 1;
		align-self: flex-end;
		margin-bottom: -.4vw;
		
	}
	
	.footer-list-2 {
		grid-column: 3 / span 2;
		align-self: flex-end;
		margin-bottom: -.4vw;
		
	}
	
	
	.footer-list-2 a {
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
	}
	
	.footer-list-2 a:hover {
		color: hsla(0,0%,66%,1.00) !important;
		-o-transition: all ease-in-out .3s;
		-ms-transition: all ease-in-out .3s;
		-moz-transition: all ease-in-out .3s;
		-webkit-transition: all ease-in-out .3s;
		transition: all ease-in-out .3s;
		
	}

	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		
		
	/*start of back to top*/
	
	.top {
		position: fixed;
	  	top: 39.75vh;
	  	right: 2.5vw;
		border: 3px solid black;  /* Border color */
		padding: 8px;  /* Padding to make it a rectangle */
		border-radius: 8px;  /* Rounded corners */
	}
	
	
	/* Increase the hitbox size without affecting visible button */
	.top::before {
		content: "";
		position: absolute;
		top: -20px; /* Adjust this value to control the expansion of the hitbox */
		left: -20px;
		right: -20px;
		bottom: -20px;
		border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
	}
	
	/* Arrow styling using lines */
	.toparrow {
		position: relative;
		width: 28px;
		height: 28px;
	}
	
	/* Top diagonal line (45 degrees for upward pointing) */
	.toparrow::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 3px;
		top: 13px;
		left: -2.5px;
		transform: rotate(-45deg);  /* Arrowhead, top left to bottom right */
	}
	
	/* Bottom diagonal line (-45 degrees for upward pointing) */
	.toparrow::after {
		content: "";
		position: absolute;
		width: 20px;
		height: 3px;
		top: 13px;  /* Positioned just below the first line */
		left: 10.5px;
		transform: rotate(45deg);  /* Arrowhead, top right to bottom left */
	}
	
	/* Arrow stem (regular div) */
	.toparrow .topstem {
		width: 3px;
		height: 20px;  /* Stem height */
		top: 10px;  /* Align it vertically with the center of the arrow */
		left: 12.25px;  /* Center stem horizontally */
	}
	
	.toparrow .topstem::after {
	  content: "";
	  position: absolute;
	  width: 3px;
	  height: 30px;
	  top: -24px; /* Position after original stem */
	  left: 0px;  /* Align with the original stem */
		transform: rotate(90deg);  /* Arrowhead, top right to bottom left */
	
	}

	
	
	
	/*start of bottom*/
	
	.bottom {
		position: fixed;
	  	top: 47vh;
	  	right: 2.5vw;
	  	border: 3px solid black;  /* Border color */
		padding: 8px;
	  	border-radius: 8px;  /* Rounded corners */
	}
	
	
	/* Increase the hitbox size without affecting visible button */
	.bottom::before {
	  content: "";
	  position: absolute;
	  top: -20px; /* Adjust this value to control the expansion of the hitbox */
	  left: -20px;
	  right: -20px;
	  bottom: -20px;
	  border-radius: 8px; /* Ensure the hitbox matches the button's rounded corners */
	}

	/* Arrow styling using lines */
	.bottomarrow {
	  position: relative;
	  width: 28px;
	  height: 28px;
	}
	
	/* Top diagonal line (45 degrees for upward pointing) */
	.bottomarrow::before {
	  content: "";
	  position: absolute;
	  width: 20px;
	  height: 3px;
	  top: 13px;
	  left: -2.5px;
	  transform: rotate(45deg);  /* Arrowhead, top left to bottom right */
	}
	
	/* Bottom diagonal line (-45 degrees for upward pointing) */
	.bottomarrow::after {
	  content: "";
	  position: absolute;
	  width: 20px;
	  height: 3px;
	  top: 13px;  /* Positioned just below the first line */
	  left: 10.5px;
	  transform: rotate(-45deg);  /* Arrowhead, top right to bottom left */
	}
	
	/* Arrow stem (regular div) */
	.bottomarrow .bottomstem {
	  width: 3px;
	  height: 20px;  /* Stem height */
	  top: -1px;  /* Align it vertically with the center of the arrow */
	  left: 12.25px;  /* Center stem horizontally */
	  position: absolute;
	}
	
	.bottomarrow .bottomstem::after {
	  content: "";
	  position: absolute;
	  width: 3px;
	  height: 30px;
	  top: 13px; /* Position after original stem */
	  left: 0.5px;  /* Align with the original stem */
		transform: rotate(90deg);  /* Arrowhead, top left to bottom right */
	
	}

}
	
}