/* Main CSS Variables */
:root { --color-primary: #004d73; --color-accent: #f76222; --color-text: #222; --color-muted: #666; --color-bg: #ffffff;
            --font-body: 'Poppins', 'Segoe UI', sans-serif; --news-bg-color: #f2f2ed; --default-width: 1200px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); color: var(--color-primary); line-height: 1.4;overflow-x: hidden }
h2 { font-size: 1.75rem; color: var(--color-accent);margin-bottom: 1rem;}
* {box-sizing: border-box;}
.bold {font-weight: bold;font-size: 1.25rem;}


.top-bar { background: #ffffff; padding: 0.5rem 1rem;transition: all 0.3s;}
.top-bar-nav { display: flex; justify-content: flex-end; margin: 0 auto; padding: 0; }
.top-bar-link { display: inline-flex; align-items: center; color: var(--color-primary); text-decoration: none; padding: 0.5rem 0.75rem; margin: 0 0.1rem; transition: all 0.2s ease; font-size: 0.9em; }
.top-bar-link span { white-space: nowrap; }
.top-bar-link:hover { background-color: rgba(0, 77, 115, 0.05); color: var(--color-accent); }
.top-bar-link .material-icons { font-size: 1.5em; margin-right: 0.35rem; transition: transform 0.2s ease; }
.top-bar-link:hover .material-icons { transform: translateY(-1px); }


header { position: fixed; top: 0; z-index: 3;background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.3s;width: 100%}
header + * {margin-top: 190px !important;}

.main-nav { background-color: white; position: relative; width: 100%; }
.nav-container {margin: 0 auto; position: relative; display: flex; justify-content: space-between;padding: 1rem 2rem 2rem 2rem; align-items: end;max-width: var(--default-width);}
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 1.5rem; justify-content: space-between;width: 100%;z-index: 3}
.nav-links > li { position: relative; }
.nav-links > li.nav-small {display: none}
.nav-links > li > a { color: var(--color-primary); text-decoration: none; font-weight: 500; padding: 0.5rem 1rem; margin: 0 -0.5rem;  transition: all 0.3s ease; display: block; position: relative; overflow: hidden; }
.nav-links > li > a:hover, .nav-links a:focus { color: var(--color-accent); }
.nav-links > li > a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: var(--color-accent); transition: all 0.3s ease; transform: translateX(-50%); }
.nav-links > li > a:hover { color: var(--color-accent); background-color: rgba(0, 77, 115, 0.05); }
.nav-links > li > a:hover::after { width: calc(100% - 1rem); }
.nav-links a[aria-current="page"] { color: var(--color-accent); font-weight: 600; }
.nav-links a[aria-current="page"]::after { width: calc(100% - 1rem); background-color: var(--color-accent); }
.logo img { height: 145px; width: auto; display: block; transition:  0.3s cubic-bezier(.4,0,.2,1); }
.logo { margin-top: -55px;min-width: 300px;}
.menu-container {width: 100%}

.header-small {box-shadow: 0 3px 3px rgba(0,0,0,.05);}
.header-small .logo img { height: 64px !important; }
.header-small .nav-container { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.header-small .top-bar {opacity: .0; transform: translate(0, -40px);position: absolute}
.xxxheader-small .logo { transform: translate(0, -10px); }
.header-small .logo { margin-top: 0px;}

.menu-toggle { display: none; }

.search-item { margin-left: 1rem; }
.search-button { background: none; border: none; color: var(--color-primary); cursor: pointer; padding: 0.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; width: 36px; height: 36px; }
.search-button .material-icons { font-size: 1.5rem; }
.search-button:hover, .search-button:focus { background-color: rgba(0, 77, 115, 0.05); color: var(--color-accent); outline: none; opacity: 0.8; }


.button { background: var(--color-accent); color: #fff; padding: 0.5rem 1rem; font-weight: bold; transition: all 0.2s ease; text-decoration: none; display: inline-block; cursor: pointer;height: fit-content}
.button:hover { opacity: 0.8; }
.button.outline {background: none; color: var(--color-accent); border: 1px solid var(--color-accent);}
.search-icon { margin-left: 1rem; font-size: 1.5rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.material-icons { font-size: inherit; line-height: 1; }

.hero { background: url('img/hero.jpeg') center/cover no-repeat; color: white; padding: 4rem 2rem; position: relative; min-height: 730px;background-position: center 35%;}
.hero:before { content: ""; bottom: 0px; left: 0; height: 190px; width: 100%; position: absolute; background-color: var(--news-bg-color); }
.hero-content { display: flex; flex-wrap: wrap; gap: 2rem; max-width: calc(1000px - 4rem); margin: 0 auto; background: #fff; padding: 1.25rem;; position: inherit; margin-top: 350px; }
.hero-left { flex: 1 1 250px;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start; }
.hero-left h1 { font-size: 2rem; margin-bottom: 1rem; color: var(--color-accent); line-height: 2.5rem;}
.hero-right { flex: 1 1 300px; color: #166088; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.icon-list { list-style-type: none; padding: 0; margin: 0; }
.icon-list__item { position: relative; padding-left: 2.5rem; line-height: 1.5; margin-bottom: .75rem;font-size: .875rem;}
.icon-list__item .material-icons { position: absolute; left: 0; top: 0.2em; color: var(--color-accent); font-size: 1.25rem; width: 1.5rem; text-align: center; }
.icon-fa {--fa-primary-color: var(--color-primary);--fa-secondary-color: var(--color-accent);--fa-primary-opacity: 1;--fa-secondary-opacity: 1;position: absolute;left: 0;top: 0.2em;width: 1.5rem;}
.icon-list__item .fa-primary {fill: var(--color-primary);}
.icon-list__item .fa-secondary {fill: var(--color-accent);}
.fa-fw {text-align: center;width: 1.25em;}
.fa-lg {font-size: 1.25em;line-height: .05em;vertical-align: -.075em;}
.svg-inline--fa {height: 1em;overflow: visible;vertical-align: -.125em;}

section { padding: 2rem; margin: 0 auto; }
section:not(.fill) { max-width: 1000px; }
section.text:not(.fill) { max-width: 1200px; min-height: 600px;}


.home .news-block { background-color: var(--news-bg-color); padding: 0rem 2rem 3rem 2rem; }
.home .news-block {position: relative}
.home .news-block:after {content: ""; position: absolute; background: var(--news-bg-color);width: 100%;height: 100%;top: 0px;left: 0;opacity: .8;z-index: 1}
.home .news-block .news-content { max-width: var(--default-width); margin: 0 auto; padding: 2rem;z-index: 2;position: relative }
.home .news-block .news-items { display: flex; gap: 2rem; }
.home .news-block .news-item { flex: 1 1 100px; display: flex; flex-direction: column; }
.home .news-block .news-item time { display: block; font-size: 0.9rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.home .news-block .news-item h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--color-primary); }
.home .news-block .news-item p { margin-bottom: auto; }
.home .news-block .news-item a { color: var(--color-accent); text-decoration: none; display: inline-flex; align-items: center; transition: all 0.2s ease; margin-top: 10px; }
.home .news-block .news-item a:hover { opacity: 0.8; }
.home .news-block .news-item a .material-icons { transition: transform 0.2s ease; }
.home .news-block .news-item a:hover .material-icons { transform: translateX(4px); }

.newspage .news-items {display: flex; flex-direction: column; gap:40px;padding-bottom: 40px;}


.social-icons { display: flex; gap: 1rem; margin-top: -6px}
.social-icon { color: #fff; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background-color: transparent; transition: all 0.2s ease; }
.social-icon:hover, .social-icon:focus { background-color: var(--color-accent); transform: translateY(-2px); outline: none; }
.social-icon svg { width: 30px; height: 30px; fill: currentColor; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.about-us { padding: 3rem 2rem; max-width: var(--default-width); margin: 0 auto;position: relative}
.about-us {position: relative;padding-right: 125px;}
.about-us:before {content: ""; position: absolute; background: url("img/ornament_exclamation.svg") no-repeat right;top: -220px;right: -250px;width: 480px;height:200%;background-size: 480px;}
.about-us p { margin-bottom: 1rem; }

.forum-preview {margin: 0 auto;position: relative;}
.forum-preview h2 {margin-bottom: 0;}
.forum-preview > div { max-width: var(--default-width); var(--default-width); margin: 0 auto;display: flex;align-items: flex-start}
.forum-preview > div > img {max-width: 200px;}
.forum-preview > div > div {padding-top: 60px;}
.forum-preview .read-more { display: inline-block; margin-top: 1rem; background: var(--color-accent); color: #fff !important; padding: 0.5rem 1.25rem; text-decoration: none; font-weight: bold; }
.forum-preview .forum-items { display: flex; flex-direction: column; max-width: fit-content; }
.forum-preview .forum-items a {text-decoration: none;color: inherit}
.forum-preview .forum-item { display: flex; flex-direction: column; gap: 0; padding: 20px 16px 20px 0; transition: all 0.3s ease; cursor: pointer; }
.forum-preview .forum-item .chevron {font-size:1.2em;vertical-align:middle;color:var(--color-primary);}
.forum-preview .forum-item:hover { background-color: rgba(0, 77, 115, 0.03); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); color:red}
.forum-preview .forum-item + .forum-item { border-top: 1px solid #ccc; }
.forum-preview .forum-item-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.forum-preview .forum-arrow { color: var(--color-accent); font-size: 1.25rem; transition: transform 0.2s ease; }
.forum-preview .forum-item:hover .forum-arrow { transform: translateX(4px); }
.forum-preview .forum-item h3, .forum-item p { color: var(--color-primary); }
.forum-preview .forum-meta { font-size: 0.85rem; color: var(--color-muted); }
.forum-preview .forum-link { display: inline-block; background: var(--color-accent); color: #fff; padding: 0.5rem 1.25rem; text-decoration: none; font-weight: bold; }

.teacher-section {margin: 4rem auto 0 auto;padding-left: 20%;}
.teacher-pair {opacity: 0;display: block;align-items: flex-end;justify-content: center;gap: 36px;position: relative;z-index: 2;height: 0;
                transition: opacity 0.7s cubic-bezier(.4,0,.2,1), height 0.5s cubic-bezier(.4,0,.2,1);overflow: hidden;}
.teacher-pair.teacher-active {display: flex;opacity: 1;height: auto;transition: opacity 0.7s cubic-bezier(.4,0,.2,1), height 0.5s cubic-bezier(.4,0,.2,1);}
.teacher-img { width: auto; height: 260px; border: none; }
.speech-balloon { position: relative; background: #808080; color: #fff; border: 12px solid transparent; border-radius: 24px; padding: 1.2rem 2rem 1.2rem 2rem; font-size: 1.1rem; max-width: 420px; margin: 0 0 32px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.08); text-align: center; align-self: flex-start; margin: 0 8px; }
.speech-balloon:after { content: ''; position: absolute; left: -48px; bottom: 20px; width: 0; height: 0; border: 12px solid transparent; border-left: 0; border-right: 48px solid #808080; rotate: -24deg; }


footer { background: var(--color-primary); color: #fff; padding: 4rem 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; box-sizing: border-box;min-height: 400px; }
footer h3 { margin-bottom: 1.5rem; }
footer p { margin-bottom: 1.5rem; }

.footer-column { flex: 1 1 200px; margin-bottom: 2rem; }
.footer-column a { color: #fff; text-decoration: none; }
.footer-column a:not([href^="tel:"]):hover { text-decoration: underline; }
.quick-links { padding-left: 18px; }
.quick-links li { margin-bottom: 1.5rem; }
.footer-bottom { background-color: #003a56; padding: 1rem 2rem; text-align: center; }
.footer-bottom-links { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.footer-bottom-links a { color: #7a98a7; text-decoration: none; font-size: 0.9rem; }
.footer-bottom-links a .icon { color: var(--color-accent); margin-right: 0.3rem; }
.footer-link  {display: flex}
.footer-link .material-icons { font-size: 1.3em; margin-right: 0.5rem; color: var(--color-accent); transition: transform 0.2s ease; }
.footer-inner { max-width: var(--default-width); margin: 0 auto; padding-left: 2rem; padding-right: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }

.submenu { display: none; position: absolute; top: 100%; left: 0; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.18); min-width: 320px; z-index: 100; padding: 0 0; }
.submenu li { width: 100%; border: none; padding: 0; list-style: none; }
.submenu a { display: block; padding: 0.75rem 1.5rem; color: var(--color-primary); text-decoration: none; font-size: 1rem; transition: background 0.2s; margin: 0; }
.submenu a:hover { background: var(--color-accent); color: #fff; }
.nav-links li:hover > .submenu, .xxxnav-links li:focus-within > .submenu { display: block; }

.widget ul {list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10px' height='10px' viewBox='0 0 10 10'><rect x='1.099' y='1.099' transform='matrix(0.3421 -0.9397 0.9397 0.3421 -1.4085 7.9878)' fill='rgb(22,96,136)' width='7.802' height='7.802'/></svg>");}
.text ul {margin-left: 1em;list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10px' height='10px' viewBox='0 0 10 10'><rect x='1.099' y='1.099' transform='matrix(0.3421 -0.9397 0.9397 0.3421 -1.4085 7.9878)' fill='rgb(22,96,136)' width='7.802' height='7.802'/></svg>");}
footer ul {list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12px' height='12px' viewBox='0 0 10 10'><rect x='1.099' y='1.099' transform='matrix(0.3421 -0.9397 0.9397 0.3421 -1.4085 7.9878)' fill='rgb(255,255,255)' width='7.802' height='7.802'/></svg>");}

.text p, .has-text p {margin: 0;padding: 0;min-height: 1em;}
.text p + ol, .text p + ul, .has-text p + ol, .has-text p + ul {margin-top: 0;}
.text a:not(.button), .has-text a:not(.button) {color: var(--color-accent);text-decoration: none; }
.text li, .has-text li {padding-bottom: 0.5em}
.text h1, .has-text h1 {font-size: 1.75rem;color: var(--color-accent);margin-bottom: 2rem;}
.text img, .has-text img {display: block; margin: 0 auto;background: #ddd;position: relative}

.small-hero { background: url('css/img/headers/classroom-1.jpg') 0% 50%/cover no-repeat; position: relative; min-height: 240px;}

/* FORMS */
form, fieldset { margin: 0 0 26px 0; }
.form-title { margin-top: 52px; margin-bottom: 13px; line-height: 200%; }
label, .label, .formelement, .formrow { position: relative; display: flex; margin-bottom: 13px; }
.form-title { margin-top: 52px; margin-bottom: 13px; line-height: 200%; }
.formelement, .formrow, .form-title { margin-bottom: 1.5em; }
label strong, label label, .label strong, .label label, .formelement strong, .formelement label, .formrow strong, .formrow label { min-width: 250px; transition: all .3s; }
label input, label textarea, label select, .label input, .label textarea, .label select, .formelement input, .formelement textarea, .formelement select, .formrow input, .formrow textarea, .formrow select { max-width: 300px; font-size: 15px; width: 100%; min-width: 400px; }
input, textarea, select { line-height: 20px; }
input:not(.button), textarea, select { transition: all .3s; padding: 0 10px; background-color: #fff; border: 1px solid #d0d0d0; height: 32px; box-sizing: border-box; line-height: 32px; font-family: var(--font-body);}
input.button { border: none; cursor: pointer; }
input, textarea, select { line-height: 20px; color: inherit; border-radius: 0px;}
select:focus {outline: none;border-color:  var(--color-accent);}
textarea {height: 120px;padding: 10px;}
label.notvalid input, .label.notvalid input, .formelement.notvalid input, .formrow.notvalid input { border-color: var(--color-accent); }
.formelement strong { position: static; font-size: 11px; display: block; min-width: 140px; margin: 5px 0 0 0; text-align: right; padding: 0; color: var(--color-accent); font-weight: normal;}
.input-date-box { display: flex; }
.input-date-box label { min-width: auto; }
.formelement label { margin-bottom: 0; margin-right: 10px; }
.input-date-box select { margin-right: 10px; min-width: auto; }
label [type="radio"], label [type="checkbox"], .label [type="radio"], .label [type="checkbox"], .formelement [type="radio"], .formelement [type="checkbox"], .formrow [type="radio"], .formrow [type="checkbox"] { width: auto; min-width: auto; margin-right: 10px; height: inherit; }
.hidden { display: none; }
.contactpage {max-width: fit-content;}
.contactpage form {margin-top: 40px;max-width: fit-content;}
.submitbuttons {display: flex;gap: 10px;justify-content: end;}
.formrow.company, .formelement.company {display: none;}
section.formpage form, section.formpage .form {width: fit-content;}
form .input-radio li { list-style-type: none; list-style-image: none}
.validation-header {border: 1px solid var(--color-accent);padding: .5em; color: var(--color-accent)}
.forgot-password-link { float: right;margin-top: 10px;}

table.readonly-form {width: 100%;max-width: 600px;}
table.readonly-form tr {display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap}
table.readonly-form tr td {min-width: 200px;padding-bottom: 4px;}
table.readonly-form tr {padding-bottom: 15px;}

/* FORUM */
.forum-content { max-width: 1000px;}
.forum-content .forum h4 { font-size: 1.1rem; color: var(--color-primary); margin-bottom: 1rem; }
.forum-content .thread { margin-bottom: 2.5rem; }
.forum-content .forum-category-title { font-size: 1.1rem; color: var(--color-primary); margin-bottom: 2em; display: flex; align-items: center; gap: 0.5rem; }
.forum-content .forum-category-title a {align-items: center; color: var(--color-primary); font-weight: 500; text-decoration: none;display: flex}
.forum-content .forum-category-title a:hover, .forum-category-title a:focus { color: var(--color-accent); ; }
.forum-content .forum-category-title > *:first-child:before {content: ""; background: url("/css/img/ornament_chat.svg") no-repeat;height:1.3em;min-width: 2em;display: inline-block}
.forum-content .forum-category-title > *:first-child:before {height:2.6em;min-width: 4em;}
.forum-content .forum-category-title i.icon-category { color: var(--color-accent); font-size: 1.1em; margin-right: 0.3em; }
.forum-content .forum-topic { background: var(--news-bg-color, #f7fafc); border-radius: 8px; padding: 1.5rem 1.5rem 1rem 1.5rem; margin-bottom: 1.5rem; border: 1px solid #e4e8ee; margin-top: 2em }
.forum-content .forum-topic .icon-topic { color: var(--color-primary); font-size: 1.2em; margin-right: 0.5em; }
.forum-content .forum-topic p { margin: 0.5rem 0 0 0; color: var(--color-primary); }
.forum-content .forum-topic, .forum-reaction {overflow-x: auto;}
.forum-content .forum-reactions { margin: 2rem 0 1rem 0; }
.forum-content .forum-reactions .forum-reaction, .forum-content .forum-example .forum-reaction { background: #f8fafc; border-radius: 7px; padding: 1.1rem 1.2rem 1.1rem 1.2rem; margin-bottom: 1.2rem; border: 1px solid #e4e8ee; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.forum-content .forum-author { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; font-size: 1rem; }
.forum-content .forum-author time { font-size: 0.95em; color: var(--color-muted, #888); margin-left: 0.5em; }
.forum-content .forum-reaction-content p { margin: 0.5em 0 0 0; color: var(--color-primary); font-size: 1.05em; }
.forum-content .add-reaction, .forum-content .add-thread { background: #f7fafc; border: 1px solid #e4e8ee; border-radius: 8px; padding: 1.5rem 1.5rem 1rem 1.5rem; margin-top: 2rem; }
.forum-content .add-reaction h4 { margin-top: 0; margin-bottom: 1rem; color: var(--color-accent); font-size: 1.1rem; }
.forum-content .formelement  *:not(label) {max-width: 100%}
.forum-content .buttons.right {display: flex;justify-content: flex-end;gap: 10px;}
.forum-content .read-more { display: inline-block; margin-top: 1rem; background: var(--color-accent); color: #fff !important; padding: 0.5rem 1.25rem; text-decoration: none; font-weight: bold; }
.forum-content .forum-item { display: flex; flex-direction: column; gap: 0; padding: 20px 16px 20px 0; transition: all 0.3s ease; cursor: pointer; }
.forum-content .forum-item:hover { background-color: rgba(0, 77, 115, 0.03); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); color:red}
.forum-content .forum-item { border-top: 1px solid #ccc; }
.forum-content .forum-item-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.forum-content .forum-arrow { color: var(--color-accent); font-size: 1.25rem; transition: transform 0.2s ease; }
.forum-content .forum-item:hover .forum-arrow { transform: translateX(4px); }
.forum-content .forum-item h3, .forum-item p { color: var(--color-primary); }
.forum-content .forum-meta { font-size: 0.85rem; color: var(--color-muted); }
.forum-content .forum-link { display: inline-block; background: var(--color-accent); color: #fff; padding: 0.5rem 1.25rem; text-decoration: none; font-weight: bold; }
.forum-content .forum-item-link {display: flex;justify-content: space-between;align-items: center}
.forum-content .forum-item-link time {padding-right: 1em;}
.forum-content .forum-item-link .forum-item-amount {color: var(--color-muted);min-width: 5em;text-align: right;}
.forum-content .forum-category-header {display: flex; justify-content: space-between;  width: 100%;  padding: 80px 0 40px 0; flex-wrap: wrap;}
.forum-content .forum-category-title {margin: 0}
.forum-content .formelement { margin-bottom: 1.1rem; }
.forum-content .formelement label { font-weight: 500; color: var(--color-primary); display: block; margin-bottom: 0.25rem; }
.forum-content .formelement textarea, .forum-content .formelement input[type="text"] { width: 100%; border: 1px solid #c7d0db; border-radius: 5px; padding: 0.6rem 0.8rem; font-size: 1em; background: #fff; color: var(--color-primary); transition: border 0.2s; }
.forum-content .formelement textarea:focus, .formelement input[type="text"]:focus { border-color: var(--color-accent); outline: none; }
.forum-content .pagination { display: flex; justify-content: flex-end; gap: 1.2rem; margin: 1.5rem 0 2rem 0; font-size: 1rem; color: var(--color-primary); }
.forum-content .pagination a {color: var(--color-primary);}
.forum-content .pagination a:hover, .forum-content .pagination a.current {color: var(--color-accent);}
.forum-content .button {font-weight: normal}
.forum-content .forum-list {min-height: 400px;}
.forum-content .admin-links {display: flex;gap:1em;padding: 0.5em 0;}
.forum-content .admin-links .link {cursor: pointer;}



/* POPUP */
.popup-wrapper * {box-sizing:border-box;-moz-box-sizing: border-box;}
.popup-wrapper {position:fixed;width:100%;height:100%;background: rgba(0,0,0,0.3);left:0;top:0;z-index: 20}
.popup-wrapper ul { list-style-type: none;}
.popup-wrapper ul, .forum .popup-wrapper li {margin:0;padding:0}
.popup {margin: 0 auto;margin-top:200px;background:#fff;padding:20px;width: 400px;;display: block;box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.4);}
.popup-title {color:#166088;font-weight: bold}
.popup-content {margin: 8px 0;max-height:500px;overflow:auto;}
.popup-content input[type='text'] {width:100%;}
.popup-buttonbar {text-align: right;}
.popup-buttonbar {display: flex;justify-content: flex-end;gap: 10px;}
.popup-content a, .popup-content a * {cursor: pointer;}
.popup-content input {height: auto}


.popup input {width: 100%;/*padding: 8px 2px;margin: 8px 0;display: block;*/border:1px solid #b0b0b0;}
.popup input[type='checkbox'], .popup input[type='radio'] {width:auto;display: inline-block;margin: 0 4px;}
.popup textarea {width: 100%;height:200px;outline:none;border:1px solid #b0b0b0;resize: none;}

.buttons.right {display: flex;justify-content: flex-end;gap: 10px;}

/* COOKIE POPUP */
#cookie-popup {display:none;}
#cookie-popup.visible {display:block;}


@media (max-width: 768px) {
    nav { align-items: flex-start; justify-content: flex-start; }
    .nav-links { flex-direction: column; width: 100%; margin-top: 1rem; }
    .hero-content { flex-direction: column; margin-top: 50px; }
    .news-items { flex-direction: column; }
    .hero { height: auto; padding-bottom: 100px; }
}

@media (max-width: 992px) {
    body:has(.menu-toggle:checked) { overflow: hidden; }

    .menu-toggle:checked ~ .menu-container { right: 0; }
    .menu-container { position: fixed; top: 0; right: -100%; width: 80%; max-width: 400px; height: 100vh;z-index: 1000; padding: 5rem 2rem 2rem; overflow-y: auto; transition: right 0.3s ease-in-out;
                    background: #fff; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); align-items: flex-start; }
    .menu-container.active { right: 0; }
    .nav-container { padding: 16px; align-items: flex-start;}
    .nav-links { flex-direction: column; align-items: flex-start; padding: 0; width: 100%; gap: 0; }
    .nav-links a:after {display: none}
    .nav-links li, .nav-links li.nav-small { width: 100%; border-bottom: 1px solid #eee;padding: 10px;display: block}
    header + * {margin-top: 90px !important;}

    .search-item { margin: 0 }
    .search-button {padding: 0;}

    .forum-preview img {display: none}
    .about-us::before {display: none}
    .about-us { padding: 3rem 2rem; }
    .logo {margin-top: 0;min-width: 0;}

    .logo img {max-height: 60px;}
    .top-bar {display: none;}

    .news-block { padding: 1rem 2rem; }

    .news-item {flex-basis:  0px;}

    .menu-icon { width: 32px; height: 24px; position: relative; cursor: pointer; z-index: 1001; }
    .menu-icon span { display: block; height: 4px; width: 100%; background: #333; background-color: var(--color-primary); border-radius: 2px; position: absolute; transition: all 0.4s ease; }
    .menu-icon span:nth-child(1) { top: 0; }
    .menu-icon span:nth-child(2) { top: calc(50% - 2px); }
    .menu-icon span:nth-child(3) { bottom: 0; }
    .menu-toggle:checked + label .menu-icon span:nth-child(1) { transform: rotate(45deg); top: calc(50% - 2px); }
    .menu-toggle:checked + label .menu-icon span:nth-child(2) { opacity: 0; }
    .menu-toggle:checked + label .menu-icon span:nth-child(3) { transform: rotate(-45deg); bottom: calc(50% - 2px); }

    .header-small {box-shadow: 0 3px 3px rgba(0,0,0,.05);}
    .header-small .logo img { height: 145px !important; }
    .header-small .nav-container { padding: 16px !important; }
    .header-small .logo { transform: none; }

    .teacher-section {padding-left: 0;}
    .teacher-pair { flex-direction: column-reverse;align-items: center;display: flex}
    .speech-balloon:after { left: calc(50% + 8px); bottom: -40px; rotate: -70deg; }
    .speech-balloon {min-height: 180px;display: flex; align-items: center;align-self: inherit;}

    label, .label, .formelement, .formrow { flex-flow: column; }
    label input, label textarea, label select, .label input, .label textarea, .label select, .formelement input, .formelement textarea, .formelement select, .formrow input, .formrow textarea, .formrow select { font-size: 15px; width: 100%; min-width: 100%; }
    .contactpage form {max-width: inherit;}
}