/* #Navigation ================================================== */ body[data-theme="dark"] { color: #fff; background-color: #1f2029 !important; } .start-body { opacity: 1; transform: translateY(0); padding: 20px 0; box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15); -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .start-body.scroll-on { box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15); padding: 10px 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .start-body.scroll-on .navbar-brand img { height: 32px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .navigation-wrap { width: 100%; top: 0; left: 0; z-index: 1000; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .navbar { padding: 0; } .navbar-brand img { height: 32px; width: auto; display: block; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .navbar-toggler { float: right; border: none; padding-right: 0; } .navbar-toggler:active, .navbar-toggler:focus { outline: none; } .navbar-light .navbar-toggler-icon { width: 24px; height: 17px; background-image: none; position: relative; border-bottom: 1px solid #fff; transition: all 300ms linear; } .navbar-light .navbar-toggler-icon:after, .navbar-light .navbar-toggler-icon:before { width: 24px; position: absolute; height: 1px; background-color: #fff; top: 0; left: 0; content: ""; z-index: 2; transition: all 300ms linear; } .navbar-light .navbar-toggler-icon:after { top: 8px; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transform: rotate(45deg); } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before { transform: translateY(8px) rotate(-45deg); } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { border-color: transparent; } .navbar .nav-link { color: #fff !important; font-weight: 500; transition: all 200ms linear; } .navbar .nav-item:hover .nav-link, .navbar .nav-item.active .nav-link { color: #40bb6b !important; } .navbar .nav-link { position: relative; padding: 5px 0 !important; display: inline-block; } .navbar .nav-item:after { position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; content: ""; background-color: #40bb6b; opacity: 0; transition: all 200ms linear; } .navbar .nav-item:hover:after, .navbar .nav-item.active:after { bottom: 4px; opacity: 1; } .navbar .nav-item { position: relative; transition: all 200ms linear; } /* #Primary style ================================================== */ .bg-custom { background-color: #085577 !important; transition: all 200ms linear; } .section { position: relative; width: 100%; display: block; } .full-height { height: 100vh; } .over-hide { overflow: hidden; } .absolute-center { position: absolute; top: 50%; left: 0; width: 100%; margin-top: 40px; transform: translateY(-50%); z-index: 20; } [data-theme="dark"] .bg-custom { background-color: #05364b !important; } [data-theme="dark"] .start-body { box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15); } [data-theme="dark"] .start-body.scroll-on { box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15); } [data-theme="dark"] .dropdown-menu { color: #fff; background-color: #1f2029; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25); } [data-theme="dark"] .dropdown-item { color: #fff; } [data-theme="dark"] .navbar-light .navbar-toggler-icon { border-bottom: 1px solid #fff; } [data-theme="dark"] .navbar-light .navbar-toggler-icon:after, [data-theme="dark"] .navbar-light .navbar-toggler-icon:before { background-color: #fff; } [data-theme="dark"] .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { border-color: transparent; } /* #Media ================================================== */ @media (max-width: 767px) { .navbar .nav-item:after { display: none; } .navbar .nav-item::before { position: absolute; display: block; top: 17px; left: -15px; width: 11px; height: 1px; content: ""; border: none; background-color: #fff; vertical-align: 0; } .dropdown-toggle::after { position: absolute; display: block; top: 10px; left: -23px; width: 1px; height: 11px; content: ""; border: none; background-color: #000; vertical-align: 0; transition: all 200ms linear; } .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(90deg); opacity: 0; } [data-theme="dark"] .navbar .nav-item::before { background-color: #fff; } [data-theme="dark"] .dropdown-toggle::after { background-color: #fff; } } @media (min-width: 768px) { .navbar-nav { position: absolute; right: 0; bottom: 8px; } } /* #Link to page ================================================== */ .logo { position: absolute; bottom: 30px; right: 30px; display: block; z-index: 100; transition: all 250ms linear; } .logo img { height: 26px; width: auto; display: block; filter: brightness(10%); transition: all 250ms linear; } [data-theme="dark"] .logo img { filter: brightness(100%); } .navbar-collapse .nav-item { margin-left: 2.3rem; } .navbar-collapse .nav-item-switch { margin-left: 4rem; } .nav-switch { color: #fff !important; font-weight: 500; transition: all 200ms linear; } .nav-switch { position: relative; padding: 5px 0 !important; display: inline-block; } [data-theme="dark"] .nav-switch { color: #fff !important; }