/* Momdif CSS */

* {
    box-sizing: border-box;
}

body {
    margin: 0;	
    background: #f7f7f7;
    font-family: Arial, Helvetica, Sans Serif;
    font-size: 11px;
    color: #000000;
}

.site-wrapper {
    max-width: 909px;
    width: 100%;
    margin: 0 auto;
}

.header-full {
    max-width: 909px;
    width: 100%;
    margin: 0 auto;
}

.header-full img {
    width: 100%;
    height: auto;
    display: block;
}

.inner-wrapper {
    width: 75.576%;
    margin: 0 auto;
}
	

/* MENU WRAPPER */

#menu,
.hamburger {
    width: 100%;
	/* Menü árnyék */
    box-shadow: 0 1px 4px rgba(0,198,93,0.15);	
}
.menu-container {
    width: 100%;
    position: relative;
}

/* Felső vékony zöld csík */
.menu-container::before {
    content: "";
    display: block;
    height: 1px;              /* lehet 1px is ha vékonyabbat szeretnél */
/*    background: #00a74f; */
    background: #00c65d;
}

/* Hamburger */

.hamburger {
    display: none;
    padding: 10px;
    background: #00a74f;
    color: #ffffff;
    cursor: pointer;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
#menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background: #00a74f;
    display: flex;
    justify-content: flex-start;   /* BALRA ZÁRVA */
    align-items: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
}

#menu li {
    flex: 0 0 auto;   /* NE OSSZA SZÉT */
}

#menu li a {
    display: block;
    padding: 15px 15px;  /* 15px bal és jobb */
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap; /* NE TÖRJE KETTÉ */
}

/* visited */
#menu li a:visited {
/*    background: #33b16e; */
    background: #33b571;	/* világos zöld */	
    color: #ffffff;
}

/* hover */
#menu li a:hover {
    background: #33b571;	/* világos zöld */
/*    text-decoration: underline;*/
}

/* active */
#menu li a.active {
    color: red;
    background: #f7f7f7;
}
body.menu-open .page-title img {
    display: none;
   } 

/* PAGE TITLE */

.page-title {
    width: 100%;
    background: #f7f7f7;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
}

.page-title img {
/*    max-width: 40%;*/
    height: auto;
}

.title-text {
    text-align: left;
	padding-top: 20px;
    font-size: 14px;	
}

.title-graphic {
    display: block;
    height: auto;
}

/* CONTENT */

.content-wrapper {
    max-width: 687px;
    width: 100%;
    margin: 0 auto;
}

.content {
    margin-top: 20px;
    margin-bottom: 40px;
    color: #7b7b7b;
    text-align: justify;
}


/* FOOTER */

.footer {
    width: 100%;
    background: #005428;
}

.footer-inner {
    max-width: 687px;
/*    width: 100%;*/
    width: 75.576%;
    margin: 0 auto;
    padding: 10px;
    color: #009f3e;
    display: flex;
    justify-content: space-between;
}

.footer-left {
	padding-left: 10px;
}

.footer-menu a {
    color: #009f3e;
    text-decoration: none;
}

.footer-menu a:hover {
    text-decoration: underline;
}

.footer-menu a:active {
    color: #ffffff;
    text-decoration: underline;
}

.creator {
    display: flex;	
    padding-top: 10px;
}
.creator img {
    display: block;
}


/* ===============================
   LOGO FAL CONTAINER
================================= */

.logo-fal {
    width: 100%;
    max-width: 687px;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 14px;

    margin-top: 30px;
}

/* ===============================
   LOGO BLOKK
================================= */

.logo {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px;
    background: #ffffff;

    border: 1px solid #e5e5e5;
    border-radius: 6px;

    transition: 
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Hover effekt */
.logo:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Kép */
.logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===============================
   MÉRET ARÁNYOK
================================= */

/* 180x60 */
.logo-wide {
    grid-column: span 2;
}

/* 90x100 */
.logo-tall {
    grid-row: span 2;
}



/* RESPONSIVE */

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

    img {
        max-width: 100%;
        height: auto;
    }
}


@media screen and (max-width: 687px) {
	
    /* Menü mobilon */
	
    #menu {
        display: none;
        flex-direction: column;
        text-align: center;
    }

    #menu.show {
        display: flex;
    }

    .hamburger {
        display: block;
        text-align: center;	
        max-width: 100%;		
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

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

    #menu {
        display: none;
        text-align: center;		
        flex-direction: column;
    }

    #menu.show {
        display: flex;
    }

    .hamburger {
        display: block;
    }
.content {
    font-family: Arial, Helvetica, Sans Serif;
    font-size: 12px;
    color: #7b7b7b;
    text-align: justify;
   }
  
}

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

.title-graphic {
     display: none;
    }
}