/*-----------------------------------------------------------------------------------*/
/*	0.	CSS Reset & Clearfix - http://meyerweb.com/eric/tools/css/reset/
/*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */

/*-----------------------------------------------------------------------------------*/
/*	1. The Basics
/*-----------------------------------------------------------------------------------*/

body {
  font: 16px/1.5em "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  color: #232527;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  font-weight: 400;
}

a { 
  color: #333;
  font-weight: 900;
  -webkit-transition: color .1s linear;
  -moz-transition: color .1s linear;
  -o-transition: color .1s linear;
  -ms-transition: color .1s linear;
  transition: color .1s linear;
}

a:hover {color: #00B3FF;}

a img {border: none;}

a > img {vertical-align: bottom;}

::selection {background: #cecece;}

p,
pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset,
form,
.gallery-row,
.post-thumb,
.author-bio,
.logo {margin-bottom: 20px;}
/* cut */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  padding: 0;
}

h1 {
  font-size: 24px;
  line-height: 28px;
}


h2 {
  font-size: 20px;
  line-height: 22px;
  margin: 0 0 20px;
}

h3 {
  font-size: 16px;
  line-height: 20px;
}

h4 {
  font-size: 14px;
  line-height: 18px;
}

.caption {
  color: #9c9fa3;
  color: rgba(0,0,0,.52);
  font-size: 26px;
  letter-spacing: -1px;
  line-height: 1.4em;
  margin-bottom: 0;
  text-align: left;
}

.logo,
.logo a {
  color: #222426;
  font-size: 48px;
  font-weight: bold;
  float: left;
  letter-spacing:-.1em;
  line-height: 1.2em;
  text-decoration: none;
  text-transform:uppercase;
}

.logo a:hover { 
  color: #00B3FF;
  text-decoration: none; 
}

small {font-size: 11px;}

ul,
ol,
dl {padding: 0.5em;}

ul li {margin-bottom:.5em;}

ul.linkList {text-align: center;margin-top: 1em;}
ul.linkList li a {padding: 0 .5em; white-space: nowrap;}

ul li b {
    margin-top: 1.5em;
    display: inline-block;
}


/*------------------------------------------------------------------------*/
/*	Structure
/*------------------------------------------------------------------------*/

.outer {
  background: #ffffff;
  padding: 2em 0;
  position: relative;
}

.header {
	margin: 0 auto 1em;
	width: 85%;
}

.page-content {
	margin: 0 auto;
	width: 85%;
}

p {
  color: #9c9fa3;
  color: rgba(0,0,0,.52);
  font-size: 1.625em;
  line-height: 1.4em;
  letter-spacing: -1px;
  margin: 1em 0 0;
}

p.p1 {margin: 1em 0;}

small { 
  color:#BBB; 
  letter-spacing: 0;
  margin: 3em 0; 
}

hr {
  height:0px;
  border-radius: 1px;
  color: #d8d8d8;
  border: 1px solid #d8d8d8;
  width: 80%;
}

/*------------------------------------------------------------------------*/
/*	Name   given: Russ  surname: Gossett
/*------------------------------------------------------------------------*/
	
.given, .name {float:left;}

 .name {
	letter-spacing: -0.05em;
	}
	
.given b {font-size:120%;}
	
.given:after {
  content: 'G.';
  font-size: 125%;
  margin-left: 0.25em;
}
	
.surname {
  display: none;
  float:left;
}	

@media only screen and (min-width: 768px) {
	
  .header {margin: 50px auto 20px;}
	
  .given, .name {float: left;}
  
  .name {letter-spacing: 0;}
	
  .surname {
    float: left;
	font-size: 110%;
	clear: left;
	display: block;
	letter-spacing: -0.1em;
	margin-top: -0.4em;
	margin-left: -10%;
	}
	
  .surname b {
    font-size: 110%; 
    display: inline;
  }
	
  .given:after {content:'';}

}
  
@media (min-width: 768px) { 

  .tooltime {
    background-image:url('portfolio/images/tool-pencil.svg'), url('portfolio/images/tool-pen.svg'), url('portfolio/images/tool-marker.svg'), url('portfolio/images/tool-wacom.svg');
    background-position: 50% -75px, 60% -75px, 70% -75px, 80% -75px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 70px, 70px, 70px, 70px;
  }

  .tooltime:hover {
	background-position: 50% -75px, 60% -75px, 70% -75px, 80% -75px;
  }
	
  @-webkit-keyframes toolsover {
    0%    { background-position: 50% -75px, 60% -75px, 70% -75px, 80% -75px; }
    20%   { background-position: 50% -55px, 60% -75px, 70% -75px, 80% -75px; }
    40%   { background-position: 50% -75px, 60% -55px, 70% -75px, 80% -75px; }
    60%   { background-position: 50% -75px, 60% -75px, 70% -55px, 80% -75px; }
    80%   { background-position: 50% -75px, 60% -75px, 70% -75px, 80% -55px; }
    100%  { background-position: 50% -75px, 60% -75px, 70% -75px, 80% -75px; }
  }
  @keyframes toolsover {
    0%    { background-position: 50% -75px, 60% -75px, 70% -75px, 80% -75px; }
    20%   { background-position: 50% -55px, 60% -75px, 70% -75px, 80% -75px; }
    40%   { background-position: 50% -75px, 60% -55px, 70% -75px, 80% -75px; }
    60%   { background-position: 50% -75px, 60% -75px, 70% -55px, 80% -75px; }
    80%   { background-position: 50% -75px, 60% -75px, 70% -75px, 80% -55px; }
    100%  { background-position: 50% -75px, 60% -75px, 70% -75px, 80% -75px; }
  }	
	 
  .tooltime:hover {
	-webkit-animation: toolsover 1.5s .3s;
	animation: toolsover 1.5s .3s;
  }

}

@media only screen and (min-width: 1170px) { 

  .header, .page-content {
	width: 70%;
  }
	
}