@font-face {
    font-family: 'DIN-BOLD';
    src: url('../font/DINPro-Bold_13934.woff');
    }
    
    @font-face {
    font-family: 'DIN-MED';
    src: url('../font/DINPro-Medium_13936.woff');
    }
    
    @font-face {
    font-family: 'DIN-LIGHT';
    src: url('../font/DINProLight.woff');
    }
    
    @font-face {
    font-family: 'OpenSans-Regular';
    src: url('../font/OpenSans-Regular.ttf');
    }

html {
  scroll-behavior: smooth;
}

body {
	background: #e7ebe0ff;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
  margin-top:0px;
  scroll-behavior: smooth;
}

/* before-after slider */


#d_before img, #d_after img{ 
	width:100%;
	margin-left:auto;
	margin-right:auto;
}



#container{
/*  width: 100vw;   - caused overflow*/
  height:100vh;
  position: absolute;
  /*left:50%;*/
/*  transform:translate3d(-50%,-0%,0);*/
/*  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/
}

#contact_bar{
	width: 100%;
	background-color: #3d3d3d;
    height: 28px;
	
}

#contact_bar table{
	font-family: DIN-LIGHT;
	text-decoration: none;
	float:right;
}

#contact_bar a{
	text-decoration: none;
	color: #ffffff;
}

#contact_bar td{
	padding-right:25px;
    padding-left:0px;	
}

.filter {
  filter: grayscale(100%);
 -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

#fakus_title{
	font-family: DIN-BOLD;
}	

.title_left{
	position:absolute;
	width:35%;
	min-width:700px;
	top:60%;
	left:-60%;
	color:#ffffff;
	height:50px;
	background-color:#5b5552;
	border-radius: 0px 5px 5px 0px;
	/*transform:translate3d(0%,-50%,0);*/
	z-index:1000;
	display:inline;
	font-family: DIN-LIGHT;
	text-align: center;
	font-size:100px;
	padding-top:20px;
}

.left_text{
	left:-50%;
	width: 50%;
	height:100px;
	margin-top:20%;
	float:left;
	font-family: DIN-LIGHT;
    text-align: right;
    font-size:80px;
    color:#ffffff;
    position:absolute;
/*	-webkit-mask-image: -webkit-gradient(linear, right center, left center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));*/
}

.right_text{
	width: 50%;
	display:block;
	margin-top:20%;
    left:100%;
    float:left;
    font-family: DIN-LIGHT;
    font-size:80px;
    color:#ffffff;
    position:absolute;
/*	-webkit-mask-image: -webkit-gradient(linear, right center, left center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));*/
}

#jobbnyil{
	 position:relative;
	 background-image: url("../img/before_after/rt-small.png");
	 background-repeat:no-repeat;
	 width:20px;
	 height:40px;
	 background-size: 20px 40px;
	 left:120px;
	 top:-115px;
	 cursor: pointer;
}

#balnyil{
	position:relative;
	background-image: url("../img/before_after/lt-small.png");
	background-repeat:no-repeat;
	width:20px;
	height:40px;
	background-size: 20px 40px;
	left:-40px;
	top:-75px;
	cursor: pointer;
}


.title_right{
	position:absolute;
	top:60%;
	left:100%;
	width:35%;
	min-width:700px;
	color:#ffffff;
	height:50px;
	background-color:#5b5552;
	border-radius: 5px 0px 0px 5px;
	z-index:1000;
	display:inline;
	font-family: DIN-LIGHT;
	text-align: left;
	font-size:100px;
	padding-top:20px;
}

/*MENU*/
.menu{
	width:100%;
	top:15%;
	height: 36px;
	position:absolute;
	z-index:1400;
	/*display:none;*/
	}

.menu ul{
	position:relative;
	/*margin: 0px auto 0px auto;*/
	/*text-transform: uppercase;*/
	/*width:80%;*/
	height:100%;
	top:25%;
	transform:translate3d(0%,-25%,0);
	padding: 0;
	list-style-type: none;
}

.menu li{
	position:relative;
  text-align: right;
  margin-left:50px;
  font-size:18px;
  font-family: DIN-MED;
  height:100%;
  line-height:50px;
  transform:translate3d(0%,-25%,0);
  list-style-type: none;

}

#bal_menu{
	color:#f3faff;
	margin-right:50px;
	float:right;
}	

#bal_menu ul{
  padding-right: 15px;
}

#jobb_menu ul{	
  padding-left: 15px;
}

#bal_menu li{
  float: left;	
}

#jobb_menu li{
  float: left;	
}

.menu li:hover{
	display: inline-block;
  color:#383428;
}

.menu li:last-child {
	border-right: none;
}




#jobb_menu{
	color:#f3faff;
/*	margin-left:30px;*/
}	

.menuhatter{
  width:100%;
	background-color:green; 
	z-index:996;
}

.hint{
	clear:both;
  min-width:30%;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
	z-index:3008;
	font-size:25px;
	font-weight:bold;
	top:75%;
	margin: 0 35% 0 35%;
	opacity: 0;
}

.show {
  opacity: 0.9;
  transition: opacity 1000ms;
}

.hide {
  opacity: 0;
  transition: opacity 1000ms;
}


.content{
/*overflow:hidden;*/
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}


.tartalom{
	position:relative;
	clear:both;
	margin:0 auto 0 auto;
	/*background-image: url("../img/background_texture_op_40.png");*/
	background-color:#ede9da;
	width:100%;
  height: 2400px;
	z-index:991;
	font-family: DIN-MED;
	font-size:16px;
	text-align:center;
	padding:0% 0% 0% 0%;
	/*visibility:hidden;*/
}

	
.tartalom_blokk{
	width:60%;
	min-width:600px;
	margin-left:auto;
	margin-right:auto;
	font-family: OpenSans-Regular;
	line-height: 1.6;
}
	
#magunkrol, #vallaljuk, #kapcsolat, #helyszin, #arak, #tudnivalok, #elerhetoseg { 	

	padding-bottom:70px;
	width:100%;
}

#termekek h1, #magunkrol h1, #vallaljuk h1, #kapcsolat h1, #elerhetoseg h1 { 	
	color:#5b5552;
	padding-top:50px;
	padding-bottom:50px;
	text-align:center;
	text-transform:uppercase;
}

#helyszin h1, #arak h1, #tudnivalok h1 { 	
  color:#f7f7f7;
  padding-top:50px;
	padding-bottom:50px;
	text-align:center;
	text-transform:uppercase;
}

.baloldal_focim, .jobboldal_focim{
  font-size:90px;  
  font-family: DIN-MED;
  text-align:center;
  padding-top:10px;
  padding-bottom:40px;
  position:relative;
  min-height: 250px;
}

.baloldal_focim{
	padding-top:50px;
	background-color:#f2f2f2;
}

.jobboldal_focim{
	height:300px;
	border-top: 30px solid #35302f;
	background-color:#4b4645;
	color:#ffffff;
}

#zold{
	color:#a9d43b;
	font-family: DIN-BOLD;
	text-transform:uppercase;
}

#magunkrol{
	position:relative;
	overflow:hidden;
	min-height:500px;
	background-color:#ffffff;	
	z-index:6;
	background-image: url("../img/logo_hatterbe.png");
	background-size: 600px 600px;
	background-repeat:no-repeat;
	background-position: 75% 10%;
	text-align:justify;
}

#vallaljuk{
  width:100%;
	min-height:400px;
	background-color:#f7f7f7;	
}

#vallaljuk ul{
	padding-left:0px;
}

#vallaljuk li{
	list-style-type: none;
}

#galeria{
	width:100%;
	min-height:400px;
	height:25%;
	background-color:#ffffff;	
}

#galeria2{
	width:100%;
	min-height:400px;
	height:25%;
	background-color:#ffffff;	
}

#kapcsolat{
/*	min-height:300px; */
	background-color:#f2f2f2;	
	padding-bottom:0px;
	margin-bottom:0px;
}

#elerhetoseg ul{
	list-style-type:none;
	padding-left:0px;
}

.staff {
	margin-left:auto;
	margin-right:auto;
	
}

.staff img{
	width:150px;
	height:150px;
	object-fit: cover;
	border-radius:10px;
	margin-bottom:15px;
}

.staff td{
	display:inline-block;
	width:180px;	
	font-size:15px;
	margin-top:30px;
}

.products table{
	margin-left:auto;
	margin-right:auto;
	
}

.products img{
	width:400px;
	height:400px;
	object-fit: cover;
	border-radius:10px;
	margin-bottom:15px;
}

.products td{
	display:inline-block;
	width:400px;	
	font-size:15px;
	margin-top:30px;
}

#helyszin{
	min-height:400px;
	background-color:#615f5d;	
	color:#ffffff;
		
}

  #map{
	  display: block;
    min-width:50%;
    max-width:100%;
    margin: auto;
  }

#arak{
	min-height:400px;
	height:1200px;
	background-color:#4b4645;	
	color:#ffffff;
	padding-bottom:10px;
/*	background-image: url("../img/szorolap_2022_02_21.jpg");*/
	background-size:1000px 700px;
	background-repeat:no-repeat;
	background-position: center;
}

#arak table{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	align:center;
  margin-bottom:90px;	
  border: 1px solid #f2f2f2;
  border-collapse:collapse;
  background: linear-gradient(90deg, rgba(99,107,89,1) 0%, rgba(255,255,255,0.006115825236344574) 83%);
  
}
/* table tr styling */
tr.border-bottom td{
	border-bottom: 0.5px solid rgba(228, 234, 225, 0.2);
	-webkit-background-clip: padding-box;
  background-clip: padding-box;
  
}

#arak th{
  padding:10px;
  font-weight:bold;
  line-height:1.9;
  color:#000000;
  background-color:#f2f2f2;
  text-transform:uppercase;

}

#arak td{
  padding: 5px;
  line-height:1.8;
/*  border: 1px solid #ffffff; */
}

#tudnivalok{
	min-height:400px;
	background-color:#615f5d;	
	color:#ffffff;
	line-height:1.4;
	text-align:justify;
}

#tudnivalok ul{
  padding-left:0px;
}	
	
#tudnivalok li{
	text-align:center;
	list-style-type: none;
}

#elerhetoseg{
	min-height:400px;
	background-color:#f2f2f2;
	color:#615f5d;	
	border-bottom: 2px solid #a9d43b;
}	

#kiemeles{
	font-weight:bold;
}

/*slideshow effect*/
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}

@-webkit-keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}