@import "../vars.less";

//--------------------------------------------
// Gallery Style
//--------------------------------------------
.sp-simpleportfolio{padding: 0;
	.sp-simpleportfolio-filter{margin-bottom: 40px!important;
		> ul{
			> li{margin: 0 5px 5px 0!important;
				&.active{
					> a{background-color: transparent!important; border-color: @brand-primary;color: @link-color!important;}
				}
				> a{border: 1px solid @t3-border-color;font-size: @t3-font-size-small; text-transform: capitalize;height: 33px; line-height: 33px;text-decoration: none;background: transparent!important;padding: 0 10px!important;letter-spacing: 1px;
					&:hover, &:focus{border-color: @brand-primary;color: @link-color;}
				}
			}
		}
	}
	.sp-simpleportfolio-items{
		.sp-simpleportfolio-item{
			.sp-simpleportfolio-overlay-wrapper{
				.sp-simpleportfolio-overlay{height: 100%;top: -100%;bottom: inherit;transition:all 300ms;-webkit-transition:all 300ms;
					.sp-vertical-middle{
						.sp-simpleportfolio-title,
						.sp-simpleportfolio-tags{transform:translateY(100%);-webkit-transform:translateY(100%);-ms-transform:translateY(100%);font-weight:300;}
					}
				}
			}
			.sp-simpleportfolio-info{text-align: center;
				.sp-simpleportfolio-title{font-weight:300;text-transform: uppercase;font-size: 18px;line-height: 1;letter-spacing: 1px;}
				.sp-simpleportfolio-tags{text-transform: capitalize;}
			}
			&:hover, &:focus{
				.sp-simpleportfolio-overlay-wrapper{
					.sp-simpleportfolio-overlay{background:fade(@brand-secondary, 70%);top: 0;
						.sp-vertical-middle{
							.sp-simpleportfolio-btns{
								a{}
							}
							.sp-simpleportfolio-title{text-transform: uppercase;transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);transition-delay:300ms;-webkit-transition-delay:300ms; }
							.sp-simpleportfolio-tags{transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);transition-delay:400ms;-webkit-transition-delay:400ms;}
						}
					}
				}
				.sp-simpleportfolio-info{background: @brand-primary; color: @white;text-align: center;
					a{color: @white;}
				}
			}
		}
	}
}

//---------------------------------------------
// View Item Style
//---------------------------------------------
.sp-simpleportfolio-view-item{
	.sp-simpleportfolio-image{padding-left: 0px;
		@media screen and (max-width:@screen-xs-max){padding-right: 0;}
	}
	.sp-simpleportfolio-details{padding-right: 0px;
		@media screen and (max-width:@screen-sm-max){padding-left: 0;}

		.sp-simpleportfolio-description{width: 100%; float: none;margin-bottom: 20px;
			h2{margin-bottom: 15px;font-size: @font-size-h2;}
		}
		.sp-simpleportfolio-meta{width: 100%;padding: 15px 0;border-top: 1px solid @t3-border-color; border-bottom: 1px solid @t3-border-color;float: none;
			.sp-simpleportfolio-created,
			.sp-simpleportfolio-tags{margin:6px 0;padding: 0;border-bottom: 0;
				h4{display: inline-block;min-width: 120px;margin:0;font-size: @font-size-base;font-weight: normal;
					i{font-size: 17px;margin-right: 3px;}
				}
			}
			.sp-simpleportfolio-link{margin-top: 5px;display: inline-block;
				a{
					i{font-size: 20px; margin-right: 3px;}
					span{position: relative;top: -2px;}
				}
			}
		}
		.sp-simpleportfolio-share{margin-top: 15px;
			.itp-share-mod{
				div[class*="itp-share-"]{margin: 15px 5px 0;height: 20px;}
				.itp-share-tw{}
				.itp-share-lin{}
				.itp-share-pinterest{}
				.itp-share-reddit{position: relative;top: -3px;}
				.itp-share-fbl{position: relative;top: -6px;}
				.itp-share-gone #___plusone_0{width: 80px!important;}
				.itp-share-gshare{}
			}
		}
	}
}

//Similar Projects Module
.sp-simpleportfolio-similar{margin-top: @mm-vertical-padding;
	.t3-module{margin-bottom: 0;}
	#mod-sp-simpleportfolio{margin-bottom: 0;
		.container{width: auto;padding: 0;}
	}
}

//Modules
#mod-sp-simpleportfolio{margin-bottom: 60px;}