
* {
	box-sizing: border-box;
}

.kk-container {
	padding: 0px 3%;
}

@media screen and (min-width: 960px) {
	.kk-container {padding: 0px 7%;}
}

html {
	
	/*open sans 300-800  work sans 100-900*/
	
	--cim-1: 700 4rem "Marcellus", serif;
	--cim-2: 700 3rem "Marcellus", serif;
	--cim-3: 700 2.5rem "Marcellus", serif;
	--cim-4: 400 2.2rem "Marcellus", serif;
	--cim-5: 400 1.8rem "Marcellus", serif;
	--cim-6: 400 1.6rem "Marcellus", serif;
	
	--szoveg-0: 300 0.8rem/1.25rem "DM Sans", sans-serif;
	--szoveg-1: 300 0.9rem/1.4rem "DM Sans", sans-serif;
	--szoveg-2: 300 1rem/1.6rem "DM Sans", sans-serif;
	--szoveg-3: 300 1.1rem/1.77rem "DM Sans", sans-serif;
	--szoveg-4: 300 1.2rem/1.92rem "DM Sans", sans-serif;
	--szoveg-5: 300 1.35rem/2.2rem "DM Sans", sans-serif;
	
	--szurke-nv: #F5F5F5;	
	--szurke-v: #E0E0E0;
	--szurke: #C0C0C0;
	--szurke-s: #999999;
	
	--sarga: #FCBF49;	
	--narancs: #F77F00;	
	--piros: #D62828;	
	--barna: #352208;	
	--zold: #436436;	
	--kek: #006992;	
	--lila: #57467B;
	--drap: #EAE2B7;
	
	--kek-s: #003049;
	
}

body {
	background-color: var(--szurke-nv);
}

/* Fejléc -----------------------------------------------------------*/

.fo-fejlec {
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: var(--zold);
	padding: 15px 3vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 50;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

@media screen and (max-width: 960px) {
	.fo-fejlec {display: none;}
}

.fo-fejlec.lent {
	padding: 10px 3vw;
}

.fo-fejlec .fooldal-link {
	text-decoration: none;
}

.fo-fejlec .nev-tarto {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.fo-fejlec .nev-tarto .logo img {
	width: 35px;
	width: calc(30px + 1vw);
	filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(319deg) brightness(105%) contrast(101%);
	margin-right: 10px;
}

.fo-fejlec .nev-tarto .nev {
	font: var(--cim-2);
	color: #FFF;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.fo-fejlec.lent .nev-tarto .nev {
	font: var(--cim-4);
}

.fo-fejlec .menu-tarto {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.fo-fejlec .menu-tarto hr {
	display: none;
}

.fo-fejlec .menu-tarto a {
	color: #FFF;
	text-decoration: none;
}

.fo-fejlec .menu-tarto .menupont {
	margin-left: 3vw;
	font: var(--szoveg-2);
	text-transform: uppercase;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.fo-fejlec .menu-tarto .menupont:hover {
	color: var(--szurke);
}

/* Nyitó kép --------------------------------------------------------*/

.nyito-lap {
	position: relative;
	height: 47vw;
}

@media screen and (max-width: 960px) {
	.nyito-lap {display: none;}
}

/* Mobil menü ---------------------------------------------------------*/

.mobil-menu {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 80px;
	padding: 0px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	-webkit-box-shadow: 0px 0px 5px 3px #444;
	-moz-box-shadow: 0px 0px 5px 3px #444;
	box-shadow: 0px 0px 5px 3px #444;
	background-color: var(--zold);
	z-index: 80;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.mobil-menu.lent {
	height: 65px;
	background-color: rgba(0,0,0,0.7);
}

@media screen and (min-width: 960px) {
	.mobil-menu {display: none;}
}

.mobil-menu .fooldal-link {
	text-decoration: none;
}

.mobil-menu .nev-tarto {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.mobil-menu .nev-tarto .logo img {
	width: 35px;
	width: calc(30px + 1vw);
	filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(319deg) brightness(105%) contrast(101%);
	margin-right: 10px;
}

.mobil-menu .nev-tarto .nev {
	font: var(--cim-4);
	color: #FFF;
}

.mobil-menu .hamburger-tarto {
	width: 50px;
}

.mobil-menu .hamburger-tarto #hamburger-1 {
	cursor: pointer;
}

.mobil-menu .hamburger-tarto #hamburger-1 svg {
	height: 40px;
	width: 40px;
}

.mobil-menu .hamburger-tarto #hamburger-1 svg path {
	stroke: #FFF;
	stroke-width: 10px;
	stroke-linecap: round;
	fill: transparent;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

#oldal-menu-1 {
	width: 270px;
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	padding: 10px 20px;
	background-color: var(--kek);
	border-left: 1px solid #BBB;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	z-index: 85;
}

.rejtett-1 {
	margin-right: -310px;
}

.lathato-1 {
	margin-right: 0px;
}

#oldal-menu-1 .bezar-1 {
	text-align: right;
	color: #FFF;
	cursor: pointer;
	display: block;
	margin-bottom: 20px;
}

#oldal-menu-1 a .menupont {
	color: #FFF;
	font: var(--szoveg-1);
}

#oldal-menu-1 a:hover {
	text-decoration: none;
}

#oldal-menu-1 .menupont {
	padding: 15px 0px;
	text-transform: uppercase;
}

#oldal-menu-1 hr {
	margin: 0px;
}

/* Mobil főkép  ---------------------------------*/

.mobil-fokep {
	position: relative;
	height: 70vw;
	//margin-top: 80px;
}

@media screen and (min-width: 960px) {
	.mobil-fokep {display: none;}
}


/* Lábléc 1 ------------------------------------------------------------------*/

.lablec-1 {
	background-color: var(--kek-s);
	padding-top: 100px;
	padding-top: calc(6vw + 10px);
	padding-bottom: 30px;
	padding-bottom: calc(1vw + 10px);
}

.lablec-1 .uk-container>div {
	margin-left: 0px;
}

.lablec-1 h3 {
	color: #FFF;
	font: var(--cim-5);
}

.lablec-1 p {
	color: var(--szurke-nv);
	font: var(--szoveg-2);
}

.lablec-1 .ikonok {
	cursor: pointer;
}

.lablec-1 .ikonok a {
	color: var(--sarga); 
	margin-right: 10px;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.lablec-1 .ikonok a:hover {
	color: var(--narancs); 
}

.lablec-1 .alsosor {
	padding-left: 20px;
	margin-top: 100px;
	margin-top: calc(5vw + 20px);
}

.lablec-1 .alsosor a p {
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.lablec-1 .alsosor p {
	margin: 0px;
	font: var(--szoveg-0);
}

.lablec-1 .alsosor a:hover {
	text-decoration: none;
	color: var(--szurke);
}

.lablec-1 .alsosor a:hover p {
	color: var(--szurke-nv);
}

.lablec-1 .alsosor>div {
	//margin: 0px 15px;
	padding: 0px 15px;
	height: auto;
	//outline: 1px dotted yellow;
}

.lablec-1 .alsosor .border {
	border-right: 1px solid var(--szurke-v);
}

/* Legördülő elem ---------------------------------------------------------*/

.leg-tarto {
	background-color: #FFF;
}

.leg-fej {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: center;
	padding: 7px 0px;
	cursor: pointer;
}

.leg-fej .szoveg {
	font: var(--cim-5);
	padding-left: 15px;
}

.leg-fej .nyil {
	transition: all .3s;
}

.leg-fej.lent .nyil {
	transform: rotate(180deg);
}

.leg-test {
	font: var(--szoveg-3);
	display: none;
	border-top: 5px solid var(--szurke-nv);
}

/* Saját kép ----------------------------------------------------------*/

.sajat>img {
	border: 5px solid rgb(42, 75, 42);
}

/* Képek tartója ---------------------------------------------------------*/

.kep-kep-tarto {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 20px;
	padding-bottom: 40px;
}

.kep-kep-tarto .kep {
	width: 47%;
}

@media screen and (max-width: 768px) {
	.kep-kep-tarto .kep {width: 100%;}
}

/* Főlap -----------------------------------------------------------------*/

.folap {
	padding-top: 150px;
	padding-bottom: 100px;
	background-color: var(--szurke-nv);
	min-height: 100vh;
}

.folap ul {
	margin: 10px 0px 10px 15px;
}

.folap ul li {
	padding-bottom: 3px;
}

.folap ul li a {
	font: var(--szoveg-5);
	color: var(--kek-s);
	text-decoration: none;
	transition: all .3s;
}

.folap ul li a:hover {
	color: var(--kek);
	text-decoration: none;
}

/* Cím  ----------------------------------------------------------------*/

.cim {
	background-color: var(--szurke-nv);
	padding-top: 120px;
	padding-bottom: 70px;
}

.cim h1 {
	font: var(--cim-2);
	margin: 0px;
}

.cim.nemzetseg h1 {
	text-transform: uppercase;
	color: var(--kek);
}

/* Család ---------------------------------------------------------------*/

.csaladcim {
	padding-top: 150px;
	text-align: center;
}

.csaladcim h1 {
	font: var(--cim-2);
}

.csalad {
	padding-top: 30px;
	padding-bottom: 80px;
	min-height: 80vh;
}

.csalad ul {
	margin: 10px 0px 10px 15px;
}

.csalad ul li {
	padding-bottom: 15px;
}

.csalad ul li a {
	font: var(--szoveg-5);
	color: var(--kek-s);
	text-decoration: none;
	transition: all .3s;
}

.csalad ul li a:hover {
	color: var(--kek);
	text-decoration: none;
}

.csalad .szoveg-tarto {
	padding: 30px 0px 15px 0px;
	background-color: var(--szurke-nv);
}

.csalad .szoveg-tarto a {
	font: var(--cim-6);
	color: var(--kek-s);
	text-decoration: none;
}

.csalad .szoveg-tarto a:hover {
	color: var(--kek);
}

.csalad .kep-kep-tarto {
	background-color: var(--szurke-nv);
}


/* Határozó -------------------------------------------------------------*/

.hatarozo {
	background-color: var(--szurke-nv);
	padding-bottom: 50px;
}

.hatarozo .leg-fej {
	border-bottom: 5px solid var(--szurke-nv);
}

.hatarozo .leg-fej .szoveg p {
	margin: 0px;
	font: var(--szoveg-4);
	color: #000;
}

.hatarozo .leg-fej .kep img {
	max-width: 50vw;
	max-height: 70vh;
}

.hatarozo .leg-test {
	border-bottom: 15px solid var(--szurke-nv);
}

.hatarozo .leg-test a {
	display: block;
	padding: 10px 0px 10px 15px;
	text-decoration: none;
	font: var(--szoveg-5);
	font-weight: 600;
	color: var(--zold);
}

.hatarozo .leg-fej.lent {
	background-color: rgb(181, 222, 181);
}

@media screen and (max-width: 768px) {
	.hatarozo .leg-fej {flex-wrap: wrap;}
	.hatarozo .leg-fej .szoveg {width: 100%;}
	.hatarozo .leg-fej .kep img {margin-top: 15px; width: 100%; max-width: 100vw; max-height: 300vh;}
}

/* Faj  ------------------------------------------------------------------*/

.fajnev .csik {
	margin-top: 15px;
	width: 100%
}

.fajnev.kerti .csik {
	border-bottom:6px solid #5eadcd;
}

.fajnev.gyakori .csik {
	border-bottom:6px solid #e23434;
}

.fajnev.szorv .csik {
	border-bottom:6px solid #ec8540;
}

.fajnev.ritka .csik {
	border-bottom:6px solid #ebcd4b;
}

.fajnev.koz .csik {
	border-bottom:6px solid #ad43bb;
}

.faj {
	background-color: var(--szurke-nv);
}

.faj .szoveg-kep-tarto {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 20px;
	margin-bottom: 40px;
}

.faj .szoveg-kep-tarto .szoveg {
	width: 35%;
	font: var(--szoveg-4);
	color: #000;
}

.faj .szoveg-kep-tarto .kep {
	width: 60%;
}

.faj .szoveg-kep-tarto img {
	width: 100%;
}

@media screen and (max-width: 768px) {
	.faj .szoveg-kep-tarto {flex-wrap: wrap;}
	.faj .szoveg-kep-tarto .szoveg {width: 100%;}
	.faj .szoveg-kep-tarto .kep {width: 100%;}
}

.faj .kep-kep-tarto {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 20px;
	margin-bottom: 40px;
}

.faj .kep-kep-tarto .kep {
	width: 47%;
}

@media screen and (max-width: 768px) {
	.faj .kep-kep-tarto .kep {width: 100%;}
}












