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

@font-face {
	font-family: 'Cantata One'; font-weight: normal; font-style: normal; font-display: swap;
	src: url('/css/ttf/cantataone-regular-webfont.woff2') format('woff2'), url('/css/ttf/cantataone-regular-webfont.woff') format('woff'), url('/css/ttf/cantataone-regular-webfont.ttf') format('ttf');
}
html, body { margin: 0; padding: 0; height: 100%; }
body { background: #E8E7E3 url('/img/bgBody.png'); font-family: 'Cantata One', "Times New Roman", Times, serif; color: #111; font-size: 1em; }
body.modalOpen { overflow: hidden; /*position: fixed;*/ }

/* mobile first! */
.grid { display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto; }
.full { grid-column: span 12; }
.threequarter { grid-column: span 6; }
.half { grid-column: span 6; }
.quarter { grid-column: span 6; }


.clear { clear: both; }
.printOnly { display: none; }
img { border: none; }
h1, h2, h3 { font-family: 'Cantata One', "Times New Roman", Times, serif; font-variant: small-caps; }
a { color: #4f5D75; cursor: pointer; }

header, section#main, footer { margin: 0px auto; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto; }
header { position: fixed; z-index: 1000; grid-template-rows: 65px; /*top: 0px; width: 100%;*/ top: -1px; width: calc(100% + 1px); background: #4e454c; background: linear-gradient(to bottom, #4e454c 0%,#221f22 100%); box-shadow: 0px 5px 5px 3px rgba(232,231,227,1); }
	#headLogo { float: left; grid-column: span 9; /*width: calc(100% - 20px);*/ }
		#headLogo a { display: block; width: 240px; height: 65px; background-image: url("/img/GEMprintingCo.svg"); }

	nav { /*position: relative;*/ grid-column: 12; width: 50px; }
	#mobCart { grid-column: 10; margin: 16px; position: relative; z-index: 991; right: 45px; }
		#mobCart a { display: block; width: 24px; height: 20px; color: #FFF; text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000; text-decoration: none; text-align: center; padding: 0px 0px 9px 5px; }
	#mobCart a, #headCart a { background-position-x: center; background-position-y: center; background-repeat: no-repeat; }
	#mobCart a { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyMCI+PHBhdGggZD0iTTIzLjggNGMtLjUgMS4xLTIuOSA2LjUtMy4yIDcgMCAuMS0uMS4xLS4xLjItLjMuNS0uNi45LTEuOC45SDcuOWMuMi43LjcgMS41IDEuNyAxLjVoOS4zYy4zIDAgLjUuMi41LjVzLS4yLjUtLjUuNUg5LjZjLTEuNCAwLTIuNC0xLjEtMi44LTIuOC0uMi0uOC0yLjctOS4zLTIuOS05LjktLjItLjQtLjctLjctMS4xLS43SC41Qy4yIDEuMiAwIC45IDAgLjdTLjIuMi41LjJoMi4zYy45IDAgMS43IDAgMiAuOXYuMWMuMS4yIDIuMiA3LjcgMi44IDkuOWgxMS4xYy42IDAgLjctLjEuOS0uNCAwLS4xLjEtLjEuMS0uMi4zLS41IDIuNi01LjggMy4xLTYuOS4zLS41LjItLjguMi0uOSAwLS4xLS4yLS4xLS4zLS4xSDcuNGMtLjMgMC0uNS0uMi0uNS0uNXMuMi0uNS41LS41aDE1LjNjLjcgMCAxIC4zIDEuMi41LjIuNS4yIDEuMS0uMSAxLjl6TTkuMyAxNS4yYy0xLjMgMC0yLjMgMS0yLjMgMi4zczEgMi4zIDIuMyAyLjNjMS4zIDAgMi4zLTEgMi4zLTIuMy4xLTEuMy0xLTIuMy0yLjMtMi4zem0wIDMuN2MtLjggMC0xLjQtLjYtMS40LTEuNCAwLS44LjYtMS40IDEuNC0xLjQuOCAwIDEuNC42IDEuNCAxLjQgMCAuOC0uNiAxLjQtMS40IDEuNHptOS41LTMuN2MxLjMgMCAyLjMgMSAyLjMgMi4zIDAgMS4zLTEgMi4zLTIuMyAyLjMtMS4zIDAtMi4zLTEtMi4zLTIuM3MxLTIuMyAyLjMtMi4zem0wIDMuN2MuOCAwIDEuNC0uNiAxLjQtMS40IDAtLjgtLjYtMS40LTEuNC0xLjQtLjggMC0xLjQuNi0xLjQgMS40IDAgLjguNyAxLjQgMS40IDEuNHoiIGZpbGw9IiM5ZjkyNDIiLz48L3N2Zz4="); }

	#toggle { position: relative; top: 3px; right: 0px; z-index: 1000; display: unset; float: right; width: 50px; height: 50px; cursor: pointer; opacity: 0; }
		#toggle:checked ~ #navbar { display: block; min-height: 300px; height: auto; overflow-y: auto; max-height: calc(100vh - 130px); border-bottom: 5px solid #9f9242; }
		
		#toggle + label { position: absolute; top: 13px; right: 15px; color: #FFF; cursor: pointer; }
		#toggle + label:after { content: '\2630'; font-size: 1.7em; font-weight: bold; color: #FFF; }
		#prodToggle + label:after { content: url("/img/prods.png"); }
		#toggle:hover + label { color: #FFF; }
		#toggle:checked + label:after { content: '\24CD'; font-size: 1.7em; }
	/*#overlay { position: absolute; z-index: 999; display: none; width:100%; height: 100%; left: 0; top: 65; background-color: rgba(0,0,0,0.9); }*/
	#navbar { position: absolute; z-index: 1000; display: none; list-style: none; right: 0px; width: 165px; padding-left: 0; margin: 65px 0px 0px 0px; background-color: #232023; float: none; height: 0px; overflow: hidden; transition: height 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); border-left: 5px solid #9f9242; }
		#navbar li { /*position: relative; float: none; height: 50px;*/ }
			#navbar li a { display: block; height: 35px; padding-top: 15px; padding-right: 15px; font-size: 13px; text-align: right; text-decoration: none; color: #FFF; text-transform: uppercase; }
				#navbar li a.current { font-weight: bold; color: #9f9242; text-decoration: underline; }
				#navbar li a:hover { background-color: rgba(255, 255, 255, 0.33); text-decoration: underline; }
				#navbar li a:focus, #navbar li a:hover { /*background: inherit;*/ background-color: rgba(255, 255, 255, 0.33); }
				/*#navbar li:last-child { display: none; }*/

			#headCart { display: none; /*grid-column: 10; margin: 16px; position: relative; z-index: 991; right: 45px;*/ }
				#headCart a { display: block; width: 24px; height: 20px; color: #FFF; text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000; text-decoration: none; text-align: center; padding: 0px 0px 9px 5px; }

			#prodsTop { list-style: none; margin: 0; padding: 0; display: none; height: auto; /*border: 1px solid #ADABA0; box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.35);*/ transition: height 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); }
				#prodsTop li a, #prodTops li ul a { color: #000; height: auto; }

	.prodsList { list-style: none; }
		.prodsList li { height: auto; background-color: #9f9242; border-bottom: 1px solid #807636; border-right: 1px solid #ADABA0; }
		.prodsList li:hover { box-shadow: inset 2px 2px 3px 0px rgba(0, 0, 0, .45); }
		.prodsList li.noHover:hover { box-shadow: none; }
			.prodsList li a { display: block; margin: 0px; padding: 5px; height: auto; font-family: 'Cantata One', "Times New Roman", Times, serif; color: #3D373B; color: #000;  text-decoration: none; font-size: inherit; text-transform: uppercase; }
			.prodsList li:hover a { /*padding: 3px 0px 0px 0px;*/ }
		.prodsList li ul { list-style: none; margin: 0; padding: 0; }
			.prodsList li ul li { background-color: #d9d7d8; border-bottom: 1px solid #B1ADAF; border-right: none; }
				.prodsList li ul li a { font-size: 13px; color: #000; text-shadow: unset; /*padding: 5px 0 5px 5px;*/ }
				.prodsList li ul li:hover a { /*padding: 2px 0px 3px 8px;*/ }
		

section#main { /*this threw a warning in chrome: grid-template-rows: 100%;*/ position: relative; margin: 60px auto 25px 0px; padding: 0px 10px 0px 10px; max-width: 1000px; } /*left margin was auto. need to align left. */
	#prodsLeft { /*width: 310px;*/ max-width: 240px; margin: 15px 15px 0px -11px; padding: 0; /*border: 1px solid #ADABA0; box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.35);*/ }

	

	#content a, #modal a { display: inline-block; text-decoration: none; border-bottom: 3px solid #9f9242; line-height: 1; }

	#content a.zoom { cursor: zoom-in; border-bottom: none; }

	#content p { text-align: justify; line-height: 1.4em; }

#content h1 strong { color: #b7ac64; }
#content h2 { color: #948632; font-size: 24px; text-shadow: 1px 1px 0 #555; margin-top: 0px; }
#content p { text-align: justify; }
	.imgInText { border: 10px solid #FFF; outline: 1px solid #C2BDA1; }
	.imgL { margin: 0px 30px 20px 0px; float: left; }
	.imgR { margin: 0px 0px 20px 30px; float: right; }

	/*SHOP THINGS*/
		.featProd { float: left; margin: 0px 15px 15px 0px; }

		#typeset { position: relative; border: 1px dashed #333; height: 270px; overflow-y: scroll; width: calc(100% - 5px); }
		.fontDisp { width: 100%; max-width: 490px; height: auto; }
		.textCustomLineEntry { width: calc(100% - 19px); max-width: 320px; margin-left: 15px; }
		
		#selDesign { position: relative; }
		#selDesign div { position: relative; display: inline-block; margin: 5px; }
		#selDesign div a { border-bottom: none; padding: 5px; }
	/*.designOptRow label { display: block; }*/
		#selDesign div input[type="radio"] { display: none; }
			#selDesign div input[type="radio"]:checked + a { background-color: #9f9242; } /* The + targets (element) immediately after */
			#selDesign div input[type="radio"]:checked + a::after { position: absolute; bottom: 5px; right: 5px; content: url('/img/icoCheckBlk.png'); }

		#baseColors label, #inkColors label, .napkinBaseColor label { display: inline-block; margin-bottom: 15px; white-space: nowrap; width: 45%; }

#napkinXXXbase { display: none; }
.napkinBaseOpts { border: 1px dashed #000; padding: 10px; margin-bottom: 15px; }
.napkinBaseColor { }

	label.fontPick { position: relative; display: block; height: 50px; margin-bottom: 5px; background-color: #FFF; overflow: hidden; }
	/* set in JS: label.fontPick:checked { text-shadow: -1px -1px 1px #CEC99F, 1px -1px 1px #CEC99F, -1px 1px 1px #CEC99F, 1px 1px 1px #CEC99F; } */
	label.fontPick input { display: none; }
	/*font check was a unicode char. now an img. left: 8px; bottom: 5px; font-weight: bold;  color: #FFF; text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;  */
	label.fontPick span.fontCheck { position: absolute; z-index: 100; left: 0px; top: 23px; display: none; }
	label.fontPick img { position: absolute; z-index: 99; left: 20px; }
	span.fontCheck img { left: 5px; }

/* Deeeee colores! */
.optSelColorBox { float: left; margin-bottom: 5px; margin-right: 5px; }
.optColor, .optBaseColor, .optInkColor { vertical-align: middle; border: 1px solid #000; width: 25px; height: 25px; display: inline-block; font-size: 20px; text-align: center; text-shadow: -1px -1px 1px #FFF, 1px -1px 1px #FFF, -1px 1px 1px #FFF, 1px 1px 1px #FFF; cursor: pointer; }

/* checkout / cart */

/*#content div.editItem a { border-bottom: none; }*/

.wordingOnly { width: 100%; margin-left: 0px; }

.addToCart { 
	color: #FFF; text-shadow: 1px 1px 1px #363035; font-family: 'Cantata One','Times New Roman',Times,serif; font-variant: small-caps; font-size: 24pt; padding: 8px 16px; border-radius: 3px;
	background: #93883b; background: linear-gradient(to bottom, #93883b 0%,#aea461 100%);
}
input[type=submit]:disabled, button:disabled { background: #DDD; background: linear-gradient(to bottom, #DDD 0%,#999 100%); }
.btnCheckout { color: #2a2528; background: #bfd255; background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 50%,#9ecb2d 100%); }

.cartItem { position: relative; background: #FFF; border: 15px solid #FFF; outline: 1px solid #C2BDA1; margin-bottom: 20px; } /* border-right: none; max-width: calc(100% - 45px); */
	.editItem { position: absolute; right: -15px; /*top: -15px;*/ }
  .napkinBaseOpts .editItem { position: unset; right: unset; top: unset; float: right; }
		#content div.editItem a { border-bottom: none; }
	.itemCartTable { width: 100%; /*calc(100% - 35px);*/ }
		.itemCartTable td { vertical-align: top; }
			.cartPrice { float: right; font-weight: bold; }
		.itemCartTable h3 { margin: 0; padding: 0; }
		

.smallText { font-size: .7em; }

/* MODAL WINDOW */
		#modal { z-index: 1001; display: none; padding-top: 100px; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); animation: opac 0.3s; } @keyframes opac{ from{opacity:0} to{opacity:1} }
			a#modalBgClose { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: zoom-out; }
			.modal-content { margin: auto; background-color: #fff; position: relative; padding: 0; outline: 0; width: calc(100% - 30px); max-width: 600px; }
				.modal-close { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; right: 0; top: 0; background: #ccc; padding: 6px 10px; cursor: zoom-out; }
				#modalInner { padding: 20px 30px; }
					#modalInner .thumb { width: 100%; }

footer { position: relative; display: block; bottom: -76px; background: url('/img/footer.jpg') no-repeat #423D41; background-size: cover; padding: 1px 10px 25px 10px; color: rgba(255,255,255,0.47); } /*padding bottom was 1px */
	footer a { color: #9F9242; }
	footer h2, footer h3, footer li { color: #d0c689; text-shadow: 1px 1px 2px #000; }
	footer p { text-align: justify; max-width: 756px; }

	
		#mapPin { position: relative; float: left; display: inline-block; width: 42px; height: 42px;
    	background: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMzQ1NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNDIgNDIiPjxzdHlsZT4uc3Qwe2ZpbGw6IzM2MzAzNX08L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMi4xIDQxLjVsLS4yLS4yYy0uMi0uMi0uMy0uMy0uNy0yLTEuNS01LjgtMy05LjMtNC4zLTEyLjQtMS4xLTIuMS0yLjEtMy43LTIuOS01LjJDMS44IDE4IC41IDE1LjguNCAxMS43YzAtMi43IDEuMS01LjYgMy03LjZDNS43IDEuNiA5IC4yIDEyLjEuMmMzLjIuMSA2LjQgMS42IDguNyA0IDEuOSAyIDMgNC45IDMgNy42LS4xIDQtMS40IDYuMy0zLjYgMTAtLjkgMS41LTEuOCAzLjEtMyA1LjItMS4zIDMuMS0yLjggNi42LTQuMiAxMi40LS40IDEuNi0uNCAxLjgtLjggMS45bC0uMS4yeiIvPjxwYXRoIGlkPSJwYXRoNDMzNy0zXzFfIiBkPSJNMy44IDQuNEMyIDYuMy45IDkuMS45IDExLjdjLjEgNS40IDIuNSA3LjUgNi41IDE1IDEuNCAzLjMgMi45IDYuOCA0LjMgMTIuNS4yLjkuNCAxLjYuNSAxLjcuMS4xLjMtLjcuNS0xLjYgMS40LTUuOCAyLjktOS4zIDQuMy0xMi41IDMuOS03LjUgNi40LTkuNSA2LjUtMTUgMC0yLjYtMS4xLTUuNC0yLjktNy4zLTItMi4yLTUuMS0zLjgtOC40LTMuOFM1LjggMi4yIDMuOCA0LjR6IiBmaWxsPSIjZjE3NDY5Ii8+PGNpcmNsZSBpZD0icGF0aDMwNDkiIGNsYXNzPSJzdDAiIGN4PSIxMi4xIiBjeT0iMTEuOSIgcj0iNC4zIi8+PC9zdmc+");
		}
	#footContact { width: 210px; padding: 10px 0px 0px 0px; text-align: right; }
	#footAbout {  }

@media screen and (max-width: 340px) { #headCart { margin: 16px 5px 16px 3px; } } /* iPhone5 */

@media screen and (max-width: 499px) {
	h1 { font-size: 1.54em; } /*reduces h1 to fit width*/
	/*footer p { display: none; }*/
}

@media screen and (max-width: 730px) {
	#baseColors label, #inkColors label, .napkinBaseColor label { width: 30%; }
	#modal #baseColors label, #modal #inkColors label, #modal .napkinBaseColor label { width: 45%; }
}
	
@media screen and (min-width: 730px) {
/*@media screen and (min-width: 500px) {*/
	#content { /*grid-column: span 4 / 12;*/ }
	#prodsLeft { display: inline-block !important; grid-column: span 3; width: 240px; }
	header { background: #C4C1B6 url('/img/bgHeader.png') repeat-x; }
		/*#headCart, */nav label { display: none; }
	#headCart { display: unset; /*grid-column: 10; margin: 16px; position: relative; z-index: 991; right: 45px;*/ }
	#mobCart { display: none; }
	#navbar { display: inline-block; z-index: 900; overflow: visible; height: 65px; width: unset; margin: 0px 10px 0px 0px; background-color: unset; border-left: none; left: 250px; }
		#toggle + label { display: none; }
	#navbar li { float: left; }
	#navbar li.cart { display: none; }
	#navbar li.navProds { display: none; }
	#navbar li:last-child { display: list-item; }
	#navbar li a { height: 42px; padding: 23px 5px 0px 5px; margin: 0px 5px 0px 5px; font-size: 17px; color: #3D373B; text-shadow: 1px 1px 1px #FFF; text-transform: uppercase; font-family: 'Cantata One', "Times New Roman", Times, serif; }
	#navbar li:first-child a { margin-left: 0px; }
	#navbar li:last-child a { margin-right: 0px; }
	#headCart a { background-image: url("data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDM0Ljk2IDMwLjA5Ij48cGF0aCBkPSJNMjkuMjggMTQuMDljLS41IDEuMS0yLjkgNi41LTMuMiA3IDAgLjEtLjEuMS0uMS4yLS4zLjUtLjYuOS0xLjguOWgtMTAuOGExLjgyIDEuODIgMCAwIDAgMS43IDEuNWg5LjNhLjUuNSAwIDAgMSAwIDFoLTkuM2MtMS40IDAtMi40LTEuMS0yLjgtMi44LS4yLS44LTIuNy05LjMtMi45LTkuOWExLjM2IDEuMzYgMCAwIDAtMS4xLS43SDZhLjUuNSAwIDAgMSAwLTFoMi4zYy45IDAgMS43IDAgMiAuOXYuMWMuMS4yIDIuMiA3LjcgMi44IDkuOWgxMS4xYy42IDAgLjctLjEuOS0uNCAwLS4xLjEtLjEuMS0uMi4zLS41IDIuNi01LjggMy4xLTYuOWExLjI0IDEuMjQgMCAwIDAgLjItLjljMC0uMS0uMi0uMS0uMy0uMUgxMi44OGEuNS41IDAgMCAxIDAtMWgxNS4zYTEuNSAxLjUgMCAwIDEgMS4yLjUgMi41NSAyLjU1IDAgMCAxLS4xIDEuOXptLTE0LjUgMTEuMmEyLjMgMi4zIDAgMSAwIDIuMyAyLjMgMi4yIDIuMiAwIDAgMC0yLjMtMi4zem0wIDMuN2ExLjQgMS40IDAgMSAxIDEuNC0xLjQgMS4zNyAxLjM3IDAgMCAxLTEuNCAxLjQxem05LjUtMy43YTIuMyAyLjMgMCAxIDEtMi4zIDIuMyAyLjI2IDIuMjYgMCAwIDEgMi4zLTIuM3ptMCAzLjdhMS40IDEuNCAwIDEgMC0xLjQtMS40IDEuNDMgMS40MyAwIDAgMCAxLjQgMS40MXoiIGZpbGw9IiM5ZjkyNDIiLz48L3N2Zz4="); }
	#headCart a span { position: relative; right: 5px; bottom: 3px; font-size: 1.25em; }
	#prods {  }
	#baseColors label, #inkColors label, .napkinBaseColor label { width: 23%; }
	#modal #baseColors label, #modal #inkColors label, #modal .napkinBaseColor label { width: 30%; }
	#footContact { display: inline-block; width: 220px; float: left; text-align: right; padding: 20px 20px 0px 0px; }
	#footAbout { display: inline-block; width: calc(100% - 260px); padding-left: 5px; }
}

@media print {
	html, body { background-color: #FFF; background-image: none; color: #000; }
	/*.full { grid-column: span 12; }*/
	.threequarter { grid-column: span 9; }
	.half { grid-column: span 6; }
	.quarter { grid-column: span 3; }
	
	header { position: relative; box-shadow: unset; background: #FFF; background-image: none; }
	/*header { grid-template-rows: 50px; }*/
	section#main { top: auto; }

	h1, h2, h3, h4, h5, h6 { color: #000; text-shadow: none; }
	
	.noPrint { display: none; }
	.printOnly { display: inline-block; }
}