/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -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;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/* ---------------------------------------------------------------------- */
/*	Portfolio Options
/* ---------------------------------------------------------------------- */
#portfolio-options {
	float:left;
	background:url(../images/shadow-10px-top.png) no-repeat;
	background-size:100% 10px;
	background-position:0 bottom;
	width:100%;
	margin-bottom:30px;
	padding-bottom:10px;
}
	#portfolio-options #filter {
		list-style:none;
		display:block;
		float:left;
		margin:0;
		width:100%;
		border-bottom:1px solid #ccc;
	}
		#portfolio-options #filter li {
			position:static;
			display:block;
			float:left;
			border:0 none;
			border-left:4px solid #ddd;
			margin:0;
			margin:0 1px 1px 0;
			padding:0;
		}
			#portfolio-options #filter li a {
				display:block;
				background-color:#3ec4eb;
				background-image:url(../images/icons/icon-arrow-white.png);
				background-repeat:no-repeat;
				background-position:7px center;
				-moz-background-size:6px 10px; /* Firefox */
				-webkit-background-size:6px 10px; /* Safari, Chrome */
				background-size:6px 10px; /* Opera, IE, W3C Standard */
				padding:5px 10px 5px 20px;
				color:#fff;
				font-size:14px;
				cursor:pointer;
			}
			/* //////////////////////// HighResolution Grafics //////////////////////// */
			@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
				#portfolio-options #filter li a {
					background-image:url(../images/icons/icon-arrow-white@1_5x.png);
				}
			}
			@media only screen and (-webkit-min-device-pixel-ratio: 2) {
				#portfolio-options #filter li a {
					background-image:url(../images/icons/icon-arrow-white@2x.png);
				}
			}
			#portfolio-options #filter li a:hover,
			#portfolio-options #filter li a.selected {
				text-decoration:none;
				background-color:#ddd;
			}
		#portfolio-options #filter li.all {
			border:0 none;
		}
			#portfolio-options #filter li.all a {
				background-image:none;
				padding-left:10px;
			}

/* ---------------------------------------------------------------------- */
/*	Portfolio Grid
/* ---------------------------------------------------------------------- */
ul#portfolio-grid {
	clear:both;
	float:none;
	width:auto;
}
	ul#portfolio-grid li {
		display:block;
		float: left;
		overflow:hidden;
		position:relative;
		border:0 none;
		padding:0;
	}

/*	Modular Grid Values */
/* ---------------------------------------------------------------------- */
/* COL-1 */
ul#portfolio-grid.col-1 { margin:0 0 -20px 0; padding-bottom:10px; }
ul#portfolio-grid.col-1 li { margin:0 0 40px 0; width:940px; }
#floating-area ul#portfolio-grid.col-1 li { width:700px; } /* floating-area */
/* COL-2 */
ul#portfolio-grid.col-2 { margin:0 -20px -20px 0; padding-bottom:30px; }
ul#portfolio-grid.col-2 li { margin:0 20px 20px 0; width:460px; }
#floating-area ul#portfolio-grid.col-2 li { width:340px; } /* floating-area */
/* COL-3 */
ul#portfolio-grid.col-3 { margin:0 -20px -20px 0; padding-bottom:30px; }
ul#portfolio-grid.col-3 li { margin:0 20px 20px 0; width:300px; }
#floating-area ul#portfolio-grid.col-3 li { width:220px; } /* floating-area */
/* COL-4 */
ul#portfolio-grid.col-4 { margin:0 -20px -20px 0; padding-bottom:30px; }
ul#portfolio-grid.col-4 li { margin:0 20px 20px 0; width:220px; }
#floating-area ul#portfolio-grid.col-4 li { width:160px; } /* floating-area */
		
		
		/*	Grid Content Styles */
		/* ---------------------------------------------------------------------- */
		ul#portfolio-grid li > a {
			display:block;
			position:relative;
			cursor:pointer;
		}
		ul#portfolio-grid.col-1 li > a { /* COL-1 */
			width:460px;
		}
		#floating-area ul#portfolio-grid.col-1 li > a { width:340px; } /* COL-1 // floating-area */
		
			ul#portfolio-grid li > a > .image {
				background-color:#ebebeb;
				padding:9px;
			}
			ul#portfolio-grid.col-4 li > a > .image { padding:0; } /* COL-4 */
			
			ul#portfolio-grid li > a img {
				display:block;
				border:1px solid #fff;
				max-width:100%;
				height:auto;
			}
			ul#portfolio-grid.col-4 li > a img { border:0 none; } /* COL-4 */
			
			ul#portfolio-grid li > a > .info {
				display:none;
				position:absolute;
				background-color:#ebebeb;
				width:100%;
				height:100%;
				top:0;
				left:0;
				overflow:hidden;
			}
			ul#portfolio-grid.col-1 li > .info { /* COL-1 */
				position:absolute;
				top:0;
				left:480px;
				width:460px;
				height:100%;
			}
			#floating-area ul#portfolio-grid.col-1 li > .info { /* COL-1 // floating-area */
				left:360px;
				width:340px;
			}
				ul#portfolio-grid li > a > .info .shadow {
					background:url(../images/shadow-10px-bottom.png) no-repeat center 0;
					background-size:100% 10px;
					position:absolute;
					width:100%;
					height:10px;
					top:50%;
					margin-top:-10px;
				}
				ul#portfolio-grid li > a > .info .plus {
					position:absolute;
					background-color:#3ec4eb;
					left:50%;
					top:50%;
					margin-left:-15px;
					margin-top:-30px;
					width:30px;
					height:30px;
					color:#fff;
					text-indent:-1000px;
					background-image: url("../images/icons/icon-plus.png");
					background-repeat:no-repeat;
					background-position:center;
					-moz-background-size:16px 16px; /* Firefox */
					-webkit-background-size:16px 16px; /* Safari, Chrome */
					background-size:16px 16px; /* Opera, IE, W3C Standard */
				}
				ul#portfolio-grid.col-2 li > a > .info .plus {
					margin-left:-25px;
					margin-top:-50px;
					width:50px;
					height:50px;
					background-image: url("../images/icons/icon-plus-big.png");
					background-repeat:no-repeat;
					background-position:center;
					-moz-background-size:20px 20px; /* Firefox */
					-webkit-background-size:20px 20px; /* Safari, Chrome */
					background-size:20px 20px; /* Opera, IE, W3C Standard */
				}
				
				/* //////////////////////// HighResolution Grafics //////////////////////// */
				@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
					ul#portfolio-grid li > a > .info .plus {
						background-image:url(../images/icons/icon-plus@1_5x.png);
					}
					ul#portfolio-grid.col-2 li > a > .info .plus {
						background-image:url(../images/icons/icon-plus-big@1_5x.png);
					}
				}
				@media only screen and (-webkit-min-device-pixel-ratio: 2) {
					ul#portfolio-grid li > a > .info .plus {
						background-image:url(../images/icons/icon-plus@2x.png);
					}
					ul#portfolio-grid.col-2 li > a > .info .plus {
						background-image:url(../images/icons/icon-plus-big@2x.png);
					}
				}
				
				ul#portfolio-grid li > a > .info .box {
					position:absolute;
					background-color:#ebebeb;
					border-top:1px solid #fff;
					width:100%;
					height:100%;
					top:50%;
				}
				ul#portfolio-grid.col-1 li > .info .box { /* COL-1 */
					position:absolute;
					border-bottom:1px solid #ddd;
					width:100%;
					height:96%;
				}
					
			ul#portfolio-grid li > a:hover {
				text-decoration:none;
			}
				ul#portfolio-grid li > a h5.title {
					border:0 none;
					padding:0;
					margin:10px 10px 7px 10px;
					color:#333;
					font-family:helvetica, sans-serif;
					font-size:18px;
					font-weight:500;
					text-align:center;
					line-height:22px;
				}
				ul#portfolio-grid.col-1 li h5.title { /* COL-1 */
					border:0 none;
					padding:0;
					margin:6px 0 20px 0;
					color:#333;
					font-family:helvetica, sans-serif;
					font-size:20px;
					font-weight:400;
					line-height:24px;
				}
				#floating-area ul#portfolio-grid.col-1 li h5.title { /* COL-1 // floating-area */
					margin:0 0 6px 0;
				}
				ul#portfolio-grid.col-2 li > a h5.title { /* COL-2 */
					margin-top:18px;
					margin-bottom:6px;
					font-size:20px;
					font-weight:400;
					line-height:24px;
				}
				ul#portfolio-grid.col-4 li > a h5.title { /* COL-4 */
					margin-top:7px;
					margin-bottom:4px;
					font-size:14px;
					line-height:18px;
				}
				ul#portfolio-grid li > a h6.subtitle {
					border-bottom:1px solid #ebebeb;
					margin:0 10px;
					padding-bottom:10px;
					font-family:arial, sans-serif;
					color:#999;
					font-size:12px;
					font-style:italic;
					font-weight:normal;
					text-align:center;
					line-height:14px;
				}
				ul#portfolio-grid.col-1 li h6.subtitle { /* COL-1 */
					border-bottom:1px solid #ddd;
					margin:0 0 10px 0;
					padding-bottom:5px;
					color:#bbb;
					font-family:arial, sans-serif;
					font-size:13px;
					font-style:italic;
					font-weight:normal;
					line-height:15px;
				}
				ul#portfolio-grid.col-1 li p { /* COL-1 */
					margin:0 0 10px 0;
				}
				#floating-area ul#portfolio-grid.col-1 li p { /* COL-1 // floating-area */
					font-size: 12px;
					line-height: 16px;
				}
				ul#portfolio-grid.col-1 li .button { /* COL-1 */
					position:absolute;
					bottom:10px;
				}

/* ---------------------------------------------------------------------- */
/*	Portfolio Single - Title
/* ---------------------------------------------------------------------- */
#portfolio-title {
	float:left;
	background:url(../images/shadow-10px-top.png) no-repeat;
	background-size:100% 10px;
	background-position:0 bottom;
	width:100%;
	margin-top:-30px;
	margin-bottom:30px;
	padding-bottom:10px;
}
	#portfolio-title .box {
		width:100%;
		border-bottom:1px solid #ccc;
	}
	#portfolio-title .box .dir {
		display:block;
		float:right;
		background-color:#ddd;
		background-repeat:no-repeat;
		background-position:center;
		-moz-background-size:30px 26px; /* Firefox */
		-webkit-background-size:30px 26px; /* Safari, Chrome */
		background-size:30px 26px; /* Opera, IE, W3C Standard */
		width:31px;
		height:27px;
		margin-left:1px;
		text-decoration:none;
		text-indent:-1000px;
		overflow:hidden;
	}
	#portfolio-title .box .dir.prev {
		background-image:url(../images/icons/bt-arrow-left.png);
	}
	#portfolio-title .box .dir.next {
		background-image:url(../images/icons/bt-arrow-right.png);
	}
	
	/* //////////////////////// HighResolution Grafics //////////////////////// */
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
		#portfolio-title .box .dir.prev {
			background-image:url(../images/icons/bt-arrow-left@1_5x.png);
		}
		#portfolio-title .box .dir.next {
			background-image:url(../images/icons/bt-arrow-right@1_5x.png);
		}
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 2) {
		#portfolio-title .box .dir.prev {
			background-image:url(../images/icons/bt-arrow-left@2x.png);
		}
		#portfolio-title .box .dir.next {
			background-image:url(../images/icons/bt-arrow-right@2x.png);
		}
	}
	
	#portfolio-title .box .dir.prev:hover {
		background-color:#3ec4eb;
	}
	#portfolio-title .box .dir.next:hover {
		background-color:#3ec4eb;
	}
	#portfolio-title .box .showall {
		display:block;
		float:right;
		background-image:url(../images/icons/icon-arrow.png);
		background-repeat:no-repeat;
		background-position:left center;
		-moz-background-size:10px 10px; /* Firefox */
		-webkit-background-size:10px 10px; /* Safari, Chrome */
		background-size:10px 10px; /* Opera, IE, W3C Standard */
		margin-top:2px;
		margin-right:20px;
		padding-left:12px;
		color:#bbb;
		font-size:13px;
		text-decoration:none;
	}
	
	/* //////////////////////// HighResolution Grafics //////////////////////// */
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
		#portfolio-title .box .showall {
			background-image:url(../images/icons/icon-arrow@1_5x.png);
		}
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 2) {
		#portfolio-title .box .showall {
			background-image:url(../images/icons/icon-arrow@2x.png);
		}
	}
	
	#portfolio-title .box .showall:hover {
		color:#3ec4eb;
	}
	
/* ---------------------------------------------------------------------- */
/*	Portfolio Single - ImageBorder
/* ---------------------------------------------------------------------- */

/* Bigger than standard 960 (devices and browsers) */
@media only screen and (min-width: 959px) {
	.container > .two-third.first.portfolio, .container > .two-third.last.portfolio { width:630px; }
	.container > .one-third.portfolio { width:280px; }
	.container > .portfolio-image-wrapper { width:960px; margin-left:-10px; }
}

.portfolio-image-wrapper {
	float:left;
	width:100%;
	border:9px solid #ebebeb;
	box-sizing: border-box; /* Opera 8.5+ and CSS3 */
	-moz-box-sizing: border-box; /* Firefox 1+ */
	-ms-box-sizing: border-box; /* IE8 */
	-webkit-box-sizing: border-box; /* Safari 3+ */
}
#content > .container > .portfolio-image-wrapper, #content > .container > #floating-area > .portfolio-image-wrapper { margin-bottom:30px; }

	.portfolio-image-wrapper .image-gallery-slider {
		float:left;
		border:1px solid #fff;
		box-sizing: border-box; /* Opera 8.5+ and CSS3 */
		-moz-box-sizing: border-box; /* Firefox 1+ */
		-ms-box-sizing: border-box; /* IE8 */
		-webkit-box-sizing: border-box; /* Safari 3+ */
	}
	
	/* If Slider Function is deactivated (Images are displayed one below the other)  */
	#content .portfolio-image-wrapper > ul {
		background-color:#ddd;
		float:none;
		margin:0 0 1px 0;
	}
		#content .portfolio-image-wrapper > ul > li {
			border: 1px solid #FFFFFF;
			margin:0 0 -1px 0;
			padding:0;
		}
			#content .portfolio-image-wrapper > ul > li a {
				display:block;
				margin:0 auto;
			}
				#content .portfolio-image-wrapper > ul > li a img {
					display:block;
					margin: 0 auto;
				}