/* DEFAULTS */ * {margin:0;padding:0;box-sizing:border-box;font-family:Tahoma,sans-serif;} p {text-decoration:none;color:white;} a {text-decoration:none;color:white;} body {background-color:#005f66;overflow-y:auto;overflow-x:hidden;} header {width:100%;display:flex;justify-content:space-between;align-items:center;} .header-box {position:fixed;left:0;right:0;top:0;background-color:#2b2e35;padding:8px;} .aqua-a {cursor:pointer;margin-right:8px;} @media(max-width: 800px) {.aqua-a{display:none;}} .aqua-b {cursor:pointer;margin-right:24px;} @media(min-width: 798px) {.aqua-b{display:none;}} .fone-box {margin-left:62px;background-image:url('fonb.png');width:32px;height:34px;background-size:cover;cursor:pointer;margin-right:auto;} .fone-box:hover {margin-left:62px;background-image:url('fona.png');width:32px;height:34px;background-size:cover;cursor:pointer;transition:background-image 0.3s ease;} .search {display:flex;justify-content:space-between;align-items:center;border:1px solid #b1b8b8;border-radius:6px;margin-bottom:12px;} .btn-go {padding:5px 4px 4px 4px;/*background-color:#2b2e35;*/background-color:#000000;color:#ffffff;border:2px solid #ffffff;border-radius:6px;cursor:pointer;margin-right:6px;} .btn-go:hover {padding:5px 4px 4px 4px;/*background-color:#2b2e35;*/background-color:#000000;color:#00cde0;border:2px solid #00cde0;border-radius:6px;cursor:pointer;transition:0.3s ease;} input[type="text"], input[type="form"] {background-color:#000000;color:#00ff00;border:2px solid #ababab;height:32px;width:220px;border-radius:6px;font-size:16px;outline:none;cursor:pointer;padding-left:8px;margin-right:16px;} /* BLOCKS */ .container {display:grid;grid-template-columns: 1fr 3fr 1fr; /* 20% | 60% | 20% proportions */gap: 20px;padding:68px 16px 16px 16px;} .block-left {background:#2b2e35;padding:20px;margin-bottom:12px;border-radius:5px;text-align:center;color:white;height:100px;margin-bottom:12px;} .block-left:hover {background:#004C52; border:2px solid #00cde0;transform:translateY(-5px);} .block-right {background:#2b2e35;padding:20px;margin-bottom:12px;border-radius:5px;text-align:center;color:white;height:100px;} .block-right:hover {background:#004C52; border:2px solid #00cde0;transform:translateY(-5px);} /* Responsive breakpoint for mobile */ @media (max-width: 768px){ .container {grid-template-columns: 1fr; /* Stacks columns on small screens */}} /* Base styles and mobile default (1 column layout) */ .grid-container {display:grid;grid-template-columns:1fr;box-sizing:border-box;width:100%;gap:12px;} .grid-item {background:#2b2e35;padding:20px;text-align:center;font-family:sans-serif;border-radius:8px;text-align:center;color:white;height:100px;} .grid-item:hover {background:#004C52;border:2px solid #00cde0;transform:translateY(-5px);} .grid-item-search {background:#2b2e35;border-radius:5px;text-align:center;color:white;background:#2b2e35; color:white;padding:20px;text-align:center;font-family:sans-serif;height:100px;} .grid-item-search:hover {background:#004C52;border:2px solid #00cde0;transform:translateY(-5px);} /* Tablet and Desktop Layout (3 Columns x 5 Rows) */ /* ORIGIN-STUFF grid-template-rows: repeat(5, 1fr);min-height: 80vh;*/ @media (min-width: 768px){ .grid-container {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(4, 1fr);/* Optional: Fixes the total container height if needed */}} /* NEW-5-DEEP-JOB */ * {/*box-sizing:border-box;margin:0;padding:0;*/} .menu-body {overflow-y:auto;overflow-x:hidden;white-space:nowrap;*/} .menu-toggle {position:fixed;top:0;left:1px;z-index:1000;padding:0 0 0 12px;background-color:#2b2e35;color:#fff;border:none;cursor:pointer;font-size:36px;/* Toggle Button */} .sidenav {position:fixed;top:0;left: -360px; /* Hidden off-screen initially */ width:360px;height:100vh;background-color:#2b2e35;color:#fff;transition:left 0.3s ease-in-out;z-index: 999;padding:68px 6px 0 6px; /* Main Sidenav Container */overflow-y:auto;overflow-x:hidden;} .menu-toggle:hover {color:#00a9b5;} #nav-checkbox {display:none;/* Trigger state when checkbox is checked */} #nav-checkbox:checked ~ .sidenav {left:0; /* Slides out straight from the left */} .menu-btn {font-size:24px;color:white;position:absolute;top: 15px; left: 265px;cursor:pointer;/* Hamburger Button */} input[type="checkbox"] {display:none; /* Hide checkboxes used for toggling */} #menu-toggle:not(:checked) ~ .nav-list {position:absolute;top:60px;width:100%;list-style:none;transition:transform 0.3s ease;transform:translateX(-110%);/* Slide Out Logic */} .nav-list a, .nav-list label {display:block; padding:15px 20px;color:white;text-decoration:none;cursor:pointer;font-size:15px;/* Links and Submenu Triggers */} .nav-list a:hover, .nav-list label:hover {background:#2b2e35;} .nav-block {border:1px solid #00cde0;border-radius:5px;padding:12px;margin-left:16px;width:226px;} .has-submenue {/*position:fixed;top:0;left: -360px;width:360px;height:100vh;background-color:#2b2e35;color:#fff;transition:left 0.3s ease-in-out;z-index: 999;overflow-y:auto;padding:68px 6px 0 6px;*/} .submenu{position:fixed;top:0;left:0;width:320px;height:100vh;background:#2b2e35;list-style:none;transform:translateX(-100%);transition:transform 0.3s ease;z-index: 1001;padding:68px 6px 0 6px;/* Submenu Default State (Hidden & Shifted Off-screen) */} .submenu-toggle:checked ~ .submenu {transform:translateX(0);/*Slide Out Submenu When Checked*/} .back-btn {background:#2b2e35;font-weight:bold;/* Header for Submenus (Back Button) */text-align:right;} .fwd-btn {right:12px;} .ar {text-align:right;} .sub {color:#fff;}.sub:hover{} .label {} .label:hover {color:#00cde0;} /* FOOTER */ footer {position:fixed;left:0;bottom:0;width:100%;text-align:center;z-index:999;background-color:#2b2e35;padding:8px;cursor:none;} .foot-box {display:flex;justify-content:center;} .foot-box-adr {display:flex;justify-content:center;} .foot-txt {font-size:16px;font-family:tahoma;color:#fff;} .foot-txt-adr {font-size:16px;font-family:tahoma;color:#fff;}