/* Fonts */

@font-face {
	font-family: NotoSans;
	src: url('../fonts/NotoSans-Regular.ttf');
	font-weight: normal;
	/* 400 */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: NotoSans;
	src: url('../fonts/NotoSans-Medium.ttf');
	font-weight: medium;
	/* 500 */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: NotoSans;
	src: url('../fonts/NotoSans-Bold.ttf');
	font-weight: bold;
	/* 700 */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: NotoSans;
	src: url('../fonts/NotoSans-Black.ttf');
	font-weight: 900;
	/* black */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: FontAwesome;
	src: url('../fonts/fontello.ttf');
	font-display: swap;
}

@font-face {
	font-family: ForkAwesome;
	src: url('../fonts/forkawesome-webfont.woff');
	font-display: swap;
}
/************** RESET ****************/
:root {
	--full: 100%;
	--extra-wide: 1400px;
	--wide: 1000px;
	--narrow: 800px;
	--tall: 300px;

	/* colors */
	--primary: #006B52;
	--primary_bg: white;
	--primary-extra-light: #E8F1F0;
	--primary-light-op: hsla(166, 98%, 35%, 0.171);
	--primary-dark: #015D48;
	--warning: #ee3434;
	--warning_s: white;
	--success: #34ee4d;
	--success_s: white; 

	--light-gray: #eee;
	--middle-gray: #ccc;
	--light-middle-gray: #eaeaea;
	--dark-gray: #1e1e1e;
	--extra-light: white;
	--shadow: rgba(100,100,100,0.2);


	--spacer: 5rem;
	--small-spacer: 1rem;
}

* {
	font-family: NotoSans, sans-serif;
	font-weight: normal;
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	min-height: 100vh;
	padding: 0;
	margin: 0;
}

html {
	scroll-behavior: smooth;
}

nav a {
	text-decoration: none;
	color: inherit;
}
img {
	max-width: 100%;
}




/*----------------------------------------------------- 
CUSTOM ELEMENTS
-----------------------------------------------------*/
full-container {
	display: block;
	max-width: var(--full);
	margin-left: auto;
	margin-right: auto;
}
extra-wide-container {
	display: block;
	max-width: var(--extra-wide);
	margin-left: auto;
	margin-right: auto;
}
wide-container {
	display: block;
	max-width: var(--wide);
	margin-left: auto;
	margin-right: auto;
}
narrow-container {
	display: block;
	max-width: var(--narrow);
	margin-left: auto;
	margin-right: auto;
}


/* --- */

page-prewiew-card {
	display: inline-block;
	margin: 0.5rem;
	min-width: 300px;
	border-radius: 1rem;
	overflow: hidden;
	vertical-align: top;
	background-color: white;
}
.page-preview-card-link *{
	transition: all 0.3s ease;
}
page-prewiew-card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}
page-prewiew-card h2 {
	font-size: 1.2rem;
	line-height: 1.1;
	padding: 0.5rem;
	margin: 0;
}
page-prewiew-card page-description {
	display: block;
	margin: 0;
	padding: 0 0.5rem 1rem 0.5rem;
	color: var(--dark-gray);
}
page-prewiew-card page-description::after {
 content: var(--icon-arrow-right);
 display: block;
 font-size: 2rem;
 text-align: right;
 margin-right: 0.5rem;
 font-family: FontAwesome;
}
.page-preview-card-link {
	text-decoration: none;
}
.page-preview-card-link:hover * {
	background-color: var(--primary);
	color: white;
}
.page-preview-card-link:hover img {
	opacity: 0.5;
}


/* --- */

article-primary-bg {
	display: block;
	background-color: var(--primary);
	padding: 1.5rem 0;
	color: white;
}
article-primary-bg * {
	color: white;
}

/* --- */


/* --- */


background-image {
	display: block;
	background-size: cover;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
	padding: 4rem 0;
	margin: 4rem 0;
}

article-big-background {
	display: block;
	margin: auto;
	padding: 1rem;
	max-width: var(--narrow);
	background: white;
	border-radius: 1rem;
	box-shadow: 0 0 1rem var(--shadow);
	overflow: hidden;
}
article-big-background h2 {
	padding: 0.5rem 1rem;
	margin: 0;
}

/* --- */

article-small-image-card {
	text-align: left;
	vertical-align: top;
	margin: 0.5rem;
	display: inline-block;
	max-width: 400px;
	border-radius: 1rem;
	overflow: hidden;
	transition: all 0.2s ease-out;
	box-shadow: 0 0 1rem var(--shadow);
}
article-small-image-card img {
	object-fit: cover;
	height: 250px;
	width: 100%;
}
article-small-image-card h2 {
	font-size: 1.25rem;
	margin: 0;
	padding: 1rem;
	line-height: 1.2;
}

article-small-image-card a {
	display: block;
}

article-small-image-card a::after {
	display: inline-block;
	content: var(--icon-arrow-right);
	font-family: FontAwesome;
	margin-left: 0.5rem;
	font-size: 1.25rem;
	text-decoration: none;
}

article-small-image-card:hover {
 background: var(--primary);
 color: white;
}

article-small-image-card:hover *  
{
	color: white;
}
article-small-image-card:hover img {
	background-color: var(--primary);
	opacity: 0.5;
}

/* --- */

article-image-card {
display: block;	
overflow: hidden;
background-color: white;
margin: 3rem auto;
max-width: var(--narrow);
	box-shadow: 0 0 1rem var(--shadow);
	border-radius: 1rem;
}
article-image-card h2 {
	padding: 0.5rem 1rem;
	margin:0;
}






/*----------------------------------------------------- 
UTILS
-----------------------------------------------------*/
/* colors */
.color-dark {
	color: #1e1e1e;
}
.border-gray-2 {
	border-color: #eaeaea;
}
.border-gray-3 {
	border-color: #ccc;
}
.bg-gray-2 {
	background-color: #eee;
}
.bg-w {
	background-color: white;
}


/* padding & margin */
.p1 {
	padding: 1rem;	
}
.pt6 {
	padding-top: 6rem;
}
.pb6 {
	padding-bottom: 6rem;
}

.mb2 {
	margin-bottom: 2rem;
}
.mb4 {
	margin-bottom: 4rem;
}
.mb4 {
	margin-bottom: 4rem;
}
.mb6 {
	margin-bottom: 6rem;
}

.mt2 {
	margin-top: 2rem;
}
.mt4 {
	margin-top: 4rem;
}
.mt6 {
	margin-top: 6rem;
}


/* borders */
.border-b-s-1 {
	border-bottom-width: 1px;
	border-bottom-style: solid;

}
.border-b-s-2 {
	border-bottom-width: 2px;
	border-bottom-style: solid;
}
.border-b{
	border-bottom: 1px;
}



/* sizes */
.extra-wide {
	max-width: var(--extra-wide);
	margin-left: auto;
	margin-right: auto; 
}
.font-size-1_1 {
	font-size: 1.1rem;
}

.full-container {
	max-width: var(--full);
}
.extra-wide-container {
	max-width: var(--extra-wide);
	margin-left: auto;
	margin-right: auto; 
}
.wide-container {
	max-width: var(--wide);
	margin-left: auto;
	margin-right: auto; 
}
.narrow-container {
	max-width: var(--narrow);
	margin-left: auto;
	margin-right: auto; 
}


.w-max-cont {
	max-width: max-content;
}

.block {
	display: block;
}




/*  */
.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.td-none {
	text-decoration: none;
}
.noselect {
	user-select: none;
}
.shadow {
	box-shadow: 0 0 1rem var(--shadow);
}

/*----------------------------------------------------- 
ICONS
-----------------------------------------------------*/
:root {
	--icon-pdf: "\f1c1";
	--icon-envelope: "\f003";
	--icon-globe: "\f0ac";
	--icon-phone: "\f095";
	--icon-up: "\f106";
	--icon-right: "\f105";
	--icon-arrow-right: "\f105";
}
.icon-b-envelope::before {
	content: var(--icon-envelope);
	font-family: ForkAwesome;
	margin-right: 0.3rem;
}

.icon-envelope::before {
	content: var(--icon-envelope);
	font-family: ForkAwesome;
	margin-right: 0.3rem;
}

.icon-b-globe::before {
	content: var(--icon-globe);
	font-family: ForkAwesome;
	margin-right: 0.3rem;
}

.icon-b-phone::before {
	content: var(--icon-phone);
	font-family: ForkAwesome;
	margin-right: 0.3rem;
}



/*----------------------------------------------------- 
STYLES
-----------------------------------------------------*/
:root {
 --border-radius: 10px;
}

a {
	background-color: inherit;
}

/* buttons */
.btn {
	/* display: inline-block; */
	cursor: pointer;
	/* margin: 0.2rem; */
}


.btn-primary {
	padding: 1rem 2rem;
	border-radius: 3rem;
}

.btn-primary:hover {
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}






.btn-wht {
	color: var(--dark-gray);
}
.btn-wht:hover {
	color: var(--primary_bg);
	background-color: var(--primary);
}


.btn-pdf {
	display: block;
	max-width: max-content;
	border: 1px solid #aaa;
	border-radius: var(--border-radius);
	padding: 1rem;
	margin: 1rem;
}

.btn-pdf::before {
	display: inline-block;
	text-decoration: none;
	content: var(--icon-pdf);
	font-family: ForkAwesome;
	margin-right: 1rem;
	color: #777;
}
.btn-pdf:hover:before {
	color: inherit;
}
.btn-pdf::after {
	display: inline-block;
	text-decoration: none;
	content: "\00a0\00a0(pdf)";
	color: #777;
}

.btn-pdf:hover::after {
	text-decoration: none;
	color: inherit;
}

.btn-arrow::after {
	display: inline-block;
	align-items: center;
	content: var(--icon-arrow-right);
	font-family: FontAwesome;
	margin-left: 1rem;
	margin-right: 1rem;
	transition-property: all;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition: all 0.3s ease-in-out;
}
.btn-arrow:hover:after {
	margin-left: 2rem;
	margin-right: 0rem;
	transform: scale(2);
}












/* head image */
head-image {
	display: block;
	width: 100%;
	min-height: 50vh;
	background-color: var(--primary);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}



/* main title */
main-title {
	display: block;
	background-color: var(--primary);
	color: white;
}
main-title h1 {
	display: block;
	max-width: var(--extra-wide);
	padding: 0; margin:0; 
	font-size: 2rem;
	margin: 0 auto;
	padding: 1rem 0.5rem;
	color: inherit;
    letter-spacing: 0.2px;
}
main-title {
	margin-bottom: var(--spacer);
}
/* main */
main h2 {
	padding: 0;
	margin: 0;
	color: var(--primary);
	font-size: 2rem;
	font-weight: bold;
	
}
main > p {
	padding: 0;
	margin-bottom: 1rem;
}
main article-text {
	padding: 0;
}
main h3 {
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0;
	margin: 0 0 1rem 0;
}
main h4 {
	font-size: 1.2rem;
	font-weight: bold;
	padding: 0;
	margin: 0 0 1rem 0;
}




/* spacing */


article-text p {
	margin: 0 0 var(--small-spacer) 0;
}
article-card, article-image-card 
{
	margin-top: var(--spacer);
	margin-bottom: var(--spacer);
}
main h2 {
	/* margin-top: var(--spacer);
	margin-bottom: var(--small-spacer); */
}
szervezeti-felepites {
	margin-bottom: var(--spacer);
}






/* articles */

article-card, article-image-card {
	display: block;
	background-color: white;
	max-width: var(--narrow);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: 0 0 1rem var(--shadow);
	margin-left: auto;
	margin-right: auto;
}
article-card img, article-image-card img {
	display: block;
	max-width: 100%;
	width: var(--narrow);
	max-height: 300px;
	margin:0;
	padding: 0;
	object-fit: cover;
}
article-card h2, article-image-card h2 { 
	background-color: var(--primary);
	font-size: 1.7rem;
	font-weight: normal;
	color: white;
	margin: 0;
	padding: 1rem 1rem;
}
article-card article-text, article-image-card article-text {
	display: block;
	text-align: left;
	padding: 1rem;
	margin: 0;
}
pages-preview-container {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
pages-preview-container * {
	transition: all 0.3s ease;
	color: var(--dark-gray);
}


page-prewiew-card {
	display: inline-block;
	text-align: left;
	margin: 1rem;
	max-width: 300px;
	border-radius: var(--border-radius);
	overflow: hidden;
	vertical-align: top;
	background-color: white;
}
page-prewiew-card img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}
page-prewiew-card h2 {
	font-size: 1.2rem;
    line-height: 1.1;
    padding: 0.5rem;
    margin: 0;
	color: var(--primary);
}
page-description {
	display: block;
	text-align: left;
	padding: 0.5rem;
}
page-prewiew-card page-description::after {
    content: var(--icon-arrow-right);
    display: block;
    font-size: 2rem;
    text-align: right;
    margin-right: 0.5rem;
    font-family: FontAwesome;
}
pages-preview-container a:hover * {
    background-color: var(--primary);
    color: white;
}
pages-preview-container a:hover img {
	opacity: 0.5;
}



background-image {
	display: block;
}
article-big-background {
	display: block;
}




/* scrool to top */

scroll-to-top {
	--opacity: 0.5;
	display: none;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 99;
	font-size: 3rem;
	padding: 0.5rem 1rem;
	background-color: var(--primary);
	color: white;
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
	border-top: 2px solid white;
	border-left: 2px solid white;
	border-bottom: 2px solid white;
	cursor: pointer;
	opacity: 0;
	animation: fadeInFromNone 0.5s ease-out;
}
scroll-to-top.on-scroll.noselect.scrolled {
	transition: all 0.3s ease;
	transform: scale(1);
	transform-origin: right -110%;
	transform: translateY(-120%);
}
scroll-to-top.on-scroll.noselect.scrolled:hover {
	transform: scale(1.2) translateY(-140%);
}

scroll-to-top.scrolled {
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	float: right;
	z-index: 99;
	opacity: var(--opacity);
	}
scroll-to-top::before {
	content: "\f106";
	font-family: ForkAwesome;
	font-size: 3rem;
}


/* footer */
footer * {
	color: white;
}
footer .upper-footer{
	background-color: var(--primary);
	width: 100%;
	padding: 1rem;
}
footer .upper-footer extra-wide-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
footer .upper-footer extra-wide-container *{
	display: inline-block;
	width: max-content;
	min-width: min-content;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

footer .lower-footer {
	background-color: var(--primary-dark);
	padding: 1rem;
}
footer .lower-footer extra-wide-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}
footer .lower-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
footer .lower-footer ul li {
	padding: 0.5rem 0;
}



/* Responses */
warning-message {
	display: flex;
	align-items: center;
	min-width: max-content;
	width: max-content;
	background-color: var(--warning);
	color: var(--warning_s);
	border-radius: var(--border-radius);
	padding: 1rem;
	line-height: 0.8;
	border: 1px solid var(--light-gray);
}
warning-message:before {
	content: "\f06a";
	font-family: ForkAwesome;
	user-select: none;
	margin-right: 1rem;
	opacity: 0.5;
	font-size: 2rem;
	color: inherit;
}
success-message {
	display: flex;
	align-items: center;
	min-width: max-content;
	width: max-content;
	background-color: var(--success);
	color: var(--success_s);
	border-radius: var(--border-radius);
	padding: 1rem;
	line-height: 0.8;
	border: 1px solid var(--light-gray);
}
success-message:before {
	content: "\f06a";
	font-family: ForkAwesome;
	user-select: none;
	margin-right: 1rem;
	opacity: 0.5;
	font-size: 2rem;
	color: inherit;
}

/***************** SZERVEZETI FELÉPÍTÉS *****************/

veiki-ugyvezeto,
veiki-vizsgalolaboratorium,
veiki-termektanusitasi-iroda,
veiki-minosegugy,
veiki-uzemeltetes,
veiki-nagyfeszultsegu-osztaly,
veiki-nagyaramu-osztaly,
veiki-nagyteljesitmenyu-osztaly {
	display: block;
	text-align: center;
	background-color: var(--primary);
	color: white;
	padding: 0.5rem;
}

szervezeti-felepites h2 {
	grid-area: h2;
	text-align: center;
	font-size: 1.5rem;
	margin: 0;
}

szervezeti-felepites {
	max-width: var(--wide);
	margin-left: auto;
	margin-right: auto;
	margin-top: 3rem;
	padding: 0 1rem;
	display: grid;
	width: 100%;
	gap: 0.5rem;
	grid-template-areas:
		"h2 h2 h2 h2"
		"ugyvezeto ugyvezeto ugyvezeto ugyvezeto"
		"vizsgalo termektanusitas minosegugy uzemeltetes"
		"nagyfeszultseg . . ."
		"nagyaram . . ."
		"nagyteljesitmeny . . .";
}

veiki-ugyvezeto {
	grid-area: ugyvezeto;
}

veiki-vizsgalolaboratorium {
	grid-area: vizsgalo;
}

veiki-termektanusitasi-iroda {
	grid-area: termektanusitas;
}

veiki-minosegugy {
	grid-area: minosegugy
}

veiki-uzemeltetes {
	grid-area: uzemeltetes
}

veiki-nagyfeszultsegu-osztaly {
	grid-area: nagyfeszultseg
}

veiki-nagyaramu-osztaly {
	grid-area: nagyaram
}

veiki-nagyteljesitmenyu-osztaly {
	grid-area: nagyteljesitmeny
}










/*----------------------------------------------------- 
MEDIA
-----------------------------------------------------*/
@media only screen and (max-width: 1000px) {

	.navbar-main .hamburger-menu {
		display: flex;
		align-items: center;
		padding: 0 0.75rem;
		user-select: none;
	}
	.navbar-main .menu {
		display: none;
		position: absolute;
		top: 100%;
		width: 100%;
		background-color: white;
		border-bottom: 2px solid #EAEAEA;
		box-shadow: 0 0 1rem rgba(100,100,100, 0.2);
	}
	.navbar-main .menu, .navbar-main .menu *{
		text-align: left;
		width: 100%;
	}

	
	.navbar-main .menu a, .navbar-main .menu button {
		padding: 1rem 0 1rem 3rem;
	}
	
	.navbar-main .submenu a {
		padding-left: 5rem;
		background-color: #f3f3f3;
	}
	.navbar-main input[type=checkbox]:checked ~ .menu{
		display: block;
		opacity: 0;
		animation: slideFromLeft 0.5s ease forwards;
		min-height: max-content;
	}
	.navbar-main input[type=checkbox]:checked ~ .hamburger-menu::after {
		content: "\f00d";
		width: 16px;
		font-size: 1.2rem;
		font-family: ForkAwesome;
		animation: changeLetter 0.3s linear forwards;
	}

  }

@media only screen and (min-width: 1001px) {
	.navbar-main .hamburger-menu {
		display: none;
	}
	.navbar-main .menu {
		display: inline-flex;
		text-align:center;
		padding: 0;
		margin: 0;
	}
	.navbar-main .menu li {
		display: block;
	}
	.navbar-main .menu a, .navbar-main .menu button {
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		padding: 0.5rem;
	}
	.navbar-main .menu .submenu {
		display: block;
		position: absolute;
		pointer-events: none;
		top: 100%;
		height: 0;
		opacity: 0;
		background-color: #eee;
		border: 1px solid #eaeaea;
		transition: all 0.3s ease;
	}

	.navbar-main .menu .submenu-opener:hover  .submenu {
		top: 100%;
		opacity: 1;
		height: auto;
		pointer-events: auto;
	}

	.navbar-main .menu .submenu a {
		justify-content: left;
		padding: 1.5rem;
	}
}
/*----------------------------------------------------- 
ANIMATIONS
-----------------------------------------------------*/


@keyframes slideFromLeft {
	0% {
		margin-left: -100%;
		pointer-events: none;
		cursor: wait;
	}
	100%{
		opacity: 1;
		pointer-events: auto;
		cursor: auto;
	}
}


@keyframes changeLetter {
0% {
	content: "\f0c9";
	font-family: ForkAwesome;
	transform: rotate(0deg);
}
45%{
	opacity: 0;
}
50%{
	content: "\f00d";
	transform: rotate(30deg);
}
55%{
	opacity: 0;
}
100% {
	opacity: 1;
	transform: rotate(0deg);
}
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;

	transform: translateY(150%);
    }

    30% {
        display: flex;
        opacity: 0;
    }

    100% {
        display: flex;
        opacity: var(--opacity);
    }
}


fade-in-left {
	display: block;
	opacity: 0;
	animation-delay: 0.2s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

fade-in-left.scrolled{
	animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		filter: blur(5px);
		transform: translate3d(-100%,0,0);
	}
	50%{
		opacity: 0.1;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}


fade-in-right {
	display: block;
	opacity: 0;
	animation-delay: 0.2s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

fade-in-right.scrolled{
	animation-name: fadeInRight;
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		filter: blur(5px);
		transform: translate3d(100%,0,0);
	}
	50%{
		opacity: 0.1;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}






/* COLORS */



article-primary-bg h2 {
	color: inherit;
}

.btn-primary {
	color: var(--primary_bg);
	background-color: var(--primary);
}

a {
	color: inherit;
}


strong, b {
	font-weight: bold;
}
i {
	font-style: italic;
}