@charset "utf-8";
@font-face {
    font-family: 'BrandonGrotesqueMedium';
    src: url('../inc/fonts/brandon_med.eot');
    src: url('../inc/fonts/brandon_med.svg#BrandonGrotesqueMedium') format('svg'),
		 url('../inc/fonts/brandon_med.eot') format('embedded-opentype'),
         url('../inc/fonts/brandon_med.woff') format('woff'),
         url('../inc/fonts/brandon_med.ttf') format('truetype');
}
@font-face {
    font-family: 'BrandonGrotesqueRegular';
    src: url('../inc/fonts/brandon_reg.eot');
    src: url('../inc/fonts/brandon_reg.svg#BrandonGrotesqueRegular') format('svg'),
		 url('../inc/fonts/brandon_reg.eot') format('embedded-opentype'),
         url('../inc/fonts/brandon_reg.woff') format('woff'),
         url('../inc/fonts/brandon_reg.ttf') format('truetype');
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	color: inherit;
	direction: ltr;
	font-size: 100%;
	font-weight: inherit;
	font-style: normal;
	margin: 0; padding: 0;
	vertical-align: baseline;
	border: 0 none; outline: 0 none;
	font-family: 'BrandonGrotesqueRegular', sans-serif;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{display: block;}
ol, ul{list-style: none outside none;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after,q:before, q:after{content: ''; content: none;}
table{border-collapse: collapse; border-spacing: 0;}
img{display: block;}
a, a:hover{cursor: pointer; text-decoration: none;}
a:focus, a:active{outline: none;}
a, a *{
	-webkit-transition: all 0.2s ease-in-out 0s;
	-moz-transition: all 0.2s ease-in-out 0s;
	-o-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}
hr{clear: both; border: medium none; margin: 32px 0; padding: 0; width: 100%; height: 0; border-top: 1px solid #B6B6B6;}
.current, .current a{cursor: default;}
.left{float: left; display: inline-block;}
.right{float: right; display: inline-block;}
.clear:after, .clear:before{clear: both; font-size: 0; content: ""; display: block; visibility: hidden; line-height: 0; height: 0;}
*::selection{
	color: #191919;
    background-color: #F2F2F2;
}
*::-moz-selection{
    color: #191919;
    background-color: #F2F2F2;
}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
.tiny, .tiny *{
	color: #191919;
	font-size: 16px;
	line-height: 1.6;
	font-family: 'BrandonGrotesqueRegular', sans-serif;
}
.tiny p{text-align: justify;}
.tiny p + p{margin-top: 24px;}
.tiny ul, .tiny ol{margin: 24px 0 0 0; list-style-type: square; list-style-position: inside; list-style-image: none;}
.tiny ul li, .tiny ol li{color: #666; line-height: 2;}
.tiny li:hover{color: #191919;}
.tiny b, .tiny strong{color: #191919; font-family: 'BrandonGrotesqueMedium', sans-serif;}
.tiny i, .tiny em{font-style: italic;}
.tiny u{text-decoration: underline;}
.tiny a{color: #f8aa00; font-family: 'BrandonGrotesqueMedium', sans-serif;}
.tiny a:hover{color: #191919;}
.tiny p a{color: #f8aa00; font-family: 'BrandonGrotesqueMedium', sans-serif;}
.tiny p a:hover{color: #191919; text-decoration: none;}
.tiny table td, .tiny table th{color: #666;}
.tiny table tr td ~ td{padding-left: 30px;}
.tiny td{padding-top: 5px; padding-bottom: 5px; padding-left: 15px;}
.tiny tr:nth-child(even){background-color: #eee;}
.tiny table{width: 100%;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
body{
    line-height: 1;
	cursor: default;
	background-color: #fff;
	-webkit-animation: bugfix infinite 1s; 
}
.wrap{
	width: 94%;
	margin: 0 auto;
	max-width: 968px; 
}
.container{
	margin-top: 70px;
	padding: 64px 0;
}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
form label{
    display: block;
	cursor: pointer;
}
form label + label{margin-top: 16px;}
	input, select, textarea{
		margin: 0; 
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	textarea{
		height: 200px;
		resize: vertical;
	}
	input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], textarea{
		width: 100%;
		color: #191919;
		cursor: text;
		padding: 12px;
		font-size: 16px;
		border: 1px solid #ccc;
		background-color: #f3f3f3;
		font-family: 'BrandonGrotesqueMedium', sans-serif;
		
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		border-radius: 1px;
	}
		input[type="text"]:hover, input[type="search"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, textarea:hover{
			border: 1px solid #b9b9b9;
			border-top: 1px solid #a0a0a0;
		}
		input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus{
			outline: 0;
			border: 1px solid #999;
			border-top: 1px solid #777;		
		}
	input[type="submit"]{
		width: 100%;
		color: #fff;
		display: block;
		font-size: 16px;
		cursor: pointer;
		margin-top: 16px;		
		text-align: center;
		overflow: visible;
		white-space: nowrap;
		border: medium none;
		padding: 11px 0 10px 0;
		background-color: #f8aa00;
		text-transform: uppercase;
		font-family: 'BrandonGrotesqueMedium', sans-serif;

		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;

		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
	input[type="submit"]:hover{background-color: #191919;}
	input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner{border : 0px;}
	input[type="submit"]:focus, input[type="button"]:focus{outline : none;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
noscript, #ie9{
	z-index: 99999;
	position: fixed;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	width: 100%; height: 100%;
}
	noscript > div, #ie9 > div{
		display: block;
		padding-top: 5%;
		background-color: #eee;
		width: 100%; min-height: 100%;
	}
		noscript > div > div, #ie9 > div > div{
			width: 90%;
			margin: 0 auto;
			max-width: 400px;
			padding-bottom: 40px;
			border: 1px solid #ddd;
			background-color: #fff;
		}
			noscript > div > div > h3, #ie9 > div > div > h3{
				background-color: #fff;
				border-bottom: 1px solid #ddd;
				width: 100%; padding: 40px 0;
			}
			noscript > div > div > h3 img, #ie9 > div > div > h3 img{
				width: 80%;
				margin: 0 auto;
				max-width: 500px;
			}
			noscript > div > div > p, #ie9 > div > div > p{
				margin: 40px 0;
				padding: 0 40px;
				text-align: justify;
				
			}
			noscript > div > div > a, #ie9 > div > div > a{
				color: #fff;
				display: block;
				margin: 0 40px;
				padding: 20px 0;
				line-height: 1.2;
				text-align: center;
				text-transform: uppercase;
				background-color: #f8aa00;
				font-family: 'BrandonGrotesqueMedium', sans-serif;
				
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
			}
			noscript > div > div > a:hover, #ie9 > div > div > a:hover{color: #fff !important; background-color: #191919;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
header{
	background-color: #151422;
	text-shadow: 2px 2px 2px #000;
}
header.flexslider{min-height: 200px;}
	header.flexslider li{
		background-repeat: no-repeat;
		background-size: cover;
	}
		header.flexslider section{
			width: 50%;
			padding: 6em 3em 8em 3em;
		}
		header.flexslider section.left{text-align: left;}
		header.flexslider section.right{text-align: right;}
			header.flexslider h3{
				color: #fff;
				font-size: 2em;
				font-family: 'BrandonGrotesqueMedium', sans-serif;
			}
			header.flexslider p{
				color: #fff;
				margin-top: 1em;
			}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
nav{
	width: 100%;
	color: #191919;
	padding: 32px 0;
	font-size: 17px;
	background-color: #fff;
}
	nav > div > a{
		margin: 0 24px 0 -6px;
		float: left; display: inline-block;
	}
		nav > div > a img{height: 48px;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
	nav > div ul{float: right; display: inline-block;}
		nav > div ul > li{
			margin-left: 16px;
			float: left; display: inline-block;
		}
			nav > div ul > li > a{
				display: block;
				text-transform: uppercase;
				height: 48px; line-height: 48px;
				font-family: 'BrandonGrotesqueMedium', sans-serif;
			}
			nav > div ul > li > a:hover{color: #f8aa00;}
			nav > div ul > li.current > a{color: #cecece;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#button{position: absolute; top: -9999px; left: -9999px;}
	nav label{
		cursor: pointer;
		user-select: none;
	}
	nav label{display: none;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#slider img{width: 100%;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#gmap{
	width: 100%;
	height: 300px;
}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5{
	display: block;
	color: #191919;
	font-family: 'BrandonGrotesqueMedium', sans-serif;
}
h1, h2{
	font-size: 36px;
	margin-bottom: 24px;
}
h1 + p, h2 + p{
	width: 60%;
	margin: 0 auto;
}
p{
	color: #444;
	font-size: 17px;
	line-height: 1.6;
}
h3, h5{
	font-size: 28px;
	margin-bottom: 18px;
}
a:hover h3{color: #f8aa00;}
body > div, footer{padding: 48px 0;}
.tc{text-align: center;}
.gray{background-color: #EDEDED;}
#done section.left, #done section.right{width: 48% !important;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#main section.left, #contact section.left, #references section.left{width: 62%;}
	#main a{display: block;}
	#main a + a{margin-top: 48px;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */	
#main section.right, #contact section.right, #references section.right{width: 32%;}
	#main img, #references .right img{width: 100%;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#gallery section{padding: 24px 0 0 0;}
	#gallery section img{width: 100%;}
	#gallery section img + img{margin-top: 24px;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#services section{
	width: 28%;
	padding: 0 2%;
	margin-top: 24px;
	float: left; display: inline-block;
}
#services section + section{margin-left: 2%;}
	#services section h3:before{
		content: "";
		display: block;
		margin: 0 auto 24px auto;
		background-color: #f8aa00;
		width: 190px; height: 190px;
		background-repeat: no-repeat;
		background-size: 50%;
		background-position: 50%;

		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		
		-webkit-transition: all 0.2s ease-in-out 0s;
		-moz-transition: all 0.2s ease-in-out 0s;
		-o-transition: all 0.2s ease-in-out 0s;
		transition: all 0.2s ease-in-out 0s;
	}
	#services section a.maras h3:before{background-image: url('../pic/icons/icon1.png');}
	#services section a.tervezes h3:before{background-image: url('../pic/icons/icon2.png');}
	#services section a.megmunkalas h3:before{background-image: url('../pic/icons/icon3.png');}

	#services a:hover h3:before{background-color: #191919;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#offer{padding: 24px 0;}
	#offer p{
		font-size: 22px;
		height: 50px; line-height: 50px;
	}
	#offer a{
		color: #fff;
		font-size: 16px;
		padding: 0 25px;
		margin-left: 32px;
		text-transform: uppercase;
		height: 50px; line-height: 50px;
		font-family: 'BrandonGrotesqueMedium', sans-serif;
		
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
	#offer a.left{background-color: #f8aa00;}
	#offer a.left:hover{background-color: #191919;}
	#offer a.right{background-color: #191919;}
	#offer a.right:hover{background-color: #f8aa00;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#products img{width: 100%;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
.product + .product{border-top: 1px solid #dedede;}
.product img{width: 100%;}
.product section.left{width: 48%;}
.product section.right{width: 48%;}
.product article{margin-bottom: 24px;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#contact ul{margin-top: 24px;}
	#contact ul li{
		color: #191919;
		display: block;
		font-size: 20px;
		line-height: 1.6;
	}
		#contact ul li, #contact ul li a{font-family: 'BrandonGrotesqueMedium', sans-serif;}
		#contact ul li a:hover{color: #f8aa00;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#works section + section{
	margin-top: 48px;
}
	#works section img{width: 100%;}
	#works section div{width: 100%;}

	#works section a{
		width: 23.5%;
		float: left; display: inline-block;
	}
	#works section a + a{margin-left: 2%;}
	#works section a:nth-child(n+5){display: none;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#numbers{margin-top: 24px;}
	#numbers > div{
		width: 45%;
		color: #444;
	}
		#numbers > div + div{margin-left: 10%;}
		#numbers strong{
			display: block;
			font-size: 60px;
			font-family: 'BrandonGrotesqueMedium', sans-serif;
		}
		#numbers small{
			display: block;
			font-size: 17px;
			font-family: 'BrandonGrotesqueRegular', sans-serif;
		}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
#references > div + div{
	margin-top: 48px; padding-top: 32px;
	border-top: 1px solid #dedede;
}
#references > article{
	padding-top: 24px;
	text-align: center;
	border-top: 1px solid #dedede;
	display: table; margin: 48px auto 0 auto;
}
#partners article{display: table; margin: 24px auto 0 auto;}
	#partners article a, #references > article a{
		padding: 10px;
		display: inline-block;
	}
		#partners article a img, #references > article a img{
			max-height: 40px;
			display: block;
			
			filter: none;
			-webkit-filter: grayscale(0%);
		}
		#partners article a img:hover, #references > article a img:hover{
		  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
		  filter: gray; /* IE6-9 */
		  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
		}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
footer{
	color: #fff;
	background-color: #000;
}
	footer section{
		width: 22%;
		float: left; displaY: inline-block;
	}
	footer section + section{margin-left: 4%;}
		footer h5{color: #fff;}
		footer li{line-height: 1.6;}
		footer a:hover{color: #f8aa00;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
/* Small desktop and below */
@media (max-width: 1024px){
	header.flexslider section{
		width: 80%;
		padding: 3em 0 4em 0;
		background: none;
	}
	.flex-direction-nav {display: none !important;}
	header.flexslider li{
		
	}
		header.flexslider li section.left, header.flexslider li section.right{
			float: none !important;
			display: table !important; 
			margin: 0 auto;
			width: 80%;
			text-align: center;
		}
	/* --------------------------------------------------------------------------------------- */
	nav{padding: 16px 0;}
	nav > div > a{
		margin: 0;
		width: 100%;
		text-align: center;
		float: none; display: block;
	}
		nav > div > a img{display: inline-block;}
	/* --------------------------------------------------------------------------------------- */
	nav > div ul{
		margin: 24px auto 0 auto;
		float: none; display: table;
	}
	#services section h3:before{width: 150px; height: 150px;}
	
	#offer p{
		height: auto;
		line-height: 1.6;
		text-align: center;
		margin-bottom: 16px;
		float: none !important;
		display: block !important;
	}
	#offer div.right{
		display: table;
		float: none !important;
		margin: 0 auto;
		text-align: center;
	}
	#offer div.right a{
		margin: 0 16px !important;
	}
	.tiny ul, article ul{text-align: left;}
}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */	
/* tablet landscape and below */
@media (max-width: 768px){
	header.flexslider section{
		padding: 2em 0 3em 0;
	}
	/* --------------------------------------------------------------------------------------- */	
	nav > div > a{
		width: auto;
		margin: 0 24px 0 -6px;
		float: left; display: inline-block;
	}
		nav > div > a img{display: block;}
	/* --------------------------------------------------------------------------------------- */	
	nav label{
		color: #191919;
		cursor: pointer;
		font-size: 34px;
		padding: 0 20px;
		height: 48px; line-height: 48px;
		float: right; display: inline-block;
	}
	nav > div ul{display: none;}
		nav > div ul > li{
			float: none;
			display: block;
			margin: 0; padding: 0 15px;
		}
	#button:checked ~ label{color: #dedede;}
	#button:checked ~ ul{
		width: 100%;
		clear: both;
		float: left;
		display: block;
		margin-top: 18px;
		text-align: center;
		padding-top: 16px;
		border-top: 1px solid #dedede;
	}
	/* --------------------------------------------------------------------------------------- */
	h1 + p, h2 + p{width: 80%;}
	body > div, footer{padding: 36px 0;}
	#services section{
		width: 80%;
		float: none; display: table;
		margin-left: auto; margin-right: auto;
	}
	#services section + section{margin-left: auto;}
	/* --------------------------------------------------------------------------------------- */
	#main section.left, #contact section.left, #references section.left, .product section.left{
		width: 100%;
		text-align: center;
		float: none !important;
		display: block !important;
	}
	#main a + a{margin-top: 24px;}
	#main section.right{display: none;}
	#contact section.right, .product section.right{
		width: 100%;
		text-align: center;
		float: none !important;
		display: block !important;
		margin-top: 24px;
	}
	#references section.right{display: none;}
	/* --------------------------------------------------------------------------------------- */
	#services section h3:before{width: 170px; height: 170px;}
	/* --------------------------------------------------------------------------------------- */
	.product img{
		width: 60%;
		margin: 0 auto;
		display: table;
	}
	/* --------------------------------------------------------------------------------------- */
	#works section a{width: 32%;}
	#works section a:nth-child(4){display: none;}
	/* --------------------------------------------------------------------------------------- */
	#gmap{height: 250px;}
	/* --------------------------------------------------------------------------------------- */
	footer section{
		width: 48%;
	}
	footer section + section{margin-left: 0;}
	footer section:nth-child(1), footer section:nth-child(2){margin-bottom: 24px;}
	footer section:nth-child(2n){
		margin-left: 4% !important;
	}
}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */	
@media (min-width: 768px) and (max-width: 1023px){	
	#services section h3:before{
		width: 150px; height: 150px;
	}
	#services section{
		width: 28% !important;
		padding: 0 2% !important;
		float: left !important; display: inline-block !important;
	}
	#services section + section{margin-left: 2% !important;}
}
/* --------------------------------------------------------------------------------------- */	
/* --------------------------------------------------------------------------------------- */	
/* Landscape phones and down */
@media (max-width: 480px){
	header.flexslider section{
		width: 100%;
	}
	header.flexslider h3{font-size: 1.5em;}
	/* --------------------------------------------------------------------------------------- */
	nav > div > a{
		width: 50%; height: 48px;
		background: url(../pic/muzsai_metall_logo_small.svg) no-repeat 0 0 transparent;
		background-size: contain;
	}
	nav > div > a img{display: none;}
	/* --------------------------------------------------------------------------------------- */
	#services section h3:before{width: 150px; height: 150px;}
	/* --------------------------------------------------------------------------------------- */
	#services section{
		width: 96%;
	}
	/* --------------------------------------------------------------------------------------- */
	#numbers div{
		width: 100%;
		text-align: center;
		margin-bottom: 18px;
		float: none !important;
		display: block !important;
	}
	#numbers > div + div{margin-left: auto;}
	/* --------------------------------------------------------------------------------------- */
	#offer div.right a{
		width: 80%;
		padding: 0;
		margin: 0 0 16px 0 !important;
		display: inline-block;
		text-align: center;
		float: none !important;
	}
	/* --------------------------------------------------------------------------------------- */
	.product ul{displaY: none;}
	/* --------------------------------------------------------------------------------------- */
	#works section a{width: 49%;}
	#works section a:nth-child(3){display: none;}
	/* --------------------------------------------------------------------------------------- */
	footer section{
		width: auto !important;
		display: table !important;
		margin: 0 auto !important;
		float: none !important;
		text-align: center;
	}
	footer section + section{margin-top: 18px !important;}
	footer section:nth-child(2n){margin-left: auto !important;}
}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */