@charset "UTF-8";
/*
 *
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.

    .                                      '||            .
  .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....
   ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...||
   ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||
   '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...'
        .. |      ||               ||
         ''      ''''             ''''      A Typographic Starter Kit

  URL ........... http://typeplate.com
  VERSION ....... 1.1.0
  Github ........ https://github.com/typeplate/typeplate.github.io
  AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
  LICENSE ....... Creative Commmons Attribution 3.0
  LICENSE URL ... http://creativecommons.org/licenses/by/3.0
  NOTE: Thanks to Tyler J. Fisher, whose code provided the foundation. http://tylerjfisher.com/resume/
 .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
 *
 */


body {
  word-wrap: break-word;
 }

pre code {
  word-wrap: normal; }

/**
 * Dropcap Sass @include
 * Use the following Sass @include with any selector you feel necessary.
 *
	@include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
 *
 * Extend this object into your custom stylesheet. Let the variables do the work.
 *
 */
html {
  font: normal 112.5%/1.65 "ff-tisa-web-pro", serif; }

body {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  color: #444444;
 }

small {
  font-size: 65%; }

h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-top: 0; }

.tera, .sidebar .circle h1 {
  font-size: 117px;
  font-size: 6.5rem;
  margin-bottom: 0.25385rem; }

.giga {
  font-size: 90px;
  font-size: 5rem;
  margin-bottom: 0.33rem; }

.mega {
  font-size: 72px;
  font-size: 4rem;
  margin-bottom: 0.4125rem; }

.alpha, h1 {
  font-size: 60px;
  font-size: 3.33333rem;
  margin-bottom: 0.495rem; }

.beta, h2 {
  font-size: 48px;
  font-size: 2.66667rem;
  margin-bottom: 0.61875rem; }

.gamma, h3 {
  font-size: 36px;
  font-size: 2rem;
  margin-bottom: 0.825rem; }

.delta, h4 {
  font-size: 24px;
  font-size: 1.33333rem;
  margin-bottom: 1.2375rem; }

.epsilon, h5 {
  font-size: 21px;
  font-size: 1.16667rem;
  margin-bottom: 1.41429rem; }

.zeta, h6 {
  font-size: 18px;
  font-size: 1rem;
  margin-bottom: 1.65rem; }

p {
  margin: auto auto 1.5em; }

abbr,
acronym,
blockquote,
code,
dir,
kbd,
listing,
plaintext,
q,
samp,
tt,
var,
xmp {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none; }

pre code {
  white-space: -moz-pre-wrap;
  white-space: pre-wrap; }

pre {
  white-space: pre; }

code {
  white-space: pre;
  font-family: monospace; }

/**
 * Abbreviations Markup
 *
	<abbr title="hyper text markup language">HMTL</abbr>
 *
 * Extend this object into your markup.
 *
 */
abbr {
  font-variant: small-caps;
  font-weight: 600;
  text-transform: lowercase;
  color: gray; }
  abbr:hover {
    cursor: help; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #222222; }

p + .drop-cap {
  text-indent: 0;
  margin-top: 0; }

/* .drop-cap:first-letter {
  float: left;
  margin: inherit;
  /* padding: inherit;
  padding-right: 5px;
  font-size: 4em;
  height: 1.2em;
  font-family: inherit;
  line-height: 1;
  text-indent: 0;
  background: transparent;
  color: inherit; } */

p.drop-cap:first-letter {
 float: left; 
 color: inherit; 
 font-size: 3.5em; 
 line-height: .8em; 
 padding-top: 4px; 
 padding-right: 8px; 
 padding-left: 0px; 
 font-family: inherit; }

/**
 * Lining Definition Style Markup
 *
	<dl class="lining">
		<dt><b></b></dt>
		<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.lining dt,
.lining dd {
  display: inline;
  margin: 0; }
.lining dt + dt:before,
.lining dd + dt:before {
  content: "\A";
  white-space: pre; }
.lining dd + dd:before {
  content: ", "; }
.lining dd:before {
  content: ": ";
  margin-left: -0.2rem; }

/**
 * Dictionary Definition Style Markup
 *
	<dl class="dictionary-style">
		<dt><b></b></dt>
			<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.dictionary-style dt {
  display: inline;
  counter-reset: definitions; }
  .dictionary-style dt + dt:before {
    content: ", ";
    margin-left: -0.2rem; }
.dictionary-style dd {
  display: block;
  counter-increment: definitions; }
  .dictionary-style dd:before {
    content: counter(definitions,decimal) ". "; }

/**
 * Blockquote Markup
 *
		<figure>
			<blockquote cite="">
				<p></p>
			</blockquote>
			<figcaption>
				<cite>
					<small><a href=""></a></small>
				</cite>
			</figcaption>
		</figure>
 *
 * Extend this object into your markup.
 *
 */
/**
 * Pull Quotes Markup
 *
	<aside class="pull-quote">
		<blockquote>
			<p></p>
		</blockquote>
	</aside>
 *
 * Extend this object into your custom stylesheet.
 *
 */
.pull-quote {
  position: relative;
  padding: 1em; }
  .pull-quote:before, .pull-quote:after {
    height: 1em;
    opacity: 0.5;
    position: absolute;
    font-size: 4em;
    color: #dc976e; }
  .pull-quote:before {
    content: '“';
    top: 0;
    left: 0; }
  .pull-quote:after {
    content: '”';
    bottom: 0;
    right: 0; }

/**
 * Figures Markup
 *
	<figure>
		<figcaption>
			<strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite>
		</figcaption>
	</figure>
 *
 * Extend this object into your markup.
 *
 */
/**
 * Footnote Markup : Replace 'X' with your unique number for each footnote
 *
	<article>
		<p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
		<footer>
			<ol class="foot-notes">
				<li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
			</ol>
		</footer>
	</article>
 *
 * Extend this object into your markup.
 *
 */
@font-face {
  font-family: Symbola;
  src: url("../fonts/Symbola.ttf"); }

html, body {
  height: 100%;
  font-family: "adelle-sans", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  background-color: #d8dbe5; /*#eee;*/ }
  @media print {
    html, body {
      height: 95%;
      background-color: white; }
      html a, body a {
        color: #444;
        text-decoration: none; } }

a {
  color: #a52f14; }

h2 {
  font-weight: 100;
  font-family: "adelle", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; }
  h2 a {
    text-decoration: none; }
    h2 a:hover {
      text-decoration: underline; }
    

.sidebar {
 position: fixed;
  left: 0px;
  top: 0px;
  width: 22%;
  height: 100%;
  float: left;
  background-color: #465c8d; /* #3C6FE3; #a52f14;*/
  color: #eee; }
  .sidebar a {
    color: #eee; }
  .sidebar .circle {
    height: 200px;
    width: 200px;
    position: relative;
    top: 20%;
    margin: 0 auto;
    background-color: #eee;
    border-radius: 100px; }
    
  .sidebar .name {
    color: #eee;
    position: relative;
    top: 5%;
    text-align: center; }
    .sidebar .name h2 {
      color: white; /* #eee; */
     font-family: 'Droid Serif', serif; }
      
  .sidebar .contact {
    position: relative;
    top: 25%;
    text-align: center;
    list-style-type: none;
    margin-top: 0;
    padding: 0; }
    .sidebar .contact li {
      display: inline-block; }
    .sidebar .contact li:first-child:after {
      content: " | "; }
      
  .sidebar .reference {
    position: relative;
    top: 25%;
    color: #eee;
    text-align: center; }
    
   .sidebar .social {text-align: center; margin-top: 20%;}
   .sidebar .social img {max-width: 20%;}
   
  @media print {
    .sidebar {
      background-color: black; }
      .sidebar .circle {
        width: 125px;
        height: 125px; }
      .sidebar h1 {
        top: -30px !important;
        color: black !important; }
      .sidebar .name h2 {
        font-size: 24px; }
      .sidebar p, .sidebar ul {
        font-size: 11px; }
      .sidebar .contact li {
        display: block; }
        .sidebar .contact li:first-child:after {
          content: ""; } }
          
  @media screen and (max-width: 1040px) {
    .sidebar .name h2 {
      font-size: 32px; }
    .sidebar .contact li {
      display: block; }
      .sidebar .contact li:first-child:after {
        content: ""; } }
        
  @media screen and (max-width: 800px) {
    .sidebar .circle {
      width: 125px;
      height: 125px; }
    .sidebar h1 {
      top: -30px !important; }
    .sidebar p, .sidebar ul {
      font-size: 14px; } }
      
 @media screen and (max-width: 650px) {
    .sidebar {
      clear: both;
      width: 100%;
      height: 120px;
      z-index: 100; }
      .sidebar .name {
        display: inline-block;
        top: 0%;
        width: 100%; }
        .sidebar .name h2 {
          margin-top: 0px !important;
          font-size: 26px;
          margin-bottom: 0px !important; }
      .sidebar .circle, .sidebar .contact, .sidebar .reference {
        display: none; } 
      .sidebar .social img {max-width: 30px; margin: 0px auto;}
      .sidebar .social {text-align: center; margin-top: 0px;}
      .linklist {display: none;} 
      .lettera {display: none;} 
      /* .edge {display: none;} */
}


.linklist {text-align: left;}
.linklist a {text-decoration: none; font-size: .9em;}

.main {
 width: 75%;
  margin-bottom: 20px;
  float: right; }
  
  .main .txt {
    padding-left: 0px;    
    .main .txt .info {
      padding: 20px 50px 0;
   font-family: 'Droid Sans', sans-serif;
    
  .main h2 {
    color: #a52f14; }
  .main .skills-list {
    list-style-type: none;
    margin-top: 0;
    padding: 0; }
  .main strong {
    color: #222; }
    
  @media print {
    .main .txt {
      padding-left: 0px; }
    .main .txt .info {
      padding: 5px 25px 0; }
    .main h2, .main h4, .main p {
      margin-bottom: .75em; }
    .main h2 {
      font-size: 20px;
      color: #222; }
    .main h4 {
      font-size: 15px; }
    .main p, .main ul {
      font-size: 12px;
      margin-bottom: .5em; }
    .main .extra {
      display: none; } }
      
  @media screen and (max-width: 650px) {
    .main {
      width: 100%;
      position: relative;
      clear: both;
      top: 80px; }
      .main .txt {
        padding-left: 15px; }
      .main .txt .info {
        padding: 5px 15px 0; }
      .main h2 {
        font-size: 24px; }
      .main h4 {
        font-size: 18px; }
      .main p, .main ul {
        font-size: 14px; } }