html, body{ margin:0; padding:0;}
html{ height:100%; }
body{ background: #fff url(../image/hutes_bg.png) center 160px repeat-x; height:100%; }
.clear{ clear:both; }
.hide{ display:none !important; }

@font-face {
    font-family: 'BediniRegular';
    src: url('../font/bedini.eot');
    src: url('../font/bedini.eot') format('embedded-opentype'),
         url('../font/bedini.woff') format('woff'),
         url('../font/bedini.ttf') format('truetype'),
         url('../font/bedini.svg#BediniRegular') format('svg');
}


body{
	color:#000;
	font-size:14px;
	font-size:100%;
	font-size: 1em;
	font-family:Arial, Helvetica, sans-serif;
}

b, strong{ 
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	font-size: 1em;
	font-weight:bold;
}
i{
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	font-size: 1em; 
	font-style:italic;
}

p{
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-align: left;
	line-height: 1.4em;
}

h1, h2, h3, h4{
	color: #0e6ba0;
	text-align: left;
	line-height: 1.5em;
	margin:0;
	padding:0;
	font-family:'BediniRegular', Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-style:italic;
}

h1{ font-size: 2em; margin-bottom:10px; margin-top:10px;}
h2{ font-size: 1.7em; margin-bottom:5px; margin-top:5px;}
h3{ font-size: 1.5em; margin-bottom:3px; margin-top:3px;}
h4{ font-size: 1.4em; margin-bottom:3px; margin-top:3px;color:#3c94c6;}

hr{
	color:#0b689d;
	background-color: #0b689d;
	height: 2px;
}

p > img{
	border:solid 3px #eee;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}

/*-----------------------------------------------------------------------------
 --- Visszajelzések --- */
 
.system_error {
    background: url("../image/icon-error.png") no-repeat scroll 10px 7px #FCCAC1;
    border: 1px solid #E18B7C;
    color: #C33820;
}

.system_succes {
    background: url("../image/icon-succes.png") no-repeat scroll 10px 7px #DEFCC1;
    border: 1px solid #AEE17C;
    color: #62AF17;
}

.system {
    font: 12px/1.6em Arial;
    margin: 0 0 10px 0;
    padding: 5px 10px 4px 33px;
	display:none;
	cursor:pointer;
}

.btn-klmaweb {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #f49f19;
  *background-color: #f49f19;
  background-image: -moz-linear-gradient(top, #f49f19, #ed771f);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f49f19), to(#ed771f));
  background-image: -webkit-linear-gradient(top, #f49f19, #ed771f);
  background-image: -o-linear-gradient(top, #f49f19, #ed771f);
  background-image: linear-gradient(to bottom, #f49f19, #ed771f);
  background-repeat: repeat-x;
  border: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f49f19', endColorstr='#ed771f', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-klmaweb:hover,
.btn-klmaweb:focus,
.btn-klmaweb:active,
.btn-klmaweb.active,
.btn-klmaweb.disabled,
.btn-klmaweb[disabled] {
  color: #ffffff;
  background-color: #ed771f;
  *background-color: #ed771f;
}

.btn-klmaweb:active,
.btn-klmaweb.active {
  background-color: #ed771f \9;
}

/*-----------------------------------------------------------------------------
 -- Design*/



/*Fejléc*/
.Header{
	max-width: 960px;
	margin:0 auto;
	margin-top:20px;
}

.LogoLink{
	display:block;
	max-width:540px;
	max-height:70px;
}

#headerLogo{
	margin:0 auto;
}

.Slider {
	max-width: 960px;
	max-height:448px;
}

/*Tartalom*/
.ContentBody{
	max-width: 910px;
	background:url(../image/contentBg.png) center top no-repeat;
	margin:0 auto;
	padding:0 80px;
	margin-bottom:20px;
}

.Tartalom{
	padding:0 10px 0 20px;
}

/*Lábléc*/
.Footer{
	margin:0 auto;
	background:#d1d1d1;
	width:100%;
	min-height:150px;
	margin-bottom:20px;
}

.FooterContent{
	margin:0 auto;
	position:relative;
	max-width:960px;
	min-height:150px;
	padding:10px 0 20px 0;
}

.Footer a {
	font-family:'BediniRegular', Arial, Helvetica, sans-serif;
	font-size:12px;
	font-size: 1em; 
	color:#000;
}

.copy{
	position:absolute;
	bottom:5px;
	left:5px;
	font-family:'BediniRegular', Arial, Helvetica, sans-serif;
	font-size:12px;
	font-size: 1em;
}
.author{
	position:absolute;
	bottom:5px;
	right:5px;
}


/* --- Navigation modul */
#TopPosition ul.Navigation{
	padding:0;
	max-width: 960px;
	min-height: 35px;
	line-height: 35px;
	margin-top:20px;
	margin-bottom:20px;
	list-style:none;
	text-align:center;
}

#TopPosition ul.Navigation > li{
	display:inline-block;
	line-height: 35px;
	margin:0 5px;
}

#TopPosition ul.Navigation > li > a{
	display:block;
	color:#0b689e;
	text-decoration:none;
	padding: 2px 15px 2px 15px;
	font-family:'BediniRegular', Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-style:italic;
	font-size:20px;
	font-size:130%;
	font-size: 1.3em; 
}

#TopPosition ul.Navigation > li.active > a,
#TopPosition ul.Navigation > li:hover > a{
	color:#fff;
	background-color: #f49f19;
	*background-color: #f49f19;
	background-image: -moz-linear-gradient(left, #f49f19, #ed771f);
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#f49f19), to(#ed771f));
	background-image: -webkit-linear-gradient(left, #f49f19, #ed771f);
	background-image: -o-linear-gradient(left, #f49f19, #ed771f);
	background-image: linear-gradient(left right, #f49f19, #ed771f);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f49f19', endColorstr='#ed771f', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}

/* --- FooterMenu modul */
#FooterPosition{
	width:100%;
	font-family:'BediniRegular', Arial, Helvetica, sans-serif;
	font-style:italic;
	font-weight:bold;
	color:#000;
	font-size:17px;
	font-size:100%;
	font-size: 1em; 
}

#FooterPosition ul.FooterMenu{
	margin:0 auto;
	width:100%;
	min-height:20px;
	line-height:20px;
	margin-bottom:10px;
	list-style:none;
	text-align:left;
}

#FooterPosition ul.FooterMenu > li{
	display:inline-block;
	margin:0 5px;
}

#FooterPosition ul.FooterMenu > li > a{
	display:block;
	color:#000;
	text-decoration:none;
	padding:0 5px;
	line-height:17px;
	font-family:'BediniRegular', Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-style:italic;
	font-size:17px;
	font-size:100%;
	font-size: 1em; 
}

#FooterPosition ul.FooterMenu > li.active > a,
#FooterPosition ul.FooterMenu > li:hover > a{
	text-decoration:underline;
	color:#333;
}


#FooterPosition .ModulHtml h3{ font-size: 1.3em; margin-bottom:0; margin-top:0; line-height:1.1em;}
#FooterPosition .ModulHtml h4{ font-size: 1.3em; margin-bottom:2px; margin-top:0; line-height:1.1em;}

/*----------- GreenBox ---------------*/
.GreenBox{
	max-width: 960px;
	min-height: 290px;
	margin:0 auto;
	padding:0;
	text-align:center;
	list-style:none;
	position:relative;
	margin-top:-40px;
	margin-bottom:20px;
	z-index:999;
}

.GreenBox > li{
	display: inline-block;
	margin:0 10px;
	box-shadow:0 0 10px #eee;
	-webkit-border-radius:10px;
	   -moz-border-radius:10px;
	        border-radius:10px;
}

@media screen and (min-width: 680px) and (max-width: 900px) {
	.GreenBox > li:nth-child(3n){
		margin-right:0;
		
	}
}

@media screen and (min-width: 450px) and (max-width: 670px) {
	.GreenBox > li:nth-child(2n){
		margin-right:0;
		
	}
}

@media screen and (max-width: 450px) {
	.GreenBox > li{
		margin-right:0;
	}
}

.GreenBox > li > a{
	display:block;
	position:relative;
	width:215px;
	background:#fff;
	color:#0e6ba0;
	padding:20px;
	text-decoration:none;
	border-color:rgba(240,240,240,.5);
	border-width:5px;
	border-style:solid;
	-webkit-border-radius:10px;
	   -moz-border-radius:10px;
	        border-radius:10px;
}

.GreenBox > li > a:hover{
	background:#eee;
}

.GreenBox > li > a > .Boxicons{
	margin:0 auto;
	margin-bottom:10px;
	height:55px;
	width:55px;
	text-align:center;
	background-color: #f49f19;
	*background-color: #f49f19;
	background-image: -moz-linear-gradient(left, #f49f19, #ed771f);
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#f49f19), to(#ed771f));
	background-image: -webkit-linear-gradient(left, #f49f19, #ed771f);
	background-image: -o-linear-gradient(left, #f49f19, #ed771f);
	background-image: linear-gradient(left right, #f49f19, #ed771f);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f49f19', endColorstr='#ed771f', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	-webkit-border-radius:5px;
	   -moz-border-radius:5px;
	        border-radius:5px;
}

.felirat, .Kivonat{
	border-bottom: solid 1px #cccccc;
	text-align:center;
}
.felirat{ font-style:italic; font-weight:bold; }
.Kivonat{ border:none; color:#000; font-family:'BediniRegular', Arial, Helvetica, sans-serif;}

.map_canvas_box{
	margin:0 auto;
	width:90%;
	padding:10px;
	background:#ededed;
}

#map{
	width:100%;
	height:300px;
}

.form-horizontal .control-label {
    width: 55px;
}
.form-horizontal .controls {
    margin-left: 70px;
}

#message{
    float:left;
    margin-right: 50px;
}


.shadow{
    margin: 0 auto;
    text-align: center;
}
.preview{
    margin:0 auto;
    width: 85%;
    height: auto;
    position: relative;
    overflow: hidden;
    border: solid 1px #f3f3f3;
    box-shadow: 0 0 2px rgba(0,0,0,.6);
}
.preview .leiras{
    width: 96%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1% 2%;
    background: rgba(255,255,255,.7);
    font-size: 0.8em;
}

.referenciak img{
    border:solid 1px transparent;
    cursor: pointer;
}

.referenciak img:hover{
    border:solid 1px #007ac2;
}



/*image effekt*/
.view {
   width: 280px;
   height: 170px;
   margin: 5px;
   margin-left:10px;
   float: right;
   border: 2px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}
.view .mask, .view .content {
   width: 275px;
   height: 170px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
   display: block;
   position: relative;
}

.view a{ pointer-events: none; }

.fourth-effect .mask {
	position:absolute; /* Center the mask */
	top:35px;
	left:85px;
	cursor:pointer;
    border-radius: 50px;
    border-width: 50px;
    display: inline-block;
    height: 100px;
    width: 100px;
	border: 50px solid rgba(0, 0,0, 0.4);
	-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	opacity:1;
	visibility:visible;
	-moz-transform:scale(4);
	-webkit-transform:scale(4);
	-o-transform:scale(4);
	-ms-transform:scale(4);
	transform:scale(4);
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
.fourth-effect:hover .mask {
   opacity: 0;
   border:0px solid rgba(0,0,0,0.4);
   visibility:hidden;
}

.view2{
	width:325px;
        height: 216px;
}

.view2 .mask{
	top:65px;
	left:110px;
}

.view3{
	width:343px;
        height: 214px;
}

.view3 .mask{
	top:65px;
	left:110px;
}