@charset "utf-8";


/* GENERAL LAYOUT
============================================================================================ */
html {height: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body {color: #000; font: 16px/1 "Raleway", sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: 300; height: 100%; margin: 0; width: 100%;}
main#slideout-main {height: 100%;}
a,
a * {transition: all 0.3s;}
.clear {clear: both;}

/* slideout.js fix */
.slideout-open,
.slideout-open .slideout-panel {overflow: visible !important;}
.slideout-open body {overflow-x: hidden !important; overflow-y: visible !important;}

/* fancybox.js adjustments */
.fancybox-caption {font: 16px/1 "Raleway", sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;}
.fancybox-caption > em {color: rgba(255,255,255,0.7); font-family: "Roboto", sans-serif; font-size: 0.9em; font-style: italic; padding-left: 10px;}
.fancybox-caption > span {display: block; font-size: 0.8em; font-family: "Roboto", sans-serif; padding-top: 5px;}
.fancybox-caption > span em {font-style: italic;}


/* SLIDEOUT MENU
============================================================================================ */
/* slideout: plugin */
.slideout-menu {bottom: 0; display: none; min-height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; position: fixed; top: 0; width: 320px; z-index: 0;}
.slideout-menu-left {left: 0;}
.slideout-menu-right {right: 0;}
.slideout-panel {background-color: #fff; min-height: 100vh; position: relative; will-change: transform; z-index: 1;}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {overflow: hidden;}
.slideout-open .slideout-menu {display: block;}

/* slideout: navigation */
#slideout-menu {background: #00a971; overflow: hidden;}
.slideout-wrapper {display: none; position: relative;}
.slideout-wrapper > i {color: rgba(255,255,255,0.5); font-size: 1.5em; position: absolute; right: 20px; top: 20px; transition: 0.3s;}
.slideout-wrapper > i:hover {color: rgba(255,255,255,0.8); cursor: pointer;}
.slideout-wrapper a {color: rgba(255,255,255,1);}
.slideout-wrapper a:hover {color: rgba(255,255,255,0.7); cursor: pointer;}
.slideout-wrapper nav {font-size: 2em; padding: 50px 0 25px 25px;}
.slideout-wrapper nav > a {display: block; padding: 10px 0; text-decoration: none;}
.slideout-wrapper ul {padding: 25px 0 0 25px; width: 200px;}
.slideout-wrapper li {display: inline-block; font-size: 1.5em; margin: 0 10px 10px 0; width: 30px;}


/* HEADER
============================================================================================ */
header {backface-visibility: hidden; box-sizing: border-box; color: #fff; height: 65px; left: 0; position: fixed; top: 0; transition: 0.75s; width: 100%; z-index: 999;}
header * {transition: 0.3s;}
header > div {height: 100%; position: relative;}
header figure {background: #fff; box-shadow: none; height: 0; left: 0; margin: 0; position: absolute; top: 0; width: 100%; z-index: 0;}
header a {display: block; height: 100%; left: 0; padding-left: 15px; position: absolute; top: 0; z-index: 10;}
header a:hover {cursor: pointer;}
header i {color: #fff; display: inline-block; font-size: 2em; height: 100%; line-height: 65px !important; margin-right: 10px; vertical-align: top;}
header span {background: #00a971; border-radius: 50px; color: #fff; display: inline-block; font-family: "Playfair Display", serif; font-size: 1em; font-weight: 900; height: 45px; letter-spacing: -1px; line-height: 45px; margin: 10px 5px 0 0; opacity: 0; text-align: center; vertical-align: initial; width: 45px;}
header h1 {color: #06306e; display: inline-block; font-size: 1em; font-weight: 900; height: 100%; line-height: 65px; opacity: 0; padding-left: 25px; text-transform: uppercase; vertical-align: top; white-space: nowrap;}
header h1 em {color: #00a971; font-weight: 900;}

/* header: scroll */
.header-scroll header figure {box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); height: 100%;}
.header-scroll header i {color: #000;}
.header-scroll header span {opacity: 1;}
.header-scroll header h1 {opacity: 1; padding-left: 0;}


/* COVER
============================================================================================ */
.cover {background: linear-gradient(135deg, #2581c1 0%, #083472 50%, #06306e 100%);}
.cover-bg {background: url(../images/graphics/head-pattern.png) repeat center top; overflow: hidden; position: relative;}
.cover-intro {color: #fff; font-size: 1.1em; left: 40%; padding: 50px 10% 10px 10%; text-align: right;}
.cover h2 {font-family: "Playfair Display", serif; font-size: 4.5em; font-weight: 900; padding-bottom: 30px;}
.cover h3 {font-size: 1.2em; font-weight: 300; line-height: 115%;}
.cover h3 small {display: block; font-size: 0.8em; line-height: 115%; padding-top: 30px;}
.cover figure {background: url(../images/graphics/head-texture-sm.png) no-repeat center top; background-size: 150% auto; display: block; margin: 0; padding: 75% 0 0 0; position: relative; width: 100%;}
.cover figure img {height: auto; left: 20%; position: absolute; top: 0; width: 60%;}


/* PORTFOLIO WRAP
============================================================================================ */
section#design,
section#comics {background-color: #eee;}
section h4 {padding: 50px 0 30px 0;}
section h4 span {display: table-cell; vertical-align: middle; width: 50%;}
section h4 span:nth-child(2) {color: #00a971; font-family: "Playfair Display", serif; font-size: 1.6em; font-weight: 900; padding: 0 10px; text-align: center; white-space: nowrap; width: auto;}
section h4 hr {border: none; border-bottom: solid 2px #00a971; margin: 0;}
section h5 {margin: 0 auto; padding: 20px 0; width: 92%;}
section h5 span {display: table-cell; vertical-align: middle; width: 50%;}
section h5 span:nth-child(2) {color: #75b8da; font-family: "Playfair Display", serif; font-size: 1.2em; font-weight: 900; padding: 0 10px; text-align: center; white-space: nowrap; width: auto;}
section h5 hr {border: none; border-bottom: solid 1px #75b8da; margin: 0;}
div[class^="portfolio"] {margin: 0 auto; max-width: 500px; padding: 10px 5%;}


/* DESIGN WORK
============================================================================================ */
.portfolio-design a {display: block; margin-bottom: 7px; overflow: hidden; padding-top: 65%; position: relative; text-decoration: none; width: 100%;}
.portfolio-design a span {background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.95) 100%); box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10;}
.portfolio-design a div {bottom: 0; box-sizing: border-box; color: #fff; left: 0; padding: 10% 5% 5% 5%; position: absolute; width: 100%; z-index: 20;}
.portfolio-design a strong {display: block; font-size: 1.1em; font-weight: 900; text-transform: uppercase;}
.portfolio-design a em {display: block; font-size: 0.95em; font-weight: 300; line-height: 120%; padding-top: 5px;}
.portfolio-design a i {bottom: 10%; color: rgba(255,255,255,0.8); display: none; right: 10%; position: absolute; z-index: 30;}
.portfolio-design a figure {background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: 0;}
.portfolio-design a:hover {box-shadow: 0 0 10px 0 rgba(8,52,114,0.50); cursor: pointer;}
.portfolio-design a:hover span {background: rgba(0,169,113,0.60);}
.portfolio-design a:hover figure {filter: blur(.5px) grayscale(100%) brightness(50%); transform: scale(1.1);}

/* design: modal */
.modal-design {margin-left: 5%; margin-right: 5%; max-width: 1600px; padding: 50px 5%;}
.modal-design h6 {border-bottom: solid 2px #083472; color: #083472; font-family: "Playfair Display", serif; font-size: 1.6em; font-weight: 900; padding-bottom: 15px; text-align: center;}
.modal-design h6 small {color: #666; display: block; font: 16px/1 "Raleway", sans-serif; font-size: 0.6em; font-weight: 300; padding-top: 5px;}
.modal-design em {font-style: italic;}
.modal-design p {font-family: "Roboto", sans-serif; line-height: 130%; padding: 20px 0;}
.modal-design p small {color: #666; display: block; font-size: 0.8em; padding-top: 5px;}
.modal-design ul {color: #666; font-family: "Roboto", sans-serif; font-size: 0.9em; padding: 10px 0 25px 0;}
.modal-design li {line-height: 120%; min-height: 40px; padding: 5px 0 5px 40px; position: relative;}
.modal-design li i {color: #999; font-size: 1.8em; left: 0; position: absolute; top: 5px;}
.modal-design-link {margin-left: -40px; padding: 20px 0 0 0; text-align: center;}
.modal-design-link a {background: rgba(0,169,113,0); border: solid 2px rgba(0,169,113,1); border-radius: 3px; color: rgba(0,169,113,1); display: inline-block; font-family: "Raleway", sans-serif; font-size: 0.9em; font-weight: 500; padding: 10px 20px; text-decoration: none; text-transform: uppercase;}
.modal-design-link a:hover {background-color: rgba(0,169,113,1); color: #fff;}
.modal-design figure {clear: both; margin: 0; padding: 10px 0 30px 0;}
.modal-design figure img {width: 100%;}
.modal-design figure.shadow img {box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);}
.modal-design figcaption {color: #666; font-family: "Roboto", sans-serif; font-size: 0.85em; font-style: italic; padding-top: 7px; text-align: center;}


/* COMICS
============================================================================================ */
.portfolio-comics a {display: block; margin-bottom: 7px; overflow: hidden; padding-top: 100%; position: relative; text-decoration: none; width: 100%;}
.portfolio-comics a span {background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.95) 100%); box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10;}
.portfolio-comics a div {bottom: 0; box-sizing: border-box; color: #fff; left: 0; padding: 10% 5% 5% 5%; position: absolute; width: 100%; z-index: 20;}
.portfolio-comics a strong {display: block; font-size: 1.1em; font-weight: 900; text-transform: uppercase;}
.portfolio-comics a em {color: rgba(255,255,255,0.95); display: block; font-family: "Roboto", sans-serif; font-size: 0.85em; padding-top: 3px;}
.portfolio-comics a p {display: block; font-size: 0.95em; line-height: 120%; padding-top: 10px;}
.portfolio-comics a i {bottom: 10%; color: rgba(255,255,255,0.8); display: none; right: 10%; position: absolute; z-index: 30;}
.portfolio-comics a figure {background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: 0;}
.portfolio-comics a:hover {box-shadow: 0 0 10px 0 rgba(0,169,113,0.50);}
.portfolio-comics a:hover span {background: rgba(8,52,114,0.60);}
.portfolio-comics a:hover figure {filter: blur(.5px) grayscale(100%) brightness(50%); transform: scale(1.1);}

/* comics: pinups */
.portfolio-pinups a {display: block; float: left; line-height: 0; margin: 0 1% 5px 0; position: relative; width: 49%;}
.portfolio-pinups a img {box-sizing: border-box; height: auto; width: 100%;}
.portfolio-pinups a span {box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10;}
.portfolio-pinups a:hover img {box-shadow: 0 0 5px 0 rgba(0,169,113,0.50); filter: brightness(130%);}
.portfolio-pinups a:hover span {border: solid 4px #00a971; box-shadow: inset 0 0 0 1px rgba(0,0,0,0);}


/* ABOUT
============================================================================================ */
section#about {background: linear-gradient(to bottom, #eee 0%, #fff 100%); padding: 30px 0;}
#about > aside {background: #fff; box-shadow: 0 0 25px 0 rgba(0,0,0,0.2); box-sizing: border-box; margin: 0 auto; max-width: 1500px; padding: 0 30px 20px 30px; width: 95%;}
#about figure {display: block; margin: 0 auto 30px auto; max-width: 300px; width: 75%;}
#about figure div {padding-top: 120%; position: relative; width: 100%;}
#about figure div img {height: auto; left: 0; opacity: 0; position: absolute; top: 0; transition: 2s; width: 100%; z-index: 10;}
#about figure div img:first-child {opacity: 1; z-index: 20;}
#about figure div img:last-child {opacity: 1; transition: none;}
#about figcaption {color: #666; font-family: "Roboto", sans-serif; font-size: 0.9em; font-style: italic; padding-bottom: 15px; text-align: center;}
#about p {font-family: "Roboto", sans-serif; line-height: 120%; padding-bottom: 25px;}
section#about h5 {clear: both; width: 100%;}
#about ul {padding: 25px 0;}
#about li {font-family: "Roboto", sans-serif; line-height: 120%; padding-bottom: 10px;}
#about li span {color: #06306e; font-family: "Raleway", sans-serif; font-size: 0.95em; display: block; font-weight: 900; text-transform: uppercase;}
.about-resume {padding: 10px 0 25px 0; text-align: center;}
.about-resume a {color: #00a971; display: inline-block; border: solid 2px #00a971; font-weight: 900; padding: 15px 25px 15px 25px; text-decoration: none; text-transform: uppercase;}
.about-resume a i {display: inline-block; font-size: 1.1em; margin-right: 5px; vertical-align: middle;}
.about-resume a:hover {background: #00a971; color: #fff;}
#about p em,
#about li em {font-style: italic;}
#about p a,
#about li a {border-bottom: dotted 1px #75b8da; color: #4886a6; text-decoration: none;}
#about p a:hover,
#about li a:hover {border-color: #06306e; color: #06306e;}

/* about-flickr */
#about-flickr {padding: 25px 0; text-align: center;}
#about-flickr a {background-position: center center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); box-sizing: border-box; display: inline-block; margin: 3px 1%; padding-top: 31.3%; width: 31.3%;}
#about-flickr a:hover {box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), 0 0 5px 0 rgba(0,169,113,0.50); filter: brightness(130%);}


/* FOOTER
============================================================================================ */
footer {background: #fff; color: #000; padding: 50px 25px 25px 25px; text-align: center;}
footer ul {padding: 25px 0 0 0;}
footer li {display: inline-block; font-size: 1.5em; margin: 0 3px 10px 3px; width: 30px;}
footer a {color: #000;}
footer a:hover {color: #00a971;}
footer span {display: block; padding-top: 20px;}
footer span em {font-family: "Roboto", sans-serif; font-size: 0.9em; font-weight: 300;}
footer small {color: #888; display: block; font-size: 0.8em; padding-top: 5px;}


/* 404 ERROR
============================================================================================ */
section.error404 {margin: 0 auto; max-width: 1200px; padding: 50px 5%; text-align: center;}
section.error404 h1 {color: #75b8da; font-family: "Playfair Display", serif; font-size: 2em; font-weight: 900;}
section.error404 video {box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); height: auto; margin: 30px 0; width: 100%;}
section.error404 h2 {color: #06306e; font-size: 1.3em; font-weight: 300;}
section.error404 p {color: #333; line-height: 125%; padding: 30px 0;}
section.error404 a {color: #00a971; display: inline-block; border: solid 2px #00a971; font-weight: 900; padding: 15px 15px 15px 25px; text-decoration: none; text-transform: uppercase;}
section.error404 a i {font-size: 0.85em; margin: 0 10px 0 5px;}
section.error404 a:hover {background: #00a971; color: #fff;}
section.error404 a:hover i {margin: 0 0 0 15px;}








/* =========================================================================================
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
RESPONSIVE: MIN WIDTH: 500PX 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
============================================================================================ */

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


  /* cover */
  .cover {height: 100%; min-height: 500px;}
  .cover-bg {height: 100%;}  
  .cover-intro {left: 45%; padding: 0; position: absolute; top: 20%; text-align: left; width: 45%; z-index: 20;}
  .cover h3 {padding-left: 15px;}
  .cover figure {background-position: right bottom; background-size: auto 90%; bottom: 0; height: 90%; left: 0; padding: 0; position: absolute; text-align: center; top: auto; width: 50%; z-index: 10;}
  .cover figure img {display: inline-block; height: 100%; left: auto; margin-right: 20px; position: static; top: auto; width: auto;}

  /* portfolio wrap */  
  section h4 span:nth-child(2) {font-size: 2em;}
  section h5 span:nth-child(2) {font-size: 1.4em;}

  /* design work */ 
  .modal-design h6 {font-size: 2em;}
  .modal-design section figure {clear: none; float: left; width: 48%;}
  .modal-design section figure:nth-child(2) {float: right;}

  /* comics */    
  .portfolio-pinups a {width: 32.3%;}

  /* about */
  #about aside {width: 90%;}
  section#about h4 {padding-bottom: 50px;}
  #about figure {float: right; margin: 0 2% 25px 20px; width: 45%;}
  #about p {margin: 0 auto; width: 95%;}
  section#about h5 {padding-top: 35px;}
  #about ul {margin: 0 auto; width: 95%;}
  #about li {padding-bottom: 15px;}
  #about-flickr {margin: 0 auto; padding: 25px 0; width: 95%;}
  #about-flickr a {margin: 2px 0.5%; padding-top: 24%; width: 24%;}


}
@media screen and (min-width: 500px) and (max-aspect-ratio: 1/1) {


  /* cover */
  .cover {height: auto; min-height: 1px;}
  .cover-bg {height: auto; padding-top: 100%;}


}





/* =========================================================================================
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
RESPONSIVE: MIN WIDTH: 700PX 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
============================================================================================ */

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


  /* general layout */
  body {font-size: 17px;}

  /* slideout menu */
  .slideout-wrapper > i {right: 30px; top: 30px;}
  .slideout-wrapper nav {padding: 70px 0 35px 35px;}
  .slideout-wrapper ul {padding: 50px 0 0 35px;}

  /* header */
  header {height: 85px;}
  header a {padding-left: 25px;}
  header i {font-size: 2em; line-height: 85px !important; margin-right: 25px;}
  header span {font-size: 1.3em; height: 60px; letter-spacing: -2px; line-height: 60px; margin-top: 12px; width: 60px;}
  header h1 {font-size: 1.1em; line-height: 85px;}
  
  /* cover */
  .cover {min-height: 600px;}
  .cover-intro {font-size: 1.3em;}
  .cover h2 {font-size: 6;}
  .cover figure {background-image: url(../images/graphics/head-texture.png);}

  /* portfolio wrap */
  section h4 {padding: 70px 1% 30px 1%;}
  section h5 {padding: 20px 0; max-width: 1650px; width: 78%;}
  div[class^="portfolio"] {margin: 0 auto; max-width: 1600px; padding: 20px 12.5%;}

  /* design work */
  .portfolio-design a {padding-top: 60%;}
  .portfolio-design a span {background: none;}
  .portfolio-design a div {bottom: -20px; opacity: 0; padding: 10% 3.5% 3.5% 3.5%;}
  .portfolio-design a em {padding-right: 15%;}
  .portfolio-design a i {display: block; font-size: 2.5em; opacity: 0; right: 40px;}
  .portfolio-design a:hover div {bottom: 0; opacity: 1;}
  .portfolio-design a:hover strong {margin-bottom: 0;}
  .portfolio-design a:hover i {opacity: 0.7; right: 15px;}
  .modal-design {margin-left: 10%; margin-right: 10%; padding: 50px 5%;}  
  .modal-design li {padding-bottom: 12px;}
  .modal-design-link {clear: both;}
  
  
  /* comics */
  .portfolio-comics a {float: left; margin-right: 1%; padding-top: 50%; width: 49%;}
  .portfolio-comics a.large {width: 99%;}
  .portfolio-comics a span {background: none;}
  .portfolio-comics a div {bottom: -20px; opacity: 0; padding: 10% 7% 7% 7%;}
  .portfolio-comics a.large div {padding: 10% 3.5% 3.5% 3.5%;}
  .portfolio-comics a strong {margin-bottom: 30px;}
  .portfolio-comics a p {padding-right: 15%;}
  .portfolio-comics a i {display: block; font-size: 2.5em; opacity: 0; right: 40px;}
  .portfolio-comics a:hover div {bottom: 0; opacity: 1;}
  .portfolio-comics a:hover strong {margin-bottom: 0;}
  .portfolio-comics a:hover i {opacity: 0.7; right: 15px;}
  
  /* about */
  section#about {padding: 50px 0 30px 0;}
  #about aside {width: 85%;}
  #about figure {width: 35%;}

  /* footer */
  footer {padding-bottom: 50px;}
  footer li {margin: 0 5px 10px 5px;}

  /* 404 error */
  section.error404 {padding: 70px 5% 100px 5%;}
  section.error404 h1 {font-size: 2.5em;}
  section.error404 video {margin: 50px 0;}
  section.error404 h2 {font-size: 1.5em;}
  section.error404 p {font-size: 1.1em;}


}





/* =========================================================================================
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
RESPONSIVE: MIN WIDTH: 1000PX 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
============================================================================================ */

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


  /* general layout */
  body {font-size: 18px;}

  /* slideout menu */
  .slideout-wrapper nav > a {padding: 15px 0;}

  /* cover */
  .cover {min-height: 800px;}
  .cover-intro {font-size: 1.5em; max-width: 500px;}
  .cover h2 {font-size: 7em; padding-bottom: 50px;}
  .cover h3 small {padding-top: 50px;}
  .cover figure img {margin-right: 0;}

  /* portfolio wrap */  
  section h4 {padding-top: 100px;}

  /* design work */
  .modal-design p {float: left; width: 60%;}
  .modal-design ul {float: right; padding-top: 20px; width: 35%;}

  /* comics */    
  .portfolio-pinups a {margin-bottom: 10px; width: 24%;}

  /* about */
  #about aside {padding-top: 25px; padding-bottom: 50px; width: 85%;}
  #about figure {margin-right: 4%;}
  #about p {line-height: 140%; width: 90%;}
  #about ul {width: 90%;}
  #about li {padding-bottom: 25px;}
  #about li span {display: inline;}
  #about-flickr {width: 85%;}
  #about-flickr a {padding-top: 19%; width: 19%;}


}




/* =========================================================================================
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
RESPONSIVE: MIN WIDTH: 1200PX 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
============================================================================================ */

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

  /* portfolio wrap */  
  section h4 span:nth-child(2) {font-size: 2.4em;}
  section h5 {padding: 40px 16% 20px 16%; width: 65%;}
  section h5 span:nth-child(2) {font-size: 1.6em;}
  div[class^="portfolio"] {padding: 20px 18%;}

  /* design work */
  .portfolio-design a {float: left; margin: 0 1% 12px 0; padding-top: 30%; width: 49%;}
  .modal-design {padding: 100px 7%;}
  .modal-design h6 {font-size: 2.4em;}
  .modal-design h6 small {font-size: 0.45em; padding-top: 10px;}
  .modal-design p {line-height: 140%; padding: 30px 0;}
  .modal-design ul {padding: 25px 0;}
  .modal-design-link a {padding: 15px 30px;}
  .modal-design section figure {width: 49%;}

  /* comics */
  .portfolio-comics a {margin-bottom: 12px; padding-top: 33%; width: 32.3%;}
  .portfolio-comics a.large {width: 65.6%;}
  .portfolio-pinups a {width: 19%;}

  /* about */
  #about aside {padding-bottom: 80px;}
  #about figure {margin-right: 6%;}
  section#about h4 {padding-left: 5%; padding-right: 5%; width: 90%;}
  #about p {width: 85%;}
  section#about h5 {padding: 50px 5% 25px 5%; width: 90%;}
  #about ul {width: 85%;}
  #about-flickr {width: 75%;}


}





/* =========================================================================================
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
RESPONSIVE: MIN WIDTH: 1600PX 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
============================================================================================ */

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


  /* slideout menu */
  .slideout-wrapper > i {right: 36px; top: 36px;}

  /* header */
  header {font-size: 1.1em; height: 100px;}
  header i {line-height: 100px !important;}
  header span {font-size: 1.2em; margin-top: 20px;}
  header h1 {font-size: 1em; line-height: 100px !important;}

  /* cover */
  .cover {min-height: 900px;}
  .cover-intro {font-size: 1.7em; max-width: 700px; top: 30%;}
  .cover h2 {font-size: 8em;}

  /* portfolio wrap */  
  section h4 span:nth-child(2) {font-size: 2.8em;}
  section h5 span:nth-child(2) {font-size: 1.8em;}

  /* design work */
  .portfolio-design a div {font-size: 1.2em;}
  .modal-design h6 {font-size: 2.8em;}
  .modal-design p {padding: 40px 0;}
  .modal-design ul {padding: 35px 0;}
  
  /* comics */
  .portfolio-comics a div {font-size: 1.2em;}
  .portfolio-pinups a {margin: 0 0.6% 10px 0; width: 16%;}

  /* about */
  #about figure {margin-right: 8%;}
  #about p {line-height: 160%; width: 80%;}
  #about ul {width: 80%;}
  #about-flickr {width: 70%;}

  /* footer */
  footer {padding-top: 100px;}


}