(Created page with "/** * This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018 * @version v0.7.3 * @link https://github.com/Virginia-iGEM/igem-wik...") |
|||
Line 1: | Line 1: | ||
+ | @import url(bootstrap.min.css); | ||
+ | @import url(ekko-lightbox.css); | ||
+ | @import url(fa-svg-with-js.css); | ||
/** | /** | ||
− | * | + | * Based on |
− | * | + | * |
− | * | + | * - reset.css 2.0 by Eric Meyer |
− | * | + | (public domain) |
+ | * http://meyerweb.com/eric/tools/css/reset/ | ||
+ | * | ||
+ | * - normalize.css 8.0.0 by Nicolas Gallagher and Jonathan Neal | ||
+ | * (licensed under MIT) | ||
+ | * https://github.com/necolas/normalize.css | ||
+ | * | ||
+ | * - Based on Bootstrap 4 Reboot | ||
+ | * (licensed under MIT) | ||
+ | * https://github.com/twbs/bootstrap | ||
*/ | */ | ||
− | + | /** | |
+ | * IE10+ doesn't honor `<meta name="viewport">` in some cases | ||
+ | */ | ||
+ | @import url(https://use.fontawesome.com/releases/v5.2.0/css/all.css); | ||
+ | @-ms-viewport { | ||
+ | width: device-width; } | ||
+ | |||
+ | /** | ||
+ | * general reset | ||
+ | */ | ||
+ | html, body, div, span, applet, object, iframe, | ||
+ | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
+ | a, abbr, acronym, address, big, cite, code, | ||
+ | del, dfn, em, img, ins, kbd, q, s, samp, | ||
+ | small, strike, strong, sub, sup, tt, var, | ||
+ | b, u, i, center, | ||
+ | dl, dt, dd, ol, ul, li, | ||
+ | fieldset, form, label, legend, | ||
+ | table, caption, tbody, tfoot, thead, tr, th, td, | ||
+ | article, aside, canvas, details, embed, | ||
+ | figure, figcaption, footer, header, hgroup, | ||
+ | menu, nav, output, ruby, section, summary, | ||
+ | time, mark, audio, video, main { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | font-size: 100%; | ||
+ | font: inherit; | ||
+ | vertical-align: baseline; } | ||
+ | |||
+ | /** | ||
+ | * HTML5 display-role reset for older browsers | ||
+ | */ | ||
+ | article, aside, details, figcaption, figure, | ||
+ | footer, header, hgroup, menu, nav, section, | ||
+ | main, summary { | ||
+ | display: block; } | ||
+ | |||
+ | /** | ||
+ | * inherit box model for all elements | ||
+ | */ | ||
+ | *, | ||
+ | *::before, | ||
+ | *::after { | ||
+ | box-sizing: inherit; } | ||
+ | |||
+ | /** | ||
+ | * html root rules | ||
+ | * 1. set border-box for inheritance | ||
+ | * 2. avoid 300ms click delay on touch devices that support the `touch-action` | ||
+ | * CSS property | ||
+ | * 3. Prevent adjustments of font size after orientation changes in IE, on | ||
+ | * Windows Phone and iOS. | ||
+ | * 4. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, | ||
+ | * so we force a non-overlapping, non-auto-hiding scrollbar to counteract. | ||
+ | * 5. Change the default tap highlight to be completely transparent in iOS. | ||
+ | */ | ||
+ | html { | ||
+ | /* 1 */ | ||
+ | box-sizing: border-box; | ||
+ | /* 2 */ | ||
+ | touch-action: manipulation; | ||
+ | /* 3 */ | ||
+ | -webkit-text-size-adjust: 100%; | ||
+ | -ms-text-size-adjust: 100%; | ||
+ | /* 4 */ | ||
+ | -ms-overflow-style: scrollbar; | ||
+ | /* 5 */ | ||
+ | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } | ||
+ | |||
+ | /** | ||
+ | * body rules | ||
+ | * 1. reset line-height to 1 | ||
+ | * 2. set base font-family to sans-serif | ||
+ | */ | ||
+ | body { | ||
+ | /* 1 */ | ||
+ | line-height: 1; | ||
+ | /* 2 */ | ||
+ | font-family: sans-serif; } | ||
+ | |||
+ | /** | ||
+ | * Lists | ||
+ | */ | ||
+ | ol, ul { | ||
+ | list-style: none; } | ||
+ | |||
+ | /** | ||
+ | * Quotes | ||
+ | */ | ||
+ | blockquote, q { | ||
+ | quotes: none; } | ||
+ | |||
+ | blockquote::before, | ||
+ | blockquote::after, | ||
+ | q::before, | ||
+ | q::after { | ||
+ | content: ''; | ||
+ | content: none; } | ||
+ | |||
+ | /** | ||
+ | * Tables | ||
+ | */ | ||
+ | table { | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0; } | ||
+ | |||
+ | /** | ||
+ | * Horizontal Lines | ||
+ | * 1. Add the correct box sizing in Firefox. | ||
+ | * 2. Show the overflow in Edge and IE. | ||
+ | */ | ||
+ | hr { | ||
+ | /* 1 */ | ||
+ | box-sizing: content-box; | ||
+ | height: 0; | ||
+ | /* 2 */ | ||
+ | overflow: visible; } | ||
+ | |||
+ | /** | ||
+ | * Preformatted Text | ||
+ | * 1. Correct the inheritance and scaling of font size in all browsers. | ||
+ | * 2. Don't allow content to break outside | ||
+ | * 3. We have @viewport set which causes scrollbars to overlap content in IE11 | ||
+ | * and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to | ||
+ | * counteract. | ||
+ | */ | ||
+ | pre, | ||
+ | code, | ||
+ | kbd, | ||
+ | samp { | ||
+ | /* 1 */ | ||
+ | font-family: monospace, monospace; } | ||
+ | |||
+ | pre { | ||
+ | /* 2 */ | ||
+ | overflow: auto; | ||
+ | /* 3 */ | ||
+ | -ms-overflow-style: scrollbar; } | ||
+ | |||
+ | /** | ||
+ | * Links | ||
+ | * 1. Remove the gray background on active links in IE 10. | ||
+ | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. | ||
+ | */ | ||
+ | a { | ||
+ | /* 1 */ | ||
+ | background-color: transparent; | ||
+ | /* 2 */ | ||
+ | -webkit-text-decoration-skip: objects; } | ||
+ | |||
+ | /** | ||
+ | * 1. Remove the bottom border in Chrome 57- | ||
+ | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. | ||
+ | */ | ||
+ | abbr[title] { | ||
+ | /* 1 */ | ||
+ | border-bottom: none; | ||
+ | /* 2 */ | ||
+ | text-decoration: underline; | ||
+ | -webkit-text-decoration: underline dotted; | ||
+ | text-decoration: underline dotted; } | ||
+ | |||
+ | /** | ||
+ | * Add the correct font weight in Chrome, Edge, and Safari. | ||
+ | */ | ||
+ | b, | ||
+ | strong { | ||
+ | font-weight: bolder; } | ||
+ | |||
+ | /** | ||
+ | * Add the correct font size in all browsers. | ||
+ | */ | ||
+ | small { | ||
+ | font-size: 80%; } | ||
+ | |||
+ | /** | ||
+ | * Prevent `sub` and `sup` elements from affecting the line height in | ||
+ | * all browsers. | ||
+ | */ | ||
+ | sub, | ||
+ | sup { | ||
+ | font-size: 75%; | ||
+ | line-height: 0; | ||
+ | position: relative; } | ||
+ | |||
+ | sub { | ||
+ | bottom: -0.25em; } | ||
+ | |||
+ | sup { | ||
+ | top: -0.5em; } | ||
+ | |||
+ | /** | ||
+ | * Remove the border on images inside links in IE 10. | ||
+ | */ | ||
+ | img { | ||
+ | border-style: none; } | ||
+ | |||
+ | /** | ||
+ | * Hide SVG overflow in IE | ||
+ | */ | ||
+ | svg:not(:root) { | ||
+ | overflow: hidden; } | ||
+ | |||
+ | /** | ||
+ | * Remove the default `border-radius` that macOS Chrome adds. | ||
+ | * Details at https://github.com/twbs/bootstrap/issues/24093 | ||
+ | */ | ||
+ | button { | ||
+ | border-radius: 0; } | ||
+ | |||
+ | /** | ||
+ | * Work around a Firefox/IE bug where the transparent `button` background | ||
+ | * results in a loss of the default `button` focus styles. | ||
+ | * Credit: https://github.com/suitcss/base/ | ||
+ | */ | ||
+ | button:focus { | ||
+ | outline: 1px dotted; | ||
+ | outline: 5px auto -webkit-focus-ring-color; } | ||
+ | |||
+ | /** | ||
+ | * form element resets | ||
+ | * 1. Remove the margin in Firefox and Safari | ||
+ | * 2. inherit font rules | ||
+ | */ | ||
+ | input, | ||
+ | button, | ||
+ | select, | ||
+ | optgroup, | ||
+ | textarea { | ||
+ | /* 1 */ | ||
+ | margin: 0; | ||
+ | /* 2 */ | ||
+ | font-family: inherit; | ||
+ | font-size: inherit; | ||
+ | line-height: inherit; } | ||
+ | |||
+ | /** | ||
+ | * Remove the inheritance of text transform in Firefox | ||
+ | */ | ||
+ | button, | ||
+ | select { | ||
+ | text-transform: none; } | ||
+ | |||
+ | /** | ||
+ | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` | ||
+ | * controls in Android 4. | ||
+ | * 2. Correct the inability to style clickable types in iOS and Safari. | ||
+ | */ | ||
+ | button, | ||
+ | [type="reset"], | ||
+ | [type="submit"], | ||
+ | html [type="button"] { | ||
+ | /* 2 */ | ||
+ | -webkit-appearance: button; } | ||
+ | |||
+ | /** | ||
+ | * Remove the default appearance of temporal inputs to avoid a Mobile Safari | ||
+ | * bug where setting a custom line-height prevents text from being vertically | ||
+ | * centered within the input. | ||
+ | * See https://bugs.webkit.org/show_bug.cgi?id=139848 | ||
+ | * and https://github.com/twbs/bootstrap/issues/11266 | ||
+ | */ | ||
+ | input[type="date"], | ||
+ | input[type="time"], | ||
+ | input[type="datetime-local"], | ||
+ | input[type="month"] { | ||
+ | -webkit-appearance: listbox; } | ||
+ | |||
+ | /** | ||
+ | * 1. Remove the default vertical scrollbar in IE. | ||
+ | * 2. Textareas should really only resize vertically so they don't break their | ||
+ | * (horizontal) containers. | ||
+ | */ | ||
+ | textarea { | ||
+ | overflow: auto; | ||
+ | resize: vertical; } | ||
+ | |||
+ | /** | ||
+ | * Show the overflow in IE. | ||
+ | */ | ||
+ | button, | ||
+ | input { | ||
+ | overflow: visible; } | ||
+ | |||
+ | /** | ||
+ | * Remove the inheritance of text transform in Edge, Firefox, and IE. | ||
+ | */ | ||
+ | button, | ||
+ | select { | ||
+ | text-transform: none; } | ||
+ | |||
+ | /** | ||
+ | * Remove the inner border and padding in Firefox. | ||
+ | */ | ||
+ | button::-moz-focus-inner, | ||
+ | [type="button"]::-moz-focus-inner, | ||
+ | [type="reset"]::-moz-focus-inner, | ||
+ | [type="submit"]::-moz-focus-inner { | ||
+ | border-style: none; | ||
+ | padding: 0; } | ||
+ | |||
+ | /** | ||
+ | * Restore the focus styles unset by the previous rule. | ||
+ | */ | ||
+ | button:-moz-focusring, | ||
+ | [type="button"]:-moz-focusring, | ||
+ | [type="reset"]:-moz-focusring, | ||
+ | [type="submit"]:-moz-focusring { | ||
+ | outline: 1px dotted ButtonText; } | ||
+ | |||
+ | /** | ||
+ | * Suppress the focus outline on elements that cannot be accessed via keyboard. | ||
+ | * This prevents an unwanted focus outline from appearing around elements that | ||
+ | * might still respond to pointer events. | ||
+ | * Credit: https://github.com/suitcss/base | ||
+ | */ | ||
+ | [tabindex="-1"]:focus { | ||
+ | outline: 0 !important; } | ||
+ | |||
+ | /** | ||
+ | * Browsers set a default `min-width: min-content` on fieldsets, | ||
+ | * unlike e.g. `<div>`s, which have `min-width: 0` by default. | ||
+ | * So we reset that to ensure fieldsets behave more like a standard block element. | ||
+ | * See https://github.com/twbs/bootstrap/issues/12359 | ||
+ | * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements | ||
+ | */ | ||
+ | fieldset { | ||
+ | min-width: 0; } | ||
+ | |||
+ | /** | ||
+ | * 1. Correct the text wrapping in Edge and IE. | ||
+ | * 2. Correct the color inheritance from `fieldset` elements in IE. | ||
+ | * 3. Set display to block for all browsers | ||
+ | */ | ||
+ | legend { | ||
+ | /* 1 */ | ||
+ | max-width: 100%; | ||
+ | white-space: normal; | ||
+ | /* 2 */ | ||
+ | color: inherit; | ||
+ | /* 3 */ | ||
+ | display: block; } | ||
+ | |||
+ | /** | ||
+ | * Add the correct vertical alignment in Chrome, Firefox, and Opera. | ||
+ | */ | ||
+ | progress { | ||
+ | vertical-align: baseline; } | ||
+ | |||
+ | /** | ||
+ | * Remove the default vertical scrollbar in IE 10+. | ||
+ | */ | ||
+ | textarea { | ||
+ | overflow: auto; } | ||
+ | |||
+ | /** | ||
+ | * 1. Add the correct box sizing in IE 10. | ||
+ | * 2. Remove the padding in IE 10. | ||
+ | */ | ||
+ | [type="checkbox"], | ||
+ | [type="radio"] { | ||
+ | /* 1 */ | ||
+ | box-sizing: border-box; | ||
+ | /* 2 */ | ||
+ | padding: 0; } | ||
+ | |||
+ | /** | ||
+ | * Correct the cursor style of increment and decrement buttons in Chrome. | ||
+ | */ | ||
+ | [type="number"]::-webkit-inner-spin-button, | ||
+ | [type="number"]::-webkit-outer-spin-button { | ||
+ | height: auto; } | ||
+ | |||
+ | /** | ||
+ | * 1. Correct the odd appearance in Chrome and Safari. | ||
+ | * 2. Correct the outline style in Safari. | ||
+ | */ | ||
+ | [type="search"] { | ||
+ | /* 1 */ | ||
+ | -webkit-appearance: textfield; | ||
+ | /* 2 */ | ||
+ | outline-offset: -2px; } | ||
+ | |||
+ | /** | ||
+ | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. | ||
+ | */ | ||
+ | [type="search"]::-webkit-search-cancel-button, | ||
+ | [type="search"]::-webkit-search-decoration { | ||
+ | -webkit-appearance: none; } | ||
+ | |||
+ | /** | ||
+ | * 1. Correct the inability to style clickable types in iOS and Safari. | ||
+ | * 2. Change font properties to `inherit` in Safari. | ||
+ | */ | ||
+ | ::-webkit-file-upload-button { | ||
+ | /* 1 */ | ||
+ | -webkit-appearance: button; | ||
+ | /* 2 */ | ||
+ | font: inherit; } | ||
+ | |||
+ | /** | ||
+ | * Add the correct display in IE 10+. | ||
+ | */ | ||
+ | template { | ||
+ | display: none; } | ||
+ | |||
+ | [hidden] { | ||
+ | display: none; } | ||
+ | |||
+ | /* Override iGEM wiki settings, removing everything but the top navbar. */ | ||
+ | #sideMenu, | ||
+ | #top_title { | ||
+ | display: none; } | ||
+ | |||
+ | #content { | ||
+ | width: 100vw; | ||
+ | padding: 0px; | ||
+ | border: none; | ||
+ | color: black; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color: #fff; | ||
+ | position: relative; } | ||
+ | |||
+ | #globalWrapper { | ||
+ | font-size: inherit; | ||
+ | padding-bottom: 0; } | ||
+ | |||
+ | #top_menu_under { | ||
+ | height: 0px; } | ||
+ | |||
+ | ul { | ||
+ | list-style-image: none; | ||
+ | /* removes the iGEM wiki bullets */ | ||
+ | padding: 0; | ||
+ | margin: 0; } | ||
+ | |||
+ | #mw-content-text > p { | ||
+ | width: 0px; | ||
+ | height: 0px; } | ||
+ | |||
+ | #igem-navbar-placeholder { | ||
+ | height: 16px; | ||
+ | position: fixed; | ||
+ | display: block; | ||
+ | background-color: #383838; | ||
+ | border-bottom: solid black 2px; | ||
+ | color: white; | ||
+ | z-index: 9999; | ||
+ | width: 100%; | ||
+ | font-size: 0.75em; | ||
+ | margin: 0; | ||
+ | padding: 0; } | ||
+ | #igem-navbar-placeholder p { | ||
+ | margin: 0; } | ||
+ | |||
+ | .MathJax nobr > span.math > span { | ||
+ | border-left-width: 0 !important; } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "OpenSans"; | ||
+ | src: url("/fonts/OpenSans/OpenSans-Regular.ttf"); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "OpenSans"; | ||
+ | src: url("/fonts/OpenSans/OpenSans-Bold.ttf"); | ||
+ | font-weight: bold; | ||
+ | font-style: normal; } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "OpenSans"; | ||
+ | src: url("/fonts/OpenSans/OpenSans-Italic.ttf"); | ||
+ | font-weight: normal; | ||
+ | font-style: italic; } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "OpenSans"; | ||
+ | src: url("/fonts/OpenSans/OpenSans-BoldItalic.ttf"); | ||
+ | font-weight: bold; | ||
+ | font-style: italic; } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "Roboto"; | ||
+ | src: url("/fonts/Roboto/Roboto-Regular.ttf"); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "Roboto"; | ||
+ | src: url("/fonts/Roboto/Roboto-Bold.ttf"); | ||
+ | font-weight: bold; | ||
+ | font-style: normal; } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "Roboto"; | ||
+ | src: url("/fonts/Roboto/Roboto-Italic.ttf"); | ||
+ | font-weight: normal; | ||
+ | font-style: italic; } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "Roboto"; | ||
+ | src: url("/fonts/Roboto/Roboto-BoldItalic.ttf"); | ||
+ | font-weight: bold; | ||
+ | font-style: italic; } | ||
+ | |||
+ | html, body { | ||
+ | font: 18px Roboto, sans-serif; } | ||
+ | |||
+ | body { | ||
+ | background: url("/images/background.jpg") repeat; | ||
+ | background-size: cover; } | ||
+ | |||
+ | h1 { | ||
+ | font-size: 2.5rem; } | ||
+ | |||
+ | h2 { | ||
+ | font-size: 2rem; } | ||
+ | |||
+ | h3 { | ||
+ | font-size: 1.75rem; } | ||
+ | |||
+ | h4 { | ||
+ | font-size: 1.5rem; } | ||
+ | |||
+ | h5 { | ||
+ | font-size: 1.25rem; } | ||
+ | |||
+ | h6 { | ||
+ | font-size: 1rem; } | ||
+ | |||
+ | .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { | ||
+ | margin-bottom: .5rem; | ||
+ | font-weight: 500; | ||
+ | line-height: 1.2; | ||
+ | color: inherit; } | ||
+ | |||
+ | #landing { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | overflow: hidden; } | ||
+ | #landing .landing-page { | ||
+ | background: url("/images/landing.svg") fixed no-repeat center; | ||
+ | background-size: cover; | ||
+ | width: 100vw; | ||
+ | height: 100vh; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | justify-content: center; } | ||
+ | #landing .landing-page .header { | ||
+ | color: #fff7d6; | ||
+ | font-size: 24px; | ||
+ | text-align: center; } | ||
+ | #landing #bottom-landing-overlay { | ||
+ | z-index: 1; | ||
+ | position: absolute; | ||
+ | bottom: -30px; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | overflow-x: hidden; } | ||
+ | |||
+ | .container { | ||
+ | padding-top: 4em; | ||
+ | padding-bottom: 4em; } | ||
+ | @media (min-width: 1400px) { | ||
+ | .container { | ||
+ | max-width: 1340px; } } | ||
+ | @media (min-width: 1600px) { | ||
+ | .container { | ||
+ | max-width: 1540px; } } | ||
+ | @media (min-width: 1800px) { | ||
+ | .container { | ||
+ | max-width: 1740px; } } | ||
+ | |||
+ | .row-element { | ||
+ | position: relative; | ||
+ | padding: 2em 0; | ||
+ | overflow-x: hidden; } | ||
+ | |||
+ | .come-in { | ||
+ | -webkit-transform: translateY(300px); | ||
+ | transform: translateY(300px); | ||
+ | -webkit-animation: come-in 0.8s ease forwards; | ||
+ | animation: come-in 0.8s ease forwards; } | ||
+ | |||
+ | @-webkit-keyframes come-in { | ||
+ | to { | ||
+ | -webkit-transform: translateX(0); | ||
+ | transform: translateX(0); } } | ||
+ | |||
+ | @keyframes come-in { | ||
+ | to { | ||
+ | -webkit-transform: translateX(0); | ||
+ | transform: translateX(0); } } | ||
+ | |||
+ | .card-group { | ||
+ | display: flex; | ||
+ | justify-content: space-around; } | ||
+ | .card-group .card { | ||
+ | border: none; | ||
+ | box-shadow: #004d83 5px 5px 8px; } | ||
+ | |||
+ | .row-image { | ||
+ | margin: 0 -6em; | ||
+ | position: relative; | ||
+ | height: 70vh; | ||
+ | background-size: cover; } | ||
+ | .row-image .row-image-overlay-top { | ||
+ | position: absolute; | ||
+ | top: -1px; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | overflow-x: hidden; } | ||
+ | .row-image .row-image-overlay-bottom { | ||
+ | position: absolute; | ||
+ | bottom: -5px; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | overflow-x: hidden; } | ||
+ | |||
+ | #carouselExample1 { | ||
+ | max-width: 100vw; | ||
+ | height: 50%; | ||
+ | overflow: hidden; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | justify-content: center; } | ||
+ | #carouselExample1 .carousel-inner { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | justify-content: center; } | ||
+ | #carouselExample1 .carousel-inner .carousel-caption { | ||
+ | bottom: 40%; } | ||
+ | |||
+ | .picture-row { | ||
+ | padding: 2em 0; } | ||
+ | .picture-row img { | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | box-shadow: #004d83 0 5px 10px; | ||
+ | border-radius: 20px; } | ||
+ | |||
+ | .text-image-row .img-holder { | ||
+ | padding: 2em 0; } | ||
+ | .text-image-row .img-holder img { | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | box-shadow: #004d83 0 5px 10px; | ||
+ | border-radius: 20px; } | ||
+ | |||
+ | .text-image-row .text-holder { | ||
+ | padding: 2em 0; } | ||
+ | |||
+ | header .navigation { | ||
+ | font-size: 18px; } | ||
+ | header .navigation .navbar { | ||
+ | position: absolute; | ||
+ | padding: 0 2em; | ||
+ | top: 2em; | ||
+ | left: 0; | ||
+ | width: 100%; } | ||
+ | header .navigation .navbar .navbar-toggler { | ||
+ | color: #fff7d6; } | ||
+ | header .navigation .navbar .navbar-toggler:active, header .navigation .navbar .navbar-toggler:hover, header .navigation .navbar .navbar-toggler:focus { | ||
+ | color: #ffd93d; } | ||
+ | header .navigation .navbar .navbar-nav { | ||
+ | justify-content: space-around; | ||
+ | width: 100%; } | ||
+ | header .navigation .navbar .navbar-nav .nav-item a { | ||
+ | color: #fff7d6; } | ||
+ | header .navigation .navbar .navbar-nav .nav-item a:hover, header .navigation .navbar .navbar-nav .nav-item a:active { | ||
+ | color: #ffd93d; } | ||
+ | header .navigation .navbar .navbar-nav .dropdown-menu a { | ||
+ | color: #141414; } | ||
+ | header .navigation .navbar .navbar-nav .dropdown-menu a:hover, header .navigation .navbar .navbar-nav .dropdown-menu a:active { | ||
+ | color: #616161; } | ||
+ | header .navigation .navbar .navbar-brand img { | ||
+ | height: 100%; | ||
+ | width: auto; | ||
+ | max-height: 50px; } | ||
+ | header .navigation .navbar.fixed { | ||
+ | background: linear-gradient(75deg, #50af31, #84e261); | ||
+ | height: 4em; | ||
+ | box-shadow: #004d83 0 1px 10px; | ||
+ | position: fixed; | ||
+ | top: -5em; | ||
+ | opacity: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | z-index: 1000; } | ||
+ | header .navigation .navbar.fixed .dropdown-menu { | ||
+ | background: linear-gradient(75deg, #50af31, #84e261); | ||
+ | margin-top: 0.9em; } | ||
+ | header .navigation .navbar.fixed .dropdown-menu a { | ||
+ | color: #fff7d6; } | ||
+ | header .navigation .navbar.fixed .dropdown-menu a:hover, header .navigation .navbar.fixed .dropdown-menu a:active { | ||
+ | color: #ffd93d; | ||
+ | background: linear-gradient(75deg, #2779b3, #63a8e5); } | ||
+ | @media (max-width: 991.99px) { | ||
+ | header .navigation .navbar .navbar-collapse { | ||
+ | background: linear-gradient(75deg, #50af31, #84e261); | ||
+ | width: 100%; | ||
+ | margin: 0 -2em; | ||
+ | padding: 1em 2em; } | ||
+ | header .navigation .navbar .navbar-collapse .dropdown-menu { | ||
+ | background: transparent; | ||
+ | border: none; } } | ||
+ | |||
+ | .sub-page header .navigation .navbar { | ||
+ | background: linear-gradient(75deg, #50af31, #84e261); | ||
+ | top: 0; | ||
+ | z-index: 1000; } | ||
+ | |||
+ | .landing-sub-page { | ||
+ | background-size: contain; | ||
+ | height: 60vh; | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | align-items: flex-start; | ||
+ | padding-top: 50px; | ||
+ | z-index: 1; } | ||
+ | .landing-sub-page .header { | ||
+ | width: 100%; | ||
+ | background: rgba(0, 0, 0, 0.5); | ||
+ | padding: 2em 10em; | ||
+ | color: white; | ||
+ | display: flex; | ||
+ | justify-content: center; } | ||
+ | |||
+ | .col-image img { | ||
+ | width: 100%; | ||
+ | height: auto; } | ||
+ | |||
+ | /*scroll bar*/ | ||
+ | .scrolltop { | ||
+ | display: none; | ||
+ | width: 100%; | ||
+ | margin: 0 auto; | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | right: 10px; } | ||
+ | |||
+ | .scroll { | ||
+ | position: absolute; | ||
+ | right: 20px; | ||
+ | bottom: 20px; | ||
+ | background: #b2b2b2; | ||
+ | background: rgba(178, 178, 178, 0.7); | ||
+ | padding: 20px; | ||
+ | text-align: center; | ||
+ | margin: 0 0 0 0; | ||
+ | cursor: pointer; | ||
+ | transition: 0.5s; } | ||
+ | |||
+ | .scroll:hover { | ||
+ | background: #b2b2b2; | ||
+ | transition: 0.5s; } | ||
+ | |||
+ | .scroll:hover .fa { | ||
+ | padding-top: -10px; } | ||
+ | |||
+ | .scroll .fa { | ||
+ | font-size: 30px; | ||
+ | margin-top: -5px; | ||
+ | margin-left: 1px; | ||
+ | transition: 0.5s; } | ||
+ | |||
+ | /* Tooltip container */ | ||
+ | .tooltip { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | font-weight: bold; | ||
+ | color: #0A1612; | ||
+ | cursor: pointer; } | ||
+ | |||
+ | /* Tooltip text */ | ||
+ | .tooltip span { | ||
+ | display: block; | ||
+ | visibility: hidden; | ||
+ | background-color: #1a1a1a; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | padding: 20px; | ||
+ | border-radius: 6px; | ||
+ | font-weight: normal; | ||
+ | /* Position the tooltip text */ | ||
+ | position: absolute; | ||
+ | z-index: 1; | ||
+ | bottom: 125%; | ||
+ | left: 50%; | ||
+ | -webkit-transform: translateX(-50%); | ||
+ | transform: translateX(-50%); | ||
+ | /* Fade in tooltip */ | ||
+ | opacity: 0; | ||
+ | transition: opacity 0.8s; } | ||
+ | |||
+ | /* Tooltip arrow */ | ||
+ | .tooltip span::after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | left: 50%; | ||
+ | margin-left: -5px; | ||
+ | border-width: 5px; | ||
+ | border-style: solid; | ||
+ | border-color: #1a1a1a transparent transparent transparent; } | ||
+ | |||
+ | /* Show the tooltip text when you mouse over the tooltip container */ | ||
+ | .tooltip:hover .shortdef { | ||
+ | visibility: visible; | ||
+ | width: 20vw; | ||
+ | opacity: 1; } | ||
+ | |||
+ | .tooltip:active .longdef { | ||
+ | width: 40vw; | ||
+ | visibility: visible; | ||
+ | opacity: 1; } | ||
+ | |||
+ | .tooltip:active .shortdef { | ||
+ | visibility: hidden; | ||
+ | opacity: 0; } | ||
+ | |||
+ | footer { | ||
+ | background: linear-gradient(65deg, #2779b3, #004d83); | ||
+ | padding: 2em 4em; } | ||
+ | footer .sponsor .row { | ||
+ | justify-content: center; } | ||
+ | footer .sponsor img { | ||
+ | max-width: 100%; | ||
+ | height: auto; } | ||
+ | footer .footer-menu { | ||
+ | padding: 2em 0; } | ||
+ | footer .footer-menu .row { | ||
+ | justify-content: space-around; | ||
+ | align-items: center; } | ||
+ | footer .footer-menu .footer-link { | ||
+ | text-decoration: none; | ||
+ | list-style: none; } | ||
+ | footer .footer-menu .footer-link a { | ||
+ | color: #fff7d6; } | ||
+ | footer .footer-menu .footer-link a:active, footer .footer-menu .footer-link a:hover, footer .footer-menu .footer-link a:focus { | ||
+ | color: #ffd93d; } | ||
+ | footer .footer-menu img { | ||
+ | max-width: 100%; | ||
+ | height: auto; } |
Revision as of 09:04, 4 October 2018
@import url(bootstrap.min.css); @import url(ekko-lightbox.css); @import url(fa-svg-with-js.css); /**
* Based on * * - reset.css 2.0 by Eric Meyer (public domain) * http://meyerweb.com/eric/tools/css/reset/ * * - normalize.css 8.0.0 by Nicolas Gallagher and Jonathan Neal * (licensed under MIT) * https://github.com/necolas/normalize.css * * - Based on Bootstrap 4 Reboot * (licensed under MIT) * https://github.com/twbs/bootstrap */
/**
* IE10+ doesn't honor `<meta name="viewport">` in some cases */
@import url(https://use.fontawesome.com/releases/v5.2.0/css/all.css); @-ms-viewport {
width: device-width; }
/**
* general reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, main {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/**
* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, summary {
display: block; }
/**
* inherit box model for all elements */
- ,
- before,
- after {
box-sizing: inherit; }
/**
* html root rules * 1. set border-box for inheritance * 2. avoid 300ms click delay on touch devices that support the `touch-action` * CSS property * 3. Prevent adjustments of font size after orientation changes in IE, on * Windows Phone and iOS. * 4. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, * so we force a non-overlapping, non-auto-hiding scrollbar to counteract. * 5. Change the default tap highlight to be completely transparent in iOS. */
html {
/* 1 */ box-sizing: border-box; /* 2 */ touch-action: manipulation; /* 3 */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 4 */ -ms-overflow-style: scrollbar; /* 5 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/**
* body rules * 1. reset line-height to 1 * 2. set base font-family to sans-serif */
body {
/* 1 */ line-height: 1; /* 2 */ font-family: sans-serif; }
/**
* Lists */
ol, ul {
list-style: none; }
/**
* Quotes */
blockquote, q {
quotes: none; }
blockquote::before, blockquote::after, q::before, q::after {
content: ; content: none; }
/**
* Tables */
table {
border-collapse: collapse; border-spacing: 0; }
/**
* Horizontal Lines * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */
hr {
/* 1 */ box-sizing: content-box; height: 0; /* 2 */ overflow: visible; }
/**
* Preformatted Text * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Don't allow content to break outside * 3. We have @viewport set which causes scrollbars to overlap content in IE11 * and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to * counteract. */
pre, code, kbd, samp {
/* 1 */ font-family: monospace, monospace; }
pre {
/* 2 */ overflow: auto; /* 3 */ -ms-overflow-style: scrollbar; }
/**
* Links * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a {
/* 1 */ background-color: transparent; /* 2 */ -webkit-text-decoration-skip: objects; }
/**
* 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] {
/* 1 */ border-bottom: none; /* 2 */ text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
/**
* Add the correct font weight in Chrome, Edge, and Safari. */
b, strong {
font-weight: bolder; }
/**
* Add the correct font size in all browsers. */
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */
sub, sup {
font-size: 75%; line-height: 0; position: relative; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/**
* Remove the border on images inside links in IE 10. */
img {
border-style: none; }
/**
* Hide SVG overflow in IE */
svg:not(:root) {
overflow: hidden; }
/**
* Remove the default `border-radius` that macOS Chrome adds. * Details at https://github.com/twbs/bootstrap/issues/24093 */
button {
border-radius: 0; }
/**
* Work around a Firefox/IE bug where the transparent `button` background * results in a loss of the default `button` focus styles. * Credit: https://github.com/suitcss/base/ */
button:focus {
outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }
/**
* form element resets * 1. Remove the margin in Firefox and Safari * 2. inherit font rules */
input, button, select, optgroup, textarea {
/* 1 */ margin: 0; /* 2 */ font-family: inherit; font-size: inherit; line-height: inherit; }
/**
* Remove the inheritance of text transform in Firefox */
button, select {
text-transform: none; }
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */
button, [type="reset"], [type="submit"], html [type="button"] {
/* 2 */ -webkit-appearance: button; }
/**
* Remove the default appearance of temporal inputs to avoid a Mobile Safari * bug where setting a custom line-height prevents text from being vertically * centered within the input. * See https://bugs.webkit.org/show_bug.cgi?id=139848 * and https://github.com/twbs/bootstrap/issues/11266 */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
-webkit-appearance: listbox; }
/**
* 1. Remove the default vertical scrollbar in IE. * 2. Textareas should really only resize vertically so they don't break their * (horizontal) containers. */
textarea {
overflow: auto; resize: vertical; }
/**
* Show the overflow in IE. */
button, input {
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE. */
button, select {
text-transform: none; }
/**
* Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none; padding: 0; }
/**
* Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* Suppress the focus outline on elements that cannot be accessed via keyboard. * This prevents an unwanted focus outline from appearing around elements that * might still respond to pointer events. * Credit: https://github.com/suitcss/base */
[tabindex="-1"]:focus {
outline: 0 !important; }
/**
* Browsers set a default `min-width: min-content` on fieldsets,* unlike e.g. `
* So we reset that to ensure fieldsets behave more like a standard block element. * See https://github.com/twbs/bootstrap/issues/12359 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements */
fieldset {
min-width: 0; }
/**
* 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Set display to block for all browsers */
legend {
/* 1 */ max-width: 100%; white-space: normal; /* 2 */ color: inherit; /* 3 */ display: block; }
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress {
vertical-align: baseline; }
/**
* Remove the default vertical scrollbar in IE 10+. */
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */
[type="checkbox"], [type="radio"] {
/* 1 */ box-sizing: border-box; /* 2 */ padding: 0; }
/**
* Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */
[type="search"] {
/* 1 */ -webkit-appearance: textfield; /* 2 */ outline-offset: -2px; }
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */
- -webkit-file-upload-button {
/* 1 */ -webkit-appearance: button; /* 2 */ font: inherit; }
/**
* Add the correct display in IE 10+. */
template {
display: none; }
[hidden] {
display: none; }
/* Override iGEM wiki settings, removing everything but the top navbar. */
- sideMenu,
- top_title {
display: none; }
- content {
width: 100vw; padding: 0px; border: none; color: black; margin-left: auto; margin-right: auto; background-color: #fff; position: relative; }
- globalWrapper {
font-size: inherit; padding-bottom: 0; }
- top_menu_under {
height: 0px; }
ul {
list-style-image: none; /* removes the iGEM wiki bullets */ padding: 0; margin: 0; }
- mw-content-text > p {
width: 0px; height: 0px; }
- igem-navbar-placeholder {
height: 16px; position: fixed; display: block; background-color: #383838; border-bottom: solid black 2px; color: white; z-index: 9999; width: 100%; font-size: 0.75em; margin: 0; padding: 0; } #igem-navbar-placeholder p { margin: 0; }
.MathJax nobr > span.math > span {
border-left-width: 0 !important; }
@font-face {
font-family: "OpenSans"; src: url("/fonts/OpenSans/OpenSans-Regular.ttf"); font-weight: normal; font-style: normal; }
@font-face {
font-family: "OpenSans"; src: url("/fonts/OpenSans/OpenSans-Bold.ttf"); font-weight: bold; font-style: normal; }
@font-face {
font-family: "OpenSans"; src: url("/fonts/OpenSans/OpenSans-Italic.ttf"); font-weight: normal; font-style: italic; }
@font-face {
font-family: "OpenSans"; src: url("/fonts/OpenSans/OpenSans-BoldItalic.ttf"); font-weight: bold; font-style: italic; }
@font-face {
font-family: "Roboto"; src: url("/fonts/Roboto/Roboto-Regular.ttf"); font-weight: normal; font-style: normal; }
@font-face {
font-family: "Roboto"; src: url("/fonts/Roboto/Roboto-Bold.ttf"); font-weight: bold; font-style: normal; }
@font-face {
font-family: "Roboto"; src: url("/fonts/Roboto/Roboto-Italic.ttf"); font-weight: normal; font-style: italic; }
@font-face {
font-family: "Roboto"; src: url("/fonts/Roboto/Roboto-BoldItalic.ttf"); font-weight: bold; font-style: italic; }
html, body {
font: 18px Roboto, sans-serif; }
body {
background: url("/images/background.jpg") repeat; background-size: cover; }
h1 {
font-size: 2.5rem; }
h2 {
font-size: 2rem; }
h3 {
font-size: 1.75rem; }
h4 {
font-size: 1.5rem; }
h5 {
font-size: 1.25rem; }
h6 {
font-size: 1rem; }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: .5rem; font-weight: 500; line-height: 1.2; color: inherit; }
- landing {
width: 100%; height: 100%; overflow: hidden; } #landing .landing-page { background: url("/images/landing.svg") fixed no-repeat center; background-size: cover; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } #landing .landing-page .header { color: #fff7d6; font-size: 24px; text-align: center; } #landing #bottom-landing-overlay { z-index: 1; position: absolute; bottom: -30px; left: 0; width: 100%; overflow-x: hidden; }
.container {
padding-top: 4em; padding-bottom: 4em; } @media (min-width: 1400px) { .container { max-width: 1340px; } } @media (min-width: 1600px) { .container { max-width: 1540px; } } @media (min-width: 1800px) { .container { max-width: 1740px; } }
.row-element {
position: relative; padding: 2em 0; overflow-x: hidden; }
.come-in {
-webkit-transform: translateY(300px); transform: translateY(300px); -webkit-animation: come-in 0.8s ease forwards; animation: come-in 0.8s ease forwards; }
@-webkit-keyframes come-in {
to { -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes come-in {
to { -webkit-transform: translateX(0); transform: translateX(0); } }
.card-group {
display: flex; justify-content: space-around; } .card-group .card { border: none; box-shadow: #004d83 5px 5px 8px; }
.row-image {
margin: 0 -6em; position: relative; height: 70vh; background-size: cover; } .row-image .row-image-overlay-top { position: absolute; top: -1px; left: 0; width: 100%; overflow-x: hidden; } .row-image .row-image-overlay-bottom { position: absolute; bottom: -5px; left: 0; width: 100%; overflow-x: hidden; }
- carouselExample1 {
max-width: 100vw; height: 50%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } #carouselExample1 .carousel-inner { display: flex; flex-direction: column; justify-content: center; } #carouselExample1 .carousel-inner .carousel-caption { bottom: 40%; }
.picture-row {
padding: 2em 0; } .picture-row img { max-width: 100%; height: auto; box-shadow: #004d83 0 5px 10px; border-radius: 20px; }
.text-image-row .img-holder {
padding: 2em 0; } .text-image-row .img-holder img { max-width: 100%; height: auto; box-shadow: #004d83 0 5px 10px; border-radius: 20px; }
.text-image-row .text-holder {
padding: 2em 0; }
header .navigation {
font-size: 18px; } header .navigation .navbar { position: absolute; padding: 0 2em; top: 2em; left: 0; width: 100%; } header .navigation .navbar .navbar-toggler { color: #fff7d6; } header .navigation .navbar .navbar-toggler:active, header .navigation .navbar .navbar-toggler:hover, header .navigation .navbar .navbar-toggler:focus { color: #ffd93d; } header .navigation .navbar .navbar-nav { justify-content: space-around; width: 100%; } header .navigation .navbar .navbar-nav .nav-item a { color: #fff7d6; } header .navigation .navbar .navbar-nav .nav-item a:hover, header .navigation .navbar .navbar-nav .nav-item a:active { color: #ffd93d; } header .navigation .navbar .navbar-nav .dropdown-menu a { color: #141414; } header .navigation .navbar .navbar-nav .dropdown-menu a:hover, header .navigation .navbar .navbar-nav .dropdown-menu a:active { color: #616161; } header .navigation .navbar .navbar-brand img { height: 100%; width: auto; max-height: 50px; } header .navigation .navbar.fixed { background: linear-gradient(75deg, #50af31, #84e261); height: 4em; box-shadow: #004d83 0 1px 10px; position: fixed; top: -5em; opacity: 0; left: 0; width: 100%; z-index: 1000; } header .navigation .navbar.fixed .dropdown-menu { background: linear-gradient(75deg, #50af31, #84e261); margin-top: 0.9em; } header .navigation .navbar.fixed .dropdown-menu a { color: #fff7d6; } header .navigation .navbar.fixed .dropdown-menu a:hover, header .navigation .navbar.fixed .dropdown-menu a:active { color: #ffd93d; background: linear-gradient(75deg, #2779b3, #63a8e5); } @media (max-width: 991.99px) { header .navigation .navbar .navbar-collapse { background: linear-gradient(75deg, #50af31, #84e261); width: 100%; margin: 0 -2em; padding: 1em 2em; } header .navigation .navbar .navbar-collapse .dropdown-menu { background: transparent; border: none; } }
.sub-page header .navigation .navbar {
background: linear-gradient(75deg, #50af31, #84e261); top: 0; z-index: 1000; }
.landing-sub-page {
background-size: contain; height: 60vh; width: 100%; position: relative; display: flex; flex-direction: row; align-items: flex-start; padding-top: 50px; z-index: 1; } .landing-sub-page .header { width: 100%; background: rgba(0, 0, 0, 0.5); padding: 2em 10em; color: white; display: flex; justify-content: center; }
.col-image img {
width: 100%; height: auto; }
/*scroll bar*/ .scrolltop {
display: none; width: 100%; margin: 0 auto; position: fixed; bottom: 20px; right: 10px; }
.scroll {
position: absolute; right: 20px; bottom: 20px; background: #b2b2b2; background: rgba(178, 178, 178, 0.7); padding: 20px; text-align: center; margin: 0 0 0 0; cursor: pointer; transition: 0.5s; }
.scroll:hover {
background: #b2b2b2; transition: 0.5s; }
.scroll:hover .fa {
padding-top: -10px; }
.scroll .fa {
font-size: 30px; margin-top: -5px; margin-left: 1px; transition: 0.5s; }
/* Tooltip container */ .tooltip {
position: relative; display: inline-block; font-weight: bold; color: #0A1612; cursor: pointer; }
/* Tooltip text */ .tooltip span {
display: block; visibility: hidden; background-color: #1a1a1a; color: #fff; text-align: center; padding: 20px; border-radius: 6px; font-weight: normal; /* Position the tooltip text */ position: absolute; z-index: 1; bottom: 125%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); /* Fade in tooltip */ opacity: 0; transition: opacity 0.8s; }
/* Tooltip arrow */ .tooltip span::after {
content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #1a1a1a transparent transparent transparent; }
/* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .shortdef {
visibility: visible; width: 20vw; opacity: 1; }
.tooltip:active .longdef {
width: 40vw; visibility: visible; opacity: 1; }
.tooltip:active .shortdef {
visibility: hidden; opacity: 0; }
footer {
background: linear-gradient(65deg, #2779b3, #004d83); padding: 2em 4em; } footer .sponsor .row { justify-content: center; } footer .sponsor img { max-width: 100%; height: auto; } footer .footer-menu { padding: 2em 0; } footer .footer-menu .row { justify-content: space-around; align-items: center; } footer .footer-menu .footer-link { text-decoration: none; list-style: none; } footer .footer-menu .footer-link a { color: #fff7d6; } footer .footer-menu .footer-link a:active, footer .footer-menu .footer-link a:hover, footer .footer-menu .footer-link a:focus { color: #ffd93d; } footer .footer-menu img { max-width: 100%;height: auto; }