@import url("/_lib/normalize-8.0.1.css");
@import url("/_lib/skeleton.css");
@import url("/_lib/lazyload.css");

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html { font-size: 62.5%; }
body {
  font-size: 2rem; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.4;
  font-family: 'Neuton', serif;
  font-weight: 400;
/*
  color: #665;
  background-color: #f9f9f9;
*/
  color: #ddd;
  background-color: #222;
  }

/* 22-05-15: Replaced Newsread with Neuton */ 

@media (min-width: 1480px) {
	body { 
		font-size: 2.4rem;
		}
	}
  
ul, li {
/* 	color: #665; */
	color: #222;
/* 	color: #ddd; */
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #dde; }

a:hover { color: #F9BE27; }

p a { 
	text-decoration: none; 
    position: relative;
    white-space: nowrap;
    color: #dde;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
	}

p a:after {
	content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2px;
    background-color: #99a;
    opacity: 0.5;
    z-index: -1;
    box-sizing: border-box;
	}

p a:hover {
	color: #F9BE27;
	}

p a:hover:after {
	background-color: transparent;
	}

header { 
	margin-bottom: 2rem; 	
	padding-bottom: 2.4rem;
/* 	border-bottom: 1px solid #ccc; */
/* 	text-transform: uppercase; */
	font-size: 1.3rem;
	text-align: center;
	}

header .subhead {
	float: left; 
	margin-top: 10px;
	text-indent: -3000px;
	font-size: 1.8rem;
	}

header .globalnav {
	float:right; 
	margin-top: -20px;
	font-family: "Work Sans";
	text-transform: uppercase;
	}

@media (min-width: 500px) {
	header .subhead { text-indent: 0; }
	header .globalnav {	margin-top: 15px; }
	}

@media (min-width: 500px) {
	header { 
/* 		margin-bottom: 10rem; */
		}
	}

header h1 {
	font-size: 1.4rem;
	font-weight: 500;
	margin-bottom: 0.5em;
	}

/* .wordmark { fill: #d11; } */
/* .wordmark { fill: #111; } */
.wordmark { fill: #aab; }

header a,
.backtotop a img {
	text-decoration: none;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	transition: opacity 0.5s;
	}
	
.backtotop a img:hover,
header a:hover {
	opacity: 0.3;
	}

#homeslice .gn-work,
.work .gn-work, 
.about .gn-about {
	text-decoration: line-through;
	opacity: 0.6;
	}


.profile { padding-bottom: 1em; }

strong { 
	font-weight: 800; 
	color: #dde;
	}

.alignright {
	text-align: left; 
	}
	
@media (min-width: 500px) {
	.alignright { 
		text-align: right; 
		}
	}

nav ol li {
	font-weight: 300;
	font-size: 2.0rem;	
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
/* 	border-bottom: 1px solid #ddc; */
	list-style: none;
	}

@media (min-width: 1200px) {
	nav ol li {
		font-size: 2.6rem;	
		}	
	}

@media (min-width: 500px) {
	nav ol li {
		padding-right: 1rem;
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: 0;
		}	
	}

nav ol li { }

nav ol li a { 
	display: block; 
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;	
	}

@media (min-width: 500px) {
	nav ol li,
	nav ol li a {
		display: inline-block;
		}	
	}

nav ol {
	counter-reset: the-counter;
	}

nav ol li:before {
	content: counter(the-counter) ". ";
	counter-increment: the-counter;
	color: #887;
/* 	font-size: 60%; */
	font-size: 65%;
	display: block;
/* 	width: 2.5rem; */
	width: 1.9rem;
	float: left;
/* 	margin-top: .7em; */
	margin-top: .5em;
	}

@media (min-width: 500px) {
	nav ol li:before {
		width: auto;
		padding-right: .5rem;
		}
	}

	
nav ol li a { text-decoration: none; }
/* nav ol li a:hover { color: #e88; } */
nav ol li a:hover { color: #eee; }

@media (min-width: 500px) {
		nav ol li a { text-decoration: underline; }
/* 		nav ol li a:hover { color: #e88; text-decoration: none; } */
		nav ol li a:hover { color: #F9BE27; text-decoration: none; }
	}


nav ol li.selected a { text-decoration: line-through; opacity: 0.3; }

nav { margin-top: 4rem; }

#content img { width: 100%; }

#content img[src*=".gif"] {
	width: 100%;
	margin: 0 auto;
	display: block;
	}

#content img[src*="loader"] {
	width: auto;
	margin: 0 auto;
	display: block;
	}

@media (min-width: 500px) {
	#content img[src*=".gif"] {
		width: auto;
		}
	}

.image { margin-bottom: 3rem; }

@media (min-width: 500px) {
	.image { 
/* 		margin-top: 5rem; */
		margin-bottom: 8rem; 
		}
	}
	
.image .description { 
	float: none;
/* 	margin: 1rem auto 6rem auto; */
/* 	text-align: center; */
	}

.image.vidya {
	margin-top: -13rem;
	}

#media .image>p {
	margin-bottom: 0.5rem;
	margin-left: 0;
	}

@media (min-width: 500px) {
	#media .image>p.description { 
		margin-top: 3rem; 
		margin-bottom: 10rem;
		}
	}

.image .description span {
	display: inline-block;
/* 	padding-bottom: 0.2rem; */
	padding-top: 0.3rem;
/* 	border-bottom: 2px solid #d11; */
    border-left: 4px solid #ccb;
    padding-left: 1rem;
    line-height: 1;
	}


img[src*="__"] {
    margin-top: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
/*
    -webkit-box-shadow: 0 5px 15px rgba(90,90,90,0.3);
    -moz-box-shadow: 0 5px 15px rgba(90,90,90,0.3);
    box-shadow: 0 5px 15px rgba(90,90,90,0.3);
*/
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	display: block;
	background: #bba;
	padding-top: 12px;
	margin-bottom: 20px;
	}

@media (min-width: 500px) {
	img[src*="__"] {
	    -webkit-border-radius: 6px;
	    -moz-border-radius: 6px;
	    border-radius: 6px;
/*
	    -webkit-box-shadow: 0 10px 30px rgba(90,90,90,0.3);
	    -moz-box-shadow: 0 10px 30px rgba(90,90,90,0.3);
	    box-shadow: 0 10px 30px rgba(90,90,90,0.3);
*/
	    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	    -moz-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
		padding-top: 20px;
		}
	}


.blurb {}


/* 21-05-07: Added new max-width for 1200px+ breakpoint for a more pleasant line measure. */ 

@media (min-width: 1200px) {
	.blurb .nine.columns { width: 50%; }
	}

h2 { 
	font-family: 'Neuton', serif;
	font-weight: 400;
	color: #F9BE27;
	}

.about h2,
.about strong { color: #111; }

.about a { color: #111; }
.about a:hover { color: #111; }
.about p a:after {
    background-color: #111;
	}


h2 {	
	font-size: 2.5rem; 
	}

h3 {
	font-weight: 800;
	font-size: 1.75rem;
	margin-bottom: 0.25em;
	letter-spacing: 0;
/* 	color: #554; */
	color: #111;
	}

#homeslice h3 {
	color: #ddd;
	font-weight: 100;
	font-size: 2rem;
	}

h4 {
/* 	font-weight: 800; */
	font-size: 1.2em;;
	}

.credits h4 {
	font-size: 1.6rem;
    padding-bottom: .5em;
    border-bottom: 4px solid #998;
    display: inline-block;
    margin-bottom: 1em;	
    }

@media (min-width: 1200px) {
	h3, #homeslice h3 { font-size: 2.6rem; }
	h2 { font-size: 3.0rem; }
	.credits h4 {
		font-size: 2.4rem;
		border-bottom: 8px solid #998;
		}
	}

.bio, .awards {
/* 	border-top: 1px solid rgba(255,255,255,0.5); */
    padding-top: 4rem;
    margin-top: 8rem;
	}

.awards em {
	white-space: nowrap;
	display:block;
	font-style: normal;
	color: #998;
	}

@media (min-width: 730px) {
	.awards em { width: auto; display:inline; }
	}

footer { 
	margin-bottom: 8rem; 
	margin-top: 8rem;
    font-size: 1.2rem;
    text-transform: uppercase;
	letter-spacing: .05rem;
	text-align: center;
	}


footer .three.columns.alignright {
	margin-top: 5rem;
	text-align: center;
	}


footer a:hover {
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
	text-decoration: none;
	}

.monogram a:hover,
.backtotop a:hover {
	opacity: 0.3;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
	}

.monogram { margin-top: 10rem; }

.monogram .mark { fill: #dde; }

.thefist,
.wave { fill: #dde; }

.about .monogram .mark,
.about .thefist { 
	fill: #111; 
	}

.hello svg { 
	position: relative;
	top: 6px;
	}

.copyright {
	margin-top: 2rem;
	}

div.homefeatures { 
	display: none;
	position: absolute; 
	}

#homeslice .homefeatures { display: block; position: relative; padding-bottom: 0.5em; }

.homefeatures a {
	text-decoration: none;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	transition: opacity 0.5s;
	}

.homefeatures a:hover { opacity: 0.3; }

#homeslice .homefeatures a img { filter: grayscale(0); }
#homeslice .homefeatures a:hover img { filter: grayscale(100%); }

.extlink { color: #F9BE27; }


body.about {
	background: none;
	}

@media (min-width: 550px) {
 body.about { 
/* 	background: url("../images/bitme-red-crop.png") 0 40% no-repeat fixed; */
	}
}



/* Responsive Video Resizing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.js-video {
  height: 0;
  padding-top: 60px;
  padding-bottom: 41.25%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 550px) {
 .js-video { padding-bottom: 48.25%; }
}

@media (min-width: 1000px) {
 .js-video { padding-bottom: 52.25%; }
}


.js-video embed, .js-video iframe, .js-video object, .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* colour block in intro area of project

.clrblck {
	position: absolute;
    background-color: #e6e8ef;
    width: 100%;
    height: 100vh;
    top: 0;
}

*/

#homeslice { 
/* 	background-color: #7d3e3b;  */
/*     background-color: #D11; */
	background-color: #222;
	}
	
#homeslice,
#homeslice h2, 
#homeslice strong,
#homeslice .extlink,
#homeslice nav ol li:before,
#homeslice a {
/* 	color: #e9dfdb; */
	color: #ddd;
	}

#homeslice nav ol li:before { opacity: 0.7; }

/*
#homeslice nav ol li { border-bottom: 1px solid rgba(255,255,255,0.5); }
@media (min-width: 550px) {
	#homeslice nav ol li { border-bottom: none; }
	}
*/

#homeslice footer a,
#homeslice nav ol li a,
#homeslice p a {
/* 	color: #e9dfdb; */
	color: #ddd;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
	}

#homeslice footer .backtotop a,
#homeslice footer .monogram a {
	opacity: 1;
	}

#homeslice footer .backtotop a:hover,
#homeslice footer .monogram a:hover {
	opacity: 0.5;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
	}


#homeslice footer a:hover,
#homeslice nav ol li a:hover,
#homeslice p a:hover {
/* 	color: #ed706e; */
	color: #F9BE27;
	}

#homeslice footer a:after,
#homeslice nav ol li a:after,
#homeslice p a:after { 
	background-color: #e9dfdb; 
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	transition: background-color 0.3s;
	}

#homeslice footer a:hover:after,	
#homeslice nav ol li a:hover:after,	
#homeslice p a:hover:after { background-color: transparent; }

#homeslice .wordmark,
#homeslice .mark,
#homeslice .thefist,
#homeslice .wave {
/* 	fill: #e9dfdb; */
	fill: #dde;
	}

.about h1 .wordmark {
	fill: #111;
	}
	
body.about ol li { margin: 0; }

body.about {
	background-color: #FDB600;
	color: #111;
	}

.nine.columns p { max-width: 680px; } /* 210519 edit maxwidth */

.thebar {
	width: 100%; 
	height:8px; 
	background-color: #F9BE27; 
	position: relative; 
	top: -30px; 
/* 	margin-bottom: 30px; */
	}
	
.about .thebar { background-color: #111; }

.about a:hover { color: #fff; }

@media (min-width: 800px) {
.about div.profile { 
	background: #ccc url("../images/bitme-grey-square-crop.png") 0 0 no-repeat;
	width: 600px;
	height: 600px;
	margin: 0 0 0 -30%;
	padding: 0;
	}

.about div.profile div {
	position: relative;
	float: left;
	left: 95%;
	top: 30%;
	}
}