/**/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{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}/**/article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}
html {
	background: url(img/green_cup.png) repeat;
	}
body {
	font-family: 'Exo 2', Arial, sans-serif;
	font-weight: 500;
	width: 895px;
	background: white;
	margin: 50px auto;
	
	}
#logo {
	display: inline-block; /*a slider overflow: hiddenje miatt megjelenik egy üres sáv, ez azért kell*/
	background: url(img/logo.jpg) no-repeat;
	width: 246px;
	height: 120px;
	/*color: rgba(255,255,255,0);*/
	text-indent: -9999px;
	margin-left: 10px;
	position: relative;
	top: 5px;
	}
#hivjon{
	float: right;
	margin-right: 30px;
	position: relative;
	top: 98px; /* a logo inline-blockja miatt ide nem kell inline!*/
	font-size: 18px;
	font-weight: 600;
	}
#hivjon a{
	color: black;
}
#hivjon a:hover{
	color: black;
	text-decoration: underline;
}
#content-slider {
	background: #203040;
	height: 149px;
	margin: 0px;
	width: 895px;
	overflow: hidden; /*ez feltétlenül kell, különben jobbra jócskán túllóg*/
	vertical-align: center;
	}
.slider {
   height: 150px;
   position: relative;
   }
.slider ul {
   margin: 0;
   padding: 0;
   position: relative;
   }

.slider li {
   width: 100%;  /* Width Image */
   height: 150px; /* Height Image */
   position: absolute;
   /*top: -325px; /* Original Position - Outside of the Slider */
   list-style: none;
   }
.slider li.firstanimation {
   animation: cycle 25s linear infinite;
}

.slider li.secondanimation {
   animation: cycletwo 25s linear infinite;
}

.slider li.thirdanimation {
   animation: cyclethree 25s linear infinite;
}

.slider li.fourthanimation {
   animation: cyclefour 25s linear infinite;
}

.slider li.fifthanimation {
   animation: cyclefive 25s linear infinite;
}
.fejleckep{
	width: 20%;
	}
#slider1 {
	top: 15px;
	}
#slider2{
	left :179px;
	bottom:135px
	}
#slider3{
	left: 358px;
	bottom: 285px;
	}
#slider4{
	left: 537px;
	bottom: 435px;
	}
#slider5{
	left: 716px;
	bottom: 585px;
	}	
@keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: 0px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: 0px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: 0px; opacity: 0; z-index: 0; }
   96% { top: 0px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: 0px; opacity: 0; } /* Original Position */
   16% { top: 0px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: 0px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: 0px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: 0px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: 0px; opacity: 0; }
   36% { top: 0px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 0px; opacity: 0; z-index: 0; }
   61% { top: 0px; opacity: 0; z-index: -1; }
   100%{ top: 0px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { top: 0px; opacity: 0; }
   56% { top: 0px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 0px; opacity: 0; z-index: 0; }
   81% { top: 0px; opacity: 0; z-index: -1; }
   100%{ top: 0px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: 0px; opacity: 0; }
   76% { top: 0px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 0px; opacity: 0; z-index: 0; }
   }
header nav{
	display: none;
	}
.content{
	overflow: hidden /*az egyforma magas jobb és bal oldalhoz*/
	}
#inner{
	width: 595px;
	float: left;
	background: white;
	padding: 20px;
	padding-top: 40px;
	padding-right: 30px;
	line-height: 1.6;
	padding-bottom: 1000em; /*az egyforma magas jobb és bal oldalhoz*/
	margin-bottom: -1000em; 

	}
aside {
	width: 250px;
	background: #DEE1B6;
	float: left;
	padding-bottom: 1000em; /*az egyforma magas jobb és bal oldalhoz*/
	margin-bottom: -1000em; 

	}

#portre {
	padding: 5px;
	float: left;
	margin-right: 25px;
	margin-bottom: 10px;
	}
img.jobb{
	padding: 5px;
	float: right;
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 10px;
	}

img.bal{
	padding-left: 6%;
	}
h1{
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: underline;
}
#inner ul {
	list-style-type: disc;
	margin-left: 20px;
	}
.content b {
	font-weight: 600;
	}
.content{
	float: left;
	}


#menu {
	margin: 60px 40px 40px 40px;
	text-align: center;
	display: block;
	}
#menu li, #menu2 li{
	margin: 20px auto;
	height: 36px;
	width: 170px;
	background: linear-gradient(#898989 0%, #203040 40%, #203040 100%);
	line-height: 1.9;
	box-sizing: border-box;
	box-shadow: 3px 3px 3px rgba(32,48,64,0.6);
	}
#menu a, #menu2 a{
	margin: 20px auto;
	color: #DEE1B6;
	font-size: 18px;
	font-weight: 600;
	/*padding: 20px 0; /*valami miatt nem teszi rá! Csak hover állapotban*/
	text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
	}
a {
	text-decoration: none;
	}
a.rend {
	color: black;
	font-style: italic;
	}
a.rend:hover {
	text-decoration: underline;
	}
#menu li:hover  {
	background: linear-gradient(#203040 0%, #203040 60%, #898989 100%);
	}
#menu li.active, #menu2 li.active{
	background: linear-gradient(#D1993A 0%, #5B0707 40%, #5B0707 100%);
	-webkit-box-shadow: 3px 3px 3px rgba(90,4,0,0.6);
	-moz-box-shadow: 3px 3px 3px rgba(90,4,0,0.6);
	box-shadow: 3px 3px 3px rgba(90,4,0,0.6);
	}
#menu .active a, #menu2 .active a{
	color: #FFFFBF;
}
#elerhetosegek {
	margin: 60px auto 50px 20px;
	/*line-height: 2;*/
	font-size: 16px;
	font-weight: 600;
	}
#elerhetosegek2{
	display: none;
	}
.underl{
	text-decoration: underline;
	}
ul.em li{
	list-style-type: none;
	}
aside img {
	position: relative;
	top: 12px;
	left: -10px;
	}
footer{
	width: 895px;
	float: left;
	height: 42px;
	background: #203040;
	margin-bottom: 5%;
	}
a.ml{
	/*margin-left: 32%;*/
	position: absolute;
	right: 34%;
	z-index: 5;
}
a.ml:hover{
	transform: scale(3.8);
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.fb{
	margin: 5px auto auto 5px;
	}
/*.email{
	position: relative;
	left: 42%;
	} így nem hajlandó hover effektre!*/
.em{
	position: relative;
	}
a.email {
	position: absolute; /*csak így hajlandó a hover effektre!*/
	left: 42%;
	z-index: 1;
	}

a.email:hover {
	transform: scale(1.2);
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}


.displaynone, #elerhetosegek span, #elerhetosegek2 span {
	display: none;
	}
ul#folder {
	width: 200px;
	height: 20px;
	margin: 0;
	float: right;
}
 
	ul#folder li {
		
		height: 40px;
		list-style: none;
		z-index: 10;
		padding: auto;
		font-size: 12px;
	}
	
		ul#folder li a, ul#folder li a:link, ul#folder li a:visited {
			color: #DEE1B6;
			padding-top: 15px;
			padding-right: 12px;
			opacity: 0;
			display: block;
			height: 40px;
			-webkit-transition: opacity 1.5s ease;
			-moz-transition: opacity 1.5s ease;
			-o-transition: opacity 1.5s ease;
			transition: opacity 1.5s ease;
		}
 
		ul#folder li a:hover, ul#folder li a:focus {
			opacity: 0.8;
			outline: none;
		}
@media screen and (max-width: 970px) {
	body{
		width: 795px
		}
	#content-slider {
	  width: 795px;
	  height: 130px;
	  margin: 0px;
	  }
	.slider {
		height: 120px;
		}

	.slider li {
		width: 100%;  /* Width Image */
		height: 120px; /* Height Image */
		}
    #slider1 {
	  top: 12px;
	  }
	#slider2{
	  left :159px;
	  bottom:108px
	  }
	#slider3{
	  left: 318px;
	  bottom: 228px;
	  }
	#slider4{
	  left: 477px;
	  bottom: 348px;
	  }
	#slider5{
	  left: 636px;
	  bottom: 468px;
	  }	
	 #inner{
		width: 535px;
		}		
	#portre{
	  transform: scale(0.9);
	  margin-right: 20px;
	  margin-bottom: 5px;
	  }
	img.jobb, img.bal{
	  transform: scale(0.9);
		}
	
	img.bal{
	  padding-left: 4%;
	}
	aside {
	  width: 210px;
	  	} 
	footer{
		width: 795px;
		}
	#menu {
		margin: 60px 40px 40px 30px;
		}
	#menu li{
		margin: 20px auto;
		height: 36px;
		width: 150px;
		}
a.ml{
		right: 30%;
		}
}
@media screen and (max-width: 850px) {
	body{
		width: 695px;
		margin: 40px auto;
		
		}
		
	#logo {
		background: url(img/logokis.jpg) no-repeat;
		width: 197px;
		height: 86px;
		margin-bottom: 10px;
		}
	
	#hivjon{
		margin-right: 20px;
		top: 73px;
		font-size: 15px;
		}
		
	#content-slider {
	  width: 695px;
	  height: 115px;
	    }
	.slider {
		height: 110px;
		}

	.slider li {
		width: 100%;  /* Width Image */
		height: 110px; /* Height Image */
		}
    #slider1 {
	  top: 11px;
	  }
	#slider2{
	  left :139px;
	  bottom:98px
	  }
	#slider3{
	  left: 278px;
	  bottom: 208px;
	  }
	#slider4{
	  left: 417px;
	  bottom: 318px;
	  }
	#slider5{
	  left: 556px;
	  bottom: 428px;
	  }	
	 #inner{
		width: 465px;
		padding-top: 30px;
		font-size: 14px;
		}
	#portre{
	  transform: scale(0.8);
	  margin-right: 15px;
	  margin-bottom: 0px;
	  }
	img.jobb, img.bal{
	transform: scale(0.8);
		}
	
	img.bal{
	  padding-left: 1%;
	}	
	aside {
	  width: 180px;
	  	}
	aside img{
		transform: scale(0.8)
		}
	footer{
		width: 695px;
		}
	#menu {
		margin: 50px 40px 40px 25px;
		}
	#menu li{
		margin: 20px auto;
		height: 36px;
		width: 130px;
		font-size: 16px;
		line-height: 2;
		}
	#menu a{
		font-size: 16px;
		top: 2px;
		}
	#elerhetosegek{
		font-size: 14px;
		}
	
	}

@media screen and (max-width: 750px) {
	
	#content-slider, aside, .nemmutat{
		display:none;
	}
	#hivjon{
		font-size: 14px;
		position: absolute;
		top: 125px;
		left: 65%;
		float: right;
		}
	header nav{
		display: block;
		padding-bottom: 5px; /*különben nem ér össze innerrel*/
	}
	#elerhetosegek2{
		display: block;
		line-height: 2;
		}
	#elerhetosegek2 li {
		list-style-type: none;
		font-weight: 600;
		width: 100%;
		float: left; /*létfontosságú, mert különben a lista lépcsőzetes lesz!*/
		}          
	body{
		width: 90%;
		margin: 5%
		}
	
	#logo {
		width: 40%;
		margin-left: 30%;
		margin-bottom: 25px;
		top: 10px;
	}
	#menu2 li {
		width: 90%;
		margin: 1% 5%;
		text-align: center;
		background: #203040;
		height: 45px;
		line-height: 2.5;
		}
		
	#menu2 li.active{
		background: #5B0707,
		color: 
		}
	#menu2 li.active:hover{
		-webkit-box-shadow: 3px 3px 3px rgba(90,4,0,0.6);
		-moz-box-shadow: 3px 3px 3px rgba(90,4,0,0.6);
		box-shadow: 3px 3px 3px rgba(90,4,0,0.6)
		}
	footer {
		width: 100%;
				
		}
	#inner{
		padding: 20px;
		padding-right: 20px;
		margin: auto;
		width: 100%;
		}
	#inner p{
		max-width: 90%; /*fontos, mert különben jobbra lelóg. Nem reagál sem paddingra, sem marginra*/
		}
	#inner ul{
		margin-right: 3%;
		padding-right: 20px;
		}
	#portre{
		margin-left: -15px;
		width: 28%;
		}
	img.jobb{
		width: 28%;
		}
	
	img.bal{
		transform: scale(0.9);
		padding-right: 0%;
		margin-right: 3%
		}
	#elerhetosegek2{
		max-width: 90%;
		}
	#elerhetosegek2 img{
		position: relative;
		top: 15px;
		}
	a.email {
		left: 50%;
		top: 40px;
		transform: scale(1.1);
	}
	a.ml{
		left: 6%;
		top: 30px;
		position: relative;
	}
		a.ml img{
			width: 80%;
		}
	a.ml:hover{
		transform: none;
}
@media screen and (max-width: 670px) {
	img.bal{
		transform: scale(0.8);
		margin-left: -2%;
		}
		
}
@media screen and (max-width: 550px) {
	#logo {
		margin-left: 20%;
		width: 60%;
		}
	#portre, img.jobb{
		width: 35%;
		}
	img.bal{
		margin-left: -5%;
		padding-right: 0%;
		}
	a.email {
		left: 60%;}
	}	
@media screen and (max-width: 500px) {
	#logo {
		margin-left: 25%;
		margin-bottom: 40px;
		max-width: 90%;
		float: center;
		}
	#hivjon{
		left: 33%;
		}
	
	
}
@media screen and (max-width: 450px) {
	
	body{
		margin-left: 0px;
		margin-right: 0px;
		width: 100%;
		}
	}
@media screen and (max-width: 400px) {
	#elerhetosegek2:last-child{
		margin-bottom: 100px;}
	#hivjon{
		left: 30%;
		}
	a.email {
		left: 40%;
		top: 250px;}
	#inner {
		padding-bottom: 100px;/*hogy legyen hely az emailnek*/
		}
}
@media screen and (max-width: 380px) {
	#logo {
		margin-left: 15%;
		margin-right: 0px;
		}
@media screen and (max-width: 370px) {
	#hivjon{
		left: 25%;
		}
}
@media screen and (max-width: 350px) {
	
	#logo {
		background: url(img/logopici.jpg) no-repeat center;
		margin-left: 15%;
		margin-bottom: 30px;
		}
	#hivjon{
		top: 100px;
		}
	#portre, .jobb{
		width: 45%;
		}
	ul#folder li a, ul#folder li a:link, ul#folder li a:visited {
		font-size: 10px;
	}
}