/** * File: nacid.css - site "NACID.bg", https://nacid.bg * ------------------------------------------------------------ */ /* Table of Contents ================================================================================ -1. Fonts & Var definitions 0. Clear (erase) 1. Global Definitions (fonts, headings, anchor, paragraph, etc.) 2. Global Structures (body, section, cols, etc.) 3. Base Grid 4. HEADER (Logo, Button Menu Link, Mega Menu, Top links, Info Center, Navigation) 5. FOOTER 6. PAGINATION (Search results) - 2020 7. BREADCRUMBS - only in Inner Pages 8. ASIDE - Tabbed SubMenu (About Us, Projects, etc.) 9. ACCORDION Items (Services, List of News, etc.) 10. SHOW/HIDE Items (toggle visibility - ZOP) 11. MODAL Window (`info-centre`, `geolocation` in page Contacts - OTPADNA) 12. FORM elements 12.A. SURVEY : form elements + SVG (for results) 13. ARROWED BLOCK (block-link with arrow at right) : PROJECTS 14. Rounded DEFINITION LIST (Profil kupuvach, etc.) 15. Tree structure Organization chart (About Us) NEW 24.03.2020, Diana_TT 16. ACCORDION Items - FAQ 17. CALCULATOR 18. ZOOM EFFECTS / MODAL EFFECTS 19. AUTHORIZATION FORM A. HOME Page B. CONTACTS Page C. BIBLIOTEKA: Knigi + Periodica + Chuzhdi DB D. Informacionni izdaniya: ABS E. ZPUKI / ZPKONPI(r) F. COOKIES G. Official SITE INFO S. SiteMap APRP. Countries PROFESSIO. Countries XYZ. Dopalnitelni neshtica ---------------------------------------------------------------------------- */ /* -1. Fonts, Var's definitions, Logos (header, footer) ============================================================================= */ @import url('fonts_2023.css'); @import url('vars_2023.css'); @import url('nacid_logos_header_footer_2023.css'); /* 0. Clear (erase) ============================================================================= */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, a { margin:0; padding:0; border:0 none; outline:0; border-collapse:collapse; font-size:100%; vertical-align:baseline; background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display:block;} /* Remove default list-style; padding-left:40px */ ul, ol {list-style:none outside none;} blockquote, q {quotes:none;} table, table td {padding:0;border:none;border-collapse:collapse;} embed {vertical-align:top;} hr, .none {display:none !important;margin:0;padding:0;} a, a:link, a:visited, a:focus, a:hover, a:active {outline:0;} :focus {outline:none;} :focus {-moz-outline-style:none;-moz-focus-inner:none;} ::-moz-focus-inner {border:0;} /* get rid of those system borders being generated for A tags */ a img {border:none;} /** * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improve image quality when scaled in IE 7. **/ img { border:0; /* 1 */ -ms-interpolation-mode:bicubic; /* 2 */ vertical-align:top !important; max-width:100%;} /* Solve the `padding` problem in IE */ *, *:after, *:before { -webkit-box-sizing:border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */ -moz-box-sizing:border-box; /* Firefox 1 - 28 */ box-sizing:border-box; /* Safari 5.1+, Chrome 10+, Firefox 29+, Opera 7+, IE 8+, Android 4.0+, iOS any */ } em {font-style:normal} /* ------------------------------------------- Clearfix ---*/ .cf, .clr {display:block;} html[xmlns] .cf, html[xmlns] .clr {display:block;} * html .cf, * html .clr {height:0;display:block;} .cf:before, .cf:after, .clr:before, .clr:after { display:table; line-height:0; height:0; content:'';} .cf:after, .clr:after {clear:both;} .clr {height:0px;} /* =============================== For persons using JAWS or other software */ .screen_readers, .screen_readers * { position:absolute;overflow:hidden;left:-9999em;top:-9999em; color:#000 !important;background-color:#fff !important;height:0px;} /* --------------------------------------------- floats, text-align, etc ---*/ .fltLeft {float:left;} .fltRight {float:right;} .txtLeft {text-align:left;} .txtRight {text-align:right;} .txtCenter {text-align:center;} .v_middle {vertical-align:middle;} .nowrp {white-space:nowrap;} .bld {font-weight:bold;} .upper {text-transform:uppercase;} .itl {font-style:italic;} .disp_tbl {display:table;} .disp_row {display:table-row;} .disp_cell {display:table-cell;} .disp_block {display:block;} .disp_inline_block {display:inline-block;} /* 1. Global Definitions (fonts, headings, anchor, paragraph, etc.) ============================================================================= */ /* --- Ostava; ako se skarat browserite i reshat da promenyat default font-size (sega e 16 px) html {font:16px/27px "Helvetica Neue",Helvetica,Arial,sans-serif;} */ html, body {font-family:var(--font-body);} /*pt_sans_regular,*/ body {line-height:1.55;font-weight:400;} h1, h2, h3, h4, h5, h1 *, h2 *, h3 *, h4 *, h5 *, aside b.block--info, p.msg, /* contact form messages */ .logo *, /* .top_links, #footer */ .top_links *, .a-btn-text, .cntcts_title, .MapTitle span {font-family:var(--font-headings) !important;} /* --- anchor --- */ a, a:visited, a:link, a:hover, a:active {text-decoration:none;border-bottom:1px solid;} a:link {color:var(--text-link);border-color:var(--link-border);} a:focus, a:hover {border-bottom-width:3px;border-color:var(--link-border-hover)} a:visited {color:var(--text-link-visited);border-color:var(--link-border-visited);} a:visited:focus, a:visited:hover {border-color:var(--link-border-visited-hover);} /* --- Selection (by the user) --- */ ::selection {background:#000;color:#fff;text-shadow:none;} ::-moz-selection {background:#000;color:#fff;text-shadow:none;} /* --- Headings --- */ h1, h2, h3, h4, h5 {padding-top:20px;font-weight:normal;text-align:left;} h1 {font-size:3em;} h2 {font-size:2em;} h3 {font-size:1.3em;line-height:1.25;} h4, h5, aside b.block--info {font-size:1.25em;line-height:1;padding:0 0 5px 0;font-weight:bold;} h1, h2, h3, h4, h5, aside b.block--info {color:var(--text-headings);} h5 {padding:0;margin-top:0.65em;} #msg, .add_info {font-size:1.8em;padding-top:0 !important;} /* contact */ .PageName {padding:0;line-height:1;letter-spacing:2px;} .ProjectName {font-size:1.75em;line-height:1;letter-spacing:1px;} .home--news h2, .PageName, .ProjectName {text-shadow:1px 1px var(--text-shadow-primary), 2px 2px var(--text-shadow-secondary);} .PageName span {margin-left:3em;font-size:75%;} /* --- Colored Span (ISSN, Info-centre, Contacts-map) --- */ .color_shadow, span.color_shadow {color:var(--text-link);text-shadow:0 2px var(--text-shadow-colored-primary), 0 3px var(--text-shadow-colored-secondary);} /** * PARAGRAPH * default margins: * W3: 1.12em 0 * IE7: 14.25pt 0 * IE8: 1em 0 * FF2: 1em 0 * FF3: 1em 0 * Opera: 1em 0 * Safari 3.1: 1em 0 **/ p {position:relative;margin:.65em 0;} .asterisk {color:var(--clr-ol-ul-asterisk);font-size:120%;} /* --- Ordered list --- */ ol.counter { padding-left:2.5em; padding-top:1.3em; counter-reset: list;} ol.counter > li { list-style:none; position:relative;} ol.counter > li::before { width:2em; margin-left:-2em; counter-increment:list; content:counter(list,decimal-leading-zero) '.';} ol.counter.upper-roman > li::before {content:counter(list,upper-roman) '.';} .NOzeropadded > li::before {content:counter(list) '.';} /* --- Unordered list --- */ ul.bulleted { padding-left:1em; padding-top:0.2em;} ul.bulleted li::before { width:1em; margin-left:-1em; content:"\2022";} /* 25A2 */ ul.bulleted.li_mb10 li {margin-bottom:10px;} /* --- Ordered + Unordered list --- */ ol.counter > li::before, ul.bulleted li::before { color:var(--clr-ol-ul-asterisk); font-weight:bold; display:inline-block;} .bordered > li {border-top:1px solid var(--light-gray-border);} /* --- Other styles --- */ address {font-style:normal;font-size:.9em;position:relative;} #footer address {font-size:1.1em;} /* --- Column Rules --- */ [class*="Column-Rules"] { -webkit-column-gap:2rem; /* Chrome, Safari, Opera */ -moz-column-gap:2rem; /* Firefox */ column-gap:2rem; -webkit-column-rule-style:solid; /* Chrome, Safari, Opera */ -moz-column-rule-style:solid; /* Firefox */ column-rule-style:solid; -webkit-column-rule-width:0px; /* Chrome, Safari, Opera */ -moz-column-rule-width:0px; /* Firefox */ column-rule-width:0px; -webkit-column-rule-color:var(--light-gray-border); /* Chrome, Safari, Opera */ -moz-column-rule-color:var(--light-gray-border); /* Firefox */ column-rule-color:var(--light-gray-border); } .Column-Rules > li { display:inline-block; width: 100%;} .Column-Rules { -webkit-column-count:1; /* Chrome, Safari, Opera */ -moz-column-count:1; /* Firefox */ column-count:1;} @media (min-width:420px) { .Column-Rules { -webkit-column-count:2; /* Chrome, Safari, Opera */ -moz-column-count:2; /* Firefox */ column-count:2;} } @media (min-width:500px) { .Column-Rules { -webkit-column-count:3; /* Chrome, Safari, Opera */ -moz-column-count:3; /* Firefox */ column-count:3;} } @media (min-width:1024px) { .Column-Rules { -webkit-column-count:4; /* Chrome, Safari, Opera */ -moz-column-count:4; /* Firefox */ column-count:4;} } /* --- Quick Links (JAWS, NVDA, etc.) --- */ .skip-link { position:absolute; display:block; overflow:hidden; margin:0; padding:.5rem; width:1px; height:1px; line-height:1; clip:rect(0,0,0,0); -webkit-clip-path: inset(50%); clip-path: inset(50%); border-bottom-width:0 !important; font-size:.75rem; text-transform:uppercase; background:var(--white); white-space:nowrap; z-index:1001;} .skip-link:visited {color:var(--text-link);} .skip-link:active, .skip-link:focus { overflow:visible; clip:auto; -webkit-clip-path: none; clip-path: none; width:auto; height:auto; outline:3px solid var(--border-skip-links); outline-offset:0; left:3px; top:3px;} @media (min-width:768px) { .skip-link:active, .skip-link:focus {left:380px;} } /* 2. Global Structures (body, section, cols, etc.) ============================================================================= */ body {width:100%;height:100%;background-color:var(--white);color:var(--text-primary);} @media (max-width:700px) { body table * {word-break:break-all} } body p, body li {text-align:left;} /* --- sections + article --- */ section { position:relative; overflow:hidden; background-color:var(--white);} article {padding:30px;} /* --- columns --- */ .columns, [class*="cols_"] {position:relative;float:left;margin-left:1.5%;margin-right:1.5%;} .columns {width:100%;float:none;margin:0 0 20px 0;} .cols_1 {width:100%;float:none;margin-left:0;margin-right:0} /* About Us AccordionItem*/ @media (min-width:1024px) { .cols_1 {width:80%;margin-left:auto;margin-right:auto} } .cols_2 {width:48%;margin-left:4%;margin-right:0} .cols_2:nth-child(1) {margin-left:0;} .cols_2.contacts-info {padding-left:100px} @media (max-width:650px) { .wrapper:not(.contacts-container) .cols_2 {width:100%;margin-left:0;margin-right:0;float:none} } @media (max-width:800px) { .wrapper.contacts-container .cols_2 {width:100%;margin-left:0;margin-right:0;float:none} .wrapper.contacts-container .cols_2.contacts-info {padding-left:16px;} } .cols_3 {width:30.333%;} .cols_4 {width:22%;} .cols_34{width:72%;} /* razmer 3/4 - EN, izdaniya */ /* --- 12.06.2017 --- */ .zop .cols_3 {width:20.333%;} .zop .cols_3:first-child {width:50.333%;} .zop .cols_3:last-child {text-align:right;} .zop .cols_3 span {display:block} @media (max-width:650px) { .zop .cols_3, .zop .cols_3:first-child {width:100%;margin-left:0;margin-right:0;float:none} } /* --- end 12.06.2017 --- */ /* --- Others --- */ .row {margin:0;position:relative;} .row:before,.row:after {display:table;line-height:0;height:0;content:'';} .row:after {clear:both;} .row_hover:hover, .row_hover:focus {background-color:var(--block-hover) !important;} /* --- border radius + box shadows --- */ .brd_rds_4, .answers-key-list li:before, .custom-checkboxes .checkmark, .accordionItem, .accordionItem h3, .details h4, input[type='search'], input[type='text'], input[type="submit"], textarea, select, .segmented-button label { -webkit-border-radius:4px; -khtml-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px;} .brd_rds_6, .top_links a, .pagination a, a.button, #btn_menu, #megaMenu a { -webkit-border-radius:6px; -khtml-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px;} .brd_rds_12, .brd_img_cover, .brd_img { -webkit-border-radius:12px; -khtml-border-radius:12px; -moz-border-radius:12px; -ms-border-radius:12px; -o-border-radius:12px; border-radius:12px;} .custom-radio-buttons .checkmark, /* --- Custom radio-check --- */ .custom-radio-buttons .checkmark:after, button.btn_norm:hover, button.btn_norm:focus, button.btn_check { -webkit-border-radius:50%; -khtml-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; border-radius:50%;} /* --- Dark Background Colors + White Text --- */ [class*="bg_drk_"] * {color:white !important; border-color:white !important} .bg_drk_cherry {background-color:#a05;} .bg_drk_blue {background-color:#159;} .bg_drk_gray_blue {background-color:var(--bg-color-thirth);} .bg_drk_gray {background-color:#555;} /* --- Light Background Colors --- */ [class*="bg_light"] {position:relative;} .bg_light_cherry {background-color:#fcecec;} .bg_light_blue {background-color:#e8f2fe;} .bg_light_orange {background-color:#fffdd8;} .bg_light_green {background-color:#e1ffe1;} .bg_light_gray {background-color:#f3f3f3;} /* --- Border Colors --- */ [class*="brd_clr_"] {border-width:1px;border-style:solid;} .brd_clr_white {border-color:#fff;} .brd_clr_cherry {border-color:#b94a48;} .brd_clr_blue {border-color:#3A87AD;} .brd_clr_orange {border-color:#dd9900;} .brd_clr_green {border-color:#468847;} .brd_clr_gray {border-color:#c0c0c0;} /* --- Text Colors --- */ .txt_cherry {color:#a05;} .txt_blue {color:#159;} .txt_orange {color:#c30;} .txt_green {color:#060;} .txt_gray {color:#f7f7f7;} .txt_normal {color:var(--text-headings);} /* --- div styles (display:none; || display:block;) --- */ .hide, .hidden {display:none;} .show {display:block;position:relative;overflow:hidden;height:auto;} /* --- Links like button --- */ a.button, a.catalogs { position:relative; display:inline-block; overflow:hidden; box-sizing:border-box; margin:10px; padding:12px; vertical-align:middle; border-width:1px 1px 1px 1px; border-style:solid; line-height:1;} @media (min-width:840px) { a.button, a.catalogs {white-space:normal;} } a.button, a.button:visited, a.button:link, a.button:active {background-color:var(--white); border-color:var(--link-border); color:var(--text-link);} a.catalogs, a.button:hover, a.button:focus {background-color:var(--bg-color-primary); border-color:var(--bg-color-primary); color:var(--white);} a.catalogs {padding:1em 1em;} a.catalogs.p_10 {padding:10px;} a.catalogs:visited:hover, a.catalogs:visited:focus, a.catalogs:hover, a.catalogs:focus {background-color:var(--black); border-color:var(--black)} .extrnl, .external-white { background-repeat:no-repeat; background-position:right center;} .extrnl {padding-right:18px;} .external-white {background-size:14px 14px;padding-right:20px;} .extrnl { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23159' d='M0 10V0h3v1H1v8h8V7h1v3H0z M9 1.7L4.3 6.4L3.6 5.7L8.3 1H5V0h3.7 H10v5H9V1.7z'/%3E%3C/svg%3E");} .external-white, a.button:hover .extrnl {background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M0 10V0h3v1H1v8h8V7h1v3H0z M9 1.7L4.3 6.4L3.6 5.7L8.3 1H5V0h3.7 H10v5H9V1.7z'/%3E%3C/svg%3E");} /* --- mime types --- */ a[href$=".txt"]:after, a[href$=".pdf"]:after, a[href$=".ppt"]:after, a[href$=".doc"]:after, a[href$=".docx"]:after, a[href$=".xls"]:after, a[href$=".xlsx"]:after, a[href$=".xml"]:after, a[href$=".zip"]:after, a[href$=".jpg"]:after, a[href$=".png"]:after, a[href$=".gif"]:after, a[href$=".jpeg"]:after {position:relative; display:inline; margin:0 0 4px 8px;} a[href$=".txt"]:after {content:'[txt]';} a[href$=".pdf"]:after {content:'[pdf]';} a[href$=".ppt"]:after {content:'[ppt]';} a[href$=".doc"]:after {content:'[doc]';} a[href$=".docx"]:after {content:'[docx]';} a[href$=".xls"]:after {content:'[xls]';} a[href$=".xlsx"]:after {content:'[xlsx]';} a[href$=".xml"]:after {content:'[xml]';} a[href$=".zip"]:after {content:'[zip]';} a[href$=".jpg"]:after, a[href$=".png"]:after, a[href$=".gif"]:after, a[href$=".jpeg"]:after {content:'[img]';} /* 3. Base Grid ============================================================================= */ .wrapper { position:relative; width:100%; max-width:1440px; /*1260px;*/ margin:0 auto; padding:0 1rem;} #header .wrapper {padding:0 5px;} .wrapper:after { clear:both; content:''; display:block;} .pageContent { position:relative; float:left; width:73%;} #screen--top {position:absolute;left:1px;top:1px;width:1px;height:1px;opacity:0;z-index:88888} #page_content {padding-top:30px;padding-bottom:30px;} #page_content.home {padding-top:0;padding-bottom:30px;} @media (max-width:1440px) { .wrapper {max-width:1260px;} } @media (min-width:1024px) { .wrapper {padding:0;} #header .wrapper {padding:0;} #page_content {padding-top:50px;padding-bottom:50px;} } div.item_in {margin:15px;} /* --- Sticky footer --- */ html, body {height:100%;} body {display:flex;flex-direction:column;} .st_ftr {flex: 1 0 auto;} footer {flex-shrink:0;} /* --- GoTo top --- */ #back-to-top { position:fixed; bottom:60px; right:10px; width:50px; height:50px; text-align:center; line-height:50px; background:var(--btn-go-top-bg); color:var(--btn-go-top-color); font-weight:bold; cursor:pointer; border:1px solid var(--btn-go-top-border); border-radius:50%; text-decoration:none; transition:opacity 0.2s ease-out; opacity:0; z-index:99999;} #back-to-top:before { position:absolute; display:block; left:18px; top:20px; width:14px; height:14px; border-right:4px solid var(--white); border-top:4px solid var(--white); transform:rotate(-45deg); content:'';} #back-to-top.showgtt {opacity:0;} @media (min-width:1024px) { #back-to-top:hover {background:var(--btn-go-top-bg-hover);} #back-to-top.showgtt {opacity:1;} } /* --- ICONS ---------------------------------------------------------------------------- */ [class*="img-lft-"]:before, .accordionItem.showAccrdn h3:before, .accordionItem.hideAccrdn h3:before, .top_links .info_center:before, .top_links .e_portal:before, .top_links .lang:before, .button.CAO_e_portal:before, /* --- CAO 13.03.2020 --- */ .button.CAO_iisda:before, .button.CAO_survey:before, .additional_info p:before {background-image:url('../_img/NACID_icons_20x20_2022.svg');} [class*="img-lft-"] {padding-left:64px;} [class*="img-lft-"]:before { display:inline-block; position:absolute; left:20px; top:20px; content:'';} p[class*="img-lft-"] {padding-left:30px;} p[class*="img-lft-"]:before {top:0;left:0;} /* --- icons 17x17 --- */ [class*="img-lft-17x17-"]:before {width:20px;height:20px;} /* --- white icons --- */ .img-lft-17x17-fax-white:before {background-position:-30px 0;} .img-lft-17x17-phone-white:before {background-position:-30px -30px;} .img-lft-17x17-envelope-white:before {background-position:-30px -60px;} .img-lft-17x17-globe-white:before {background-position:-30px -90px;} .img-lft-17x17-mail-white:before {background-position:-30px -120px;} .img-lft-17x17-clock-white:before {background-position:-30px -150px;} .img-lft-17x17-pen-white:before {background-position:-30px -180px;} .img-lft-17x17-mobile-white:before {background-position:-30px -210px;} .img-lft-17x17-institute-white:before {background-position:-30px -240px;} .img-lft-17x17-web-white:before {background-position:-30px -270px;} .img-lft-17x17-person-white:before {background-position:-30px -300px;} .img-lft-17x17-phone2-white:before {background-position:-30px -330px;} /* --- blue icons --- */ .img-lft-17x17-fax-blue:before {background-position:-70px 0;} .img-lft-17x17-phone-blue:before {background-position:-70px -30px;} .img-lft-17x17-envelope-blue:before {background-position:-70px -60px;} .img-lft-17x17-globe-blue:before {background-position:-70px -90px;} .img-lft-17x17-mail-blue:before {background-position:-70px -120px;} .img-lft-17x17-clock-blue:before {background-position:-70px -150px;} .img-lft-17x17-pen-blue:before {background-position:-70px -180px;} .img-lft-17x17-mobile-blue:before {background-position:-70px -210px;} .img-lft-17x17-institute-blue:before {background-position:-70px -240px;} .img-lft-17x17-web-blue:before {background-position:-70px -270px;} .img-lft-17x17-person-blue:before {background-position:-70px -300px;} .img-lft-17x17-phone2-blue:before {background-position:-70px -330px;} /* --- black icons --- */ .img-lft-17x17-fax-black:before {background-position:-110px 0;} .img-lft-17x17-phone-black:before {background-position:-110px -30px;} .img-lft-17x17-envelope-black:before {background-position:-110px -60px;} .img-lft-17x17-globe-black:before {background-position:-110px -90px;} .img-lft-17x17-mail-black:before {background-position:-110px -120px;} .img-lft-17x17-clock-black:before {background-position:-110px -150px;} .img-lft-17x17-pen-black:before {background-position:-110px -180px;} .img-lft-17x17-mobile-black:before {background-position:-110px -210px;} .img-lft-17x17-institute-black:before {background-position:-110px -240px;} .img-lft-17x17-web-black:before {background-position:-110px -270px;} .img-lft-17x17-person-black:before {background-position:-110px -300px;} .img-lft-17x17-phone2-black:before {background-position:-110px -330px;} .img-lft-17x17-facebook-white:before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath style='fill:%23fff%3B' d='M17.3 0H2.7C1.2 0 0 1.2 0 2.7v14.6C0 18.8 1.2 20 2.7 20h7.2l0-7.1H8.1c-0.2 0-0.4-0.2-0.4-0.4l0-2.3 c0-0.2 0.2-0.4 0.4-0.4h1.9V7.4c0-2.6 1.6-4 3.9-4h1.9c0.2 0 0.4 0.2 0.4 0.4v1.9c0 0.2-0.2 0.4-0.4 0.4l-1.2 0 c-1.3 0-1.5 0.6-1.5 1.5v1.9h2.8c0.3 0 0.5 0.2 0.4 0.5l-0.3 2.3c0 0.2-0.2 0.4-0.4 0.4H13l0 7.1h4.3c1.5 0 2.7-1.2 2.7-2.7V2.7 C20 1.2 18.8 0 17.3 0z'/%3E%3C/svg%3E"); background-size:20px 20px; background-position:left center;} /* --- icons 24x24 --- */ [class*="img-lft-24x24-"]:before {width:24px;height:24px;} .img-lft-24x24-info-white:before {background-position: -30px -390px;} .img-lft-24x24-info-dark:before, .img-lft-24x24-info-blue:before {background-position: -70px -390px;} .img-lft-24x24-info-black:before {background-position:-110px -390px;} .img-lft-24x24-alrt-white:before {background-position: -30px -420px;} .img-lft-24x24-alrt-blue:before {background-position: -70px -420px;} .img-lft-24x24-alrt-black:before {background-position:-110px -420px;} .img-lft-24x24-ask-white:before {background-position: -30px -450px;} .img-lft-24x24-ask-blue:before {background-position: -70px -450px;} .img-lft-24x24-ask-black:before {background-position:-110px -450px;} /* --- icons 32x32 --- */ [class*="img-lft-32x32-"] {padding-left:50px !important;} [class*="img-lft-32x32-"]:before { width:32px; height:32px; left:10px; top:4px;} .img-lft-32x32-download:before {background-position:-70px -560px;} .img-lft-32x32-download:hover:before, .img-lft-32x32-download:focus:before {background-position:-30px -560px;} /* --- icons 50x50 --- */ [class*="img-lft-50"] {padding-left:64px !important;} [class*="img-lft-50"]:before { background-image:url('../_img/NACID_icons_50x50_2022.svg'); background-size:100%; width:30px; height:30px; left:20px; top:50px; margin-top:-25px;} .img-lft-50x50-info:before {background-position:0 0;} .img-lft-50x50-alrt:before {background-position:0 -36px;} .img-lft-50x50-chck:before {background-position:0 -72px;} @media (min-width:1024px) { [class*="img-lft-50"] {padding-left:84px !important;} [class*="img-lft-50"]:before { width:50px; height:50px; } .img-lft-50x50-info:before {background-position:0 0;} .img-lft-50x50-alrt:before {background-position:0 -60px;} .img-lft-50x50-chck:before {background-position:0 -120px;} } /* 4. HEADER (Logo, Button Menu Link, Mega Menu, Top links, Info Center) ============================================================================= */ #header {position:relative;background-color:var(--white)} .logo, .logo *, #btn_menu, .top_links a { background-color:var(--white) !important; } .logo, .logo * { color:var(--text-black) !important; } .logo .nacid h2 { color:var(--text-blue) !important; } #btn_menu, .top_links a { color:var(--text-blue) !important; } #btn_menu, .top_links a { display:inline-block; overflow:hidden; line-height:30px; margin:0; padding:0 6px; font-size:0.9rem; text-transform:uppercase; border:0px white solid !important; vertical-align:top;} #megaMenu a:hover, #megaMenu a:focus, #btn_menu:hover, #btn_menu:focus, .top_links a:hover, .top_links a:focus { background-color:var(--bg-light-blue) !important; border-color:var(--bg-light-blue) !important; color:var(--text-link) !important;} /* --- LOGO --- */ .logo {float:left;display:block;overflow:hidden;} /* --- TOP LINKS (Info-center, Portal, Language) --- */ .top_links {float:right;padding:30px 0;margin:20px 0 0 0;text-align:left;} .top_links .eufunds-btn { display: block; float: right; margin: -8px 30px 0 0; line-height: normal; } .top_links .eufunds-btn img { height: 50px; margin: 0; padding: 0; } @media (max-width:1440px) { .top_links .eufunds-btn { margin: -4px 0 0 0; } .top_links .eufunds-btn img { height: 40px; } } @media (max-width:768px) { .top_links .eufunds-btn { margin: -2px 0 0 0; } .top_links .eufunds-btn img { height: 34px; } } @media (max-width:623px) { .top_links .eufunds-btn { margin: 0; } .top_links .eufunds-btn img { height: 30px; } } .top_links ul { display: block; float: right; } .top_links ul li {display:block;float:left;margin-left:4px;cursor:pointer;} .top_links a.info_center:before, .top_links a.e_portal:before, .top_links a.lang:before, .button.CAO_e_portal:before, .button.CAO_iisda:before, .button.CAO_survey:before { position:relative; display:inline-block; vertical-align:top; width:24px; height:30px; margin:0 4px 0 0; content:'';} .top_links a.info_center:before, .top_links a.e_portal:before, .top_links a.lang:before {margin:0} .top_links a.info_center:before {background-position:-70px -476px;} .top_links a.e_portal:before {background-position:-190px -85px;} .top_links a.lang:before {background-position:-70px -85px;} .top_links a.info_center:hover:before, .top_links a.info_center:focus:before {background-position:-70px -476px;} .top_links a.e_portal:hover:before, .top_links a.e_portal:focus:before {background-position:-190px -85px;} .top_links a.lang:hover:before, .top_links a.lang:focus:before {background-position:-70px -85px;} @media (max-width:768px) { .top_links {padding:29px 0;margin:0;} } @media (max-width:696px) { .top_links {padding:10px 0;margin:0;border-top:1px dotted rgba(255,255,255,.5);} .top_links a {font-size:0.9em;} } @media (max-width:375px) { .top_links a.info_center:before, .top_links a.e_portal:before, .top_links a.lang:before {display:none;} } /* --- CAO 13.03.2020 --- */ .button.CAO_e_portal:before {background-position:-190px -85px;} .button.CAO_e_portal:hover:before, .button.CAO_e_portal:focus:before {background-position:-150px -85px;} .button.CAO_iisda:before {background-position:-70px -387px;} .button.CAO_iisda:hover:before, .button.CAO_iisda:focus:before {background-position:-30px -387px;} .button.CAO_survey:before {background-position:-70px -447px;} .button.CAO_survey:hover:before, .button.CAO_survey:focus:before {background-position:-30px -447px;} .button.CAO_e_portal, .button.CAO_iisda, .button.CAO_survey {line-height:1.875;} /* --- e-Services Blue::Black (standard::hover) 05.10.2021 --- */ .button.CAO_e_portal.BB:before, .button.CAO_e_portal.BB:hover:before, .button.CAO_e_portal.BB:focus:before {background-position:-150px -85px;} .button.CAO_e_portal.BB {background-color:var(--bg-color-primary); color:var(--bg-color-primary-text); border:1px solid var(--bg-color-primary);} .button.CAO_e_portal.BB:hover, .button.CAO_e_portal.BB:focus {background-color:var(--bg-color-primary-hover); border-color:var(--bg-color-primary-hover)} @media (max-width:500px) { .button.CAO_e_portal, .button.CAO_iisda, .button.CAO_survey {display:block;margin:10px 0 !important;} } @media (min-width:501px) { .button.CAO_e_portal, .button.CAO_iisda, .button.CAO_survey {display:inline-block;margin:0 0 0 1rem !important;} .button.CAO_e_portal {margin-left:0 !important;} } .CAO_logo_DA { vertical-align:middle; width:48.92308px; height:44px; background:transparent url("../_img/DA-logo-BG.png") left top no-repeat; background-size:cover} .CAO_block {min-height:170px; margin-bottom:20px;} .CAO_block h3 {padding:20px 20px 20px 0;} /* --- end CAO 13.03.2020 --- */ /* --- TOP LINKS Concomitant Sites Title (INFOsviat, VUZ-??? ) --- */ .top_links h2 {font-size:2em;letter-spacing:0.04em;padding:0;line-height:1} /* --- TOP LINKS (Search Form) --- */ .top_links .search-wrapper { display: block; float: right; margin: 15px 0 0 30px; cursor: pointer; border: 1px solid #115599; border-radius: 6px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .top_links .search-wrapper img { width: 28px; } .top_links .search-wrapper > div, .top_links .search-wrapper > form { vertical-align: middle; } .top_links .search-wrapper .search { right: 0px; position: relative; } .top_links .search-wrapper .search label { display: none; } .top_links .search-wrapper .search input { width: 200px; height: 38px; border-radius: 6px; border: 0; background-color: #ffffff; padding-left: 15px; padding-right: 40px; font-size: 16px; } .top_links .search-wrapper .search input::-webkit-input-placeholder { /* WebKit browsers */ font-style:normal; font-size: 15px; color: #115599; } .top_links .search-wrapper .search input:-moz-placeholder { /* FF 4-18 */ font-style:normal; font-size: 15px; color: #115599; opacity:1; } .top_links .search-wrapper .search input::-moz-placeholder { /* FF 19+ */ font-style:normal; font-size: 15px; color: #115599; opacity:1; } .top_links .search-wrapper .search input:-ms-input-placeholder { /* IE 10+ */ font-style:normal; font-size: 15px; color: #115599; } .top_links .search-wrapper .search button { position: absolute; height: 38px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); right: 6px; border-radius: 6px; } .top_links .search-wrapper .btn-search-mobile, .top_links .search-wrapper .search button, .top_links .search-wrapper .btn-search-close { background: transparent; border: none; cursor: pointer; } .top_links .search-wrapper .btn-search-mobile:focus, .top_links .search-wrapper .search button:focus, .top_links .search-wrapper .btn-search-close:focus { outline: 2px solid #FF9800; } .top_links .search-wrapper .btn-search-mobile:focus-visible, .top_links .search-wrapper .search button:focus-visible, .top_links .search-wrapper .btn-search-close:focus-visible { outline: 4px dashed #FF9800; } .top_links .search-wrapper .btn-search-mobile, .top_links .search-wrapper .btn-search-close { display: none; } .top_links .search-wrapper .btn-search-close { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } @media (max-width: 1024px) { } @media (max-width: 590px) { .top_links { width: 94%; margin: 0 3%; } .top_links .search-wrapper { float: none; margin: 20px 0 0 0; clear: both; } .top_links .search-wrapper img { width: 24px; } .top_links .search-wrapper .search { width: 100%; max-width: 100%; } .top_links .search-wrapper .search input { width: 100%; max-width: 100%; height: 34px; } .top_links .search-wrapper .search button { height: 34px; } } /* --- (Search Results) --- */ .search-results { } .search-results h3 { display: block; font-size: 24px; font-weight: 600; color: #BB2255; margin: 0 0 20px 0; } .search-results h3 span { display: inline-block; color: #3c3c3c; margin: 0 0 0 5px; } .search-results article { margin-bottom: 30px; border-bottom: 1px dashed #BB2255; padding: 10px; } .search-results article strong { display: block; word-break: break-all; text-decoration: none; font-size: 20px; margin: 0; padding: 0; color: #111; } .search-results article a { display: inline-block; word-break: break-all; text-decoration: underline; color: #32509c; } .search-results article a:visited { border-bottom: 3px solid #fff; } .search-results article a:link { border-bottom: 3px solid #fff; } .search-results article a:focus { border-bottom: 3px solid #BB2255; } .search-results article a:hover { border-bottom: 3px solid #BB2255; } /* --- Button MENU LINK --- */ #btn_menu {cursor:pointer;background-color:var(--bg-color-primary);} #btn_menu { height:30px; padding:0 6px 0 26px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23fff' d='M0,21.5v-3h24v3H0z M0,10.5h24v3H0V10.5z M0,2.5h24v3H0V2.5z'/%3E%3C/svg%3E"); background-position:6px center; background-repeat:no-repeat; background-size:16px 16px;} #btn_menu.showBtn:hover, #btn_menu.showBtn:focus { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23059' d='M0,21.5v-3h24v3H0z M0,10.5h24v3H0V10.5z M0,2.5h24v3H0V2.5z'/%3E%3C/svg%3E");} #btn_menu.hideBtn { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23fff' d='M24,21.9L21.9,24L12,14.1L2.1,24L0,21.9L9.9,12L0,2.1L2.1,0L12,9.9L21.9,0L24,2.1L14.1,12L24,21.9z'/%3E%3C/svg%3E");} #btn_menu.hideBtn:hover, #btn_menu.hideBtn:focus { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23059' d='M24,21.9L21.9,24L12,14.1L2.1,24L0,21.9L9.9,12L0,2.1L2.1,0L12,9.9L21.9,0L24,2.1L14.1,12L24,21.9z'/%3E%3C/svg%3E");} @media (max-width:389px) { #btn_menu {background-image:none;padding:0 6px} } /* --- MEGA MENU --- */ #megaMenu { border-top:1px solid var(--white); display:block; position:absolute; left:0; right:0; z-index:9999; text-transform:uppercase; font-size:.875em; transition: all .2s ease-out;} #megaMenu .megaMenuInner { display:block; overflow:hidden; border-bottom:1px solid rgba(22,77,134,.15); -webkit-box-shadow: 0 18px 50px -18px rgba(22,77,134,.8); -moz-box-shadow: 0 18px 50px -18px rgba(22,77,134,.8); box-shadow: 0 18px 50px -18px rgba(22,77,134,.8); background:var(--white);} #megaMenu nav {width:100%;margin:12px 0 0 0;} #megaMenu .cols_4 { width:auto; border-left:1px dotted var(--SVG-gray); margin:0 0 12px 12px; padding:12px 0 0 12px;} #megaMenu h2 { font-size:1.25rem; line-height:1em; padding:0 0 5px 10px; position:relative;} #megaMenu ul {padding-bottom:10px;} #megaMenu li {padding:0 !important;} #megaMenu a { color:var(--text-link) !important; border-bottom:0 !important; display:block; padding:8px 10px; font-size:.75rem; line-height:1.55;} @media (min-width:1024px) { #megaMenu a {padding:6px 10px;} #megaMenu .cols_4:first-child {border-left:0;margin:0;padding-left:0} } @media (max-width:823px) { #megaMenu .cols_4:nth-child(odd) {clear:left} #megaMenu .cols_4 {width:47%;} } @media (max-width:480px) { #megaMenu .cols_4 { margin:0; padding:12px 0 0 0; border-left:none; width:100%; clear:left;} } /* --- NAVIGATION --- */ #nav-menu { position: relative; z-index: 999; display: block; width: 100%; float: none; background: var(--nav-bg-color); } #nav-menu .menu { display: block; width: 100%; margin: 0; padding: 0; font-family: var(--font-nav); } #nav-menu .menu > ul { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; padding: 0; } #nav-menu .menu > ul > li { position: relative; margin: 0; padding: 0; } #nav-menu .menu > ul > li .nav-link { display: block; height: 44px; line-height: 44px; text-align: center; text-transform: uppercase; font-size: 15px; margin: 0; padding: 0 25px 0 0; font-weight: 400; opacity: 1; color: var(--white); z-index: 1; white-space: nowrap; font-family: var(--font-nav); } #nav-menu .menu > ul > li:first-child .nav-link { padding: 0; } #nav-menu .menu > ul > li .nav-link.dropdown-btn { border: none; background-color: transparent; cursor: pointer; } #nav-menu .menu > ul > li .nav-link.dropdown-btn:after { border-bottom: 2px solid var(--bg-color-secondary); border-right: 2px solid var(--bg-color-secondary); content: ''; display: block; width: 8px; height: 8px; margin: 0; pointer-events: none; position: absolute; z-index: 9; right: 5px; top: 17px; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } #nav-menu .menu > ul > li .nav-link:focus:after { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } #nav-menu .menu > ul > li.active .nav-link { border-bottom: 3px solid var(--white); color: #fff; } #nav-menu .menu > ul > li.active .nav-link:link { border-bottom: 3px solid var(--bg-color-secondary); color: #fff; } #nav-menu .menu > ul > li.active .nav-link:focus { border-bottom: 3px solid var(--bg-color-secondary); color: #fff; } #nav-menu .menu > ul > li .nav-link:link, #nav-menu .menu > ul > li .nav-link:focus { text-decoration: none; border-bottom: 3px solid var(--bg-color-secondary); } #nav-menu .menu > ul > li .nav-link:hover { text-decoration: none; border-bottom: 3px solid var(--white); } #nav-menu .menu > ul > li .nav-link:link { color: var(--white); border-color: var(--bg-color-secondary); } #nav-menu .menu ul li .dropdown { display: flex; flex-direction: column; min-width: 250px; width: 330px; background-color: var(--white); border-radius: 0; position: absolute; left: 0; top: 44px; z-index: 1; visibility: hidden; opacity: 0; transform: scale(0.97) translateX(-5px); transition: 0.1s ease-in-out; box-shadow: var(--shadow); margin: 0; padding: 0; } #nav-menu .menu ul li .dropdown.active { visibility: visible; opacity: 1; transform: scale(1) translateX(5px); } #nav-menu .menu ul li .dropdown ul { display: flex; flex-direction: column; gap: 0.4rem; padding: 15px 0; } #nav-menu .menu ul li .dropdown ul li { display: block; margin: 0; padding: 0 10px; text-align: left; } #nav-menu .menu ul li .dropdown ul li a { display: block; text-align: left; text-transform: uppercase; font-size: 15px; margin: 0; padding: 4px 10px 4px 4px; font-weight: 400; opacity: 1; color: var(--text-blue); z-index: 1; border-bottom: 2px solid #ccc !important; outline: 0 none; } #nav-menu .menu ul li .dropdown ul li:last-child a { border-bottom: 0 !important; } #nav-menu .menu ul li .dropdown ul li a:visited { border-bottom: 2px solid transparent; outline: 0 none; } #nav-menu .menu ul li .dropdown ul li a:focus { border-bottom: 2px solid var(--bg-color-secondary) !important; outline: 0 none; } #nav-menu .menu ul li .dropdown ul li a:hover { border-bottom: 2px solid var(--bg-color-secondary) !important; outline: 0 none; } #hamburger { display: none; } @media (max-width: 1024px) { #hamburger { position: relative; display: block; top: auto; right: auto; float: right; display: block; background: transparent; height: 50px; width: 50px; cursor: pointer; transition: .3s; z-index: 9999; border: 0; outline: 0; } #hamburger span { position: absolute; width: 32px; height: 4px; margin: 0; padding: 0; background: var(--bg-color-primary); top: 50%; left: 50%; transform: translate(-50%,-50%); transition: .3s; } #hamburger span:before { content: ''; position: absolute; left: 0; top: -10px; background: var(--bg-color-primary); height: 4px; width: 32px; transition: .3s; } #hamburger span:after { content: ''; position: absolute; left: 0; top: 10px; background: var(--bg-color-primary); height: 4px; width: 32px; transition: .3s; } #hamburger.active span { background-color: transparent; } #hamburger.active span:before { transform: rotate(45deg); top: 0; } #hamburger.active span:after { transform: rotate(-45deg); top: 0; } #nav-menu .menu { display: none; position: absolute; top: 0; left: 0; min-height: 100vh; width: 100vw; background: #fff; } #nav-menu .menu > ul { display: block; flex-direction: normal; align-items: normal; row-gap: 0; padding: 1rem; } #nav-menu .menu > ul > li { position: relative; display: block; } #nav-menu .menu > ul > li:not(:last-child) { padding: 0 !important; margin: 0; border-bottom: 1px solid #aaa; } #nav-menu .menu > ul > li > .nav-link { display: block; justify-content: normal; width: 100%; height: auto; line-height: normal; font-weight: 600; font-size: 16px; color: #111; padding: 17px 0; margin: 0; text-align: left; } #nav-menu .menu > ul > li.active .nav-link { color: #111; border-bottom: 3px solid var(--bg-color-secondary); } #nav-menu .menu > ul > li.active .nav-link:link { color: #111; } #nav-menu .menu > ul > li.active .nav-link:focus { color: #111; } #nav-menu .menu > ul > li:first-child .nav-link { padding: 17px 0; } #nav-menu .menu > ul > li .nav-link.dropdown-btn:after { top: 22px; right: 10px; width: 9px; height: 9px; border-bottom: 2px solid #115599; border-right: 2px solid #115599; } #nav-menu .menu > ul > li .nav-link:hover { border-bottom: 2px solid #BB2255; } #nav-menu .menu ul li .dropdown { display: none; flex-direction: normal; min-width: 100%; width: 100%; position: static !important; top: auto !important; left: auto !important; visibility: visible; opacity: 1; transform: none; box-shadow: none; } #nav-menu .menu ul li .dropdown ul { display: block !important; flex-direction: normal; align-items: normal; justify-content: normal; padding: 0; } #nav-menu .menu ul li .dropdown ul li { display: block !important; padding: 0; } #nav-menu .menu ul li .dropdown ul li a { padding: 8px 0; border-bottom: 1px solid #ccc !important; } #nav-menu .menu ul li .dropdown ul li.active a { color: #111; border-bottom: 2px solid var(--bg-color-secondary); } #nav-menu .menu.show, #nav-menu .menu > ul > li .dropdown.active { display: block; } } @media (max-width:768px) { #hamburger { position: absolute; top: 20px; right: 10px; float: none; } } /* 5. FOOTER ============================================================================= */ #footer { position:relative; overflow:hidden; width:100%; padding:1rem 0; background-color:var(--footer-bg-color); color:var(--footer-text-color); font-size:.875rem; clear:both;} /* --- 0. Styles for: p, li, a --- */ #footer p, #footer li {font-family:var(--font-footer);font-weight:400;} #footer .col_address p { margin:0 !important; padding-bottom:.5em; line-height:1.4em;} #footer li {line-height:2em;} #footer a {padding:0 2px;font-size:1.1em;} #footer a, #footer a:link, #footer a:hover, #footer a:active, #footer a:visited {color:var(--footer-link-color); border-color:var(--footer-link-border);} #footer a:hover, #footer a:focus {border-color:var(--footer-link-border-hover);} #footer a:focus, #footer a:focus:hover {outline:dashed 1px var(--footer-link-focus-outline);outline-offset:1px;} /* --- 1. Grid of Inner part --- */ #footer .footer__inner { display:flex; flex-direction:column; justify-content:center; padding-bottom:20px;} #footer .col_logo, #footer .col_links, #footer .col_address { display:flex; justify-content:center; overflow:hidden; border:1px dotted var(--footer-link-border); border-width:0 0 1px 0; padding:1rem 0; } @media (min-width:1024px) { #footer {padding:2.5rem 0;} #footer .footer__inner { flex-direction:row; flex-wrap:wrap; border-bottom:1px dotted var(--footer-link-border); margin-bottom:20px;} #footer .col_logo, #footer .col_links, #footer .col_address {justify-content:flex-start;width:33%;} #footer .col_logo {border-width:0;} #footer .col_links, #footer .col_address {padding-left:4%;border-width:0 0 0 1px;} } @media (min-width:560px) and (max-width:1023px) { #footer .footer__inner { flex-direction:row; flex-wrap:wrap; border-bottom:1px dotted var(--footer-link-border); margin-bottom:20px;} #footer .col_logo {width:100%;border-width:0 0 1px 0;} #footer .col_links, #footer .col_address {justify-content:flex-start;width:50%;padding-left:4%;border-width:0;margin-top:20px} #footer .col_address {border-width:0 0 0 1px;} } /* --- 2. Grid of Auxiliary part --- */ .footer__aux { display:flex; flex-direction:column; justify-content:space-between; width:100%;} .footer__aux p {margin:0;padding:0;line-height:2;text-align:center} .footer__aux .menu-aux {order:1;} .footer__aux .lang-aux {order:2;} .footer__aux .copy-aux {order:3; margin-top:20px; padding-top:20px; border-top:1px dotted var(--footer-link-border);} .footer__aux ul { align-items:center; display:flex; flex-direction:column; justify-content:center;} .footer__aux li { display:block; justify-content:center;} @media (min-width:1024px) { .footer__aux {flex-direction:row;} .footer__aux ul { align-items:flex-start; flex-direction:row; justify-content:space-around;} .footer__aux .menu-aux {order:2} .footer__aux .lang-aux {order:3;text-align:right} .footer__aux .copy-aux {order:1;text-align:left;margin-top:0;padding-top:0;border-top:0;} .footer__aux li:not(:last-child) {margin-right:2rem;} } /* 6. PAGINATION (Search results) - 2020 ============================================================================= */ .pagination_2020 { position:relative; display:flex; flex-direction:row; width:100%; max-width:320px; margin:1em auto 0 auto;} .pagination_2020 .pages {order: 3;} .pagination_2020 .prev {order: 1;} .pagination_2020 .next {order: 2;} .pagination_2020 .pages, .pagination_2020 .prev, .pagination_2020 .next { position:relative; overflow:hidden; text-align:center; height:36px; line-height:36px; margin:0 3px;} .pagination_2020 .prev, .pagination_2020 .next {width:36px;} .pagination_2020 .pages {width:70%;text-align:right;padding-right:1rem} .pagination_2020 .prev a, .pagination_2020 .next a { position:relative; display:block; overflow:hidden; border:0 !important; width:36px; height:36px; z-index:1;} .pagination_2020 .prev:before, .pagination_2020 .next:before, .pagination_2020 .prev a:before, .pagination_2020 .next a:before { display:block; overflow:hidden; position:absolute; top:50%; left:50%; width:14px; height:14px; border:1px solid white; border-width:4px 4px 0 0; content:'';} .pagination_2020 .prev:before, .pagination_2020 .prev a:before {transform:rotate(-135deg);margin:-7px 0 0 -5px;} .pagination_2020 .next:before, .pagination_2020 .next a:before {transform:rotate(45deg);margin:-7px 0 0 -10px;} .pagination_2020 .prev, .pagination_2020 .next { background-color:var(--pagination-bg); border-color:var(--pagination-border); color:var(--pagination-color); font-weight:normal;} .pagination_2020 .pages {background-color:var(--pagination-pages-bg); color:var(--pagination-pages-color);} .pagination_2020 .pages .crnt {color:var(--pagination-pages-color-current);} .pagination_2020 .prev a:hover, .pagination_2020 .prev a:focus, .pagination_2020 .next a:hover, .pagination_2020 .next a:focus {background-color:var(--pagination-bg-hover); border-color:var(--pagination-border-hover); color:var(--pagination-color-hover); } .pagination_2020 .prev.disabled, .pagination_2020 .prev.disabled:hover, .pagination_2020 .prev.disabled:focus, .pagination_2020 .next.disabled, .pagination_2020 .next.disabled:hover, .pagination_2020 .next.disabled:focus { background-color:var(--pagination-disabled-bg); border-color:var(--pagination-disabled-border); color:var(--pagination-disabled-color); cursor:default;} .brdBtm1 {border-bottom:1px gray dashed;} /* 7. BREADCRUMBS - only in Inner Pages ============================================================================= */ .breadcrumb-holder { background-color:var(--light-gray-bg); border:1px solid var(--light-gray-border); border-width:1px 0;} .breadcrumb-holder * {font-size:.75rem;} .breadcrumb {padding-top:5px;padding-bottom:5px;} .breadcrumb ol {margin:0;} .breadcrumb ol li {display:inline-block;} .breadcrumb ol li+li:before { display: inline-block; width:7px; height:7px; border:2px solid var(--bg-color-primary); border-width:2px 2px 0 0; margin:0 6px 0 2px; transform:rotate(45deg); content:'';} .breadcrumb ol li a, .breadcrumb ol li a:hover, .breadcrumb ol li a:focus {border-color:var(--light-gray-border-link); color:var(--light-gray-bg-link)} @media screen and (max-width:1000px) { .breadcrumb-holder * {font-size:.75rem} .breadcrumb ol li+li:before {width:7px;height:7px;border-width:1px 1px 0 0;} } @media screen and (max-width:600px) { .breadcrumb ol li.norm {width:0;height:0;opacity:0;display:block;} .breadcrumb ol li.parent:before {transform:rotate(-135deg);margin:0;} } /* 8. ASIDE - Tabbed SubMenu (About Us, Projects, etc.) ============================================================================= */ aside, .tab_items {width:100%;} .tab_items.full-width a.button, .tab_items.full-width a.catalogs {display:grid;line-height:normal;margin:10px 0;} aside {border-top:3px solid var(--aside-border-top-color);} @media (min-width:1024px) { aside { position:sticky; top:3rem; float:right; width:25%; border-left:1px solid var(--aside-border-left-color); border-top:0; padding-bottom:2rem;} .tab_items {width:72%;float:left} .tab_items.full-width {width:100%;float:none} .tab_items.full-width a.button, .tab_items.full-width a.catalogs {display:grid;margin-bottom:15px;} } /* --- Sub-Menu or List of Tabs --- */ div.sub_menu > ul { position:relative; width:100%; padding:0; margin-bottom:20px; font-family: var(--font-nav); border-top:1px dotted var(--light-gray-border);} div.sub_menu > ul a { display:block; overflow:hidden; padding:10px 10px 10px 30px; color:#048; border-bottom:1px dotted var(--light-gray-border) !important; cursor:pointer;} div.sub_menu > ul a:not(.button):not(.selected):focus, div.sub_menu > ul a:not(.button):not(.selected):hover {background-color:var(--submenu-bg-link-hover)} div.sub_menu a.selected, div.sub_menu a.selected:hover, div.sub_menu a.selected:focus {background-color:var(--bg-color-primary); color:var(--bg-color-primary-text);} /* --- Tab's Content --- */ .tabContent { position:relative; display:block; overflow:hidden; padding:0 0 1rem 0;} body :not(.donut):not(.svg-data-value)[aria-hidden='true'] {display:none;} body :not(.donut):not(.svg-data-value)[aria-hidden='false'] {display:block;} /* 9. ACCORDION Items (Services, List of News, etc.) ============================================================================= */ .accordionItem { position:relative; margin:10px 0 0 0; padding:0 !important; background-color:white; background-clip:padding-box; border:1px #ddd solid;} .accordionItem .panel {margin:20px;} .accordionItem h3 { position:relative; display:block; overflow:hidden; margin:0; padding:13px 50px 13px 15px !important; font-size: 1.05em; line-height: 1; cursor:pointer;} .accordionItem.hideAccrdn h3 { background-color:transparent; -webkit-box-shadow: 0 8px 15px -12px #999; -moz-box-shadow: 0 8px 15px -12px #999; box-shadow: 0 8px 15px -12px #999; } .accordionItem.hideAccrdn h3:hover, .accordionItem.hideAccrdn h3:focus { color:#039; -webkit-box-shadow: 0 16px 20px -18px #164d86; -moz-box-shadow: 0 16px 20px -18px #164d86; box-shadow: 0 16px 20px -18px #164d86; } .accordionItem.showAccrdn h3 { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset; background-color:#f7f7f7;} .accordionItem.hideAccrdn > .panel { position:absolute;overflow:hidden;left:-9999em;top:-9999em; color:#000;background-color:#fff;width:9000em;height:0 !important;} .accordionItem.showAccrdn > .panel { position:relative;overflow:hidden;height:auto;} .accordionItem.showAccrdn > .panel .button { } .accordionItem.showAccrdn h3:before, .accordionItem.hideAccrdn h3:before { display:block; overflow:hidden; position:absolute; top:50%; right:15px; width:24px; height:24px; margin-top:-12px; content:'';} .accordionItemStyle2 h3 { padding:15px 50px 15px 15px !important; } .accordionItemStyle2.showAccrdn h3:before, .accordionItemStyle2.hideAccrdn h3:before { position:absolute; display:block; overflow:hidden; top:50%; right:10px; width:10px; height:10px; margin-top:-5px; border-radius:0; border:0; border-right:3px solid #159; border-top:3px solid #159; transform:rotate(135deg); background-image:none; content:'';} .accordionItemStyle2.showAccrdn h3:before, .details.showedDIV h4:before { margin-top:-2px; transform:rotate(-45deg);} .accordionItem.showAccrdn h3:before {background-position:-70px -360px;} /*X*/ .accordionItem.hideAccrdn h3:before {background-position:-30px -360px;} /*+*/ /* ----------------------------------------------- 27.09.2016, Diana_TT --- */ .accordionItem .panel h4 {position:relative;} /* --- For News --- */ .home--info h3 span, .accordionItem h3 span { display:inline-block; color:#222; vertical-align:top} .home--info h3 span.date, .accordionItem h3 span.date {font-size:90%;width:6rem;} .home--info h3 span.title, .accordionItem h3 span.title {font-size:100%;clear:right;color:#039;width:85%} .home--info h3 span.descr, .accordionItem h3 span.descr {margin-top:5px;font-size:85%;margin-left:6.4rem;} @media (max-width:1024px) { .home--info h3 span.title, .accordionItem h3 span.title {width:80%} } @media (max-width:630px) { .home--info h3 span.date, .home--info h3 span.title, .home--info h3 span.descr, .accordionItem h3 span.date, .accordionItem h3 span.title, .accordionItem h3 span.descr {display:block;margin:0;width:auto} } /* --- For Single Row (pages: Administrative Services, etc.) --- */ .accordionItem h3 b.singleRow { display: block; margin-top:0; color:#039 !important; font-weight:normal !important;} /* --- All types of Accordion --- */ .accordionItem.showAccrdn h3 a:link, .accordionItem.showAccrdn h3 b {color:#048 !important;} /* 10. SHOW/HIDE Items (toggle visibility - ZOP) ============================================================================= */ .details { position:relative; margin:10px 0; padding:0 !important; background-color:white;} .details .panel {margin:5px 0 0 0;} .details h4 { position:relative; display:block; margin:0; padding:5px 30px 5px 15px !important; font-weight:normal; font-size: 17px; color:#039; cursor:pointer; text-align:right; background-clip:padding-box; border:1px #ddd solid; float:right} .details.hiddenDIV h4 {background-color:transparent;} .details.hiddenDIV h4:hover, .details.hiddenDIV h4:focus, .details.showedDIV h4 {border-color:#059;} .details.hiddenDIV .panel { position:absolute;overflow:hidden;left:-9999em;top:-9999em; color:#000;background-color:#fff;width:9000em;height:0 !important;} .details.showedDIV .panel { position:relative;overflow:hidden;height:auto;width:100%;} .details.showedDIV h4:before, .details.hiddenDIV h4:before { display:block; overflow:hidden; position:absolute; top:50%; right:5px; width:13px; height:10px; margin-top:-3px; content:'';} /* --- PRODUCTS details (tematichni podbori i t.n. i t.p.) --- */ article.products { position:relative; display:block; overflow:hidden; clear:both; padding:0;} .one-edge-shadow { position:relative; display:block; overflow:hidden; height:30px; border-bottom:1px solid rgba(22,77,134,.15); -webkit-box-shadow: 0 8px 12px -12px rgba(22,77,134,.5); -moz-box-shadow: 0 8px 12px -12px rgba(22,77,134,.5); box-shadow: 0 8px 12px -12px rgba(22,77,134,.5); margin:0 0 30px 0;} .products p {margin:0 0 0 3em !important;} .products h4, .products h3.title { padding:0 0 0 .5em; font-size:1.2em !important; font-weight:normal; line-height:1.25 !important; color:#339 !important;} /* 11. MODAL Window (`info-centre`, `geolocation` in page Contacts - OTPADNA principa na Modal Window, stava static-page) ============================================================================= */ .divModal { width:900px; margin:20px auto; border:4px solid #039; background-color:#fff; clear:both;} .divModal.no__width {width:auto} .wrapper_Modal {position:relative;margin:20px;} .wrapper_Modal .bg_light_blue {padding:10px 20px;margin:0;} .wrapper_Modal h2 > span {margin-left:.5em;} /* 12. FORM elements ============================================================================= */ form {position:relative;} form p {margin-top:1em;position:relative;} form textarea {height:220px;} label {font-weight:700;position:relative;} /* --- Required --- */ .asterisk-top:before, /* 13.07.2020, Adm.usl. (CAO) */ .arr-right:before, /* 09.07.2020, Adm.usl. (CAO) */ [class*="required"]:before { display:block; position:absolute; left:-15px; top:50%; width:10px; height:10px; margin:-5px 0 0 0; background-repeat:no-repeat; content:'';} .asterisk-top:before, .required:before { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23159' d='M9 5.4c-0.8 0.3-1.4-0.1-1.7 0C7.1 5.5 6.9 5.8 6.6 5.9 c0 0 0 0 0 0c0.1 0.2 0.1 0.7 0.3 0.9c0.2 0.3 0.9 0.3 1.4 1c0.4 0.6 0.4 1.5-0.2 1.9C7.5 10.2 6.7 10 6.2 9.4 C5.7 8.7 5.9 8 5.7 7.7C5.6 7.6 5.2 7.5 5 7.3C4.8 7.5 4.4 7.6 4.3 7.7C4.1 8 4.3 8.7 3.8 9.4C3.3 10 2.5 10.2 1.9 9.8 C1.3 9.3 1.3 8.5 1.7 7.9c0.5-0.7 1.2-0.7 1.4-1c0.1-0.2 0.1-0.7 0.3-0.9c0 0 0 0 0 0C3.1 5.8 2.9 5.5 2.7 5.4 C2.4 5.3 1.8 5.6 1 5.4c-0.7-0.2-1.2-1-0.9-1.7c0.2-0.7 1-1 1.7-0.8c0.8 0.3 1.1 0.9 1.4 1c0.1 0 0.5 0 0.7 0c0-0.3 0.3-0.6 0.3-0.8 c0-0.4-0.5-0.8-0.5-1.7C3.7 0.7 4.3 0 5 0s1.3 0.7 1.3 1.4c0 0.9-0.5 1.3-0.5 1.7c0 0.2 0.3 0.5 0.3 0.8c0.2 0 0.6 0.1 0.7 0 c0.4-0.1 0.6-0.7 1.4-1C8.9 2.7 9.7 3 9.9 3.7C10.2 4.4 9.7 5.1 9 5.4z'/%3E%3C/svg%3E");} .required-error:before { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23a05' d='M9 5.4c-0.8 0.3-1.4-0.1-1.7 0C7.1 5.5 6.9 5.8 6.6 5.9 c0 0 0 0 0 0c0.1 0.2 0.1 0.7 0.3 0.9c0.2 0.3 0.9 0.3 1.4 1c0.4 0.6 0.4 1.5-0.2 1.9C7.5 10.2 6.7 10 6.2 9.4 C5.7 8.7 5.9 8 5.7 7.7C5.6 7.6 5.2 7.5 5 7.3C4.8 7.5 4.4 7.6 4.3 7.7C4.1 8 4.3 8.7 3.8 9.4C3.3 10 2.5 10.2 1.9 9.8 C1.3 9.3 1.3 8.5 1.7 7.9c0.5-0.7 1.2-0.7 1.4-1c0.1-0.2 0.1-0.7 0.3-0.9c0 0 0 0 0 0C3.1 5.8 2.9 5.5 2.7 5.4 C2.4 5.3 1.8 5.6 1 5.4c-0.7-0.2-1.2-1-0.9-1.7c0.2-0.7 1-1 1.7-0.8c0.8 0.3 1.1 0.9 1.4 1c0.1 0 0.5 0 0.7 0c0-0.3 0.3-0.6 0.3-0.8 c0-0.4-0.5-0.8-0.5-1.7C3.7 0.7 4.3 0 5 0s1.3 0.7 1.3 1.4c0 0.9-0.5 1.3-0.5 1.7c0 0.2 0.3 0.5 0.3 0.8c0.2 0 0.6 0.1 0.7 0 c0.4-0.1 0.6-0.7 1.4-1C8.9 2.7 9.7 3 9.9 3.7C10.2 4.4 9.7 5.1 9 5.4z'/%3E%3C/svg%3E");} .required-error {color:#a05;} .asterisk-top:before {top:12px;} /* --- Inputs --- */ input, textarea, select, .segmented-button label {font-size:1.1875rem; line-height:1rem !important; font-family:var(--font-body) !important} select {font-size:1.125rem !important} input, textarea, select, optgroup {color:var(--text-link);} /*#039*/ input, textarea, select {background-color:var(--light-gray-bg);} /* #fafbfc */ input, select {min-height:36px;height:auto} input[type='search'], input[type='text'], select, textarea {border:1px solid var(--gray-DDD);} input[type='search'], input[type="text"], input[type="submit"], select, textarea { position:relative; margin:0; padding:0 10px} input:hover, select:hover, textarea:hover {border-color:var(--blue-dark)} input:focus, textarea:focus, select:focus, select option:focus {outline:none;} input:focus, select:focus, textarea:focus { border-color:var(--blue-focus); box-shadow:0 0 0 3px var(--blue-focus-shadow);} textarea {resize:vertical;} /* --- 5.03.2020 - Hubavini za pisatelite --- */ .lead { position:relative; margin-top:-15px; height:20px; background-color:var(--gray-EEE); border-radius:0 0 4px 4px; border:1px solid var(--gray-DDD); /*cursor:s-resize;*/ z-index:-1;} .lead_inner { position:relative; width:28px; height:1px; margin:12px auto 0 auto; background-color:var(--gray-999);} .lead_inner:before, .lead_inner:after { position:absolute; display:block; width:28px; height:1px; content:'';} .lead_inner:before {background-color:var(--gray-999);bottom:-3px;} .lead_inner:after {background-color:var(--gray-999);top:-3px;} input[type="radio"] {margin:0 .4em 0 0} input[type="submit"] { width:auto !important; margin:0.5em; padding:0 1rem; text-align:center; color:white; background-color:var(--bg-color-primary); border:0px solid transparent; cursor:pointer; letter-spacing:2px; text-transform:uppercase; font-size:.875rem;} input[type="submit"]:hover, input[type="submit"]:focus { background-color:var(--bg-color-primary-hover); box-shadow:none;} select:hover, select:focus, select:active {background-color:white !important;} select > option:hover, select > option:focus, select > option:active, select > option:checked { background-color:var(--bg-color-primary) !important; color:var(--bg-color-primary-text); cursor:pointer; padding:2px;} /* --- 18.01.2022 �. --- */ select > option {padding:2px;} select > option:disabled {font-style:italic;} select.minimal { height:22px; padding-right:2.8rem; -webkit-appearance: none; -moz-appearance: none; background: var(--light-gray-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23059' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;} select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000;} /******************************************************************* 14.03.2018 * * Custom Checkboxes & Radio Buttons CSS3 * *****************************************************************************/ /* --- The container --- */ .container { position:relative; display:block; padding-left:35px; line-height:24px; font-weight:normal; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:pointer;} /* --- Hide the browser's default checkbox --- */ .container input { position:absolute; left:0; top:0; opacity:0; cursor:pointer;} /* --- Custom checkmark or radio-check --- */ .checkmark { position:absolute; left:0; top:0; height:24px; width:24px; background-color:var(--checkmark-bg); border:1px solid var(--checkmark-border);} /* --- The indicator (hidden when not checked) --- */ .checkmark:after { position:absolute; display:none; content:'';} /* --- Show the indicator when checked --- */ .container input:checked ~ .checkmark:after {display:block;} /* --- Background: on mouse-over --- */ .container input:focus ~ .checkmark {border-color:var(--blue-focus)} /*#37d*/ .container:hover input ~ .checkmark {border-color:var(--blue-focus)} /* --- Background: when the checkbox or radio-button is disabled --- */ .container input:disabled ~ .checkmark, .container:hover input:disabled ~ .checkmark { background-color:var(--checkmark-bg-disabled); border-color:var(--checkmark-border-disabled);} /* --- Background: when the checkbox or radio-button is checked --- */ .container input:checked ~ .checkmark {background-color:var(--bg-color-primary)} /* -------------------------------------------------- Style the indicator ---*/ /* --- Checkboxes --- */ .custom-checkboxes .container { display:inline-block; margin:0} .custom-checkboxes .checkmark:after, .custom-checkboxes .checkmark:before { position:absolute; display:block; width:2px; background-color:var(--white); opacity:0; content:'';} .custom-checkboxes .checkmark:before { top:10px; left:6px; height:8px; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);} .custom-checkboxes .checkmark:after { top:3px; left:13px; height:16px; -webkit-transform:rotate(30deg); -ms-transform:rotate(30deg); transform:rotate(30deg);} .custom-checkboxes input:checked ~ .checkmark {border-color:var(--checkbox-bg);background-color:var(--checkbox-border)} .custom-checkboxes input:checked ~ .checkmark:before, .custom-checkboxes input:checked ~ .checkmark:after {opacity:1} /* --- Radio buttons --- */ .custom-radio-buttons {display:block;} .custom-radio-buttons .container { display:inline-block; margin-left:20px; padding-left:30px;} .custom-radio-buttons .container:nth-child(2) {margin-left:0;} /*:first-child*/ .custom-radio-buttons .checkmark:after { display:block; /* The indicator is visible! */ top:6px; left:6px; width:10px; height:10px; background:var(--white)} .custom-radio-buttons input:checked ~ .checkmark:after {background:var(--checkbox-border)} .custom-radio-buttons input:checked ~ .checkmark {border-color:var(--checkbox-bg);background-color:var(--white)} /* --- PLACEHOLDER: do not group these rules! --------------------------------------------------------------------------- */ *::-webkit-input-placeholder { /* WebKit browsers */ font-style:italic; font-size:90%; color:var(--placeholder-color);} *:-moz-placeholder { /* FF 4-18 */ font-style:italic; font-size:90%; color:var(--placeholder-color); opacity:1;} *::-moz-placeholder { /* FF 19+ */ font-style:italic; font-size:90%; color:var(--placeholder-color); opacity:1;} *:-ms-input-placeholder { /* IE 10+ */ font-style:italic; font-size:90%; color:var(--placeholder-color);} /* --- On iOS, the placeholder doesn�t disapear on focus!!! --- */ :focus::-webkit-input-placeholder{color:transparent;} /* 12.A. SURVEY : form elements + SVG (for results) ============================================================================= */ /* --- SURVEY Form --------------------------------------------------------------------------- */ #ncd_srv h4 {padding:0 0 .5rem 0;font-weight:normal;font-size:1.5rem;} #ncd_srv label {font-weight:normal} #ncd_srv p {margin:0;padding:.5rem .5rem .5rem 1rem;} #ncd_srv textarea {height:100px;resize:vertical;} #ncd_srv [class*="srv_"] { padding:1rem; margin:0 0 1rem 0; border-radius:8px; border:1px solid var(--survey-border)} #ncd_srv .srv_odd {background-color:var(--survey-bg-odd)} #ncd_srv .srv_even {background-color:var(--survey-bg-even)} /* --- SVG results --------------------------------------------------------------------------- */ .row.srvRes {margin-bottom:30px;} .srvRes h3 { font-size: 1.25em; line-height: 1; padding: 0 0 5px 0; font-weight: bold;} .SRV_flex-row {display:flex;flex-wrap:wrap;text-align:left;} [class*="SRV_flex-item"] {flex:50%;padding:0;} .SRV_flex-item-left {flex:250px;} .SRV_flex-item-right {flex: calc(100% - 250px);} @media (max-width:450px) { [class*="SRV_flex-item"] {flex:100%;} } .svg-results { position:relative; width:200px; height:200px; margin:0 20px;} .svg-container {position:absolute;width:100%;height:100%;} .svg-data {overflow:hidden;z-index:99;} .svg-data .data{ position:absolute; width:100%; height:100%; text-align:center;} .svg-data .data > div{padding:20px;font-size:.75rem} .donut {width:100%;height:100%;} .donut-hole {fill:white;} /* Answers data */ .answers-key-list { margin:0; padding:0; list-style:none;} .answers-key-list li { margin:8px 0 0 0; padding:0 0 0 32px; position:relative; line-height:20px; /* vizh :before*/ min-height:20px;} .answers-key-list li:before { display:block; top:0; left:0; width:20px; height:20px; background-color:var(--SVG-ring); -webkit-box-sizing:content-box !important; -moz-box-sizing:content-box !important; box-sizing:content-box !important; position:absolute; pointer-events: none; content:'';} /* Colors */ .donut-ring {stroke:var(--SVG-ring)} .sgmnt_1 { stroke:var(--SVG-violet)} .sgmnt_2 { stroke:var(--SVG-orange)} .sgmnt_3 { stroke:var(--SVG-green)} .sgmnt_4 { stroke:var(--SVG-cyan)} .sgmnt_5 { stroke:var(--SVG-red)} .sgmnt_6 { stroke:var(--SVG-gray)} .answers-key-list li.sgmnt_1:before {background-color:var(--SVG-violet);} .answers-key-list li.sgmnt_2:before {background-color:var(--SVG-orange);} .answers-key-list li.sgmnt_3:before {background-color:var(--SVG-green);} .answers-key-list li.sgmnt_4:before {background-color:var(--SVG-cyan);} .answers-key-list li.sgmnt_5:before {background-color:var(--SVG-red);} .answers-key-list li.sgmnt_6:before {background-color:var(--SVG-gray);} .answers-key-list li.sgmnt_Last:before {background-color:var(--SVG-ring);} /* 13. ARROWED BLOCK (block-link with arrow at right) : PROJECTS ============================================================================= */ .block_link { position:relative; display:block; overflow:hidden; /*float:left;*/ width:100%; min-height:130px; margin:0 0 40px 0; color:var(--text-link); -webkit-box-shadow: 0 8px 15px -12px var(--main-shadow); -moz-box-shadow: 0 8px 15px -12px var(--main-shadow); box-shadow: 0 8px 15px -12px var(--main-shadow);} .block_link:hover, .block_link:focus { color:var(--text-link); -webkit-box-shadow: 0 10px 15px -12px var(--main-shadow-hover); -moz-box-shadow: 0 10px 15px -12px var(--main-shadow-hover); box-shadow: 0 10px 15px -12px var(--main-shadow-hover);} a.block_link {border-bottom:none;} .block_link i {color:var(--black) !important;} /* --- Arrow --- */ .block_link:before { position:absolute; display:block; right:20px; bottom:30px; width:0.8em; height:0.8em; content:''; border-right:0.4em solid var(--arrow-gray); border-top:0.4em solid var(--arrow-gray); transform:rotate(45deg); } a.block_link:hover:before, a.block_link:focus:before {border-color:var(--arrow-color);} /* --- Projects - list --- */ .block_link dt { border:1px #ddd solid; border-width:1px 1px 0 1px; padding:1em; background-color:#f5f5f5;} .block_link dd { border:1px #ddd solid; border-width:0 1px 1px 1px; padding:.6em 60px .2em 1em; background-color:transparent;} .block_link:hover dt, .block_link:focus dd {border-color:} /* --- Projects - details page --- */ .projects {padding-bottom:1em;} .projects i[class*="logos"] { display:block; overflow:hidden; background-image:url("../_img/logos/logos_projects_OPAK_EU_420x90.png"); background-position:center right; background-repeat:no-repeat; background-size:contain; height:90px; width:auto; max-width:100%;} @media screen and (min-width:1024px) { .projects i[class*="logos"] { float:right; width:420px; height:90px; margin:0 0 10px 30px;} } .projects i.logos_LLP {background-image:url("../_img/logos/logo_LLL_Program.png");} .projects i.logos_ISOBAQ {background-image:url("../_img/logos/logo_CF_Erasmus.png");} .projects i.logos_OPDU_EU_SEF {background-image:url("../_img/logos/logos_projects_OPDU_EU_SEF_420x90.png");} .projects i.logos_EU { background-image:url("../_img/logos/logos_eu.jpg"); width:40%; height:90px; } .projects h3 {padding:0;} .block_link dt, dl.round dt { -webkit-border-radius:12px 12px 0 0; -khtml-border-radius:12px 12px 0 0; -moz-border-radius:12px 12px 0 0; -ms-border-radius:12px 12px 0 0; -o-border-radius:12px 12px 0 0; border-radius:12px 12px 0 0;} /* 14. Rounded DEFINITION LIST (Profil kupuvach, etc.) ============================================================================= */ dl.round dt, dl.round dd {padding:10px;} dl.round dt { background-color:#f6f6f6; border:1px #d0d0d0 solid; border-width:1px 1px 0 1px;} dl.round dd { border:1px #d0d0d0 solid; -webkit-border-radius:0 0 12px 12px; -khtml-border-radius:0 0 12px 12px; -moz-border-radius:0 0 12px 12px; -ms-border-radius:0 0 12px 12px; -o-border-radius:0 0 12px 12px; border-radius:0 0 12px 12px;} /* 15. Tree structure Organization chart (About Us) NEW 24.03.2020, Diana_TT ============================================================================= */ .chart .boss { text-transform:uppercase; background-color:#c8e4f8; line-height:1.55; padding:5px 15px !important; border-radius:6px;} .chart {max-width:700px} .chart .accordionItem { border:1px solid #c8e4f8; border-radius:6px;} .chart .accordionItem h3 { background-color:#c8e4f8; line-height:1.55; padding-top:5px !important; padding-bottom:5px !important;} .chart .accordionItem h3, .chart .accordionItem.hideAccrdn h3:hover, .chart .accordionItem.hideAccrdn h3:focus { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;} .chart .accordionItem.showAccrdn, .chart .accordionItem:hover, .chart .accordionItem:focus {border-color:#369 !important;} .chart .accordionItem h3 span {display:block;} .chart .boss, .chart .accordionItem .abreviation {font-size:1.25rem;color:#037;} .chart .accordionItem .full_text { font-size:1.00rem; color:#222; font-family:var(--font-body) !important;} .chart .accordionItem h3:before { background-color:white; border-radius:50%;} .chart .accordionItem.hideAccrdn h3:before {background-position: -70px -390px;} .additional_info p {padding-left:30px;} /* --- icons: info & close --- */ .additional_info p:before { position:absolute; left:0; top:0; display:block; width:20px; height:20px; content:'';} .additional_info p.fax:before {background-position:-70px 0;} .additional_info p.phone:before {background-position:-70px -30px;} .additional_info p.envelope:before, .additional_info p.address:before {background-position:-70px -60px;} .additional_info p.web:before {background-position:-70px -90px;} .additional_info p.mail:before {background-position:-70px -120px;} .additional_info p.clock:before {background-position:-70px -150px;} .additional_info p.pen:before {background-position:-70px -180px;} .additional_info p.mobile:before {background-position:-70px -210px;} .additional_info p.transp:before {background-image:none;} /* 16. ACCORDION Items - FAQ ============================================================================= */ .sFAQ .accordionItem.showAccrdn h3, .sFAQ .accordionItem.hideAccrdn h3 { font-size: 1.14em; line-height: 1; padding-top:10px !important; padding-bottom:10px !important; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;} /* --- Arrow DOWN Blue --- */ .sFAQ .accordionItem.hideAccrdn h3:before, .sFAQ .accordionItem.showAccrdn h3:before, .details.showedDIV h4:before, .details.hiddenDIV h4:before { position:absolute; display:block; overflow:hidden; top:50%; right:10px; width:10px; height:10px; margin-top:-5px; border-radius:0; border:0; border-right:3px solid #159; border-top:3px solid #159; transform:rotate(135deg); background-image:none; content:'';} /* --- Arrow UP Blue --- */ .sFAQ .accordionItem.showAccrdn h3:before, .details.showedDIV h4:before { margin-top:-2px; transform:rotate(-45deg);} /* 17. CALCULATOR ============================================================================= */ /*.calc {position:relative;} .calc input[type="text"] {padding:.1em .3em;width:auto;max-width:50px;} .calc .fz120 {font-size:120%;} .calc .text, .calc .textSum { text-align:right;} .calc .textSum { font-size:1.2em; font-weight:bold;} .calc span.textSum {font-weight:normal;} .calc .blue {color:#135496;} .calc .textSum.total { background-color:#135496; color:white;} #Sum_DDS, #totalSum {padding:2px 10px;} .calc .brdDoubleTop {padding-top:10px;margin-bottom:0;border-top:3px double #135496;} .calc .brdDoubleBtm {padding-bottom:10px;border-bottom:3px double #135496;}*/ .calc { position: relative; width: auto; max-width: 800px; margin: 0 auto; padding: 40px; } .calc .calc-row { display: grid; grid-template-columns: auto auto; margin: 5px 0; padding: 5px 0; border-bottom:1px gray dashed; } .calc .calc-row .calc-row-left { align-self: center; justify-self: start; } .calc .calc-row .calc-row-left .calc-row-title { display: block; margin: 0 0 10px 0; font-weight: 600; font-size: 18px; } .calc .calc-row .calc-row-left .calc-row-title strong { align-self: center; justify-self: start; font-weight: 600; } .calc .calc-row .calc-row-right { align-self: center; justify-self: end; text-align: right; } .calc .calc-row .calc-row-right div span { display: block; margin: 0; padding: 0; color: #111; font-size: 15px; } .calc .calc-row .calc-row-right div strong { display: block; margin: 0; padding: 0; color: #093F72; font-style: normal; font-weight: 700; font-size: 18px; } .calc input[type="text"] {padding:.1em .3em;width:auto;max-width:50px;} .calc .fz120 {font-size:120%;} .calc .text, .calc .textSum { text-align: right; } .calc .textSum { font-size: 1.2em; font-weight: bold; } .calc span.textSum {font-weight:normal;} .calc .blue { color: #135496; } .calc .textSum.total { background-color: #135496; color: white; } .Sum_DDS, .totalSum {padding:2px 10px;} .calc .brdDoubleTop { padding-top:10px;margin-bottom:0;border-top:3px double #135496; } .calc .brdDoubleBtm { padding-bottom:10px;border-bottom:3px double #135496; } @media screen and (max-width:1024px) { .calc { max-width: 100%;padding: 30px 15px 60px 15px; } .calc .PageName { text-align: center; } .calc .calc-row { grid-template-columns: auto; padding: 0 0 20px 0; } .calc .calc-row .calc-row-left { align-self: center; justify-self: center; } .calc .calc-row .calc-row-left .calc-row-title { margin: 0 0 15px 0; text-align: center; font-size: 20px; } .calc .calc-row .calc-row-right { align-self: center; justify-self: center; text-align: center; } .calc .calc-row .calc-row-right div span { display: inline-block; font-size: 13px; } .calc .calc-row .calc-row-right div strong { display: inline-block; font-size: 15px; } .calc .m_L1em { margin: 0; } .calc p { text-align:center; } .calc .custom-radio-buttons { text-align: center; } } /* 18. ZOOM EFFECTS / MODAL EFFECTS ============================================================================= */ #fake {overflow:hidden;width:100%;} #fake > div:last-child {border-bottom:1px dashed var(--SVG-gray)} #fake article { vertical-align:top; width:100%; margin:0; padding:0; border-top:1px dashed var(--SVG-gray)} #fake article div {margin:0 20px 20px 20px;} #fake h3 {padding:0 0 .5em 0;line-height:1;} #fake p {margin:0;} #fake button { margin:0; padding:0; border:0; background-color: transparent;} @media screen and (min-width:1024px) { #fake article.disp_row { display:table-cell; vertical-align:top; width:50%; margin:0;} #fake article:nth-child(odd) {border-right:1px dashed var(--SVG-gray)} } /* --- Zoom effect --- */ #fake .zoom { position:relative; display:inline-block; overflow:hidden; height:auto; margin:20px; padding:10px 0; cursor:zoom-in; text-align:center;} #fake .zoom > img { width:auto; height:auto; max-width:80%; z-index:66;} #fake .zoom > .text, #fake .zoom > .overlay { position:absolute; height:auto; opacity:1;} #fake .zoom > .overlay { top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.2); z-index:88;} .zoom > .text { bottom:0; left:5%; width:90%; margin:10px 0; padding:10px; background-color:rgba(255,255,255,.85); font-size:90%; text-transform:uppercase; z-index:99;} .zoom:hover > .text, .zoom:focus > .text {background-color:rgba(0,0,0,.85);color:white;} /* --- Modal window ---*/ .modal { display:none; position:fixed; left:0; top:0; overflow:auto; width:100%; height:100%; padding-top:60px; background-color:rgba(0,0,0,0.8); z-index: 99999 !important;} .modal-content { margin:auto; display:block; width:auto; max-width:80%; height:auto; max-height:80%;} .modal-text {text-align:center;color:white;} .closeModal { position:absolute; top:0; right:35px; color:#f5f5f5; font-size:50px; font-weight:bold;} .closeModal:hover, .closeModal:focus {color:#bbb;text-decoration:none;cursor:pointer;} /* 19. AUTHORIZATION FORM ============================================================================= */ #auth_form { max-width: 500px; padding: 20px; margin: 0 auto; background: #f5f5f5; border: 1px solid #ddd; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: #111; } #auth_form .form-group { display: block; position: relative; margin: 15px 0; } #auth_form .form-group label { display: block; height: 24px; line-height: 24px; margin: 0 0 5px 0; font-size: 15px; font-weight: 400; } #auth_form .form-group input[type="text"], #auth_form .form-group input[type="password"], #auth_form .form-group input[type="email"] { display: block; width: 100%; font-size: 15px; height: 45px; padding: 0 10px; outline: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #ccc; } #auth_form .auth_btn { display: block; margin: 20px auto 0 auto; width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; background: #093F72; color: #fff; border: 0; outline: 0; text-transform: uppercase; font-weight: 500; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #auth_form .auth_btn:hover { background: #111; } #auth_form .auth_error { display: block; text-align: center; color: #DD4B39; font-size: 14px; padding: 15px; } /* A. HOME Page ============================================================================= */ /* --- Top-block with Background Image --- */ .home--top { padding:30px 0 0 0; background:#fff url("../_img/nacid_home_2021.jpg") right top no-repeat; background-size:contain;} .home--news {width:100%;} @media screen and (min-width:1024px) { .home--top {background-size:initial;min-height:400px;} .home--news {width:55%;} } @media screen and (min-width:700px) {.home--news {width:60%;}} .home--news h2 { position:relative; display:inline; font-size:2.3em; line-height:50px; color:#333 !important; letter-spacing:3px; padding:0 50px .33em 0 !important;} .home--news ul li {margin:1em 0 0 0;} .home--news ul p.date {display:block;overflow:hidden;font-size:90%;margin:0;color:#585858;text-transform:uppercase;} .home--news ul p.date span {color:#000;} .home--news ul p.link {display:block;overflow:hidden;font-size:120%;margin:0;} /* --- Blocks grid ver.2 --- */ .blocks--holder { display:flex; flex-wrap:wrap; margin:0; padding:0;} .blocks--holder .blocks { flex:1 0 30%; margin:0; padding:10px;} @media screen and (max-width:950px) {.blocks--holder .blocks {flex:1 0 45%;}} @media screen and (max-width:680px) {.blocks--holder .blocks {flex:1 0 100%;}} .blocks .content { position:relative; display:block; overflow:hidden; width:100%; padding:8px;} /* --- Blocks: SVG-icons and links --- */ .holder { border-radius:4px; border:4px solid transparent;} .holder:hover, .holder:focus {border-color:#def;} .holder:focus-within {border-color:#def;} a.single {border:0;position:relative} a.single h3 {color:var(--text-link);} a.single:hover span, a.single:focus span {border-bottom:2px solid var(--link-border-hover);} /* --- Block's icons --- */ .home_blocks h3 { position:relative; padding:0 0 0 42px !important; line-height:32px;} .home--news h2:after, .home_blocks h3:before { position:absolute; display:block; background-image:url('../_img/NACID_icons_50x50_2022.svg'); content:'';} .home--news h2:after { right:0; top:5px; width:40px; height:40px; background-position:-10px -620px;} .home_blocks h3:before { left:0; top:0; width:32px; height:32px;} .home_blocks h3.h-Services:before {background-position:-10px -180px;} .home_blocks h3.h-Projects:before {background-position:-10px -220px;} .home_blocks h3.h-Purchaser:before {background-position:-10px -258px;} .home_blocks h3.h-Papers:before {background-position:-10px -297px;} .home_blocks h3.h-Database:before {background-position:-10px -340px;} .home_blocks h3.h-KAP:before {background-position:-10px -380px;} .home_blocks h3.h-NBIO:before {background-position:-10px -418px;} .home_blocks h3.h-QUAL:before {background-position:-10px -454px;} .home_blocks h3.h-SROB:before {background-image:url('../_img/NACID_icons_hSROB.png');background-size: 100%;} .home_blocks h3.h-VUZ:before {background-position:-10px -500px;} .home_blocks h3.h-BPOS:before {background-position:-10px -540px;} .home_blocks h3.h-NPM:before {background-position:-10px -580px;} .home_blocks h3.h-S2B:before {background-image:url('../_img/NACID_icons_hS2B.png');background-size: 100%;} /* --- Block's effects (inner styles) --- */ .home_blocks p {margin:.5em 0 0 0 !important; line-height:1.2; color:var(--text-headings) !important} .home_blocks ul {padding:.5em 0 0 42px;} .home_blocks ul li {margin-bottom:7px;} .home_blocks ul li a, .home_blocks ul li a * { font-family:var(--font-home-page); font-weight:400} /* --- Za da ne promenya cveta na spisachnite linkove --- */ .home--news ul a, .home_blocks a, .home_blocks a:visited, .home_blocks a:link, .home_blocks a:hover, .home_blocks a:active {color:var(--text-link); border-color:var(--link-border);} .home--news ul a:hover, .home--news ul a:focus, .home_blocks a:hover, .home_blocks a:focus {border-bottom-width:3px; border-color:var(--link-border-hover)} /* --- Awards (Sertificates) --- */ .bloksInRow {display:block;width:100%;} .bloksInRow .row {display:block;} .bloksInRow .row .col_3n { vertical-align:top; padding:20px; border-top:10px white solid; width:100%;} .bloksInRow .row .col_3n:first-child { border-top:0; vertical-align:middle; text-align:left} @media screen and (min-width:700px) { .bloksInRow {display:table;width:100%;} .bloksInRow .row {display:table-row;} .bloksInRow .row .col_3n {display:table-cell;border-top:0;border-left:10px white solid;width:33.33333%;} .bloksInRow .row .col_3n:first-child {border-left:0;text-align:center} } .bloksInRow p {margin:0;} .bloksInRow .date {display:block;font-size:90%;} .bloksInRow .text {font-weight:500;} .bloksInRow a {display:inline-block;color:#fff;} .bloksInRow a, .bloksInRow a:visited, .bloksInRow a:link, .bloksInRow a:active {border-color:#b2ccf0;} .bloksInRow a:hover, .bloksInRow a:focus {border-bottom-color:#fff;} .awrd { position:relative; display:block; overflow:hidden; padding:0; line-height:2; text-transform:uppercase; letter-spacing:.1em} /* --- 16.03.2020 --- */ .home--info {width:100%;} @media screen and (min-width:950px) {.home--info {width:75%;}} /* B. CONTACTS Page ============================================================================= */ form#ncd_wf {margin-left:16px;} form#ncd_wf #phones_div p {color:#059;} form#ncd_wf #phones_div p#phones_inr {color:black;} form#ncd_wf .error { border: 2px solid #FF9800; } .contacts-form-msg { display: block; text-align: left !important; float: none; font-size: 17px; font-weight: bold; margin: 10px 0; padding: 0; color: #3f7f00; } .institution_map2 { position:relative; overflow:hidden; width:100%; height:600px; border-top:10px solid #059; clear:both;} .institution_map2 address { margin:40px 0 0 10px; font-size:1rem; width:auto; max-width:500px;} @media (min-width:1024px) { .institution_map2 address {margin:70px 0 0 140px;} } /* --- 03.04.2017, Diana_TT, Academic Recognition - KAP --- */ .institution_map2.info-KAP { background-position:46% top !important; margin:20px 0 0 0;} .institution_map2.info-KAP address {margin-left:0} /* --- End of changes, 03.04.2017, Diana_TT --- */ .institution_map2 address .MapTitle { margin-bottom:1rem; padding:0; text-align:center;} .institution_map2 address .MapTitle + .description { padding:1rem; margin:0; font-size:80%; background-color:rgba(255,255,255,.8); opacity:0;} .institution_map2 .MapTitle:hover + .description, .institution_map2 .MapTitle:focus + .description {opacity:1} .MapTitle span { padding:0 1rem; line-height:1; letter-spacing:2px; font-size:2.0rem; background-color:rgba(255,255,255,.6)} .institution_map2 .MapTitle:focus span {outline:dashed 1px #059;outline-offset:4px;} @media (min-width:1024px) { .institution_map2 .MapTitle span {background-color:rgba(255,255,255,.4);font-size:4rem;} .institution_map2 .MapTitle:focus span {background-color:rgba(255,255,255,.6)} .institution_map2 address .MapTitle + .description {font-size:100%;} } @media (min-width:420px) { .MapTitle span {font-size:2.5rem;} .institution_map2 address .MapTitle + .description {font-size:90%;} } /* --- 24.03.2020, Diana_TT, Lang versions of map + CAO --- */ body.bd_bg .institution_map2, body.bd_bg .geolocation {background:transparent url("../_img/map_Sofia_NACID_2020_bg.jpg") center top no-repeat;} body.bd_en .institution_map2, body.bd_en .geolocation {background:transparent url("../_img/map_Sofia_NACID_2020_en.jpg") center top no-repeat;} /* --- END OF 24.03.2020, Diana_TT, Lang versions of map + CAO --- */ .geolocation { display:block; overflow:visible; position:absolute; top:0; right:20px; width:150px; height:100px; z-index:100; background-position:53% -65px !important} /* --- MAIN info (address, phone, fax, etc. - images at left) --- */ .contacts-main {margin:0 0 20px 0;} .contacts-main li { position:relative; padding:0 0 20px 70px; line-height:1.3;} .contacts-main li:before { border-radius:50%; border:3px solid #cde; position:absolute; left:0; top:0; background:transparent url("../_img/NACID_icons_40x40_2023.svg") 0 0 no-repeat; padding:14px; width:52px; height:52px; content:'';} .contacts-main li.address:before {background-position:center 0px;top:5px;} .contacts-main li.phone:before {background-position:center -50px;} .contacts-main li.fax:before {background-position:center -100px;} .contacts-main li.mail:before {background-position:center -150px;} .contacts-main li.b-hours:before {background-position:center -348px;} .contacts-main li.b-hours p {margin-top:0} .contacts-main .cntcts_title { display:block; overflow:hidden; margin:0; font-size:1.5rem; font-weight:normal; color:#059;} /* --- Additional info (Directorate List) --- */ .contacts-add {padding:0;} .contacts-add h4 {margin-top:1em;font-weight:normal} .contacts-add p {line-height:1.2;} /* --- Anti-SPAM --- */ p.cpt_label {margin-bottom:0;} p.quest { margin-top:0 !important; margin-left:3em;} p.quest b {margin:0;font-size:110%;color:#585858;} #btn_cpt { border-top:3px #e3e3e3 double; /*height:90px;*/ padding:0 0;} button.btn_norm, button.btn_check { width:70px; height:70px; margin:10px 5px 0 5px; padding:0 !important; line-height:100px; background:transparent; border:0; border-collapse:collapse; outline:0 none; cursor:pointer; text-align:center; vertical-align:middle;} button.btn_norm b, button.btn_check b { display:inline-block; width:32px; height:55px; margin:0; padding:0; line-height:80px; text-align:center;} button.btn_norm:hover, button.btn_norm:focus { border:2px #fc9 solid; -webkit-box-shadow: inset 0 0 8px #ffeebb; /* #f8eac1 */ -moz-box-shadow: inset 0 0 8px #ffeebb; box-shadow: inset 0 0 8px #ffeebb;} button.btn_check { border:2px #8be solid; /* #83d1f0 */ -webkit-box-shadow: inset 0 0 8px #ccddff; -moz-box-shadow: inset 0 0 8px #ccddff; box-shadow: inset 0 0 8px #ccddff;} /* --- Messages --- */ p.msg { font-size: 1.5em; line-height: 1.25; text-align:right;} /* C. BIBLIOTEKA: Knigi + Periodica + Chuzhdi DB ============================================================================= */ /* --- Periodica --- */ .periodicals table {width:100%;} .periodicals th {background-color:var(--bg-color-primary);color:var(--bg-color-primary-text);} .periodicals th, .periodicals td {padding:5px;text-align:left;} .periodicals tr td:first-child {white-space:nowrap;} .periodicals .p_issn {min-width:15%;width:auto} /* --- Knigi --- */ .books--holder { display:flex; flex-wrap:wrap; margin:0; padding:0;} .books--holder > article { flex:100%; border-top:1px dashed var(--SVG-gray)} .books--holder .magic {visibility:hidden;padding:0;height:0;} .books--holder .flex-container {display:block} .books--holder .flex-container > figure, .books--holder .flex-container > div {margin:20px;display:block;} @media screen and (min-width:770px) { .books--holder > article {flex:50%;border-top:0;} } @media screen and (min-width:426px) { .books--holder .flex-container {display:flex} .books--holder .flex-container > figure {margin:20px} .books--holder .flex-container > div {margin:20px 20px 20px 0} } [class*="books"] {padding:0;overflow:hidden} [class*="books"] img {display:block;} [class*="books"] h3 {padding:0;} [class*="books"] p {margin:0 !important;} .books .flex-container > figure {min-width:65px;} .books_ant .flex-container > figure {min-width:120px;} .books img {width: 65px;height:100px;} .books_ant img {width:120px;height:185px;} /* --- Chuzhdi DB --- */ .descr_DB {padding-left:1rem;} .logo_DB a {display:block;overflow:hidden;border-bottom:0 !important} @media (max-width:800px) { .periodicals .logo_DB img {width:100px;height:100px;} } @media (max-width:800px) { .sertificates img {width:80%;} } /* D. Informacionni izdaniya: ABS ============================================================================= */ .ABS--years ol { margin:0; padding:0; display:flex; flex-wrap:wrap;} .ABS--years ol > li { list-style-type: none; flex:0 0 25%; margin-bottom:20px; padding:0 10px;} .ABS--years ol > li .accordionItem {margin:0;} @media screen and (max-width:715px) {.ABS--years ol > li {flex:0 0 33%;}} @media screen and (max-width:714px) {.ABS--years ol > li {flex:0 0 50%;}} @media screen and (max-width:400px) {.ABS--years ol > li {flex:0 0 100%;}} .ABS--years a.button {width:100%;margin:0 !important} table.abs {width:80%;margin-bottom:2em;} table.abs td {padding:5px;} table.abs tr > td:first-child {width:90%;} table.abs tr > td:last-child {width:10%;} /* --- Adm.Usl. --- */ .numAdmUsl article {margin-left:0;margin-bottom:0;} .numAdmUsl .button {padding:6px 10px;} /* --- 26.02.2018, Year + � za vsyako izdanie --------------------------------------------------------------------------- */ .izdaniya_en {margin:0 auto;max-width:240px;} .image-cover { position:relative; width:214px; margin:10px} @media (min-width:501px) { .izdaniya_en {float:right;margin:0 4px 0 2em} } .image-cover img {z-index:90;max-width: 100%;} .image-cover .year, .image-cover .issue { display:block; position:absolute; font-weight:bold; line-height:1; z-index:100} .image-cover .issue { text-align:center; font-size:1.2rem; color:red;} .image-cover .year { bottom:20px; left:65%; width:2rem; text-align:center; font-size:.8rem; color:#446;} /* --- Pedagogium --- */ .image-cover.pedagogium .issue { left:50%; bottom:37px; width:2rem; font-size:1.9rem; color:#02a; } .image-cover.pedagogium .year { -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); left:63%; bottom:25px; font-size:.9rem;} /* --- CPE --- */ .image-cover.cpe .issue { left:127px; bottom:51px; width:27px; height:27px; line-height:27px; font-size:1.1rem; letter-spacing:-1px; color:#fff; background-color:#7b3dba; border-radius:50%} .image-cover.cpe .year { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); left:163px; bottom:54px; font-size:1.4rem; text-align:left; letter-spacing:-1px; } /* --- INFOworld --- */ .image-cover.info .issue { left:107px; bottom:30px; font-size:2.5rem; color:#02a;} .image-cover.info .issue.red {color:#b23;} .image-cover.info .issue.green {color:#090;} .image-cover.info .year { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); left:80px; bottom:44px; text-align:left; font-size:.9rem; letter-spacing:-1px; } p.alert {line-height:22px;margin:8px 9px 8px 0;font-size:1.2em;padding-left:35px;} p.alert span {letter-spacing:0.1em;} /* E. ZPUKI / ZPKONPI(r) ============================================================================= */ .ZP_flex-row { display:flex; flex-wrap:wrap; text-align:left;} .ZP_flex-row.title { background-color:#fff; font-weight:bold;} .ZP_flex-row.data:nth-child(odd) {background-color:#f3f3f3} .ZP_flex-row.data:nth-child(even) {background-color:#fff} .ZP_flex-row.data { border-top:1px solid #ddd;} .ZP_flex-outher .ZP_flex-row.data:first-child { border-top:1px solid black;} .ZP_flex-outher .ZP_flex-row:last-child { border-bottom:1px solid black;} [class*="ZP_flex-item"] { padding:8px 10px;} .ZP_flex-item-names { flex:32%;} .ZP_flex-item-t1, .ZP_flex-item-t2, .ZP_flex-item-t3, .ZP_flex-item-t4 { flex:17%; text-align:center;} .ZP_flex-outher .ZP_flex-row:hover {background-color:rgba(136,188,213,.25)} @media (max-width:800px) { [class*="ZP_flex-item"] {flex:100%;text-align:left} [class*="ZP_flex-item"].empty {display:none} } /* F. COOKIES ============================================================================= */ .web-cookies {background-color:#ebebeb;border-top:3px #d7dbdf double} .web-cookies__container { width:100%; max-width:370px; margin:0 auto; padding:10px 0} @media (max-width:400px) { .web-cookies__container {padding:10px;} } .web-cookies__label {padding:0;} .web-cookies__label p.info-blue { position:relative; margin:0; padding-left:50px; font-size:.75rem; line-height:1.1;} .web-cookies__label p.info-blue:before { position:absolute; left:0; top:calc(50% - 12px); background:transparent url("../_img/NACID_icons_40x40_2023.svg") center 0 no-repeat; background-position:center -258px; width:24px; height:24px; content:'';} .web-cookies__actions { padding-top:10px; text-align:center;} a.web-cookies__option, .web-cookies__option { outline-offset:-3px; background-color:#159; color:#fff; margin:2px 8px; padding:0 10px; text-decoration:none; vertical-align:middle; justify-content:center; display:inline-flex; cursor:pointer; border-radius:4px; white-space:nowrap; border:0 !important; font:400 .75rem Verdana,sans-serif; line-height:26px;} .web-cookies__option:hover, .web-cookies__option:focus { background-color:#fff; color:#159; outline:3px solid #159; outline-offset:0px;} /* G. Official SITE INFO ============================================================================= */ /* --- Grid --- */ .site-info { position:relative; display:block; overflow:hidden; border:1px solid var(--light-gray-border); border-width:1px 0; background-color:var(--light-gray-bg);} .site-info__container { position: relative; margin:0; padding:0 6px; width:100%; max-width:900px; line-height:1.5;} .site-info__nav { position:relative; display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:0; font-size:.75rem; min-height:32px; max-width:400px; } .site-info__panel { overflow:hidden; display:flex; flex-direction:column; padding:0; transition: all .2s ease-out; height:0;} .site-info.active .site-info__panel { padding-top:12px; height:auto; transition:all .2s ease-out;} @media (min-width:720px) { .site-info__container {padding:0 10px;} .site-info__panel {flex-direction:row;} .site-info__panel li {width:50%} } .panel_item {display:flex;flex-direction:row;} /* --- Button --- */ .site-info__btn { position:relative; background-color:transparent; /* #fafafa; */ border:3px solid rgba(255,255,155,0); border-radius:0px; margin-left:5px; padding:0 18px 0 6px; font-size:.75rem; font-family: var(--font-body); min-height:32px; color:#159; cursor:pointer; outline:none; text-align:center; white-space: nowrap; transition:all .4s;} @media (min-width:321px) { .site-info__btn {margin-left:25px;} } .site-info__btn:hover, .site-info__btn:focus {background-color:#fff} .site-info__btn:hover {border-color:#59d} .site-info__btn:focus {border-color:#159;} /* --- Glezotiyki i hubavinki --- */ /* --- Arrow DOWN --- */ .site-info__btn:after { position:absolute; display:block; overflow:hidden; top:calc(50% - 5px); right:4px; width:8px; height:8px; border:0; border-right:2px solid #159; border-top:2px solid #159; transform:rotate(135deg); transition:all .4s; content:'';} /* --- Arrow UP --- */ .site-info.active .site-info__btn:after { transition:all .4s; margin-top:3px; transform:rotate(-45deg);} /* --- NACID logo --- */ .site-info__nav p {margin:0;padding-left:30px;} .site-info__nav p:before, .site-info__panel li:before { position:absolute; left:0; background:transparent url("../_img/NACID_icons_40x40_2023.svg") 0 0 no-repeat; content:'';} .site-info__nav p:before { top:calc(50% - 11px); background-size:20px 257px; background-position:center -158px; width:22px; height:22px;} .site-info__panel li { position:relative; display:block; margin-left:1rem; padding:0 0 20px 70px;} .site-info__panel li p {margin:0;} .site-info__panel li:before { top:0; border-radius: 50%; border:2px solid #ddd; padding:14px; width:52px; height:52px;} .site-info__panel li.domain:before {background-position:center -200px} .site-info__panel li.locked:before {background-position:center -296px} .icon_lock:before { position:relative; display:inline-block; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath fill='%23159' d='M21.4,8.6h-1.3V7.2C20.2,4.3,17.8,2,15,2S9.7,4.3,9.7,7.2v1.4H8.5C7.7,8.6,7,9.2,7,10v8.6 C7,19.4,7.7,20,8.5,20h13c0.8,0,1.5-0.6,1.5-1.4V10C22.9,9.2,22.2,8.6,21.4,8.6z M11.5,7.2c0-1.9,1.5-3.4,3.5-3.4 c1.9,0,3.4,1.5,3.5,3.4v1.4h-7V7.2z M5.4,0C3.4,2.6,2,6.2,2,11c0,4.8,1.5,8.3,3.4,11H3.5C1.8,19.8,0,16.3,0,11C0,5.7,1.8,2.3,3.5,0H5.4z M24.6,22c1.9-2.7,3.4-6.2,3.4-11c0-4.8-1.5-8.3-3.4-11h1.8C28.2,2.2,30,5.7,30,11c0,5.3-1.8,8.7-3.5,11 H24.6z'/%3E%3C/svg%3E"); background-size:cover; width:20px; height:13px; content:'';} /* S. SiteMap ============================================================================= */ /* --- Grid --- */ .wrapper.sitemap {max-width:980px;} .category {border-top:3px double #d2d2d7;} .category h3, .category h4 {margin:0;} .category h3 {padding:1rem;margin-bottom:1rem;background-color:#f3f3f3} .category h4 {padding:0 0 10px 0;} .category p {margin:0 0 10px 0;} .category-sections {margin:0;padding:0 1rem;} .category-sections.multy-column_3 { -webkit-columns: 3 auto; -moz-columns: 3 auto; columns: 3 auto;} .category-sections.multy-column_2 { -webkit-columns: 2 auto; -moz-columns: 2 auto; columns: 2 auto;} .category-sections.multy-column_1 { -webkit-columns: 1 auto; -moz-columns: 1 auto; columns: 1 auto;} .category-section { display:inline-block; margin-bottom:1.25rem; vertical-align:top;} @media (max-width:767px) { .category-sections.multy-column_3, .category-sections.multy-column_2 { -webkit-columns: 1 auto; -moz-columns: 1 auto; columns: 1 auto;} } /* APRP. Countries ============================================================================= */ .countries-title { position:relative; font-size:1.5rem;} .countries-title:after { position:absolute; left:0; top:calc(50% - 2px); width:100%; height:0px; /*height:4px; background-color:#159;*/ border-top: 6px double #48c; content:''; z-index:1;} .countries-title span { position:relative; background-color:white; padding:0 1rem; margin-left:3rem; z-index:2;} .countries-p-input {margin:1rem auto 2rem 5px;} input.filter-countries { margin:0 auto 0 3px; width:90%; max-width:550px; background:#fafbfc url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23778' d='M21.7,5C12.5,5,5,12.5,5,21.7s7.5,16.7,16.7,16.7c4,0,7.7-1.4,10.5-3.8l10,10c0.6,0.7,1.7,0.7,2.4,0 s0.7-1.7,0-2.4c0,0,0,0,0,0l-10-10c2.4-2.9,3.8-6.5,3.8-10.5C38.3,12.5,30.9,5,21.7,5z M21.7,8.3c7.4,0,13.3,5.9,13.3,13.3 C35,29.1,29.1,35,21.7,35c-7.4,0-13.3-5.9-13.3-13.3C8.3,14.3,14.3,8.3,21.7,8.3z'/%3E%3C/svg%3E") 10px center no-repeat; background-size:24px; padding-left:40px; height:32px;} .country[aria-hidden='false'] {display:inline-block !important;} .c-name {margin:0;padding:6px 0} .c-case {margin-right:10px;color:#159} .c-link {display:flex;overflow:hidden;} /* PROFESSIO. Countries ============================================================================= */ .countries-list { position: relative; width: 100%; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .countries-list li { text-align: left; margin: 0; padding: 0; } .countries-list li a { display: block; padding: 5px; } .countries-list li a:hover { background-color: #eeeeee; border-bottom: 1px solid; } .countries-list li a:focus { background-color: #eeeeee; border-bottom: 1px solid; } .countries-list li a span { display: inline-block; line-height: 30px; margin: 0.5em; vertical-align: middle; color: #115599; font-weight: 500; } .countries-list li a span.flag-icon { width: 40px; height: 30px; border: 1px solid #ddd; background-color: #fff; background-position: 50%; background-repeat: no-repeat; background-size: cover; } @media (max-width:1024px) { .countries-list { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } @media (max-width:768px) { .countries-list { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } .country-modal .modal-content { margin: auto; display: block; width: auto; max-width: 65%; height: auto; max-height: 90%; overflow: auto; padding: 1em; background-color: #fff; } .country-modal .modal-title { display: grid; grid-template-columns: auto 1fr; align-items: center; justify-items: start; overflow: hidden; width: 100%; padding: 0; border: 0 red solid; color: var(--color-txt-body); text-align: left; } .country-modal .modal-title span { line-height: 30px; margin: 0.4em; vertical-align: middle; font-weight: 500; font-size: 28px; } .country-modal .modal-content h4 { margin-top: 10px; font-size: 22px; font-weight: 500; } .country-modal .modal-content p { position: relative; min-height: 20px; line-height: 20px; margin: 1rem 0 1rem 1rem; padding-left: 36px; } .country-modal .modal-content p strong, .country-modal .modal-content p span, .country-modal .modal-content p a { display: block; color: var(--color-txt-body); font-size: 16px; border: 0; } .country-modal .modal-content p a { color: var(--text-link); } .country-modal .modal-content p a:hover { color: var(--text-link-visited); } .country-modal .modal-content p:before { width:20px; height:20px; left:0; top:0; background-repeat:no-repeat; background-image:url("../_img/NACID_icons_20x20.svg"); position:absolute; pointer-events:none; content:""; } .country-modal .modal-content p.icn-inst:before {background-position:-110px -240px;} .country-modal .modal-content p.icn-addr:before {background-position:-110px -60px;} .country-modal .modal-content p.icn-web:before {background-position:-110px -270px;} .country-modal .modal-content p.icn-pers:before {background-position:-110px -300px;} .country-modal .modal-content p.icn-phone:before{background-position:-110px -30px;} .country-modal .modal-content p.icn-fax:before {background-position:-110px 0px;} .country-modal .modal-content p.icn-mail:before {background-position:-110px -120px;} .country-modal .modal-content p.icn-0:before {background-image:none;} @media (max-width:1024px) { .country-modal .modal-content { max-width: 95%; max-height: 93%; padding: 1em; } } /* XYZ. Dopalnitelni neshtica ============================================================================= */ .brd_img, .brd_img_cover { border-color:#ddd #aaa #aaa #ddd; border-style:solid; border-width:1px;} .brd_img_cover {border-width:2px;} /* --------------------------------------------- 26.07.2017, Diana_TT, ZPUKI */ sup.red { color:#900; font-size:2em; vertical-align:-0.20em; line-height:0;} /* ---------------------------------------------- Zaradi danni ot DB po OPAK */ .gallery {display:block;overflow:hidden;clear:both;} .gallery img { float:left; height:auto;} .brd_img { margin:10px 5px; padding:10px; background-color:#f6f6f6; max-width:98%; height:auto} .brd_img img {max-width:100%;height:auto} .infodeys {width:100%} .infodays td {padding:0 10px 0 0;display:table-cell;} .infodays td img {margin:3px 10px 3px 0;} .infodays.brd_always tr {border-bottom:1px dotted #bbb;} @media screen and (max-width:700px){ .infodays td {display:block;} .infodays tr {border-bottom:1px dotted #bbb;} } /* ------------------------------------------- Profil na kupuvacha i ne samo */ div.bkgr_ddd, .bkgr_ddd {background-color:#ddd;} .hr_clr {background-color:#999;margin:0;padding:0;} .hr_clr, .hr_clr_10, .hr_clr_double {clear:both;font-size:1px;height:1px;} /* --------------------------------------------------------------- All pages */ /* --- Pre-define MARGINS --- */ .m_0 {margin:0 !important;} /* !!! */ .m_0_10 {margin:0 10px;} /* !!! */ .m_0_30 {margin:0 30px;} /* !!! */ .m_0_auto {margin:0 auto;} /* !!! */ .m_L_auto {margin-left:auto;} /* !!! */ .m_R_auto {margin-right:auto;} /* !!! */ .m_L0 {margin-left:0 !important;} /* !!! */ .m_L05em {margin-left:.5em;} /* ZOP */ .m_L1em {margin-left:1em;} /* ZOP */ .m_L2em {margin-left:2em;} /* ZOP */ .m_L4em {margin-left:4em;} /* OPAC Gallery */ .m_R08em {margin-right:0.8em;} /* DB `Sirena`, `Publications` */ .m_R2em {margin-right:2em;} /* INFO svyat */ .m_B0 {margin-bottom:0 !important;} /* !!! */ .m_B50 {margin-bottom:50px;} /* Home Page */ /* ######################################################################## */ .m_R0 {margin-right:0 !important;} /* Izdaniya */ .m_R20 {margin-right:20px;} .m_T0_B0 {margin-top:0 !important;margin-bottom:0 !important;} /* News, INFO svyat */ .m_T20_B20 {margin-top:20px;margin-bottom:20px;} /* modal INFOcentre and MAP */ .m_T0 {margin-top:0;} .m_T5 {margin-top:5px;} .m_T20 {margin-top:20px;} .m_T40 {margin-top:40px;} .m_B0 {margin-bottom:0px;} .m_B20 {margin-bottom:20px;} /* All projects */ .m_B40 {margin-bottom:40px;} /* All projects */ .m_B_minus20 {margin-bottom:-20px;} /* --- Pre-define PADINGS --- */ .p_0 {padding:0 !important;} .p_T0 {padding-top:0 !important;} /* Projects */ .p_T10 {padding-top:10px !important;} /* 09.07.2020, Adm.usl (CAO) */ .p_T20 {padding-top:20px !important;} .p_T40 {padding-top:40px !important;} /* Adm.Usl. */ .p_10_20 {padding:10px 20px;} .p_10 {padding:10px;} /* Web_Accessibility */ .p_15 {padding:15px;} /* Projects */ .p_20 {padding:20px;} .p_T10_B10 {padding-top:10px;padding-bottom:10px;} .p_T20_B20 {padding-top:20px;padding-bottom:20px;} .p_L20_R20 {padding-left:20px;padding-right:20px;} .p_ltbr20 {padding:20px;} .p_R20 {padding-right:20px;} .p_lr20_tb5 {padding:5px 20px;} /* --- Pre-define HEIGHT --- */ .mh160 {min-height:160px;} .h10 {height:10px;} .h20 {height:20px;} .h30 {height:30px;} .h40 {height:40px;} .h50 {height:50px;} .h50 {height:50px;} .h100 {height:100px;} /* home_page */ .h170 {height:170px;} /* 09.07.2020, Adm.usl (CAO) */ .h440 {height:440px;} /* modal InfoCentre NONONONOoooooooooooo*/ /* --- Pre-define WIDTH --- */ .maxw500 {width:50%;max-width:500px;} .w15p {width:15%} /* !!! */ .w20p {width:20%} /* ??? */ .w25p {width:25%} /* Scientists */ .w35p {width:35%} /* ENIC-NARIC */ .w50p {width:50%} /* !!! */ .w60p {width:60%} /* INFOsviat concomitant site */ .w70p {width:70%} /* Pedagodium */ .w75p {width:75%} /* Scientists */ .w80p {width:80%} /* !!! */ .w85p {width:85%} /* !!! */ .w90p {width:90%} /* !!! */ .w100p {width:100%} .maxw77 {width:100%;} @media screen and (min-width:1024px) { .maxw77 {width:77%;} } /* --- Pre-define Font-Size --- */ .fs_09em {font-size:.9em;} .fs_07em {font-size:.7em;line-height:1 !important} .fs_075em {font-size:.75em;} .fs_08em {font-size:.8em;} .fs_1em {font-size:1em;} .fs_12em {font-size:1.2em;} .fs_14em {font-size:1.4em;} /******************************************************************************/ .brd1 {border:1px red dashed;} .brd2 {border:1px blue dashed;} .brd3 {border:1px green dashed;} .brd4 {border:1px yellow dashed;} .brdw {border:1px white dashed;} .brdTest {border:1px transparent dashed; border-top-color:red;} .brdTest2 {border:1px transparent dashed; border-color:red blue green black;}