/**** FONTS: Lato Font Family is hosted on Google Webfonts ****/
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,300italic,400italic,700italic);

/**** RESET ****/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}




/**** GLOBAL: General Elements ****/
body { font: 1em/1 'Lato', Arial, Helvetica, sans-serif; color: #fff; background: #00a4ad url(../images/site/base-dark-pattern.png) /*url(../images/site/base-pattern.png)*/ repeat top left; }
.wrapper, .inner-wrapper { max-width: 1080px; position: relative; margin: 0 auto; padding:0 40px; overflow: hidden; }
header { width:100%; overflow: hidden; }

#logo { position: relative; float: left; width:4.25em; /*68px*/ height: 7.47em; /*8.25em;132px*/ }
#logo a { display: block; width:100%; height: 100%; background-color: #047F86; 
	-webkit-transition: background-color .25s linear;
	-o-transition: background-color .25s linear;
	transition: background-color .25s linear; }
#logo a:hover { background-color: #005459; }
#logo a img { position: absolute; bottom: 12.5%; left:17.5%; }

.left-col { float: left; }
.right-col { float: right; }




/**** GLOBAL: Navigation ****/
nav { float: right; }
nav ul { list-style: none; margin: 2.1875em 0 0 0;  }
nav ul li { list-style: none; float: left; margin: 0 0 0 3px; }
nav ul li a { text-decoration: none; font-weight: 300; font-size:0.9375em; display: block; padding:12px 13px; color: #fff; 
	background-color: rgba(4,127,134, 0.5); 
	-webkit-transition: background-color .25s linear;
	-o-transition: background-color .25s linear;
	transition: background-color .25s linear; }
nav ul li a:hover, nav ul li.active { background-color: rgba(4,127,134,1); }




/**** GLOBAL: Typography ****/
h2 { font-size:4.75em; line-height:0.943; font-weight:900; text-transform: uppercase; }
h3 { font-size:1.875em; line-height:1.2; text-transform:uppercase; margin-bottom:0.5em; /*15px*/ }
h4 { font-size:1.125em; line-height:1.166em; font-weight:300; color: #ffee63; margin-bottom:0.09em;  }
p { line-height: 1.3125; font-weight:400; }
a { color: #FFEE64; text-decoration:none; }
a:hover { color:#FFF; }

.button { font-weight:300; border: 1px solid #FFEE64; padding: 15px 30px; border-radius: 20px;
	-webkit-transition: color .20s linear, border-color .20s linear;
	-o-transition: color .20s linear , border-color .20s linear;
	transition: color .20s linear , border-color .20s linear;}
a.button:hover { color: #FFF; border-color: #FFF; }
blockquote { border-left: 2px solid #047f86; display:block; margin-left:63px;  padding:0 92px 0 28px; font-style:italic; }
q { display: inline; }
q:before { content: open-quote; }
q:after { content: close-quote; }




/**** GLOBAL: FOOTER ****/
footer { position:relative; clear:both; float:left; width:100%; margin: 5.5% 0 2%; }
footer hr { margin: 0; display: block; border:none; background-color:#FFEE64; width:65px; }
footer .copyright { font-size:0.8125em; line-height:1.4; float: left; margin: 11px 0 0; }
footer .footer-links { float:right; list-style:none; color:#777; margin: 16px 0 0 0; }
footer .footer-links li { float: left; font-size:0.8125em; margin-left:11px; }
footer .footer-links li span { margin-left: 11px; }
footer a { color:#FFF; font-weight: 600; 
	-webkit-transition: color .20s linear;
	-o-transition: color .20s linear;
	transition: color .20s linear; }
footer a:hover { color:#FFEE64; }




/**** PAGE SPECIFIC: Home ****/
.home .content { position:relative; overflow:hidden;  margin:6.1% 0 0 0; }
.home .content p { padding-right: 30%; }
.home .content .button { margin-top: 30px; float:left; }




/**** PAGE SPECIFIC: Thoughts ****/
.thoughts .content { position:relative; overflow: hidden; margin:5.2% 0 68px 0; }
.thoughts .content h2 { font-size: 2.75em; }
.thoughts-entries { list-style:none; width:100%; margin-top:0.9%; overflow: hidden; }
.thoughts-entries li { position:relative; float: left; width: 23.33%; margin: 0 2.22% 2.29% 0; background-color:#047f86; border-radius:3px; overflow:hidden; }
.thoughts-entries li:nth-child(4n+4) { margin-right: 0; }
.thoughts-entries li a { background-color:#047f86; display: block;
	-webkit-transition: background-color .20s linear;
	-o-transition: background-color .20s linear;
	transition: background-color .20s linear; }
.thoughts-entries li img { width:100% !important; height: auto; display:block; }
.thoughts-entries li a img { opacity: 0.12; width:100%; height: auto; 
	-webkit-transition: opacity .20s linear;
	-o-transition: opacity .20s linear;
	transition: opacity .20s linear; }

.thoughts-entries li .title { position: absolute; top:65%; left:7.6%; z-index: 1; width:85%; }
.thoughts-entries li .title h3 { font-size:1.375em; line-height:1.090; font-weight:900; margin-bottom:0.409em; /*9px*/ }
.thoughts-entries li a .title h3 { color: #FFF; }
.thoughts-entries li .title p { font-size:0.8125em; line-height:1.153; font-weight:700; text-transform:uppercase; }

.thoughts-entries li a:hover img { opacity: 0; }
.thoughts-entries li a:hover .title h3 { color:#333; }
.thoughts-entries li a:hover .title p { color: #047f86; }
.thoughts-entries li a:hover { background-color: #FFEE63; }




/**** PAGE SPECIFIC: Thought Entries ****/
.thoughts article { position:relative; overflow:hidden; margin:12.78% 0 60px 0;  }
.thoughts article h2 { font-size:4.562em; line-height:0.986; letter-spacing:-0.02em; margin-bottom:0.082em; /*6px*/ }
.thoughts article h4 { margin-bottom: 0.333em; }
.thoughts article h5 { font-size:1.75em; line-height:0.964; font-weight:normal; margin:1.857em 0 0.42em 0; }
.thoughts article p.intro { font-size:1.75em; line-height:1.285; border-top: 1px dotted rgba(255,255,255,0.3); margin:50px 0 38px 0;  padding-top:49px;
	color:#FFF; }
.thoughts article p { font-size:1.23em; line-height:1.35; margin-bottom:1.35em; /*27px*/ }
.thoughts article blockquote p { font-size: 1.125em; line-height:1.166; }

.thoughts article section { width:65.925%; margin: 0 auto; }
.thoughts article section img { width:100%; margin:5.1% 0 9.8% 0; }
.thoughts .inner-article { position: relative; width:100%; }
.thoughts .prev { float: left; }
.thoughts .next { float: right; padding:15px 43px; }
.thoughts .prev , .thoughts .next { margin-top: 4px; }




/**** PAGE SPECIFIC: About Me ****/
body.about { background: url(../images/site/base-dark-pattern.png) top left repeat #373737; }
.about .content { margin: 5.7% 0 0 0; }
.about h2 { font-size: 3.75em; line-height: 1.1; margin-bottom: 0.2%; }
.about h2 span { color: #555; font-weight: 300; }
.about h3 { color: #555; margin-bottom: 7.5%; }
.about h5 { font-size: 1.625em; line-height:1.038; margin-bottom:0.46em; }
.about p { font-size: 1.1875em; line-height: 1.421; color:#bbb; margin-bottom:1.34em; }

.about .left-col, .about .right-col { position: relative; }
.about .left-col { width: 31.759%; overflow: hidden; }
.about .right-col { width: 57.925% /*65.925%*/; margin-right:8%; }

.about #canvasChart { margin: 0 auto; display:block; overflow: hidden; position: relative; }
.about .skills { width:190px; margin: 0 auto; position: relative; overflow: hidden; }
.about .skills h4 { position:absolute; font-size:2em; line-height: 1.125; text-transform:uppercase; text-align:center; color: #FFF; width:100%; margin-top:74px; }

.about .left-col ul { list-style: none; margin: 4.5% auto 0; width:53%; font-size:1em; line-height:1.125; color:#b2b2b2; clear: both; }
.about .left-col ul li { border-bottom: 1px dotted #444; padding:2.3% 0; }
.about .left-col ul li:before { content:'• '; font-size:1.8125em; line-height:0.72; vertical-align: bottom; }
.about .left-col ul li.photoshop:before { color:#70a7e6; }
.about .left-col ul li.illustrator:before { color:#deab56; }
.about .left-col ul li.hnc:before { color:#a1fd00; }
.about .left-col ul li.javascript:before { color:#047f86; }
.about .left-col ul li.php:before { color:#860481; }
.about .left-col ul li:last-child { border-bottom: none; }




/**** PAGE SPECIFIC: Portfolio ****/
body.portfolio { background:url(../images/site/base-dark-pattern.png) top left repeat #363636; }
.portfolio h2 { font-size: 4.562em; }
.portfolio .content { position:relative; overflow:hidden;  margin:6.1% 0 1.06% 0;  }
.portfolio .content h3 { font-weight: 700; text-transform: none; }
.portfolio .thoughts-entries li .title { top:inherit; bottom: 5%; }
.portfolio .loader { display: none; }

.portfolio-entry { position: relative; margin:0; display: none; width:100%; overflow:hidden; }
.portfolio-entry hr { margin: 0 0 2.7%; display: block; border:none; background-color:#FFEE64; width:14.629%; }
.portfolio-entry h3 { text-transform: none; font-size:1.625em; margin-bottom: 0.08em; }
.portfolio-entry p { max-width: 526px; font-size:0.875em; line-height: 1.5; margin-bottom: 4.8%; color:#CCC; letter-spacing: 0.02em; }
.portfolio-entry b { color: #FFEE64; font-weight: 700; }
.portfolio-entry p.brief { color: #bbb; margin:2.06% 0 4.46% 0; }
.portfolio-entry img { margin-bottom: 2.6%; }
.portfolio-entry a.close { float:right; background:url(../images/site/close-icon.png) right center no-repeat; text-transform: uppercase; font-weight:700; color: #FFF; 
	padding: 0 24px 0 0; margin: 1% 0 0 0; }
.portfolio-entry a.close:hover { color: #FFEE64; }

.login-form { margin: 6.1% 0 14.4%; position: relative; }
.login-form  h3 { font-weight: 800; }
.login-form label { display: block; margin:4.7% 0 0.7% 0; }
.login-form input[type="password"] { background-color: #FFF; border:none; border-radius:3px; color:#666; font-size:1em; padding:10px; display:block; width:250px; }
.login-form .button { background-color: transparent; color:#ffee63; font-size:1em; padding: 10px 30px; margin:2.1% 0 0 0; }
.login-form .button:hover { color:#fff; border-color:#fff; }





/*****************************************

		@@@@ MEDIA QUERIES @@@@

******************************************/

@media screen and (max-width: 66.5em) { /*1064px*/

	/* Thoughts */	
	.thoughts-entries li .title { top:56.0%; }
	.thoughts-entries li .title h3 { font-size:1.1875em; }
	
	/* About Us */
	.about h2 { font-size: 5vw; }

}



@media screen and (max-width: 53.75em) { /*860px*/
	/* Thought Entries */
	.thoughts .prev , .thoughts .next { position: absolute; bottom:-79px; }
	.thoughts .next { right:0; }
	.thoughts .inner-article { margin-bottom: 80px; }
	.thoughts article section { width: 100%; }
	
	/* About Us */
	.about h2 { font-size: /*5.5vw*/ 2.8em; }
	.about h3 { font-size: 1.625em; }
	.about .right-col { margin-right:0; }
	.about .left-col ul { width:180px; }
}



@media screen and (max-width: 51.25em) { /*820px*/
	/* Logo */
	#logo { height:7.125em; }
	
	/* Nav */
	nav ul { margin-top: 2.0625em; }
	
	/* Footer */
	.home footer { position:relative; clear:both; }
	
	/* Home */
	.home .content .button { font-weight: 300; }
	.home h2 { font-size: 3.0em; margin-bottom: 0.1em; }
	.home h3 { font-size: 1.675em; }
	
	/* Thoughts */
	.thoughts-entries li { width:31.83%; }
	.thoughts-entries li:nth-child(3n+3) { margin-right: 0; }
	.thoughts-entries li:nth-child(4n+4) { margin-right: 2.29%; }
	
	/* Thought Entries */
	.thoughts article h2 { font-size: 4.25em; }
	.thoughts article h3 { font-size: 1.6875em; }
	.thoughts article h5 { font-size: 1.5625em; }
	.thoughts article p.intro { font-size: 1.5625em; padding-top:43px; margin-top:44px;  }
	
}



@media screen and (max-width: 40.625em) { /*650px*/
	/* Global */
	h2 { font-size: 3em; }
	h3 { font-size: 1.625em; }
	h4 { font-size: 1em; }
	
	/* Home */
	.home .content { margin:9.1% 0 4.6% 0; }
	.home .content p { padding-right: 10%; }
	.home h3 { font-size: 1.25em; }
	
	/* Thoughts */
	.thoughts .content h2 { font-size: 2.375em; }
	.thoughts-entries li .title { top:60%; }
	.thoughts-entries li { width:48.85%; }
	.thoughts-entries li .title h3 { font-size:1.575em; margin-bottom: 0.1em; }
	.thoughts-entries li .title p { font-size: 0.8em; }
	.thoughts-entries li:nth-child(3n+3), .thoughts-entries li:nth-child(4n+4)  { margin-right: 2.29%; }
	.thoughts-entries li:nth-child(even) { margin-right:0; }
	
	/*Thoughts Entries*/
	.thoughts article { margin-top:10.78%; }
	.thoughts article h2 { font-size: 3.4375em; }
	.thoughts article h3 { font-size: 1.5em; }
	.thoughts article p.intro { margin-top:38px; padding-top:37px; font-size: 1.5em; }
	
	/* About Me */
	.about h2 { font-size: 5.8vw; }
	.about h3 { font-size: 1.3125em; }
	.about .left-col { width:190px; }
	.about .right-col { width: 62%; }
}



@media screen and (max-width: 37.5em) { /*600px*/
	/* About Me */
	.about .left-col { width:100%; margin-top:6%; }
	.about .skills { float:left; }
	.about .left-col ul { clear:none; float:right; width:50%; }
	.about .right-col { width:100%; clear: both; }
	
	/* Portfolio */
	.portfolio-entry a.close { text-indent: -999px; padding: 0; width:16px; height:16px; overflow:hidden; margin-top: 1.1%; }

}



@media screen and (max-width: 31.25em) { /*500px*/
	/* Global */
	.wrapper, .inner-wrapper { padding: 0 20px; }
	
	
	/* Thoughts */
	.thoughts-entries li .title h3 { font-size:1.275em; }

	
}


@media screen and (max-width: 28.125em) { /*450px*/
	/* About Me */
	.about .skills { float: none; }
	.about .left-col ul { clear: both; float: none; width:100%; }
	
	/* Portfolio */
	.portfolio h2 { font-size: 2.125em; }
	.portfolio h3 { font-size: 1.25em; width:92%; }
	.portfolio-entry p.brief { font-size:0.9375em; }
}



@media screen and (max-width: 22.5em) { /*360px*/
	/* Global */
	h2 { font-size: 2.5em; }
	h3 { font-size: 1.375em; margin-bottom: 1.0625em; }
	h4 { margin-bottom: 0.625em ; font-weight: 300; }
	blockquote { margin-left:0; padding:0 20px 0 24px ; }
	
	/* Footer */
	footer .copyright span { display: none; }
	
	/* Home */
	.home .content p { padding-right: 0; }

	
	/* Thoughts */
	.thoughts .content { margin-top:9.2%; }
	.thoughts-entries { margin-top:14px; }
	.thoughts-entries li .title { top:48.8%; }
	.thoughts-entries li .title h3 { font-size: 1.125em; }
	
	/* Thoughts Entries */
	.thoughts article { margin-bottom: 60px; }
	.thoughts article h2 { font-size: 2.75em; }
	.thoughts article h3 { font-size: 1.25em; }
	.thoughts article h4 { font-size:1.0625em; }
	.thoughts article h5 { font-size: 1.46em; }
	.thoughts article p.intro { margin-top: 32px; padding-top:31px; font-size:1.375em; }
	.thoughts article p { font-size: 1.0625em; }
	.thoughts article section { width:100%; }
	
	/* About Me */
	.about h2 { font-size: 1.8em; }
	.about h5 { font-size:1.425em; }
	.about p { font-size: 1.0625em; }
	
	
}