/*
	CSS file for METRO Store Promotion
*/

/*	General	
---------------------------------------------------------------------------------------------------*/
	
	* {
		padding: 0;
		margin: 0;
		outline: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
        -webkit-appearance: none;
	}
	
	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	
	* html .clearfix,
	*:first-child+html .clearfix { 
		zoom: 1;
	}
	
	body {
		margin: 30px 0 100px 0;
		background: #f5f5f5;
        cursor: default;
        font-family: 'Lato', sans-serif;
        color: #333;
	}

	img {
		max-width: 100%;
		height: auto;
	}
	
	a img {
		border: 0;
	}		
	
	.container {
		width: 94%;
		max-width: 1170px;
		margin: 0 auto;
        box-sizing: border-box;
	}
	
	ul {
		list-style: none;
	}
	
/*	Header
---------------------------------------------------------------------------------------------------*/

	.header {
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
		right: 0;
		background: #0a2769;
		padding: 5px 0;
		border-bottom: 5px solid #ffff01;
		box-sizing: border-box;
		box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.05);
	}
	
		.header .logo {
			position: relative;
			margin: 0 auto;
			width: 230px;
			height: 100%;
			box-sizing: border-box;
		}
		
			.header .logo img {
				display: block;
				margin: 0 auto;
			}


/*	Page
---------------------------------------------------------------------------------------------------*/

	.page-wrapper .section {
		margin-top: 45px;	
	}
	
		.page-wrapper .section:first-child {
			margin-top: 0;
		}
		
		.page-wrapper .section-title {
			font-size: 20px;
			line-height: 24px;
			font-weight: 700;
		}

	/*	Section : Intro
	-----------------------------------------------------*/
	
	.intro h3 {
		font-size: 18px;
		line-height: 22px;
		font-weight: 700;
	}
	
	.intro p {
		margin-top: 15px;
		font-size: 16px;
		line-height: 26px;
	}
	
	
	/*	Section : Nav
	-----------------------------------------------------*/
	
	.nav nav {
		margin-top: 10px;
	}
	
		.nav nav ul li {
			float: left;
			font-size: 16px;
			line-height: 20px;
			font-weight: 600;
		}

			.nav nav ul li:before {
				content: '»';
				position: relative;
				top: -1px;
				float: left;
				margin: 0 10px;
				font-weight: 400;
			}
			
				.nav nav ul li:first-child:before {
					display: none;
				}
				
			.nav nav ul li a {
				text-decoration: none;
				font-weight: 400;
				color: #333;
			}
			
				.nav nav ul li a:hover {
					text-decoration: underline;
				}


	/*	Section : Listing
	-----------------------------------------------------*/
	
	.nav + .listing {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #ccc;
	}
	
	.listing .wrapper {
		margin-top: 30px;
	}
	
	.listing .item {
		position: relative;
		display: block;
		float: left;
		width: calc(16.6666% - 16.6666px);
		margin: 0 0 20px 20px;
		padding-bottom: calc(16.6666% - 16.6666px);
		box-sizing: border-box;
		border: 1px solid #e1e1e1;
		border-radius: 3px;
		background: #fff;
		box-shadow: 0px 0px 3px rgba(0,0,0,0.06);
		text-align: center;
		
	}
	
		.listing .item:first-child,
		.listing .item:nth-child(6n+7) {
			margin-left: 0;
		}
		
		/*	Image item
		-----------------------------------------------------*/
		
		.listing .item.image .background {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;	
		}
		
			.listing .item.image .background > div {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				-webkit-transition: all .3s ease-in-out;
						transition: all .3s ease-in-out;
				-webkit-transform: scale(1);
	   			   -moz-transform: scale(1);
					-ms-transform: scale(1);
						transform: scale(1);
			}
			
				.listing .item.image:hover .background > div {
					-webkit-transform: scale(1.05);
     				   -moz-transform: scale(1.05);
						-ms-transform: scale(1.05);
							transform: scale(1.05);
				}
			
		
		/*	Dir item
		-----------------------------------------------------*/
		
		.listing .item.dir .inner {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: #fff;
			-webkit-transition: all .3s;
					transition: all .3s;
		}
		
			.listing .item.dir .inner:before {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -20px 0 0 -20px;
				width: 40px;
				height: 40px;
				background: url('../img/folder.svg') no-repeat center;
				background-size: contain;
				opacity: 0.7;
			}
		
			.listing .item.dir .inner:hover {
				background: #feffa5;
			}
		
			.listing .item.dir .inner .title {
				position: absolute;
				left: 15px;
				right: 15px;
				bottom: 15px;
				font-size: 15px;
				line-height: 19px;
				font-weight: 700;
				text-decoration: none;
				color: #333;
				-webkit-transition: all .3s;
						transition: all .3s;
			}
			
				.listing .item.dir .inner:hover .title {
						
				}
				
		.listing .item.dir .remove {
			position: absolute;
			top: -8px;
			right: -8px;
			width: 25px;
			height: 25px;
			background: #ff0000 url('../img/delete.svg') no-repeat center;
			background-size: 50%;
			border-radius: 4px;
			text-indent: -9999px;
		}				
		
		/*	Pagination
		-----------------------------------------------------*/
		
		.listing .pagination {
			margin-top: 20px;
			padding-top: 20px;
			border-top: 1px solid #ccc;	
		}
		
			.listing .pagination li {
				float: left;
				margin-right: 10px;
			}
			
				.listing .pagination li:last-child {
					margin-right: 0;	
				}
				
				.listing .pagination li span,
				.listing .pagination li a {
					display: block;
					width: 24px;
					height: 24px;
					background: transparent;
					border: 1px solid #333;
					border-radius: 4px;
					box-sizing: border-box;
					font-size: 14px;
					line-height: 18px;
					color: #333;
					text-decoration: none;
					display: -webkit-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					-webkit-justify-content: center;
					justify-content: center;
					-webkit-box-align: center;
					-ms-flex-align: center;
					-webkit-align-items: center;
					align-items: center;
				}
				
					.listing .pagination li span {
						background: #333;
						color: #fff;
					}

		/*	Notice
		-----------------------------------------------------*/
		
		.notice {}
			
	
	/*	Section : Upload
	-----------------------------------------------------*/
	
	.upload .wrapper {
		margin-top: 25px;
		padding: 50px;
		box-sizing: border-box;
		background: #fafafa;
	}
	
	.upload .refresh {
		margin-top: 40px;
		text-align: center;
		display: none;
	}
	
		.upload .refresh button {
			display: inline-block;
			min-width: 117px;
			padding: 8px 14px;
			outline: none;
			cursor: pointer;
			text-decoration: none;
			text-align: center;
			white-space: nowrap;
			font-size: 12px;
			font-weight: bold;
			color: #555;
			border-radius: 3px;
			border: 1px solid #555;
			vertical-align: middle;
			background-color: #fff;
			box-shadow: 0px 1px 5px rgba(0,0,0,0.05);
			-webkit-transition: all 0.2s;
			-moz-transition: all 0.2s;
			transition: all 0.2s;
		}
		
			.upload .refresh button:hover {
				background: #555;
				color: #fff;
			}


	/*	Section : Login
	-----------------------------------------------------*/
	
	.login {
		max-width: 480px;
		margin: 0 auto;
		padding: 50px;
		box-sizing: border-box;
		border: 1px solid #ccc;
	}
	
		.login form {
			margin-top: 20px;
			border-top: 1px solid #ccc;
			padding-top: 20px;
		}
		
			.login form .row {
				margin-top: 20px;
			}
			
				.login form .row:first-child {
					margin-top: 0;
				}
				
				.login form .row label {
					display: block;
					font-size: 16px;
					line-height: 20px;
				}
				
				.login form .row input {
					display: block;
					width: 100%;
					margin-top: 15px;
					box-sizing: border-box;
					border: 1px solid #ccc;
					border-radius: 0px;
					outline: none;
					padding: 10px 15px;
					font-family: 'Lato', sans-serif;
					font-size: 16px;
					line-height: 20px;
					color: #333;
				}
				
				.login form .row input[type="submit"] {
					padding: 15px;
					background: #333;
					border-color: #333;
					color: #fff;
					cursor: pointer;
					-webkit-transition: all .3s;
							transition: all .3s;
				}
				
					.login form .row input[type="submit"]:hover {
						background: #444;
					}
					
				.login form .row.error p {
					font-size: 14px;
					line-height: 24px;
					color: #ff0000;
				}
	
	/*	Section : Admin
	-----------------------------------------------------*/
	
	.admin ul {
		margin-top: 10px;
	}
	
		.admin ul li {
			float: left;
			font-size: 16px;
			line-height: 20px;
		}
			
			.admin ul li:before {
				content: '-';
				margin: 0 10px;
			}
			
				.admin ul li:first-child:before {
					display: none;
				}
		
			.admin ul li a {
				text-decoration: none;
				color: #333;
			}
			
				.admin ul li a:hover {
					text-decoration: underline;
				}
				
	.admin .new-folder-wrapper {
		display: none;
		position: relative;
		top: 20px;
	}
	
		.admin .new-folder-wrapper input {
			float: left;
			margin-left: 10px;
			display: block;
			box-sizing: border-box;
			border: 1px solid #ccc;
			border-radius: 0px;
			padding: 8px 15px;
			font-family: 'Lato', sans-serif;
			font-size: 16px;
			line-height: 20px;
			color: #333;	
		}
		
			.admin .new-folder-wrapper input:first-child {
				margin-left: 0;
			}
			
			.admin .new-folder-wrapper input[type="text"] {
				width: 250px;
			}
			
			.admin .new-folder-wrapper input[type="submit"] {
				background: #333;
				border-color: #333;
				outline: none;
				color: #fff;
				cursor: pointer;
				-webkit-transition: all .3s;
						transition: all .3s;
			}
				
				.admin .new-folder-wrapper input[type="submit"]:hover {
					background: #444;
				}

	
/*	Third party
-----------------------------------------------------*/

	.jFiler-input-dragDrop .jFiler-input-icon,
	.jFiler-input-text span,
	.jFiler-input-text h3 {
		color: #555;
	}

	.jFiler-input-choose-btn.blue {
		border-color: #555;
		color: #555;
	}
	
		.jFiler-input-choose-btn.blue:hover {
			background: #555;
			color: #fff;
		}
		
	.jconfirm .jconfirm-box-container {
		max-width: 480px;
		margin: 0 auto;
	}
	
		.jconfirm .jconfirm-box {
			padding: 15px 15px 10px 15px;
			box-sizing: border-box;
		}
		
		.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
			font-size: 20px;
			line-height: 24px;
			font-weight: 700;
		}
	
		.jconfirm .jconfirm-box .jconfirm-buttons {
			float: none !important;
		}
		
			.jconfirm .jconfirm-box .jconfirm-buttons .btn {
				float: left;
				width: calc(50% - 10px);
				margin-left: 20px;
				margin-right: 0 !important;
				box-sizing: border-box;	
				text-transform: none !important;
				color: #333;
			}
			
				.jconfirm .jconfirm-box .jconfirm-buttons .btn:first-child {
					margin-left: 0;
				}
				
				.jconfirm .jconfirm-box .jconfirm-buttons .btn.btn-confirm {
					background: #ff0000;
					color: #fff;
				}
		
		
/*	Responsive
---------------------------------------------------------------------------------------------------*/

	@media(max-width: 1150px) {
		
		.listing .item { width: calc(25% - 15px); padding-bottom: calc(25% - 15px); }
		.listing .item:nth-child(6n+7) { margin-left: 20px; }
		.listing .item:nth-child(4n+5) { margin-left: 0px; }
		
	}
	
	
	@media(max-width: 850px) {
		
		.listing .item { width: calc(33.3333% - 13.3333px); padding-bottom: calc(33.3333% - 13.3333px); }
		.listing .item:nth-child(4n+5) { margin-left: 20px; }
		.listing .item:nth-child(3n+4) { margin-left: 0px; }
		.listing .item.dir .inner .title { font-size: 14px; }
		
	}
		
	@media(max-width: 650px) {
		
		body { margin: 90px 0 60px 0; }
		.header .logo { width: 180px; }
		.nav nav ul li::before { margin: 0 6px; }
		.listing .item { width: calc(50% - 10px); padding-bottom: calc(50% - 10px); }
		.listing .item:nth-child(3n+4) { margin-left: 20px; }
		.listing .item:nth-child(odd) { margin-left: 0px; }
		.listing .item.dir .inner::before { width: 30px; height: 30px; margin-top: -15px; }
		.listing .item.dir .inner .title { font-size: 13px; }
		.page-wrapper .section { margin-top: 35px; }
		.page-wrapper .section-title { font-size: 18px; line-height: 22px; }
		.intro p { font-size: 15px; line-height: 22px; }
		.listing .item.dir .remove { top: -5px; right: -5px; }
		
		.login { padding: 20px; }
		.admin .new-folder-wrapper input { font-size: 14px; } 
		.admin .new-folder-wrapper input[type="text"] { width: 170px; padding: 8px 10px; }
		
		.upload .wrapper { padding: 20px; }
		.jFiler-input-dragDrop { width: 100%; }
		
		.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title { font-size: 18px; line-height: 22px; }
		
	}		
		
	
/*	Fixes */

	.items-count {
		display: block;
		float: right;
		position: relative;
		width: 100px;
		height:40px;
		margin: 0 0 -40px 0;
		text-align: right;
		color: #999;
		z-index: 100;
		font-size: 11px;
		line-height: 12px;
		top: 5px;
		right: 8px;
	}
	.items-count:after { content:" elem"; }
	.items-count:empty { color:#BF0000; }
	.items-count:empty:after { content:"üres mappa" }