/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END RESET */

/***** COLOURS *****/

.dark-grey { background-color: #231f20; }
.light-grey { background-color: #939598; }
.blue { background-color: #0000ff; }
.light-blue { background-color: #3366ff; }
.green { background-color: #24ffe9; }

/***** PAGE STYLES *****/

html {
  height:100%;
  width:100%;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 10rem;
  min-height: 100%;
  font-size: 100.0%;
  background-color: #fff;   
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
    opacity: 1;
    transition: 1.7s opacity;
}

body.fade-out {
    opacity: 0;
    transition: none;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2em 3em;
  text-align: left;
}

::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: #24ffe9;
}

::selection {
    color: #fff; 
    background: #24ffe9;
}

hr {
  margin-bottom: 1.5em;
}

/***** LINK STYLES *****/

a {
  transition: all .4s ease-in-out;
}

.nav a, .intro a, .contact a, h4 a, h5 a, .button a, p a {
  color: #939598;
  text-decoration: none;
  position: relative;
}

.nav a:after, .intro a:after, .contact a:after, h4 a:after, h5 a:after, .button a:after, p a:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #24ffe9;
  transition: 0.4s;
}
.nav a:hover, .intro a:hover, .contact a:hover, h4 a:hover, h5 a:hover, .button a:hover, p a:hover {
  color: #231f20;
}

.nav a:hover:after, .intro a:hover:after, .contact a:hover:after, h4 a:hover:after, h5 a:hover:after, .button a:hover:after, p a:hover:after {
  width: 100%;
}

/***** TEXT STYLES *****/

 p, footer p, li, h1, h2, h3, h4, h5, .button {
  font-family: 'basis-grotesque-regular', Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 1.3125em;
  line-height: 1.3125em;
  color: #231f20;
 }

.intro h2 {
  font-size: 2.635em;
  line-height: 1.3125em;
  text-indent: 0em;
  padding-bottom: 1.5em;
 }

.intro p {
  font-size: 1.75em;
  line-height: 1.35em;
 }

.intro p + p {
  padding-bottom: 0;
 }

p {
  text-indent: 0;
}

li, footer p {
  text-indent: 0;
  padding-bottom: 0;
}

p + p {
  padding-bottom: 3em;
  text-indent: 3em; 
}

footer p + p {
  margin-top: 1em;
  margin-bottom: 3em;
  padding-bottom: 0;
  text-indent: 0; 
}

.image + p {
  margin-top: 50px;
}

h1 {
  text-indent: 0;
  margin: 0;
}

h1 + h2 {
  padding-bottom: 0;
}

h2 {
  text-indent: 0;
  padding-bottom: 0;
}

.project-thumb .project-thumb-overlay span h2 {
  padding-bottom: 0;
  text-indent: 0;
}

h3 {
  text-indent: 0;
  margin-top: 0;
  padding-bottom: 0;
  color: #939598;
}

h4 {
  margin-bottom: 1em;
  margin-left: 51.25%;
}

h5 {
  margin-left: 51.25%;
}

strong, b {
  font-weight: 700;
  font-style: normal;
}

em, i {
  font-style: italic;
}

.column p {
  color: #939598;
}

.bio p {
  padding-bottom: 0;
  text-indent: 0; 
}

.bio p:nth-child(2) {
  padding-bottom: 0em;
}

.bio p:nth-child(3) {
  padding-bottom: 1em;
  color: #939598; 
}

.bio p:nth-child(4) {
  padding-bottom: 3em; 
}

.contact p {
  padding-bottom: 0;
  text-indent: 0; 
}

.contact p:nth-child(3) {
  margin-top: 1em;
}

.margin-bottom {
  margin-bottom: 1em;
}

/***** Layout *****/

.logo-small {
  display: none !important;
}

section {
  width: 100%;
  margin: 0 auto;
}

.inside {
  max-width: 1500px;
  margin: 0 auto;
  padding: 2em 3em;
}

.span-3 {
  margin: 0 2.5% 30px 0;
  width: 23.12%;
  float: left;
}

.footer .span-3 {
  margin: 0;
}

.span-4 {
  margin: 0 2.5% 30px 0;
  width: 31.66%;
  float: left;
}

.span-6 {
  margin: 0 2.5% 30px 0;
  width: 48.75%;
  float: left;
}

.span-8 {
  margin: 0 2.5% 30px 0;
  width: 65.83%;
  float: left;
}

.span-9 {
  margin: 0 2.5% 30px 0;
  width: 74.37%;
  float: left;
}

.span-12 {
  margin: 0 0 30px 0;
  width: 100.0%;
  float: left;
}

.break {
  margin-bottom: 5em !important;
}

.last {
  margin-right: 0 !important;
}

.right {
  float: right !important;
  text-align: right;
}

.content, footer .inside {
  padding-top: 8em;
}

.content-column {
  overflow: hidden;
  height: auto;
  margin: 0 0 1em 0;
  padding: 0;
}

.content-column img {
  display: block;
  max-width: 100%;
}

/***** HEADER *****/

.header-left {
  float: left;
  margin: 0;
  vertical-align: middle;
}

.header-right {
  margin: 0;
  float: right;
  vertical-align: middle;
  text-align: right;
}

.header-right li {
  display: inline;
  margin: 0;
  padding: 0 0 0 2em;
}

/***** TEXT COLUMNS *****/

.columns {
  margin-right: 0;
}

.column {
  display: inline-block;
  vertical-align: top;
  width: 48.75%;
  margin-right: 2.5%;
}

.column:nth-child(2) {
  width: 48.75%;
  margin-right: 0;
}

/***** PROJECTS *****/

.project-thumb:nth-child(3n+3) {
  margin-right: 0 !important;
}

.project-thumb {
  position: relative;
  margin: 0 2.5% 30px 0;
  width: 31.66%;
  float: left;
}

.project-thumb img {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  z-index: 1
  transform: translate3d(0px,0px,0px);
}

.project-thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.project-thumb a .project-thumb-overlay {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  z-index: 10;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translate3d(0px,0px,0px);
}

.project-thumb a:hover .project-thumb-overlay {
  opacity: 1;
}

.project-thumb .project-thumb-overlay span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}

.project-start {
  margin: 3em 0 0 0;
}

/***** BACK-TO-TOP *****/

@keyframes bounce {
  0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

.back-to-top:hover {
  animation: bounce 1s;
}

/***** TOP *****/

.top {
  text-align: right;
  margin: 2em 0 2em 0;
}

.top a {
  color: #000;
  text-decoration: none;
  transition: all .8s ease-in-out;
}

.top a:active {
  color: #0000ff;
}

.top a:hover {
  color: #0000ff;
  text-decoration: none;
}

/***** FOOTER *****/

.end {
  padding-bottom: 6em;
}

/***** FADE-IN *****/

.image {
  visibility: hidden;
}

.fadeIn {
  -webkit-animation: animat_show 2.0s;
  animation: animat_show 2.0s;
  visibility: visible !important;
}

@-webkit-keyframes animat_show{
  0%{opacity:0}
  100%{opacity:1}
}

/***************************** 1368px *****************************/

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

}

/***************************** 1000px *****************************/

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


.project-column {
  padding: 2em 0 0 0;
}

.footer {
  width:100%;
  margin: 0 auto;
}

.project-thumb:nth-child(3n+3) {
  margin-right: 2.5% !important;
}

.project-thumb:nth-child(2n+2) {
  margin-right: 0 !important;
}

.project-thumb {
  position: relative;
  margin: 0 2.5% 30px 0;
  width: 48.75%;
  float: left;
}

}

/***************************** 45em *****************************/

@media only screen and (max-width: 45em) {

/* TEXT STYLES */

.intro h2 {
  font-size: 2em;
  padding-bottom: 1.5em;
 }

h4, h5 {
  margin-left: 0;
}

/* LAYOUT STYLES */

.hidden {
  display: none;
}

.inside {
  padding: 2em 2em;
}

.content {
  padding-top: 6em;
}

.content-column {
  margin: 0;
}

.span-4, .span-6, .span-8, .span-9 {
  margin: 0 0 2em 0;
  width: 100%;
}

.footer .span-6 {
  margin: 0 2.5% 30px 0;
  width: 48.75%;
}

.logo-big {
  display: none !important;
}

.logo-small {
  display: inline-block !important;
}

.project-thumb {
  position: relative;
  margin: 0 0 3em 0;
  width: 100%;
  float: left;
}

.project-thumb a .project-thumb-overlay {
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(35, 31, 32, 0);
}

.project-thumb .project-thumb-overlay span {
  position: relative;
  top: 1em;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0)
}

.project-thumb a {
  color: #939598;
  text-decoration: none;
}

.project-thumb .project-thumb-overlay span h2 {
  color: #231f20;
}

}

/* ----------- iPhone 5 and 5S ----------- */

@media only screen 
 and (min-device-width: 320px) 
 and (max-device-width: 568px)
 and (-webkit-min-device-pixel-ratio: 2)
 and (orientation: portrait) {

/* TEXT STYLES */

body {
  font-size: 200%;
}

.intro h2 {
  font-size: 2.5em;
  padding-bottom: 1.5em;
 }

h4, h5 {
  margin-left: 0;
}

/* LAYOUT STYLES */

.hidden {
  display: none;
}

.inside {
  padding: 2em 2em;
}

.content {
  padding-top: 6em;
}

.content-column {
  margin: 0;
}

.span-4, .span-6, .span-8, .span-9 {
  margin: 0 0 2em 0;
  width: 100%;
}

.footer .span-6 {
  margin: 0 2.5% 30px 0;
  width: 48.75%;
}

.logo-big {
  display: none !important;
}

.logo-small {
  display: inline-block !important;
}

.project-thumb {
  position: relative;
  margin: 0 0 3em 0;
  width: 100%;
  float: left;
}

.project-thumb a .project-thumb-overlay {
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(35, 31, 32, 0);
}

.project-thumb .project-thumb-overlay span {
  position: relative;
  top: 1em;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0)
}

.project-thumb a {
  color: #939598;
  text-decoration: none;
}

.project-thumb .project-thumb-overlay span h2 {
  color: #231f20;
}

/***** LINK STYLES *****/

a {
  transition: none;
}

}

/* ----------- iPhone 6 ----------- */

@media only screen 
 and (min-device-width: 375px) 
 and (max-device-width: 667px) 
 and (-webkit-min-device-pixel-ratio: 2)
 and (orientation: portrait) { 

/* TEXT STYLES */

body {
  font-size: 200%;
}

.intro h2 {
  font-size: 2.5em;
  padding-bottom: 1.5em;
 }

h4, h5 {
  margin-left: 0;
}

/* LAYOUT STYLES */

.hidden {
  display: none;
}

.inside {
  padding: 2em 2em;
}

.content {
  padding-top: 6em;
}

.content-column {
  margin: 0;
}

.span-4, .span-6, .span-8, .span-9 {
  margin: 0 0 2em 0;
  width: 100%;
}

.footer .span-6 {
  margin: 0 2.5% 30px 0;
  width: 48.75%;
}

.logo-big {
  display: none !important;
}

.logo-small {
  display: inline-block !important;
}

.project-thumb {
  position: relative;
  margin: 0 0 3em 0;
  width: 100%;
  float: left;
}

.project-thumb a .project-thumb-overlay {
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(35, 31, 32, 0);
}

.project-thumb .project-thumb-overlay span {
  position: relative;
  top: 1em;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0)
}

.project-thumb a {
  color: #939598;
  text-decoration: none;
}

.project-thumb .project-thumb-overlay span h2 {
  color: #231f20;
}

}

/* ----------- iPhone 6+ ----------- */

@media only screen 
  and (min-device-width: 414px) 
 and (max-device-width: 736px) 
 and (-webkit-min-device-pixel-ratio: 3)
 and (orientation: portrait) {

/* TEXT STYLES */

body {
  font-size: 200%;
}

.intro h2 {
  font-size: 2.5em;
  padding-bottom: 1.5em;
 }

h4, h5 {
  margin-left: 0;
}

/* LAYOUT STYLES */

.hidden {
  display: none;
}

.inside {
  padding: 2em 2em;
}

.content {
  padding-top: 6em;
}

.content-column {
  margin: 0;
}

.span-4, .span-6, .span-8, .span-9 {
  margin: 0 0 2em 0;
  width: 100%;
}

.footer .span-6 {
  margin: 0 2.5% 30px 0;
  width: 48.75%;
}

.logo-big {
  display: none !important;
}

.logo-small {
  display: inline-block !important;
}

.project-thumb {
  position: relative;
  margin: 0 0 3em 0;
  width: 100%;
  float: left;
}

.project-thumb a .project-thumb-overlay {
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(35, 31, 32, 0);
}

.project-thumb .project-thumb-overlay span {
  position: relative;
  top: 1em;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0)
}

.project-thumb a {
  color: #939598;
  text-decoration: none;
}

.project-thumb .project-thumb-overlay span h2 {
  color: #231f20;
}

}