@import url(https://fonts.googleapis.com/css?family=Muli:400,400i,700,900|Playfair+Display:wght@800&display=swap);

/*Standard Selectors */
body {
	font-family: 'Muli', sans-serif;
	font-weight: 400;
	background-color: #F4F6FC;
}
h1 {
	font-size: 2em;
	margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Muli', sans-serif;
	font-weight: 800;
	color: #F4F6FC;	
}
a:link {
	color:#5CDEE5;
}
a:hover:not(.button):not(div#organizations a:hover):not(.download a:hover):not(footer div#socialmediaicons a:hover) {
	border-bottom: 2px groove #4C4C4C;
}
a:visited {
	color:#06B6BF;
}
#gallery-list a:visited {
	color:#a8f2f6;
}
#gallery-list a:link {
	color: #4C4C4C;
}
footer a:visited {
	color:#818080;
}
nav {
	margin: 1em auto 0 auto;
}
ul {
	list-style: none;
	margin: 1em auto;
}
footer a:hover {
	border-bottom: none;
}
#socialmediaicons img {
	border-bottom: 4px groove transparent;
	display: inline-block;
}
#socialmediaicons img:hover {
	border-bottom: 4px groove #4C4C4C;
}
footer div ul {
	list-style: none;
	margin: 1.5em auto;
}
footer ul li {
	display: inline-block;
}
footer {
	background-color: #06B6BF;
	color: #F4F6FC;
	margin: 0 auto;
	text-align: center;
	padding: 1em;
}
footer nav a:link:not(#site-map) {
	color:#4C4C4C;
	padding: .25em .5em;
	font-weight: 800;
	font-size: 2.5em;
	margin: 1em auto;
}
footer nav a:visited {
	color:#5CDEE5;
}
footer nav a:hover:not(#site-map) {
	background-color: #4C4C4C;
	color: #F4F6FC;
}
footer p {
	font-weight: 700;
}
footer nav {
	margin: 3em auto;
}
footer #sociamediaicons a:hover {
	border-bottom: none;
}
footer div#organizations span {
	display: inline-block;
	padding: 1em;
}
.caption {
	font-size: .8rem;
	line-height: normal;
	font-weight: 600;
}
ul#gallery.wrap.image-set.design-gallery.web-gallery li:hover div {
    height: 100px;
	line-height: normal;
	padding: .5rem;
}
/******************/
/* Hero */
#hero {
	background-color: #0b585c;
	background-size: cover;
	padding: 1em;
	text-align: left;
	/* min-height: 500px;*/
}
#hero h1 {
	font-family: 'Muli', sans-serif;
	font-weight: 800;
	font-size: 4em;
	text-shadow: 5px 5px 10px #4C4C4C;
	-webkit-text-shadow: 5px 5px 10px #4C4C4C;
	padding-bottom: 1em;
}
#hero .name {
	font-family: 'Playfair Display', serif;
	font-size: 10em;
	font-weight: 800;
	color:#5CDEE5;
	text-align: center;
	text-shadow: 5px 5px 10px #4C4C4C;
	-webkit-text-shadow: 5px 5px 10px #4C4C4C;
	line-height: 1.2;
}
#home-logo-medium {
	float: left;
	padding: 2em 1em .5em 0em;
}
#hero #home-name {
    padding: 3.5em 1em 2em 1em;
}
#home-content {
	max-width: 70vw;
	margin: 0 auto;
}
/******************/
/* Header */
header {
	background-color: #4C4C4C;
	padding: .5em;
	margin: 0 auto;
	top: 0;
	text-align: center;
}
div#logo, div#header-name {
	display: inline-block;
	vertical-align: middle;
}
#logo {
	margin-right: .5em;
}
header div ul {
	list-style: none;
	margin: 0 auto;
}
header ul li {
	display: inline-block;
}
#header-name {
	font-family: 'Playfair Display', serif;
    font-size: 3em;
	font-weight: 800;
	color:#5CDEE5;
}
header nav a:link {
	color:#5CDEE5;
	padding: .25em .5em;
	font-weight: 800;
	margin: 1em auto;
	font-size: 1.15em;
}
header nav a:visited {
	color: #F4F6FC;
}
header nav a:hover {
	color:#4C4C4C;
	background-color: #F4F6FC;
}
/******************/
/* Middle Sections of home page*/
#graphic-design, #photography, #web-design {
	display: inline-block;
	padding-top: 1em;
}
#graphic-design h3, #web-design h3, #photography h3, #about h3 {
	font-family: 'Playfair Display', serif;
	font-size: 3em;
	font-weight: 800;
	text-align: center;
	color: #06B6BF;
	margin: 0;
}

/******************/
/* About Section */

#about{
	background-color: #4C4C4C;
	padding: 5em;
}
#about-content {
	max-width: 75vw;
	margin: 0 auto;
}
#about p {
	font-size: 2em;
	font-weight: 400;
	color: #fff;
}
#about img {
	border-radius: 15px;
	float: right;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin: 1em 0 0 4em;
	border:#06B6BF solid 4px;
  }
  #about hr {
	margin: 2rem;
	border-bottom: 1px solid #06B6BF;
	max-width: 90vw;
}
#about #about-title {
	display: block;
	float: none;
}
/******************/
/* Miscellaneous */
#thanks, .contact-message {
	font-size: 3em;
	margin: 4em auto;
	text-align: center;
}
#main-content h1 {
	font-family: 'Playfair Display', serif;
	font-size: 6em;
	font-weight: 800;
	text-align: center;
	color: #06B6BF;
}
#main-content h2 {
	font-family: 'Muli', sans-serif;
	font-size: 2.5em;
	color:#4C4C4C;
	font-weight: 800;
}
.socialmediaicons a {
	margin: 0 auto 1em !important;
}

.center {
	margin: 1em auto;
	text-align: center;
}
.space-above {
	margin-top: 2em;
}
.space-below {
	margin-bottom: 2em;
}
.space-right {
	padding-right: 2em;
}
.button { 
	font-family: 'Muli', sans-serif;
	font-weight: 700;
	background-color: #06B6BF; 
	font-size: 1.75em; 
	color: #F4F6FC !important;
	text-align: center;
}

.button:hover {
	background-color: #4C4C4C !important;
	color: #F4F6FC;
}
.g-recaptcha {
        display: inline-block;
 }

.experience_list ul {
	line-height: 1.15;	
	color: #4C4C4C;
	margin:0;
	text-align: left !important;
}


.experience_list ul li {
	list-style-image: url(../images/stars.png);
/*	line-height: 125%;*/
	text-indent: hanging;
	padding-top: .25em;
}
.experience_list ul li:last-child {
	padding-bottom: 1em;
}
#resume_list ul, #certifications ul {
	list-style-image: url(../images/stars.png);
	line-height: 1.15;	
	color: #4C4C4C;
	font-weight: 700;
	margin:0;
}

#resume_list li, #memberships li, #certifications li {
	color: #4C4C4C;
	padding-bottom: 0;
	font-weight: 700;
}

#resume_list ul li, #certifications li ul li {
	list-style-image: url(../images/stars.png);
/*	line-height: 125%;*/
	text-indent: hanging;
	padding-top: .25em;
	color: #F4F6FC;	
}
#resume_list ul li:last-child {
	padding-bottom: 1em;
}
#resume div h3, #resume h4, div h3.continuing-ed {
	font-family: 'Muli', sans-serif;
	font-weight: 800;
	color: #4C4C4C;
	font-size: 2em;
}
div h3.continuing-ed {
	text-align: center;
}
#resume .callout h3 {
	color: #F4F6FC;
}
.download a, .download h4 { 
	display: inline-block; 
	vertical-align: middle; 
	text-align: center;
}

div.download {
	border: #0b585c 2px solid;
	border-radius: 15px;
	padding: 1rem 2rem 2rem 2rem;
}

.callout {
	background-color: #06B6BF; 
	padding: 2em 3em;
	border: none;
	border-radius: 15px;
}
.callout.callout-small {
	min-height: 320px;
}
.callout li, .resume-section li {
	list-style-image: url(../images/stars.png);
	margin-left: 2em;
	text-align: left;
}
.jobs-sought {
	padding: 2em 4em;
}
#sitemap {margin-left: 30em;}
#sitemap li {
	list-style-image: url(../images/stars.png);
	color: #4c4c4c;
}

#sitemap a {
	color: #4c4c4c;
	font-size: 1.75em;
}

blockquote {
	border: none;
	padding: 1em 1.5em;
	margin: 1em auto;
	font-weight: 400;
	font-size: 1.15em;
	font-style: italic;
	color: #4C4C4C;
}
#resume p {
	text-align: left;
}
span.subheader {
	font-weight:900; 
	color: #06B6BF;
}
#resume em {
	font-weight:700; 
}
span.resume_text {
	text-align: left !important;
}
#resume div.resume-section, hr.resume-section {
	border-bottom: 1px dashed #4C4C4C;
	padding: 1em 1.5em 2em 1.5em;
}
/* Gallery Styles */
#wrap a:hover {
	border-bottom: none;
}
#wrap {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#wrap li {
  float: left;
  position:relative;
  width:300px;
  height:300px;
  margin: 2.5em 2.5em 3.5em 3em;
  padding:10px;
  background:#fefefe;
  box-shadow:0 0 5px rgba(0,0,0,.35);
  text-align:center;
  vertical-align: middle;
}

#wrap li em.caption {
	padding-top: 2.5em;
}
#cards #wrap li {
	margin: 1em 3em;
}
#wrap #logos li {
	height: 200px;
}

#wrap li div {
  position:absolute;
  height:0;
  width:280px;
  background:rgba(0,0,0,.45);
  overflow:hidden;
  bottom:10px;
  left:10px;
  padding: 0 10px;
  line-height:50px;
  color:#fff;
  -webkit-transition:height 1s;
  -moz-transition:height 1s;
  -o-transition:height 1s;
  -ms-transition:height 1s;
  transition:height 1s;
  text-align:center;
  font-size: 100%;
}

#wrap li:hover div {
	height:50px;
	text-align:center;
	font-family: 'Muli', sans-serif;
	font-size: 1em;
	font-weight: 700;
}
#wrap .design-gallery li div, #wrap .home-gallery li div  {
	background:rgba(6,182,191,.8);
}

canvas {
	opacity:1; 
	position:absolute; 
	-webkit-transition:opacity 1s ease-in-out 0s;
	-moz-transition:opacity 1s ease-in-out 0s;
	-o-transition:opacity 1s ease-in-out 0s;
	-ms-transition:opacity 1s ease-in-out 0s;
	transition:opacity 1s ease-in-out 0s;
	text-align:center;
}

li:hover canvas {
	opacity:0;
	}

ul#gallery, ul#gallery-1, ul#gallery-2, ul#gallery-3, ul#gallery-4 {
	text-align: center;
	margin: 1em auto;
}

div#invitations, div#Posters {
	background-color: #b1b9b9;
}
div#Fabric, div#social, div#logos {
	background-color: #5CDEE5;
}
/* End Gallery */

/* Scallop Effect */
.scallop-home-header {
	background: #0b585c;
}
.scallop-header {
	background: #4C4C4C;
  }
.scallop-header, .scallop-home-header {
	position:relative;
	padding:30px;
  }
.scallop-header {
  position:relative;
  background: #4C4C4C;
  padding:30px;
}
.scallop-header::after { 
	background: radial-gradient(circle at 50% 0%, #4C4C4C 25%, transparent 26%, transparent 40%);
  }
  .scallop-home-header::after { 
	background: radial-gradient(circle at 50% 0%, #0b585c 25%, transparent 26%, transparent 40%);
  }
.scallop-header::after, .scallop-home-header::after{ 
  position:absolute;
  bottom: -50px;
  left: 0px;
  width: 100%;
  content:" ";
  background-size:25px 50px;
  height:50px;
  background-repeat: repeat-x;
}
.scallop-footer {
  position:relative;
  background: #06B6BF;
}
.scallop-footer::after { 
  transform: rotate(180deg);
  position:absolute;
  top: -50px;
  left: 0px;
  width: 100%;
  content:" ";
  background: radial-gradient(circle at 50% 0%, #06B6BF 25%, transparent 26%, transparent 40%);
  background-size:25px 50px;
  height:50px;
  background-repeat: repeat-x;
}
/******************/
/* Media Queries */
@media only screen and (max-width: 2057px) {
	#hero .name {
		font-size: 8em;
	}
	#home-content {
		max-width: 85vw;
	}
}
/* Media Queries */
@media only screen and (max-width: 1920px) {

	#hero #home-name {
		padding: 3em 1em 2em 1em;
	}
	#hero .name {
		font-size: 7.5em;
	}
	#hero h1 {
		font-size: 3.5em;
	}
	#about img {
		margin-left: 2.5em;
		margin-bottom: 2.5em;
		margin-top: 0em;
		
	  }
}
@media only screen and (max-width: 1440px) {
	#about p {
		font-size: 2em;
	}
	footer nav a:link:not(#site-map) {
		font-size: 2em;
	}
	div#resume {
		margin: 1.5em;
	}
	#home-logo-medium {
		float: none;
		padding: 2em;
	}
}
@media only screen and (max-width: 1280px) {
	#hero .name {
		font-size: 7em;
	}
	#home-logo-medium {
		float: none;
		display: block;
	}
	#hero #home-name {
		padding: 2em 1em;
	}
	#wrap li {
		float: none;
		display: inline-flex;
		justify-content: center;
	}
}
@media only screen and (max-width: 64em) {
	#wrap li {float: none; margin: 1em 2em}
	blockquote {
		padding: 1em 2em;
	}
	div#graphic-design, div#photography, div#web-design {
		display: block;
		width: 100%;
	}
	#photography h3 {
		padding-bottom: 0;
	}
	
	#sitemap {margin-left: 20em;}

	#cards #wrap li {
		margin: 1em auto;
	}
	div#wrap #gallery li {
		margin: 2rem;
		text-align: center;
	}
}

@media only screen and (max-width: 960px) {
	#hero {
		text-align: center;
	}
	#home-logo-large, #home-logo-medium {
		float: none;
		display: block;
		padding: 2em 1em .5em 0em;
	}
	#about{
		padding: 5em;
	}
	#about img {
		margin-left: 2.5em;
		margin-bottom: 1em;
		margin-top: 0em;
	  }
	#main-content h1 {
		font-size: 5em;
	}	
}

@media only screen and (max-width: 768px) {

	#about {
		padding: 4em;
	}
	#about img {
		float: none;
		margin: 1em auto;
	}
	#hero h1 {
		font-size: 3em;
	}
	#hero .name {
		font-size: 6em;
	}	
	#graphic-design h3, #photography h3, #web-design h3 { 
		font-weight: 400;
	}
	.callout {
		width: auto;
		padding: 2em 4em;
	}
	h2 {
		font-size: 2em;
	}
	div#bio-pic {
		margin: 1em auto;
		display: block;
		text-align: center;
	  }
	.callout.callout-small {
		min-height: 520px;
	}
}
@media only screen and (max-width: 640px) {
	#hero h1 {
		font-size: 2.35em;
		padding: 1em;
	}
	#hero .name {
		font-size: 5em;
		line-height: 1;
	}
	#hero #home-name {
		padding: 1em;
	}
	#hero {
		min-height: auto;
	}
	#about p {
		font-size: 1.75em;
	}

	#main-content h1, #graphic-design h3, #photography h3, #web-design h3, #about h3{ 
		font-size: 4em;
	}	
	.download h4 { 
		padding-left: 0; 
	}
	#sitemap {margin-left: 15em;}
	#organizations{
		text-align: center;
	}
	footer div#organizations span {
		display: block;
	}
	body {
		line-height: 1;
	}
	.callout {
		padding: 2em;
	}
}
@media only screen and (max-width: 600px) {
	#hero {
		text-align: center;
	}
	#hero .name {
		font-size: 4.5em;
	}
	#main-content h1, #graphic-design h3, #photography h3, #web-design h3, #about h3{ 
		font-size: 3.5em;
	}
	.callout.callout-small {
		min-height: 540px;
	}
}
@media only screen and (max-width: 480px) {
	header {
		padding: 1em .25em .25em .25em;
	}
	#header-name {
		font-size: 3.5em;
	}
	#main-content h2 {
		font-size: 2em;
	}
	div#wrap #gallery li {
		margin: 1em auto;
		text-align:center;	
		padding: 0;
	}
	#logo {
		margin-right: 0;
	}
	#resume div h3, #resume h4, #education div h3 {
		font-size: 1.5em;
	}
	
	nav ul li {
		display: block;
	}
	div.download {
		padding: 2em;
	}
	.orbit-next, .orbit-previous {
		color: transparent;
	}
	#wrap li {
		margin: 1em auto;	
	}
	#hero .name {
		font-size: 4em;
	}
	#hero h1 {
		font-size: 1.5em;
	}	
	#sitemap {margin-left: 7em;}
	#about img {
		margin: 0 0 1em 0;
		display: block;
		text-align: center;
	  }
	#main-content h1, #graphic-design h3, #photography h3, #web-design h3, #about h3{ 
		font-size: 3em;
	}
	#about p {
		font-size: 1.5em;
	}
	div.row {
		margin: 1em auto;
	}
	.callout.callout-small {
		min-height: 680px;
	}
}
@media only screen and (max-width: 414px) {
	.callout.callout-small {
		min-height: 780px;
	}
}
@media only screen and (max-width: 385px) {
	#header-name {
		font-size: 2.8em;
	}	
	#hero .name {
		font-size: 3.5em;
	}
	#main-content h1, #graphic-design h3, #photography h3, #web-design h3, #about h3 {
		font-size: 2.75em;
	}	
	#about p {
		font-size: 1.5em;
	}
	.callout.callout-small {
		min-height: 800px;
	}
}
@media only screen and (max-width: 375px) {
	#header-name {
		font-size: 3.3em;
	}	
	footer nav a:link:not(#site-map) {
		font-size: 1.5em;
	}
	#sitemap {margin-left: 3em;}
}
@media only screen and (max-width: 320px) and (max-device-width: 320px) {
	#hero {
		padding: 1em 0;
	}
	#hero .name {
		font-size: 2.5em;
	}
	#hero h1 {
		font-size: 1.25em;
	}	
	#main-content h1, #graphic-design h3, #photography h3, #web-design h3 {
		font-size: 2.5em;
	}	
	img {
		text-align: center;
	}
	#wrap li {
		width: auto;
	}
	#about {
		padding: 2em;
	}
	#about p {
		font-size: 1.2em;
	}
	#wrap li {
		width: 250px;
		height: 250px;
	}
	#wrap li div {
		width: 230px;
	}
}
/******************/