@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
*{
	margin: 0;
	padding: 0;
	box-size: border-box;
}

.container{
	justify-content: center;
	align-items: center;
}


.titleslide{
	font-family: 'EB Garamond', serif;
	text-align: center;
	font-size: 3.5vh;
	padding-top: 20px;
	color: black;
	font-weight: bold;
}
.szoveg{
	text-align: center;
	font-family: 'EB Garamond', serif;
	color: black;
	font-size: 2.5vh;
}
.hirszam{
	font-size: 5vh;
	color: white;
	text-align: center;
	
}
.hircim{
	margin: 5px;
	font-size: 2,5vh;
	color: rgb(20,17,56);
	text-align: left;
	text-weight: bold;
	
}
.hircim:hover{
	font-size: 3,5vh;
	font-weight: bold;
	color: red;
}
.bemutattitle{
	margin-top: 1vh;
	margin-left: 3vw;
	font-size: 3.5vh;
	font-weight: bold;
	color: darkblue;
	transform: translateY(20px);
	transition: 2s all ease-in-out;
	opacity: 0;
	font-family: 'EB Garamond', serif;
	font-weight: bold;
}
.bemutattext{
	margin-top: 1vh;
	margin-left: 3vw;
	font-size: 2.5vh;
	color: black;
	transform: translateY(20px);
	transition: 3s all ease-in-out;
	opacity: 0;
	font-family: 'EB Garamond', serif;
}
.bemutattext1{
	margin-top: 0.2vh;
	margin-left: 3vw;
	font-size: 2.5vh;
	color: black;
	transform: translateY(20px);
	transition: 3s all ease-in-out;
	opacity: 0;
	font-family: 'EB Garamond', serif;
}
.bemutattext2{
	margin-top: 0.2vh;
	margin-left: 3vw;
	font-size: 2.5vh;
	color: black;
	transform: translateY(20px);
	transition: 3s all ease-in-out;
	opacity: 0;
	font-family: 'EB Garamond', serif;
}
.bemutattext3{
	margin-top: 0.2vh;
	margin-left: 3vw;
	font-size: 2.5vh;
	color: black;
	transform: translateY(20px);
	transition: 3s all ease-in-out;
	opacity: 0;
	font-family: 'EB Garamond', serif;
}
.bemutattext4{
	margin-top: 0.2vh;
	margin-left: 3vw;
	font-size: 2.5vh;
	color: black;
	transform: translateY(20px);
	transition: 3s all ease-in-out;
	opacity: 0;
	font-family: 'EB Garamond', serif;
	margin-bottom: 20px;
}


.bemutat-appear{
	opacity: 1;
	transform: translateY(0px);
}
.bemutatimage{
	margin-left: 30%; 
	margin-top: 5%;
	margin-bottom: 5%;
	min-width: 280px;
	min-height: 280px;
	background-image: url('../img/bemutatimg.jpg'); 
	background-size: contain; 
	background-repeat: no-repeat;"
}
@media(max-width: 500px){
	.bemutatimage{
		min-width: 170px;
		min-height: 170px;
		max-width: 170px; 
		max-height: 170px; 
		margin-bottom: 10px;
	}
}
.title{
	text-align: center;
	font-size: 2.3vh;
	color: white;
	opacity: 0;
	transform: translateY(20px);
	transition: 2s all ease-in-out;
	height: 10vh;
}
.titlea{
	text-align: center;
	font-size: 2.3vh;
	color: white;
	opacity: 0;
	transform: translateY(20px);
	transition: 2s all ease-in-out;
	height: 10vh;
}
.titleb{
	text-align: center;
	font-size: 2.3vh;
	color: white;
	opacity: 0;
	transform: translateY(20px);
	transition: 2s all ease-in-out;
	height: 10vh;
}
.title-appear{
	opacity: 1;
	transform: translateY(0px);
}








.emel{
		margin-bottom: 5rem;
	}
@media(max-width: 800px){
	.emel{
		margin-bottom: 30vh;
	}
}




.row h3{
	margin-top: 10px;
	text-align: center;
	font-size: 1.1rem;
	padding: 1rem 0rem;
	font-weight: lighter;
	transition: all 0.75s ease-out;
	color: white;
	height: 10vh;
}
.gomb{
	text-align: center;
	background: rgb(231,250,105); 
	text-decoration: none; 
	color: black; 
	font-size: 15px; 
	margin-top: 5px; 
	padding: 9px 10px 5px 10px; 
	border-radius: 10px;
	width: 13rem;
	margin-bottom: 10px;
}
.gomb:hover{
	background: white; 
	color: darkblue; 
}

.gomb2{
	text-align: center;
	background: rgb(30,30,240); 
	text-decoration: none; 
	color: white; 
	font-size: 3vh; 
	margin-top: 4vh; 
	padding: 9px 10px 5px 10px; 
	border-radius: 10px;
	width: 13rem;
	margin-bottom: 10px;
}
.gomb2:hover{
	background: white; 
	color: darkblue; 
}

.flip-card {
  
  width: 380px;
  height: 180px;
  padding: 10px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 2.1s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  color: black;
}

/* Style the back side */
.flip-card-back {
  background: rgba(255,255,255,.8);
  transform: rotateY(180deg);
  border-radius: 15px;
}
.cardimg{
	max-width: 280px;
	max-height: 140px;
}
@media(max-width: 500px){
	.cardimg{
		width: 140px;
		height: 140px;
	}
}


.col{
	text-align: center;
}
.row p{
	margin: 5px;
	font-size: 19px;
	color: black;
	text-align: center;
	font-weight: bold;
}
.c1{
	font-family: 'EB Garamond', serif;
	margin: 5px;
	font-size: 20px;
	color: black;
	text-align: center;
	font-weight: bold;
}
.c2{
	font-family: 'EB Garamond', serif;
	margin: 5px;
	font-size: 20px;
	color: rgb(8,3,64);
	text-align: center;
	font-weight: bold;
}
.c3{
	font-family: 'EB Garamond', serif;
	margin: 5px;
	font-size: 20px;
	color: rgb(64,3,4);
	text-align: center;
	font-weight: bold;
}
@media(max-width: 500px){
	.c3{
		font-size: 10px;
	}
}
.c4{
	font-family: 'EB Garamond', serif;
	margin: 5px;
	font-size: 20px;
	color: rgb(31,30,36);
	text-align: center;
	font-weight: bold;
}
@media(max-width: 1920px){
	.c1{
		font-size: 2.2vh;
	}
	.c2{
		font-size: 2.2vh;
	}
	.c3{
		font-size: 2.2vh;
	}
	.c4{
		font-size: 2.2vh;
	}
}




.next{
	cursor: pointer;
}

.links{
	owerflow: hidden;
	background:rgba(28,109,250,0.8);	
	position: absolute;
	left: 160%;
	width: 20%;
	top: 10%;
	height: 75%;
	display: flex;	
	justify-content: center;
	opacity: 0;
	transform: perspective(1200px) rotateY(20deg) translateZ(410px) scale(0.7);
	margin-right: 20px;
}
ul{
	list-style: none;
}
.links a{
	color: white;
	text-decoration: none;
	padding: 0.7rem 0;
	display: inline-block;
	font-size: 1.2rem;
	margin-top: 5px;
	margin-bottom: 5px;
}
.mainbox.active .links{
	animation: menu 0.6s forwards ease 0.3s;
}
@keyframes menu{
	0%{opacity: 0; left: 160%;}
	100%{opacity: 1; left: 60%;}
}


/* a logok a eszcheader.php-ban vannak*/
@media(max-width: 1400px){

}
.menuitem{
	font-size: 1.3rem;
}
@media(max-width: 1400px){
	.menuitem{
		font-size: 1rem;
	}
}



.cookie-para a{
	color:#DE2135;
}
.cookie-bar{ position: fixed; bottom:0px; padding:15px; width: 100%; display: none; z-index:5000000; background-color:#252B33; max-height: 40vh;}
.cookie-para { text-align:left; padding-top:5px; color: white; font-size:15px; font-weight: normal; display: inline-block;padding-bottom: 5px; width:100%;}
.cookie-space { padding-bottom: 60px; }
.cookie-btn{ font-size:14px; color: #ffffff !important; background:#DE2135; padding: 10px 18px; border-radius:20px;display: inline-block; text-decoration:unset; margin: 10px; margin-bottom: 20px;}


@media(max-height: 500px){
	
	.social{
		display: none;
	}
	.container{
		margin-bottom: 20vh;
		margin-top: 230px;
	}
	.emel{
		margin-bottom: 60vh;
	}

}