html{
background-color:#222;
}

body{
max-width:1024px;
min-width:740px;
height:100%;
font-family:Avenir,"SinkinSans",sans-serif;/**/

margin:auto;
padding:100px;/*body padding*/
}
.dark {
background-color:black;
color:white;
}
.light {
background-color:white;
color:black;
}

.light a{
color:black;
}
.dark a{
color:white;
}
a:hover{
color:#f05;
}

/*
.pink ::selection{
background-color:#f05;
}
::selection{
color:white;
text-shadow:1pt 1pt 3pt black;
}*/

header{
background:transparent;
position:relative;
margin:0;padding:0;border:0;
height:40px;/***********************************************************40px******/
margin-left:-100px;/*body padding*/
margin-right:-100px;/*body padding*/
margin-bottom:30pt;
color:white;
}
.light header {color:white;}
.dark header {color:black;}

#logo {
margin:0;
position:absolute;
height:100%;
left:44px;
right:0;
overflow:hidden;/*prevents svg bar from exiting body*/
}
svg .accent{
fill:#f05;
}
svg #name{
fill:black;
}
svg .bar{
fill:black;
}

.light svg #name{fill:black;}
.dark svg #name{fill:white;}

.light svg .bar{fill:black;}
.dark svg .bar{fill:white;}
/*
.dark #logo {
background-image:url("/_images/SEANFEELEY_header_dark.svg");
background-color:black;
}
.light #logo {
background-image:url(/_images/SEANFEELEY_header_light.svg);
background-color:white;

*/
#navbar {
position:absolute;
height: 100%;
left: 544px;
right:0;
margin-right:100px;
}



#navbar a{
text-decoration: none;
color:white;
}
.light #navbar a{color:white;}
.dark #navbar a{color:black;}

#navbar ul{
margin:0;padding:0;

/*overflow:hidden;/**/
height:100%;

text-align: center;
}
#navbar li{
display:inline-block;
height: 40px;
line-height: 40px;
font-size:20px;
/*font-style: italic;/**/
font-weight:500;/*Bold*/
/*overflow:hidden;/**/
width:49%;
max-width:140px;/********/

position: static;
-webkit-transform: rotate(0);/*locks position for ::before div*/   /* position:relative? */
transform: rotate(0);/*locks position for ::before div*/   /* position:relative? */
}
.dark .active-nav a{color:white !important;}
.light .active-nav a{color:white !important;/*looks better than black*/}

/*#navbar li:hover::before,/**/
.active-nav::before
{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	/*left: 0;/**/
	z-index:-1;
	-webkit-transform: skewX(-30deg);/**/
	transform: skewX(-30deg);/**/
	background-color:#f05;
	
	left: -3px;
}
.dark .active-nav::before
{	border-left:3px solid black;
	border-right:3px solid black;/**/
}
.light .active-nav::before
{	border-left:3px solid white;
	border-right:3px solid white;/**/
}


/*
#navbar li:hover::before{
	background-color:rgba(255,0,85,0.5);
}
*/
#navbar li:hover a{
color:#f05;
/*text-shadow: 0 0 8px #f05;/**/
}












article{
width:100%;
}





#gifspkr img{
display:block;
width:40%;
margin:80px 10% auto auto;
}
/*
#gifspkr .splash {
background-image:url(../_images/gifspkr-D.png);
background-size:cover;
}
#gifspkr img{
display:block;

width:90%;
height:100%;
margin:auto;
padding-left:5%;
padding-right:5%;
padding-bottom:30%;padding-top:30%;
margin-top:-30%;
vertical-align: middle;
background-color:rgba(0,0,0,.2);
}
*/
/*
#gifspkr .splash {
background-image:url(../_images/gifspkr-B.png);
background-size:cover;
}
#gifspkr img{
display:block;

width:90%;
height:100%;
margin:auto;
padding-left:5%;
padding-right:5%;
padding-bottom:15%;
margin-top:-12%;
vertical-align: middle;
background-color:rgba(0,0,0,.4);
}
*/




.splash, .splashvideo {
margin:0;padding:0;border:0;
/*height:450px;*/
width:100%;
overflow:hidden;
}
.splash {
height:450px;
}
.splash img {
width:50%;/*
height:100%;/**/
}
.splashvideo video {
width:100%;
}
ul.image-list.skewed{
transform: skewX(-30deg);
margin:0;padding:0;border:0;
margin-left:-15%;
width:130%;
height:100%;
display:-webkit-inline-flex;
display:inline-flex;
}
.skewed li{

}
.splash iframe {
	border:none;
	width:100%;
	height:100%;
}


ul.image-list {
margin:0;padding:0;border:0;
width:100.2%; /* extra prevents rounding error on width = flicker on right */
height:100%;
display:-webkit-inline-flex;
display:inline-flex;
}

li>div{
transform: skewX(-30deg);
}
.image-list>li{
	transition:			.6s;
	-o-transition:		.6s;
	-ms-transition:		.6s;
	-moz-transition:	.6s;
	-webkit-transition:	.6s;
margin:0;padding:0;border:0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
    display:block;
    width:100%;
}


.no-touch .image-list>li:hover,
.image-list>li.touch-expanded {
    width:1200%;
}

















.group {
margin:0;padding:0;
margin-bottom:30pt;-webkit-margin-after: 30pt;
}
.project {
margin:0;padding:0;
margin-bottom:20pt;-webkit-margin-after: 20pt;
}


p,ul{
font-size:10pt;/**/
font-weight:400;/*Regular*/
}

h1 {
-webkit-margin-before: 0;
margin-top:0;
}



h2{
color:#f05;
	/*transform: skewX(-30deg);/**/
	/*margin-bottom:4px;*/
font-size:12pt;/**/
font-weight:600;/*Regular*/
font-style: italic;/**/

-webkit-margin-before: 0;
margin:0;
margin-bottom:4pt;-webkit-margin-after: 4pt;

}


h1::after
{
	content: "";
	position:relative;
	display:block;
	
	
	height:4px;
	background-color:#f05;
	/*transform: skewX(-30deg);/**/
	/*border:1px solid #f05;/**/
}



footer{
margin-top:6em;
text-align:center;
}

#legal{
color:#888;
font-size:8pt;
}


::selection {
color:white;
text-shadow:1pt 1pt 3pt black;
}

.pink svg .accent			{fill:#f05;}
.pink h2,
.pink a:hover,
.pink #navbar li:hover a		{color:#f05;}
.pink ::selection,/**/
.pink h1::after,
.pink .active-nav::before	{background-color:#f05;}


.yellow svg .accent			{fill:#fa0;}
.yellow h2,
.yellow a:hover,
.yellow #navbar li:hover a		{color:#fa0;}
.yellow ::selection,/**/
.yellow h1::after,
.yellow .active-nav::before	{background-color:#fa0;}


.green svg .accent			{fill:#5f0;}
.green h2,
.green a:hover,
.green #navbar li:hover a		{color:#5f0;}
.green ::selection,/**/
.green h1::after,
.green .active-nav::before	{background-color:#5f0;}


.cyan svg .accent			{fill:#0fa;}
.cyan h2,
.cyan a:hover,
.cyan #navbar li:hover a		{color:#0fa;}
.cyan ::selection,/**/
.cyan h1::after,
.cyan .active-nav::before	{background-color:#0fa;}


.blue svg .accent			{fill:#05f;}
.blue h2,
.blue a:hover,
.blue #navbar li:hover a		{color:#05f;}
.blue ::selection,/**/
.blue h1::after,
.blue .active-nav::before	{background-color:#05f;}
/*.blue .active-nav>a			{text-shadow: 0pt 0pt 4pt #05f;}/**/


.purple svg .accent			{fill:#a0f;}
.purple h2,
.purple a:hover,
.purple #navbar li:hover a		{color:#a0f;}
.purple ::selection,/**/
.purple h1::after,
.purple .active-nav::before	{background-color:#a0f;}