.highlight {background-color: #69fbc8; font-weight: 400; font-style: normal;}

header {padding: 1em 0; margin-bottom: 3em; background-color: #363F48; color: #fff;}
	header nav {float: right;}
		header nav a {margin-left: 1.5em;}
	header a {display: inline-block; font-family: "Droid sans", sans-serif; font-size: .8em; font-weight: 400; text-transform: uppercase; letter-spacing: .1rem; color: rgba(255, 255, 255, .6); text-decoration: none; border: 0;}
	header a:hover {color: #fff; border-bottom: 2px dotted #fff; background-color: transparent;}
	header a.active, header a.active:hover {color: #fff; border-bottom: 2px solid #fff; cursor: default;}


.previous, .next {display: inline-block; margin: 2em 0 4em; border: none;}
.previous {float: left;}
.next {float: right;}

.role {font-family: "Droid serif", serif; font-weight: 400; font-size: .9em; font-style: italic;}
	.role span {font-style: normal; text-transform: uppercase; font-size: .9em; letter-spacing: .1rem;}

.circle {border-radius: 100%; height: 8em; width: 8em; float: left; margin-right: 2em; text-indent: -999em;}
	.katherine {background: url(../images/watson/katherine.png) no-repeat 0 0; background-size: cover;}
	.theodore {background: url(../images/theodore.jpg) no-repeat 0 0; background-size: cover;}
	.zilker {background: url(../images/zilker.jpg) no-repeat 0 0; background-size: cover;}

/* Home */
.home {background-color: #363F48; padding-bottom: 3em;}
	.portfolio a {display: inline-block; margin: 0 0 .1em; padding: .1em .5em; background-color: rgba(0,0,0,.3); color: #69fbc8; font-size: 3em; text-decoration: none; font-weight: 700; border: none; transition: .3s ease all;}
	.portfolio a:hover {background-color: #69fbc8; color: #363F48; font-weight: 700;}
  @media (max-width: 950px) {
    .portfolio a {font-size: 3.7rem;}
    }
  @media (max-width: 660px) {
    .portfolio a {display: block; font-size: 2.4rem;}
    }    
  .intro {margin-bottom: 2em;}
	.intro h1 {margin-bottom: .2em; font-size: 3.6rem; color: #fff;}
	.intro h1 span {font-weight: 400;}
	.intro p {color: rgba(255, 255, 255, .6);}
	@media (max-width: 950px) {
    .intro h1 {font-size: 3rem;}
    }
  @media (max-width: 660px) {
    .intro h1 {font-size: 2.4rem;}
    }   
 

.subtitle {font-weight: 400;}
  @media (max-width: 550px) {
    .subtitle {font-size: 2.5rem;}
  }

figure {margin: 1em 0 2em;}
	img {border: 1px solid rgba(69, 70, 70, .2); width: 100%;}
	figcaption {font-family: "Droid serif", serif; font-weight: 400; font-size: .9em; font-style: italic; text-align: center; color: rgba(69, 70, 70, .6);}

/* Ratings */
.screenshot {display: block; width: 100%; overflow: hidden; border: none; border-right: 1px solid rgba(69, 70, 70, .2); margin-bottom: .5em;}
.screenshot:hover {background-color: transparent; border-right: 1px solid rgba(69, 70, 70, .2);}
	.screenshot img {display: block; width: 200%; /*border: none;*/}
	/*.screenshot:hover img {margin-left: -100%; cursor: pointer;}*/
	/*@media (max-width: 550px) {
		.screenshot:hover img {margin-left: 0; cursor: default;}
	}*/