@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;
--szin_arnyek: #d5dbdb;
}
.kozepre {text-align: center; margin: 0 auto;}

body{font-family: 'Oswald', sans-serif; color: black; background: var(szin_oldalhatter); -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; margin: 0;}

/*mobil*/
@media (max-width: 767px) {
	body{ 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;}
}

.content {z-index: 99; position: relative; width: 100%; margin: 0 auto;}
@media (width >= 767px) {
	.content {background: rgba(0, 0, 0, 0.3); width: 80%;}
}

/* Mozgó háttér */
#animated-bg {min-height: 92vh;}
@media (width >= 768px) {
	#animated-bg {background-size: cover; background-position: top left; animation: mymove 80s infinite;}
}
@keyframes mymove {
	0% {background-position: top left;}
	50% {background-position: right bottom;}
	99% {background-position: top left;}
}

.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-top: 5px; height: 120px;}
@media (max-width: 767px) { #logo{width: 90px; height: auto;}}
header{margin-bottom: 5px;}
.header-top{position: relative; z-index: 99;}

/* 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 {margin: 0 auto; text-align: center; list-style: none;}
.posts-box li {display: inline-block; width: 320px; max-width: 100%; padding: 10px; vertical-align: top;}
.posts-box p {color: white;}

.card {text-align: left; border-radius: 5px 5px; background: white; box-shadow: 5px 5px 0 var(--szin_arnyek); transition: .5s; border: 1px solid black;}
.card:hover{transform: scale(1.1); transition: transform .5s ease-in-out;}

/*.card img {display: block; width: 100%; height: 180px; object-fit: cover; object-position: center center; border-radius: 5px 5px 0 0;}*/
.card div {padding: 5px;}
.card div h3 {margin: 5px 0; color: var(--szin_sotetkek); height: 30px;}
.card div p {margin: 4px 0; font-size: 0.9em; white-space: pre-wrap; text-align: justify; height: 90px; color: var(--szin_sotetkek); text-align: center;}

.card_content {height: 150px; overflow: hidden;}
.card_footer {background: var(--szin_sotetkek);}

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

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 only screen and (max-width: 620px) {	button {width: 100%; min-width: auto;}}

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

/* Kártya rendszernél nyíló ablak */
.alablak {display: none; position: fixed; width: 100%; height: 100vh; left: 0; top: 0; overflow: auto; background: url(../images/hatter.jpg); background-repeat: no-repeat; background-size: cover; background-position: center top;}
@media (width <= 768px) {
	.alablak {display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; overflow: auto;
	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;}
}

.alablak_head {background: var(--szin_sotetkek); border-radius: 5px 5px 0 0; padding: 5px; width: 100%; margin: 0 auto; color: yellow; height: 55px; margin-bottom: 10px; border-bottom: 1px solid yellow;}
.alablak_content {background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.22); overflow: hidden; text-align: justify; padding: 10px; width: 92%; margin: 0 auto; border-radius: 5px;}
.alablak_content img {width: 100%; height: 300px; border-radius: 5px;}
@media (width >= 767px) { .alablak_content {width: 60%;}}
.alablak_footer {background: var(--szin_sotetkek); border-radius: 0 0 5px 5px; padding: 5px 0; width: 92%; margin: 30px auto 20px auto; text-align: center; border: 1px solid yellow;}

/* Kerek gomb */
.kerekgomb {border-radius: 50%; border: 2px solid white; cursor: pointer; color: white; font-size: 1em; padding: 10px 15px; text-decoration: none; margin: 0; min-width: auto;}
.kerekgomb:hover {background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%); color: black;}

@media only screen and (max-width: 767px) {
	.posts-box {text-align: unset;}
	.alablak_head, .alablak_content, .alablak_footer {width: 98%;}
	.kerekgomb {width: 50px;}
}

.kiemel {font-weight: bold; font-size: 110%; color: var(--szin_sotetkek);}

footer{padding: 0; text-align: center; color: white; font-weight: 300; background-color: var(--szin_kek);}

.row {width: 100%; padding: 10px; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; flex-direction: column;}

.cimkebox {width: 96%; margin-top: 10px;}
@media (width >= 767px) {.cimkebox {width: 60%;}}
	
.media-body {-webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;}
.d-flex {display: flex!important;}
.float-right {float: right!important;}
.font-large-2 {font-size: 3rem!important;}
.text-left {text-align: left!important; font-size: 0.9em;}

.primary {color: #00B5B8!important;}
.danger {color: #FF7588!important;}
.success {color: #16D39A!important;}
.warning {color: #FFA87D!important;}

.bg-primary {background-color: #00B5B8!important;}
.bg-danger {background-color: #FF7588!important;}
.bg-success {background-color: #16D39A!important;}
.bg-warning {background-color: #FFA87D!important;}

.progress-bar {display: flex; flex-direction: column; justify-content: center; color: #FFF; text-align: center; background-color: #00B5B8; transition: width .6s ease; margin: -5px 0 0 -5px; border-radius: 0 0 0 0.25rem;}
.progress {display: flex; height: 1rem; font-size: .75rem; background-color: #EEE; border-radius: 0.25rem;}

.mt-1, .my-1 {margin-top: 1rem!important;}
.mb-0, .my-0 {margin-bottom: 0!important;}

/* Kép betöltés */
.kepmutat {width: 100%; border: 1px solid black; min-height: 180px; padding: 5px 5px 0px 5px; position: relative; overflow: auto;}
.kepmutat img {object-fit: cover; object-position: center center; width: 66%; border: 1px solid black;}