/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, main {
	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;
}

/* ---------------------------------------------------------------------- */
/* storeteller-de v2 MapsCollection-CSS */
/* ---------------------------------------------------------------------- */

html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* ---------------------------------------------------------------------- */
/* basics */
/* ---------------------------------------------------------------------- */

body {
    font-family: "San Francisco", "SF Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400; font-size: 14px; line-height: 1.4em; letter-spacing: normal;
    color: rgba(255,255,255, 1.0);
	background: rgba(0, 0 ,0, 1);
    overflow-x: hidden;
}

	@media (prefers-color-scheme: dark) {
	  body {
	  	color: rgba(255,255,255, 1.0);
	  	background: rgba(0, 0 ,0, 1); 
	  }
	}

body, html {
    margin-top: 0px !important;
}

body, html { 
    overflow-x: hidden;
}

a, a:visited {
    outline: none;
    text-decoration: none;
    color: rgba(45,85,165, 1);
}

	@media (prefers-color-scheme: dark) {
		a, a:visited {
		    outline: none;
		    text-decoration: none;
		    color: rgba(0, 110, 220, 1);
		}
	}

a:hover {
    text-decoration: none;
    color: rgba(45,85,165, 1);
}

section, footer, header, aside {
    display: block;
}

::selection {
    background: rgba(255,255,255, 1);
    color: rgba(0,0,0,1);
    text-shadow: none;
    opacity: 1;
}

::-moz-selection {
    background: rgba(255,255,255, 1);
    color: rgba(0,0,0,1);
    text-shadow: none;
    opacity: 1;
}

table {
    display: table
}

tr {
    display: table-row
}

thead {
    display: table-header-group
}

tbody {
    display: table-row-group
}

tfoot {
    display: table-footer-group
}

col {
    display: table-column
}

colgroup {
    display: table-column-group
}

td, th {
    display: table-cell
}

caption {
    display: table-caption
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

/*---------------------------------------------------------------------------*
 * SF Text
 *---------------------------------------------------------------------------*/

/** Semibold */
@font-face {
  font-family: "SF Text";
  font-weight: 600;
  src: url("https://sf.abarba.me/SF-UI-Text-Semibold.otf");
}

/** Regular */
@font-face {
  font-family: "SF Text";
  font-weight: 400;
  src: url("https://sf.abarba.me/SF-UI-Text-Regular.otf");
}

/*---------------------------------------------------------------------------*
 * SF 
 *---------------------------------------------------------------------------*/

/** Regular */
@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

/** Semi Bold */
@font-face {
  font-family: "San Francisco";
  font-weight: 600;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff");
}

/* ---------------------------------------------------------------------- */
/* desktop vs. mobile */
/* ---------------------------------------------------------------------- */

.desktop-plus-only {
    visibility: hidden;
    display: none;
}
.desktop-only {
    visibility: hidden;
    display: none;
}
.tablet-only {
    visibility: visible;
    display: inline;
}
.mobile-only {
    visibility: visible;
    display: inline;
}

@media only screen and (min-width: 768px) {
	.desktop-plus-only {
    	visibility: hidden;
		display: none;
	}
    .desktop-only {
        visibility: visible;
        display: inline;
    }
    .tablet-only {
        visibility: visible;
        display: inline;
    }
    .mobile-only {
        visibility: hidden;
        display: none;
    }
}

@media only screen and (min-width: 1024px) {
	.desktop-plus-only {
    	visibility: hidden;
		display: none;
	}
    .desktop-only {
        visibility: visible;
        display: inline;
    }
    .tablet-only {
        visibility: hidden;
        display: none;
    }
    .mobile-only {
        visibility: hidden;
        display: none !important;
    }
}


@media only screen and (min-width: 1260px) {
	.desktop-plus-only {
    	visibility: visible;
        display: inline;
	}
    .desktop-only {
        visibility: visible;
        display: inline;
    }
    .tablet-only {
        visibility: hidden;
        display: none;
    }
    .mobile-only {
        visibility: hidden;
        display: none !important;
    }
}


/*---------------------------------------------------------------------------*
 * curtain 
 *---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*
 * links 
 *---------------------------------------------------------------------------*/
 
#links {
	 margin: 0; padding: 0;
	 height: 44px; width: 140px; display: block;
	 position: absolute;
	 top: 36px; right: calc(50% - 55px);
	 color: rgba(255,255,255,0.5);
	 background: rgba(0,0,0,0);
	 z-index: 3;
}

@media only screen and (min-width: 768px) {
#links {
	 position: fixed;
	 top: 48px; right: 48px;
}
}

@media only screen and (min-width: 1024px) {

}
 
#links ul li {
	  list-style: none;
	  list-style-image: none;
	  list-style-type: none;
}

#links li a {
	  filter: grayscale(100%);
	  transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

#links li a:hover {
	  filter: grayscale(0%);
	  cursor: pointer;
	  transform: scale(1.4);
	  transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}
 
#links .behance a {
	 margin: 0 10px 0 0; padding: 0;
	 text-indent: -9999px;
	 width: 14px; height: 14px; display: block;	 
	 float: left;
	 background: #0057ff;
	 border-radius: 20px;
}
 
#links .twitter a {
	 margin: 0 10px 0 0; padding: 0;
	 text-indent: -9999px;
	 width: 14px; height: 14px; display: block;
	 float: left;
	 background: rgb(29, 161, 242);
	 border-radius: 20px;
}
 
#links .linkedin a {
	 margin: 0 10px 0 0; padding: 0;
	 text-indent: -9999px;
	 width: 14px; height: 14px; display: block;
	 float: left;
	 background: #0073b1;
	 border-radius: 20px;
}

#links .instagram a {
	 margin: 0 0 0 0; padding: 0;
	 text-indent: -9999px;
	 width: 14px; height: 14px; display: block;
	 float: left;
	 background: rgba(0,0,0,1) url('image-instagram.jpg') center center no-repeat;
	 background-size: 100% auto;
	 border-radius: 20px;
}

#links .gumroad a {
	 margin: 0 10px 0 0; padding: 0;
	 text-indent: -9999px;
	 width: 14px; height: 14px; display: block;
	 float: left;
	 background: #36a9ae;
	 background-size: 100% auto;	 
	 border-radius: 20px;
}

#links .mastodon a {
	 margin: 0 10px 0 0; padding: 0;
	 text-indent: -9999px;
	 width: 14px; height: 14px; display: block;
	 float: left;
	 background: #595aff;
	 background-size: 100% auto;	 
	 border-radius: 20px;
}

 /*---------------------------------------------------------------------------*
 * content 
 *---------------------------------------------------------------------------*/

#hero {
  height: 600px; height:100vh;
  width: 100%;
  position: relative;
  z-index: 2;
  background: rgba(20,20,20,1);
/*background: #2e1d7d;
  background: -webkit-radial-gradient(circle, #2e1d7d 0%, #050939 80%);
  background: radial-gradient(circle, #2e1d7d 0%, #050939 80%); */
  display:flex;
  align-items:center;
  box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.1);
}
 
#welcome {
   margin: 0 auto; padding: 0;
   height: auto; width: 90%; max-width: 860px;
   display: block;
   font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 18px;
   line-height: 1.28em;
   font-weight: 600;
   letter-spacing: -.003em;	 
}

		@media only screen and (min-width: 768px) {
			  #welcome {
				margin: 0 auto; padding: 0;
				height: auto; width: 75%; max-width: 860px;
				display: block;
				font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
			    font-size: 24px;
			    line-height: 1.28em;
			    font-weight: 600;
			    letter-spacing: -.003em;	 
			 }
		}
		
		@media only screen and (min-width: 1280px) {
			  #welcome {
				margin: 0 auto; padding: 0;
				height: auto; width: 75%; max-width: 1024px;
				display: block;
				font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
			    font-size: 24px;
			    line-height: 1.28em;
			    font-weight: 600;
			    letter-spacing: -.003em;	 
			 }		
		}
		
#scroll {
	margin: 0; padding: 0;
	width: 36px; height: 36px; display: block;
	position: absolute;
	bottom: 112px; right: calc(50% - 18px);
    background: transparent url('icon-scroll-arrow-255255255.svg') center center no-repeat;
	background-size: 12px auto; 
/*	background: transparent url('icon-scroll-255255255.svg') center center no-repeat;
	background-size: 40px auto; */
}		

@media only screen and (min-width: 768px) {
#scroll {
	margin: 0; padding: 0;
	width: 50px; height: 50px; display: block;
	position: absolute;
	bottom: 24px; right: calc(50% - 25px);
	background: transparent url('icon-scroll-255255255.svg') center center no-repeat;
	background-size: 40px auto; 
}	
}

@media only screen and (min-width: 1024px) {

}

#content {
   margin: 24px auto; padding: 0; 
   margin-top: 72px;
   display: block;
   width: 85%; max-width: 860px;
   min-height: 100vh;
   text-align: left; 
   
   font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 16px;
   line-height: 1.44em;
   font-weight: 400;
   letter-spacing: -.003em;   
}

@media only screen and (min-width: 768px) {
	#content {
	   margin: 24px auto; padding: 0; 
	   margin-top: 72px;
	   display: block;
	   width: 95%; max-width: 860px;
	   min-height: 100vh;
	   text-align: left; 
	   
	   font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	   font-size: 16px;
	   line-height: 1.44em;
	   font-weight: 400;
	   letter-spacing: -.003em;   
	}
}

@media only screen and (min-width: 1280px) {
	#content {
	   margin: 24px auto; padding: 0; 
	   margin-top: 72px;
	   display: block;
	   width: 100%; max-width: 1024px;
	   min-height: 100vh;
	   text-align: left; 
	   
	   font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	   font-size: 16px;
	   line-height: 1.44em;
	   font-weight: 400;
	   letter-spacing: -.003em;   
	}
}

 #portfolio-wrap {
	margin: 0 auto; padding: 0px 0px;
	margin-top: 0px;
	min-height: 100px;
	display: block;
	text-align: center;
}

	@media only screen and (min-width: 768px) {
		#portfolio-wrap {
			margin: 0 auto; padding: 6px 0px;
			margin-top: 12px; 
			min-height: 100px;
			display: block;
			text-align: center;
			display: grid;			
		}	
	}

	@media (prefers-color-scheme: dark) {
		#portfolio-wrap {
			background: rgba(33,33,33,1);
		}
		
	}
	
#portfolio-wrap.column-100 {
	grid-template-columns: none !important;
	grid-gap: 24px;		
}

#portfolio-wrap.column-050 {
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 24px;		
}		

/*---------------------------------------------------------------------------*
 * footer 
 *---------------------------------------------------------------------------*/

footer {
	margin: 0 auto; padding: 24px 0;
	width: 80%; height: auto; display: block;
	font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 10px;
    line-height: 1.28em;
    text-align: center;
    color: rgba(65,65,65,1);	
    background: transparent url('image-signature.svg') center top no-repeat;
    background-size: 36px auto;
}

@media only screen and (min-width: 768px) {
footer {
	width: 50%; height: auto; display: block;	
}
}

@media only screen and (min-width: 1024px) {

}

/*---------------------------------------------------------------------------*
 * misc 
 *---------------------------------------------------------------------------*/
 
.text-gradient {
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2d55a5+0,006edc+100 */
   background: rgb(45,85,165); /* Old browsers */
   background: -moz-linear-gradient(left,  rgba(45,85,165,1) 0%, rgba(0,110,220,1) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left,  rgba(45,85,165,1) 0%,rgba(0,110,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right,  rgba(45,85,165,1) 0%,rgba(0,110,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d55a5', endColorstr='#006edc',GradientType=1 ); /* IE6-9 */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.text-grey {
	opacity: 0.5;
}

.text-light {
	font-weight: 400;
}

.text-line {
	text-decoration: line-through;
}

.signature {
	margin: 0 0 0 -20px; padding: 0;
	width: 90px; height: 80px; display: inline-block;
	background: transparent url('image-signature.svg') center center no-repeat;
	background-size: 90px auto;
	text-indent: -9999px;
}

a.multiline {
	text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;	
}

a.multiline:hover, a.multiline:focus {
	background-size: 100% 2px;	
}

a.multiline-1px {
	text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s;	
}

a.multiline-1px:hover, a.multiline-1px:focus {
	background-size: 100% 1px;	
}

h1 {
	 margin: 0 auto; padding: 0;
	 font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: 18px;
     line-height: 1.28em;
     font-weight: 600;
     letter-spacing: -.003em;
     text-align: left;	
     margin-bottom: 6px; 
 }
 
 @media only screen and (min-width: 768px) {
	  h1 {
		 margin: 0 auto; padding: 0;
		 font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	    font-size: 24px;
	    line-height: 1.28em;
	    font-weight: 600;
	    letter-spacing: -.003em;	
	    margin-bottom: 6px;  
	 }
 }
 
h2 {
	 margin: 0 auto; padding: 0;
	 font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: 14px;
     line-height: 1.28em;
     font-weight: 600;
     letter-spacing: -.003em;
     text-align: left;	
     margin-bottom: 6px; 
 }
 
 @media only screen and (min-width: 768px) {
	  h2 {
		 margin: 0 auto; padding: 0;
		 font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	    font-size: 20px;
	    line-height: 1.28em;
	    font-weight: 600;
	    letter-spacing: -.003em;	
	    margin-bottom: 6px;  
	 }
 } 
 
#portfolio-tile {
	margin: 12px auto; padding: 24px 24px 12px 24px;
	width: 100%; height: auto; min-height: 300px; height: auto;
	color: rgba(255,255,255, 1.0);
	background: rgba(20,20,20,1);
	border-radius: 10px;
	font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 18px;
    line-height: 1.28em;
    font-weight: 600;
    letter-spacing: -.003em;
    text-align: left;
}

	@media only screen and (min-width: 768px) {
		#portfolio-tile {
			margin: 0 0; padding: 24px 24px 12px 24px;
			width: 100%; height: auto; min-height: 400px;
			color: rgba(255,255,255, 1.0);
			background: rgba(20,20,20,1);
			border-radius: 10px;
			font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		    font-size: 18px;
		    line-height: 1.28em;
		    font-weight: 600;
		    letter-spacing: -.003em;
		    text-align: left;			
		}
	}

	@media (prefers-color-scheme: dark) {
		#portfolio-wrap {
			background: rgba(20,20,20,1);
		}
		
	}
	
#portfolio-tile.color {
	background: linear-gradient(150deg, #359cd7 10%, #7d6efb 100%);
	background: -webkit-linear-gradient(300deg, #359cd7 10%, #7d6efb 100%);	
}
 
 
#portfolio-tile .date {
		margin: 0 auto; padding: 0;
		margin-bottom: 12px;
		font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	    font-size: 10px;
	    line-height: 1.28em;
	    font-weight: 600;
	    letter-spacing: -.003em;	
	    margin-bottom: 6px;  
	    opacity: 0.5;
	    display: block;
 }
 
 @media only screen and (min-width: 768px) {
	  #portfolio-tile .date {
		margin: 0 auto; padding: 0;
		margin-bottom: 12px;
		font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	    font-size: 10px;
	    line-height: 1.28em;
	    font-weight: 600;
	    letter-spacing: -.003em;	
	    margin-bottom: 6px;  
	    opacity: 0.5;
	    display: block;
	 }
 } 
 
#portfolio-tile .desc {
	 margin: 0 auto; padding: 0;
	 font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: 14px;
	 line-height: 1.42em;
	 font-weight: 600;
	 letter-spacing: -.003em;	
	 margin-bottom: 6px;  
	 opacity: 0.65; 
 }
 
 @media only screen and (min-width: 768px) {
	  #portfolio-tile .desc {
		 margin: 0 auto; padding: 0;
		 font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	    font-size: 20px;
	    line-height: 1.28em;
	    font-weight: 600;
	    letter-spacing: -.003em;	
	    margin-bottom: 6px;  
	    opacity: 0.65;
	 }
 }  
 
#portfolio-tile img {
	 margin: 12px 0 6px 0; padding: 0;
	 width: 100%; height: auto;
	 display: block;
	 border-radius: 6px;
 }

#portfolio-tile .caption {
	 margin: 0 auto; padding: 0;
	 font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: 10px;
     line-height: 1.28em;
     font-weight: 400;
     letter-spacing: .075em;
     text-align: center;	
     margin-bottom: 12px;
     color: rgba(65,65,65,1); 
     display: block;
     /* background: transparent url('icon-photo-065065065.svg') center left -2px no-repeat;
     background-size: 14px; */
}

#portfolio-footer {
	margin: 0; padding: 0; height: 44px;
	width: 100%; display: grid;
	grid-template-columns: auto 140px;
	grid-gap: 0px;		
}

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

}

@media only screen and (min-width: 1024px) {
#portfolio-footer {
	margin: 0; padding: 0;
	width: 100%; display: grid;
	grid-template-columns: auto 140px;
	grid-gap: 0px;		
}
}

#portfolio-links {
	display: block;
}

#portfolio-links ul li {
	 list-style: none;
	 list-style-type: none;
	 float: right;
}

#portfolio-tile li.web {
	 margin: 0; padding: 0;
	 width: 28px; height: 44px;
	 display: block;
	 text-indent: -9999px;
	 background: transparent url('icon-Web-255255255.svg') center center no-repeat;
	 background-size: auto 14px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;	 
}

#portfolio-tile li.twitter {
	 margin: 0; padding: 0;
	 width: 28px; height: 44px;
	 display: block;
	 text-indent: -9999px;
	 background: transparent url('icon-Twitter-255255255.svg') center center no-repeat;
	 background-size: auto 12px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;	 
}

#portfolio-tile li.behance {
	 margin: 0; padding: 0;
	 width: 28px; height: 44px;
	 display: block;
	 text-indent: -9999px;
	 background: transparent url('icon-Behance-255255255.svg') center center no-repeat;
	 background-size: auto 12px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;	 
}

#portfolio-tile li.instagram {
	 margin: 0; padding: 0;
	 width: 28px; height: 44px;
	 display: block;
	 text-indent: -9999px;
	 background: transparent url('icon-Instagram-255255255.svg') center center no-repeat;
	 background-size: auto 14px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;	 
}

@media only screen and (min-width: 768px) {
	#portfolio-tile li.web {
		width: 44px; height: 44px; 
	 	background-size: auto 20px;
	}

	#portfolio-tile li.behance {
		width: 44px; height: 44px; 
	 	background-size: auto 16px;
	}
	
	#portfolio-tile li.twitter {
		width: 44px; height: 44px;	 
	 	background-size: auto 16px;
	}
	
	#portfolio-tile li.instagram {
		width: 44px; height: 44px;	 
	 	background-size: auto 20px;
	}	
}

@media only screen and (min-width: 1024px) {
	#portfolio-tile li.web {
		width: 44px; height: 44px; 
	 	background-size: auto 20px;
	}

	#portfolio-tile li.behance {
		width: 44px; height: 44px; 
	 	background-size: auto 16px;
	}
	
	#portfolio-tile li.twitter {
		width: 44px; height: 44px;	 
	 	background-size: auto 16px;
	}
	
	#portfolio-tile li.instagram {
		width: 44px; height: 44px;	 
	 	background-size: auto 20px;
	}
}

#portfolio-tile li.web:hover {
	 background: transparent url('icon-Web-gradient.svg') center center no-repeat;
	 background-size: auto 14px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

#portfolio-tile li.twitter:hover {
	 background: transparent url('icon-Twitter-gradient.svg') center center no-repeat;
	 background-size: auto 12px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

#portfolio-tile li.behance:hover {
	 background: transparent url('icon-Behance-gradient.svg') center center no-repeat;
	 background-size: auto 12px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

#portfolio-tile li.instagram:hover {
	 background: transparent url('icon-Instagram-gradient.svg') center center no-repeat;
	 background-size: auto 14px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

@media only screen and (min-width: 768px) {
#portfolio-tile li.web:hover {
	 background: transparent url('icon-Web-gradient.svg') center center no-repeat;
	 background-size: auto 20px;
}

#portfolio-tile li.twitter:hover {
	 background: transparent url('icon-Twitter-gradient.svg') center center no-repeat;
	 background-size: auto 16px;
}

#portfolio-tile li.behance:hover {
	 background: transparent url('icon-Behance-gradient.svg') center center no-repeat;
	 background-size: auto 16px;
}

#portfolio-tile li.instagram:hover {
	 background: transparent url('icon-Instagram-gradient.svg') center center no-repeat;
	 background-size: auto 20px;
}
}

@media only screen and (min-width: 1024px) {
#portfolio-tile li.web:hover {
	 background: transparent url('icon-Web-gradient.svg') center center no-repeat;
	 background-size: auto 20px;
}

#portfolio-tile li.twitter:hover {
	 background: transparent url('icon-Twitter-gradient.svg') center center no-repeat;
	 background-size: auto 16px;
}

#portfolio-tile li.behance:hover {
	 background: transparent url('icon-Behance-gradient.svg') center center no-repeat;
	 background-size: auto 16px;
}
#portfolio-tile li.instagram:hover {
	 background: transparent url('icon-Instagram-gradient.svg') center center no-repeat;
	 background-size: auto 20px;
}
}

#portfolio-tile li.offline {
	 opacity: 0.25;
}

#portfolio-tile li.web.offline:hover {
	 background: transparent url('icon-Web-255255255.svg') center center no-repeat;
	 background-size: auto 14px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

#portfolio-tile li.twitter.offline:hover {
	 background: transparent url('icon-Twitter-255255255.svg') center center no-repeat;
	 background-size: auto 12px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

#portfolio-tile li.behance.offline:hover {
	 background: transparent url('icon-Behance-255255255.svg') center center no-repeat;
	 background-size: auto 12px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

@media only screen and (min-width: 768px) {
#portfolio-tile li.web.offline:hover {
	 background: transparent url('icon-Web-255255255.svg') center center no-repeat;
	 background-size: auto 20px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

#portfolio-tile li.twitter.offline:hover {
	 background: transparent url('icon-Twitter-255255255.svg') center center no-repeat;
	 background-size: auto 16px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

#portfolio-tile li.behance.offline:hover {
	 background: transparent url('icon-Behance-255255255.svg') center center no-repeat;
	 background-size: auto 16px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}
}

@media only screen and (min-width: 1024px) {
#portfolio-tile li.web.offline:hover {
	 background: transparent url('icon-Web-255255255.svg') center center no-repeat;
	 background-size: auto 20px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

#portfolio-tile li.twitter.offline:hover {
	 background: transparent url('icon-Twitter-255255255.svg') center center no-repeat;
	 background-size: auto 16px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}

#portfolio-tile li.behance.offline:hover {
	 background: transparent url('icon-Behance-255255255.svg') center center no-repeat;
	 background-size: auto 16px;
	 transition-property: all; -webkit-transition-property: all; -webkit-transition-duration: 150ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -moz-transition-property: all; -moz-transition-duration: 150ms; -moz-transition-timing-function: linear; -moz-transition-delay: 0; -ms-transition-property: all; -ms-transition-duration: 150ms; -ms-transition-timing-function: linear; -ms-transition-delay: 0; -o-transition-property: all; -o-transition-duration: 150ms; -o-transition-timing-function: linear; -o-transition-delay: 0; transition-property: all; transition-duration: 150ms; transition-timing-function: linear; transition-delay: 0;
}
}












#portfolio-tile li:hover {
	cursor: pointer;
}

#portfolio-tile li.offline:hover {
	 cursor: default;
}

#portfolio-comment {
		margin: 0 auto; padding: 0;
		margin-top: 8px;
		font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	    font-size: 10px;
	    line-height: 1.28em;
	    font-weight: 400;
	    letter-spacing: -.003em;	
	    display: block;
	    width: 100%;
	    color: rgba(128,128,128,1);
}

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

}

@media only screen and (min-width: 880px) {
#portfolio-comment {
		margin: 0 auto; padding: 0;
		font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	    font-size: 10px;
	    line-height: 1.28em;
	    font-weight: 400;
	    letter-spacing: -.003em;	
	    display: block;
	    width: 100%; line-height: 44px;
		height: 44px;
}
}

.signoff {
	 margin: 0 auto; padding: 0;
	 margin-top: 36px;
	 font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: 18px;
     line-height: 1.28em;
     font-weight: 600;
     letter-spacing: -.003em;
     text-align: left;	
     margin-bottom: 6px; 
     display: block;
 }
 
 @media only screen and (min-width: 768px) {
	  .signoff {
	  	margin: 0 auto; padding: 0;
	  	margin-top: 36px;
		font-family: "SF Display", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	    font-size: 24px;
	    line-height: 1.28em;
	    font-weight: 600;
	    letter-spacing: -.003em;	
	    margin-bottom: 6px; display: block; 
	 }
 }