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,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:none;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;text-decoration:none;margin:0;padding:0;}
table{border-collapse:separate;border-spacing:0}
blockquote:before,blockquote:after,q:before,q:after{content:""}
*{margin:0;padding:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; }								  
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
:focus { outline: 0;}
table { border-collapse: collapse; border-spacing: 0;}
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
a{text-decoration:none; position:relative; color:#000;}
audio,video,canvas {max-width: 100%;}
#portfolio {  
    padding: 1rem;
    background-color: #f4f4f4;
    -webkit-column-count: 3; 
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    -webkit-column-width: 33.33333333333333%;
    -moz-column-width: 33.33333333333333%;
    column-width: 33.33333333333333%;
}
.portfolio-item {
    overflow: hidden;
    display: flex;
    margin-bottom: 1rem;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    position: relative;
    background: black;
}
.portfolio-item img {
    max-width: 100%;
    width: 100%;
    height: auto;
    position: relative;
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
  
}

.portfolio-item a {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 2;
}
.portfolio-item .portfolio-link {
    position: absolute;
    bottom: -100%;
    left: 0;
    padding: 0;
    margin: 0;
    padding: 10px 20px;
    opacity: 0;
    background: rgba(255, 255, 255, 0.75);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
    height: 100%;
    width: 100%;
    display: flex!important;
    flex-flow: row wrap;
    align-items: flex-end;
    align-content: flex-end;
    z-index: 2;
}
.portfolio-item:hover .portfolio-link {
    bottom: 0;
    opacity: 1;
}
.portfolio-item:hover img {
    transform: scale(1.2);
}
.portfolio-link h3 {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: lighter;
    position: relative;
    float: left;
    font-family: 'futurastd-bold';
    margin-bottom: 10px;
	color: #000;
}
.portfolio-link h3:before {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 0;
    height: 2px;
    width: 50px;
    background: #000;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.portfolio-link span {
    width: 100%;
    text-align: left;
    font-size: 14px;
    opacity: 0.6;
    margin-top: 9px;
    text-transform: uppercase;
}
.portfolio-item .actionLink {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	padding: 8px 15px;
	background-color: rgba(0,0,0,0.2);
	margin: 0;
	width: 140px;
	font-size: 9px;
	text-align: right;
}
.portfolio-item .actionLink h5 {
	color: #fff;
	font-weight: bold;
	font-size: 10px;
}
.portfolio-item[data-portfolio="all"] .actionLink {
	display: block;
}
@media (max-width: 768px) {
 	#portfolio {  
	    margin: 1rem 0;
	    -webkit-column-count: 1; 
	    -moz-column-count: 1;
	    column-count: 1;
	    -webkit-column-gap: 1rem;
	    -moz-column-gap: 1rem;
	    column-gap: 1rem;
	    -webkit-column-width: 100%;
	    -moz-column-width: 100%;
	    column-width: 100%;
	}
}
 