/* @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@100..900&display=swap');

:root {
	--white: #fafafa;
	--green: #1c4b42; /* title, section-bg */
	--brown: #907f49;
	--grey: #8b8f80; /* light text */
	--darkgrey: #5f5d4a; /* text */
	--lightgrey: #dcdfdc; /* separator */
	--darkgreen: #133b33; /* pub-box, all-button */
	--lightgreen: #17433b; /* pub-inner */
	--lightgreen2: #255d52;
	--green2: #0d2e27; /* pub-button */
	--lightbrown: #a08e55; /* pub-inner */
}

body { font-family: "Roboto Condensed", sans-serif; color: var(--grey); font-size: 16px; background: #fff; color: var(--darkgrey);}
p { margin-bottom: 30px; line-height: 125%; font-size: 16px; color: var(--darkgrey); }
a { color: var(--brown); font-weight: bold; transition: all 0.5s; cursor: pointer; text-decoration: none; }
a:hover, a:focus { color: var(--lightbrown); }
img { max-width: 100%; }

a[target="_blank"] { text-decoration: underline; font-weight: normal; color: var(--darkgrey); padding-left: 40px; display: block; position: relative; }
	a[target="_blank"]:before {
		content: ''; background: url(../img/external_link.svg) no-repeat; width: 45px; height: 30px; display: inline-block; background-size: contain;
		transform: translate(0px, 5px); position: absolute; left: 0;
	}

h1 {
	color: var(--brown); font-weight: 300; height: 300px; display: flex; justify-content: flex-end; align-items: center; border-bottom: 1px solid; margin: 0 0 50px;
}
h2 { font-size: 36px; color: var(--green); margin: 10px 0 60px; font-weight: bold; }
h3 { font-size: 32px; color: var(--green); margin: 10px 0 30px; font-weight: bold; } 
h4 { font-size: 24px; color: var(--green); margin: 10px 0 20px; font-weight: bold; }
h5 { font-size: 20px; color: var(--green); margin: 10px 0 30px; text-align: center; font-weight: 300; }
h6 { font-size: 18px; color: var(--green); margin: 10px 0 20px; font-weight: bold; }

u { display: inline-block; text-decoration: none; }
h2 span, h3 span, h4 span { transform: translateY(20px) scale(500%); filter: blur(10px); }
.animation span { opacity: 0; display: inline-block; animation: slideLeft 0.5s forwards; }
@keyframes slideLeft {
  from { opacity: 0; transform: translateY(20px) scale(500%); filter: blur(10px); } 
  to { opacity: 1; transform: translateY(0%) scale(100%); filter: blur(0); }
}

.hidden { display: none; }

/* HEADER */

.topbar { background: linear-gradient(to top, var(--green2), var(--green)); padding: 20px 0; }

header {}
	.navbar-brand { position: absolute; width: 200px; left: 60px; top: 120px; }
    	.navbar-brand img { width: 100%; }
    .navbar-toggler { max-width: 60px; height: 30px; padding: 0; position: absolute; right: 0; z-index: 9998; top: 20px; color: #fff; transform: scaleX(5); right: 30px; }
    .navbar-toggler:before, .navbar-toggler:after { content: "-"; left: 0; position: absolute; transform: translateY(-6px); }
    .navbar-toggler:after { transform: translateY(6px); }
    	.navbar-toggler img { height: 100%; }
.navbar { z-index: 9999;  width: 80vw; height: 100vh; background-color: rgba(28,75,66,0.85); position: fixed; right: -100vw; backdrop-filter: blur(5px); transition: all 0.5s; }
	.navbar.show { right: 0; }
	.navbar .container {}
		.navbar .row { width: 100%; }
			.navbar a.closenav {
				position: absolute; top: 0; right: 20px; font-family: sans-serif; transform: rotate(45deg); color: var(--white); font-size: 72px; font-weight: 300;
			}
			ul.navbar-nav { flex-direction: row; justify-content: center; gap: 30px; }
				li.nav-item {}
					a.nav-link { color: var(--white); text-align: center; padding: 0; font-weight: 400; text-transform: uppercase; }
						a.nav-link:hover { color: var(--white); opacity: 0.75; }
			nav ul.navbar-nav { flex-direction: column; align-items: flex-start; padding: 100px; }
				nav ul.navbar-nav a.nav-link { color: var(--white); text-transform: none; line-height: 100%; font-size: 36px; }

/* HOME */

section  { padding: 50px 0; }
	section:first-of-type { padding-top: 0; }

#hero {
	background-image: url(../img/header2.jpg); min-height: 480px; background-size: auto 100%; background-repeat: no-repeat; padding: 0 10vw;
	display: flex; justify-content: flex-end; align-items: center; text-align: right; background-position: center -1px;
}
	#hero h2 { font-size: 60px; line-height: 90%; }
	#hero .wp-block-buttons { float: right; }
		#hero .wp-block-buttons .wp-block-button__link {
			background: var(--brown); color: var(--white); font-size: 15px; padding: 12px 24px; font-weight: bold; transition: all 0.5s; border-radius: 100px;
		}
		#hero .wp-block-buttons .wp-block-button__link:hover { background: var(--lightbrown); color: var(--white); }

#kutatocsoport:before { content: ''; width: 100%; height: 20px; background: linear-gradient(to bottom, #fff, #eee); display: block; }
#kutatocsoport { background-image: url(../img/bg.png); background-size: contain; background-repeat: repeat-y; }
	#kutatocsoport .container {
		background-image: url(../img/track3.png); background-size: auto 1110px; background-repeat: no-repeat; background-position: 30px 270px; padding: 0 0 150px;
	}
	#kutatocsoport h3 { text-transform: uppercase; font-size: 36px; margin: 200px 0 0; }
	.researcher { width: 50%; padding: 0 100px; margin-top: -150px; }
		.researcher:nth-of-type(2) { margin-top: -400px; }
		.researcher:nth-of-type(odd) { margin-left: 50%; }
		.researcher img { width: 270px; height: auto; margin: 10px 0 20px; }
		.researcher h4 { color: var(--grey); font-size: 14px; font-weight: 400; letter-spacing: 0; padding: 0 0 20px; margin: 0 0 20px; border-bottom: 2px solid var(--lightgrey); }
			.researcher h4 b { color: var(--green); font-size: 30px; font-weight: 700; }
		.researcher p { color: var(--darkgrey); line-height: 150%; }

#bemutatkozas { background-image: url(../img/bg2.jpg); background-size: cover; padding: 60px 0; position: relative; }
	#bemutatkozas:after {
		content: ''; width: 100%; height: 50%; bottom: 0; position: absolute;
		background-image: url(../img/clouds.png); background-size: contain; background-repeat: no-repeat; background-position: center 200px; }
	#bemutatkozas h2 { text-transform: uppercase; font-size: 36px; line-height: 100%; margin: 0 0 30px; }
	#bemutatkozas p { padding-right: 60%; }
	#bemutatkozas figure { margin: -200px 0 0; }
		#bemutatkozas figure img { width: 90%; }
		#bemutatkozas figure.onlymobile { display: none; }

#kutatasi-eredmenyek {
	background-color: var(--green); background-image: url(../img/bg3.jpg); background-size: contain; background-repeat: no-repeat; background-position: top center;
	padding: 100px 0;
}
#kutatasi-eredmenyek .row { position: relative; }
	#kutatasi-eredmenyek h3 { text-transform: uppercase; font-size: 36px; line-height: 100%; color: var(--white); }
	#kutatasi-eredmenyek a.button {
		right: 0; position: absolute; width: auto;
		background: var(--darkgreen); color: var(--white); font-size: 14px; padding: 12px 24px; font-weight: 400; transition: all 0.5s; border-radius: 100px;
	}
	#kutatasi-eredmenyek a.button:hover { background: var(--brown); }
	#kutatasi-eredmenyek .catlist { display: flex; gap: 10px; }
		#kutatasi-eredmenyek .card { background-color: var(--brown); overflow: hidden; border-radius: 10px; color: var(--white); padding: 20px; border: none; }
			#kutatasi-eredmenyek .card b { font-size: 20px; line-height: 100%; font-weight: 700; margin: 5px 0 0; }
				#kutatasi-eredmenyek .card b span { font-weight: 300; font-size: 14px; display: block; }
			#kutatasi-eredmenyek .card img {
				width: calc(100% + 110px); border-radius: 100%; border: 25px solid var(--lightbrown); margin: -75px 0 10px -75px; max-width: 200%; transition: all 0.5s;
			}
			#kutatasi-eredmenyek .card:after {
				content: ''; position: absolute; width: 36px; height: 36px; bottom: 15px; right: 15px; border-radius: 100%; background-image: url(../img/arrow.svg);
    			background-color: var(--white); background-size: 25%; background-position: center center; background-repeat: no-repeat; transition: all 0.5s;
			}
			#kutatasi-eredmenyek .card:hover, #kutatasi-eredmenyek .card.active { background-color: var(--darkgreen); color: var(--brown); }
				#kutatasi-eredmenyek .card:hover img, #kutatasi-eredmenyek .card.active img { border-color: var(--lightgreen); }
				#kutatasi-eredmenyek .card:hover:after, #kutatasi-eredmenyek .card.active:after {
					background-image: url(../img/arrow2.svg); background-color: var(--green2);
				}
	.research { background: var(--lightgreen2); border-radius: 10px; padding: 20px 30px 0; margin: 10px 10px 0; width: calc(100% - 20px); transition: all 0.5s; }
		.research span { color: var(--brown); font-weight: bold; font-size: 12px; text-transform: uppercase; transition: all 0.5s; }
		.research h4 { color: var(--white); transition: all 0.5s; cursor: pointer; }
		.research > p { color: rgba(255,255,255,0.5); transition: all 0.5s; cursor: pointer; }
		.research .inner { border-left: 3px solid var(--lightgrey); padding: 10px 20px 0; margin: 0 0 30px; }
	.research:hover { background-color: var(--darkgreen); }
	.research.showit { background: var(--white); position: relative; }
		.research.showit span { color: var(--grey); }
		.research.showit h4 { color: var(--green); }
		.research.showit > p { display: none; }
		.research.showit .inner { display: block; }
			.research.showit .inner span {
				position: absolute; top: 10px; right: 30px; font-size: 48px; transform: rotate(45deg); font-family: Arial; font-weight: lighter; cursor: pointer;
			}
			.research.showit .inner h4 { font-size: 21px; color: var(--brown); }
			.research.showit .inner p { font-size: 14px; }
		.research.showit .wp-block-button .wp-block-button__link {
			background: var(--brown); color: var(--white); font-size: 15px; padding: 12px 24px; font-weight: bold; transition: all 0.5s; border-radius: 100px; text-decoration: none;
		}
		.research.showit .wp-block-button .wp-block-button__link:hover { background: var(--green); }

#kapcsolat {}
	#kapcsolat .wp-block-columns { display: flex; }
		#kapcsolat .wp-block-column:nth-of-type(1) { width: 60%; }
			#kapcsolat h3 { margin: 0 0 20px; font-size: 30px; }
			#kapcsolat p { font-size: 15px; }
	#kapcsolat form {}
		#kapcsolat input, #kapcsolat textarea {
			background: #f2f2f2; border: none; border-radius: 10px; width: 90%; padding: 20px; color: #000; margin: 5px 0; outline: none; transition: all 0.5s;
		}
		#kapcsolat input:focus, #kapcsolat textarea:focus { background: var(--lightgrey); font-weight: 400; }
		#kapcsolat input[type="submit"] {
			background: var(--green); color: var(--white); display: table; width: auto; padding: 20px 40px; font-weight: bold; transition: all 0.5s;
		}
		#kapcsolat input[type="submit"]:hover { background: var(--brown); }
		.wpcf7 form.sent .wpcf7-response-output {
			border-color: #46b450; border: none; background: var(--lightbrown); color: var(--white); padding: 20px; border-radius: 10px; width: 90%;
		}
		.wpcf7-not-valid-tip { text-align: right; width: 90%; padding: 10px 0 0; }

/* FOOTER */

footer { background: linear-gradient(to top, var(--darkgrey), var(--grey)); font-size: 14px; text-align: center; padding: 30px 0; }
	footer ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 30px; }
		footer ul li a { color: var(--lightgrey); }	


/*********************/
/* RESPONSIVE LAYOUT */
/*********************/


@media screen and (max-width: 1020px) {

}

@media screen and (max-width: 767px) {

	body { font-size: 16px; }
	h1 { justify-content: center; align-items: flex-end; border-bottom: 1px solid; padding: 0 0 30px; }
	h2 { font-size: 21px; margin: 10px 0 30px; }
	h3 { font-size: 18px; margin-top: 0; }
	h4 { font-size: 18px; }
	.navbar-brand { top: 60px; left: 30px; }
	header ul.navbar-nav { display: none; }
		.navbar a.closenav { font-size: 48px; }
		nav ul.navbar-nav { padding: 20px; }
		nav ul.navbar-nav a.nav-link { font-size: 24px; text-align: left; }
	.navbar-toggler { top: 9px; }
	#hero { justify-content: center; align-items: flex-end; text-align: center; height: 80vh; background-size: 400%; background-position: top center; padding: 0; }
		#hero container { padding: 0; }
		#hero .wp-block-buttons { float: none; margin: 0 auto; display: table; }
	section { padding: 0; }
		section .container { padding: 30px !important; }
	#kutatocsoport .container { background: none; }
		#kutatocsoport h3 { font-size: 30px; margin: 0; text-align: center; }
		.researcher { width: 100%; padding: 0; margin: 0 !important; text-align: center; }
	#bemutatkozas { background-size: auto 100%; padding: 0; background-position: center center; }
		#bemutatkozas p { padding-right: 0; }
		#bemutatkozas figure { margin: 0; }
		#bemutatkozas:after { display: none; }
		#bemutatkozas figure.onlymobile { display: block; }
		#bemutatkozas figure.onlydesktop { display: none; }
		#bemutatkozas figure img { width: 120%; max-width: 120%; margin-left: -10%; }
	#kutatasi-eredmenyek { padding: 0; }
		#kutatasi-eredmenyek a.button { position: relative; margin: 0 10px 30px; }
		#kutatasi-eredmenyek .catlist { flex-wrap: wrap; }
		#kutatasi-eredmenyek .card { width: calc(50% - 5px); }
	#kapcsolat .wp-block-columns { flex-direction: column; }
		#kapcsolat h3 { font-size: 27px; }
		#kapcsolat .wp-block-column:nth-of-type(1) { width: 100%; }
	footer { font-size: 15px; }

}

@media screen and (min-width: 767px) {

}

@media print {
}