/* Table of Contents
––––––––––––––––––––––––––––––––––––––––––––––
- General Content
- Typography
- Header & Navigation
- Images & Media
- Footer
- Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */

/* General Content
–––––––––––––––––––––––––––––––––––––––––––––– */
.main{padding-top:2%;}
.row{padding: 1% 0;}
.blue{background-color:#81d2eb;}
.lightblue{background-color:#e0e0e0;}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––– */
body
{
	font-family: 'Overlock',sans-serif;
	font-size: 1.65em;
	color: #665f57;
	background-image: url(/images/pd-graphics-header-bg_5.png);
	background-repeat: repeat-x;
	background-position: top;
}

h2{
	font-family: 'Raleway', sans-serif;
	font-size: 1.8em;
	margin: 0em;
	text-align: left;
}

h2.bio{
	font-family: 'Overlock';
	letter-spacing: .03em;
	color:#666;
	text-transform: uppercase;
	margin-top: 15px;
	margin-bottom: 10px;
}

h3.intro-top{
	font-family: 'Overlock',sans-serif;
	font-size: 1.85em;
	font-weight: ;
	letter-spacing: .01em;
	color:#665f57;
	text-align: left;
}
p.intro-body
{
	font-family: 'Overlock',sans-serif;
	font-size: 1.1em;
	letter-spacing: .01em;
	color: #999;
	text-align: left;
}

h2.main-header{
	color:#81d2eb;
	text-align: left;
	text-transform: uppercase;
}

p.bio{
	color: #666;
	font-size: 1em;
}

p.payment{
	color: #666;
	font-size: 1em;
}

p.contact{
	color: #fff;
	font-size: 1.25em;
}

a.ph{
	font-size: 2em;
}
a.eml{
	font-size: 1.3em;
}

h2.thumbnail-header{
	font-family: 'Overlock', sans-serif;
	letter-spacing: .02em;
	font-size: 1.2em;
	text-transform: uppercase;
	color:#fff;
	background-color:#81d2eb;
	text-align: center;
	width: 100%;
	position: relative;
	border-radius: .5em .5em 0em 0em ;
	padding-top: 3px;
	padding-bottom: 2px;
}

p.thankyou{
	text-align: left;
	color: #666;
	font-size: 1.1em;
}

.kly {
	color: #fff;
}

.kly a {
	text-decoration: none;
	font-size: 1.25em;
	word-spacing: 0em;
	color: #666;
}

.kly a:hover {
	color: #999999;
}

ul {
	list-style-type: square;
	display: inline;
}


/* Header & Navigation
–––––––––––––––––––––––––––––––––––––––––––––– */
header.main_nav{
	padding: 1% 0;
	display: block
}

.logo{
	margin: 5% auto;
	text-align: center;
}
.logo a{
	font-size: 3em;
	color: #fff;
	text-decoration: none;
	border: 0px solid #fff;
	text-transform: uppercase;
	padding: 2px 10px 0 10px;
	margin: 0;
}
.logo a:hover{
	background-color: #fff;
	color: #86daf2;
}

div.main.sim{
	background-image: url(/images/pd-graphics-header-bg_5.png);
	background-repeat: repeat-x;
	background-position: top;

}


/* Images & Media
–––––––––––––––––––––––––––––––––––––––––––––– */
img{max-width: 100%;}
img.avatar{
	border-radius: 400px;
	border: 5px solid #fff;
	margin-top: 45px;
}
img:hover{opacity:0.8;}

.smy {
	margin-top: 0px;
}



/* Footer
–––––––––––––––––––––––––––––––––––––––––––––– */
ul.social{
	display: block;
	margin: 0 0;
	list-style-type: none;
	text-align: right;
}
ul.social li{
	font-size: 1.8em;
	display: inline;
	padding: 0 2%;
}
ul.social li a{
	color: #666;
}
ul.social li.facebook a:hover{color: rgb(59,89,152);}
ul.social li.twitter a:hover{color: rgb(0,172,237);}
ul.social li.instagram a:hover{color: rgb(81,127,237);}
ul.social li.youtube a:hover{color: rgb(187,0,0);}
ul.social li.flickr a:hover{color: rgb(255,0, 132);}
ul.social li.linkedin a:hover{color: rgb(0, 123,182);}
ul.social li.pinterest a:hover{color: rgb(187,0,0);}

p.copyright{
	text-align: left;
	color: #666;
	font-size: .9em;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */
/* Larger than mobile - fixes iPhone */
@media (max-width: 479px) {
	.portfolio img{margin-bottom: 10%;}
	img.avatar{margin-top: 15%;}
	h2.bio{font-size: 2.75em; text-align: center;}
	p.bio{font-size: 1.25em;color: #666;}
	p.contact{color: #666;}
	ul.social li a{font-size: .75em;}
	h2.thumbnail-header{font-size: 1.5em;}
	.kly {color: #999999; text-align: left; font-size: 1em; margin-top: 15px; margin-bottom: 15px;}
	.kly a {color: #999999; text-align: left; font-size: 1em;}
	.intro-top {line-height: 90%;}
	p { font-size: 1.1em; line-height: 1.6em; }
	a { text-decoration: none; color: #666; }
	a:hover { color: #777777; }
}

/* Larger than tablet - fixes ipad and mini (needs fix for nav font color after click (active)*/
@media (min-width: 768px) {
	.smy { margin-top: -4px; }
	.kly { margin-top: 145px; font-size: .9em; letter-spacing: -.05em;}
	.kly a:hover { color: #fff; }
	a { text-decoration: none; color: #666; }
	a:hover { color: #fff; }
}

/* Larger than tablet ( ok 15in laptop) */
@media (min-width: 1400px) {
	.smy { margin-top: -10px; }
	.kly { margin-top: 140px; font-size: 1em; letter-spacing: .08em; word-spacing: .25em; text-align: right;}
}

/* Larger than tablet ( ok full screen iMac) */
@media (min-width: 1850px) {
	.smy { margin-top: -15px; }
	.kly { margin-top: 134px; font-size: 1em; letter-spacing: .08em; word-spacing: .25em; text-align: right;}
}

/* Larger than tablet ( ok largest screen iMac) */
@media (min-width: 2540px) {
	.smy { margin-top: -21px; }
	.kly { margin-top: 130px; font-size: 1em; letter-spacing: .08em; word-spacing: .25em; text-align: right;}
}