/* ================================================================
   HTML5 Boilerplate CSS:
   ================================================================ */

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif;color:#222}body{margin:0;font-size:1em;line-height:1.4}::-moz-selection{background:RGBA(0,0,0,0.9);color:#fff;text-shadow:none}::selection{background:RGBA(0,0,0,0.9);color:#fff;text-shadow:none}a{color:#00e}a:visited{color:#551a8b}a:hover{color:#06e}a:focus{outline:thin dotted}a:hover,a:active{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:bold}pre,code,kbd,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:"";content:none}small{font-size:85%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}ul,ol{margin:0;padding:0 0 0 0}dd{margin: 0}nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;*margin-left:-7px;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*width:13px;*height:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top;resize:vertical}input:invalid,textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{margin:.2em 0;background:#ccc;color:black;padding:.2em 0}

/* ================================================================
   html, body, nav, hgroup, section, article,  styles and stuff...
   ================================================================ */

   html {
   	height: 100%;
   }

   body {
    max-width: 1200px;
    margin: 140px auto 0;
   	padding: 0 100px;
   	background: #fff;
   	font-family: "PT Serif", "georgia", serif;
   	color: #4B4C4D;
   	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
   }

   header {
   	margin: 0 0 100px;
    position: relative;
    z-index: 2;
   }

   /*#logo {
   	opacity: .6;
   	margin-bottom: 80px;
   }*/

   #left {
    position: relative;
    z-index: 2;
  }

   #about {
   	margin-bottom: 40px;
    margin-top: 100px;
    max-width: 900px;
   }

   .columns {
    float: left;
    position: relative;
    margin-right: 100px;
}

   #face {
   	/*position: fixed;*/
   	bottom: 80px;
   	right: 0;
    z-index: 1;
   }

   @media screen and (max-height: 800px) {
    #face {
      bottom: auto;
      top: 500px;
    }
   }

   #face img {
    height: auto;
    max-width: 100%;
    margin: 0 auto;
   }

   @media screen and (max-width: 1340px) {
    #face {
      width: 70%;
    }
   }

   @media screen and (max-width: 800px) {
    #face {
      width: auto;
    }
   }

  /*#links {
   	position: fixed;
   	bottom: 25px;
   }

   @media screen and (max-height: 940px) {*/
    #links {
      /*bottom: auto;*/
      position: relative;
      margin-top: 90px;

            bottom: 30px;

    }


/* ===================================
   typography and stuff...
   =================================== */

   h3 {
    font-family: "lust-script",sans-serif;
    font-size: 44px;
    line-height: 60px;
    font-style: normal;
    font-weight: 400;
    color: #747C6F;
    margin: 0;
    margin-bottom: 70px;
 /*   opacity: .8;*/
   }

   h1 {
  	font-size: 48px;
  	line-height: 62px;
  	font-weight: 300;
  	color: #323233;
  	text-shadow: 0px 1px 2px rgba(0,0,0,0.16);
  	margin: 0;
   }

   h2 {
   	font-family: "adelle-sans",sans-serif;
   	font-size: 20px;
   	line-height: 18px;
   	font-style: normal;
   	font-weight: 400;
   	color: #F25B44;
   	margin: 0 0 6px;
   }

   h4 {
   	font-family: "PT Serif", "georgia", serif;
   	font-size: 20px;
   	line-height: 25px;
   	margin: 0;
   	font-style: normal;
   	font-weight: 400;
   }

    h5 {
    font-family: "PT Serif", "georgia", serif;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
    font-style: normal;
    font-weight: 800;
   }

   ul {
   	list-style: none;
   }

	ul {
	  columns: 2;
	  -webkit-columns: 2;
	  -moz-columns: 2;
	}

   li {
   	font-size: 18px;
   	line-height: 25px;
   	margin: 0;
   }

   p {
   	font-family: "adelle-sans",sans-serif;
   	font-size: 18px;
   	line-height: 18px;
   	font-style: normal;
   	font-weight: 400;
   	margin: 0;
   }


/* ===================================
   anchors and stuff...
   =================================== */

   a {
   	color: #323233;
   	-webkit-transition: all 0.2s ease-in-out;
   	-moz-transition: all 0.2s ease-in-out;
   	transition: all 0.2s ease-in-out;
   }

   p > a {
   	color: #9B9B9B;
   	text-decoration: none;
   }

   a:visited {
   	color: #323233;
   }

   p > a:visited {
   	color: #9B9B9B;
   }

   a:hover {
   	color: #747C6F;
   }

   p > a:hover {
   	color: #747C6F;
   }

   a:active,
   a:focus{
   }


/* ===================================
   media queries and stuff...
   =================================== */

   @media screen and (max-width: 768px) {

  	body {
  		margin: 80px auto auto 0;
  		padding: 0 30px;
  		overflow-x: hidden;
  		-webkit-transition: all 0.2s ease-in-out;
  		-moz-transition: all 0.2s ease-in-out;
  		transition: all 0.2s ease-in-out;
  	}

  	header {
  		margin: 0 0 80px;
  	}

/*  	#logo {
  		opacity: .6;
  		margin-bottom: 40px;
  	}*/

  	h1 {
  		font-size: 40px;
  		line-height: 52px;
  		}

  	#links {
  		position: relative;
  		margin-top: 100px;
      margin-bottom: 25px;
  		}

  	#face {
  		position: static;
      text-align: center;
  		width: auto;
      top: auto;
      bottom: auto;
  	}

   }