
body { 
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
	line-height: 1.6; 
	margin: 0; 
	padding: 0; 
	color: #333; 
	background-color: #f5f6fa; 
}

header { 
	padding: 25px; 
	text-align: center; 
	max-width: 1100px; 
	margin: 0 auto; 
}
nav { 
	background: #4a6f44;
	padding: 12px; 
	text-align: center; 
}
nav a { 
	color: #ecf0f1; 
	margin: 0 15px; 
	text-decoration: none; 
	font-weight: bold; 
	padding: 6px 12px; 
	border-radius: 4px; 
	transition: 0.2s; 
}
nav a:hover { 
	background: #5b8454;
}
nav a.active { 
	background: #344e30; 
}
.container { 
	max-width: 1100px; 
	margin: 30px auto; 
	padding: 0 20px; 
	display: flex; 
	gap: 30px; 
}
main { 
	flex: 3; 
	background: #fff; 
	padding: 30px; 
	border-radius: 8px; 
	box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
	min-height: 400px; 
}
aside { 
	flex: 1; 
	background: #fff; 
	padding: 20px; 
	border-radius: 8px; 
	box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
	border-right: 2px solid #88aa88; 
	height: fit-content; 
}

.full-width main { 
	flex: 1; 
}

.meta-date { 
	color: #7f8c8d; 
	font-size: 0.85em; 
	margin-bottom: 20px; 
	border-bottom: 1px solid #eee; 
	padding-bottom: 5px; 
}
footer { 
	background: #4a6f44;
	color: #fff; 
	text-align: center; 
	padding: 15px; 
	margin-top: 50px; 
}

h1
{
    margin: 0.1em 0 1.0em 0;
	line-height:115%;
	font-size:1.4em;
    font-weight:500;
	font-family:Verdana,Georgia,serif;
	color:#43813B;
}

h3, h1.title-cikk {
    color: #888;
    font-family: serif;
    font-size: 1.4em;
	font-weight: normal;
    margin: 0.1em 0;
}

h2
{
    margin: 1em 0 0.8em 0;
	line-height:115%;
	color:#43813B;
	font-size:1.2em;
	font-family:"Cambria","serif";
	font-style:italic;
}

p, li, div
{
	margin: 0;
	line-height:115%;
}
p 
{
    text-align: justify;
    margin-bottom: 1em;
}
a {
    color: #5b8454;
    text-decoration:underline;
}
footer a {
	color: #d2e3d5;
    text-decoration:underline;
}

.right-box {
    float: right;
    margin: 2px 0 2px 8px;
}

.left-box {
    float: left;
    margin: 2px 8px 0 8px;
}

.center-box {
    clear:both;
    margin: 0 auto;
}

.border-box {
   border-radius: 10px;
   border: 2px solid #73AD21;
   padding: 8px;
}

.block-end {
    margin-bottom: 1em;
}


.box-order {
    font-size: 18.0pt;
    font-weight: 700;
    color: #43813B;
}

.rounded-box {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 30%;
}
.steps-box {
    background-color: #ffffff;
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    position: relative;
    width: 70%;
    margin-top: -15px;
    background-color: #eff7ee;
}
.did-you-know {
    border-radius: 15px;
    border: 2px solid #73AD21;
    padding: 20px 15px 10px 10px;
    width: 90%;
    position: relative;
    float: none;
    margin: 0.5em 0;
    background-color: #eff7ee;
}
.did-you-know h2 {
    text-align: center;
    margin: 0.3em;
}
.did-you-know p {
    font-size: 80%;
}
.question-sign {
    position: absolute; 
    right: -50px; 
    top: -35px;
}
.question {
    font-style: italic;
}
.cikk {
    margin: auto;
    clear: both;
    margin-bottom: 2em;
}
.sidepic {
    width: 50%;
}
.head, .footer {
    width: 90%;
    margin: auto;
    clear: both;
    position: relative;    
    margin-bottom: 2em;    
}
.logo {
    width: 40%;
}
.slogen {
    width: 40%; 
    position: relative; 
    top: 8%; 
    margin-left: 1%;
}

.count-down-box {
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #73AD21;
}

.count-down-box p {
    line-height: 1em;
    margin: 0;
    text-align: center;
    color: #43813B;
    font-weight: 800;
}

p.count-down {
    font-size: 6em;
    color: #73AD21;
    line-height: 0.7em;
    letter-spacing: -0.06em;
    margin-right: 0.06em;
}

@media (min-width: 768px) 
{
	body
	{
        font-size: 13.0pt;
	}
    h1
    {
        font-size: 2em
    }
    h2 
    {
        font-size: 1.6em
    }
    .steps-box, .rounded-box  
    {
        border-radius: 8px;
        left: 0 !important;
        width: 90% !important;
        margin-top: 1em;
    }
    .question-sign {
        top: -25px;
    }
    .sidepic {
        width: 40%;
    }
}
@media (min-width: 1024px) 
{
    h1  {
        margin-left: 0em;
    }
    .did-you-know  {
        float: right;
        width: 30%;
        margin: 0.5em 0 0.5em 10px;
    }
    .logo {
        width: 360px;
    }
    .slogen {
        width: 360px;
        top:    5px; 
        margin-left: 10px;
     }
    .sidepic {
        width: 30%;
    }
    p.count-down {
        font-size: 12em;
    }
}
@media (min-width: 1200px) {
    .sidepic {
        width: 25%;
    }
}

.quotation {
    position: relative;
}
.info {
    font-family: Verdana, Arial, sans-serif; 
    color:#43813B;
}
.footer {
    text-align: center;
    border:none;
    border-top:solid #43813B 2.25pt; 
    padding: 1.0pt 0 0 0;
    clear: both;
}
em {
    font-style: normal;
    font-weight: bold;
}
.szerzo {
    text-align: right;
    font-style: italic;
}

.button {
    border-radius: 8px;
    padding: 0.5em 1.8em;
    background-color: #4a6f44;
	background: linear-gradient(#4a6f44, #41783B);
    color: #edefe6;
    font-size: 1.3em;
    font-family: Arial;
    text-decoration: none;
}

.button:hover {
    color: #ffffff;
}
/* Article navigation */
.article-navigation__details > summary {
    color: #43813B;
    cursor: pointer;
    font-weight: 600;
}

.article-navigation__details > summary:focus-visible {
    outline: 2px solid #43813B;
    outline-offset: 3px;
}

.cikk-navigacio ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.cikk-navigacio li + li {
    margin-top: 6px;
}

.cikk-navigacio a {
    border-radius: 4px;
    display: block;
    padding: 6px 8px;
}

.cikk-navigacio a:hover,
.cikk-navigacio a.active-cikk {
    background: #eff7ee;
}

@media (max-width: 767px) {
    .container {
        flex-direction: column;
        gap: 16px;
        margin: 16px auto;
        padding: 0 12px;
    }

    .container > aside {
        flex: 0 0 auto;
        padding: 12px 16px;
    }

    .container > main {
        flex: 1 1 auto;
        min-width: 0;
        padding: 20px;
    }
}
@media (min-width: 768px) {
    .article-navigation__details > summary {
        display: none;
    }
}
