@import 'templates/_variables.scss'; :root { --color-scheme: dark; --blue: #0084b4; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: beige; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #212529; --primary: #0084b4; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: beige; --danger: #dc3545; --light: #dee2e6; --dark: #212529; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: "Roboto Condensed", sans-serif; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace } @media all { .bg-warning { color: #212529 } } @media all { #sidebar { background: #212529 } } .sidebar-close { background: transparent } @media all { .sidebar-close { color: #f8f9fa } } *, *::before, *::after { box-sizing: border-box } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block } body { margin: 0; // font-family: "Roboto Condensed", sans-serif; font-family: 'Noto Sans TC', sans-serif; font-weight: 400; line-height: 1.5; text-align: left; font-size: 1rem; letter-spacing: 2px; } @media all { body { color: #f8f9fa; background-color: #212529; } } [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 } hr { box-sizing: content-box; height: 0; overflow: visible } p { margin-top: 0; margin-bottom: 1rem } abbr[title], abbr[data-original-title] { text-decoration: underline; text-decoration: underline dotted; border-bottom: 0; text-decoration-skip-ink: none; cursor: help; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: .5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: 700; } small { font-size: 80%; } sub, sup { position: relative; line-height: 0; vertical-align: baseline; font-size: 75%; } sub { bottom: -.25em; } sup { top: -.5em; } a { text-decoration: none; background: transparent; } @media all { a { /* color: #f8f9fa; */ color: $link-color; } } a:hover { text-decoration: underline; } @media all { a:hover { color: #cbd3da; } } a:not([href]) { color: inherit; text-decoration: none; } a:not([href]):hover { color: inherit; text-decoration: none; } pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; } figure { margin: 0 0 1rem; } img { vertical-align: middle; border-style: none; } svg { overflow: hidden; vertical-align: middle; } table { border-collapse: collapse; } caption { padding-top: .75rem; padding-bottom: .75rem; text-align: left; caption-side: bottom; } @media all { caption { color: #6c757d; } } th { text-align: inherit; } label { display: inline-block; margin-bottom: .5rem; } button { border-radius: 0; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; line-height: inherit; font-size: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } select { word-wrap: normal; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { outline-offset: -2px; -webkit-appearance: none; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } template { display: none; } [hidden] { display: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: .5rem; font-weight: 400; line-height: 1.2; } h1 { font-size: 2.5rem; } @media (max-width: 1200px) { h1 { font-size: calc(1.375rem + 1.5vw); } } h2 { font-size: 2rem; } @media (max-width: 1200px) { h2 { font-size: calc(1.325rem + .9vw); } } h3 { font-size: 1.25rem; } h4 { font-size: 1.15rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; } .lead { font-weight: 400; font-size: 1.25rem; } hr { margin-top: 2.5rem; margin-bottom: 2.5rem; border-top: 1px solid silver; } img, amp-img { border: 0; } amp-img[class^=i-amp], amp-img[class^=-amp] { height: auto; max-width: 100%; } .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { width: 100%; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container-sm, .container { max-width: 540px; } } @media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } } @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } } @media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } @media (min-width: 1400px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1320px; } } .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) / -2); margin-left: calc(var(--bs-gutter-x) / -2); } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); margin-top: var(--bs-gutter-y); } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } .col-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } .col-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } .col-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } .col-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } .col-12 { flex: 0 0 100%; max-width: 100%; } @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-sm-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } .col-sm-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } .col-sm-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } .col-sm-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } .col-sm-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-md-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } .col-md-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } .col-md-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } .col-md-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } .col-md-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .ms-md-1 { margin-left: 0.25rem !important; } .ms-md-2 { margin-left: 0.5rem !important; } .ms-md-3 { margin-left: 1rem !important; } .ms-md-4 { margin-left: 1.5rem !important; } .ms-md-5 { margin-left: 3rem !important; } .justify-content-md-center { justify-content: center !important; } } @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-lg-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } .col-lg-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } .col-lg-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } .col-lg-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } .col-lg-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-xl-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } .col-xl-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } .col-xl-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50% } .col-xl-7 { flex: 0 0 58.33333%; max-width: 58.33333%;; } .col-xl-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } .col-xl-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; } } table { width: 100%; margin-bottom: 1rem; } table th, table td { padding: .3rem; vertical-align: top; } .form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px } @media all { table th, table td { border: 1px solid #343a40; } } table thead th { vertical-align: bottom; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); } @media all { table thead th { border-bottom: 2px solid #343a40; } } .card-body { flex: 1 1 auto; padding: 1rem 1rem; } @media all { table tbody+tbody { border-top: 2px solid #343a40; } } .form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; } .form-row>.col, .form-row>[class*="col-"] { padding-right: 5px; padding-left: 5px; } .btn { display: inline-block; font-weight: 400; color: #212529; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; background: transparent; border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; } .btn:hover { color: #212529; text-decoration: none; } .btn:focus, .btn.focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 132, 180, 0.25); } .btn.disabled, .btn:disabled { opacity: .65; } a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; } .btn-light { color: #212529; border-color: #dee2e6; background: #dee2e6; } .btn-light:hover { color: #212529; border-color: #c1c9d0; background: #c8cfd6; } .btn-light:focus, .btn-light.focus { color: #212529; border-color: #c1c9d0; background: #c8cfd6; box-shadow: 0 0 0 .2rem rgba(194, 198, 202, 0.5); } .btn-light.disabled, .btn-light:disabled { color: #212529; background: #dee2e6; border-color: #dee2e6; } .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show>.btn-light.dropdown-toggle { color: #212529; background: #c1c9d0; border-color: #bac2cb; } .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, .show>.btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(194, 198, 202, 0.5); } .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); } .card > .list-group { border-top: inherit; border-bottom: inherit; } .card > .list-group:first-child { border-top-width: 0; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } .card > .list-group:last-child { border-bottom-width: 0; border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } .card > .card-header + .list-group, .card > .list-group + .card-footer { border-top: 0; } .card-body { flex: 1 1 auto; padding: 1rem 1rem; } .card-title { margin-bottom: 0.5rem; } .card-subtitle { margin-top: -0.25rem; margin-bottom: 0; } .card-text:last-child { margin-bottom: 0; } .card-link:hover { text-decoration: none; } .card-link + .card-link { margin-left: 1rem /* rtl:ignore */; } .card-header { padding: 0.5rem 1rem; margin-bottom: 0; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); } .card-footer { padding: 0.5rem 1rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); } .card-header-tabs { margin-right: -0.5rem; margin-bottom: -0.5rem; margin-left: -0.5rem; border-bottom: 0; } .card-header-pills { margin-right: -0.5rem; margin-left: -0.5rem; } .card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1rem; } .card-img, .card-img-top, .card-img-bottom { width: 100%; } .pagination { display: flex; padding-left: 0; list-style: none; border-radius: .25rem; } .page-link { position: relative; display: block; padding: .5rem .75rem; margin-left: -1px; line-height: 1.25; } @media all { .page-link { color: #f8f9fa; background: #212529; border: 1px solid #495057; } } .page-link:hover { z-index: 2; text-decoration: none; } @media all { .page-link:hover { color: #cbd3da; background: #343a40; border-color: #495057; } } .page-link:focus { z-index: 3; outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 132, 180, 0.25); } .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; } .page-item:last-child .page-link { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; } .page-item.active .page-link { z-index: 3; } @media all { .page-item.active .page-link { color: #212529; background: #0084b4; border-color: #0084b4; } } .page-item.disabled .page-link { pointer-events: none; cursor: auto; } @media all { .page-item.disabled .page-link { color: #ced4da; background: #212529; border-color: #495057; } } header { width: 100%; z-index: 99999; top: 0px; } @media all { header.full-width { background: #212529; } } header.fixed { position: fixed; } .mega-menu .header { flex: 0 0 100%; max-width: 100%; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); } .clearfix::after { display: block; clear: both; content: ""; } .blog-content { color: #808080; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .text-start { text-align: left !important; } .text-end { text-align: right !important; } .text-center { text-align: center !important; } .post-title { text-align: center; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } .ms-1 { margin-left: 0.25rem !important; } .ms-2 { margin-left: 0.5rem !important; } .ms-3 { margin-left: 1rem !important; } .ms-4 { margin-left: 1.5rem !important; } .ms-5 { margin-left: 3rem !important; } .me-auto { margin-right: auto !important; } .me-1 { margin-right: 0.25rem !important; } .me-2 { margin-right: 0.5rem !important; } .me-3 { margin-right: 1rem !important; } .me-4 { margin-right: 1.5rem !important; } .me-5 { margin-right: 3rem !important; } .p-1 { padding: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .p-3 { padding: 1rem !important; } .p-4 { padding: 1.5rem !important; } .p-5 { padding: 3rem !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1rem; display: flex; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) / -2); margin-left: calc(var(--bs-gutter-x) / -2); } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) / 2); padding-left: calc(var(--bs-gutter-x) / 2); margin-top: var(--bs-gutter-y); } .col { flex: 100%; } .w-50 { width: 50% !important; } .h-100 { height: 100% !important; } .row-cols-auto > * { flex: 0 0 auto; width: auto; } .row-cols-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-6 > * { flex: 0 0 auto; width: 16.6666666667%; } @media (min-width: 576px) { .col-sm { flex: 1 0 0%; } .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; } .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.6666666667%; } .p-sm-1 { padding: 0.25rem !important; } .p-sm-2 { padding: 0.5rem !important; } .p-sm-3 { padding: 1rem !important; } .p-sm-4 { padding: 1.5rem !important; } .p-sm-5 { padding: 3rem !important; } } @media (min-width: 992px) { .col-lg { flex: 100%; } .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; } .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.6666666667%; } } @media (min-width: 1400px) { .col-xxl { flex: 1 0 0%; } .row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xxl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xxl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xxl-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.6666666667%; } } // toggler label and input .toggle, [id^=drop] { display: none; } /* Giving a background-color to the nav container. */ nav { margin:0; padding: 0; background-color: #FFFFFF; /* Since we'll have the "ul li" "float:left" * we need to add a clear after the container. */ &:after { content:""; display:table; clear:both; } /* Removing padding, margin and "list-style" from the "ul", * and adding "position:reltive" */ ul { float: right; padding:0; margin:0; list-style: none; position: relative; li { margin: 0px; // display:inline-block; float: left; background-color: #FFFFFF; /* Display Dropdowns on Hover */ &:hover > ul { display:inherit; } } /* Hide Dropdowns by Default * and giving it a position of absolute */ ul { display: none; position: absolute; /* has to be the same number as the "line-height" of "nav a" */ /* top: 60px; */ top: 50px; /* Fisrt Tier Dropdown */ li { width:170px; float:none; display:list-item; position: relative; } /* Second, Third and more Tiers * We move the 2nd and 3rd etc tier dropdowns to the left * by the amount of the width of the first tier. */ ul li { position: relative; top:-60px; /* has to be the same number as the "width" of "nav ul ul li" */ left:170px; } } } /* Styling the links */ a { display:block; padding:14px 20px; color:#656565; font-size:12pt; font-weight: 400; text-decoration:none; &:hover { background-color: #78AD42; color: #fff; text-decoration:none; } } } /* Change ' +' in order to change the Dropdown symbol */ li > a:after { content: ' +'; } li > a:only-child:after { content: ''; } /* Media Queries --------------------------------------------- */ @media all and (max-width : 768px) { nav { margin: 0; } /* Hide the navigation menu by default */ /* Also hide the */ .toggle + a, .menu { display: none; } /* Stylinf the toggle lable */ .toggle { display: block; /* background-color: #FFFFFF; */ padding: 14px 20px; color:#656565; font-size:17px; text-decoration:none; border:none; &:hover { /* background-color: #000000; */ color:#78AD42; } } /* Display Dropdown when clicked on Parent Lable */ [id^=drop]:checked + ul { display: block; } /* Change menu item's width to 100% */ nav ul li { display: block; width: 100%; font-weight: 600; } nav a:hover, nav ul ul ul a { background-color: #78AD42; } nav ul li ul li .toggle, nav ul ul a { background-color: #212121; } nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a { padding:14px 20px; color:#FFF; font-size:17px; } /* Hide Dropdowns by Default */ nav ul ul { float: none; position:static; color: #ffffff; /* has to be the same number as the "line-height" of "nav a" */ } /* Hide menus on hover */ nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; } /* Fisrt Tier Dropdown */ nav ul ul li { display: block; width: 100%; } nav ul ul ul li { position: static; /* has to be the same number as the "width" of "nav ul ul li" */ } } @media all and (max-width : 330px) { nav ul li { display:block; width: 94%; } } .widget { margin-bottom: 30px; padding-bottom: 35px; &-title { margin-bottom: 15px; padding-bottom: 10px; font-size: 16px; color: #333; font-weight: 500; border-bottom: 1px solid #dedede; } } .widget.widget-latest-post .media { .media-object { width: 100px; height: auto; } .media-heading a { color: #000; font-size: 16px; } p { font-size: 12px; color: #808080; } } .widget.widget-category ul li { margin-bottom: 10px; a { color: #837f7e; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; &:before { padding-right: 10px; } &:hover { color: #655E7A; padding-left: 5px; } } } .widget.widget-tag ul li { margin-bottom: 10px; display: inline-block; margin-right: 5px; a { color: #837f7e; display: inline-block; padding: 8px 15px; border: 1px solid #dedede; border-radius: 30px; font-size: 14px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; &:hover { color: #fff; background: #655E7A; border: 1px solid #655E7A; } } } .list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: 0.25rem; &-item { position: relative; display: block; padding: 0.5rem 1rem; text-decoration: none; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); &.active { z-index: 2; color: #fff; background-color: #78AD42; border-color: #78AD42; } } } .d-none { display: none !important; } .d-block { display: block !important; } @media (min-width: 576px) { .d-sm-block { display: block !important; } } @media (min-width: 768px) { .d-md-block { display: block !important; } .d-md-none { display: none !important; } } @media (min-width: 992px) { .d-lg-none { display: none !important; } } input[type="radio"][class="style"]:checked + label { color:white; background:#6666ff; } .align-items-center { align-items: center !important; } .order-1 { order: 1 !important; } .order-2 { order: 2 !important; } .title { font-size: 1.3rem; } .footer { color:#656565; a { color:#656565; text-decoration:none; &:hover { color: #78AD42; } } h5 { color: black; font-weight: 600; padding-bottom: 15px; } .link { padding-bottom: 20px; } } @media (min-width: 992px) { .order-lg-1 { order: 1 !important; } .order-lg-2 { order: 2 !important; } } /* Airspace Template SCSS */ @mixin tablet{ @media(max-width:768px) { @content; } } .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } @import 'templates/_mixins.scss'; @import 'templates/_section.scss'; @import 'templates/_common.scss'; @import 'templates/_background-image.scss'; @import 'templates/_page-title.scss'; @import 'templates/_home.scss';