/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Basic Styles
	#Page Styles
	#Media Queries
	#Font-Face */
	

/* #Basic Styles
================================================== */
	
body {
	height: 1500px;
	font-size: 11px;
	font-weight: lighter;
	letter-spacing: 1.5px;
	font-family: 'OpenSans-Regular'; /* Change your font */
	min-width: 100%;
	line-height: 14px;	
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'OpenSans-Regular'; /* Change your font */
	font-weight: normal;
	color: #444;
}

h1 { font-size: 30px; line-height: 35px; margin-bottom: 21px; }
h2 { font-size: 21px; line-height: 28px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.02em; }
h3 { font-size: 18px; line-height: 21px; margin-bottom: 14px; text-transform: small-caps; letter-spacing: 0.02em; }
h4 { font-size: 12px; line-height: 16px; margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.02em; }

a, a:visited { 
	color: #444; 
	text-decoration: none;  
	outline: 0; 
	transition: color .1s; 

}
a:hover, a:focus { color: #999; }
p a, p a:visited { line-height: inherit; }

p { margin: 0 0 21px 0; }

li { line-height: 21px; margin-bottom: 7px; }

.port-button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	margin: 0 0px;
	padding: 0;
	border: none;
	color: #6D6D6D !important;
	content: "";
	font-size: 30px;
	text-shadow: -1px 0 0 rgba(0,0,0,0.2);
	transition: background .1s;
	width: 100%;
	height: 100%;
}
.port-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	border: none;
	color: #fff;
	
}
.port-button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	border: none;
	width: 430px;
}

/* #Site Styles
================================================== */
.spacer { 
	height: 20px;
	width: 100%;
	clear: both;
}

/* main header */
.main-header { margin: 49px 0 21px; text-align: center; }
.main-header h1 {
	display: inline-block;
	margin: 0;
	padding: 0 10px 21px; 
	background: url(../../_assets/images/_portfolio/heading_stripe.png) repeat-x left bottom; 
}

/* theme preview */
.preview-theme {
	margin: 0px 0;
	border: 25px solid #eee;
	background: #fff url(../../_assets/images/_portfolio/preview.png) no-repeat center;
	min-height: 400px;
}
.preview-theme:hover {
	border: 5px solid #e5e5e5;
}
.preview-theme img {
	width: 100%;
	height: auto;
	vertical-align: top;
}
/* nav links */
.nav-links {
	margin-bottom: 2px;
}
.nav-links:before {
	display: block;
	width: 100%;
	height: 100%;
	border-top: 1px solid #BC0003;
	margin-bottom: 5px;
	margin-top: 5px;

}
.nav-links a {
	font-weight: bold;
	text-decoration: none;
	color: #555;
}
.nav-links a:hover {
	color: #ff5452;
}
/* portfolio filters */
.portfolio .filters {
	display: block;
 	margin-left: auto;
  	margin-right: auto;
  	width: 40%;
	margin-bottom: 15px;
}
.portfolio .filters a {
	vertical-align: center;
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	padding: 10px 3px 0px;
	color: #9D9D9D;
	background-color: #333;
	border: 1px solid #c4c4c4;
	clear: both;
	letter-spacing: 1px;
	width: 125px;
	height: 25px;
	text-align: center;
	font-size: 11px;
	font-family: 'OpenSans-Regular';
	
}
.portfolio .filters a:hover {
	color: #fff;
	border: 1px solid #c4c4c4;
	width: 125px;
	height: 25px;
	text-align: center;
	background-color: #7E7E7E;
}
.portfolio .filters a.filter-active {
	color: #fff;
	border: 1px solid #c4c4c4;
	background-color: rgba(80,81,87,0.50);
	width: 125px;
	height: 25px;
	text-align: center;

}
/* portfolio list */
.portfolio .list {
	width: 100vw;
	clear: both;
	position: relative;
	display: inline-block;
	flex: 1 100%;
}
.portfolio .list li {
	display: inline-block;
	float: left;
 	width: 25%;
	margin: 0px auto;
}
.portfolio .list .port-thumb {
	position: relative;
	display: grid;
	width: 100%;
 	height: 100%;
	overflow: hidden;
}
.portfolio .list .port-thumb img {
	width: 100%;
	height: auto;
	vertical-align: top;
	object-fit: cover;
}
.portfolio .list .view {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: #fff;
	background: rgba(255,255,255,0.8);
	border: 1px solid #C4C4C4;
	text-align: left;
	line-height: 210px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0s linear .3s;
	transform: translate3d(0,0,0);
}
.portfolio .list .port-thumb:hover .view {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}
.portfolio .list .view .button { 
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	width:100%;
	height: auto;
	top: 100%;
	margin-top: 17px;

}
.portfolio .list h4 {
	text-align: left;
}
.portfolio .list h4 a {
	text-decoration: none;

}
.portfolio .colio-active-item h4 a {
	background: #ccc;
	padding: 7px 10px;
}
.portfolio .list p {
	text-align: center;
	font-size: 12px;
	line-height: 1.3em;
}
/* scroll up */
#scrollUp {
	position: fixed;
	bottom: 5px;
	right: 10px;
	width: 42px;
	height: 42px;
	background: #eee url(../../_assets/images/_portfolio/scrollup.png) no-repeat center;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	border-radius: 3px;
}
#scrollUp:hover {
	background-color: #C4C4C4;
}

/* #Page Styles
================================================== */

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

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1520px) {
.colio { margin-right: 24px!important; }
.portfolio .list .thumb { width: 228px; height: 228px; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	h1, h2, h3, h4, h5, h6 {
	text-align: center;
	font-family: "OpenSans Regular", "Open Sans Bold", "Open Sans Bold Italic", "Open Sans Extrabold", "Open Sans Extrabold Italic", "Open Sans Italic", "Open Sans Light", "Open Sans Light Italic", "Open Sans Semibold", "Open Sans Semibold Italic";
	font-variant: small-caps;
}
		.preview-theme + p { margin-bottom: 42px; }
		.main-header { margin: 21px 0 0!important; }
		.purchase { text-align: center; padding-top: 21px; }
		.portfolio .filters { float: left; margin-top: 0; text-align: center; width: 100%; }
		.portfolio .filters a { margin: 0 10px; }
		.portfolio .list li { float: none; margin-right: 0; }
		.colio { margin-right: 0!important; }
		.portfolio .list .thumb { width: 420px; height: 420px; }
		footer { text-align: center; margin-bottom: 14px!important; }
		
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.portfolio .list .thumb { width: 300px; height: 300px; }
}

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/