/* 
Version: indextwo v4
Author: (c) David Trang, All rights reserved. 

-Colors-
#f2f2f3 rgb(242,242,243) - Background 
#3f424d rgb(63,66,77) - Header Text
#8d9093 rgb(141,144,147) - Subheader Text/Blockquotes
#282a31	rgb(40,42,49) - Body Text, Links
#9a53cd rgb(154,83,205) - Link Hover Nav
#ffffdd rgb(255,255,221) - Link Hover
#d0d0d0 rgb(208,208,208) - Horizontal Borders
#8c8c8c rgb(140,140,140) - Footer Text

-Grid-
1 col - 169px (18.172%)
2 col - 359px (38.602%)
3 col - 549px (59.032%)
4 col - 739px (79.463%)
5 col - 930px (100%)

*/

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

html, body, div, span, object, iframe, img, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, a, blockquote, pre, form, fieldset, table, tr, td, sup, strong, small { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
img, embed, object, video { max-width: 100%; }
html { height: 100%; scroll-behavior: smooth; }
:focus { outline: 0; }

/* Standard styles
------------------------------------------------------- */

body { font: 18px/29px ProximaRegular, Arial, sans-serif; /***typekit***/ color: #8c8c8c; background: #f2f2f3 url(../images/bg-v-grid.png) top center repeat-y; height: 100%; }

p { margin: 0 0 22px 0; }
ol, ul { margin: 0 0 20px 0; }
ol li, ul li { line-height: 20px; list-style-type: none; }
h1, h2, h3, h4, h5 { color: #3f424d; font-weight: normal; }

h1 { font: 32px/40px AdelleLight, Arial, sans-serif; /***typekit***/ }
h2 { font: 13px/20px ProximaSemibold, Arial, sans-serif; /***typekit***/ color: #000; text-transform: uppercase; margin: -4px 0 0 0; }
h3 { font: 12px/20px AdelleSemiBold, Arial, sans-serif; /***typekit***/ }
h4 { font: 18px/24px AdelleLight, Arial, sans-serif; /***typekit***/ }

a, a:link, a:visited, a:active { color: #282a31; text-decoration: none; }
p a { font: 12px/20px AdelleBold, Arial, sans-serif; /***typekit***/ border-bottom: 1px dotted #74767e; }
aside a { font: 15px/25px ProximaBold, Arial, sans-serif; /***typekit***/ }
cite a { font: 12px/20px AdelleBoldItalic, Arial, sans-serif; /***typekit***/ }
p a:hover, h3 a:hover, aside a:hover, cite a:hover, footer a:hover { padding: 3px 0 0 0; color: #282a31; background-color: #ffffdd; }

input, textarea { font: 12px/20px ProximaRegular, Arial, sans-serif; /***typekit***/ }

::selection { background-color: #282a31; color: #fff; }
::-moz-selection { background-color: #282a31; color: #fff; }

/* Container styles
------------------------------------------------------- */

#container { width: 100%; max-width: 972px; min-height: 100%; margin: 0 auto;  /*display: none; */ }
#seperator { width: 100%; height: 1px; background: url(../images/bg-dotted.png) 0 100% repeat-x; position: absolute; top: 139px; }
#content { max-width: 930px; padding: 0 21px 84px 21px; display: inline-block; }

/* full grid dimensions */
#grid { width: 970px; margin-left: -484px; position: absolute; top: 0; left: 50%; z-index: 99; }
	/* gutter width */
	#grid div.vert { margin-right: 20px; }
	#grid div.vert.first-line { margin-left: 19px; }
	/* baseline height */
	#grid div.horiz { height: 9px; margin: 0; padding: 0; border-bottom: 1px dotted #cbcbcb; }
	/* grid option 1 */
	#grid.grid-1 div.vert { width: 170px; background-color: rgba(250,120,120,.2); }
	/* grid option 2 */
	#grid.grid-2 div.vert { width: 75px; background-color: rgba(120,250,120,.2); }

/* Masthead styles
------------------------------------------------------- */

#masthead { max-width: 930px; height: 140px; padding: 0 21px; }

#logo {	margin: 49px 0 0 0; float: left; }
	#logo a { width: 42px; height: 41px; float: left; text-indent: -9999px; background: url(../images/logo.svg) 0 0 no-repeat; }
	
#masthead nav { width: 379px; margin: 23px 0 0 193px; float: left; }
	#masthead nav ul { font: normal bold 13px/20px "courier new", courier, monospace; }
	#masthead nav ul li { padding: 0 20px 11px 0; float: left; }
	#masthead nav ul li a { width: 169px; float: left; }
	#masthead nav ul li a span { float: left; }
	#masthead nav ul li a small { margin: 3px 0 0 0; font: italic 11px/16px "courier new", courier, monospace; float: left; clear: both; }	
	#masthead nav ul li:hover a { cursor: pointer; }
	#masthead nav ul li:hover small, #masthead nav ul li#current small { color: #282a31; background-color: #ffffdd; }
	
/* Homepage styles
------------------------------------------------------- */

#home hgroup { width: 740px; text-align: left; clear: both; }
	#home hgroup h1 { margin: 55px 0 0 0; font: 38px/50px AdelleSemibold, Arial, sans-serif; /***typekit***/ color: #3f424d; }
	#home hgroup h1 a { padding: 7px 0 1px 0; color: #282a31; background-color: #ffffdd; }
	#home hgroup h1 a:hover { padding: 7px 0 1px 0; color: #999; }

#home #brief { width: 740px; margin: 36px 0 0 -21px; float: left; }
	#home #brief a { font: 18px/24px ProximaRegular, Arial, sans-serif; /***typekit***/ }
	#home #brief a:hover { padding: 3px 0 0 0; color: #282a31; background-color: #ffffdd; }
	#home #brief div { width: 740px; margin: 0 0 0 21px; float: left; }
    #home #brief div p { font: 18px/30px ProximaRegular, Arial, sans-serif; /***typekit***/ color: #6c6c6c; margin: 0 0 19px 0; }

/* Subpage styles
------------------------------------------------------- */

.sub h1 { margin: 38px 0 0 0; }
.sub h4 { margin: 2px 0 0 0; }

/* Work */
#work-detail .overview { margin-top: 20px; float: left; }
	#work-detail .overview h1 { width: 169px; float: left; font: 32px/42px AdelleRegular, Arial, sans-serif; /***typekit***/ }
	#work-detail .overview aside { width: 550px; margin: 36px 0 0 21px; float: left; }
	#work-detail .overview aside p { font: 15px/25px ProximaRegular, Arial, sans-serif; /***typekit***/ color: #6c6c6c; }
    #work-detail .overview aside span { color: #8d9093; }
    #work-detail .screenshots { width: 739px; margin: 0 0 0 0; padding: 20px 0 40px 0; text-align: center; border-bottom: 1px solid #d0d0d0; float: left; }
    #work-detail .screenshots-last { width: 739px; margin: 0 0 0 0; padding: 40px 0 40px 0; text-align: center; float: left; }

#work-detail .summary { width: 169px; margin: 10px 0 0 22px; padding: 49px 0 0 0; float: left; }
    #work-detail .summary ul li { list-style-type: none; margin-bottom: -1px; }
    #work-detail .summary li a { font: normal 400 14px/24px ProximaRegular, Arial, sans-serif; /***typekit***/ color: #6c6c6c; }
    #work-detail .summary-wrap { float: left; }
	#work-detail .summary.fixed { position: fixed; top: 0; }
	#work-detail .summary aside { font: 14px/20px ProximaRegular, Arial, sans-serif; /***typekit***/ width: 169px; float: left; clear: both; }
    #work-detail .summary aside h2 { margin-top: -12px; }

/* Case Study */
#case-study section { padding: 30px 0; float: left; }
    #case-study h3 { font: 22px/40px AdelleSemiBold, Arial, sans-serif; padding: 3px 0; /***typekit***/ }
    #case-study img.icon { float: left; }
    #case-study p.cases, li { font: 16px/26px ProximaRegular, Arial, sans-serif; /***typekit***/ color: #6c6c6c; }
    #case-study .left { width: 360px; text-align: left; padding-top: 8px; float: left; }
    #case-study .right { padding-left: 18px; display: inline-block; float: left; }
    #case-study ul li { list-style-type: square; margin: 0 0 10px 16px; }

#case-study .challenge { width: 930px; text-align: center; }
    #case-study .challenge h1 { font: 32px/42px AdelleRegular, Arial, sans-serif; /***typekit***/ }
    #case-study .challenge h2 { letter-spacing: 2px; padding: 8px 0; }
    #case-study .challenge p { width: 550px; text-align: left; display: inline-block; padding-top: 8px; font: 16px/26px ProximaRegular, Arial, sans-serif; /***typekit***/ color: #6c6c6c; }

#case-study .app { width: 930px; text-align: center; }

/* General styles
------------------------------------------------------- */

/* Page Navigation */
.section-nav li.active > a { padding: 3px 0 0 0; color: #282a31; background-color: #ffffdd; }
.section-nav a { transition: all 250ms ease-in-out; }


/* Footer styles
------------------------------------------------------- */

footer { max-width: 930px; margin: -85px auto 0 auto; }
    footer div { width: 169px; padding: 16px 0 0 0; font: normal 400 12px/20px ProximaRegular, Arial, sans-serif; color: #b2b2b2; border-top: 1px solid #d0d0d0; position: relative; bottom: 0; }
	footer span { width: 169px; float: left; clear: both; }
	footer span a { font: normal 400 12px/20px ProximaSemibold, Arial, sans-serif; }
	footer span #search-footer { width: inherit; float: none; clear: none; display: none; }
    footer a#email { font: normal 400 12px/20px ProximaRegular, Arial, sans-serif; color: #b2b2b2; }
	footer p { width: 740px; position: absolute; left: 191px; }
	footer p strong { font: normal 400 12px/20px ProximaSemibold, Arial, sans-serif; color: #282a31; text-decoration: none; }


/* Media queries
------------------------------------------------------- */
@media screen and (max-width: 986px) {
	body { background: #f2f2f3 url(../images/bg-h-grid.png); }
	.sub #content { width: 95%; }
	#masthead nav { width: 340px; margin: 23px 0 0 4px; }		
	#masthead nav ul li { padding: 0 9px 10px 0; }
	#masthead nav ul li a { width: 145px; }
		#home hgroup { width: 100%; }
		#home #brief { width: 100%; }
		#home #brief div { width: 90%; }
        #work-detail .overview h1 { width: 20%; }
        #work-detail .overview aside { width: 45%; }
        #work-detail .screenshots { width: 70%; }
        #work-detail .screenshots-last { width: 70%; }
        #work-detail .summary-wrap { width: 20%; }
        #case-study .challenge { width: 100%; }
        #case-study .app { width: 100%; }
        #case-study img.screenshot { width: 100%; }
        #case-study .left { width: 100%; }
    footer { max-width: 90%; margin: -85px auto 0 20px; }
	footer p { display: none; }
}

@media screen and (max-width: 797px) {
	#search { display: none; }
		#home hgroup h2 { min-width: inherit; font-size: 26px; }
    #work-detail .overview h1 { font-size: 28px; line-height: 38px; margin-top: 34px; }
    footer { max-width: 90%; margin: -85px auto 0 20px; }
	footer span #search-footer { display: inline; }
}

@media screen and (max-width: 599px) {
	body { -webkit-text-size-adjust: none; }
	#masthead { height: 100px; }
	#masthead nav { width: 299px; margin: 47px 0 2px 0; clear: both; }
	#masthead nav ul li { padding: 0 0 10px 0; }
	#seperator { top: 99px; }
	#logo {	margin: 29px 0 0 0; float: left; }
	.archive { float: left; }
		#home hgroup {}
		#home hgroup h1 { margin: 34px 0 0 0; padding: 0; font-size: 28px; line-height: 39px; color: #3f424d; background: none; }
		#home hgroup h2 { display: none; }
		#home #brief { margin: 21px 0 7px 0; }
		#home #brief div { width: 100%; margin: 0; }
        #work-detail .portfolio #motif { margin-top: 4px; }
         /* #work-detail .portfolio #lumity { padding-top: 0px; }
            #work-detail .portfolio #trunkclub { margin-top: 26px; }
            #work-detail .portfolio #ookla { margin-top: 26px; }
            #work-detail .portfolio #microsoft { margin-top: 26px; }
            #work-detail .portfolio #silverlight { margin-top: 26px; }
            #work-detail .portfolio #speedtest { margin-top: 26px; }
            #work-detail .portfolio #tacoma { margin-top: 30px; }
            #work-detail .portfolio #ddg { margin-top: 30px; } */
        #work-detail .overview { width: 100%; margin: 16px 0 0 0; }
        #work-detail .overview h1 { width: 100%; margin: 27px 0 0 0; }
        #work-detail .overview aside { width: 95%; margin: 15px 0 0 2px; }
        #work-detail .screenshots { width: 100%; padding: 0; border-top: none; }
        #work-detail .screenshots-last { width: 100%; padding: 0; border-top: none; }
        #work-detail .summary-wrap { width: 100%; clear: both; }
        #work-detail .summary { width: 100%; margin: 1px 0 0 0; padding: 39px 0 0 0; }
        #work-detail .summary.fixed { position: static; }
        #work-detail .summary aside { display: none; }
        #work-detail nav { display: none; }
        #case-study .challenge p { width: 100%; }
        #case-study .left { width: 100%; }
    footer { max-width: 90%; margin: -85px auto 0 20px; }
}

@media screen and (max-width: 479px) {
	.sub #content { width: 87%; }
    footer { max-width: 90%; margin: -85px auto 0 20px; }
}

/* iphone4+ */
@media screen and (max-width: 599px) and (-webkit-min-device-pixel-ratio: 2) {
	#logo a { width: 42px; height: 41px; background: url(../images/logo.svg) 0 0 no-repeat; background-size: 100%; }
}

/* ipad */
@media only screen and (device-width: 768px) {
	#work-detail #summary.fixed { position: static; }
	#notebook-post #summary.fixed { position: static; }
}

/* 4 phun 
@media screen and (min-width: 2560px) { 
	body { background: #3f424d url(../images/bg-srsly.png) center 50% no-repeat; }
	#masthead, #seperator, #content, footer { display: none; }
}*/

/* Fonts $$$$ --Typekit-- $$$$
------------------------------------------------------- */

/*-----*PROXIMA*-----*/

/* h2 headers, main navigation, notebook post titles, portfolio titles */
@font-face {
	font-family: 'ProximaSemibold';
	src: url('../fonts/ProximaNova/ProximaNova-Semibold.otf') format('opentype');
}

/* navigation descriptions */
@font-face {
	font-family: 'ProximaRegularItalic';
	src: url('../fonts/ProximaNova/ProximaNova-RegularItalic.otf') format('opentype');
}

/* h1 homepage main title */
@font-face {
	font-family: 'ProximaLight';
	src: url('../fonts/ProximaNova/ProximaNova-Light.otf') format('opentype');
}

/* p text */
@font-face {
	font-family: 'ProximaRegular';
	src: url('../fonts/ProximaNova/ProximaNova-Regular.otf') format('opentype');
}

/* footer text */
@font-face {
	font-family: 'ProximaBold';
	src: url('../fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}

/*------*ADELLE*------*/

/* body copy */
@font-face {
	font-family: 'AdelleRegular';
	src: url('../fonts/Adelle/Adelle_Reg.otf') format('opentype');
}

/* body copy links */
@font-face {
	font-family: 'AdelleBold';
	src: url('../fonts/Adelle/Adelle_Bold.otf') format('opentype');
}

/* body copy links */
@font-face {
	font-family: 'AdelleSemiBold';
	src: url('../fonts/Adelle/Adelle_Semibold.otf') format('opentype');
}

/* notebook blockquote */
@font-face {
	font-family: 'AdelleItalic';
	src: url('../fonts/Adelle/Adelle_Italic.otf') format('opentype');
}

/* notebook cite link */
@font-face {
	font-family: 'AdelleBoldItalic';
	src: url('../fonts/Adelle/Adelle_BoldItalic.otf') format('opentype');
}

/* h1 subpage main title */
@font-face {
	font-family: 'AdelleLight';
	src: url('../fonts/Adelle/Adelle_light.otf') format('opentype');
}