/*	
--------------------------------------------------
	HTML5 Reset
-------------------------------------------------- 
*/

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, sub, sup, tt, var,
b, u, i, 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, 
menu, 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, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul{
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*	
--------------------------------------------------
	Additional Fixes
-------------------------------------------------- 
*/

.clear { clear: both; }
.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}

ul { list-style: none;}
 
.left { float: left; }
.right { float: right; }

a		{ border:none; }
img		{ border:none; }
a img	{ border:none; }
img, div { behavior: url(iepngfix.htc) }
img { border: none; }

img {
	max-width: 100%;
	height: auto;
	opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ 
}

/* img:hover { opacity:.9; filter:alpha(opacity=90); /* For IE8 and earlier */ 

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

::selection { background:#F4F4F4; /* Safari */}
::-moz-selection { background: #F4F4F4; /* Firefox */}
body { 	-webkit-tap-highlight-color: #F4F4F4;
		-moz-font-feature-settings: "liga", "kern";
		-moz-font-feature-settings:"liga=1, kern=1";
		-ms-font-feature-settings:"liga", "kern";
		-o-font-feature-settings:"liga", "kern";
		-webkit-font-feature-settings:"liga", "kern";
		font-feature-settings: "liga", "kern";
}


/* iframe, object, embed {max-height: 100%;} */


/*	
--------------------------------------------------
	Web Fonts
-------------------------------------------------- 
*/

/* @font-face {
font-family: 'Graphik Web';
src: url('...webfonts/Graphik-Regular-Web.eot');
src: url('...webfonts/Graphik-Regular-Web.eot?#iefix') format('embedded-opentype'),
url('...webfonts/Graphik-Regular-Web.woff2') format('woff2'),
url('...webfonts/Graphik-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}

@font-face {
    font-family: 'ballingerlight';
    src: url('ballinger-light-webfont.woff2') format('woff2'),
         url('ballinger-light-webfont.woff') format('woff'),
         url('ballinger-light-webfont.svg#ballingerlight') format('svg');
    font-weight: normal;
    font-style: normal;
} */


.inter-text {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
	
/*	
--------------------------------------------------
	Main Styling
-------------------------------------------------- 
*/


/*
	
Light Grey - #FCFCFC
Medium Grey - #f3f4f8
Dark Grey - #eaedf4

Highlight Grey - #F4F4F4
Background Grey - #f8f8f8

Text Black - #1f1f1f
	
*/


body {
	background-color:#ffffff; /*#f8f8f8*/
	color: #1f1f1f;
	font-family: 'Inter';
	font-weight: 400;
    font-style: Normal;
	font-size: 13px;
	line-height: 20px;
	padding: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 1512px;
}

nav {
	font-family: 'Inter';
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	font-size: 110%;
	position: fixed;
	right: 80px;
	top: 80px;
	z-index: 1001;
}

nav ul li a {
	color: #1f1f1f;
	border-bottom: 1px solid #1f1f1f;
    display: inline-block;
    line-height: 18px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
	
nav ul li a:visited { color: #1f1f1f; padding:20px; text-decoration: none; }
nav ul li a:active { color: #1f1f1f; padding:20px; text-decoration: none; }
nav ul li a:hover { color: rgba(30, 30, 30, 0.7); text-decoration: none; }

#avatar {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1001;
	display: none;
}


/* Opening 'About Me' note & links */

section#note {
	width: 100%;
	height: auto;
	background-color: #ffffff;
	position: relative;
}

section#note aside {
	width: 80%;
	margin: 0 auto;
	padding: 20% 0 8% 0;
	position: relative;
}

section#note p {
	font-size: 44px; /* 13px */
    line-height: 52px;
    font-family: 'Inter';
	font-weight: normal;
  	font-style: normal;
  	color: #2D2929;
    margin: 0;
    width: 67%;
}

section#note aside a {
	position: relative;
	text-decoration: none;
	color: #1f1f1f;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-bottom: 1px solid #1f1f1f;
    display: inline-block;
    line-height: 52px;
}

section#note aside a:visited { color: #1f1f1f; text-decoration: none; }
section#note aside a:active { color: #1f1f1f; text-decoration: none; }
section#note aside a:hover { color: rgba(30, 30, 30, 0.7); text-decoration: none; }

section#note aside a span {
	font-family: 'Inter';
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	font-size: 25%;
	width: 400px;
	bottom: 30px;
	position: absolute;
}


/* Project List */

a.project {
	color: #1f1f1f;
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

a.project:hover {
	color: rgba(30, 30, 30, 0.7);
}


article#project.fresco {
	color: white;
	background-color: #75083a; /*#f3f4f8 #82c9f4 #f3f4f8*/
	background-image: ;
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
    width: 100%;
    position: relative;
    display: block;
}


article#project.journal {
	color: white;
	background-color: #1b2da0; /*#f3f4f8 #82c9f4 #f3f4f8*/
	background-image: ;
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
    width: 100%;
    position: relative;
    display: block;
}


article#project.metalab {
	background-color: #615eff; /*#f3f4f8 #82c9f4 #f3f4f8*/
	background-image: ;
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
    width: 100%;
    position: relative;
    display: block;
}


article#project.fjord {
	background-color: #fcfcfc; /*#f3f4f8 #82c9f4 #f3f4f8*/
	background-image: url('../img/fjord.png');
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
    width: 100%;
    position: relative;
    display: block;
}


article#project.player_int {
	background-color: #fcd733; /* #ff5614 + #f3f4f8 */
	background-image: url('../img/player_int_2.png');
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
    width: 100%;
    position: relative;
    display: block;
}

article#project.process {
	background-color: #FCFCFC;/* #eaedf4 */
	background-image: url('../img/process.png');
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
    width: 100%;
    position: relative;
    display: block;
}

article#project.ww1 {
	background-color: #d03e3e; /*#FCFCFC*/
	background-image: url('../img/ww1.jpg');
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
    width: 100%;
    position: relative;
    display: block;
    color: white;
}

article#project.news_now {
	background-color: #fcfcfc; /*#f3f4f8 #82c9f4 #f3f4f8*/
	background-image: url('../img/rnn.png');
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
    width: 100%;
    position: relative;
    display: block;
}

article#project.gaago {
	color: white;
	background-color: #1abc9c;
	background-image: url('../img/gaago.jpg');
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
    width: 100%;
    position: relative;
    display: block;
}

article#project.hmkl {
	background-color: #FCFCFC; /*#eaedf4*/
	background-image: url('../img/hmkl_2.png');
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
    width: 100%;
    position: relative;
    display: block;
}

article#project.bell_x1 {
	color: white;
	background-image: url('../img/bell_x1_2.jpg');
	
    background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
    height: auto;
    width: 100%;
    position: relative;
    display: block;
}

#wrap {
	width: 80%;
	margin: 0 auto;
	padding: 10% 0 5% 0;
	height: auto;
}

#wrap h1 {
	font-family: "DM Serif Text", serif;
	font-weight: 400;
  	font-style: normal;
    font-size: 44px; /* 13px */
    line-height: 44px;
    margin: 0;
    margin: 0 0 18px 0;	
}

#wrap p {
	font-family: 'Inter';
	font-weight: normal;
  	font-style: normal;
    font-size: 40px; /* 13px */
    line-height: 44px;
	max-width: 60%;
    margin: 0 0 28px 0;
}

#wrap span {
	font-family: 'Graphik Web';
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	font-size: 17px;
	border-bottom: 1px solid #1f1f1f;
	display: inline-block;
	line-height: 24px;
}

a {
	text-decoration: none;
	color: ;
	
}

/* Contact Details */

section#details {
	width: 100%;
	height: auto;
	background-color: #ffffff;
	position: relative;
}

section#details aside {
	width: 80%;
	margin: 0 auto;
	padding: 9% 0 18% 0;
	position: relative;
}

section#details p {
	font-size: 44px; /* 13px */
    line-height: 44px;
    margin: 0;
    width: 67%;
    margin: 0 0 28px 0;	
}

section#details p a {
	text-decoration: none;
	color: #1f1f1f;
	font-family: 'Inter';
	font-weight: 400;
	font-style: normal;
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

section#details p a:visited { color: #1f1f1f; text-decoration: none; }
section#details p a:active { color: #1f1f1f; text-decoration: none; }
section#details p a:hover { color: rgba(30, 30, 30, 0.7); text-decoration: none; }

section#details span {
	font-family: 'Inter';
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	font-size: 17px;
	border-bottom: 1px solid #1f1f1f;
	display: inline-block;
	line-height: 21px;
	margin-bottom: 10px;
}



/*	
--------------------------------------------------
	Responsive
-------------------------------------------------- 
*/

@media only screen and (min-width: 1200px) {	
	}  
	       
@media only screen and (max-width: 1024px) {
	}   
	
@media only screen and (max-width: 780px) { 

	nav {
	position: fixed;
	right: 10%;
	top: 8%;
	z-index: 1001;
	font-family: 'Inter';
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	font-size: 10px;
	}

	section#note aside {
	width: 80%;
	margin: 0 auto;
	padding: 50% 0 10% 0;
	position: relative;
	background-color: ;
	}
	
	section#note aside a span {
	font-size: 25%;
	width: 100px;
	bottom: 20px;
	}
	
	section#note p {
	font-size: 24px; /* 13px */
    line-height: 32px;
    width: 100%;
	}

	section#note aside a {
    line-height: 35px;
	}
	
	
	#wrap {
	width: 80%;
	margin: 0 auto;
	padding: 30% 0 10% 0;
	height: auto;
}
	
	#wrap h1 {
	font-family: "DM Serif Text", serif;
	font-weight: 400;
  	font-style: normal;
    font-size: 33px; /* 13px */
    line-height: 34px;
    margin: 0 0 6px 0;	
	}

	#wrap p {
	font-family: 'Inter';
	font-weight: normal;
  	font-style: normal;
    font-size: 22px; /* 13px */
    line-height: 24px;
	max-width: 84%;
    margin: 2% 0 15px 0;	
	}
	
	#wrap span {
	font-size: 14px;
	border-bottom: 1px solid #1f1f1f;
	display: inline-block;
	line-height: 20px;
	}
	
	section#details aside {
	width: 80%;
	margin: 0 auto;
	padding: 10% 0 35% 0;
	position: relative;
	}

	section#details p {
	font-size: 32px; /* 13px */
    line-height: 31px;
    width: 100%;
	}

	section#details span {
	font-size: 14px;
	line-height: 16px;
	margin-bottom: 5px;
	}
	
}