﻿/***Navigation***/

#portfnavdiv li a
{
	padding-left:30px;
	color:white;
	font-family:Voltaire;
	font-size:1.2em;
	line-height:1.0em;
	padding-top:5px;
}

#portfnavdiv li a:hover, portfnavdiv li a.active
{
	color:#5fa544;
}

#portfnavdiv li a::before
{
	content: '\2022';
	color:#6a6c6e;
	padding-right:6px;
	font-size:2.0em;
	margin-top:5px;
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
	vertical-align: sub;
}

#portfnavdiv li a.active::before, #portfnavdiv li a:hover::before
{
	color:#5fa544;
}

#portfnavdiv
{
	height:35px;
	width:100%;
	background:#333133;
}

#categorynav
{
	width:100%;
	max-width:1200px;
	margin:0px auto;
	height:30px;
	padding-top:5px;
}

#categorynav li
{
	float:left;
}


#portfoliolist
{
	width:100%;
	max-width:1200px;
	margin:0px auto;
	float:left;
	margin-left:calc(50% - 600px);
}

.divboxpro
{
	width:299px;
	float:left;
	height:275px;
	border-right:1px solid white;
	border-bottom:1px solid white;
}

.divboxpro:nth-child(4n)
{
	border-right:none;
}

.bigimag
{
	width: 299px;
	height: 275px;
}

.title 
{
	width: 299px;
	height: 275px;
	position:absolute;
	z-index:3000;
	margin-top:-282px;
	color:#5fa544;
	display:block;
	background:rgba(0,0,0,0);

	-moz-transition: background 0.5s;
	-webkit-transition: background 0.5s;
	-o-transition: background 0.5s;	
	-ms-transition: background 0.5s;
	transition: background 0.5s;
}

.title h2
{
	color:green;
	padding-top:20px;
	width:100%;
	text-align:center;
	text-transform:uppercase;
	font-family:Voltaire;
	font-size:2.0em;
	
	opacity:0;
	filter:alpha(opacity=0);

	-moz-transition: opacity 0.5s, filter 0.5s;
	-webkit-transition: opacity 0.5s, filter 0.5s;
	-o-transition: opacity 0.5s, filter 0.5s;
	-ms-transition: opacity 0.5s, filter 0.5s;
	transition: opacity 0.5s, filter 0.5s;
}

.title:hover
{
	background:rgba(0,0,0,0.5);
}

.title:hover h2 
{
	opacity: 1.0;
	filter: alpha(opacity=100);
}

@media screen and (max-width:1200px) 
{
	.divboxpro
	{
		width:33%;
		height:auto;
	}

	.divboxpro img
	{
		width:100%;
		height:auto;
	}

	.divboxpro:nth-child(4n)
	{
		border-right:1px solid white;
	}

	.title
	{
		width:32.5vw;
		height:29.5vw;
		margin-top:-30vw;
	}

	#portfoliolist 
	{
		margin-left:0px;
	}

	#portfnavdiv, #categorynav
	{
		height:auto;
		display:table;
	}


}

@media screen and (max-width:729px) 
{
	.divboxpro
	{
		width:calc(100% - 1px);
		border:none;
	}

	.title
	{
		width:100%;
		height:91vw;
		margin-top:-91vw;
	}

	.title h2 
	{
		opacity: 1.0;
		filter: alpha(opacity=100);
	}
}