@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;600;700&display=swap');

@font-face {
    font-family: "Knoox";
    src: url("../ASSETS/Play-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "font1";
    src: url("../ASSETS/Play-Regular.ttf") format("truetype");
}

/* BASIC*/
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
}
header, content , footer{
	margin-left: 10%;
	margin-right: 10%;
	font-family: 'font1' ; 
	font-size: 100%;
	color: white;
	background-color:#e3e3e3;
	padding: 0px;
}
body{
	background-color:#e3e3e3;
}
::-webkit-scrollbar{
	width: 6px;
	size: 10px;
}
::-webkit-scrollbar-track {
	background: #e3e3e3;
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	background:#2f2f2f;
	size: 20px;
}
::-webkit-scrollbar-thumb:hover {
	background:#555555;
	transition: 0.5s;
}


/*NAVIGATION*/

.logo{
	align-content: left;
	max-width: 200px;
	max-height: 55px;
	z-index: 11;
	margin-right: 35px;
}
nav{
	display: flex;
	padding-right: 5%;
	padding-left: 5%;
	padding-top: 2%;
	padding-bottom: 2%;
	justify-content: space-around;
	align-items: center;
	min-height: 8vh;
	background-color: #e3e3e3; 
	font-family: 'Knoox';
}
.nav-links{
	display: flex;
	justify-content:space-around;
	text-decoration: none;
	
}
.nav-links li{
	list-style: none;
	display: inline-block;
    margin-right:10%;
	padding-top: 7%;
}
.nav-links a,a:visited{
	color: #2f2f2f;
	text-decoration: none;
	letter-spacing: 3px;
	font-weight: bold;
	font-size:16px; 
	font-family: 'Knoox';
}
.nav-links a:hover{
	text-decoration: underline;
	text-decoration-color:#666666;
	color: #666666;
	font-size: 20px;
	transition: 0.8s;
}
a.leng{
	font-size:95%;
	color: #666666;
	font-family: 'font1';
	
}
.absolut{
	position: absolute;
	display: inline;
	padding-left: 0.5%;
}
a.leng:hover{
	text-decoration: none;
	font-size: 85%;
	color: #666666;
}
div.kicsivonal{
	font-size: 50%;
	display: inline;
	position: absolute;
}
.burger{
	display: none;
}
.burger div{
	width:25px;
	height: 3px;
	background-color: #2f2f2f;
	margin: 5px;
}
@media screen and (max-width:928px){
	body{
		overflow-x: hidden;
	}
	.nav-links{
		position: absolute;
		z-index: 10;
		right: 0px;
		height: 80vh;
		top: 8vh;
		background-color: #e3e3e3;
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 50%;
		transform: translateX(100%);
		transition: transform 1s ease-in;
		
		}
	.nav-links li{
		opacity: 0;
    	margin-right:0%;
	}

	.nav-active{
		transform: translateX(0%);
	}
	.burger{
		display: block;	
		cursor: pointer;
		z-index: 11;
	}
	.absolut{
		padding-left: 5%;
	}
	a.leng{
		padding-right: 5%;
		padding-left: 5%;
	}
	li.leg_box{
		margin-right: 10.5%;
	}
}
@media screen and (max-width:1285px){
	.nav-links{
		width: 35%;
		height: 33%;
	}
	.nav-active{
		width: 100%;
		height: 100%;
		padding-bottom: 20%;
	}
	.nav-active a {
		padding-bottom: 5%;
	}
	a.leng{
		padding-left: 0;
		margin-left: 0;
		margin-right: 0;
	}
	div.kicsivonal{
		visibility: visible;
	}
}
	
@keyframes navLinkFade{
	from{
		opacity: 0;
		transform: translateX(50px);
	}
	to{
		opacity: 1;
		transform: translateX(0px);
	}
}
.toggle .line1{
	transform: rotate(-45deg) translate(-5px,6px);
	transition: 0.5s;
}
.toggle .line2{
	opacity: 0;
}
.toggle .line3{
	transform: rotate(45deg) translate(-5px,-6px);
	transition: 0.5s;
}
div.logo:hover{
	cursor: none;
}

/*BODY - CONTENT*/
section{
	margin: 90px;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 5px;
}
.welcome{
	text-align: center;
	padding-top: 40px;
	padding-bottom: 20px;
	font-size:230%;
	color: #2f2f2f;
	letter-spacing: 2px;
	font-family: 'Knoox';
}
.welcomealt{
	text-align: center;
	padding-top: 5px;
	padding-bottom: 30px;
	font-size:120%;
	color: #2f2f2f;
	letter-spacing: 2px;
	font-family: 'Knoox';
}
.welcomepic img{
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 60%;
}
.bemutatkozas{
	padding-top: 40px;
	color: #666666;
	text-align: center;
	font-family: 'font1';
	font-size: 180%;
	margin: 2px;
	padding-bottom: 0px;
}
.bemutatdot{
	font-size: 150%;
	padding: 2%;
	margin: 0;
	text-align:center;
	color:#666666;
	font-family: 'font1';
}
.bemutatdot li{
	text-align:center;
	padding: 0;
	margin: 0;
	list-style:disc;
	list-style-position: inside;
	}

.bemutatkozasalso{
	color: #666666;
	text-align: center;
	font-family:'Poppins';
	font-size: 130%;
	margin: 2px;
	padding-bottom: 0px;
}

.contact-nev{
	font-family: 'Knoox';
	font-size: 200%;
	text-align: center;
	padding-top: 3%;
	padding-bottom: 1%;
	color: #2f2f2f;
}
.tel{
	text-align: center;
	font-family: 'Knoox';
	color: #666666;
	font-size: 150%;
	
}
.tel a, a:visited,a:active{
	color: #666666;
}
.tel span{
	padding-top: 2%;
	font-size: 260%;
	color: #2f2f2f;
}
.tel span:hover{
	 opacity: 0.7;
  transition: 0.5s; 
}
.mail{
	text-align: center;
}
.mail a span {
	color: #2f2f2f;
	font-size: 400%;
	padding-top: 2%;
}
.mail a span:hover {
	 opacity: 0.7;
  transition: 0.5s; 
}

.nyitvatartas{
	text-align: center;
	margin-top: 4%;
	font-family: 'font1';
	font-size: 180%;
	color: #2f2f2f;
} 

.kiszallas{
	font-family: 'font1';
	font-size: 200%; 
	text-align: center;
	margin-top: 7%;
	color: #2f2f2f;
}
.facebook{
	text-align: center;
}
.fa {
  padding: 20px;
  padding-top: 3%;	
  font-size: 300%;
  text-align: center;
  text-decoration: none;
}
.fa:hover {
  opacity: 0.7;
  transition: 0.5s; 
}

.fa-facebook {
  background: #e3e3e3;
  color: #2f2f2f;
}

/* FOOTER */
footer{
	padding-top: 30px;
}
hr{
 	border:1px solid #575757;
}
.footer-text{
	font-family: 'font1';
	color:#666666;
	margin-top: 20px;
	margin-bottom: 50px;
	text-align: center;
}
a{
	text-decoration: none;
	color: #FFFFFF;
}
iframe{
	margin: 3%;
}



/*MOBILE VERSION*/
@media screen and (max-width:928px){
	section{
		margin: 90px;
		align-items: center;
		margin-top: 10px;
		margin-bottom: 5px;
	}
	.welcome{
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
		margin: 2%;
		font-size:160%;
		letter-spacing: 2px;
	}
	.bemutatkozas{
		font-size: 90%;
		padding: 2%;
		margin: 0;
	}
	.bemutatkozasalso{
		font-size: 80%;
		padding: 2%;
		margin: 0;
	}
	.bemutatdot{
		font-size: 80%;
	}

	.disclaimer{
	visibility: hidden;
	}
	.bemutatkozas{
		padding: 5%;
	}
	.welcome{
		padding-top: 7%;
		font-size: 110%;
	}
	.welcomealt{
		font-size: 90%;
	}
	.bemutatkozas{
		font-size: 100%;
	}
	.bemutatdot{
		font-size: 85%;
	}
	.footer-text{
		font-size: 60%;
	}
	.welcomepic img{
		width: 100%;
	}
	section{
		margin-left: 3%;
		margin-right: 3%;
	}
	footer{
		padding-top: 1%;
	}
	.contact-nev{
		font-size: 160%;
		padding-top: 13%;
	}
	.tel{
		font-size: 140%;
	}
	.nyitvatartas{
		font-size: 140%;
	}
	.kiszallas{
		font-size: 120%;
		padding-bottom: 13%;
	}
	ul.nav-links {
		top: 0vh;
		justify-content:center;
	}
}