/*
	
	                                                                                                                
            .IDDD    ..8DDZ    DDDDDD~                                                                                                        
            ,DND, . .ZDDD.   ,DDD,.DDD                                                                                                        
            +DDDD$+DDDDD=.  8DDN. DDD                             .:888                                                 .O8?                  
             DDDDDDDDDDD   DDDD  DDD                              =DDD                                                 $DND                   
            .  =$?.DDDD   DDDD.DDD7 ?D?                          .DDD:                                                IDDD.   ,DI             
                 .8DDD:. DDNDDDD8 .DDDD .   . .                 .DDDZ       .           . ..                .     .  .DND?   DDDDI            
                 .DDD87DDDDDDD. . ~NDDD  ODDD.+DD7      :DDDD=DNDDDDDD  . .ZDDDDI. .  O.   .     I:.      .~ZD87   DDDDDDDD .DDDD      .:     
           . ?DDDDDDDDDDDDDD.     ..~  . DDD8DDDDD     NDD8=~ .DDDD.    DDDDDDDDDD   DDDO DDD8  DDDD    8DDDDDDDDD  8DDD    . ,.    7DDNDNZ   
     ZO .  DDDD+DDDD  ,DDDD  .  DDDD   .DDDDD7 DDD  .ZDDDD:   8DDD, . DDDD~  =DDD  IDDDD $DDD$.DDDD:  ZDDD:  IDDD  DDDD   .DND+   :DDD. DDZ . 
   .DDDI  .D?. DDDD,  DNDD     DDDD    =DDDD   DDD .DDD.,DD:  DDD?  .DDDD   .DDD. DDDDDDZDDDD$DDDD$  DDDD.   DDD  DDDD.   DDDD+  ZNDD..       
   DDDD       DDDD,   DDD~    DDDD,  . DNDN.  ODD~DDD8   DDD DDDO  =DDDD   .DDD7 DDDDDDDDDDDDDDDND  DDDD    DDDD :DDDD  .DDDD?  $DDD     .8   
   DDDD     =DDDD.   +DDD    DDDDD   ~DDDD,  +DD8..     ?DDDDDDD  :DDDDD . DDDDIDDDDDDDDD=DDDDDDDD.DDDDD . DDDD~DDDDD=  DDDDD  ~DDDD     D.   
   8DDDD~:ZDDDDD     IDDDD?NDDDDDD~$DDDDDO .DDDD  +D?  =DDDDDDDO,DDDDDDD.=DNDDDDDD.?DDDD DDNDD.DDNDDDDDD ?DDDDDNDDDDD=:DDDDDD~DDDDDD   ZD~    
    8DDDDDDDDD~       DDDDDDDD.DNDDDDDDDDDDDDD,    DDDDDDDD =DDDDDD. DDDDDD8DDDD=..DDDI .DDN8. DDDDD.DDDNDDD+DDDD~,DDDDDN=DDDDDD 8DDDDDD,     
      :$88$.            .=:      +~ 7DDDIOZ= . .    ,DD8~ . . +$I      ,  .  .     $D,    7  .  I$   ..7I. .  ?. .. ~O$.   IO7    .DDZ.       
                                   ,DDD.        snapm.ag                                                                                              
                               .  .DDDD                                                                                                       
                                 .DDDD                                                                                                        
                                 DDDD                          
                                OD8.
     
    - Projects Notes
	------------------------------------------------------------------------------------------------
	Snap Mag Online
	October - November 2012 
	Design & Frontend by Luke Beard
	Engineering by Jeremy Boles
	
	
	- Handy Handy Hex colors
	------------------------------------------------------------------------------------------------
	
	Hipsta Yellow: #fff203
	1 Shade of Grey: #b5b5b5
	Off Black: #555
	
	- Hipstacorp keys
	------------------------------------------------------------------------------------------------
	
	[>] Pretty right chevron 
	[<] Pretty right chevron
	[?] Pretty down chevron 
	[m] Pretty up chevron  
	[1] Hand holding camera
	[2] Hipsta H
	[3] Twitter bird
	[4] Facebook F
	[5] Play Symbol 
	[A] Avalibale on appstore logo 
	[h] Hipstamatic Logo
	[c] cog
	[g] Gear icon
	[f] Folder Icon
	[l] Love hands
	[s] Snap logo
	[t] talk bubbles
	[i] Incredibooth logo
	[S] Swankolab logo
	
*/

/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
body{margin:0}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:1em 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:1em 0}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}


/* ==========================================================================
   Gobal Styles
   ========================================================================== */
	
	/* Font-Face*/
	@font-face {
		font-family: 'hipstacorp';
		src: url('/fonts/hipstacorp.eot');
		src: url('/fonts/hipstacorp.eot?#iefix') format('embedded-opentype'),
			url('/fonts/hipstacorp.svg#hipstacorp') format('svg'),
			url('/fonts/hipstacorp.woff') format('woff'),
			url('/fonts/hipstacorp.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}
	
	html,body
	{
		background:#2c2c2c;
		min-height:100%;width:100%;
		overflow-y: scroll; 
		-webkit-text-size-adjust: 100%;
		-webkit-font-smoothing:antialiased; font-smoothing:antialiased; 
		text-rendering:optimizeLegibility;
		overflow-x:hidden;
	}
	
	::selection {
	background: #FFF203;
	color: black;
	text-shadow: none;
	}
	
	a,a:link,a:visited
	{
		text-decoration:none;
		color:#fff203;
	}
	
	a:hover
	{
		color:#fff;
	}
	
	/* 16px base font size with 150% (24px)*/
	body, button, input, select, textarea {font: 100%/1.5 "proxima-nova",sans-serif; *font-size: 1em; color: #000;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;} /* IE7 and older can't resize px based text */
	
	h2,h3
	{
		color:#fff;
		font-size:62px;
		text-transform:uppercase;
	}
	
	h2
	{
		margin: 40px 0;
	}
	
	h3
	{
		font-size:30px;
		padding:30px 0;
	}


/* ==========================================================================
	Layout
	========================================================================== */
	
	#kayne /*main wrapper*/
	{
		width:100%;
		position:relative;
	}
	
	.cnt /*Content wrapper with clearfix*/
	{
		width:80%;
		min-width:600px;
		margin:0px auto;
	}
	
	.cnt:before,.cnt:after{content:" ";display:table;}
	.cnt:after {clear:both;}
	.cnt {*zoom:1;}


/*	Header
	========================================================================== */
	
	header
	{
		color:#fff;
		height:67px;
		background:#000;
		overflow:hidden;
	}
	
	header h1
	{
		margin: 0;
		float:left;
		display: inline-block;
		font-family: "hipstacorp";
		color: #FFF203;
		font-size: 73px;
		line-height: 68px;
		font-weight:normal;
	}
	
	header nav ul
	{
		float:right;
		width:68%;
		height:67px;
		line-height:67px;
		margin:0;
	}
	
	header nav ul li
	{
		padding-left:9%;
	}
	
	header nav ul li,header nav ul li a
	{
		float: right;
		display:inline-block;
		text-transform:uppercase;
		font-weight:bold;
		font-size:13px;
	}
	
	header nav ul li a:link,header nav ul li a,header nav ul li a:visited
	{
		color:#fff;
	}
	
	header nav ul li a:hover
	{
		color:#fff203;
	}


/*	Back Issues
	========================================================================== */
	
	#back-issues
	{
		position:relative;
		height:0;
		max-height:0;
		opacity:0;
		overflow:hidden;
		-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
		-moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
		-ms-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
	}	
	
 	.bi-active
	{
		height:auto !important;
		max-height:99999px !important;
		opacity:1 !important;
	}

	#back-issues nav ul
	{
		margin:0;padding:0;
	}
	
	#back-issues nav ul li,#back-issues nav ul li a
	{
		float:left;
	}
	
	#back-issues nav ul li
	{
		width:20.555555%;
		margin:0 4% 20px 0;
		position:relative;
		-webkit-transition: all 50ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
		-moz-transition: all 50ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
		-ms-transition: all 50ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
		opacity:1.0;
	}
	
	#back-issues nav ul li:active
	{
		opacity:0.3;
	}
	
	#back-issues nav ul li img,#back-issues nav ul li a
	{
		width:100%;
		height:auto;
	}
	
	#back-issues nav ul li img
	{
		opacity:1;
		box-shadow:0 3px 8px RGBA(0,0,0,0.4);
		-webkit-transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
		   -moz-transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
		    -ms-transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
	}
	
	#back-issues nav ul li:hover img,#back-issues li.reading img
	{
		opacity:0.5;
		box-shadow:0 3px 8px RGBA(0,0,0,0.9);
	}
	
	#back-issues .issue-meta
	{
		margin:10px 0;
		float:left;
		font-size:17px;
		text-transform:uppercase;
	}
	
	#back-issues li span.view
	{
		position:absolute;
		height:30px;
		width:120px;
		margin-left:-60px;
		margin-top:-40px;
		left:50%;
		top:50%;
		z-index:33;
		display:block;
		background:#000;
		color:#fff;
		line-height:32px;
		text-align:center;
		font-weight:bold;
		text-transform:uppercase;
		border-radius:100px;
		-webkit-transform:scale(0);
		opacity:0;
		-webkit-transition: all 150ms cubic-bezier(0.345, -0.245, 0.080, 1.125); 
		
	}
	
	#back-issues li.reading span.view
	{
		width:100px;
		margin-left:-50px;
		color:#fff203;
	}
	
	#back-issues li:hover span.view,#back-issues li.reading span.view
	{
			-webkit-transform:scale(1);
			opacity:1;
	}
	
	#back-issues .issue-meta a
	{
		color:#fff;
	}
	
	#back-issues .issue-meta a:hover
	{
		color:#fff203;
	}
	
	#back-issues a.close-bi
	{
		font-family: "hipstacorp";
		color: #AAA;
		font-size: 38px;
		position: absolute;
		top: 55px;
		right: 6%;
		opacity:0.3;
	}
	
	#back-issues a.close-bi:hover
	{
		opacity:1;
	}
	
	
	

/*	Issue
	========================================================================== */
	
	#issue
	{
		background-position:center center;
		background-size:cover;
		height:auto;
		padding:0% 0 6% 0;
	}
	
	.loading
	{
		background: black url('/img/loader.gif') center center no-repeat;
		background: RGBA(0,0,0,0.9)  url('/img/loader.gif') center center no-repeat;
		width: 100px;
		height: 100px;
		border-radius: 10px;
		position: absolute;
		z-index: 99999;
		left: 50%;
		margin-left: -50px;
		top: 50%;
		margin-top: -50px;
		-webkit-transition: all 150ms cubic-bezier(0.345, -0.245, 0.080, 1.125); 
	}
	
	#issue .issue-title h3
	{
		margin:0;
	}
	
	#issue .page-controls
	{
		position:relative;
		top:33px;
	}
	
	#issue .page-controls a
	{
		display:block;
		float:left;
		width:30px;
		height:30px;
		margin:0 0 0 15px;
		line-height:32px;
		font-size:25px;
		border:solid 3px #fff;
		font-family: "hipstacorp";
		font-weight:normal;
		color:#fff;
		border-radius:100%;
		text-indent:1px;
		opacity:0.4;
	}
	
	#issue .page-controls a:hover
	{
		opacity:1;
	}
	
	#issue .page-controls a.next
	{
		text-indent:3px;
	}
	
	#issue-spreads
	{
		margin:0 0 4% 0;
		position:relative;
	}
	
	#issue .spread
	{
		position:relative;
		width:80%;
		min-width:600px;
		margin:0 auto;
		background:#000;
		box-shadow:0 3px 5px RGBA(0,0,0,0.5);
		overflow:hidden;
		-webkit-transition: all 300ms cubic-bezier(0.345, -0.245, 0.080, 1.125);
		-moz-transition: all 300ms cubic-bezier(0.345, -0.245, 0.080, 1.125);
	}
	
	#issue .empty-page
	{
		min-height: 20px;
		height:100%;width:50%;
		float:left;
		color:#fff;
	}
	
	#issue .empty-page .content
	{
		padding:0 40px;
		max-height:300px;
		overflow:auto;
	}
	
	#issue .empty-page h2
	{
		font-size:30px;
		line-height:1;
		margin-bottom:10px;
	}
	
	
	#issue .active-spread
	{
		z-index: 3;
		box-shadow:0 10px 10px RGBA(0,0,0,0.5);
	}
	
	#issue embed,#issue iframe,#issue .spread img,#issue .spread object
	{
		width:50%;
		height:auto;
		background:#fff;
		float:left;
		border:none;
		vertical-align:top
	}
	
	#issue .prev-spread,#issue .next-spread,#issue .pre-prev-spread,#issue .pre-next-spread
	{
		position: absolute;
		z-index: 0;
		left: -70%;
		top:0px;
		-webkit-transform:scale(0.85);
		-moz-transform:scale(0.85);
		opacity:1.0;
		cursor:pointer;
	}
	
	#issue .pre-prev-spread
	{
		left:-300%;
	}
	
	#issue .pre-next-spread
	{
		right:-300%;
	}
	
	#issue .prev-spread img,#issue .next-spread object,#issue .next-spread img
	{
		opacity:0.6;
		-webkit-transition: all 150ms cubic-bezier(0.345, -0.245, 0.080, 1.125); 
	}
	
	#issue .next-spread
	{
		left: 0;
		right: -160%;
	}
	
	#issue .prev-spread:hover img,#issue .next-spread:hover object,#issue .next-spread:hover img
	{
		opacity:1;
	}
	
	.issue-nav
	{
		background:RGBA(0,0,0,0.5);
		box-shadow:0 1px 0 RGBA(255,255,255,0.1),inset 0px 2px 5px RGBA(0,0,0,0.5);
		height:10px;
		width:75%;
		margin:0px auto;
		border-radius:100px;
	}
	
	.issue-nav .handle
	{
		position:relative;
		top:-2px;
		background:#fff203;
		height:14px;
		width:10%;
		border-radius:100px;
		text-indent:-99999em;
		overflow:hidden;
		cursor:move !important;
	}

	.issue-nav .handle:hover
	{
		background:#d8cd06;
		box-shadow:inset 0 1px 0 RGBA(255,255,255,0.4),0 1px 2px RGBA(0,0,0,0.5);
	}
	
	#issue .share-count
	{
		position: absolute;
		width:100px;
		height:30px;
		margin-left:-50px;
		left:50%;
		line-height:30px;
		text-align:center;
		font-weight:bold;
		color:#fff;
		background:#000;
		border-radius:100px;
		bottom:20px;
	}
	
	#issue .share-count b
	{
		color:#fff203;
	}
	
	
	#issue .spread-social
	{
		background: black;
		background: RGBA(0,0,0,0.85);
		border:solid 3px #000;
		position: absolute;
		bottom: 70px;
		opacity: 0;
		width: 190px;
		margin-left:-107px;
		padding: 20px 0 11px 18px;
		-webkit-transform:scale(1.3);
		-webkit-transition: all 200ms cubic-bezier(0.345, -0.245, 0.080, 1.125);
		-moz-transition: all 200ms cubic-bezier(0.345, -0.245, 0.080, 1.125);
		border-radius: 6px;
		left: 50%;
	}
	
	#issue .spread-social:after
	{
		content:" ";
		display:block;
		position: absolute;
		bottom: -10px;
		left: 94px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 10px 10px 0 10px;
		border-color: #000000 transparent transparent transparent;
		
	}
	
	#issue .social-buttons
	{
		display:block;
	}
	
	#issue .spread-social .share-url
	{
		font-weight:bold;
		margin-top:10px;
		display:block;
		color:#fff;
		font-size:10px;
	}
	
	#issue .active-spread:hover .spread-social
	{
		-webkit-transform:scale(1);
		opacity: 1;
		bottom: 65px;
	}
	
	#issue .spread-social iframe
	{
		background:transparent 
	}
	
	
	.spread-social .twt
	{
		position:relative;
		right:-13px;
	}
	
	
/*	Footer
	========================================================================== */
	
	footer
	{
		color:#fff;
		padding-bottom:60px;
		clear: both;
	}
	
	footer h4
	{
		margin:0 0 10px 0;
	}
	
	footer h4 b
	{
		font-family: "hipstacorp";
		font-size:30px;
		position:relative;
		top:8px;
		margin:0;
		font-weight:normal;
	}
	
	a.appstore
	{
		font-family: "hipstacorp";
		color: black;
		background: white;
		display: block;
		float: left;
		width: 235px;
		height: 69px;
		font-size: 73px;
		border-radius: 10px;
		line-height: 74px;
		margin-top: 26px
	}
	
	a.appstore:hover
	{
		background:#FFF203;
	}
	
	.about-snap
	{
		background:#282828;
		padding:3% 0 3% 0 ;
		margin-bottom:2%;
		color:#fff;
	}
	
	.about-snap img
	{
		width:28%;
		height:auto;
		float:left;
		margin-right:50px;
	}
	
	footer a.appstore:hover
	{
		background:#FFF203;
	}
	
	footer h5
	{
		font-size:10px;
		margin-top:5px;
	}
	
	.about-snap h3
	{
		margin: 0;
		font-size: 66px;
		line-height: 1;
	}
	
	.about-snap p
	{
		font-size:20px;
		margin:10px 0 0 0;
		line-height:1.8;
	}
	
	footer nav ul
	{
		margin: 0 0 -10px 0;
		padding: 14px 0 38px 0;
		font-weight: bold;
	}
	
	footer nav ul li,footer nav ul li a,footer nav ul li a:link,footer nav ul li a:visited
	{
		float:left;
		color:#fff;
	}
	
	footer nav ul li a:hover
	{
		color:#FFF203;
	}
	
	footer nav ul li
	{
		font-size:14px;
		padding-right:20px;
	}
	
	footer .social
	{
		opacity:0.5;
		float:right;
		width:247px;
	}
	
	footer .social:hover
	{
		opacity:1;
	}
	
	footer .social .twt
	{
		width:134px;
		float:left;
		margin:0 10px 0 0;
	}
	
	


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1024px) {
	
	header nav ul li {
	padding-left: 6%;
	}
	
	.about-snap h3
	{
		font-size:30px;
	}
	
	.about-snap p {
	font-size: 18px;
	margin: 0 0 0 0;
	line-height: 1.5;
	}
	


}

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

	header nav ul {
	width: 60%;
	}
	
	header nav ul li, header nav ul li a
	{
		font-size:9px;
	}
	
	.about-snap img {
	width: 44%;
	position:relative;
	top:20px;
	}
	
	footer .fl,footer .fr,footer .social
	{
		float:none;
	}
	
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;}
.ir:before{content:"";display:block;width:0;height:100%;}
.hidden{display:none !important;visibility:hidden;}
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
.invisible{visibility:hidden;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
.fl {float:left}
.fr {float:right}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print{*{background:transparent !important;color:#000 !important;/* Black prints faster:h5bp.com/s */
box-shadow:none !important;text-shadow:none !important;}
a,
a:visited{text-decoration:underline;}
a[href]:after{content:" (" attr(href) ")";}
abbr[title]:after{content:" (" attr(title) ")";}
/*
* Don't show links for images,or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after{content:"";}
pre,
blockquote{border:1px solid #999;page-break-inside:avoid;}
thead{display:table-header-group;/* h5bp.com/t */}
tr,
img{page-break-inside:avoid;}
img{max-width:100% !important;}
@page{margin:0.5cm;}
p,
h2,
h3{orphans:3;widows:3;}
h2,
h3{page-break-after:avoid;}
}