@property --docuBlack {
	syntax: "<color>";
	inherits: false;
	initial-value: #2A2A28;
}
@property --docuBlue {
	syntax: "<color>";
	inherits: false;
	initial-value: #B9D6E6;
}
@font-face {
	font-family: "Rubik Italic";
	src: url("../fonts/Rubik-Italic-VariableFont_wght.ttf");
}
@font-face {
	font-family: 'Work-Sans';
	src: url("../fonts/WorkSans-VariableFont_wght.ttf");
}
@font-face {
	font-family: 'Archivo Black';
	src: url("../fonts/ArchivoBlack-Regular.ttf");
}
html {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: calc(15px + 0.390625vw);
}

body {
	width: 100%;
	margin: 0;
	background-size:cover;
	background-repeat: no-repeat;
	background: white;
	color: #EAEAEA;
	}
        
header {
	width: 100%;
	height: auto;
	overflow: hidden;  
	}
/* __________________Typography____________________________*/

h1 {
    font-family: 'Rubik Italic''Gotham, Helvetica Neue, Helvetica, Arial', 'sans-serif';
    font-size: calc(1rem + 2vw);
    font-weight: 900;
    font-style: italic;
    color: white;
    background: linear-gradient(to right, black, transparent);
    padding: 1% 5%;
	}

h2 {
    font-family:'Work Sans', Sans-Serif;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 50px;
	
	}
h3 {
	font-family: 'Work Sans', Sans-Serif;
	font-size: 1.3rem;
	font-weight: 700;
	font-style: italic;
	}
p, a, li {
    Font-Family: 'Open Sans', Sans-Serif;
	font-size: 1rem;
}

/* -----------------------Navigation----------------------------- */
nav {
	position: fixed;
	width: 100%;
	margin: 0px;
	padding: 0px;
	z-index: 50;
        }
.smalllogo {
	display: inline-block;
	align-self: flex-start;
	float: left;
	max-width: auto;
	max-height: 4em;
	min-width: 10em;
	min-height: auto;
	padding: 10px;
	z-index: 99;
	opacity: 0;
	transition: .5s;
	
}
.nav-bars {
    color: white;
    max-width: 2em;
    background-color: black;
    padding: .1em .55em;
    border-radius: 50em;
    margin: 0 -10px;
	}
.topnav {
    background-color: #B9D6E6;
    background: cover;
	width: 100%;
	min-height: 4.8em;
	overflow: hidden;
	}
.topnav a {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 500;
	margin: 1em;
	}
.topnav li {
    Font-Family: 'Open Sans', Sans-Serif;
    font-size: 1rem;
	list-style-type: none;
	display: inline-block;
	padding-top: .5em;
    
	}
.topnav .icon {
	display: none;
	}
 #myTopnav > ul > li > a.active {
	background-color: var(--docuBlack);
	color: white;
		}

.shadow {
	-webkit-box-shadow: 0px 2px 5px black;
	box-shadow: 0px 2px 5px black;
}

ul {
	display: inline-block;
	float: right;
}
 #myTopnav > ul > li > a {
	text-decoration: none;
	color: var(--docuBlack);
        border-top-color: transparent; 
        border-right-color: transparent; 
        border-bottom-color: transparent; 
        border-left-color: transparent; 
	border-style: solid;
	border-radius: 5px;
	padding: 5px;
	}
#myTopnav > ul > li > a:hover {
	border-radius: 5px;
	padding: 5px;
	height: 0%;
	width: 0%;
	animation-name:borderDraw;
	animation-duration: .25s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	transition-timing-function: ease-in;
}


@keyframes borderDraw {
   0% { 
        width: 0%; 
        height: 0%; 
        border-top-color: black; 
        border-right-color: transparent; 
        border-bottom-color: transparent; 
        border-left-color: transparent; 
    } 
 
    35% { 
        width: 50%; 
        height: 0%; 
        border-top-color: black; 
        border-right-color: black; 
        border-bottom-color: transparent; 
        border-left-color: transparent; 
    } 
 
    70% { 
        width: 100%; 
        height: 50%; 
        border-top-color: black; 
        border-right-color: black; 
        border-bottom-color: black; 
        border-left-color: transparent; 
    } 
	    100% { 
        width: 100%; 
        height: 100%; 
        border-top-color: black; 
        border-right-color: black; 
        border-bottom-color: black; 
        border-left-color: black; 
    } 

}

figure p {
	float: right;
	margin-top: 60px;
}
	/* ----------------------Branding------------------------------  */	

.brand {
	display: flex;
	background-image: url("../images/Background.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: auto;
	padding: 30px;
	min-height: 70px;
	border-bottom: 1rem solid;
	border-bottom-color: black;
	}
		
.brand img {
	display: flex;
	width: auto;
	height:11em;
	z-index: 99;
	margin: -1px;
	}

#Hero {
	max-height: 25rem;
	min-height: 20rem;
    /* background-color: darkred; */
	background-image: url("../images/Vivid Color Kit.png");
	background-size: cover;
	padding: 1% 4% 8%;
	border-bottom: 1rem solid;
	overflow: hidden;
	}
		
 .HeroText	{
	text-align: center;
	/*margin: 5% auto; */
	max-height: auto;
	max-width:auto;
	min-height: auto;
	min-width: auto;
	/*background-color: rgba(0,0,0,.3); */
	/*padding: 2% 8%;*/
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	color: white;
	font-display: block;
	font-style:oblique;
	font-size: 4.75em;
	text-shadow: 0px 1px 3px black;
	}

/* -------------------------------------BRANDING END-------------------------------------*/

aside {
    text-align: center;
    margin: 30px 0px;
}
aside p {
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    text-align: center;
    margin-top: 1em;
	font-size: .75em;
}
#Main {
	display: flex;
	flex-direction: column;
	flex-shrink:2;
	font-family: 'Open Sans', Sans Serif;
	width: auto;
	height: auto;
	line-height: 1.75em;
	background-color:  hsla(150,0%,92%,1.00);
	margin: 10px;
	border-radius: 15px;
	color: var(--docuBlack);
	padding: calc(8px + .085vw);

}
#Main p {
	padding: calc(8px + 1.5625vw);
	line-height: 170%;
	

}
#Content {
	margin: auto;
	height: auto;
	width: auto;
	background-color: white;
	padding-bottom: 10px;
	color: var(--docuBlack);
}
#Content h1{
	margin: 10px 0px;
}
#Content h2 {
    margin: 10px 0;
	padding-top: 20px;
	position: relative;
	text-align: center;

}

#bleeds {
	text-align: left;
    padding: calc(2em + 3.5vw);
}

/*---------Home Page Featured Services---------*/
li {
    Font-Family: 'Open Sans', Sans-Serif;
}
#Services  {
	display: flex;
	flex-flow: row wrap;
	flex: 1 1 100%;
	justify-content: center;
	position: relative;
	background-color: white;
	height: auto;
	max-height: auto;
	margin: 0px;

		}
#Services .in-view {
	transform: none;
	opacity: 1.0;
		}
.fade-up {
   transform: translateY(50px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 1s;
   transition-timing-function: linear;

}
div h1{
	margin-left: 0px;
}

#Services h2 {
    margin: 10px 0;
	position: relative;
	margin-bottom: -15px;
	text-align: center;

}
.white {
	color: white;
}
.black {
	color: #171717;
}
.service-description {
	display: flex;
	width: 50%;
	flex-direction: row;
}
.listbox {
    display: flex;
    flex-flow: row nowrap;
    text-align: left;
    flex: 1 2 100%;
    width: 100%;
    margin-top: 30px;
}

.service-description > ul > li {
	margin: 0px;
	line-height: 1.75rem;
}

.bleeds > div > a,
.embellishment > div > a,
.wideformat > div > a {
    display: flex;
    position: absolute;
    bottom: 3%;
    right: 20px;
    justify-content: center;
    align-items: center;
	text-decoration: none;
	color: var(--docuBlack);
    width: 6.85em;
    height: .7em;
    border: #171717 solid;
    border-radius: 25px;
    margin-right: 20px;
    margin-top: 20px;
	margin-left: 10px;
	padding: 8px 20px 8px 0px;
		z-index: 10;

}
.bleeds > div > a > i,
.embellishment > div > a > i,
.wideformat > div > a > i {
	position: absolute;
	margin-left: 3.55em;
	padding-left: 75px;
}
.bleeds > div > a:hover i,
.embellishment > div > a:hover i,
.wideformat > div > a:hover i {
	padding-left: 3px; 
	animation-name:  bobRight;
	animation-duration: 1.1s;
	animation-direction: normal;
	animation-iteration-count: infinite;
}

@keyframes bobRight {
	0% {
		padding-left: 75px;
	}
	15% {
		padding-left: 85px;
	}
	30% {
		padding-left: 75px;
	}
	55% {
		padding-left: 85px; 
	}
	100% {
		padding-left: 75px;
	}
}

@keyframes shake {
	0% {
		transform: rotate(10deg);
	}
	50% {
		transform:  rotate(0deg);
	}
	100% {
		transform: rotate(-5deg);
	}
}
.businessCards {
	display: flex;
	position: relative;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: column;
	flex: 1 1 100%;
	box-sizing: content-box;
	background-color: #B9D6E6;
	padding: 5% 60px;
	margin: 10px;
	max-height: 600px;
	color: #171717;
}
.businessCards > img {
	width: 45%;
	height: auto;
	flex: 0 1 300px;
	margin-right: 5%;
}

.wideformat {
	display: flex;
	position: relative;
	flex: 1 3 100%;
    box-sizing: content-box;
    flex-flow: column nowrap;
    padding: calc(8px + 1.5625vw);
    background-color: #B9D6E6;
    margin: 10px;
	color: #171717;
    height: auto;
	z-index: 1;
}
.wideformat div.service-description {
    width: 60%;
}

.finishing {
	display: flex;
	position: relative;
    flex-flow: column nowrap;
	align-items: center;
	flex: 0 1 50%;
    box-sizing: content-box;
    background-color: #B9D6E6;
	padding: 60px;
	margin: 10px 10px 20px;
}
.row {
	display: flex;
	flex-flow: row nowrap;
	flex: 1 1 100%;
}
.descriptionblack {
	display: flex;
	position: relative;
	flex-flow: column nowrap;
    align-items: center;
	flex: 0 1 50%;
	box-sizing: content-box;
	background-color: #2A2A28;
	color: white;
	height: auto;
	padding: calc(8px + 1.5625vw);
    margin: 10px;
}
.finishing > img,
.descriptionblack > img {
    width: 100%;
    height: auto;
    border-radius: 5%;
    margin-bottom: 35px;
}

.descriptionblue {
	display: flex;
	flex: 0 3 100%;
    flex-flow: column wrap;
    justify-content: center;
	height: 350px;
	margin: 10px;
    background-color: #B9D6E6;
	} 
.descriptionblue > .service-description {
    max-width: 30%;
}
.images {
    position: relative;
    display: flex;
    flex: 1 3 50%;
    flex-flow: column nowrap;
	width: 70%;
	align-self: center;
}
div.images{
    display: flex;
    flex-flow: column wrap;
	flex: 1 3 50%;
    max-height: 30px;
    margin-left: -50px;
}
    
		/*---------Home Page Featured Services End---------*/
#HeroBleeds {
	max-height: 23rem;
	box-sizing: content-box;
    /* background-color: darkred; */
	background-image: url("../images/Bleeds for Print Banner.png");
	background-size: contain;
	background-repeat: no-repeat;
	padding: 1% 4% 8%;
	}
.HeroText-Bleeds {
	position: relative;
	font-family: 'Archivo Black', sans-serif;
	font-size: calc(3rem + 3.95vw);
	text-shadow: 0px 0px 30px black;
	text-align: center;
	margin-top: 20%;
	
}

.grid {
    display: grid;
    grid-template-rows: 44rem 7.5rem;
    grid-template-columns: 5% 25% 25% 25% 5%;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: center;
}
.gridbleeds {
	display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: center;
}
.borderBleed {
	display: inline-flex;
	position: absolute;
	box-sizing:border-box;
	border: solid #000000;
	animation-name: borderBleed;
	animation-duration: .75s;
	animation-iteration-count: 2;
	animation-direction: reverse;
}

@keyframes borderBleed {
	50% {
		border-width: 11px;
		opacity: 1;

	}
}

.green {
	border: solid #3C9149;
	width: 307px;
	height: 167px;
	margin-top: 22px;
	margin-left: 22px;
	animation-delay: 2.5s;
    border-width: 5px;
}
.red {
	border: solid #F8059E;
	width: 332px;
	height: 192px;
	margin: 9px;
	animation-delay: 1s;
    border-width: 5px;

}
.black {
	border: solid #000000;
	width: 350px;
	height: 210px;
    border-width: 5px;
}

#Content .borderPump {
	transform: none;
	border: 7px solid #000000;
}
.outside {
    margin: 10px;
    max-width: 350px;
    flex: 1 1 auto;

}
.cut {
    margin: 10px;
    max-width: 350px;
    flex: 1 1 auto;


}
.safe {
    margin: 10px;
    max-width: 350px;
    flex: 1 1 auto;


}
 .gridbleeds img {
     max-width: 350px;
     flex:1 1 auto;
}
/*-------------------------------Large Format Printing------------------------------- */

#Hero-BigPrints {
	display: grid;
	grid-template-rows: calc(5rem + 4.5vw) calc(5rem + 4.5vw);
	grid-template-areas: 
		"big"
		"prints";
	grid-auto-flow: column;
	grid-row-gap: 0px;
	background: radial-gradient(at 50% 50%, #3E3A39 30%, #171717 80%);
	background: cover;
	box-sizing: content-box;
	max-height: calc(20em + 5.5vw);
	width: 100%;
	margin: 0px;
	padding: 20px 0px;
	text-align: center;
	align-items: center;
}
#Hero-BigPrints p {
	position: relative;
	font-family: 'Archivo Black', sans-serif;
	font-size: calc(4em + 5.5vw);
	text-shadow: 0px 0px 30px black;
}
#Hero-BigPrints p.big {
	grid-area: big;
	font-size: calc(6em + 5.5vw);
	letter-spacing: calc(40px + 5.5vw);
	margin-right: calc(-50px - 4.5vw);
	animation: 15s 1 alternate big;
}
@keyframes big {
	from {
		font-size: calc(4em + 5.5vw);
		letter-spacing: normal;
		margin-right: 0px;
	}
	to {
		font-size: calc(6em + 5.5vw);
		letter-spacing: calc(40px + 5.5vw);
		text-align: center;
		margin-right: calc(-50px - 4.5vw);
	}
}
#Hero-BigPrints p.prints{
	grid-area: prints;
}

.retractables > img {
	min-width: 200%;
}
.photos {
    display: flex;
	position: relative;
    flex: 1;
    flex-shrink: 2;
    align-items: center;
	text-align: center;
    flex-wrap: wrap;
	flex-direction: row;
    justify-content: space-around;
}
.photos > img {
    max-width: 75%;
    min-height: auto;
}
.big-prints {
	width: auto;
	box-sizing: content-box;
	background-color: white;
	border-radius: 15px;
    margin: 20px;
    font-size: 1.25rem;
	color: #171717;
	
}
.big-prints p {
	width: auto;
	font-size: 1.25rem;
	color: #171717;
	margin: 0 10% 2%;
	background-color: white;
	padding: calc(8px + 1.5625vw);
	border-radius: 10px 10px 0 0;
	opacity: .75;
}

.big-prints li {
	font-size: 1.25rem;
}
table {
    padding: 0 10px;
    max-width: 400px;
	min-height: 200px;
	border-spacing: 10px;
	line-height: 20px;
    Font-Family: 'Open Sans', Sans-Serif;
    font-size: .8rem;

}
.table {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	padding-bottom: 30px;
}
table h3 {
	width: auto;
	margin-bottom: 9px;
	text-align: left;
}	
td {
    width:auto;
    padding: 0 10px;
}
	#banners.photos > img {
	max-width: calc(750px * 1.65vw);
	}

.banners {
		background: url("../images/Cement Wall.png");
		background-repeat: no-repeat;
		background-size:cover;
	}
.flex-grid {
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
	padding-bottom: 30px;
	box-sizing: content-box;
}
.canvasBackground {
		background-image: url("../images/canvas on the mantel.png");
		background-position: bottom;
		background-size: cover;

}
#banner > img {
	max-width: 1200px;
}
.posters {
	display: grid;
	position: relative;
    grid-template-rows: 20em;
    grid-template-columns: 3(1fr);
	grid-auto-flow: column;
	grid-gap: 1em;
	align-items: center;
	margin: 30px calc(10px + 1.5vw);
}
.posters > img {
	width: 85%;
    object-fit: contain;
}
.choices {
	margin: auto;
	width: auto;
	max-width: 750px;
	min-height: 250px;
	align-self: center;
}
.choices > ul {
	width: auto;
	margin: 10px 10px;
}
.caption {
	display: flex;
    position: relative;
	flex-flow: wrap row;
	Font-Family: 'Open Sans', Sans-Serif;
	align-self: flex-end;
    font-size: calc(12px + 0.390625vw);
	max-width: 425px;
	min-width: auto;
	text-align: left;
    font-style: italic;
}

.box-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
  gap: 1.5rem;
  justify-items: center;
  margin: auto;
  padding: 0;
}
.box-grid > figure > img {
	width: calc(10em + 1.9vw);
	align-content: center;
}
/*-------------------------------End Large Format Printing---------------------------*/
/*-------------------------------EMBELLISHMENT PRINT DESIGN--------------------------*/
.designgrid {
	display: grid;
	max-width: 80rem;
	grid-template-rows: auto;
	grid-column-gap: 10px;
	padding: 0 0 40px;
	margin: 15px auto;
	justify-content: center;
	grid-template-columns: 20% 20% 20% 20%;
}
.designgrid img {
	display: grid;
	grid-column: 1 / span 4;
	justify-self: center;
}

.spotcolors {
	background-color: white;
	width: auto;
	border-radius: 15px;
	font-size: 1.5em;
}
.usingspots {
	background-image: url("../images/Woman with Mac.png");
	background-size: cover;
	min-height: 400px;
	text-align: left;
}
.designgrid.usingspots > p {
    color: #ffffff;
	width: 35%;
    text-shadow: 2px 2px 1px black;
    margin-left: -40px;
	}
.designgrid.usingspots > h2 {
	width: auto;
    color: #ffffff;
    text-shadow: 2px 2px 1px black;
    margin-left: -40px;
	}

.designgrid.spotcolors > ul {
    grid-column: 1 / span 4;
    list-style-image: url("../images/check.svg");
    font-size: 22px;
}
.designgrid.spotcolors.usingspots > p {
	background-color: rgba(0,0,0,.35);
	padding: 10px;
	border-radius: 15px;
}

.SWhite {
	background-color: yellow;
	grid-row: 3;
	grid-column: 1;
	text-align: center; 
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	line-height: 1.5em;
	padding: 30px;
	box-shadow: 5px 5px 0 0 lightgray;
}
.SClear {
	background-color: #37B9F5;
	grid-row: 3;
	grid-column: 2;
	text-align: center;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	line-height: 1.5em;
	padding: 30px;
		box-shadow: 5px 5px 0 0 lightgray;
}
.SSilver {
	background: linear-gradient(to top left, silver, #e8e7e3, silver);
	grid-row: 3;
	grid-column: 3;
	text-align: center;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	line-height: 1.5em;
	padding: 30px;
	box-shadow: 5px 5px 0 0 lightgray;
}
.SGold {
	background: linear-gradient(to top left, #E5AF00, #ffe699, #E5AF00);
	grid-row: 3;
	grid-column: 4;
	text-align: center;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	line-height: 1.5em;
	padding: 30px;
	box-shadow: 5px 5px 0 0 lightgray;

}
.designgrid p {
	font-size: 1.25rem;
	color:darkslategray;
	grid-column: 1 / span 4;
	grid-row: 2;
}
.designgrid h2{
	grid-column: 1 / span 4;
	grid-row: 1;
}
.intro {
	font-size: 1.75em;
	font-weight: 600;
	color:darkslategray;
	grid-column: 1 / span 4;
	padding: 5% 10% 0;
	text-align: center;
}
/*----------------------------------TIPS AND TRICKS LIST-------------------------*/

#helpgrid{
	display: grid;
	grid-template-areas: 
		"bleed embellishment"
		"filetypes filetypes";
	grid-template-rows: auto;
	grid-template-columns: 2;
	border-radius: 15px;
	line-height: 1.5em;
	padding: calc(8px + 1.vw);
	box-sizing: content-box;
}
#helpgrid h2 {
    text-align: center;
	padding: 0px 10px;
}
#helpgrid h3{
	margin: 1%;
}

#helpgrid p {
	margin: 0px;
}

.bleeds {
	position: relative;
	color: #171717;
	width: auto;
	background-color: #ffffff;
	border-radius: 15px;
	box-sizing: content-box;
	margin: 10px;

}
.embellishment > p,
.bleeds > p {
	height:200px;
}
#helpgrid > .bleeds > p {
	margin-top: -30px;
}
.embellishment
 {
	position: relative;
	color: #171717;
	 width: auto;
	margin: 10px;
	background-color: #ffffff;
	border-radius: 15px;
	box-sizing: content-box;
}
*.filetypes{
	grid-area: filetypes;
	position: relative;
	margin: 10px;
	color: #171717;
	background-color: #ffffff;
	border-radius: 15px;
}

#helpgrid > div > .bleeds {
	grid-area: bleed;
}
#helpgrid > div > .embellishment {
	grid-area: embellishment;
}
.bleeds-header {
	min-height: 300px;
	height: fit-content;
	margin: 0px 50px;
	border-radius: 15px 15px 0px 0px;
}
.embellishment-header > img {
	border-radius: 15px 15px 0px 0px;
	width: 100%;
}
.bleeds-header > img {
	width: 100%;
}
.embellishment-header {
	border-radius: 15px 15px 0px 0px;
	min-height: 300px;
	height: fit-content;
	margin: 0px 0%;
}

/* --------------Seasonal------------------*/
#seasonal {
	height: auto;
	width: auto;
	padding: 6% 1%;
	background: #F2EECE;
	align-content: center;

}
.seasonalgrid{
	display: grid;
	max-width: 90%;
	grid-template-columns: 45% 45%;
	grid-template-rows: auto;
	grid-column-gap: 30px;
	margin: auto;
	padding-left: 10%;
}
.cards {
    max-height: 80rem;
    max-width: 50rem;
    background-image: url("../images/Red Foil Background copy.png");
    grid-column: 1;
    padding: 30px;
}
.envelopes {
    max-height: 80rem;
    max-width: 50rem;
    background-image: url("../images/Green Foil Background.png");
    grid-column: 2;
    padding: 30px;
}

#seasonal h1{
    font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    color: #D4A137;
    background: none;
    margin: 0;
    text-align: center;
    animation: none;
    line-height: 4rem;
    border: solid .25rem #D4A137;
}
#seasonal h2{
    font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    color: #D4A137;
    font-size: 1.75rem;
    background: none;
    margin: 0;
    text-align: center;
}
#seasonal p{
    font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    color: #D4A137;
    font-size: 1.75rem;
    background: none;
    margin: 0;
    text-align: center;

}
#vacation{
	display: block;
	flex-flow: column;
	flex-wrap: nowrap;
	flex-shrink: 3;
	text-align: center;
	color: #262626;
	font-size: 2em;
	font-weight: 500;
	width: auto;
	max-height: content;
	margin: 10px 0px 0px;
}
.closed {
    font-family: 'Rubik', 'Gotham, Helvetica Neue, Helvetica, Arial', 'sans-serif';
    font-size: 1.5em;
    font-weight: 900;
    font-style: italic;
	margin: -30px 0px;
}
#vacation img {
	max-width: 900px;
	width: 40%;
	height: auto;
	margin: 10px 0px -10px 0px;
} 

/* ----------Contact Us----------------*/
#contact{
	display: flex;
	width: auto;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
	text-align: center;
	text-justify: center;
	z-index: 0;
}
#contact-hero {
	display: grid;
	grid-template-columns:1;
	grid-template-area: 
		"call" 
		"type" 
		"mail";
	grid-auto-flow: row;
	background: radial-gradient(at 50% 50%, #3E3A39 30%, #171717 80%);
	background: cover;
	max-height: calc(20em + 5.5vw);
	width: auto;
	margin: 0px;
	padding: 30px 0px 30px 0px;
	text-align: center;
	justify-content: center;
	height: auto;
}
.container {
	display: flex;
	flex-direction: column;
	width: max-content;
	align-items: center;
}

.call, 
.text,
.mail {

	font-family: 'Archivo Black', sans-serif;
	font-size: calc(1em + 5.5vw);
	text-shadow: 0px 0px 30px black;
	margin: 0px;
}
.call {
	grid-area: call;
	opacity: 1;
	animation-duration:.07s;
	animation-name: call-shake;
	animation-delay: .25s;
	animation-iteration-count: 6;
}


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

}
	@keyframes call-shake {
		1% {
		transform: rotate(4deg);}
		50% {transform: rotate(-4deg);}
		100% {transform: rotate(4deg);
		}}
@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes fade-out {
	from {opacity: 1;}
	to {opacity: 0;}
}
.text {
	grid-area: type;
	border-right: .15em solid ; /* The typwriter cursor */
	overflow: hidden;
	width: auto;
	opacity: 0;
	/* The typing effect */

  display: inline-block;
  /*border-right: 0.15em solid white; /* Cursor effect */
  animation: typing 1s steps(7, end) forwards,
	  blink-caret 1s step-end infinite ;
	animation-delay: 1s;

}
@keyframes typing {
	0% {
		opacity: 1;
	}
	100% {opacity: 1;}
  from { width: 0 }
  to { width: 100%;}
}


/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: white; }
}
	@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes fade-out {
	from {opacity: 1;}
	to {opacity: 0;}
}

.mail {
	grid-area: mail;
	margin-left: -1000%;
	width: auto;
	 transform:skew(20deg);
white-space: nowrap;
	animation: e-mail 1.215s forwards 2.5s;
}
@keyframes e-mail {
  0% {
	  margin-left: -1000%;
	  transform: skewX(-30deg);
  }
	50% {
		transform: skewX(-10deg);
	}
	97% {
	 transform: skewX(20deg);

	}

	100% 
	{margin-left: 0px;
			transform: none;}

}
#hours {
	display: block;
    width: auto;
	height: auto;
	background-color:  hsla(150,0%,92%,1.00);
	border-radius: 5px;
	font-size: calc(2rem - .625vw);
	font-weight: 500;
	text-align: center;
	padding: 20px;
	margin-top: 20px;
}
iframe{
	width: 75%;
	min-height: 375px;
	border: transparent;
	z-index: 1;
}
.address,
.email,
.phone {
    box-sizing: content-box;
	background-color:  hsla(150,0%,92%,1.00);
	width: 50%;
	max-height: auto;
	flex: 0 0 150px;
	margin-top: 20px;
    border-radius: 5px;
	}
		

/* ----------Footer----------*/

.footer {
	display: grid;
	grid-template-columns: 8fr minmax(min-content, 50px) minmax(min-content, 50px) 8fr;
	box-sizing: border-box;
    background-color: #171717;
	width: 100%;
	height: auto;
	border-style: none;
	color: #ffffff;
	padding:  30px;
}
.footer a {
	color: #ffffff;
	height: auto;

}
.footer p {
	background-color: inherit;
	grid-column: 1 / 5;
	text-align: center;
}
.x {
	grid-row: 1;
	grid-column: 2;
	text-align: center;
}
.in {
	grid-row: 1;
	grid-column: 3;
	text-align: center;
}

@media screen and (max-width : 1275px ){
	#myTopnav > ul > li > a:hover {
	animation: none;
	width: auto;
	}
    .topnav a.icon {
    margin-top: -35px;
    margin-bottom: -10px;
    margin-right: 30px;
    display: block;
	z-index: 99;
  }
.topnav a {
    display: none;
	
    }
.topnav.responsive .icon {
	position: absolute;
    right: 0px;
    top: 0px;
	}
  nav {
    display: block;
    width: 100%;
	z-index: 98;
    list-style-type: none;
	  
    }
  .topnav li {
    list-style-type: none;
    display: block;
	}
  .topnav.responsive a {
    display: block;
    text-align: center;
	height: auto;
  }

#Content h1{
	margin-left: 0px;
	}
	
	.HeroText {
		font-size: 3.0rem;
		text-align: center;

	}
	#Hero {
		max-height: auto;
		padding: 1%;
	}

.table1 {
    margin-left: 30%;
    width: 100%;
}
.tableMini {
    margin: 0px 0px 0px -200px;
}


#vacation img {
	width: 120%;
}
	
	.bleeds-header {
		margin: 0px 0px calc(-30px + .00016vw);
	}

}
@media screen and (max-width: 1024px){
    
    /* INDEX - FEATURED SERVICES */
#Services{
    flex-flow: column;
	width: 100%;
	margin: 0px;
}
	.businessCards {
		flex-flow: column nowrap;
        padding: 20px 20px 40px 20px;
        height: 950px;
		color: #171717;

	}
	.businessCards > img {
        align-self: center;
        order: -1;
    }
	.service-description {
		width: 100%;
	}

.descriptionblack,
.finishing, 
.wideformat {
    flex-flow: column nowrap;
    }
    .finishing {
        width: 100%;
    }
div.images > img {
    flex-flow: column;
 
    }
	.posters {
	display: grid;
	top: -50px;
    grid-template-columns: 2fr 2fr;
	grid-auto-flow: row;
	grid-row-gap: 20px;
}
	.posters img {
		width: 80%;
	}
	.vinyl {
		grid-column: 1 / 3;
	}
			.box-grid {
		display: flex;
		flex-flow: column wrap;
		align-content: center;
		margin: auto;
		text-align: center;
	}
#helpgrid h3{
	margin: -15px 0% 10px;
	
}
	.bleeds-header {
		margin: 0px 0px calc(-60px + .5086vw);

	}
	.embellishment-header {
		margin-bottom: -25px;
	}
}
@media screen and (max-width: 850px){
	
.topnav a {display: none;
    }
.topnav a.icon {
	margin-top: -35px;
    margin-right: 30px;
    float: right;
    display: block;
	z-index: 99;
  }
	
	/** index - Featured Services Page **/
	.row {
		flex-flow: column nowrap;
	}
		.posters img {
		width: 95%;
	}

    .service-description {
        width: 100%;
        margin-bottom: 30px;
    }
#Content h1{
	margin-left: 0px;
	}

.HeroText {
	font-size: 2.5rem;
	}
	
#helpgrid {
    display: block;
	}

.topnav.responsive {position: relative; padding-top: 30px}

    
.active {
    font-weight: 700;
    border-bottom: none;

    }
    
#Hero {
    max-height: auto;
    padding-top: 18px;
	}
.brand img {
    margin: .02em 0em;
	}

	.grid {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 400px repeat(3, 120px);
        grid-row-gap: 5px;

	}

	
	.HeroText-Bleeds {
		font-size: calc(2rem + 3.95vw);

	}

	.gridbleeds img {
		margin: 5px;	}
	.outside {
		grid-row: 1;
		grid-column: 1/ span 3;
	}
	.cut {
		grid-row: 2;
		grid-column: 1/ span 3;
			}
	.safe {
		grid-row: 3;
		grid-column: 1/ span 3;
	}
	.black {
		margin: 5px;
	}
	.red {
		margin: 13px;
	}
	.green {
		margin: 27px;
		animation-delay: 0s;
	}
.SClear, .SGold, .SSilver, .SWhite {
	font-size: 70%;
}
	.designgrid.spotcolors > p {
		width: auto;
		padding: 20px 0px;
	}
.designgrid.usingspots > p {
	width: 45%;
}
table {
    font-size: .9rem;
    margin-left: -10px;
    width: 110%;
}
.table2 {
    font-size: .9rem;
    width: 90%;
    margin-left: 50px;
}
.tableMini {
    font-size: .9rem;
    width: 90%;
    margin-left: 20px;
}


#vacation img{
	width: 90%;
	height: auto;
	margin-bottom: -20px;
}

#helpgrid{
	grid-template-areas: 
		"bleed"
		"embellishment"
		"filetypes";
}
.bleeds-header > img {
	width: 100%;
	height: auto;
	}
.bleeds-header {
	margin-bottom: -25px;
	}

}
@media screen and (max-width: 540px){	
    

    /* -------------INDEX - FEATURED SERVICES ----------*/
    
    .descriptionblack {
        height: auto;
    }
    .listbox {
        height: auto;
    }
	#Content h1{
		margin-left: -7px;
	}


	div h1{
		width: 88%;
	}
    .brand img {
	    display: flex;
	    width: auto;
	    height:11em;
	    z-index: 99;
	    margin: 1.5em auto;
	}
    .brand {
	    min-height: 100px;
	    padding: 5px 0px;
	}
	
	#HeroBleeds {
		display: grid;
		max-height: 100%;
		background-image: url("../images/Bleeds for Print 375px.png");
		text-align: center;
	}
	.HeroText-Bleeds {
		max-width: 80%;
		margin-top: calc (10px + 4vw);
		padding: 100px 100px 200px;
	font-size: calc(1.5rem + 3.95vw);
	}

	
    .HeroText {
		font-size: 2rem;
	    padding: 20px 20px;
	}
    #Hero {
		padding: 12px 5px;
		max-height: 280px;
	}
	.images{
		height: 260px;
	}
    #button{
        display: block;
        position: relative;
        background-color: gray;
        padding: 2px;
        height: auto;
        margin:  10px auto 30px;
        z-index: 50;
    }
    #button2{
        display: block;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: .75em;
        color: white;
        border: thin;
        border-style:solid;
        border-color: white;
        margin: 3px;
        padding: 5px;
        text-align: center
    }
    
			
	h2 {
    	font-weight: 900;
	}
	.designgrid{
		padding: 0px;

	}
	.spotcolors {
		padding: 10px 0px;
	}
	.designgrid{
		grid-row-gap: 10px;
	}

	.designgrid img{
		max-width: 25rem;
	}
	.SClear, .SGold, .SSilver, .SWhite {
	    font-size: 60%;
}
    .SWhite {
		grid-column: 1 / span 2;
		padding: 15px;
		box-shadow: 5px 5px 0 0 lightgray;
	}
	.SClear {
		grid-column: 3 / span 2;
		padding: 15px;
		box-shadow: 5px 5px 0 0 lightgray;

	}
	.SSilver {
		grid-row: 4;
		grid-column: 1 / span 2;
		padding: 15px;
		box-shadow: 5px 5px 0 0 lightgray;

	}
	.SGold {
		grid-row: 4;
		grid-column: 3 / span 2;
		padding: 15px;
		box-shadow: 5px 5px 0 0 lightgray;
	}
    .designgrid.usingspots p {
	    width: 100%;
	    margin: -10px -10px 30px;
        grid-row: 3;
        grid-column: 1 / span 4;
}
    .designgrid.usingspots h2 {
	    width: auto;
	    margin-left: 5px;
}

	
	/*. FEATURED SERVICES ________*/
    .wideformat {
        min-height: 400px;
    }

	.listbox {
		display: flex;
		flex: 1 1 100%;
		flex-flow: column nowrap;
		position: relative;
		width: 100%;
		height: auto;
		text-align: left;
	}
    .businessCards > img {
        width: 80%;
        height: auto;
    }
	.service-description {
		width: 100%;
	}
	.service-description > ul > li {
		margin-left: -20px;
		margin-right: -5px;
	}
	.spotcolors {
		border-radius: 0px;
	}
    .spotcolors p {
        font-size: 1rem;
        width: auto;
        margin: 0px 30px;
    }

	.spotcolors h2 {
		max-height: 3rem;
		margin: 0 30px;
		text-align: center;
		
	}
    table h3 {
        font-size: 1.25rem;
        font-weight: 900;
    }
    .table1 {
        grid-row: 4;
        grid-column: 1 / span 4;
        margin: -20px 0px;
        width: 100%;
    }
    .table2 {
        grid-row: 5;
        grid-column: 1 / span 4;
        margin: 20px 20px;
        width: 100%;
    }
    
.tableMini {
    grid-column: 1 / span 4;
    font-size: .9rem;
    width: 100%;
    margin: 0px 0px 0px -90px;
    grid-row: 6;

}
	
	/*=======================Large Format=======================*/
	
		.canvas img {
		max-width: 100%;
		margin: 0;
	}

/*  ==========================ABOUT US==========================*/
#main {
    margin: 20px 20px;
    
    }
	#vacation img {
		display: block;
		width: 95%;
		margin: 5px 0px -10px;
	}
	/*  ==========================PRINT HELP==========================*/

#helpgrid > .bleeds .bleeds-header{
		margin: 0px 0px calc(45px - 23.0506vw);
	}
	#helpgrid > .bleeds {
		height: 560px;
	}
	
	#helpgrid > .embellishment > h2 {
		margin-top: 0px;
	}
	    /**---------------------------Contact Us-------------------**/
    .address,
    .email,
    .phone {
        width: 100%;
        border-radius: 0px;
    }

}

@media screen and (max-width : 440px ){
	iframe {
		width: 370px;
	}
	.brand img {
        position:relative;
        display: flex;
        width: auto;
        height: 7.5em;
        z-index: 99;
		margin: 2.4em auto;
		}
	.smalllogo {
		max-height: 3em;
		margin-top: 10px;
	}
	.brand {
		border-bottom: .75rem solid #000000;
	}

	.HeroText	{
			font-size: 1.6em;
			padding: 2rem 1rem;
			margin: .1rem;
		}
	#Hero {
		min-height: 15rem;
		padding: 1% 1%;
		border-bottom: .5rem solid;
		}
    /**---------------------------End of Contact Us-------------------**/

    .topnav a {display: none;
        z-index: 98;
    }
    
    .topnav a.icon {
	    margin-top: -32px;
        margin-right: 30px;
        float: right;
        display: block;
	    z-index: 98;
  }
	.topnav {
		z-index: 98;
	}
    
    /* ------------INDEX - FEATURES SERVICES PAGES-----------*/
    
.images{
    width: auto;
	height: 39%;
	margin: 0px;
	margin-bottom: -60px;
	}
.listbox {
    height: auto;
    }

.intro {
    padding: 30px 0px 10px;
	}
.intro p {
    font-size:  80%;
	}
.designgrid img {
    max-width: 20rem;
	}
.usingspots {
    background-position: -80px;
	}
.designgrid.spotcolors > h2 {
    width: 90%;
    padding: 0px;
    margin-right: -50px;
	}
.table1 {
    width: 90%;
	}
.table2 {
    width: 90%;
    margin: 20;
	}
.spotcolors > p {
    padding: 10px;
	}
.photos > img {
    margin-left: 10px;
	}
.spotcolors {
    margin: 0;
    }
#banners {
    margin: 0px;
    }
#flag {
	margin-top: 25px;
	}

#vacation {
	background: white;
	margin: 0;
	padding: 30px 10px 15px;
}
#vacation img {
	width: 100%;
}
	#helpgrid >	.bleeds > .bleeds-header {
			margin-bottom: calc(-200px + 20vw);

	}

	.bleeds-header img{
		margin-top: 5px;
	}
.embellishment-header {
	margin-bottom: -100px;
}
}
	/*=======================Print for Bleeds=======================*/

#HeroBleeds {
	margin-bottom: -160px;
}
.HeroText-Bleeds {
}
@media screen and (max-width : 375px ){
    #HeroBleeds {
	margin-bottom: -260px;
}

.topnav a.icon {
	margin-top: -42px;
    margin-right: 20px;
  } 
.brand img {
	height: 100px;
	margin-top: 43px;
	}
#flag {
    margin-top: 30px;
    }
#banners > img {
	max-width: 350px;
	}
	.embellishment > h2 {
		margin-top: 0px;
	}
	#helpgrid > .embellishment > p {
		padding-bottom: 25px;
	}
}