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

/* Global */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

:root {
--szin_sotetkek: #024;
--szin_kek: #145a8d;
--szin_szurke: #878787;
--szin_ezust: #a9a9a9;
--szin_sotetpiros: #da251c;
--szin_piros: red;
--szin_hatter: #e9e6e1;
}

body {font-family: 'Oswald', sans-serif; color: #444444;  margin: 0;
	background: url("../../../fomenu/assets/hatter/hatter1.jpg") no-repeat center center fixed;
	background-size: cover;https://realista.ingatlan.com/kereses/lakas

/*
	background: radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
	background-color: #422727; background-size: 16px 16px; */}

.header { background: var(--szin_sotetkek); color: yellow; text-align:center; }
.header h2 { margin-top: 0px; font-size: 1.3rem; font-weight: 500;}
.header a {color: yellow; font-size: 1.3rem; font-weight: 500; padding: 0 7px; text-decoration: none; }
#logo{margin-bottom: -15px; width: 60px;}
#logo:hover{ width: 70px;}

/* Page content */
.content { width: 100%; }

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky { position: fixed; top: 0; width: 100% }

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content { padding-top: 0px; }

/* Cards */
.posts-box { max-width: 1024px; margin: 0 auto; padding: 40px 10px; text-align: center; list-style: none; }
.posts-box li { display: inline-block; width: 320px; max-width: 100%; padding: 10px; vertical-align: top; }

.card { text-align: left; border-radius: 5px 5px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.22); }
.card img { display: block; width: 100%; height: 210px; object-fit: cover; object-position: center center; border-radius: 5px 5px 0 0; }
.card div { padding: 10px;  }
.card .elolap { height: 150px; }
.card div h3 { margin: 5px 0; color: var(--szin_sotetkek); text-align: center; font-size: 1.1em; line-height: 1.3;}
.card div p { margin: 5px 0; font-size: 1em; white-space: pre-wrap; text-align: justify; color: var(--szin_sotetkek)}

.card_footer { background: var(--szin_sotetkek); }

.button { color: white; text-decoration: none; }
.button:hover { opacity: .7; }

/* Page */
.modal,
.modal-box { z-index: 900; }

.modal { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: var(--szin_hatter); overflow-y: auto; }

.modal-box { position: relative; width: 90%; max-width: 920px; margin: 20px auto; background: white; animation-name: modalbox; animation-duration: .3s; animation-timing-function: ease-out;
	box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.22); border-radius: 5px; }

.modal-header img { width: 100%; }

.modal-body { padding: 2px 5%; }
.modal-body h2 { margin-bottom: 2px; letter-spacing: .06em; font-size: 1.2em;}
.modal-body p { font-size: .9em; line-height: 1.2em; color: black; }

.inner-text {white-space: pre-wrap; text-align: justify; font-size: .9em;}
.inner-title { margin: 0; }

@-webkit-keyframes modalbox {
	0% { top: -250px; opacity: 0; }
	100% { top: 0; opacity: 1; }
}

@keyframes modalbox {
	0% {top: -250px; opacity: 0;}
	100% {top: 0; opacity: 1;}
}

button {min-width: 120px; top: 50%; left: 50%; padding: 16px 32px; margin: 24px 8px 0 0; background: transparent; text-decoration: none;
	border: 1px solid var(--szin_piros); outline: none; color: var(--szin_piros); cursor: pointer; border-radius: 5px;}
	@media (max-width: 620px) {
		button {width: 100%; min-width: auto;}
	}

.disabled {opacity: .4; cursor: auto;}

footer{padding: 20px 0; text-align: center; color: white; font-size: 12pt; font-weight: 300;}

.bonyhad-kozepre {display: flex; justify-content: center; padding: 10px; flex-wrap: wrap;}

/* Bonyhád cimke */
.bonyhad-cimke {background: white; color: var(--szin_sotetkek); font-size: 1rem; font-weight: 600; border-radius: 4px; margin: 0.2rem; 
	transition: all 0.5s ease; letter-spacing: 2px; text-align: center; padding: 8px; border: 1px dotted black;}
.bonyhad-cimke:hover {cursor:pointer; background: var(--szin_sotetkek); color: white; transform: scale(1.1);}
.bonyhad-cimke a {color: inherit; text-decoration: none;}

/* Bonyhád box */
.bonyhad-box {background: white; text-align: left; display: flex; flex-direction: column; width: 16rem; border: 1px dotted black; padding: 5px; border-radius: 5px; margin: 5px;}
.bonyhad-focim {color: white; background: var(--szin_sotetkek); font-size: 1.3rem; text-align: center; text-transform: uppercase;}
.bonyhad-menu {align-items: flex-start; display: flex; flex-direction: column;}	
.bonyhad-menupont {list-style-type: none; color: var(--szin_sotetkek);}
.bonyhad-menupont:hover {background: var(--szin_kek); color: white; width: 100%;}
.bonyhad-menupont .bonyhad-menulink {font-size: 1.1rem; padding-bottom: 0.25rem; padding-left: 1.25rem; padding-top: 0.25rem; position: relative;}	
.bonyhad-menulink {color: inherit; display: block; padding: 0.5rem 1rem; text-decoration: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;}
.bonyhad-menu .bonyhad-menupont .bonyhad-menulink:before {color: inherit; content: "\276F"; display: inline-block; font-size: .9rem; font-weight: 600; left: 0; position: absolute; top: 0; transform: translateY(5px);}