.menuitem {
    font-size: 1.3rem;
}

.img-fluid{
	margin: 0 auto;
	box-shadow: 10px 10px 10px rgb(73,64,64);
}
.textbox{
	max-width: 80%;
	margin: 0 auto;
	justify-content: center;
	text-align: center;
	margin: 20px;
	padding: 10px;
	background: rgba(255,255,255,.8);
}
.textbox a{
	font-size: 2.5vh;
	text-decoration: none;
	width: 100%;
	margin: 0% 4% 0% 4%;
}
.szoveg1{
	color: white;
	font-size: 2.5vh;
	padding: 8px 20px 8px 20px;
	background: linear-gradient(to right, rgb(61,126,212), rgb(0,35,82));
	box-shadow: 5px 5px 5px black;
	width: 100%;
	min-height: 10vh;
	margin-bottom: 1rem;
	text-align: center;
	vertical-align: middle;
}
.szoveg1:hover{
	background: rgb(0,35,82);
}

.title1{
	color: darkblue;
	font-size: 3.5vh;
	opacity: 0;
	transform: translateY(20px);
	transition: 1s all ease-in-out;
}
.title2{
	color: darkred;
	font-size: 40px;
	opacity: 0;
	transform: translateY(20px);
	transition: 1s all ease-in-out;
}

.title-appear{
	opacity: 1;
	transform: translateY(0px);
}


@media(max-height: 500px){
	.navbar{	
		display: none;
	}
	.textbox{
		width: 100%;
	}
}

.listatitle1{
	max-width: 750px;
	left: 0px;
	font-size: 20px;
	color: white;	
	padding: 8px;
	background-image: linear-gradient(to right, red , darkred);
	border-radius: 10px;
	text-align: center;
	position: relative;
	animation-name: t2;
	animation-duration: 2s;
	margin: 20px;
}
@keyframes t2{
	0% {left: -550px}
	100% {left: 0px;}
}
.listatitle2{
	max-width: 750px;
	left: 0px;
	font-size: 20px;
	color: white;
	font-family: georgia;	
	padding: 8px;
	background-image: linear-gradient(to right, red , darkred);
	border-radius: 10px;
	text-align: center;
	position: relative;
	animation-name: t2;
	animation-duration: 3s;
	margin: 20px;
}
@keyframes t2{
	0% {left: -550px}
	100% {left: 0px;}
}