/*



# SP Portfolio - Simple Portfolio module by JoomShaper.com



# -------------------------------------------------------------



# Author    JoomShaper http://www.joomshaper.com



# Copyright (C) 2010 - 2014 JoomShaper.com. All Rights Reserved.



# @license - GNU/GPL V2 or Later



# Websites: http://www.joomshaper.com



*/







div.blinker .filter-autohide{



	text-align: center;



}







div.blinker .filter-autohide i {



  color: #67B86E;



  cursor: pointer;



  font-size: 32px;



  display: inline-block;



  margin-bottom: 30px;



}











div.blinker ul.sp-portfolio-filter{



	list-style: none;



	padding: 0;



	margin-top: 0;



 	margin-bottom: 35px;



 	text-align: center;



 	display: none;



}







div.blinker ul.sp-portfolio-filter li{



	display: inline-block;



 	padding: 0 20px;



}







div.blinker ul.sp-portfolio-filter li a{



	color: #5f5f5f;



}







div.blinker ul.sp-portfolio-filter li a.active{



	color: #60aa68;



}







div.blinker .col-1 {width:100%}



div.blinker .col-2 {width:50%}



div.blinker .col-3 {width:31%;}



div.blinker .col-4 {width:24%}



div.blinker .col-5 {width:20%}



div.blinker .col-6 {width:16%}



div.blinker .col-7 {width:14%}



div.blinker .col-8 {width:12.5%}



div.blinker .col-9 {width:11%}



div.blinker .col-10 {width:10%}



div.blinker{



	margin-top: 2px;



}



div.blinker ul.sp-portfolio-items{



	list-style: none;



	padding: 0;



	margin: -15px;



	display: block;



	position: relative;



}







div.blinker ul.sp-portfolio-items > li{



	background: none;



	padding: 0;



	margin: 0;



	float: left;



}







div.blinker .sp-portfolio-item-inner{



	margin: 9px;

	text-align:center;



}







div.blinker .sp-portfolio-thumb,



div.blinker .sp-portfolio-item-details {



	position: relative;



	overflow: hidden;



}







div.blinker .sp-portfolio-item-details{



	padding: 30px;



	max-width: 60%;



	box-sizing: border-box;



	-webkit-box-sizing: border-box;



	-moz-box-sizing: border-box;



	-o-box-sizing: border-box;



	-sm-box-sizing: border-box;



}







div.blinker .sp-portfolio-thumb img{



	width: 32%;
	
	/* height:118px; */



}







div.blinker .sp-portfolio-thumb .sp-portfolio-overlay{



	position: absolute;



	top: 0;



	left: 0;



	width: 100%;



	height: 100%;



	overflow: hidden;



	z-index: 1;



	opacity: 0;



	-webkit-transition: opacity 300ms;



	-moz-transition: opacity 300ms;



	-ms-transition: opacity 300ms;



	-o-transition: opacity 300ms;



	transition: opacity 300ms;



}







div.blinker .sp-portfolio-thumb:hover .sp-portfolio-overlay{



	opacity: 1;



}







div.blinker .sp-portfolio-thumb .sp-portfolio-overlay:before {  



  content: "";  



  position: absolute;



  background-color:#60aa68;  



  top:-100px;



  bottom:-100px;



  left:-200px;



  right: 140px;



  z-index: -1;



  -moz-transform: skewX(-21deg);



  -webkit-transform: skewX(-21deg);



  -o-transform: skewX(-21deg);



  -ms-transform: skewX(-21deg);



  transform: skewX(-21deg);



}







div.blinker .sp-portfolio-thumb .sp-portfolio-overlay:after {



  background-color: #569076;



  content: "";  



  position: absolute;



  top:-100px;



  bottom:-100px;



  right:140px;



  width: 10px;



  z-index: 1;



  -moz-transform: skewX(-21deg);



  -webkit-transform: skewX(-21deg);



  -o-transform: skewX(-21deg);



  -ms-transform: skewX(-21deg);



  transform: skewX(-21deg);



}







div.blinker .sp-portfolio-thumb .sp-portfolio-overlay h4,



div.blinker .sp-portfolio-thumb .sp-portfolio-overlay h4 a{



  text-transform: uppercase;;



  color: #fff;



  font-size: 24px;



  line-height: 24px;



  font-weight: normal;



  margin-bottom: 5px;



}







div.blinker .sp-portfolio-thumb .sp-portfolio-overlay .sp-portfolio-preview{



	color: #fff;



	padding-top: 20px;



	display: block;



}







div.blinker .sp-portfolio-thumb .sp-portfolio-overlay .category-name{



	display: block;



	color: rgba(255,255,255,.8);



}







div.blinker .sp-portfolio-loadmore{



	text-align: center;



}







div.blinker .btn {



	background-color:#f5f5f5;



	background-image:none;



	border:0;



	border-radius:0;



	box-shadow:none;



	color:#333;



	cursor:pointer;



	display:inline-block;



	font-size:14px;



	line-height:20px;



	margin-bottom:0;



	padding:4px 12px;



	text-align:center;



	text-shadow:none;



	vertical-align:middle;



	-moz-border-radius:0;



	-moz-box-shadow:none;



	-webkit-border-radius:0;



	-webkit-box-shadow: none;



	box-shadow: none;



}







div.blinker .sp-portfolio-loadmore .btn{



	float: none;



	margin-top: 30px;



	padding: 0 20px;



	min-width: 100px;



	height: 50px;



	line-height: 50px;



	font-size: 18px;



	color: #fff;



}



div.blinker .sp-portfolio-loadmore .btn.hide,



div.blinker .sp-portfolio-loadmore .btn .icon-spinner,



div.blinker .sp-portfolio-loadmore .btn.loading span{



	display: none;



}







div.blinker .sp-portfolio-loadmore .btn.loading .icon-spinner{



	display: block;



	font-size: 24px;



	line-height: 50px;



}







/*Isotope Animation*/



.isotope,



.isotope .isotope-item {



  /* change duration value to whatever you like */



  -webkit-transition-duration: 0.8s;



     -moz-transition-duration: 0.8s;



      -ms-transition-duration: 0.8s;



       -o-transition-duration: 0.8s;



          transition-duration: 0.8s;



}







.isotope {



  -webkit-transition-property: height, width;



     -moz-transition-property: height, width;



      -ms-transition-property: height, width;



       -o-transition-property: height, width;



          transition-property: height, width;



}







.isotope .isotope-item {



  -webkit-transition-property: -webkit-transform, opacity;



     -moz-transition-property:    -moz-transform, opacity;



      -ms-transition-property:     -ms-transform, opacity;



       -o-transition-property:      -o-transform, opacity;



          transition-property:         transform, opacity;



}











.rtl .isotope .isotope-item {



  -webkit-transition-property: right, top, -webkit-transform, opacity;



     -moz-transition-property: right, top, -moz-transform, opacity;



      -ms-transition-property: right, top, -ms-transform, opacity;



       -o-transition-property: right, top, -o-transform, opacity;



          transition-property: right, top, transform, opacity;



}