body {
		 
		margin: 0;
		font-family: arial, sans-serif;
		overflow-x: hidden;
	}
	
	html {
	  scroll-behavior: smooth;
	}
	
	@font-face {
		font-family: Roboto-Thin;
		src: url('fonts/Roboto-Thin.woff') format('woff');
	}			
		
	@font-face {
		font-family: Roboto-Black;
		src: url('fonts/Roboto-Black.woff') format('woff');
	}		
	
	@font-face {
		font-family: RustG;
		src: url('fonts/IntroRustG-Base2Line.woff') format('woff');
	}
	
	@font-face {
		font-family: ScriptR;
		src: url('fonts/IntroScriptR-H2Base.woff') format('woff');
	}	

	@font-face {
		font-family: 'Comic';
		src: url('fonts/ComicSansMS.eot');
		src: url('fonts/ComicSansMS.eot?#iefix') format('embedded-opentype'),
			url('fonts/ComicSansMS.woff2') format('woff2'),
			url('fonts/ComicSansMS.woff') format('woff'),
			url('fonts/ComicSansMS.ttf') format('truetype'),
			url('fonts/ComicSansMS.svg#ComicSansMS') format('svg');
		font-weight: normal;
		font-style: normal;
	} 


	/* width */
	::-webkit-scrollbar {
	  width: 10px;
	}

	/* Track */
	::-webkit-scrollbar-track {
	  box-shadow: inset 0 0 5px grey; 
	  border-radius: 4px;
	  background: rgba(255, 255, 255, 0.7); 
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: #00A0E3; 
	  border-radius: 4px;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #004d6e; 
	}


	/* width */
	.scrollbar {
		scrollbar-color: #00A0E3;
		scrollbar-width: thin;	 
	}
 
	/* Handle on hover */
	.scrollbar:hover {
		scrollbar-color: #004d6e;	  
	}
/* ------------------------------------------------------------------- MENÜ START ------------------------------------------*/
	#menu {
		overflow: hidden; 
		position:fixed;
		z-index:200;
		width:100%;
		display:none;
		height: 80px;
	}

	.topnav {
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.8);
		height: 80px;
		background-color: #00A0E3;
		box-shadow: 0px 10px 20px #005375;
		
	}

 	.topnav-in {
		
		float: right;
		padding-right: 0px;
		height: 80px;
		background-color: #00A0E3;
	}

	.topnav a {
		font-family: Roboto-Thin;
		font-size: 18px;
		float: left;
		display: block;
		text-align: center;
		padding: 30px 12px;
		text-decoration: none;
		font-weight: bold;
		color: #ffffff;
	}

	.topnav a:hover {
		color: #ffffff;
		text-shadow: 0px 0px 5px #ffffff, 0px 0px 2px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 2px #ffffff;
	}

	.topnav a:active {
	 
		color: #ff0000;
	 
	}

	.logo { 
		background-image: url('../kellekek/lifeguide-logo2.png');
		background-position: 10px 12px;
		background-repeat: no-repeat;
		background-size: 180px auto;		
		 
		width: 200px;
		height: 80px;
		top: 0px;
		left:0px;
		 
		overflow: none;
		display: block;
		position: absolute;
 
		background-color: #ffffff;
		box-shadow: 0px 10px 20px #005375;
	  
	}
 
	.nyelv-select select {
		width:100px;
		 height: 50px;
		margin-top:-5px;
		margin-left:55px;
 
		background-color: #00A0E3;
		font-size: 16px;
		
		border: 0px solid #00A0E3;
		text-transform: uppercase; 
		color: #ffffff;
		font-family: Roboto-Thin;
		font-weight: 900;
		float: left;
		
		
	}
	.nyelv-select select option {
 		background-color: #00A0E3;
		font-size: 16px;
		color: #ffffff;
		font-family: Roboto-Thin;
		text-transform: uppercase; 
		font-weight: 900;
		text-shadow: 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 2px #ffffff; 
	}	
	
	.nyelv-select3 select {
		width:100px;
		 height: 50px;
		margin-top:-5px;
		margin-left:55px;
 
		background-color: #00A0E3;
		font-size: 16px;
		
		border: 0px solid #00A0E3;
		text-transform: uppercase; 
		color: #ffffff;
		font-family: Roboto-Thin;
		font-weight: 900;
		float: left;
		
		
	}
	.nyelv-select3 select option {
 		background-color: #00A0E3;
		font-size: 16px;
		color: #ffffff;
		font-family: Roboto-Thin;
		text-transform: uppercase; 
		font-weight: 900;
		text-shadow: 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 2px #ffffff; 
	}		
	/* nav-toggler css start */
	.mobilgomb {
	  background-color: #00A0E3;
	  border: 0 solid #ffffff;
	  width: 70px;
	  left: 10px;
	  padding: 5px;
	  display: none;
	  position; relative;
	  z-index: 100;
	}

 

	.sidenav {
	  height: 100%;
	  width: 0;
	  
	  position: fixed;
	  z-index: 9999;
	  top: 0;
	  left: 0;
	  background-image: linear-gradient(#00A0E3, #f06894);
	  
	  overflow-x: hidden;
	  transition: 0.5s;
	  padding-top: 60px;
	}

	.sidenav a {
	  padding: 8px 8px 8px 32px;
	  text-decoration: none;
	  font-size: 25px;
	  color: #ffffff;
	  display: block;
	  transition: 0.3s;
	}

	.sidenav a:hover {
	  color: #f1f1f1;
	}

	.sidenav .closebtn {
	  position: absolute;
	  top: 0;
	  right: 25px;
	  font-size: 36px;
	  margin-left: 50px;
	}

	#home  {
	  
	  transition: margin-left .5s;
	   
	}
/* ------------------------------------------------------------------- MENÜ END ------------------------------------------*/	
/* ------------------------------------------------------------------- MENÜ2 START ------------------------------------------*/
	#menu2 {
		position:fixed;
		z-index:200;
		width:100%;
	}

	.topnav2 {
	 
		height: 80px;
 
	}

 	.topnav2-in {
		float: right;
		padding-right: 0px;
		height: 80px;
	 
	}

	.footer-menu a {
		color: #000000;
	}	
	
	.footer-menu a:hover {
		color: #00A0E3;
		text-shadow: 0px 0px 5px #ffffff, 0px 0px 2px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 2px #ffffff;

	}
	
	.topnav2 a {
		font-family: Roboto-Thin;
		font-size: 18px;
		float: left;
		display: block;
		text-align: center;
		padding: 30px 12px;
		text-decoration: none;
		font-weight: bold;
		color: #ffffff;
	}

	.topnav2 a:hover {
		color: #ffffff;
		text-shadow: 0px 0px 5px #ffffff, 0px 0px 2px #ffffff, 0px 0px 5px #ffffff, 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 2px #ffffff;
	}

	.topnav2 a:active {
	 
		color: #ff0000;
	 
	}

	.topnav2 .logo {
 
	  
	}
	
	.nyelv2-select select {
		width:100px;
		 
		margin:10px;
		margin-left:55px;
 
		background-color: rgba(255,255,255,0);
		font-size: 16px;
		
		border: 0px solid #00A0E3;
		text-transform: uppercase; 
		color: #000000;
		font-family: Roboto-Thin;
		font-weight: 900;
		float: left;
	}
	.nyelv2-select select option {
 		background-color: rgba(255,255,255,0);
		border: 0px solid #00A0E3;
		font-size: 16px;
		color: #000000;
		font-family: Roboto-Thin;
		text-transform: uppercase; 
		font-weight: 900;
		 
	}		
/* ------------------------------------------------------------------- MENÜ END ------------------------------------------*/	
/* ------------------------------------------------------------------- KERESÉS START ------------------------------------------*/	
	.custom-select-box {
		position:relative;
		width:24%;
		font-family: Roboto-Thin;
		font-weight: 900;
		float:left;
		margin: 0.4%;
		border: 0px solid #ff0000;
		
	}

	#kereses {
		background-image: url('../kellekek/searchicon.png');
		background-position: 10px 12px;
		background-repeat: no-repeat;
		width: 91%;
		font-size: 16px;
		padding: 15px 20px 12px 40px;
		border: 1px solid #00A0E3;
		font-family: Roboto-Thin;
		font-weight: 900;
	}		
	
	#mySearch {
		background-image: url('../kellekek/searchicon.png');
		background-position: 10px 12px;
		background-repeat: no-repeat;
		width: 100%;
		font-size: 16px;
		padding: 15px 20px 12px 40px;
		border: 1px solid #00A0E3;
		font-family: Roboto-Thin;
		font-weight: 900;
		float:right;
	}
	#results {
	position:absolute;z-index:50;display:none;width:100%;max-height: 178px;overflow-y: auto;overflow-x: hidden;
	}
	.kereses-talalat {
		width:89.5%;
		position: relative;
		border: 1px solid #00A0E3;
		padding: 34px;
		background-color:  rgba(255,255,255,0.8);
		display:block;
		transition:  1s;
		font-family: Roboto-Thin;
		font-weight: 900;
	}	
	
	.kereses-talalat:hover {
		 
		border: 1px solid #00A0E3;
		padding: 34px;
		background-color:  rgba(199,220,255,0.8);
		display:block;
		font-family: Roboto-Thin;
		font-weight: 900;
	}
	
	.orszag-select select {
		width:100%;
		height:100%;
		background-image: url('../kellekek/orszagicon.png');
		background-position: 2px 2px;
		background-repeat: no-repeat;
		background-size: 40px 40px;
		background-color: #00A0E3;
		font-size: 16px;
		padding: 12px 20px 12px 40px;
		border: 1px solid #000000;
		font-weight: 900; 
		color: #ffffff;
		font-family: Roboto-Thin;
	}
 	.orszag-select select option {
 		background-color: #c7e5f2;
		font-size: 16px;
		color: #00A0E3;
		font-family: Roboto-Thin;
		font-weight: 900;
		text-shadow: 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 2px #ffffff; 
		font-weight: 900;
	}
 

 
	.regio-select select {
		width:100%;
		height:100%;
		background-image: url('../kellekek/regioicon.png');
		background-position: 2px 2px;
		background-repeat: no-repeat;
		background-size: 40px 40px;
		background-color: #00A0E3;
		font-size: 16px;
		padding: 12px 20px 12px 40px;
		border: 1px solid #000000;
		  
		color: #ffffff;
		font-family: Roboto-Thin;
		font-weight: 900;
	}
 	.regio-select select option {
 		background-color: #c7e5f2;
		font-size: 16px;
		color: #00A0E3;
		font-family: Roboto-Thin;
		font-weight: 900;
		text-shadow: 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 2px #ffffff; 
	}	



	.megye-select select {
		width:100%;
		height:100%;
		background-image: url('../kellekek/megyeicon.png');
		background-position: 2px 2px;
		background-repeat: no-repeat;
		background-size: 40px 40px;
		background-color: #00A0E3;
		font-size: 16px;
		padding: 12px 20px 12px 40px;
		border: 1px solid #000000;
		 
		color: #ffffff;
		font-family: Roboto-Thin;
		font-weight: 900;
	}
	.megye-select select option {
 		background-color: #c7e5f2;
		font-size: 16px;
		color: #00A0E3;
		font-family: Roboto-Thin;
		font-weight: 900;
		text-shadow: 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 2px #ffffff; 
	}


	.varos-select select {
		width:100%;
		height:100%;
		background-image: url('../kellekek/varosicon.png');
		background-position: 2px 2px;
		background-repeat: no-repeat;
		background-size: 40px 40px;
		background-color: #00A0E3;
		font-size: 16px;
		padding: 12px 20px 12px 40px;
		border: 1px solid #000000;
		 
		color: #ffffff;
		font-family: Roboto-Thin;
		font-weight: 900;
	}
	.varos-select select option {
 		background-color: #c7e5f2;
		font-size: 16px;
		color: #00A0E3;
		font-family: Roboto-Thin;
		font-weight: 900;
		text-shadow: 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 2px #ffffff; 
	}

	
	.kategoria-select select {
		width:100%;
		height:100%;
		background-image: url('../kellekek/kategoriaicon.png');
		background-position: 2px 2px;
		background-repeat: no-repeat;
		background-size: 40px 40px;
		background-color: #00A0E3;
		font-size: 16px;
		padding: 12px 20px 12px 40px;
		border: 1px solid #000000;
		 
		color: #ffffff;
		font-family: Roboto-Thin;
		font-weight: 900;
	}
	.kategoria-select select option {
 		background-color: #c7e5f2;
		font-size: 16px;
		color: #00A0E3;
		font-family: Roboto-Thin;
		font-weight: 900;
		text-shadow: 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 2px #ffffff; 
	}
	.kereso {
		position:relative;
		width:58%; 
		margin: 0.5%; 
		float:left;
		border: 0px solid #ff0000;
	}
	.keresogomb {
		position:relative;
		width:14.5%; 
		margin: 0.5%; 
		float:left;
		border: 0px solid #ff0000;
	}
	
	 
/* ------------------------------------------------------------------- KERESÉS END ------------------------------------------*/	
/* ------------------------------------------------------------------- INDEX.PHP FELÉPÍTÉS START------------------------------------------*/	
	.home-box {
		position:relative;
		z-index:4;
		width:100%;
		height:100%;
		animation: fadein 3s;
	}		
	.box-cover {
		position:relative;
		z-index:4;
		width:100%;
		height:100%;
		background: url( '../kellekek/hatter-felho.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		animation: fadein 2s;
		-moz-animation: fadein 2s; /* Firefox */
		-webkit-animation: fadein 2s; /* Safari and Chrome */
		-o-animation: fadein 2s; /* Opera */		
	}	
	.box2-cover {
		position:absolute;
		z-index:4;
		top: 0px;
		width:100%;
		height:100%;
		background: url( '../kellekek/hatter-fu.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.box3-cover {
		position:absolute;
		z-index:4;
		top: 0px;
		width:100%;
		height:100%;
		background: url( '../kellekek/hatter-iras.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.box4-cover {
		position:absolute;
		z-index:4;
		top: 0px;
		width:27%;
		height:100%;
		background-color: rgba(255,255,255,0.6);
		right: 0px;	
		box-shadow: 0px -10px 50px #555555, 0px 10px 50px #555555;
	}	
	.fade-in {
		animation: fadeIn ease 3s;
		-webkit-animation: fadeIn ease 3s;
		-moz-animation: fadeIn ease 3s;
		-o-animation: fadeIn ease 3s;
		-ms-animation: fadeIn ease 3s;
	}	
	@keyframes fadeIn {
		0% {opacity:0;}
		100% {opacity:1;}
	}
 
 
 
 
 
	.box-a {
		z-index:5;
		position:flex;
		width:100%;
		height: auto;
		background-color:#ffffff;
		box-shadow: 0px -10px 50px #555555, 0px 10px 50px #555555;
		overflow: hidden;
	}
	#box-pica {
		position:flex;
		z-index:1;
		width:100%;
		height:100%;	
		overflow: hidden;
	}
	#box-picaa {
		position:flex;
		z-index:1;
		width:100%;
		height:120%;
		 
		background: url( '../kellekek/back2.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;	
		overflow: hidden;
	}
	.box-b {
		z-index: 5;
		position:flex;
		width:100%;
		height:auto;
		box-shadow: 0px -10px 50px #555555, 0px 10px 50px #555555; 
		background-color: #ffffff;	
		overflow: hidden;
	}
	#box-picb {
		position:relative;
		z-index:2;
		width:100%;
		height:100%;
		overflow: hidden;
	}
	#box-picbb {
		position:relative;
		z-index:2;
		width:100%;
		height:120%;
		 
		background: url( '../kellekek/back3.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		overflow: hidden;
	}
	.box-c {
		z-index: 2;
		position:relative;
		width:100%;
		height: auto;
		box-shadow: 0px -10px 50px #555555, 0px 10px 50px #555555;	 
		background-color:#ffffff;	
		overflow: hidden;
	} 
/* ------------------------------------------------------------------- INDEX.PHP FELÉPÍTÉS END------------------------------------------*/	 
/* ------------------------------------------------------------------- blog-post.PHP FELÉPÍTÉS END------------------------------------------*/	 
.kekhatter {
	position: absolute;
	width: 100%;
	height: 70%;
	background-color: #00A0E3;
	animation-name: example;
	animation-duration: 2s;
	z-index: 1;
}

@keyframes example {
	0% {height: 0px;}
	100% {height: 70%;}
}
.datum {
	position: absolute;
	width: 25%;
	height:  10%;
	top: 71%;
	left: 5%;
	z-index:5;
	opacity: 0;
	overflow: hidden;
	font-size: 1.3vw;
  animation: datumanim 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
   
}
@keyframes datumanim {
  from {opacity: 0;}
  
 
  to {opacity: 1;}
} 
.kep {
	width: 60%;
	height: 0%;
	position: absolute;
	right: 5%;
	top: 20%;
	border-radius:  10px  10px  0px 0px ;border: 0px solid #ffffff;
	z-index: 55;
	background-color: #ffffff;
	animation-name: kepanim;
	animation-duration: 2s;
}

@keyframes kepanim {
	0% {height: 70%;
	border-radius: 0px 0px 0px 0px ;border: 1px solid #ffffff;}
	100% {height: 0%;display: none;}
}

.blogpostkep {
z-index: 1;
width: 60%;
height: 70%;
background-color: #ffffff;
position: absolute;
right: 5%;
top: 20%;	
	
}
.blogcim {
	width: 0%;
	 
	height: auto;
	position: absolute;
	right: 0%;
	top: 70%;
	 
	z-index: 155;
	background-color: #ffffff;
	animation-name: blogcimanim;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes blogcimanim {
	0% {width:  0%;}
	 
	100% {width: 57%; }
} 

.cim {
	position: absolute;
	width: 30%;
	height:  0%;
	top: 10%;
	left: 5%;
	z-index:5;
	overflow: hidden;
  animation: cimanim 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
   
}
@keyframes cimanim {
  from {height: 0px;}
  
 
  to {height: 70%;}
}



.tovabb_gomb {
	position: relative;
	padding:20px;
	font-size:18px;
	background-color:#eeeeee;
	color: #000000;
	text-align: center;
	right: 0px;
	bottom: 0px;
	border: 1px solid #00A0E3;
	transition: 0.3s;	
}

.tovabb_gomb:hover {
	background-color:#00A0E3;
	color: #ffffff;
	transform: scale(0.9);	
}

.tobb_bejegyzes_gomb {
	position: relative;
	font-family: Roboto-Thin;
	font-weight: 900;
	padding:20px;
	width:50%;
	font-size:18px;
	background-color:#00A0E3;
	color: #ffffff;
	text-align: center;
	right: 5%;
	margin-top: 20px;
	border: 1px solid #00A0E3;
	transition: 0.3s;	
	float: right;	
}

.tobb_bejegyzes_gomb:hover {
	background-color:#eeeeee;
	color: #00A0E3;
	transform: scale(0.9);	
}
/* ------------------------------------------------------------------- blog-post.PHP FELÉPÍTÉS END------------------------------------------*/	 
	.blog-home {
		position:absolute;
		width:100%;
		height:100%;
		background-color:#ffffff;
	}
	.szolgaltatasok-box {
		/* position: relative; */
 
		width: 320px;
		height: 350px;
		 
		margin: 10px;		
		box-shadow: 0 0 0 1px #00A0E3;
		position:  relative;
		position: relative;
		overflow: hidden;
		border-radius: 10px;
	}
 
	
	
	.szolg-anim {
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;
		height:100%; 
		display: flex; 
		justify-content: center; 
		align-items: center;
		opacity:1;
		width: 100%;
		background-repeat: no-repeat; 
		background-position: center;
		transition: 0.5s;
	}
	.szolg-anim:hover {opacity:0.8;transform: scale(1.1);}
	
	
	.szolg-aniddm:hover {transform: rotate(20deg);opacity:1;background-color: rgba(199,220,255,0.3);box-shadow: 0 0 20px 3px #cccccc inset, 0 0 0 15px #ffffff inset, 0 0 10px 20px #00A0E3 inset;}




	.blog {
		position:relative;
		width: 33.1%;  
		height: auto;
		min-height: 940px; 
		border: 1px solid #00A0E3;
		float:left;
	}
	
	
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
 
  background-color: rgba(199,220,255,0.8); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #ffffff;
  border-radius: 8px;
  margin: auto;
  padding: 0;
  border: 3px solid #00A0E3;
  width: 60%;
  max-width: 500px;
  height: 50%;
  top:100px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
  
}
.modal-circle {
	 border-radius: 100%;
	 width: 200px;
	 height: 200px;
	 background-color: #00A0E3;
	
	background: linear-gradient(207deg, rgba(27,185,255,1) 0%, rgba(0,49,121,1) 80%);	
	 position: absolute;
	 left: 50% ;
	 margin-left: -100px;
	 top: -100px;
	 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:100px; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:100px; opacity:1}
}

/* The Close Button */
.close {
  color: #00A0E3;;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-right: 10px;
}

.close:hover,
.close:focus {
  color: #ccc;
  text-decoration: none;
  cursor: pointer;
}

 

.modal-body {
	padding: 5%;
	margin-top: 120px;
	font-family: Roboto-Thin;
	font-weight: 900;
	padding:20px;
 	font-size:22px;
	text-align: center;
 	color: #000000;
	text-transform: uppercase;
}

.modal_gomb {
	position: absolute;
	font-family: Roboto-Thin;
	font-weight: 900;
	padding:2%;
	width:20%;
	height: 60px;
	font-size:18px;
	background-color:#00A0E3;
	color: #ffffff;
	text-align: center;
	bottom: 30px;
	 
	border: 1px solid #00A0E3;
	transition: 0.3s;
	left: 50%;
	margin-left: -11%;
}

.modal_gomb:hover {
	background-color:#eeeeee;
	color: #00A0E3;
	transform: scale(0.9);	
} 
	.nyelv-select {display: both;}
	.nyelv2-select {left: 185px;}	
	.fooldal-logo {
		top: 0px;
		position:absolute;
		left: -100px;
		width:430px;
		text-align:center;
	}
@media only screen and (max-width:1050px) {		
 
	/* navbar css for mobile start */
	.mobilgomb{
		display: block;
	}
	.topnav-in {display: none;} 
	.topnav2-in {display: none;} 
	.topnav2-in {display: none;} 
	.nyelv-select {display: none;}
	.nyelv-select select {display: none;}
	.nyelv2-select {left: 15px;}
	.fooldal-logo {top: 60px;margin: auto; text-align: center;left: auto;}
}
 
@media only screen and (max-width:1000px) {		

.modal-content {
	width: 90%;
}
	.custom-select-box {
		width:100%;
		clear:both;
	}		 
  		#results {
		width:210%;
 
	}
	.nyelv-select {display: none;}
	.nyelv-select select option {
		 
		 display: none;
 
	}	
	
	.kereso {
		position:relative;
		width:48.5%; 
		margin: 0.5%; 
		float:left;
		border: 0px solid #ff0000;
	}
	.keresogomb {
		position:relative;
		width:35%; 
		margin-left: 0.5%; 
		margin-top:  0.5%;
		float:right;
		border: 0px solid #ff0000;
	}	
	.box-picaa {
		
	}
	.box-picbb {
		 
	}
#box-picbb {
 
}	
	.blog {
		 
		width: 100%;  
		height: auto; 
		 
		clear:both;		
	}
	
	
/* ------------------------------------------------------------------- blog-post.PHP FELÉPÍTÉS END------------------------------------------*/	 
	.blog-home {
		position:absolute;
		width:100%;
		height:130%;
		background-color:#ffffff;
		z-index: 1;
	}
	.datum {
 
		width: 35%;
		height:  5%;
		top: 91%;
		left: 15%;
		z-index:5;
		font-size: 2.9vw;
		font-weight: 900; 
 
	   
	}	
 
	.blogpostkep {
		z-index: 3;
		width: 80%;
		height: 40%;
		position: absolute;
		right: 5%;
		top: 50%;	
	}	
	.kep {
		width: 80%;
		height: 0%;
		position: absolute;
		right: 5%;
		top: 50%;
		border-radius: 10px 10px 10px 0px ;
		border: 0px solid #ffffff;
		z-index: 55;
		background-color: #ffffff;
		animation-name: kepanim;
		animation-duration: 1s;
	}	
	.blogcim {
		width: 0%;
		height: 60px;
		position: absolute;
		right: 0%;
		top: 60%;
		 
		z-index: 55;
		background-color: #ffffff;
		animation-name: blogcimanim;
		animation-duration: 1s;
		animation-fill-mode: forwards;
	}	
	@keyframes blogcimanim {
		0% {width:  0%;}
		 
		100% {width: 90%; }
	} 

	.cim {
		position: absolute;
		width: 90%;
		height:  0%;
		top: 7%;
		left: 5%;
		z-index:5;
		overflow: hidden;
	  animation: cimanim 3s;
	  animation-delay: 1s;
	  animation-fill-mode: forwards;
	   
	}
	@keyframes cimanim {
	  from {height: 0px;}
	  
	 
	  to {height: 70%;}
	}	

}