<div class="wrapper">

		<header id="head-top">	
			<div class="container header-bg-container header-bg-x"></div>
		</header>
		
		<div class="container">	
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 content-container">
				
					<h1 class="line">Galéria</h1>
				
					<div class="text-center selector-container">
						<div id="filter">
							<a class="active active-circle btn btn-selector" data-filter="*"><i class="fa fa-th"></i></a>
							<a class="btn btn-selector" data-filter=".category1">Pince</a>
							<a class="btn btn-selector" data-filter=".category2">Borászat</a>
							<a class="btn btn-selector" data-filter=".category3">Szőlőbiritok</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div id="mosaic" class="media-box-container+">

					<div class="media-box category1" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-1.jpg"></div>
							<div data-popup="images/gallery/img-1.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					
					<div class="media-box category2" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-2.jpg"></div>
							<div data-popup="images/gallery/img-2.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					
					<div class="media-box category3" data-columns="1">
						<div class="media-box-image">
							<div data-width="160" data-height="238" data-thumbnail="images/gallery/thumbnails/thumb-3.jpg"></div>
							<div data-popup="images/gallery/img-3.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					
					<div class="media-box category3" data-columns="2">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-4.jpg"></div>
							<div data-popup="images/gallery/img-4.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category1" data-columns="1">
						<div class="media-box-image">
							<div data-width="160" data-height="238" data-thumbnail="images/gallery/thumbnails/thumb-5.jpg"></div>
							<div data-popup="images/gallery/img-5.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category2" data-columns="2">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-6.jpg"></div>
							<div data-popup="images/gallery/img-6.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category1" data-columns="2">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-7.jpg"></div>
							<div data-popup="images/gallery/img-7.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category1" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-8.jpg"></div>
							<div data-popup="images/gallery/img-8.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category1" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-9.jpg"></div>
							<div data-popup="images/gallery/img-9.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category3" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-10.jpg"></div>
							<div data-popup="images/gallery/img-10.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category3" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-11.jpg"></div>
							<div data-popup="images/gallery/img-11.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category2" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-12.jpg"></div>
							<div data-popup="images/gallery/img-12.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category2" data-columns="2">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-13.jpg"></div>
							<div data-popup="images/gallery/img-13.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div> 
					<div class="media-box category1" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-14.jpg"></div>
							<div data-popup="images/gallery/img-14.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category1" data-columns="2">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-15.jpg"></div>
							<div data-popup="images/gallery/img-1.5jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category3" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-16.jpg"></div>
							<div data-popup="images/gallery/img-16.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category2" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-17.jpg"></div>
							<div data-popup="images/gallery/img-17.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category1" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-18.jpg"></div>
							<div data-popup="images/gallery/img-18.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category1" data-columns="1">
						<div class="media-box-image">
							<div data-width="240" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-19.jpg"></div>
							<div data-popup="images/gallery/img-19.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category2" data-columns="1">
						<div class="media-box-image">
							<div data-width="242" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-20.jpg"></div>
							<div data-popup="images/gallery/img-20.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					<div class="media-box category3" data-columns="1">
						<div class="media-box-image">
							<div data-width="242" data-height="160" data-thumbnail="images/gallery/thumbnails/thumb-21.jpg"></div>
							<div data-popup="images/gallery/img-21.jpg"></div>
							
							<div class="thumbnail-overlay">
								<i class="fa fa-arrows-alt mb-open-popup"></i>
							</div>
						</div>
					</div>
					
				</div>
			</div>
			
		</div>
		
			<!--//// MOSAIC galeria ////--> 
	<script>
	    $('#mosaic').mediaBoxes({
	        filterContainer: '#filter',
	    	boxesToLoadStart: 6,
	    	horizontalSpaceBetweenBoxes:0,
	        verticalSpaceBetweenBoxes: 0,
			overlayEasing: 'easeInOutCirc',
			overlayEffect: 'direction-aware-fade',
			loadMoreWord:'',
			LoadingWord:'',
			waitUntilThumbLoads:true,
			minBoxesPerFilter:6,
			
			resolutions: [
				{
					maxWidth: 1920,
					columnWidth: 'auto',
					columns: 4,
				},
				{
					maxWidth: 960,
					columnWidth: 'auto',
					columns: 3,
				},
				{
					maxWidth: 400,
					columnWidth: 'auto',
					columns: 1,
				},
			],
	    }); 
	</script>