.clearfix:after{
	content: " ";
	display: block;
	clear: both;
}

.wo-works-wrapper,
.wo-works-wrapper *,
.wo-works-wrapper *:before,
.wo-works-wrapper *:after{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}



/*---------------------------------
/* SHOW ALL GALLERIES
/*----------------------------------------*/

		.wo-works-wrapper{
			position: relative;
			}
		
		.wo-works{
			margin-bottom: 0;
			overflow: hidden;
			}

		.wo-single{
			background: #fff;
			border-bottom: solid 1px #ebebeb;
			display: block;
			width: 100%;
			float: left;
			position: relative;
			overflow: hidden;
			text-decoration: none;
			}
			
			/*single: grid*/
			@media screen and (min-width:460px)	{ .wo-works-wrapper.layout-grid .wo-single{ width: 50%; } }
			@media screen and (min-width:800px)	{ .wo-works-wrapper.layout-grid .wo-single{ width: 33.33333%; } }
			@media screen and (min-width:1280px){ .wo-works-wrapper.layout-grid .wo-single{ width: 25%; } }
				
		
			.wo-image-container{
				background-color: #fff;
				overflow: hidden;
				position: relative;
				padding-bottom: 62.5%;
				width: 100%;
				height: 0;
				}
			.wo-image{
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				position: absolute;
				width: 100%;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;				
				}
			.wo-image-overlayer{
				position: absolute;
				width: 100%;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba(0,0,0,0);
				transition: all 0.3s;
				}
			.wo-icon-plus{
				width: 40px;
				height: 40px;
				position: absolute;
				left: 18px;
				bottom: 10px;
				color: #888;
				line-height: 42px;
				text-align: center;
				font-size: 24px;
				transform: translateY(-8px);
				transition: all 0.3s;
				background: #fff;
				display: none;
				}
			.wo-icon-zoom-big{
				width: 40px;
				height: 40px;
				position: absolute;
				left: 50%;
				top: 50%;
				color: #fff;
				text-align: center;
				transform: translate(-50%,-50%);
				transition: all 0.3s;
				display: none;
				}
				/*image container: grid*/
				@media screen and (min-width:800px)	{
				.wo-works-wrapper.layout-grid .wo-image{ padding-bottom: 62.5%; }
				}
					
				.wo-image{
					transition: all 0.2s;
					}
			
			.wo-single .inner-container{
				background-color: rgba(0,0,0,0.65);
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transition: all 0.3s;
				}
				.wo-titles{
					padding: 22px 20px 40px;
					width: 100%;
					height: 110px;
					letter-spacing: 0.03em;
					}
				.wo-titles > div{
					transition: all 0.2s;
					background: #fff;
					}
				.wo-name{
					position: relative;
					z-index: 2;
					font-size: 14px;
					font-weight: 600;
					text-transform: uppercase;
					font-family: 'Raleway';
					}
				.wo-description{
					display: none;
					}
				.wo-meta{
					display: none;
					}
				.wo-meta i{
					font-size: 11px;
					transform: translateY(-1px);
					}
				.wo-category{
					color: #bbb;
					font-size: 14px;
					font-weight: 600;
					text-transform: uppercase;
					font-family: 'Raleway';					
					}
				.wo-icon-zoom{
					display: none;
					}
				
		
		
							/*hoverfx_01*/	
							.wo-single--hoverfx_01 .wo-icon-zoom{
								display: block;
								position: absolute;
								margin-top: -3px;
								}
							@media screen and (min-width:800px){
								.wo-single--hoverfx_01:hover .wo-name{
									transform: translateX(18px);
									}
								.wo-single--hoverfx_01:hover .wo-image-overlayer{
									background-color: rgba(0,0,0,0.4);
									}
							}
			
							/*hoverfx_02*/
							@media screen and (min-width:800px){
								.wo-single--hoverfx_02:hover .wo-image{
									transform: translateY(-15px);
									}
								.wo-single--hoverfx_02:hover .wo-image-overlayer{
									background-color: rgba(0,0,0,0.4);
									transform: translateY(-15px);
									}
								.wo-single--hoverfx_02:hover .wo-name{
									transform: translateY(-5px);
									}
								.wo-single--hoverfx_02:hover .wo-icon-plus{
									transform: translateY(10px);
									}
							}

							/*hoverfx_03*/
							.wo-single--hoverfx_03 .wo-icon-zoom-big{
								display: block;
								}
							.wo-single--hoverfx_03 .wo-icon-zoom-big i{
								opacity: 0;
								transition: all 0.2s;
								transform: scale(3);
								}
							@media screen and (min-width:800px){
								.wo-single--hoverfx_03:hover .wo-image{
									transform: rotate(5deg) scale(1.2);
									}
								.wo-single--hoverfx_03:hover .wo-image-overlayer{
									background-color: rgba(0,0,0,0.6);
									}
								.wo-single--hoverfx_03:hover .wo-icon-zoom-big i{
									opacity: 1;
									transform: scale(1.5);
									}
								.wo-single--hoverfx_03:hover .wo-name{
									transform: translateX(0px);
									}
							}

							/*hoverfx_04*/
							.wo-single--hoverfx_04 .wo-titles{
								position: relative;
								}
							.wo-single--hoverfx_04 .wo-meta{
								display: block;
								position: absolute;
								bottom: 20px;
								height: 30px;
								overflow: hidden;
								opacity: 0;
								color: #aaa;
								width: 80%;
								}
							.wo-single--hoverfx_04 .wo-category{
								position: relative;
								z-index: 1;
								}
							@media screen and (min-width:800px){
								.wo-single--hoverfx_04:hover .wo-image{
									transform: translateY(-15px);
									}
								.wo-single--hoverfx_04:hover .wo-image-overlayer{
									background-color: rgba(0,0,0,0.2);
									transform: translateY(-15px);
									}
								.wo-single--hoverfx_04:hover .wo-name{
									transform: translate(0,-20px);
									opacity: 0.4;
									}
								.wo-single--hoverfx_04:hover .wo-category{
									transform: translate(0,-23px);
									opacity: 0.8;
									}
								.wo-single--hoverfx_04:hover .wo-meta{
									opacity: 1;
									}
							}
		

		
		
		.wo-navigation{
			height: 50px;
			margin-top: 60px;
			}
		
		@media screen and (max-width:800px){
		.wo-paging{
			display: none;
			}
		}
		.wo-paging{
			width: 100%;
			text-align: center;
			line-height: 0;
			margin-top: 50px;
			}
			.wo-paging > div{
				display: inline-block;
				font-size: 9px;
				line-height: 15px;
				opacity: 1;
				transition: opacity 0.3s;
				}
				.wo-works-wrapper .wo-paging > div:hover{ opacity: 1; }
				
				.wo-paging > div > a{
					border: solid 1px #444;
					border-radius: 20px;
					cursor: pointer;
					display: block;
					float: left;
					height: 15px;
					padding: 4px;
					min-width: 15px;
					margin: 0 7px 0 6px;
					}
				.wo-paging > div > a:before{
					border-radius: 20px;
					content: " ";
					display: block;
					height: 100%;
					width: 100%;
					background: #999;
					opacity: 0;
					transition: all 0.3s;
					}
				.wo-paging > div > a.active:before{
					opacity: 1;
					}
				.wo-paging .paging-show-all{
					padding: 0 10px;
				}
					


			
				/* video */
				.embededvideo,
				.embededvideo iframe{
					width: 100% !important;
					height: 100% !important;
					background: #000;
				}
			

