body {
    margin: 0 auto;
    line-height: 1.7em;
	font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6, body, p, a, ul, li, em, blockquote {
	font-family: 'Roboto', sans-serif;
} 

.l-box {
    padding: 0.9em;
}

.header {
    margin: 0 0;
}

    .header .pure-menu {
        padding: 0.5em;
    }

        .header .pure-menu li a:hover {
            background: none;
            border: none;
            color: #aaa;
        }

body .primary-button {
    background: #02a6eb;
    color: #fff;
}

.splash {
    margin: 2em auto 0;
    padding: 3em 0.5em;
    background: #09f;
}
    .splash .splash-head {
        font-size: 400%;
        margin: 0em 0;
        line-height: 1.2em;

    }
	
	.splash-head {
		color: #FFF;
		text-align: center;
	}
    .splash .splash-subhead {
        color: #FFF;
        font-weight: 300;
        line-height: 1.4em;
		text-align:center;

    }
		.splash .splash-subhead a{
			color: #eee;
			font-weight: 400;
			line-height: 1.4em;
			text-align:center;
			text-decoration:none;
		}
		
		.splash .splash-subhead a:hover {
			color: #FFF;
		}
		
		
    .splash .primary-button {
        font-size: 150%;
    }


.content .content-subhead {
    font-size: 150%;
	color: #aaa;
    padding-bottom: 0.3em;
    text-transform: uppercase;
    margin: 0;
    border-bottom: 2px solid #eee;
    display: inline-block;
}

.content .content-tagline {
	color: #0099FF;
}

.content .content-ribbon {
    margin-top: 3em;
    border-bottom: 2px solid #0099FF;
}

.tldr {
	
	padding-left: 20px;
	padding-right: 20px;
}

.tldrtext {
	
	color:#09F;
	
}

.ribbon {
    background: #09F;
    text-align: center;
    padding: 0.5em;
    color: #FFF;
}
    .ribbon h2 {
        display: inline;
        font-weight: normal;
    }

.footer {
    background: #111;
    color: #666;
    text-align: center;
    padding: 1em;
    font-size: 80%;
}

.SocialFavicon {
	width: 16%;
	height: inherit;
}

#SocialBanner {
	width: 100%;
	margin-left:20px;
	margin-right: 20px;
}

.SocialList {
	display: inline;
	padding: 3px;
	list-style: none;
}

.pongleft{
	text-align:right;
}

.pure-g-r {
	max-width:1500px;
	margin: auto;
}

.pure-menu-horizontal {
	text-align: center;
}

em {
	color: #FFF;
	font-style: normal;
}

.SeeMore {
	font-size: 18px;
}

.jobHead {
	text-transform: uppercase;
	color: #0099FF;
	-webkit-margin-before: 0;
	-webkit-margin-after: 5px;
}

.jobSubhead {
	color: #999;
	-webkit-margin-before: 5px;
	-webkit-margin-after: 0;
}
	.jobSubhead a {
		color:inherit;
		text-decoration: none;
	}
	.jobSubhead a:hover {
		color:#777;
	}

.jobTime {
	font-style: italic;
	font-size: smaller;
	padding:0px;
	margin:0px;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}

.jobDesc {
	-webkit-margin-before: 5px;
	-webkit-margin-after: 0;
}

.jobImg {
	width:100%;
	height: inherit;
	max-width: 400px;
}

.folioHead {
	-webkit-margin-after: 0;
	padding:0;
	letter-spacing: 0px;
}

.folioThumb {
	width: 60%;
	height: inherit;
	padding-left: 2px;

}
	.folioAudioThumb {
		width: 80%;
		height: inherit;
		}

.folioLinks {
	list-style-type: none;
	display: inline;
}
	.folioLinks a {
		text-decoration: none;
		color:#999;
	}
	.folioLinks a:hover {
		color: #777;
	}
.folioLink a {
	text-decoration: none;
	color:#999;
}
.folioLink a:hover {
	color: #777;
}

.folioList {
	margin-left: -10px;
}

.resumeLink {
	text-decoration: none;
	color:#FFF;
}
.resumeLink:hover {
	color: #777;
}

.footLink a {
	text-decoration:none;
	color: #999;
}

.footLink a:hover {
	text-decoration:none;
	color: #777;
}

.error {
	text-align:center;
	letter-spacing:normal;
}

.errorImg {
	display:block;
	width:60%;
	height:inherit;
	margin-left:auto;
	margin-right: auto;	
}
	

iframe {
	height: 270px;
	width: 100%;
}

video {
	width: 50%;
	height: inherit;
}

	
@media only screen and (max-device-width: 720px) {
	.splash .splash-head {
		font-size: 200%;
	}
	
	.splash .splash-subhead {
		font-size: smaller;
		color: #FFF;
	}
		.splash .splash-subhead a{
			color: #777;
			text-decoration:none;
		}
		.splash .splash-subhead a:hover {
			color:#555;
		}
	
	.header .pure-menu {
        padding: 0px;
		font-size: 10px;
    }
		.header .pure-menu li a {
			box-shadow: #FFF 1px 1px 1px 1px;
		}
	#SocialBanner {
		margin:0 0 0 -20px;
		width: 100%;
		
	}
		.SocialList .SocialFavicon {
		width: 15%;
	}
	audio {
		width: 95%;
	}
	
	.errorImg {
	width:95%;	
	}

	iframe {
	width: 90%;
	height: inherit;
	}

	video {
		width: 90%;
		height: inherit;
	}

	.folioAudioThumb {
		width: 90%;
	}
	
}