html{margin:0px;padding:0px;}

body{
	font-family: 'Open Sans', sans-serif;
	line-height:1.4;
	letter-spacing:0.03rem;
	margin:0px;
	hanging-punctuation: first;
}

@media screen and (max-width:800px){body{background-color: #EEF1F6}}

a{text-decoration: inherit;font-weight:bold;color: #0d5257;}
a:hover{color: #55858A}

.back-button{font-size: 1rem; font-weight: normal; color:#555; float:right; padding-top:5px;}

blockquote{
	color:#0d5257;
	font-size: 1.25em;
	font-weight: 700;
	line-height:1.85rem;
	padding: 0px 5% 0px 0px;
	margin: -5px 0px 25px;
}
@media screen and (max-width:800px){blockquote{	font-size: 1.65em;	line-height:2.1rem;}}

.bottom-right{vertical-align:bottom;text-align:right;}
@media screen and (min-width:1200px){.bottom-right svg{display:none;}}

@media screen and (min-width:800px){
    .bottom-left{position:fixed;bottom:33px;right:30px;vertical-align:bottom;}
   .bottom-right{position:fixed;bottom:20px;right:20px;}
 .bottom-left h4{margin-bottom:0px;}
.bottom-right h4{margin-bottom:0px; padding-right:0px;}
}

form blockquote{margin-bottom:10px;}
form input{margin:0px 0px 14px 0px; height:20px; border: 3px solid #0d5257; width:50%; border-radius: 0; -webkit-appearance: none; -webkit-border-radius:0; /*background-color: #EEF1F6;*/}
form textarea{font-family:sans-serif; margin:0px 0px 14px 0px; border: 3px solid #0d5257; width:50%; border-radius: 0; -webkit-appearance: none; -webkit-border-radius:0; /*background-color: #EEF1F6;*/}
form .form-button{margin:10px 10px 10px 0px; padding:10px; min-height:60px; background-color: #0d5257; color:#fff; font-weight:700; font-size: 1.65rem; line-height:2.1rem; text-align: left;}
form .form-button:hover{cursor: pointer; background-color: #55858A; border-color: #55858A;}
form .form-entry{height:160px; width:98.5%;}

/*Form Placeholder*/
::-webkit-input-placeholder {color: #55858A; padding-left:5px; vertical-align:top;}
::-moz-placeholder {color: #55858A; padding-left:5px; vertical-align:top;}
:-ms-input-placeholder {color: #55858A; padding-left:5px; vertical-align:top;}
:-moz-placeholder {color: #55858A; padding-left:5px; vertical-align:top;}

.full-width{width: 100%; padding: 0px 0px 25px;}

.glossary-term{
	font-weight:bold;
	color:#555;}

h1{font-size: 1.65rem; line-height:2.1rem; padding: 0px 0px 0px; margin: 45px 0px 28px; width:100%; border-bottom: 3px solid; color: #0d5257;}
h1:first-child{margin:85px 0px 20px;}
h1:last-child{margin:85px 0px 20px;}
@media screen and (max-width:800px){h1:first-child{margin:24px 0px 20px;}h1:last-child{margin:40px 0px 0px;}h1{padding:24px 0px 0px;}}
h2{
	font-size: 2rem;
	line-height:2.1rem;
	padding: 0px 0px 20px;
	margin: 5px 0px 0px 20px;
	border:none;
	color:#fff;
}
@media screen and (min-width:800px){h2{margin-top:20vh;}}
@media screen and (min-width:800px){.menu-image-container svg{margin-top:22vh;}}
h3{font-size: 1rem; 				padding: 0px; 	   margin: 0px 0px 0px 0px; padding-right:10%; color:#555;}
h4{font-size: 1rem; 				padding: 0px; 	   margin:  0px 0px 23px 0px; padding-right:10%;}
h5{font-size: 1rem; 				padding: 0px; 	   margin:  0px 0px 0px  0px; color:#555;}

.current-page{border-bottom: 3px solid; color: #0d5257; margin-bottom: -3px;}

a:hover svg{fill:#55858A;}
a:hover {color:#55858A;}

@media screen and (max-height:430px){.hide-short{display:none;}}

.grid-50{background-color: #EEF1F6;}

@media screen and (max-width:380px){.hide-small{display:none;}}

.icon{
	stroke:none;
	fill:#0d5257;
	display:inline;
	padding-left:10px;
	padding-bottom:0px;
	margin:10px 0px -10px 0px;
}
iframe{padding:0px;}
@media screen and (max-width:800px){iframe{max-height:200px;}}

img{display: block; position:relative;}

.logo{
	margin-left:-11px;
	max-width:180px;
}

.menu-image-container{padding:128px 5px;}
.menu-image-container div{
	float: left;
	display: inline-block;
	width: 31.3%;
	height: 31vh;
	margin: 1%;
	background-color: #0d5257;
	vertical-align: bottom;
}
.menu-image-container div h2{float:left; margin:10px;}
.menu-image-container div svg{display:inline; float:right; width:40px; fill:#fff; padding:10px;}
@media screen and (max-width:290px){.menu-image-container div svg{display:none;}}
.menu-image-container div:hover {filter: opacity(50%);}
.menu-image-container div{background-size: 100% auto;}

.commercial{background-image: url('background-image/commercial-a4-reports-digital.jpg');}
.creative{background-image: url('background-image/creative-photography.jpg');}
.design{background-image: url('background-image/design-illustration-tools.jpg');}
.personal{background-image: url('background-image/personal-wedding-invitations.jpg');}
.promotional{background-image: url('background-image/promotional-pens.jpg');}
.small-business{background-image: url('background-image/small-business-business-cards.jpg');}

@media screen and (max-width:800px){
	.menu-image-container{padding:0px 10px;}
	.menu-image-container div{
		width: 100%;
		height: 80px;
		padding: 0px;
		margin: 5px 0;
	}
	.menu-image-container div h1{margin-left:10px;}
}

#mobile-contact-buttons{
	padding:5px;
}

#mobile-contact-buttons a li{
	background-color: #0d5257;
	border: 5px solid #EEF1F6;
	padding:5px;
	/*height: calc( calc(100vw - 30px) / 4);*/
	color: #fff;
	fill: #fff;
	background-clip:padding-box;
}

#mobile-contact-buttons a li:hover{color: #fff;}
#mobile-contact-buttons a li:hover svg{fill: #fff;}

#mobile-contact-buttons a li svg{padding:10px 0px 0px 10px;float:right}
#mobile-contact-buttons a li {background-size: auto 100%;}
@media screen and (max-width:290px){#mobile-contact-buttons a li {font-size: 0;}}
#mobile-contact-buttons li:first-child{margin-left:0px;}
#mobile-contact-buttons li:last-child{margin-right:0px;}
#mobile-contact-buttons img.full-width{padding:0px}

.mobile-contact-buttons-call {background-image: url('background-image/call.png');}
.mobile-contact-buttons-email {background-image: url('background-image/email.png');}
.mobile-contact-buttons-map {background-image: url('background-image/map.png');}
.mobile-contact-buttons-quote {background-image: url('background-image/quote.png');}

.mobile-logo{
	margin:30px auto 35px;
	width:58%;
}
@media screen and (min-width:800px){.mobile-logo{display:none;}}

@media screen and (max-width:800px){
	nav ul{
		position: fixed;
		top: 0px;
		z-index: 100;
		width: 94.5%;
		color: #0d5257;
		background-color:#EEF1F6;
		border-bottom: 3px solid;
		text-align:left;
		padding:10px 0px 5px;}
	nav ul li{display:inline-block; width:20%; padding-right:5%;}
	nav ul #about{padding-right:0px;}
}

@media screen and (max-width:400px){nav {font-size:8px;}}

p {
	margin-top:0px;
	margin-bottom:24px;
	padding-right:21%;
	color:#555;
}
@media screen and (max-width:800px){p {padding-right:5%;}}
p a{color:#555;}
p a:hover{color:#55858A;}

::selection {background: #0d5257; color:#fff;}
::-moz-selection {background: #0d5257; color:#fff;}

td{font-weight:700;}

.textblock {
	margin: 0px;
	padding: 10px 10px 0px 10px;
}

.top-right{text-align:right;}
@media screen and (min-width:800px){
.top-left{position:fixed;top:15px;left:10px;vertical-align:top;}
.top-right{position:fixed;top:20px;right:10px;}
.top-left h4{margin-top:0px;}
.top-right h4{margin-top:0px; padding-right:0px;}
}

ul{
	padding:0px;
	list-style:none;
	margin:0px;
}

li a:hover{border-bottom: 3px solid;}