diff --git a/css/not_included.css b/css/not_included.css new file mode 100644 index 0000000..4dc5e3b --- /dev/null +++ b/css/not_included.css @@ -0,0 +1,499 @@ + +@media screen and (min-width: 501px) and (max-width: 900px) { + + #unlock, + #unlock_white img { + height: 10rem; + } + + .button.is-responsive.is-small { + font-size: 0.5625rem; + } + + .button.is-responsive, + .button.is-responsive.is-normal { + font-size: 0.65625rem; + } + + .button.is-responsive.is-medium { + font-size: 0.75rem; + } + + .button.is-responsive.is-large { + font-size: 1rem; + } + + #content_all h2, #welcome h2 { + font-size: 4em; + } + + #baozun_group, #coming_soon, .credits { + margin: 0 0; + position: relative; + top: 900vw; + } +} +@media screen and (min-width: 951px) and (max-width: 1023px) { + + + #main_title { + top: 15rem; + height: 25vh; + } + + #cover .button { + top: 7vh; + } + + #content_all h2, + #welcome h2 { + font-size: 6em; + line-height: 1em; + text-align: left; + } + + #content_all .columns { + top: -145vh; + width: 55vw; + margin-left: 0; + } + + .columns { + display: block !important; + } + + .column { + width: 100% !important; + } + + #open { + top: 80vh; + } + + + + #content-4 { + margin-top: 25vh; + } + + #content-5 { + margin-top: 15vh; + } + + #popover { + margin-top: 100vh; + } + + #popover .phone-container, #portfolio .phone-container { + width: 39vw; + } + + /** + exemples sliders + */ + .slider-screen .text-title { + margin-top: 1em; + } + + .slider-screen .text, + .slider-screen .phone-container { + position: relative; + width: 412px; + left: 25vw; + top: 5vh; + } + + .bullets { + top: 28em; + } + + .arrow-left, + .arrow-right { + top: 60vh; + } + + .slider-screen { + min-height: 100vh; + } + + #popover, #portfolio { + min-height: 200vh; + } + + #popover .phone-container, #portfolio .phone-container { + width: 50vw; + } + + #we_develop .ar { + margin-top: -3rem; + } + + .section { + padding: 3rem 3rem; + } + + .section.is-medium { + padding: 9rem 4.5rem; + } + + .section.is-large { + padding: 18rem 6rem; + } + + section#carry { + padding-left: 10vw; + padding-right: 10vw; + min-height: 115rem; + margin-top: 15vh; + } + + section#carry .title { + font-size: 4rem; + } + + section#carry .description { + margin-top: 3vh; + font-size: 10rem; + } + + section#carry .computer-block { + background-size: contain; + position: relative; + height: 100vh; + width: 100%; + margin-top: 50vh; + } + + section#carry .gradient-bg { + margin-top: 0; + } + + section#carry .gradient-bg-yellow { + margin-top: 0; + } + + section#carry .bubbles { + position: static; + } + + section#carry .bubbles p { + margin-top: 2rem; + left: 0; + } + + section#carry .bubbles p :nth-of-type(1) { + left: 10%; + } + + section#carry .bubbles p :nth-of-type(2) { + left: 70%; + } + + section#carry .bubbles p :nth-of-type(3) { + left: 4vw; + margin-left: -60%; + } + + section#carry .bubbles p :nth-of-type(4) { + left: -10%; + top: -100vh; + } + + #popover, #portfolio { + height: 120vw; + } + + #popover .phone-container, #portfolio .phone-container { + width: 410px; + left: 15vw; + } + + #kyc .bubbles { + margin-top: -100vw; + } +} +@media screen and (max-width: 1200px) { + + #main_title { + margin-top: 5vh; + } + + #content_all h2, + #welcome h2 { + font-size: 4rem !important; + } + + #content_all .text { + padding-right: 0; + } + + .container-text-md { + width: auto; + } + + #content_all .columns { + width: 100%; + margin: 1rem; + } + + .flip-container .container-text { + width: 100%; + left: 5vw; + } + + .flip-container .phone-container { + position: static; + margin: 4rem auto; + } + + .flip-container.flip-from-left .container-text { + left: 5vw; + } + + .flip-container .phone-container { + margin-top: 7rem; + } + + .flip-container .text-description { + max-width: 90vw; + } + + #content-4 { + margin-top: 50vh; + } + + #content-5 { + margin-top: 45vh; + } + + .slider-screen .text, + .slider-screen .phone-container { + left: 5vw; + max-width: 90vw; + } + + #baozun_group { + margin-top: 650vw; + } +} + +@media screen and (min-width: 1201px) and (max-width: 1500px) { + + #transactionnal_webdesign { + min-height: 100vh; + padding-top: 5vh; + } + + #transactionnal_webdesign .title { + font-size: 4rem; + } + + #transactionnal_webdesign .description { + font-size: 9rem; + } + + #china .show-on-medium { + display: none; + } + + #china .hide-on-medium { + display: block; + } + + #china .line { + width: 62vw; + top: 10vh; + } + + #china .block-item { + margin-bottom: 2rem; + text-align: center; + } + + #china .top { + font-size: 4rem; + margin-bottom: 2rem; + } + + #china .bottom { + font-size: 3rem; + } + + #china .cols .columns { + text-align: center; + display: block; + } + + #we_develop .circle.circle-right { + right: 10vw; + } + + #we_develop .circle.circle-left { + right: 90vw; + } + + #we_develop .quick { + left: 3rem; + top: 77rem; + } + + #we_develop .long_term { + margin-right: 5rem; + } + + #we_develop .data { + text-align: left; + padding-left: 6rem; + margin-top: 2rem; + } + + #we_develop .ar { + text-align: right; + padding-right: 6rem; + margin-top: 3rem; + } + + #full_creative { + padding-bottom: 20rem; + } + + #full_creative .title { + padding: 2rem; + } + + #full_creative .column { + padding: 2rem; + } + + #full_creative .column p { + font-size: 1.5rem; + } + + #full_creative .column, #full_creative .columns { + display: block; + } + + #full_creative img { + margin-bottom: 15rem; + } + + #our_team { + margin-top: 70vw; + padding-bottom: 20rem; + } + + #our_team img { + max-width: 100%; + margin: 0 auto; + } + + #our_team .columns, #our_team .colmumn { + display: block; + position: static; + } + + #our_team .name { + font-size: 1.5rem; + } + + #our_team .sub-category { + margin-bottom: 10rem; + } + + #china_achievements { + margin-top: 895vw; + } + + #china_achievements p { + font-size: 2rem; + } + + #china_achievements .column, #china_achievements .columns { + position: static; + display: block; + } + + #china_achievements .offset-left-columns { + margin-left: 0; + } + + #china_achievements .text-description { + font-size: 2rem; + } + + #china_achievements .big-number { + font-size: 10rem; + text-align: center; + } + + #china_achievements .picture { + margin-left: 0; + width: 100%; + } + + #china_achievements .title { + width: 100%; + } + + #baozun_group, #coming_soon, .credits { + margin: 0 0; + position: relative; + top: 700vw; + } +} +@media all and (min-width: 1601px) { + section#carry { + min-height: 120rem; + } + + section#carry .description { + margin-top: 3vh; + font-size: 8rem; + } + + section#carry .gradient-bg { + top: -40rem; + } + + section#carry .gradient-bg-yellow { + top: 10rem; + } + + section#carry .computer-block { + width: 100%; + height: 1080px; + left: 0; + top: -154vw; + background-size: contain; + margin: 0 auto; + } + + section#carry .bubbles { + position: relative; + left: -5vw; + } + + section#carry .bubbles p :nth-of-type(1) { + top: -75vh; + } + + section#carry .bubbles p :nth-of-type(2) { + left: 70%; + } + + section#carry .bubbles p :nth-of-type(3) { + left: 20%; + top: -200vw; + } + + section#carry .bubbles p :nth-of-type(4) { + left: 10%; + top: -319vw; + } + #carry .computer-block{ + top: -82vw; + } + #china_achievements{ + padding-top:0; + } +} diff --git a/css/sprint_4.css b/css/sprint_4.css index 17460ff..9137713 100644 --- a/css/sprint_4.css +++ b/css/sprint_4.css @@ -389,7 +389,6 @@ font-style: normal; } - /** libs */ @@ -417,14 +416,17 @@ html { line-height: 1.4; text-align: center; } + ::-moz-selection { background: #2323ff; text-shadow: none; } + ::selection { background: #2323ff; text-shadow: none; } + /* * A better looking default horizontal rule */ @@ -436,6 +438,7 @@ hr { margin: 1em 0; padding: 0; } + /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: @@ -449,6 +452,7 @@ svg, video { vertical-align: middle; } + /* * Remove default fieldset styles. */ @@ -457,12 +461,14 @@ fieldset { margin: 0; padding: 0; } + /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } + /* ========================================================================== Author's custom styles ========================================================================== */ @@ -476,6 +482,7 @@ textarea { [hidden] { display: none !important; } + /* * Hide only visually, but have it available for screen readers: * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility @@ -496,6 +503,7 @@ textarea { width: 1px; /* 1 */ } + /* * Extends the .sr-only class to allow the element * to be focusable when navigated to via the keyboard: @@ -511,12 +519,14 @@ textarea { white-space: inherit; width: auto; } + /* * Hide visually and from screen readers, but maintain layout */ .invisible { visibility: hidden; } + /* * Clearfix: contain floats * @@ -533,9 +543,11 @@ textarea { content: " "; display: table; } + .clearfix::after { clear: both; } + /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. @@ -544,9 +556,11 @@ textarea { @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } + @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } + /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: @@ -620,6 +634,7 @@ textarea { page-break-after: avoid; } } + body { font-family: "GT Walsheim Pro", Arial; font-style: normal; @@ -627,18 +642,23 @@ body { position: relative; top: 0; } + .margin-auto { margin: 0 auto; } + .container-text { max-width: 360px; } + .container-text-md { max-width: 500px; } + .container-text-lg { max-width: 1062px; } + /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ @@ -650,6 +670,7 @@ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } + /* Sections ========================================================================== */ /** @@ -658,6 +679,7 @@ html { body { margin: 0; } + /** * Render the `main` element consistently in IE. */ @@ -665,6 +687,7 @@ main { display: block; background: #020225; } + /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. @@ -673,6 +696,7 @@ h1 { font-size: 2em; margin: 0.67em 0; } + /* Grouping content ========================================================================== */ /** @@ -684,6 +708,7 @@ hr { height: 0; /* 1 */ overflow: visible; /* 2 */ } + /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. @@ -692,6 +717,7 @@ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } + /* Text-level semantics ========================================================================== */ /** @@ -700,6 +726,7 @@ pre { a { background-color: transparent; } + /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. @@ -709,6 +736,7 @@ abbr[title] { text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } + /** * Add the correct font weight in Chrome, Edge, and Safari. */ @@ -716,6 +744,7 @@ b, strong { font-weight: bolder; } + /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. @@ -726,12 +755,14 @@ samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } + /** * 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. @@ -743,12 +774,15 @@ sup { position: relative; vertical-align: baseline; } + sub { bottom: -0.25em; } + sup { top: -0.5em; } + /* Embedded content ========================================================================== */ /** @@ -757,6 +791,7 @@ sup { img { border-style: none; } + /* Forms ========================================================================== */ /** @@ -773,6 +808,7 @@ textarea { line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } + /** * Show the overflow in IE. * 1. Show the overflow in Edge. @@ -782,6 +818,7 @@ input { /* 1 */ overflow: visible; } + /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. @@ -791,6 +828,7 @@ select { /* 1 */ text-transform: none; } + /** * Correct the inability to style clickable types in iOS and Safari. */ @@ -800,6 +838,7 @@ button, [type="submit"] { -webkit-appearance: button; } + /** * Remove the inner border and padding in Firefox. */ @@ -810,6 +849,7 @@ button::-moz-focus-inner, border-style: none; padding: 0; } + /** * Restore the focus styles unset by the previous rule. */ @@ -819,12 +859,14 @@ button:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } + /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } + /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. @@ -839,18 +881,21 @@ legend { padding: 0; /* 3 */ white-space: normal; /* 1 */ } + /** * 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. @@ -860,6 +905,7 @@ textarea { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } + /** * Correct the cursor style of increment and decrement buttons in Chrome. */ @@ -867,6 +913,7 @@ textarea { [type="number"]::-webkit-outer-spin-button { height: auto; } + /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. @@ -875,12 +922,14 @@ textarea { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } + /** * Remove the inner padding in Chrome and Safari on macOS. */ [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. @@ -889,6 +938,7 @@ textarea { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } + /* Interactive ========================================================================== */ /* @@ -897,12 +947,14 @@ textarea { details { display: block; } + /* * Add the correct display in all browsers. */ summary { display: list-item; } + /* Misc ========================================================================== */ /** @@ -911,12 +963,14 @@ summary { template { display: none; } + /** * Add the correct display in IE 10. */ [hidden] { display: none; } + /*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */ /* Bulma Utilities */ .button, @@ -947,6 +1001,7 @@ template { position: relative; vertical-align: top; } + .button:focus, .input:focus, .textarea:focus, @@ -989,6 +1044,7 @@ template { .is-active.pagination-ellipsis { outline: none; } + .button[disabled], .input[disabled], .textarea[disabled], @@ -1012,6 +1068,7 @@ fieldset[disabled] .pagination-link, fieldset[disabled] .pagination-ellipsis { cursor: not-allowed; } + .button, .file, .breadcrumb, @@ -1027,6 +1084,7 @@ fieldset[disabled] .pagination-ellipsis { -webkit-user-select: none; user-select: none; } + .select:not(.is-multiple):not(.is-loading)::after, .navbar-link:not(.is-arrowless)::after { border: 3px solid transparent; @@ -1044,6 +1102,7 @@ fieldset[disabled] .pagination-ellipsis { transform-origin: center; width: 0.625em; } + .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), @@ -1060,6 +1119,7 @@ fieldset[disabled] .pagination-ellipsis { .tabs:not(:last-child) { margin-bottom: 1.5rem; } + .delete, .modal-close { -moz-appearance: none; @@ -1088,6 +1148,7 @@ fieldset[disabled] .pagination-ellipsis { vertical-align: top; width: 20px; } + .delete::before, .modal-close::before, .delete::after, @@ -1101,26 +1162,31 @@ fieldset[disabled] .pagination-ellipsis { transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center; } + .delete::before, .modal-close::before { height: 2px; width: 50%; } + .delete::after, .modal-close::after { height: 50%; width: 2px; } + .delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus { background-color: rgba(10, 10, 10, 0.3); } + .delete:active, .modal-close:active { background-color: rgba(10, 10, 10, 0.4); } + .is-small.delete, .is-small.modal-close { height: 16px; @@ -1130,6 +1196,7 @@ fieldset[disabled] .pagination-ellipsis { min-width: 16px; width: 16px; } + .is-medium.delete, .is-medium.modal-close { height: 24px; @@ -1139,6 +1206,7 @@ fieldset[disabled] .pagination-ellipsis { min-width: 24px; width: 24px; } + .is-large.delete, .is-large.modal-close { height: 32px; @@ -1148,6 +1216,7 @@ fieldset[disabled] .pagination-ellipsis { min-width: 32px; width: 32px; } + .button.is-loading::after, .loader, .select.is-loading::after, @@ -1164,6 +1233,7 @@ fieldset[disabled] .pagination-ellipsis { position: relative; width: 1em; } + .image.is-square img, .image.is-square .has-ratio, .image.is-1by1 img, @@ -1206,6 +1276,7 @@ fieldset[disabled] .pagination-ellipsis { right: 0; top: 0; } + .navbar-burger { -moz-appearance: none; -webkit-appearance: none; @@ -1218,6 +1289,7 @@ fieldset[disabled] .pagination-ellipsis { margin: 0; padding: 0; } + /* Bulma Base */ /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ html, @@ -1246,6 +1318,7 @@ h6 { margin: 0; padding: 0; } + h1, h2, h3, @@ -1255,43 +1328,53 @@ h6 { font-size: 100%; font-weight: normal; } + ul { list-style: none; } + button, input, select, textarea { margin: 0; } + html { box-sizing: border-box; } + *, *::before, *::after { box-sizing: inherit; } + img, video { height: auto; max-width: 100%; } + iframe { border: 0; } + table { border-collapse: collapse; border-spacing: 0; } + td, th { padding: 0; } + td:not([align]), th:not([align]) { text-align: inherit; } + html { background-color: white; font-size: 16px; @@ -1305,6 +1388,7 @@ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } + article, aside, figure, @@ -1314,6 +1398,7 @@ hgroup, section { display: block; } + body, button, input, @@ -1324,29 +1409,35 @@ textarea { "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } + code, pre { font-family: monospace; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } + body { color: #4a4a4a; font-size: 1em; font-weight: 400; line-height: 1.5; } + a { color: #485fc7; cursor: pointer; text-decoration: none; } + a strong { color: currentColor; } + a:hover { color: #363636; } + code { background-color: whitesmoke; color: #da1039; @@ -1354,6 +1445,7 @@ code { font-weight: normal; padding: 0.25em 0.5em 0.25em; } + hr { background-color: whitesmoke; border: none; @@ -1361,28 +1453,35 @@ hr { height: 2px; margin: 1.5rem 0; } + img { height: auto; max-width: 100%; } + input[type="checkbox"], input[type="radio"] { vertical-align: baseline; } + small { font-size: 0.875em; } + span { font-style: inherit; font-weight: inherit; } + strong { color: #363636; font-weight: 700; } + fieldset { border: none; } + pre { background-color: whitesmoke; color: #4a4a4a; @@ -1393,23 +1492,28 @@ pre { white-space: pre; word-wrap: normal; } + pre code { background-color: transparent; color: currentColor; font-size: 1em; padding: 0; } + table td, table th { vertical-align: top; } + table td:not([align]), table th:not([align]) { text-align: inherit; } + table th { color: #363636; } + @-webkit-keyframes spinAround { from { transform: rotate(0deg); @@ -1418,6 +1522,7 @@ table th { transform: rotate(359deg); } } + @keyframes spinAround { from { transform: rotate(0deg); @@ -1426,6 +1531,7 @@ table th { transform: rotate(359deg); } } + /* Bulma Elements */ .box { background-color: white; @@ -1436,13 +1542,16 @@ table th { display: block; padding: 1.25rem; } + a.box:hover, a.box:focus { box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px #485fc7; } + a.box:active { box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #485fc7; } + .button { background-color: white; border-color: #dbdbdb; @@ -1457,9 +1566,11 @@ a.box:active { text-align: center; white-space: nowrap; } + .button strong { color: inherit; } + .button .icon, .button .icon.is-small, .button .icon.is-medium, @@ -1467,43 +1578,52 @@ a.box:active { height: 1.5em; width: 1.5em; } + .button .icon:first-child:not(:last-child) { margin-left: calc(-0.5em - 1px); margin-right: 0.25em; } + .button .icon:last-child:not(:first-child) { margin-left: 0.25em; margin-right: calc(-0.5em - 1px); } + .button .icon:first-child:last-child { margin-left: calc(-0.5em - 1px); margin-right: calc(-0.5em - 1px); } + .button:hover, .button.is-hovered { border-color: #b5b5b5; color: #363636; } + .button:focus, .button.is-focused { border-color: #485fc7; color: #363636; } + .button:focus:not(:active), .button.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } + .button:active, .button.is-active { border-color: #4a4a4a; color: #363636; } + .button.is-text { background-color: transparent; border-color: transparent; color: #4a4a4a; text-decoration: underline; } + .button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, @@ -1511,68 +1631,81 @@ a.box:active { background-color: whitesmoke; color: #363636; } + .button.is-text:active, .button.is-text.is-active { background-color: #e8e8e8; color: #363636; } + .button.is-text[disabled], fieldset[disabled] .button.is-text { background-color: transparent; border-color: transparent; box-shadow: none; } + .button.is-ghost { background: none; border-color: transparent; color: #485fc7; text-decoration: none; } + .button.is-ghost:hover, .button.is-ghost.is-hovered { color: #485fc7; text-decoration: underline; } + .button.is-white { background-color: white; border-color: transparent; color: #0a0a0a; } + .button.is-white:hover, .button.is-white.is-hovered { background-color: #f9f9f9; border-color: transparent; color: #0a0a0a; } + .button.is-white:focus, .button.is-white.is-focused { border-color: transparent; color: #0a0a0a; } + .button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); } + .button.is-white:active, .button.is-white.is-active { background-color: #f2f2f2; border-color: transparent; color: #0a0a0a; } + .button.is-white[disabled], fieldset[disabled] .button.is-white { background-color: white; border-color: white; box-shadow: none; } + .button.is-white.is-inverted { background-color: #0a0a0a; color: white; } + .button.is-white.is-inverted:hover, .button.is-white.is-inverted.is-hovered { background-color: black; } + .button.is-white.is-inverted[disabled], fieldset[disabled] .button.is-white.is-inverted { background-color: #0a0a0a; @@ -1580,14 +1713,17 @@ fieldset[disabled] .button.is-white.is-inverted { box-shadow: none; color: white; } + .button.is-white.is-loading::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } + .button.is-white.is-outlined { background-color: transparent; border-color: white; color: white; } + .button.is-white.is-outlined:hover, .button.is-white.is-outlined.is-hovered, .button.is-white.is-outlined:focus, @@ -1596,15 +1732,18 @@ fieldset[disabled] .button.is-white.is-inverted { border-color: white; color: #0a0a0a; } + .button.is-white.is-outlined.is-loading::after { border-color: transparent transparent white white !important; } + .button.is-white.is-outlined.is-loading:hover::after, .button.is-white.is-outlined.is-loading.is-hovered::after, .button.is-white.is-outlined.is-loading:focus::after, .button.is-white.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } + .button.is-white.is-outlined[disabled], fieldset[disabled] .button.is-white.is-outlined { background-color: transparent; @@ -1612,11 +1751,13 @@ fieldset[disabled] .button.is-white.is-outlined { box-shadow: none; color: white; } + .button.is-white.is-inverted.is-outlined { background-color: transparent; border-color: #0a0a0a; color: #0a0a0a; } + .button.is-white.is-inverted.is-outlined:hover, .button.is-white.is-inverted.is-outlined.is-hovered, .button.is-white.is-inverted.is-outlined:focus, @@ -1624,12 +1765,14 @@ fieldset[disabled] .button.is-white.is-outlined { background-color: #0a0a0a; color: white; } + .button.is-white.is-inverted.is-outlined.is-loading:hover::after, .button.is-white.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-white.is-inverted.is-outlined.is-loading:focus::after, .button.is-white.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent white white !important; } + .button.is-white.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-white.is-inverted.is-outlined { background-color: transparent; @@ -1637,46 +1780,55 @@ fieldset[disabled] .button.is-white.is-inverted.is-outlined { box-shadow: none; color: #0a0a0a; } + .button.is-black { background-color: #0a0a0a; border-color: transparent; color: white; } + .button.is-black:hover, .button.is-black.is-hovered { background-color: #040404; border-color: transparent; color: white; } + .button.is-black:focus, .button.is-black.is-focused { border-color: transparent; color: white; } + .button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } + .button.is-black:active, .button.is-black.is-active { background-color: black; border-color: transparent; color: white; } + .button.is-black[disabled], fieldset[disabled] .button.is-black { background-color: #0a0a0a; border-color: #0a0a0a; box-shadow: none; } + .button.is-black.is-inverted { background-color: white; color: #0a0a0a; } + .button.is-black.is-inverted:hover, .button.is-black.is-inverted.is-hovered { background-color: #f2f2f2; } + .button.is-black.is-inverted[disabled], fieldset[disabled] .button.is-black.is-inverted { background-color: white; @@ -1684,14 +1836,17 @@ fieldset[disabled] .button.is-black.is-inverted { box-shadow: none; color: #0a0a0a; } + .button.is-black.is-loading::after { border-color: transparent transparent white white !important; } + .button.is-black.is-outlined { background-color: transparent; border-color: #0a0a0a; color: #0a0a0a; } + .button.is-black.is-outlined:hover, .button.is-black.is-outlined.is-hovered, .button.is-black.is-outlined:focus, @@ -1700,15 +1855,18 @@ fieldset[disabled] .button.is-black.is-inverted { border-color: #0a0a0a; color: white; } + .button.is-black.is-outlined.is-loading::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } + .button.is-black.is-outlined.is-loading:hover::after, .button.is-black.is-outlined.is-loading.is-hovered::after, .button.is-black.is-outlined.is-loading:focus::after, .button.is-black.is-outlined.is-loading.is-focused::after { border-color: transparent transparent white white !important; } + .button.is-black.is-outlined[disabled], fieldset[disabled] .button.is-black.is-outlined { background-color: transparent; @@ -1716,11 +1874,13 @@ fieldset[disabled] .button.is-black.is-outlined { box-shadow: none; color: #0a0a0a; } + .button.is-black.is-inverted.is-outlined { background-color: transparent; border-color: white; color: white; } + .button.is-black.is-inverted.is-outlined:hover, .button.is-black.is-inverted.is-outlined.is-hovered, .button.is-black.is-inverted.is-outlined:focus, @@ -1728,12 +1888,14 @@ fieldset[disabled] .button.is-black.is-outlined { background-color: white; color: #0a0a0a; } + .button.is-black.is-inverted.is-outlined.is-loading:hover::after, .button.is-black.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-black.is-inverted.is-outlined.is-loading:focus::after, .button.is-black.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #0a0a0a #0a0a0a !important; } + .button.is-black.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-black.is-inverted.is-outlined { background-color: transparent; @@ -1741,46 +1903,55 @@ fieldset[disabled] .button.is-black.is-inverted.is-outlined { box-shadow: none; color: white; } + .button.is-light { background-color: whitesmoke; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .button.is-light:hover, .button.is-light.is-hovered { background-color: #eee; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .button.is-light:focus, .button.is-light.is-focused { border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } + .button.is-light:active, .button.is-light.is-active { background-color: #e8e8e8; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .button.is-light[disabled], fieldset[disabled] .button.is-light { background-color: whitesmoke; border-color: whitesmoke; box-shadow: none; } + .button.is-light.is-inverted { background-color: rgba(0, 0, 0, 0.7); color: whitesmoke; } + .button.is-light.is-inverted:hover, .button.is-light.is-inverted.is-hovered { background-color: rgba(0, 0, 0, 0.7); } + .button.is-light.is-inverted[disabled], fieldset[disabled] .button.is-light.is-inverted { background-color: rgba(0, 0, 0, 0.7); @@ -1788,14 +1959,17 @@ fieldset[disabled] .button.is-light.is-inverted { box-shadow: none; color: whitesmoke; } + .button.is-light.is-loading::after { border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } + .button.is-light.is-outlined { background-color: transparent; border-color: whitesmoke; color: whitesmoke; } + .button.is-light.is-outlined:hover, .button.is-light.is-outlined.is-hovered, .button.is-light.is-outlined:focus, @@ -1804,15 +1978,18 @@ fieldset[disabled] .button.is-light.is-inverted { border-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } + .button.is-light.is-outlined.is-loading::after { border-color: transparent transparent whitesmoke whitesmoke !important; } + .button.is-light.is-outlined.is-loading:hover::after, .button.is-light.is-outlined.is-loading.is-hovered::after, .button.is-light.is-outlined.is-loading:focus::after, .button.is-light.is-outlined.is-loading.is-focused::after { border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } + .button.is-light.is-outlined[disabled], fieldset[disabled] .button.is-light.is-outlined { background-color: transparent; @@ -1820,11 +1997,13 @@ fieldset[disabled] .button.is-light.is-outlined { box-shadow: none; color: whitesmoke; } + .button.is-light.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7); } + .button.is-light.is-inverted.is-outlined:hover, .button.is-light.is-inverted.is-outlined.is-hovered, .button.is-light.is-inverted.is-outlined:focus, @@ -1832,12 +2011,14 @@ fieldset[disabled] .button.is-light.is-outlined { background-color: rgba(0, 0, 0, 0.7); color: whitesmoke; } + .button.is-light.is-inverted.is-outlined.is-loading:hover::after, .button.is-light.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-light.is-inverted.is-outlined.is-loading:focus::after, .button.is-light.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent whitesmoke whitesmoke !important; } + .button.is-light.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-light.is-inverted.is-outlined { background-color: transparent; @@ -1845,46 +2026,55 @@ fieldset[disabled] .button.is-light.is-inverted.is-outlined { box-shadow: none; color: rgba(0, 0, 0, 0.7); } + .button.is-dark { background-color: #363636; border-color: transparent; color: #fff; } + .button.is-dark:hover, .button.is-dark.is-hovered { background-color: #2f2f2f; border-color: transparent; color: #fff; } + .button.is-dark:focus, .button.is-dark.is-focused { border-color: transparent; color: #fff; } + .button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } + .button.is-dark:active, .button.is-dark.is-active { background-color: #292929; border-color: transparent; color: #fff; } + .button.is-dark[disabled], fieldset[disabled] .button.is-dark { background-color: #363636; border-color: #363636; box-shadow: none; } + .button.is-dark.is-inverted { background-color: #fff; color: #363636; } + .button.is-dark.is-inverted:hover, .button.is-dark.is-inverted.is-hovered { background-color: #f2f2f2; } + .button.is-dark.is-inverted[disabled], fieldset[disabled] .button.is-dark.is-inverted { background-color: #fff; @@ -1892,14 +2082,17 @@ fieldset[disabled] .button.is-dark.is-inverted { box-shadow: none; color: #363636; } + .button.is-dark.is-loading::after { border-color: transparent transparent #fff #fff !important; } + .button.is-dark.is-outlined { background-color: transparent; border-color: #363636; color: #363636; } + .button.is-dark.is-outlined:hover, .button.is-dark.is-outlined.is-hovered, .button.is-dark.is-outlined:focus, @@ -1908,15 +2101,18 @@ fieldset[disabled] .button.is-dark.is-inverted { border-color: #363636; color: #fff; } + .button.is-dark.is-outlined.is-loading::after { border-color: transparent transparent #363636 #363636 !important; } + .button.is-dark.is-outlined.is-loading:hover::after, .button.is-dark.is-outlined.is-loading.is-hovered::after, .button.is-dark.is-outlined.is-loading:focus::after, .button.is-dark.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #fff #fff !important; } + .button.is-dark.is-outlined[disabled], fieldset[disabled] .button.is-dark.is-outlined { background-color: transparent; @@ -1924,11 +2120,13 @@ fieldset[disabled] .button.is-dark.is-outlined { box-shadow: none; color: #363636; } + .button.is-dark.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff; } + .button.is-dark.is-inverted.is-outlined:hover, .button.is-dark.is-inverted.is-outlined.is-hovered, .button.is-dark.is-inverted.is-outlined:focus, @@ -1936,12 +2134,14 @@ fieldset[disabled] .button.is-dark.is-outlined { background-color: #fff; color: #363636; } + .button.is-dark.is-inverted.is-outlined.is-loading:hover::after, .button.is-dark.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-dark.is-inverted.is-outlined.is-loading:focus::after, .button.is-dark.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #363636 #363636 !important; } + .button.is-dark.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-dark.is-inverted.is-outlined { background-color: transparent; @@ -1949,46 +2149,55 @@ fieldset[disabled] .button.is-dark.is-inverted.is-outlined { box-shadow: none; color: #fff; } + .button.is-primary { background-color: #00d1b2; border-color: transparent; color: #fff; } + .button.is-primary:hover, .button.is-primary.is-hovered { background-color: #00c4a7; border-color: transparent; color: #fff; } + .button.is-primary:focus, .button.is-primary.is-focused { border-color: transparent; color: #fff; } + .button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); } + .button.is-primary:active, .button.is-primary.is-active { background-color: #00b89c; border-color: transparent; color: #fff; } + .button.is-primary[disabled], fieldset[disabled] .button.is-primary { background-color: #00d1b2; border-color: #00d1b2; box-shadow: none; } + .button.is-primary.is-inverted { background-color: #fff; color: #00d1b2; } + .button.is-primary.is-inverted:hover, .button.is-primary.is-inverted.is-hovered { background-color: #f2f2f2; } + .button.is-primary.is-inverted[disabled], fieldset[disabled] .button.is-primary.is-inverted { background-color: #fff; @@ -1996,14 +2205,17 @@ fieldset[disabled] .button.is-primary.is-inverted { box-shadow: none; color: #00d1b2; } + .button.is-primary.is-loading::after { border-color: transparent transparent #fff #fff !important; } + .button.is-primary.is-outlined { background-color: transparent; border-color: #00d1b2; color: #00d1b2; } + .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined.is-hovered, .button.is-primary.is-outlined:focus, @@ -2012,15 +2224,18 @@ fieldset[disabled] .button.is-primary.is-inverted { border-color: #00d1b2; color: #fff; } + .button.is-primary.is-outlined.is-loading::after { border-color: transparent transparent #00d1b2 #00d1b2 !important; } + .button.is-primary.is-outlined.is-loading:hover::after, .button.is-primary.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-outlined.is-loading:focus::after, .button.is-primary.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #fff #fff !important; } + .button.is-primary.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-outlined { background-color: transparent; @@ -2028,11 +2243,13 @@ fieldset[disabled] .button.is-primary.is-outlined { box-shadow: none; color: #00d1b2; } + .button.is-primary.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff; } + .button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined.is-hovered, .button.is-primary.is-inverted.is-outlined:focus, @@ -2040,12 +2257,14 @@ fieldset[disabled] .button.is-primary.is-outlined { background-color: #fff; color: #00d1b2; } + .button.is-primary.is-inverted.is-outlined.is-loading:hover::after, .button.is-primary.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-inverted.is-outlined.is-loading:focus::after, .button.is-primary.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #00d1b2 #00d1b2 !important; } + .button.is-primary.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-inverted.is-outlined { background-color: transparent; @@ -2053,62 +2272,74 @@ fieldset[disabled] .button.is-primary.is-inverted.is-outlined { box-shadow: none; color: #fff; } + .button.is-primary.is-light { background-color: #ebfffc; color: #00947e; } + .button.is-primary.is-light:hover, .button.is-primary.is-light.is-hovered { background-color: #defffa; border-color: transparent; color: #00947e; } + .button.is-primary.is-light:active, .button.is-primary.is-light.is-active { background-color: #d1fff8; border-color: transparent; color: #00947e; } + .button.is-link { background-color: #485fc7; border-color: transparent; color: #fff; } + .button.is-link:hover, .button.is-link.is-hovered { background-color: #3e56c4; border-color: transparent; color: #fff; } + .button.is-link:focus, .button.is-link.is-focused { border-color: transparent; color: #fff; } + .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } + .button.is-link:active, .button.is-link.is-active { background-color: #3a51bb; border-color: transparent; color: #fff; } + .button.is-link[disabled], fieldset[disabled] .button.is-link { background-color: #485fc7; border-color: #485fc7; box-shadow: none; } + .button.is-link.is-inverted { background-color: #fff; color: #485fc7; } + .button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered { background-color: #f2f2f2; } + .button.is-link.is-inverted[disabled], fieldset[disabled] .button.is-link.is-inverted { background-color: #fff; @@ -2116,14 +2347,17 @@ fieldset[disabled] .button.is-link.is-inverted { box-shadow: none; color: #485fc7; } + .button.is-link.is-loading::after { border-color: transparent transparent #fff #fff !important; } + .button.is-link.is-outlined { background-color: transparent; border-color: #485fc7; color: #485fc7; } + .button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, @@ -2132,15 +2366,18 @@ fieldset[disabled] .button.is-link.is-inverted { border-color: #485fc7; color: #fff; } + .button.is-link.is-outlined.is-loading::after { border-color: transparent transparent #485fc7 #485fc7 !important; } + .button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #fff #fff !important; } + .button.is-link.is-outlined[disabled], fieldset[disabled] .button.is-link.is-outlined { background-color: transparent; @@ -2148,11 +2385,13 @@ fieldset[disabled] .button.is-link.is-outlined { box-shadow: none; color: #485fc7; } + .button.is-link.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff; } + .button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined.is-hovered, .button.is-link.is-inverted.is-outlined:focus, @@ -2160,12 +2399,14 @@ fieldset[disabled] .button.is-link.is-outlined { background-color: #fff; color: #485fc7; } + .button.is-link.is-inverted.is-outlined.is-loading:hover::after, .button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #485fc7 #485fc7 !important; } + .button.is-link.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-link.is-inverted.is-outlined { background-color: transparent; @@ -2173,62 +2414,74 @@ fieldset[disabled] .button.is-link.is-inverted.is-outlined { box-shadow: none; color: #fff; } + .button.is-link.is-light { background-color: #eff1fa; color: #3850b7; } + .button.is-link.is-light:hover, .button.is-link.is-light.is-hovered { background-color: #e6e9f7; border-color: transparent; color: #3850b7; } + .button.is-link.is-light:active, .button.is-link.is-light.is-active { background-color: #dce0f4; border-color: transparent; color: #3850b7; } + .button.is-info { background-color: #3e8ed0; border-color: transparent; color: #fff; } + .button.is-info:hover, .button.is-info.is-hovered { background-color: #3488ce; border-color: transparent; color: #fff; } + .button.is-info:focus, .button.is-info.is-focused { border-color: transparent; color: #fff; } + .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25); } + .button.is-info:active, .button.is-info.is-active { background-color: #3082c5; border-color: transparent; color: #fff; } + .button.is-info[disabled], fieldset[disabled] .button.is-info { background-color: #3e8ed0; border-color: #3e8ed0; box-shadow: none; } + .button.is-info.is-inverted { background-color: #fff; color: #3e8ed0; } + .button.is-info.is-inverted:hover, .button.is-info.is-inverted.is-hovered { background-color: #f2f2f2; } + .button.is-info.is-inverted[disabled], fieldset[disabled] .button.is-info.is-inverted { background-color: #fff; @@ -2236,14 +2489,17 @@ fieldset[disabled] .button.is-info.is-inverted { box-shadow: none; color: #3e8ed0; } + .button.is-info.is-loading::after { border-color: transparent transparent #fff #fff !important; } + .button.is-info.is-outlined { background-color: transparent; border-color: #3e8ed0; color: #3e8ed0; } + .button.is-info.is-outlined:hover, .button.is-info.is-outlined.is-hovered, .button.is-info.is-outlined:focus, @@ -2252,15 +2508,18 @@ fieldset[disabled] .button.is-info.is-inverted { border-color: #3e8ed0; color: #fff; } + .button.is-info.is-outlined.is-loading::after { border-color: transparent transparent #3e8ed0 #3e8ed0 !important; } + .button.is-info.is-outlined.is-loading:hover::after, .button.is-info.is-outlined.is-loading.is-hovered::after, .button.is-info.is-outlined.is-loading:focus::after, .button.is-info.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #fff #fff !important; } + .button.is-info.is-outlined[disabled], fieldset[disabled] .button.is-info.is-outlined { background-color: transparent; @@ -2268,11 +2527,13 @@ fieldset[disabled] .button.is-info.is-outlined { box-shadow: none; color: #3e8ed0; } + .button.is-info.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff; } + .button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined.is-hovered, .button.is-info.is-inverted.is-outlined:focus, @@ -2280,12 +2541,14 @@ fieldset[disabled] .button.is-info.is-outlined { background-color: #fff; color: #3e8ed0; } + .button.is-info.is-inverted.is-outlined.is-loading:hover::after, .button.is-info.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-info.is-inverted.is-outlined.is-loading:focus::after, .button.is-info.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #3e8ed0 #3e8ed0 !important; } + .button.is-info.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-info.is-inverted.is-outlined { background-color: transparent; @@ -2293,62 +2556,74 @@ fieldset[disabled] .button.is-info.is-inverted.is-outlined { box-shadow: none; color: #fff; } + .button.is-info.is-light { background-color: #eff5fb; color: #296fa8; } + .button.is-info.is-light:hover, .button.is-info.is-light.is-hovered { background-color: #e4eff9; border-color: transparent; color: #296fa8; } + .button.is-info.is-light:active, .button.is-info.is-light.is-active { background-color: #dae9f6; border-color: transparent; color: #296fa8; } + .button.is-success { background-color: #48c78e; border-color: transparent; color: #fff; } + .button.is-success:hover, .button.is-success.is-hovered { background-color: #3ec487; border-color: transparent; color: #fff; } + .button.is-success:focus, .button.is-success.is-focused { border-color: transparent; color: #fff; } + .button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25); } + .button.is-success:active, .button.is-success.is-active { background-color: #3abb81; border-color: transparent; color: #fff; } + .button.is-success[disabled], fieldset[disabled] .button.is-success { background-color: #48c78e; border-color: #48c78e; box-shadow: none; } + .button.is-success.is-inverted { background-color: #fff; color: #48c78e; } + .button.is-success.is-inverted:hover, .button.is-success.is-inverted.is-hovered { background-color: #f2f2f2; } + .button.is-success.is-inverted[disabled], fieldset[disabled] .button.is-success.is-inverted { background-color: #fff; @@ -2356,14 +2631,17 @@ fieldset[disabled] .button.is-success.is-inverted { box-shadow: none; color: #48c78e; } + .button.is-success.is-loading::after { border-color: transparent transparent #fff #fff !important; } + .button.is-success.is-outlined { background-color: transparent; border-color: #48c78e; color: #48c78e; } + .button.is-success.is-outlined:hover, .button.is-success.is-outlined.is-hovered, .button.is-success.is-outlined:focus, @@ -2372,15 +2650,18 @@ fieldset[disabled] .button.is-success.is-inverted { border-color: #48c78e; color: #fff; } + .button.is-success.is-outlined.is-loading::after { border-color: transparent transparent #48c78e #48c78e !important; } + .button.is-success.is-outlined.is-loading:hover::after, .button.is-success.is-outlined.is-loading.is-hovered::after, .button.is-success.is-outlined.is-loading:focus::after, .button.is-success.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #fff #fff !important; } + .button.is-success.is-outlined[disabled], fieldset[disabled] .button.is-success.is-outlined { background-color: transparent; @@ -2388,11 +2669,13 @@ fieldset[disabled] .button.is-success.is-outlined { box-shadow: none; color: #48c78e; } + .button.is-success.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff; } + .button.is-success.is-inverted.is-outlined:hover, .button.is-success.is-inverted.is-outlined.is-hovered, .button.is-success.is-inverted.is-outlined:focus, @@ -2400,12 +2683,14 @@ fieldset[disabled] .button.is-success.is-outlined { background-color: #fff; color: #48c78e; } + .button.is-success.is-inverted.is-outlined.is-loading:hover::after, .button.is-success.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-success.is-inverted.is-outlined.is-loading:focus::after, .button.is-success.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #48c78e #48c78e !important; } + .button.is-success.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-success.is-inverted.is-outlined { background-color: transparent; @@ -2413,62 +2698,74 @@ fieldset[disabled] .button.is-success.is-inverted.is-outlined { box-shadow: none; color: #fff; } + .button.is-success.is-light { background-color: #effaf5; color: #257953; } + .button.is-success.is-light:hover, .button.is-success.is-light.is-hovered { background-color: #e6f7ef; border-color: transparent; color: #257953; } + .button.is-success.is-light:active, .button.is-success.is-light.is-active { background-color: #dcf4e9; border-color: transparent; color: #257953; } + .button.is-warning { background-color: #ffe08a; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .button.is-warning:hover, .button.is-warning.is-hovered { background-color: #ffdc7d; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .button.is-warning:focus, .button.is-warning.is-focused { border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(255, 224, 138, 0.25); } + .button.is-warning:active, .button.is-warning.is-active { background-color: #ffd970; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .button.is-warning[disabled], fieldset[disabled] .button.is-warning { background-color: #ffe08a; border-color: #ffe08a; box-shadow: none; } + .button.is-warning.is-inverted { background-color: rgba(0, 0, 0, 0.7); color: #ffe08a; } + .button.is-warning.is-inverted:hover, .button.is-warning.is-inverted.is-hovered { background-color: rgba(0, 0, 0, 0.7); } + .button.is-warning.is-inverted[disabled], fieldset[disabled] .button.is-warning.is-inverted { background-color: rgba(0, 0, 0, 0.7); @@ -2476,14 +2773,17 @@ fieldset[disabled] .button.is-warning.is-inverted { box-shadow: none; color: #ffe08a; } + .button.is-warning.is-loading::after { border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } + .button.is-warning.is-outlined { background-color: transparent; border-color: #ffe08a; color: #ffe08a; } + .button.is-warning.is-outlined:hover, .button.is-warning.is-outlined.is-hovered, .button.is-warning.is-outlined:focus, @@ -2492,15 +2792,18 @@ fieldset[disabled] .button.is-warning.is-inverted { border-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } + .button.is-warning.is-outlined.is-loading::after { border-color: transparent transparent #ffe08a #ffe08a !important; } + .button.is-warning.is-outlined.is-loading:hover::after, .button.is-warning.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-outlined.is-loading:focus::after, .button.is-warning.is-outlined.is-loading.is-focused::after { border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } + .button.is-warning.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-outlined { background-color: transparent; @@ -2508,11 +2811,13 @@ fieldset[disabled] .button.is-warning.is-outlined { box-shadow: none; color: #ffe08a; } + .button.is-warning.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7); } + .button.is-warning.is-inverted.is-outlined:hover, .button.is-warning.is-inverted.is-outlined.is-hovered, .button.is-warning.is-inverted.is-outlined:focus, @@ -2520,12 +2825,14 @@ fieldset[disabled] .button.is-warning.is-outlined { background-color: rgba(0, 0, 0, 0.7); color: #ffe08a; } + .button.is-warning.is-inverted.is-outlined.is-loading:hover::after, .button.is-warning.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-inverted.is-outlined.is-loading:focus::after, .button.is-warning.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #ffe08a #ffe08a !important; } + .button.is-warning.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-inverted.is-outlined { background-color: transparent; @@ -2533,62 +2840,74 @@ fieldset[disabled] .button.is-warning.is-inverted.is-outlined { box-shadow: none; color: rgba(0, 0, 0, 0.7); } + .button.is-warning.is-light { background-color: #fffaeb; color: #946c00; } + .button.is-warning.is-light:hover, .button.is-warning.is-light.is-hovered { background-color: #fff6de; border-color: transparent; color: #946c00; } + .button.is-warning.is-light:active, .button.is-warning.is-light.is-active { background-color: #fff3d1; border-color: transparent; color: #946c00; } + .button.is-danger { background-color: #f14668; border-color: transparent; color: #fff; } + .button.is-danger:hover, .button.is-danger.is-hovered { background-color: #f03a5f; border-color: transparent; color: #fff; } + .button.is-danger:focus, .button.is-danger.is-focused { border-color: transparent; color: #fff; } + .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) { box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25); } + .button.is-danger:active, .button.is-danger.is-active { background-color: #ef2e55; border-color: transparent; color: #fff; } + .button.is-danger[disabled], fieldset[disabled] .button.is-danger { background-color: #f14668; border-color: #f14668; box-shadow: none; } + .button.is-danger.is-inverted { background-color: #fff; color: #f14668; } + .button.is-danger.is-inverted:hover, .button.is-danger.is-inverted.is-hovered { background-color: #f2f2f2; } + .button.is-danger.is-inverted[disabled], fieldset[disabled] .button.is-danger.is-inverted { background-color: #fff; @@ -2596,14 +2915,17 @@ fieldset[disabled] .button.is-danger.is-inverted { box-shadow: none; color: #f14668; } + .button.is-danger.is-loading::after { border-color: transparent transparent #fff #fff !important; } + .button.is-danger.is-outlined { background-color: transparent; border-color: #f14668; color: #f14668; } + .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined.is-hovered, .button.is-danger.is-outlined:focus, @@ -2612,15 +2934,18 @@ fieldset[disabled] .button.is-danger.is-inverted { border-color: #f14668; color: #fff; } + .button.is-danger.is-outlined.is-loading::after { border-color: transparent transparent #f14668 #f14668 !important; } + .button.is-danger.is-outlined.is-loading:hover::after, .button.is-danger.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-outlined.is-loading:focus::after, .button.is-danger.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #fff #fff !important; } + .button.is-danger.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-outlined { background-color: transparent; @@ -2628,11 +2953,13 @@ fieldset[disabled] .button.is-danger.is-outlined { box-shadow: none; color: #f14668; } + .button.is-danger.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff; } + .button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined.is-hovered, .button.is-danger.is-inverted.is-outlined:focus, @@ -2640,12 +2967,14 @@ fieldset[disabled] .button.is-danger.is-outlined { background-color: #fff; color: #f14668; } + .button.is-danger.is-inverted.is-outlined.is-loading:hover::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-inverted.is-outlined.is-loading:focus::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #f14668 #f14668 !important; } + .button.is-danger.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-inverted.is-outlined { background-color: transparent; @@ -2653,37 +2982,46 @@ fieldset[disabled] .button.is-danger.is-inverted.is-outlined { box-shadow: none; color: #fff; } + .button.is-danger.is-light { background-color: #feecf0; color: #cc0f35; } + .button.is-danger.is-light:hover, .button.is-danger.is-light.is-hovered { background-color: #fde0e6; border-color: transparent; color: #cc0f35; } + .button.is-danger.is-light:active, .button.is-danger.is-light.is-active { background-color: #fcd4dc; border-color: transparent; color: #cc0f35; } + .button.is-small { font-size: 0.75rem; } + .button.is-small:not(.is-rounded) { border-radius: 2px; } + .button.is-normal { font-size: 1rem; } + .button.is-medium { font-size: 1.25rem; } + .button.is-large { font-size: 1.5rem; } + .button[disabled], fieldset[disabled] .button { background-color: white; @@ -2691,20 +3029,24 @@ fieldset[disabled] .button { box-shadow: none; opacity: 0.5; } + .button.is-fullwidth { display: flex; width: 100%; } + .button.is-loading { color: transparent !important; pointer-events: none; } + .button.is-loading::after { left: calc(50% - (1em * 0.5)); position: absolute; position: absolute !important; top: calc(50% - (1em * 0.5)); } + .button.is-static { background-color: whitesmoke; border-color: #dbdbdb; @@ -2712,58 +3054,73 @@ fieldset[disabled] .button { color: #7a7a7a; pointer-events: none; } + .button.is-rounded { border-radius: 9999px; padding-left: calc(1em + 0.25em); padding-right: calc(1em + 0.25em); } + .buttons { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; } + .buttons .button { margin-bottom: 0.5rem; } + .buttons .button:not(:last-child):not(.is-fullwidth) { margin-right: 0.5rem; } + .buttons:last-child { margin-bottom: -0.5rem; } + .buttons:not(:last-child) { margin-bottom: 1rem; } + .buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large) { font-size: 0.75rem; } + .buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large):not(.is-rounded) { border-radius: 2px; } + .buttons.are-medium .button:not(.is-small):not(.is-normal):not(.is-large) { font-size: 1.25rem; } + .buttons.are-large .button:not(.is-small):not(.is-normal):not(.is-medium) { font-size: 1.5rem; } + .buttons.has-addons .button:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; } + .buttons.has-addons .button:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; margin-right: -1px; } + .buttons.has-addons .button:last-child { margin-right: 0; } + .buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered { z-index: 2; } + .buttons.has-addons .button:focus, .buttons.has-addons .button.is-focused, .buttons.has-addons .button:active, @@ -2771,6 +3128,7 @@ fieldset[disabled] .button { .buttons.has-addons .button.is-selected { z-index: 3; } + .buttons.has-addons .button:focus:hover, .buttons.has-addons .button.is-focused:hover, .buttons.has-addons .button:active:hover, @@ -2778,36 +3136,44 @@ fieldset[disabled] .button { .buttons.has-addons .button.is-selected:hover { z-index: 4; } + .buttons.has-addons .button.is-expanded { flex-grow: 1; flex-shrink: 1; } + .buttons.is-centered { justify-content: center; } + .buttons.is-centered:not(.has-addons) .button:not(.is-fullwidth) { margin-left: 0.25rem; margin-right: 0.25rem; } + .buttons.is-right { justify-content: flex-end; } + .buttons.is-right:not(.has-addons) .button:not(.is-fullwidth) { margin-left: 0.25rem; margin-right: 0.25rem; } + @media screen and (max-width: 416px) { .nav-main p { padding-left: 30vw; } } + @media screen and (max-height: 800px) { #main_title { top: 160px; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .button.is-responsive.is-small { font-size: 0.65625rem; @@ -2826,46 +3192,55 @@ fieldset[disabled] .button { font-size: 1.25rem; } } + .container { flex-grow: 1; margin: 0 auto; position: relative; width: auto; } + .container.is-fluid { max-width: none !important; padding-left: 32px; padding-right: 32px; width: 100%; } + @media screen and (min-width: 1024px) { .container { max-width: 960px; } } + @media screen and (max-width: 1215px) { .container.is-widescreen:not(.is-max-desktop) { max-width: 1152px; } } + @media screen and (max-width: 1407px) { .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) { max-width: 1344px; } } + @media screen and (min-width: 1216px) { .container:not(.is-max-desktop) { max-width: 1152px; } } + @media screen and (min-width: 1408px) { .container:not(.is-max-desktop):not(.is-max-widescreen) { max-width: 1344px; } } + .content li + li { margin-top: 0.25em; } + .content p:not(:last-child), .content dl:not(:last-child), .content ol:not(:last-child), @@ -2875,6 +3250,7 @@ fieldset[disabled] .button { .content table:not(:last-child) { margin-bottom: 1em; } + .content h1, .content h2, .content h3, @@ -2885,96 +3261,122 @@ fieldset[disabled] .button { font-weight: 600; line-height: 1.125; } + .content h1 { font-size: 2em; margin-bottom: 0.5em; } + .content h1:not(:first-child) { margin-top: 1em; } + .content h2 { font-size: 1.75em; margin-bottom: 0.5714em; } + .content h2:not(:first-child) { margin-top: 1.1428em; } + .content h3 { font-size: 1.5em; margin-bottom: 0.6666em; } + .content h3:not(:first-child) { margin-top: 1.3333em; } + .content h4 { font-size: 1.25em; margin-bottom: 0.8em; } + .content h5 { font-size: 1.125em; margin-bottom: 0.8888em; } + .content h6 { font-size: 1em; margin-bottom: 1em; } + .content blockquote { background-color: whitesmoke; border-left: 5px solid #dbdbdb; padding: 1.25em 1.5em; } + .content ol { list-style-position: outside; margin-left: 2em; margin-top: 1em; } + .content ol:not([type]) { list-style-type: decimal; } + .content ol:not([type]).is-lower-alpha { list-style-type: lower-alpha; } + .content ol:not([type]).is-lower-roman { list-style-type: lower-roman; } + .content ol:not([type]).is-upper-alpha { list-style-type: upper-alpha; } + .content ol:not([type]).is-upper-roman { list-style-type: upper-roman; } + .content ul { list-style: disc outside; margin-left: 2em; margin-top: 1em; } + .content ul ul { list-style-type: circle; margin-top: 0.5em; } + .content ul ul ul { list-style-type: square; } + .content dd { margin-left: 2em; } + .content figure { margin-left: 2em; margin-right: 2em; text-align: center; } + .content figure:not(:first-child) { margin-top: 2em; } + .content figure:not(:last-child) { margin-bottom: 2em; } + .content figure img { display: inline-block; } + .content figure figcaption { font-style: italic; } + .content pre { -webkit-overflow-scrolling: touch; overflow-x: auto; @@ -2982,13 +3384,16 @@ fieldset[disabled] .button { white-space: pre; word-wrap: normal; } + .content sup, .content sub { font-size: 75%; } + .content table { width: 100%; } + .content table td, .content table th { border: 1px solid #dbdbdb; @@ -2996,41 +3401,52 @@ fieldset[disabled] .button { padding: 0.5em 0.75em; vertical-align: top; } + .content table th { color: #363636; } + .content table th:not([align]) { text-align: inherit; } + .content table thead td, .content table thead th { border-width: 0 0 2px; color: #363636; } + .content table tfoot td, .content table tfoot th { border-width: 2px 0 0; color: #363636; } + .content table tbody tr:last-child td, .content table tbody tr:last-child th { border-bottom-width: 0; } + .content .tabs li + li { margin-top: 0; } + .content.is-small { font-size: 0.75rem; } + .content.is-normal { font-size: 1rem; } + .content.is-medium { font-size: 1.25rem; } + .content.is-large { font-size: 1.5rem; } + .icon { align-items: center; display: inline-flex; @@ -3038,18 +3454,22 @@ fieldset[disabled] .button { justify-content: center; width: 1.5rem; } + .icon.is-small { height: 1rem; width: 1rem; } + .icon.is-medium { height: 2rem; width: 2rem; } + .icon.is-large { height: 3rem; width: 3rem; } + .icon-text { align-items: flex-start; color: inherit; @@ -3058,34 +3478,43 @@ fieldset[disabled] .button { line-height: 1.5rem; vertical-align: top; } + .icon-text .icon { flex-grow: 0; flex-shrink: 0; } + .icon-text .icon:not(:last-child) { margin-right: 0.25em; } + .icon-text .icon:not(:first-child) { margin-left: 0.25em; } + div.icon-text { display: flex; } + .image { display: block; position: relative; } + .image img { display: block; height: auto; width: 100%; } + .image img.is-rounded { border-radius: 9999px; } + .image.is-fullwidth { width: 100%; } + .image.is-square img, .image.is-square .has-ratio, .image.is-1by1 img, @@ -3121,174 +3550,220 @@ div.icon-text { height: 100%; width: 100%; } + .image.is-square, .image.is-1by1 { padding-top: 100%; } + .image.is-5by4 { padding-top: 80%; } + .image.is-4by3 { padding-top: 75%; } + .image.is-3by2 { padding-top: 66.6666%; } + .image.is-5by3 { padding-top: 60%; } + .image.is-16by9 { padding-top: 56.25%; } + .image.is-2by1 { padding-top: 50%; } + .image.is-3by1 { padding-top: 33.3333%; } + .image.is-4by5 { padding-top: 125%; } + .image.is-3by4 { padding-top: 133.3333%; } + .image.is-2by3 { padding-top: 150%; } + .image.is-3by5 { padding-top: 166.6666%; } + .image.is-9by16 { padding-top: 177.7777%; } + .image.is-1by2 { padding-top: 200%; } + .image.is-1by3 { padding-top: 300%; } + .image.is-16x16 { height: 16px; width: 16px; } + .image.is-24x24 { height: 24px; width: 24px; } + .image.is-32x32 { height: 32px; width: 32px; } + .image.is-48x48 { height: 48px; width: 48px; } + .image.is-64x64 { height: 64px; width: 64px; } + .image.is-96x96 { height: 96px; width: 96px; } + .image.is-128x128 { height: 128px; width: 128px; } + .notification { background-color: whitesmoke; border-radius: 4px; padding: 1.25rem 2.5rem 1.25rem 1.5rem; position: relative; } + .notification a:not(.button):not(.dropdown-item) { color: currentColor; text-decoration: underline; } + .notification strong { color: currentColor; } + .notification code, .notification pre { background: white; } + .notification pre code { background: transparent; } + .notification > .delete { position: absolute; right: 0.5rem; top: 0.5rem; } + .notification .title, .notification .subtitle, .notification .content { color: currentColor; } + .notification.is-white { background-color: white; color: #0a0a0a; } + .notification.is-black { background-color: #0a0a0a; color: white; } + .notification.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } + .notification.is-dark { background-color: #363636; color: #fff; } + .notification.is-primary { background-color: #00d1b2; color: #fff; } + .notification.is-primary.is-light { background-color: #ebfffc; color: #00947e; } + .notification.is-link { background-color: #485fc7; color: #fff; } + .notification.is-link.is-light { background-color: #eff1fa; color: #3850b7; } + .notification.is-info { background-color: #3e8ed0; color: #fff; } + .notification.is-info.is-light { background-color: #eff5fb; color: #296fa8; } + .notification.is-success { background-color: #48c78e; color: #fff; } + .notification.is-success.is-light { background-color: #effaf5; color: #257953; } + .notification.is-warning { background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } + .notification.is-warning.is-light { background-color: #fffaeb; color: #946c00; } + .notification.is-danger { background-color: #f14668; color: #fff; } + .notification.is-danger.is-light { background-color: #feecf0; color: #cc0f35; } + .progress { -moz-appearance: none; -webkit-appearance: none; @@ -3300,139 +3775,184 @@ div.icon-text { padding: 0; width: 100%; } + .progress::-webkit-progress-bar { background-color: #ededed; } + .progress::-webkit-progress-value { background-color: #4a4a4a; } + .progress::-moz-progress-bar { background-color: #4a4a4a; } + .progress::-ms-fill { background-color: #4a4a4a; border: none; } + .progress.is-white::-webkit-progress-value { background-color: white; } + .progress.is-white::-moz-progress-bar { background-color: white; } + .progress.is-white::-ms-fill { background-color: white; } + .progress.is-white:indeterminate { background-image: linear-gradient(to right, white 30%, #ededed 30%); } + .progress.is-black::-webkit-progress-value { background-color: #0a0a0a; } + .progress.is-black::-moz-progress-bar { background-color: #0a0a0a; } + .progress.is-black::-ms-fill { background-color: #0a0a0a; } + .progress.is-black:indeterminate { background-image: linear-gradient(to right, #0a0a0a 30%, #ededed 30%); } + .progress.is-light::-webkit-progress-value { background-color: whitesmoke; } + .progress.is-light::-moz-progress-bar { background-color: whitesmoke; } + .progress.is-light::-ms-fill { background-color: whitesmoke; } + .progress.is-light:indeterminate { background-image: linear-gradient(to right, whitesmoke 30%, #ededed 30%); } + .progress.is-dark::-webkit-progress-value { background-color: #363636; } + .progress.is-dark::-moz-progress-bar { background-color: #363636; } + .progress.is-dark::-ms-fill { background-color: #363636; } + .progress.is-dark:indeterminate { background-image: linear-gradient(to right, #363636 30%, #ededed 30%); } + .progress.is-primary::-webkit-progress-value { background-color: #00d1b2; } + .progress.is-primary::-moz-progress-bar { background-color: #00d1b2; } + .progress.is-primary::-ms-fill { background-color: #00d1b2; } + .progress.is-primary:indeterminate { background-image: linear-gradient(to right, #00d1b2 30%, #ededed 30%); } + .progress.is-link::-webkit-progress-value { background-color: #485fc7; } + .progress.is-link::-moz-progress-bar { background-color: #485fc7; } + .progress.is-link::-ms-fill { background-color: #485fc7; } + .progress.is-link:indeterminate { background-image: linear-gradient(to right, #485fc7 30%, #ededed 30%); } + .progress.is-info::-webkit-progress-value { background-color: #3e8ed0; } + .progress.is-info::-moz-progress-bar { background-color: #3e8ed0; } + .progress.is-info::-ms-fill { background-color: #3e8ed0; } + .progress.is-info:indeterminate { background-image: linear-gradient(to right, #3e8ed0 30%, #ededed 30%); } + .progress.is-success::-webkit-progress-value { background-color: #48c78e; } + .progress.is-success::-moz-progress-bar { background-color: #48c78e; } + .progress.is-success::-ms-fill { background-color: #48c78e; } + .progress.is-success:indeterminate { background-image: linear-gradient(to right, #48c78e 30%, #ededed 30%); } + .progress.is-warning::-webkit-progress-value { background-color: #ffe08a; } + .progress.is-warning::-moz-progress-bar { background-color: #ffe08a; } + .progress.is-warning::-ms-fill { background-color: #ffe08a; } + .progress.is-warning:indeterminate { background-image: linear-gradient(to right, #ffe08a 30%, #ededed 30%); } + .progress.is-danger::-webkit-progress-value { background-color: #f14668; } + .progress.is-danger::-moz-progress-bar { background-color: #f14668; } + .progress.is-danger::-ms-fill { background-color: #f14668; } + .progress.is-danger:indeterminate { background-image: linear-gradient(to right, #f14668 30%, #ededed 30%); } + .progress:indeterminate { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; @@ -3448,24 +3968,31 @@ div.icon-text { background-repeat: no-repeat; background-size: 150% 150%; } + .progress:indeterminate::-webkit-progress-bar { background-color: transparent; } + .progress:indeterminate::-moz-progress-bar { background-color: transparent; } + .progress:indeterminate::-ms-fill { animation-name: none; } + .progress.is-small { height: 0.75rem; } + .progress.is-medium { height: 1.25rem; } + .progress.is-large { height: 1.5rem; } + @-webkit-keyframes moveIndeterminate { from { background-position: 200% 0; @@ -3474,6 +4001,7 @@ div.icon-text { background-position: -200% 0; } } + @keyframes moveIndeterminate { from { background-position: 200% 0; @@ -3482,10 +4010,12 @@ div.icon-text { background-position: -200% 0; } } + .table { background-color: white; color: #363636; } + .table td, .table th { border: 1px solid #dbdbdb; @@ -3493,215 +4023,265 @@ div.icon-text { padding: 0.5em 0.75em; vertical-align: top; } + .table td.is-white, .table th.is-white { background-color: white; border-color: white; color: #0a0a0a; } + .table td.is-black, .table th.is-black { background-color: #0a0a0a; border-color: #0a0a0a; color: white; } + .table td.is-light, .table th.is-light { background-color: whitesmoke; border-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } + .table td.is-dark, .table th.is-dark { background-color: #363636; border-color: #363636; color: #fff; } + .table td.is-primary, .table th.is-primary { background-color: #00d1b2; border-color: #00d1b2; color: #fff; } + .table td.is-link, .table th.is-link { background-color: #485fc7; border-color: #485fc7; color: #fff; } + .table td.is-info, .table th.is-info { background-color: #3e8ed0; border-color: #3e8ed0; color: #fff; } + .table td.is-success, .table th.is-success { background-color: #48c78e; border-color: #48c78e; color: #fff; } + .table td.is-warning, .table th.is-warning { background-color: #ffe08a; border-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } + .table td.is-danger, .table th.is-danger { background-color: #f14668; border-color: #f14668; color: #fff; } + .table td.is-narrow, .table th.is-narrow { white-space: nowrap; width: 1%; } + .table td.is-selected, .table th.is-selected { background-color: #00d1b2; color: #fff; } + .table td.is-selected a, .table td.is-selected strong, .table th.is-selected a, .table th.is-selected strong { color: currentColor; } + .table td.is-vcentered, .table th.is-vcentered { vertical-align: middle; } + .table th { color: #363636; } + .table th:not([align]) { text-align: left; } + .table tr.is-selected { background-color: #00d1b2; color: #fff; } + .table tr.is-selected a, .table tr.is-selected strong { color: currentColor; } + .table tr.is-selected td, .table tr.is-selected th { border-color: #fff; color: currentColor; } + .table thead { background-color: transparent; } + .table thead td, .table thead th { border-width: 0 0 2px; color: #363636; } + .table tfoot { background-color: transparent; } + .table tfoot td, .table tfoot th { border-width: 2px 0 0; color: #363636; } + .table tbody { background-color: transparent; } + .table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom-width: 0; } + .table.is-bordered td, .table.is-bordered th { border-width: 1px; } + .table.is-bordered tr:last-child td, .table.is-bordered tr:last-child th { border-bottom-width: 1px; } + .table.is-fullwidth { width: 100%; } + .table.is-hoverable tbody tr:not(.is-selected):hover { background-color: #fafafa; } + .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover { background-color: #fafafa; } + .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) { background-color: whitesmoke; } + .table.is-narrow td, .table.is-narrow th { padding: 0.25em 0.5em; } + .table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: #fafafa; } + .table-container { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overflow-y: hidden; } + .tags { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; } + .tags .tag { margin-bottom: 0.5rem; } + .tags .tag:not(:last-child) { margin-right: 0.5rem; } + .tags:last-child { margin-bottom: -0.5rem; } + .tags:not(:last-child) { margin-bottom: 1rem; } + .tags.are-medium .tag:not(.is-normal):not(.is-large) { font-size: 1rem; } + .tags.are-large .tag:not(.is-normal):not(.is-medium) { font-size: 1.25rem; } + .tags.is-centered { justify-content: center; } + .tags.is-centered .tag { margin-left: 0.25rem; margin-right: 0.25rem; } + .tags.is-right { justify-content: flex-end; } + .tags.is-right .tag:not(:first-child) { margin-left: 0.5rem; } + .tags.is-right .tag:not(:last-child) { margin-right: 0; } + .tags.has-addons .tag { margin-right: 0; } + .tags.has-addons .tag:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: 0; } + .tags.has-addons .tag:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } + .tag:not(body) { align-items: center; background-color: whitesmoke; @@ -3716,101 +4296,126 @@ tr:not(.is-selected):hover:nth-child(even) { padding-right: 0.75em; white-space: nowrap; } + .tag:not(body) .delete { margin-left: 0.25rem; margin-right: -0.375rem; } + .tag:not(body).is-white { background-color: white; color: #0a0a0a; } + .tag:not(body).is-black { background-color: #0a0a0a; color: white; } + .tag:not(body).is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } + .tag:not(body).is-dark { background-color: #363636; color: #fff; } + .tag:not(body).is-primary { background-color: #00d1b2; color: #fff; } + .tag:not(body).is-primary.is-light { background-color: #ebfffc; color: #00947e; } + .tag:not(body).is-link { background-color: #485fc7; color: #fff; } + .tag:not(body).is-link.is-light { background-color: #eff1fa; color: #3850b7; } + .tag:not(body).is-info { background-color: #3e8ed0; color: #fff; } + .tag:not(body).is-info.is-light { background-color: #eff5fb; color: #296fa8; } + .tag:not(body).is-success { background-color: #48c78e; color: #fff; } + .tag:not(body).is-success.is-light { background-color: #effaf5; color: #257953; } + .tag:not(body).is-warning { background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } + .tag:not(body).is-warning.is-light { background-color: #fffaeb; color: #946c00; } + .tag:not(body).is-danger { background-color: #f14668; color: #fff; } + .tag:not(body).is-danger.is-light { background-color: #feecf0; color: #cc0f35; } + .tag:not(body).is-normal { font-size: 0.75rem; } + .tag:not(body).is-medium { font-size: 1rem; } + .tag:not(body).is-large { font-size: 1.25rem; } + .tag:not(body) .icon:first-child:not(:last-child) { margin-left: -0.375em; margin-right: 0.1875em; } + .tag:not(body) .icon:last-child:not(:first-child) { margin-left: 0.1875em; margin-right: -0.375em; } + .tag:not(body) .icon:first-child:last-child { margin-left: -0.375em; margin-right: -0.375em; } + .tag:not(body).is-delete { margin-left: 1px; padding: 0; position: relative; width: 2em; } + .tag:not(body).is-delete::before, .tag:not(body).is-delete::after { background-color: currentColor; @@ -3822,117 +4427,149 @@ tr:not(.is-selected):hover:nth-child(even) { transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center; } + .tag:not(body).is-delete::before { height: 1px; width: 50%; } + .tag:not(body).is-delete::after { height: 50%; width: 1px; } + .tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus { background-color: #e8e8e8; } + .tag:not(body).is-delete:active { background-color: #dbdbdb; } + .tag:not(body).is-rounded { border-radius: 9999px; } + a.tag:hover { text-decoration: underline; } + .title, .subtitle { word-break: break-word; } + .title em, .title span, .subtitle em, .subtitle span { font-weight: inherit; } + .title sub, .subtitle sub { font-size: 0.75em; } + .title sup, .subtitle sup { font-size: 0.75em; } + .title .tag, .subtitle .tag { vertical-align: middle; } + .title { color: #363636; font-size: 2rem; font-weight: 600; line-height: 1.125; } + .title strong { color: inherit; font-weight: inherit; } + .title:not(.is-spaced) + .subtitle { margin-top: -1.25rem; } + .title.is-1 { font-size: 3rem; } + .title.is-2 { font-size: 2.5rem; } + .title.is-3 { font-size: 2rem; } + .title.is-4 { font-size: 1.5rem; } + .title.is-5 { font-size: 1.25rem; } + .title.is-6 { font-size: 1rem; } + .title.is-7 { font-size: 0.75rem; } + .subtitle { color: #4a4a4a; font-size: 1.25rem; font-weight: 400; line-height: 1.25; } + .subtitle strong { color: #363636; font-weight: 600; } + .subtitle:not(.is-spaced) + .title { margin-top: -1.25rem; } + .subtitle.is-1 { font-size: 3rem; } + .subtitle.is-2 { font-size: 2.5rem; } + .subtitle.is-3 { font-size: 2rem; } + .subtitle.is-4 { font-size: 1.5rem; } + .subtitle.is-5 { font-size: 1.25rem; } + .subtitle.is-6 { font-size: 1rem; } + .subtitle.is-7 { font-size: 0.75rem; } + .heading { display: block; font-size: 11px; @@ -3940,6 +4577,7 @@ a.tag:hover { margin-bottom: 5px; text-transform: uppercase; } + .number { align-items: center; background-color: whitesmoke; @@ -3954,6 +4592,7 @@ a.tag:hover { text-align: center; vertical-align: top; } + /* Bulma Form */ .input, .textarea, @@ -3963,26 +4602,31 @@ a.tag:hover { border-radius: 4px; color: #363636; } + .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { color: rgba(54, 54, 54, 0.3); } + .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder { color: rgba(54, 54, 54, 0.3); } + .input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder { color: rgba(54, 54, 54, 0.3); } + .input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { color: rgba(54, 54, 54, 0.3); } + .input:hover, .textarea:hover, .select select:hover, @@ -3991,6 +4635,7 @@ a.tag:hover { .select select.is-hovered { border-color: #b5b5b5; } + .input:focus, .textarea:focus, .select select:focus, @@ -4006,6 +4651,7 @@ a.tag:hover { border-color: #485fc7; box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } + .input[disabled], .textarea[disabled], .select select[disabled], @@ -4018,6 +4664,7 @@ fieldset[disabled] .select select, box-shadow: none; color: #7a7a7a; } + .input[disabled]::-moz-placeholder, .textarea[disabled]::-moz-placeholder, .select select[disabled]::-moz-placeholder, @@ -4027,6 +4674,7 @@ fieldset[disabled] .select select::-moz-placeholder, .select fieldset[disabled] select::-moz-placeholder { color: rgba(122, 122, 122, 0.3); } + .input[disabled]::-webkit-input-placeholder, .textarea[disabled]::-webkit-input-placeholder, .select select[disabled]::-webkit-input-placeholder, @@ -4036,6 +4684,7 @@ fieldset[disabled] .select select::-webkit-input-placeholder, .select fieldset[disabled] select::-webkit-input-placeholder { color: rgba(122, 122, 122, 0.3); } + .input[disabled]:-moz-placeholder, .textarea[disabled]:-moz-placeholder, .select select[disabled]:-moz-placeholder, @@ -4045,6 +4694,7 @@ fieldset[disabled] .select select:-moz-placeholder, .select fieldset[disabled] select:-moz-placeholder { color: rgba(122, 122, 122, 0.3); } + .input[disabled]:-ms-input-placeholder, .textarea[disabled]:-ms-input-placeholder, .select select[disabled]:-ms-input-placeholder, @@ -4054,20 +4704,24 @@ fieldset[disabled] .select select:-ms-input-placeholder, .select fieldset[disabled] select:-ms-input-placeholder { color: rgba(122, 122, 122, 0.3); } + .input, .textarea { box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05); max-width: 100%; width: 100%; } + .input[readonly], .textarea[readonly] { box-shadow: none; } + .is-white.input, .is-white.textarea { border-color: white; } + .is-white.input:focus, .is-white.textarea:focus, .is-white.is-focused.input, @@ -4078,10 +4732,12 @@ fieldset[disabled] .select select:-ms-input-placeholder, .is-white.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); } + .is-black.input, .is-black.textarea { border-color: #0a0a0a; } + .is-black.input:focus, .is-black.textarea:focus, .is-black.is-focused.input, @@ -4092,10 +4748,12 @@ fieldset[disabled] .select select:-ms-input-placeholder, .is-black.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } + .is-light.input, .is-light.textarea { border-color: whitesmoke; } + .is-light.input:focus, .is-light.textarea:focus, .is-light.is-focused.input, @@ -4106,10 +4764,12 @@ fieldset[disabled] .select select:-ms-input-placeholder, .is-light.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } + .is-dark.input, .is-dark.textarea { border-color: #363636; } + .is-dark.input:focus, .is-dark.textarea:focus, .is-dark.is-focused.input, @@ -4120,10 +4780,12 @@ fieldset[disabled] .select select:-ms-input-placeholder, .is-dark.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } + .is-primary.input, .is-primary.textarea { border-color: #00d1b2; } + .is-primary.input:focus, .is-primary.textarea:focus, .is-primary.is-focused.input, @@ -4134,10 +4796,12 @@ fieldset[disabled] .select select:-ms-input-placeholder, .is-primary.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); } + .is-link.input, .is-link.textarea { border-color: #485fc7; } + .is-link.input:focus, .is-link.textarea:focus, .is-link.is-focused.input, @@ -4148,10 +4812,12 @@ fieldset[disabled] .select select:-ms-input-placeholder, .is-link.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } + .is-info.input, .is-info.textarea { border-color: #3e8ed0; } + .is-info.input:focus, .is-info.textarea:focus, .is-info.is-focused.input, @@ -4162,10 +4828,12 @@ fieldset[disabled] .select select:-ms-input-placeholder, .is-info.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25); } + .is-success.input, .is-success.textarea { border-color: #48c78e; } + .is-success.input:focus, .is-success.textarea:focus, .is-success.is-focused.input, @@ -4176,10 +4844,12 @@ fieldset[disabled] .select select:-ms-input-placeholder, .is-success.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25); } + .is-warning.input, .is-warning.textarea { border-color: #ffe08a; } + .is-warning.input:focus, .is-warning.textarea:focus, .is-warning.is-focused.input, @@ -4190,10 +4860,12 @@ fieldset[disabled] .select select:-ms-input-placeholder, .is-warning.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(255, 224, 138, 0.25); } + .is-danger.input, .is-danger.textarea { border-color: #f14668; } + .is-danger.input:focus, .is-danger.textarea:focus, .is-danger.is-focused.input, @@ -4204,34 +4876,41 @@ fieldset[disabled] .select select:-ms-input-placeholder, .is-danger.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25); } + .is-small.input, .is-small.textarea { border-radius: 2px; font-size: 0.75rem; } + .is-medium.input, .is-medium.textarea { font-size: 1.25rem; } + .is-large.input, .is-large.textarea { font-size: 1.5rem; } + .is-fullwidth.input, .is-fullwidth.textarea { display: block; width: 100%; } + .is-inline.input, .is-inline.textarea { display: inline; width: auto; } + .input.is-rounded { border-radius: 9999px; padding-left: calc(calc(0.75em - 1px) + 0.375em); padding-right: calc(calc(0.75em - 1px) + 0.375em); } + .input.is-static { background-color: transparent; border-color: transparent; @@ -4239,6 +4918,7 @@ fieldset[disabled] .select select:-ms-input-placeholder, padding-left: 0; padding-right: 0; } + .textarea { display: block; max-width: 100%; @@ -4246,16 +4926,20 @@ fieldset[disabled] .select select:-ms-input-placeholder, padding: calc(0.75em - 1px); resize: vertical; } + .textarea:not([rows]) { max-height: 40em; min-height: 8em; } + .textarea[rows] { height: initial; } + .textarea.has-fixed-size { resize: none; } + .checkbox, .radio { cursor: pointer; @@ -4263,14 +4947,17 @@ fieldset[disabled] .select select:-ms-input-placeholder, line-height: 1.25; position: relative; } + .checkbox input, .radio input { cursor: pointer; } + .checkbox:hover, .radio:hover { color: #363636; } + .checkbox[disabled], .radio[disabled], fieldset[disabled] .checkbox, @@ -4280,27 +4967,33 @@ fieldset[disabled] .radio, color: #7a7a7a; cursor: not-allowed; } + .radio + .radio { margin-left: 0.5em; } + .select { display: inline-block; max-width: 100%; position: relative; vertical-align: top; } + .select:not(.is-multiple) { height: 2.5em; } + .select:not(.is-multiple):not(.is-loading)::after { border-color: #485fc7; right: 1.125em; z-index: 4; } + .select.is-rounded select { border-radius: 9999px; padding-left: 1em; } + .select select { cursor: pointer; display: block; @@ -4308,206 +5001,259 @@ fieldset[disabled] .radio, max-width: 100%; outline: none; } + .select select::-ms-expand { display: none; } + .select select[disabled]:hover, fieldset[disabled] .select select:hover { border-color: whitesmoke; } + .select select:not([multiple]) { padding-right: 2.5em; } + .select select[multiple] { height: auto; padding: 0; } + .select select[multiple] option { padding: 0.5em 1em; } + .select:not(.is-multiple):not(.is-loading):hover::after { border-color: #363636; } + .select.is-white:not(:hover)::after { border-color: white; } + .select.is-white select { border-color: white; } + .select.is-white select:hover, .select.is-white select.is-hovered { border-color: #f2f2f2; } + .select.is-white select:focus, .select.is-white select.is-focused, .select.is-white select:active, .select.is-white select.is-active { box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); } + .select.is-black:not(:hover)::after { border-color: #0a0a0a; } + .select.is-black select { border-color: #0a0a0a; } + .select.is-black select:hover, .select.is-black select.is-hovered { border-color: black; } + .select.is-black select:focus, .select.is-black select.is-focused, .select.is-black select:active, .select.is-black select.is-active { box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } + .select.is-light:not(:hover)::after { border-color: whitesmoke; } + .select.is-light select { border-color: whitesmoke; } + .select.is-light select:hover, .select.is-light select.is-hovered { border-color: #e8e8e8; } + .select.is-light select:focus, .select.is-light select.is-focused, .select.is-light select:active, .select.is-light select.is-active { box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } + .select.is-dark:not(:hover)::after { border-color: #363636; } + .select.is-dark select { border-color: #363636; } + .select.is-dark select:hover, .select.is-dark select.is-hovered { border-color: #292929; } + .select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active { box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } + .select.is-primary:not(:hover)::after { border-color: #00d1b2; } + .select.is-primary select { border-color: #00d1b2; } + .select.is-primary select:hover, .select.is-primary select.is-hovered { border-color: #00b89c; } + .select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active { box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); } + .select.is-link:not(:hover)::after { border-color: #485fc7; } + .select.is-link select { border-color: #485fc7; } + .select.is-link select:hover, .select.is-link select.is-hovered { border-color: #3a51bb; } + .select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active { box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } + .select.is-info:not(:hover)::after { border-color: #3e8ed0; } + .select.is-info select { border-color: #3e8ed0; } + .select.is-info select:hover, .select.is-info select.is-hovered { border-color: #3082c5; } + .select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active { box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25); } + .select.is-success:not(:hover)::after { border-color: #48c78e; } + .select.is-success select { border-color: #48c78e; } + .select.is-success select:hover, .select.is-success select.is-hovered { border-color: #3abb81; } + .select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active { box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25); } + .select.is-warning:not(:hover)::after { border-color: #ffe08a; } + .select.is-warning select { border-color: #ffe08a; } + .select.is-warning select:hover, .select.is-warning select.is-hovered { border-color: #ffd970; } + .select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active { box-shadow: 0 0 0 0.125em rgba(255, 224, 138, 0.25); } + .select.is-danger:not(:hover)::after { border-color: #f14668; } + .select.is-danger select { border-color: #f14668; } + .select.is-danger select:hover, .select.is-danger select.is-hovered { border-color: #ef2e55; } + .select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active { box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25); } + .select.is-small { border-radius: 2px; font-size: 0.75rem; } + .select.is-medium { font-size: 1.25rem; } + .select.is-large { font-size: 1.5rem; } + .select.is-disabled::after { border-color: #7a7a7a !important; opacity: 0.5; } + .select.is-fullwidth { width: 100%; } + .select.is-fullwidth select { width: 100%; } + .select.is-loading::after { margin-top: 0; position: absolute; @@ -4515,338 +5261,409 @@ fieldset[disabled] .select select:hover { top: 0.625em; transform: none; } + .select.is-loading.is-small:after { font-size: 0.75rem; } + .select.is-loading.is-medium:after { font-size: 1.25rem; } + .select.is-loading.is-large:after { font-size: 1.5rem; } + .file { align-items: stretch; display: flex; justify-content: flex-start; position: relative; } + .file.is-white .file-cta { background-color: white; border-color: transparent; color: #0a0a0a; } + .file.is-white:hover .file-cta, .file.is-white.is-hovered .file-cta { background-color: #f9f9f9; border-color: transparent; color: #0a0a0a; } + .file.is-white:focus .file-cta, .file.is-white.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25); color: #0a0a0a; } + .file.is-white:active .file-cta, .file.is-white.is-active .file-cta { background-color: #f2f2f2; border-color: transparent; color: #0a0a0a; } + .file.is-black .file-cta { background-color: #0a0a0a; border-color: transparent; color: white; } + .file.is-black:hover .file-cta, .file.is-black.is-hovered .file-cta { background-color: #040404; border-color: transparent; color: white; } + .file.is-black:focus .file-cta, .file.is-black.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25); color: white; } + .file.is-black:active .file-cta, .file.is-black.is-active .file-cta { background-color: black; border-color: transparent; color: white; } + .file.is-light .file-cta { background-color: whitesmoke; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .file.is-light:hover .file-cta, .file.is-light.is-hovered .file-cta { background-color: #eee; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .file.is-light:focus .file-cta, .file.is-light.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25); color: rgba(0, 0, 0, 0.7); } + .file.is-light:active .file-cta, .file.is-light.is-active .file-cta { background-color: #e8e8e8; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .file.is-dark .file-cta { background-color: #363636; border-color: transparent; color: #fff; } + .file.is-dark:hover .file-cta, .file.is-dark.is-hovered .file-cta { background-color: #2f2f2f; border-color: transparent; color: #fff; } + .file.is-dark:focus .file-cta, .file.is-dark.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25); color: #fff; } + .file.is-dark:active .file-cta, .file.is-dark.is-active .file-cta { background-color: #292929; border-color: transparent; color: #fff; } + .file.is-primary .file-cta { background-color: #00d1b2; border-color: transparent; color: #fff; } + .file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta { background-color: #00c4a7; border-color: transparent; color: #fff; } + .file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25); color: #fff; } + .file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta { background-color: #00b89c; border-color: transparent; color: #fff; } + .file.is-link .file-cta { background-color: #485fc7; border-color: transparent; color: #fff; } + .file.is-link:hover .file-cta, .file.is-link.is-hovered .file-cta { background-color: #3e56c4; border-color: transparent; color: #fff; } + .file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(72, 95, 199, 0.25); color: #fff; } + .file.is-link:active .file-cta, .file.is-link.is-active .file-cta { background-color: #3a51bb; border-color: transparent; color: #fff; } + .file.is-info .file-cta { background-color: #3e8ed0; border-color: transparent; color: #fff; } + .file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta { background-color: #3488ce; border-color: transparent; color: #fff; } + .file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25); color: #fff; } + .file.is-info:active .file-cta, .file.is-info.is-active .file-cta { background-color: #3082c5; border-color: transparent; color: #fff; } + .file.is-success .file-cta { background-color: #48c78e; border-color: transparent; color: #fff; } + .file.is-success:hover .file-cta, .file.is-success.is-hovered .file-cta { background-color: #3ec487; border-color: transparent; color: #fff; } + .file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25); color: #fff; } + .file.is-success:active .file-cta, .file.is-success.is-active .file-cta { background-color: #3abb81; border-color: transparent; color: #fff; } + .file.is-warning .file-cta { background-color: #ffe08a; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .file.is-warning:hover .file-cta, .file.is-warning.is-hovered .file-cta { background-color: #ffdc7d; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(255, 224, 138, 0.25); color: rgba(0, 0, 0, 0.7); } + .file.is-warning:active .file-cta, .file.is-warning.is-active .file-cta { background-color: #ffd970; border-color: transparent; color: rgba(0, 0, 0, 0.7); } + .file.is-danger .file-cta { background-color: #f14668; border-color: transparent; color: #fff; } + .file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta { background-color: #f03a5f; border-color: transparent; color: #fff; } + .file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta { border-color: transparent; box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.25); color: #fff; } + .file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta { background-color: #ef2e55; border-color: transparent; color: #fff; } + .file.is-small { font-size: 0.75rem; } + .file.is-normal { font-size: 1rem; } + .file.is-medium { font-size: 1.25rem; } + .file.is-medium .file-icon .fa { font-size: 21px; } + .file.is-large { font-size: 1.5rem; } + .file.is-large .file-icon .fa { font-size: 28px; } + .file.has-name .file-cta { border-bottom-right-radius: 0; border-top-right-radius: 0; } + .file.has-name .file-name { border-bottom-left-radius: 0; border-top-left-radius: 0; } + .file.has-name.is-empty .file-cta { border-radius: 4px; } + .file.has-name.is-empty .file-name { display: none; } + .file.is-boxed .file-label { flex-direction: column; } + .file.is-boxed .file-cta { flex-direction: column; height: auto; padding: 1em 3em; } + .file.is-boxed .file-name { border-width: 0 1px 1px; } + .file.is-boxed .file-icon { height: 1.5em; width: 1.5em; } + .file.is-boxed .file-icon .fa { font-size: 21px; } + .file.is-boxed.is-small .file-icon .fa { font-size: 14px; } + .file.is-boxed.is-medium .file-icon .fa { font-size: 28px; } + .file.is-boxed.is-large .file-icon .fa { font-size: 35px; } + .file.is-boxed.has-name .file-cta { border-radius: 4px 4px 0 0; } + .file.is-boxed.has-name .file-name { border-radius: 0 0 4px 4px; border-width: 0 1px 1px; } + .file.is-centered { justify-content: center; } + .file.is-fullwidth .file-label { width: 100%; } + .file.is-fullwidth .file-name { flex-grow: 1; max-width: none; } + .file.is-right { justify-content: flex-end; } + .file.is-right .file-cta { border-radius: 0 4px 4px 0; } + .file.is-right .file-name { border-radius: 4px 0 0 4px; border-width: 1px 0 1px 1px; order: -1; } + .file-label { align-items: stretch; cursor: pointer; @@ -4855,20 +5672,25 @@ fieldset[disabled] .select select:hover { overflow: hidden; position: relative; } + .file-label:hover .file-cta { background-color: #eee; color: #363636; } + .file-label:hover .file-name { border-color: #d5d5d5; } + .file-label:active .file-cta { background-color: #e8e8e8; color: #363636; } + .file-label:active .file-name { border-color: #cfcfcf; } + .file-input { height: 100%; left: 0; @@ -4878,6 +5700,7 @@ fieldset[disabled] .select select:hover { top: 0; width: 100%; } + .file-cta, .file-name { border-color: #dbdbdb; @@ -4887,10 +5710,12 @@ fieldset[disabled] .select select:hover { padding-right: 1em; white-space: nowrap; } + .file-cta { background-color: whitesmoke; color: #4a4a4a; } + .file-name { border-color: #dbdbdb; border-style: solid; @@ -4901,6 +5726,7 @@ fieldset[disabled] .select select:hover { text-align: inherit; text-overflow: ellipsis; } + .file-icon { align-items: center; display: flex; @@ -4909,89 +5735,113 @@ fieldset[disabled] .select select:hover { margin-right: 0.5em; width: 1em; } + .file-icon .fa { font-size: 14px; } + .label { color: #363636; display: block; font-size: 1rem; font-weight: 700; } + .label:not(:last-child) { margin-bottom: 0.5em; } + .label.is-small { font-size: 0.75rem; } + .label.is-medium { font-size: 1.25rem; } + .label.is-large { font-size: 1.5rem; } + .help { display: block; font-size: 0.75rem; margin-top: 0.25rem; } + .help.is-white { color: white; } + .help.is-black { color: #0a0a0a; } + .help.is-light { color: whitesmoke; } + .help.is-dark { color: #363636; } + .help.is-primary { color: #00d1b2; } + .help.is-link { color: #485fc7; } + .help.is-info { color: #3e8ed0; } + .help.is-success { color: #48c78e; } + .help.is-warning { color: #ffe08a; } + .help.is-danger { color: #f14668; } + .field:not(:last-child) { margin-bottom: 0.75rem; } + .field.has-addons { display: flex; justify-content: flex-start; } + .field.has-addons .control:not(:last-child) { margin-right: -1px; } + .field.has-addons .control:not(:first-child):not(:last-child) .button, .field.has-addons .control:not(:first-child):not(:last-child) .input, .field.has-addons .control:not(:first-child):not(:last-child) .select select { border-radius: 0; } + .field.has-addons .control:first-child:not(:only-child) .button, .field.has-addons .control:first-child:not(:only-child) .input, .field.has-addons .control:first-child:not(:only-child) .select select { border-bottom-right-radius: 0; border-top-right-radius: 0; } + .field.has-addons .control:last-child:not(:only-child) .button, .field.has-addons .control:last-child:not(:only-child) .input, .field.has-addons .control:last-child:not(:only-child) .select select { border-bottom-left-radius: 0; border-top-left-radius: 0; } + .field.has-addons .control .button:not([disabled]):hover, .field.has-addons .control .button:not([disabled]).is-hovered, .field.has-addons .control .input:not([disabled]):hover, @@ -5000,6 +5850,7 @@ fieldset[disabled] .select select:hover { .field.has-addons .control .select select:not([disabled]).is-hovered { z-index: 2; } + .field.has-addons .control .button:not([disabled]):focus, .field.has-addons .control .button:not([disabled]).is-focused, .field.has-addons .control .button:not([disabled]):active, @@ -5014,6 +5865,7 @@ fieldset[disabled] .select select:hover { .field.has-addons .control .select select:not([disabled]).is-active { z-index: 3; } + .field.has-addons .control .button:not([disabled]):focus:hover, .field.has-addons .control .button:not([disabled]).is-focused:hover, .field.has-addons .control .button:not([disabled]):active:hover, @@ -5028,67 +5880,85 @@ fieldset[disabled] .select select:hover { .field.has-addons .control .select select:not([disabled]).is-active:hover { z-index: 4; } + .field.has-addons .control.is-expanded { flex-grow: 1; flex-shrink: 1; } + .field.has-addons.has-addons-centered { justify-content: center; } + .field.has-addons.has-addons-right { justify-content: flex-end; } + .field.has-addons.has-addons-fullwidth .control { flex-grow: 1; flex-shrink: 0; } + .field.is-grouped { display: flex; justify-content: flex-start; } + .field.is-grouped > .control { flex-shrink: 0; } + .field.is-grouped > .control:not(:last-child) { margin-bottom: 0; margin-right: 0.75rem; } + .field.is-grouped > .control.is-expanded { flex-grow: 1; flex-shrink: 1; } + .field.is-grouped.is-grouped-centered { justify-content: center; } + .field.is-grouped.is-grouped-right { justify-content: flex-end; } + .field.is-grouped.is-grouped-multiline { flex-wrap: wrap; } + .field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) { margin-bottom: 0.75rem; } + .field.is-grouped.is-grouped-multiline:last-child { margin-bottom: -0.75rem; } + .field.is-grouped.is-grouped-multiline:not(:last-child) { margin-bottom: 0; } + @media screen and (min-width: 769px), print { .field.is-horizontal { display: flex; } } + .field-label .label { font-size: inherit; } + @media screen and (max-width: 768px) { .field-label { margin-bottom: 0.5rem; } } + @media screen and (min-width: 769px), print { .field-label { flex-basis: 0; @@ -5117,9 +5987,11 @@ fieldset[disabled] .select select:hover { padding-top: 0.375em; } } + .field-body .field .field { margin-bottom: 0; } + @media screen and (min-width: 769px), print { .field-body { display: flex; @@ -5144,6 +6016,7 @@ fieldset[disabled] .select select:hover { margin-right: 0.75rem; } } + .control { box-sizing: border-box; clear: both; @@ -5151,30 +6024,35 @@ fieldset[disabled] .select select:hover { position: relative; text-align: inherit; } + .control.has-icons-left .input:focus ~ .icon, .control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon, .control.has-icons-right .select:focus ~ .icon { color: #4a4a4a; } + .control.has-icons-left .input.is-small ~ .icon, .control.has-icons-left .select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon, .control.has-icons-right .select.is-small ~ .icon { font-size: 0.75rem; } + .control.has-icons-left .input.is-medium ~ .icon, .control.has-icons-left .select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon, .control.has-icons-right .select.is-medium ~ .icon { font-size: 1.25rem; } + .control.has-icons-left .input.is-large ~ .icon, .control.has-icons-left .select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon, .control.has-icons-right .select.is-large ~ .icon { font-size: 1.5rem; } + .control.has-icons-left .icon, .control.has-icons-right .icon { color: #dbdbdb; @@ -5185,40 +6063,50 @@ fieldset[disabled] .select select:hover { width: 2.5em; z-index: 4; } + .control.has-icons-left .input, .control.has-icons-left .select select { padding-left: 2.5em; } + .control.has-icons-left .icon.is-left { left: 0; } + .control.has-icons-right .input, .control.has-icons-right .select select { padding-right: 2.5em; } + .control.has-icons-right .icon.is-right { right: 0; } + .control.is-loading::after { position: absolute !important; right: 0.625em; top: 0.625em; z-index: 4; } + .control.is-loading.is-small:after { font-size: 0.75rem; } + .control.is-loading.is-medium:after { font-size: 1.25rem; } + .control.is-loading.is-large:after { font-size: 1.5rem; } + /* Bulma Components */ .breadcrumb { font-size: 1rem; white-space: nowrap; } + .breadcrumb a { align-items: center; color: #485fc7; @@ -5226,25 +6114,31 @@ fieldset[disabled] .select select:hover { justify-content: center; padding: 0 0.75em; } + .breadcrumb a:hover { color: #363636; } + .breadcrumb li { align-items: center; display: flex; } + .breadcrumb li:first-child a { padding-left: 0; } + .breadcrumb li.is-active a { color: #363636; cursor: default; pointer-events: none; } + .breadcrumb li + li::before { color: #b5b5b5; content: "\0002f"; } + .breadcrumb ul, .breadcrumb ol { align-items: flex-start; @@ -5252,41 +6146,53 @@ fieldset[disabled] .select select:hover { flex-wrap: wrap; justify-content: flex-start; } + .breadcrumb .icon:first-child { margin-right: 0.5em; } + .breadcrumb .icon:last-child { margin-left: 0.5em; } + .breadcrumb.is-centered ol, .breadcrumb.is-centered ul { justify-content: center; } + .breadcrumb.is-right ol, .breadcrumb.is-right ul { justify-content: flex-end; } + .breadcrumb.is-small { font-size: 0.75rem; } + .breadcrumb.is-medium { font-size: 1.25rem; } + .breadcrumb.is-large { font-size: 1.5rem; } + .breadcrumb.has-arrow-separator li + li::before { content: "\02192"; } + .breadcrumb.has-bullet-separator li + li::before { content: "\02022"; } + .breadcrumb.has-dot-separator li + li::before { content: "\000b7"; } + .breadcrumb.has-succeeds-separator li + li::before { content: "\0227B"; } + .card { background-color: white; border-radius: 0.25rem; @@ -5296,24 +6202,28 @@ fieldset[disabled] .select select:hover { max-width: 100%; position: relative; } + .card-header:first-child, .card-content:first-child, .card-footer:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } + .card-header:last-child, .card-content:last-child, .card-footer:last-child { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } + .card-header { align-items: stretch; background-color: transparent; box-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.1); display: flex; } + .card-header-title { align-items: center; color: #363636; @@ -5322,9 +6232,11 @@ fieldset[disabled] .select select:hover { font-weight: 700; padding: 0.75rem 1rem; } + .card-header-title.is-centered { justify-content: center; } + .card-header-icon { align-items: center; -moz-appearance: none; @@ -5342,28 +6254,34 @@ fieldset[disabled] .select select:hover { padding: 0; padding: 0.75rem 1rem; } + .card-image { display: block; position: relative; } + .card-image:first-child img { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } + .card-image:last-child img { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } + .card-content { background-color: transparent; padding: 1.5rem; } + .card-footer { align-items: stretch; background-color: transparent; border-top: 1px solid #ededed; display: flex; } + .card-footer-item { align-items: center; display: flex; @@ -5373,31 +6291,38 @@ fieldset[disabled] .select select:hover { justify-content: center; padding: 0.75rem; } + .card-footer-item:not(:last-child) { border-right: 1px solid #ededed; } + .card .media:not(:last-child) { margin-bottom: 1.5rem; } + .dropdown { display: inline-flex; position: relative; vertical-align: top; } + .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu { display: block; } + .dropdown.is-right .dropdown-menu { left: auto; right: 0; } + .dropdown.is-up .dropdown-menu { bottom: 100%; padding-bottom: 4px; padding-top: initial; top: auto; } + .dropdown-menu { display: none; left: 0; @@ -5407,6 +6332,7 @@ fieldset[disabled] .select select:hover { top: 100%; z-index: 20; } + .dropdown-content { background-color: white; border-radius: 4px; @@ -5415,6 +6341,7 @@ fieldset[disabled] .select select:hover { padding-bottom: 0.5rem; padding-top: 0.5rem; } + .dropdown-item { color: #4a4a4a; display: block; @@ -5423,6 +6350,7 @@ fieldset[disabled] .select select:hover { padding: 0.375rem 1rem; position: relative; } + a.dropdown-item, button.dropdown-item { padding-right: 3rem; @@ -5430,16 +6358,19 @@ button.dropdown-item { white-space: nowrap; width: 100%; } + a.dropdown-item:hover, button.dropdown-item:hover { background-color: whitesmoke; color: #0a0a0a; } + a.dropdown-item.is-active, button.dropdown-item.is-active { background-color: #485fc7; color: #fff; } + .dropdown-divider { background-color: #ededed; border: none; @@ -5447,34 +6378,43 @@ button.dropdown-item.is-active { height: 1px; margin: 0.5rem 0; } + .level { align-items: center; justify-content: space-between; } + .level code { border-radius: 4px; } + .level img { display: inline-block; vertical-align: top; } + .level.is-mobile { display: flex; } + .level.is-mobile .level-left, .level.is-mobile .level-right { display: flex; } + .level.is-mobile .level-left + .level-right { margin-top: 0; } + .level.is-mobile .level-item:not(:last-child) { margin-bottom: 0; margin-right: 0.75rem; } + .level.is-mobile .level-item:not(.is-narrow) { flex-grow: 1; } + @media screen and (min-width: 769px), print { .level { display: flex; @@ -5484,6 +6424,7 @@ button.dropdown-item.is-active { flex-grow: 1; } } + .level-item { align-items: center; display: flex; @@ -5492,282 +6433,354 @@ button.dropdown-item.is-active { flex-shrink: 0; justify-content: center; } + .level-item .title, .level-item .subtitle { margin-bottom: 0; } + @media screen and (max-width: 768px) { .level-item:not(:last-child) { margin-bottom: 0.75rem; } } + .level-left, .level-right { flex-basis: auto; flex-grow: 0; flex-shrink: 0; } + .level-left .level-item.is-flexible, .level-right .level-item.is-flexible { flex-grow: 1; } + @media screen and (min-width: 769px), print { .level-left .level-item:not(:last-child), .level-right .level-item:not(:last-child) { margin-right: 0.75rem; } } + .level-left { align-items: center; justify-content: flex-start; } + @media screen and (max-width: 768px) { .level-left + .level-right { margin-top: 1.5rem; } } + @media screen and (min-width: 769px), print { .level-left { display: flex; } } + .level-right { align-items: center; justify-content: flex-end; } + @media screen and (min-width: 769px), print { .level-right { display: flex; } } + .media { align-items: flex-start; display: flex; text-align: inherit; } + .media .content:not(:last-child) { margin-bottom: 0.75rem; } + .media .media { border-top: 1px solid rgba(219, 219, 219, 0.5); display: flex; padding-top: 0.75rem; } + .media .media .content:not(:last-child), .media .media .control:not(:last-child) { margin-bottom: 0.5rem; } + .media .media .media { padding-top: 0.5rem; } + .media .media .media + .media { margin-top: 0.5rem; } + .media + .media { border-top: 1px solid rgba(219, 219, 219, 0.5); margin-top: 1rem; padding-top: 1rem; } + .media.is-large + .media { margin-top: 1.5rem; padding-top: 1.5rem; } + .media-left, .media-right { flex-basis: auto; flex-grow: 0; flex-shrink: 0; } + .media-left { margin-right: 1rem; } + .media-right { margin-left: 1rem; } + .media-content { flex-basis: auto; flex-grow: 1; flex-shrink: 1; text-align: inherit; } + @media screen and (max-width: 768px) { .media-content { overflow-x: auto; } } + .menu { font-size: 1rem; } + .menu.is-small { font-size: 0.75rem; } + .menu.is-medium { font-size: 1.25rem; } + .menu.is-large { font-size: 1.5rem; } + .menu-list { line-height: 1.25; } + .menu-list a { border-radius: 2px; color: #4a4a4a; display: block; padding: 0.5em 0.75em; } + .menu-list a:hover { background-color: whitesmoke; color: #363636; } + .menu-list a.is-active { background-color: #485fc7; color: #fff; } + .menu-list li ul { border-left: 1px solid #dbdbdb; margin: 0.75em; padding-left: 0.75em; } + .menu-label { color: #7a7a7a; font-size: 0.75em; letter-spacing: 0.1em; text-transform: uppercase; } + .menu-label:not(:first-child) { margin-top: 1em; } + .menu-label:not(:last-child) { margin-bottom: 1em; } + .message { background-color: whitesmoke; border-radius: 4px; font-size: 1rem; } + .message strong { color: currentColor; } + .message a:not(.button):not(.tag):not(.dropdown-item) { color: currentColor; text-decoration: underline; } + .message.is-small { font-size: 0.75rem; } + .message.is-medium { font-size: 1.25rem; } + .message.is-large { font-size: 1.5rem; } + .message.is-white { background-color: white; } + .message.is-white .message-header { background-color: white; color: #0a0a0a; } + .message.is-white .message-body { border-color: white; } + .message.is-black { background-color: #fafafa; } + .message.is-black .message-header { background-color: #0a0a0a; color: white; } + .message.is-black .message-body { border-color: #0a0a0a; } + .message.is-light { background-color: #fafafa; } + .message.is-light .message-header { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } + .message.is-light .message-body { border-color: whitesmoke; } + .message.is-dark { background-color: #fafafa; } + .message.is-dark .message-header { background-color: #363636; color: #fff; } + .message.is-dark .message-body { border-color: #363636; } + .message.is-primary { background-color: #ebfffc; } + .message.is-primary .message-header { background-color: #00d1b2; color: #fff; } + .message.is-primary .message-body { border-color: #00d1b2; color: #00947e; } + .message.is-link { background-color: #eff1fa; } + .message.is-link .message-header { background-color: #485fc7; color: #fff; } + .message.is-link .message-body { border-color: #485fc7; color: #3850b7; } + .message.is-info { background-color: #eff5fb; } + .message.is-info .message-header { background-color: #3e8ed0; color: #fff; } + .message.is-info .message-body { border-color: #3e8ed0; color: #296fa8; } + .message.is-success { background-color: #effaf5; } + .message.is-success .message-header { background-color: #48c78e; color: #fff; } + .message.is-success .message-body { border-color: #48c78e; color: #257953; } + .message.is-warning { background-color: #fffaeb; } + .message.is-warning .message-header { background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } + .message.is-warning .message-body { border-color: #ffe08a; color: #946c00; } + .message.is-danger { background-color: #feecf0; } + .message.is-danger .message-header { background-color: #f14668; color: #fff; } + .message.is-danger .message-body { border-color: #f14668; color: #cc0f35; } + .message-header { align-items: center; background-color: #4a4a4a; @@ -5780,16 +6793,19 @@ button.dropdown-item.is-active { padding: 0.75em 1em; position: relative; } + .message-header .delete { flex-grow: 0; flex-shrink: 0; margin-left: 0.75em; } + .message-header + .message-body { border-top-left-radius: 0; border-top-right-radius: 0; border-width: 0; } + .message-body { border-color: #dbdbdb; border-radius: 4px; @@ -5798,13 +6814,16 @@ button.dropdown-item.is-active { color: #4a4a4a; padding: 1.25em 1.5em; } + .message-body code, .message-body pre { background-color: white; } + .message-body pre code { background-color: transparent; } + .modal { align-items: center; display: none; @@ -5814,12 +6833,15 @@ button.dropdown-item.is-active { position: fixed; z-index: 40; } + .modal.is-active { display: flex; } + .modal-background { background-color: rgba(10, 10, 10, 0.86); } + .modal-content, .modal-card { margin: 0 20px; @@ -5828,6 +6850,7 @@ button.dropdown-item.is-active { position: relative; width: 100%; } + @media screen and (min-width: 769px) { .modal-content, .modal-card { @@ -5836,6 +6859,7 @@ button.dropdown-item.is-active { width: 640px; } } + .modal-close { background: none; height: 40px; @@ -5844,6 +6868,7 @@ button.dropdown-item.is-active { top: 20px; width: 40px; } + .modal-card { display: flex; flex-direction: column; @@ -5851,6 +6876,7 @@ button.dropdown-item.is-active { overflow: hidden; -ms-overflow-y: visible; } + .modal-card-head, .modal-card-foot { align-items: center; @@ -5861,11 +6887,13 @@ button.dropdown-item.is-active { padding: 20px; position: relative; } + .modal-card-head { border-bottom: 1px solid #dbdbdb; border-top-left-radius: 6px; border-top-right-radius: 6px; } + .modal-card-title { color: #363636; flex-grow: 1; @@ -5873,14 +6901,17 @@ button.dropdown-item.is-active { font-size: 1.5rem; line-height: 1; } + .modal-card-foot { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top: 1px solid #dbdbdb; } + .modal-card-foot .button:not(:last-child) { margin-right: 0.5em; } + .modal-card-body { background-color: white; flex-grow: 1; @@ -5889,20 +6920,24 @@ button.dropdown-item.is-active { -webkit-overflow-scrolling: touch; padding: 20px; } + .navbar { background-color: white; min-height: 3.25rem; position: relative; z-index: 30; } + .navbar.is-white { background-color: white; color: #0a0a0a; } + .navbar.is-white .navbar-brand > .navbar-item, .navbar.is-white .navbar-brand .navbar-link { color: #0a0a0a; } + .navbar.is-white .navbar-brand > a.navbar-item:focus, .navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active, @@ -5912,12 +6947,15 @@ button.dropdown-item.is-active { background-color: #f2f2f2; color: #0a0a0a; } + .navbar.is-white .navbar-brand .navbar-link::after { border-color: #0a0a0a; } + .navbar.is-white .navbar-burger { color: #0a0a0a; } + @media screen and (min-width: 1024px) { .navbar.is-white .navbar-start > .navbar-item, .navbar.is-white .navbar-start .navbar-link, @@ -5959,14 +6997,17 @@ button.dropdown-item.is-active { color: #0a0a0a; } } + .navbar.is-black { background-color: #0a0a0a; color: white; } + .navbar.is-black .navbar-brand > .navbar-item, .navbar.is-black .navbar-brand .navbar-link { color: white; } + .navbar.is-black .navbar-brand > a.navbar-item:focus, .navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active, @@ -5976,12 +7017,15 @@ button.dropdown-item.is-active { background-color: black; color: white; } + .navbar.is-black .navbar-brand .navbar-link::after { border-color: white; } + .navbar.is-black .navbar-burger { color: white; } + @media screen and (min-width: 1024px) { .navbar.is-black .navbar-start > .navbar-item, .navbar.is-black .navbar-start .navbar-link, @@ -6023,14 +7067,17 @@ button.dropdown-item.is-active { color: white; } } + .navbar.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } + .navbar.is-light .navbar-brand > .navbar-item, .navbar.is-light .navbar-brand .navbar-link { color: rgba(0, 0, 0, 0.7); } + .navbar.is-light .navbar-brand > a.navbar-item:focus, .navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active, @@ -6040,12 +7087,15 @@ button.dropdown-item.is-active { background-color: #e8e8e8; color: rgba(0, 0, 0, 0.7); } + .navbar.is-light .navbar-brand .navbar-link::after { border-color: rgba(0, 0, 0, 0.7); } + .navbar.is-light .navbar-burger { color: rgba(0, 0, 0, 0.7); } + @media screen and (min-width: 1024px) { .navbar.is-light .navbar-start > .navbar-item, .navbar.is-light .navbar-start .navbar-link, @@ -6087,14 +7137,17 @@ button.dropdown-item.is-active { color: rgba(0, 0, 0, 0.7); } } + .navbar.is-dark { background-color: #363636; color: #fff; } + .navbar.is-dark .navbar-brand > .navbar-item, .navbar.is-dark .navbar-brand .navbar-link { color: #fff; } + .navbar.is-dark .navbar-brand > a.navbar-item:focus, .navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active, @@ -6104,12 +7157,15 @@ button.dropdown-item.is-active { background-color: #292929; color: #fff; } + .navbar.is-dark .navbar-brand .navbar-link::after { border-color: #fff; } + .navbar.is-dark .navbar-burger { color: #fff; } + @media screen and (min-width: 1024px) { .navbar.is-dark .navbar-start > .navbar-item, .navbar.is-dark .navbar-start .navbar-link, @@ -6151,14 +7207,17 @@ button.dropdown-item.is-active { color: #fff; } } + .navbar.is-primary { background-color: #00d1b2; color: #fff; } + .navbar.is-primary .navbar-brand > .navbar-item, .navbar.is-primary .navbar-brand .navbar-link { color: #fff; } + .navbar.is-primary .navbar-brand > a.navbar-item:focus, .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active, @@ -6168,12 +7227,15 @@ button.dropdown-item.is-active { background-color: #00b89c; color: #fff; } + .navbar.is-primary .navbar-brand .navbar-link::after { border-color: #fff; } + .navbar.is-primary .navbar-burger { color: #fff; } + @media screen and (min-width: 1024px) { .navbar.is-primary .navbar-start > .navbar-item, .navbar.is-primary .navbar-start .navbar-link, @@ -6215,14 +7277,17 @@ button.dropdown-item.is-active { color: #fff; } } + .navbar.is-link { background-color: #485fc7; color: #fff; } + .navbar.is-link .navbar-brand > .navbar-item, .navbar.is-link .navbar-brand .navbar-link { color: #fff; } + .navbar.is-link .navbar-brand > a.navbar-item:focus, .navbar.is-link .navbar-brand > a.navbar-item:hover, .navbar.is-link .navbar-brand > a.navbar-item.is-active, @@ -6232,12 +7297,15 @@ button.dropdown-item.is-active { background-color: #3a51bb; color: #fff; } + .navbar.is-link .navbar-brand .navbar-link::after { border-color: #fff; } + .navbar.is-link .navbar-burger { color: #fff; } + @media screen and (min-width: 1024px) { .navbar.is-link .navbar-start > .navbar-item, .navbar.is-link .navbar-start .navbar-link, @@ -6279,14 +7347,17 @@ button.dropdown-item.is-active { color: #fff; } } + .navbar.is-info { background-color: #3e8ed0; color: #fff; } + .navbar.is-info .navbar-brand > .navbar-item, .navbar.is-info .navbar-brand .navbar-link { color: #fff; } + .navbar.is-info .navbar-brand > a.navbar-item:focus, .navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active, @@ -6296,12 +7367,15 @@ button.dropdown-item.is-active { background-color: #3082c5; color: #fff; } + .navbar.is-info .navbar-brand .navbar-link::after { border-color: #fff; } + .navbar.is-info .navbar-burger { color: #fff; } + @media screen and (min-width: 1024px) { .navbar.is-info .navbar-start > .navbar-item, .navbar.is-info .navbar-start .navbar-link, @@ -6343,14 +7417,17 @@ button.dropdown-item.is-active { color: #fff; } } + .navbar.is-success { background-color: #48c78e; color: #fff; } + .navbar.is-success .navbar-brand > .navbar-item, .navbar.is-success .navbar-brand .navbar-link { color: #fff; } + .navbar.is-success .navbar-brand > a.navbar-item:focus, .navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active, @@ -6360,12 +7437,15 @@ button.dropdown-item.is-active { background-color: #3abb81; color: #fff; } + .navbar.is-success .navbar-brand .navbar-link::after { border-color: #fff; } + .navbar.is-success .navbar-burger { color: #fff; } + @media screen and (min-width: 1024px) { .navbar.is-success .navbar-start > .navbar-item, .navbar.is-success .navbar-start .navbar-link, @@ -6407,14 +7487,17 @@ button.dropdown-item.is-active { color: #fff; } } + .navbar.is-warning { background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } + .navbar.is-warning .navbar-brand > .navbar-item, .navbar.is-warning .navbar-brand .navbar-link { color: rgba(0, 0, 0, 0.7); } + .navbar.is-warning .navbar-brand > a.navbar-item:focus, .navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active, @@ -6424,12 +7507,15 @@ button.dropdown-item.is-active { background-color: #ffd970; color: rgba(0, 0, 0, 0.7); } + .navbar.is-warning .navbar-brand .navbar-link::after { border-color: rgba(0, 0, 0, 0.7); } + .navbar.is-warning .navbar-burger { color: rgba(0, 0, 0, 0.7); } + @media screen and (min-width: 1024px) { .navbar.is-warning .navbar-start > .navbar-item, .navbar.is-warning .navbar-start .navbar-link, @@ -6471,14 +7557,17 @@ button.dropdown-item.is-active { color: rgba(0, 0, 0, 0.7); } } + .navbar.is-danger { background-color: #f14668; color: #fff; } + .navbar.is-danger .navbar-brand > .navbar-item, .navbar.is-danger .navbar-brand .navbar-link { color: #fff; } + .navbar.is-danger .navbar-brand > a.navbar-item:focus, .navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active, @@ -6488,12 +7577,15 @@ button.dropdown-item.is-active { background-color: #ef2e55; color: #fff; } + .navbar.is-danger .navbar-brand .navbar-link::after { border-color: #fff; } + .navbar.is-danger .navbar-burger { color: #fff; } + @media screen and (min-width: 1024px) { .navbar.is-danger .navbar-start > .navbar-item, .navbar.is-danger .navbar-start .navbar-link, @@ -6535,15 +7627,18 @@ button.dropdown-item.is-active { color: #fff; } } + .navbar > .container { align-items: stretch; display: flex; min-height: 3.25rem; width: 100%; } + .navbar.has-shadow { box-shadow: 0 2px 0 0 whitesmoke; } + .navbar.is-fixed-bottom, .navbar.is-fixed-top { left: 0; @@ -6551,23 +7646,29 @@ button.dropdown-item.is-active { right: 0; z-index: 30; } + .navbar.is-fixed-bottom { bottom: 0; } + .navbar.is-fixed-bottom.has-shadow { box-shadow: 0 -2px 0 0 whitesmoke; } + .navbar.is-fixed-top { top: 0; } + html.has-navbar-fixed-top, body.has-navbar-fixed-top { padding-top: 3.25rem; } + html.has-navbar-fixed-bottom, body.has-navbar-fixed-bottom { padding-bottom: 3.25rem; } + .navbar-brand, .navbar-tabs { align-items: stretch; @@ -6575,16 +7676,19 @@ body.has-navbar-fixed-bottom { flex-shrink: 0; min-height: 3.25rem; } + .navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover { background-color: transparent; } + .navbar-tabs { max-width: 100vw; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; } + .navbar-burger { -moz-appearance: none; -webkit-appearance: none; @@ -6599,6 +7703,7 @@ body.has-navbar-fixed-bottom { position: relative; width: 3.25rem; } + .navbar-burger span { background-color: currentColor; display: block; @@ -6611,30 +7716,39 @@ body.has-navbar-fixed-bottom { transition-timing-function: ease-out; width: 16px; } + .navbar-burger span:nth-child(1) { top: calc(50% - 6px); } + .navbar-burger span:nth-child(2) { top: calc(50% - 1px); } + .navbar-burger span:nth-child(3) { top: calc(50% + 4px); } + .navbar-burger:hover { background-color: rgba(0, 0, 0, 0.05); } + .navbar-burger.is-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); } + .navbar-burger.is-active span:nth-child(2) { opacity: 0; } + .navbar-burger.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } + .navbar-menu { display: none; } + .navbar-item, .navbar-link { color: #4a4a4a; @@ -6643,15 +7757,18 @@ body.has-navbar-fixed-bottom { padding: 0.5rem 0.75rem; position: relative; } + .navbar-item .icon:only-child, .navbar-link .icon:only-child { margin-left: -0.25rem; margin-right: -0.25rem; } + a.navbar-item, .navbar-link { cursor: pointer; } + a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, @@ -6663,30 +7780,37 @@ a.navbar-item.is-active, background-color: #fafafa; color: #485fc7; } + .navbar-item { flex-grow: 0; flex-shrink: 0; } + .navbar-item img { max-height: 1.75rem; } + .navbar-item.has-dropdown { padding: 0; } + .navbar-item.is-expanded { flex-grow: 1; flex-shrink: 1; } + .navbar-item.is-tab { border-bottom: 1px solid transparent; min-height: 3.25rem; padding-bottom: calc(0.5rem - 1px); } + .navbar-item.is-tab:focus, .navbar-item.is-tab:hover { background-color: transparent; border-bottom-color: #485fc7; } + .navbar-item.is-tab.is-active { background-color: transparent; border-bottom-color: #485fc7; @@ -6695,27 +7819,33 @@ a.navbar-item.is-active, color: #485fc7; padding-bottom: calc(0.5rem - 3px); } + .navbar-content { flex-grow: 1; flex-shrink: 1; } + .navbar-link:not(.is-arrowless) { padding-right: 2.5em; } + .navbar-link:not(.is-arrowless)::after { border-color: #485fc7; margin-top: -0.375em; right: 1.125em; } + .navbar-dropdown { font-size: 0.875rem; padding-bottom: 0.5rem; padding-top: 0.5rem; } + .navbar-dropdown .navbar-item { padding-left: 1.5rem; padding-right: 1.5rem; } + .navbar-divider { background-color: whitesmoke; border: none; @@ -6723,6 +7853,7 @@ a.navbar-item.is-active, height: 2px; margin: 0.5rem 0; } + @media screen and (max-width: 1023px) { .navbar > .container { display: block; @@ -6785,6 +7916,7 @@ a.navbar-item.is-active, padding-bottom: 3.25rem; } } + @media screen and (min-width: 1024px) { .navbar, .navbar-menu, @@ -7031,31 +8163,39 @@ a.navbar-item.is-active, background-color: #fafafa; } } + .hero.is-fullheight-with-navbar { min-height: calc(100vh - 3.25rem); } + .pagination { font-size: 1rem; margin: -0.25rem; } + .pagination.is-small { font-size: 0.75rem; } + .pagination.is-medium { font-size: 1.25rem; } + .pagination.is-large { font-size: 1.5rem; } + .pagination.is-rounded .pagination-previous, .pagination.is-rounded .pagination-next { border-radius: 9999px; padding-left: 1em; padding-right: 1em; } + .pagination.is-rounded .pagination-link { border-radius: 9999px; } + .pagination, .pagination-list { align-items: center; @@ -7063,6 +8203,7 @@ a.navbar-item.is-active, justify-content: center; text-align: center; } + .pagination-previous, .pagination-next, .pagination-link, @@ -7074,6 +8215,7 @@ a.navbar-item.is-active, padding-right: 0.5em; text-align: center; } + .pagination-previous, .pagination-next, .pagination-link { @@ -7081,22 +8223,26 @@ a.navbar-item.is-active, color: #363636; min-width: 2.5em; } + .pagination-previous:hover, .pagination-next:hover, .pagination-link:hover { border-color: #b5b5b5; color: #363636; } + .pagination-previous:focus, .pagination-next:focus, .pagination-link:focus { border-color: #485fc7; } + .pagination-previous:active, .pagination-next:active, .pagination-link:active { box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); } + .pagination-previous[disabled], .pagination-previous.is-disabled, .pagination-next[disabled], @@ -7109,27 +8255,33 @@ a.navbar-item.is-active, color: #7a7a7a; opacity: 0.5; } + .pagination-previous, .pagination-next { padding-left: 0.75em; padding-right: 0.75em; white-space: nowrap; } + .pagination-link.is-current { background-color: #485fc7; border-color: #485fc7; color: #fff; } + .pagination-ellipsis { color: #b5b5b5; pointer-events: none; } + .pagination-list { flex-wrap: wrap; } + .pagination-list li { list-style: none; } + @media screen and (max-width: 768px) { .pagination { flex-wrap: wrap; @@ -7146,6 +8298,7 @@ a.navbar-item.is-active, flex-shrink: 1; } } + @media screen and (min-width: 769px), print { .pagination-list { flex-grow: 1; @@ -7202,119 +8355,153 @@ a.navbar-item.is-active, order: 3; } } + .panel { border-radius: 6px; box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); font-size: 1rem; } + .panel:not(:last-child) { margin-bottom: 1.5rem; } + .panel.is-white .panel-heading { background-color: white; color: #0a0a0a; } + .panel.is-white .panel-tabs a.is-active { border-bottom-color: white; } + .panel.is-white .panel-block.is-active .panel-icon { color: white; } + .panel.is-black .panel-heading { background-color: #0a0a0a; color: white; } + .panel.is-black .panel-tabs a.is-active { border-bottom-color: #0a0a0a; } + .panel.is-black .panel-block.is-active .panel-icon { color: #0a0a0a; } + .panel.is-light .panel-heading { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } + .panel.is-light .panel-tabs a.is-active { border-bottom-color: whitesmoke; } + .panel.is-light .panel-block.is-active .panel-icon { color: whitesmoke; } + .panel.is-dark .panel-heading { background-color: #363636; color: #fff; } + .panel.is-dark .panel-tabs a.is-active { border-bottom-color: #363636; } + .panel.is-dark .panel-block.is-active .panel-icon { color: #363636; } + .panel.is-primary .panel-heading { background-color: #00d1b2; color: #fff; } + .panel.is-primary .panel-tabs a.is-active { border-bottom-color: #00d1b2; } + .panel.is-primary .panel-block.is-active .panel-icon { color: #00d1b2; } + .panel.is-link .panel-heading { background-color: #485fc7; color: #fff; } + .panel.is-link .panel-tabs a.is-active { border-bottom-color: #485fc7; } + .panel.is-link .panel-block.is-active .panel-icon { color: #485fc7; } + .panel.is-info .panel-heading { background-color: #3e8ed0; color: #fff; } + .panel.is-info .panel-tabs a.is-active { border-bottom-color: #3e8ed0; } + .panel.is-info .panel-block.is-active .panel-icon { color: #3e8ed0; } + .panel.is-success .panel-heading { background-color: #48c78e; color: #fff; } + .panel.is-success .panel-tabs a.is-active { border-bottom-color: #48c78e; } + .panel.is-success .panel-block.is-active .panel-icon { color: #48c78e; } + .panel.is-warning .panel-heading { background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } + .panel.is-warning .panel-tabs a.is-active { border-bottom-color: #ffe08a; } + .panel.is-warning .panel-block.is-active .panel-icon { color: #ffe08a; } + .panel.is-danger .panel-heading { background-color: #f14668; color: #fff; } + .panel.is-danger .panel-tabs a.is-active { border-bottom-color: #f14668; } + .panel.is-danger .panel-block.is-active .panel-icon { color: #f14668; } + .panel-tabs:not(:last-child), .panel-block:not(:last-child) { border-bottom: 1px solid #ededed; } + .panel-heading { background-color: #ededed; border-radius: 6px 6px 0 0; @@ -7324,27 +8511,33 @@ a.navbar-item.is-active, line-height: 1.25; padding: 0.75em 1em; } + .panel-tabs { align-items: flex-end; display: flex; font-size: 0.875em; justify-content: center; } + .panel-tabs a { border-bottom: 1px solid #dbdbdb; margin-bottom: -1px; padding: 0.5em; } + .panel-tabs a.is-active { border-bottom-color: #4a4a4a; color: #363636; } + .panel-list a { color: #4a4a4a; } + .panel-list a:hover { color: #485fc7; } + .panel-block { align-items: center; color: #363636; @@ -7352,36 +8545,45 @@ a.navbar-item.is-active, justify-content: flex-start; padding: 0.5em 0.75em; } + .panel-block input[type="checkbox"] { margin-right: 0.75em; } + .panel-block > .control { flex-grow: 1; flex-shrink: 1; width: 100%; } + .panel-block.is-wrapped { flex-wrap: wrap; } + .panel-block.is-active { border-left-color: #485fc7; color: #363636; } + .panel-block.is-active .panel-icon { color: #485fc7; } + .panel-block:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + a.panel-block, label.panel-block { cursor: pointer; } + a.panel-block:hover, label.panel-block:hover { background-color: whitesmoke; } + .panel-icon { color: #7a7a7a; display: inline-block; @@ -7393,10 +8595,12 @@ label.panel-block:hover { vertical-align: top; width: 1em; } + .panel-icon .fa { font-size: inherit; line-height: inherit; } + .tabs { align-items: stretch; display: flex; @@ -7407,6 +8611,7 @@ label.panel-block:hover { overflow-x: auto; white-space: nowrap; } + .tabs a { align-items: center; border-bottom-color: #dbdbdb; @@ -7419,17 +8624,21 @@ label.panel-block:hover { padding: 0.5em 1em; vertical-align: top; } + .tabs a:hover { border-bottom-color: #363636; color: #363636; } + .tabs li { display: block; } + .tabs li.is-active a { border-bottom-color: #485fc7; color: #485fc7; } + .tabs ul { align-items: center; border-bottom-color: #dbdbdb; @@ -7440,48 +8649,60 @@ label.panel-block:hover { flex-shrink: 0; justify-content: flex-start; } + .tabs ul.is-left { padding-right: 0.75em; } + .tabs ul.is-center { flex: none; justify-content: center; padding-left: 0.75em; padding-right: 0.75em; } + .tabs ul.is-right { justify-content: flex-end; padding-left: 0.75em; } + .tabs .icon:first-child { margin-right: 0.5em; } + .tabs .icon:last-child { margin-left: 0.5em; } + .tabs.is-centered ul { justify-content: center; } + .tabs.is-right ul { justify-content: flex-end; } + .tabs.is-boxed a { border: 1px solid transparent; border-radius: 4px 4px 0 0; } + .tabs.is-boxed a:hover { background-color: whitesmoke; border-bottom-color: #dbdbdb; } + .tabs.is-boxed li.is-active a { background-color: white; border-bottom-color: transparent !important; border-color: #dbdbdb; } + .tabs.is-fullwidth li { flex-grow: 1; flex-shrink: 0; } + .tabs.is-toggle a { border-color: #dbdbdb; border-style: solid; @@ -7489,50 +8710,62 @@ label.panel-block:hover { margin-bottom: 0; position: relative; } + .tabs.is-toggle a:hover { background-color: whitesmoke; border-color: #b5b5b5; z-index: 2; } + .tabs.is-toggle li + li { margin-left: -1px; } + .tabs.is-toggle li:first-child a { border-bottom-left-radius: 4px; border-top-left-radius: 4px; } + .tabs.is-toggle li:last-child a { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } + .tabs.is-toggle li.is-active a { background-color: #485fc7; border-color: #485fc7; color: #fff; z-index: 1; } + .tabs.is-toggle ul { border-bottom: none; } + .tabs.is-toggle.is-toggle-rounded li:first-child a { border-bottom-left-radius: 9999px; border-top-left-radius: 9999px; padding-left: 1.25em; } + .tabs.is-toggle.is-toggle-rounded li:last-child a { border-bottom-right-radius: 9999px; border-top-right-radius: 9999px; padding-right: 1.25em; } + .tabs.is-small { font-size: 0.75rem; } + .tabs.is-medium { font-size: 1.25rem; } + .tabs.is-large { font-size: 1.5rem; } + /* Bulma Grid */ .column { display: block; @@ -7541,168 +8774,215 @@ label.panel-block:hover { flex-shrink: 1; padding: 0.75rem; } + .columns.is-mobile > .column.is-narrow { flex: none; width: unset; } + .columns.is-mobile > .column.is-full { flex: none; width: 100%; } + .columns.is-mobile > .column.is-three-quarters { flex: none; width: 75%; } + .columns.is-mobile > .column.is-two-thirds { flex: none; width: 66.6666%; } + .columns.is-mobile > .column.is-half { flex: none; width: 50%; } + .columns.is-mobile > .column.is-one-third { flex: none; width: 33.3333%; } + .columns.is-mobile > .column.is-one-quarter { flex: none; width: 25%; } + .columns.is-mobile > .column.is-one-fifth { flex: none; width: 20%; } + .columns.is-mobile > .column.is-two-fifths { flex: none; width: 40%; } + .columns.is-mobile > .column.is-three-fifths { flex: none; width: 60%; } + .columns.is-mobile > .column.is-four-fifths { flex: none; width: 80%; } + .columns.is-mobile > .column.is-offset-three-quarters { margin-left: 75%; } + .columns.is-mobile > .column.is-offset-two-thirds { margin-left: 66.6666%; } + .columns.is-mobile > .column.is-offset-half { margin-left: 50%; } + .columns.is-mobile > .column.is-offset-one-third { margin-left: 33.3333%; } + .columns.is-mobile > .column.is-offset-one-quarter { margin-left: 25%; } + .columns.is-mobile > .column.is-offset-one-fifth { margin-left: 20%; } + .columns.is-mobile > .column.is-offset-two-fifths { margin-left: 40%; } + .columns.is-mobile > .column.is-offset-three-fifths { margin-left: 60%; } + .columns.is-mobile > .column.is-offset-four-fifths { margin-left: 80%; } + .columns.is-mobile > .column.is-0 { flex: none; width: 0%; } + .columns.is-mobile > .column.is-offset-0 { margin-left: 0%; } + .columns.is-mobile > .column.is-1 { flex: none; width: 8.33333%; } + .columns.is-mobile > .column.is-offset-1 { margin-left: 8.33333%; } + .columns.is-mobile > .column.is-2 { flex: none; width: 16.66667%; } + .columns.is-mobile > .column.is-offset-2 { margin-left: 16.66667%; } + .columns.is-mobile > .column.is-3 { flex: none; width: 25%; } + .columns.is-mobile > .column.is-offset-3 { margin-left: 25%; } + .columns.is-mobile > .column.is-4 { flex: none; width: 33.33333%; } + .columns.is-mobile > .column.is-offset-4 { margin-left: 33.33333%; } + .columns.is-mobile > .column.is-5 { flex: none; width: 41.66667%; } + .columns.is-mobile > .column.is-offset-5 { margin-left: 41.66667%; } + .columns.is-mobile > .column.is-6 { flex: none; width: 50%; } + .columns.is-mobile > .column.is-offset-6 { margin-left: 50%; } + .columns.is-mobile > .column.is-7 { flex: none; width: 58.33333%; } + .columns.is-mobile > .column.is-offset-7 { margin-left: 58.33333%; } + .columns.is-mobile > .column.is-8 { flex: none; width: 66.66667%; } + .columns.is-mobile > .column.is-offset-8 { margin-left: 66.66667%; } + .columns.is-mobile > .column.is-9 { flex: none; width: 75%; } + .columns.is-mobile > .column.is-offset-9 { margin-left: 75%; } + .columns.is-mobile > .column.is-10 { flex: none; width: 83.33333%; } + .columns.is-mobile > .column.is-offset-10 { margin-left: 83.33333%; } + .columns.is-mobile > .column.is-11 { flex: none; width: 91.66667%; } + .columns.is-mobile > .column.is-offset-11 { margin-left: 91.66667%; } + .columns.is-mobile > .column.is-12 { flex: none; width: 100%; } + .columns.is-mobile > .column.is-offset-12 { margin-left: 100%; } + @media screen and (max-width: 768px) { .column.is-narrow-mobile { flex: none; @@ -7912,6 +9192,7 @@ label.panel-block:hover { margin-left: 100%; } } + @media screen and (min-width: 769px), print { .column.is-narrow, .column.is-narrow-tablet { @@ -8167,6 +9448,7 @@ label.panel-block:hover { margin-left: 100%; } } + @media screen and (max-width: 1023px) { .column.is-narrow-touch { flex: none; @@ -8376,6 +9658,7 @@ label.panel-block:hover { margin-left: 100%; } } + @media screen and (min-width: 1024px) { .column.is-narrow-desktop { flex: none; @@ -8585,6 +9868,7 @@ label.panel-block:hover { margin-left: 100%; } } + @media screen and (min-width: 1216px) { .column.is-narrow-widescreen { flex: none; @@ -8794,6 +10078,7 @@ label.panel-block:hover { margin-left: 100%; } } + @media screen and (min-width: 1408px) { .column.is-narrow-fullhd { flex: none; @@ -9003,495 +10288,601 @@ label.panel-block:hover { margin-left: 100%; } } + .columns { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } + .columns:last-child { margin-bottom: -0.75rem; } + .columns:not(:last-child) { margin-bottom: calc(1.5rem - 0.75rem); } + .columns.is-centered { justify-content: center; } + .columns.is-gapless { margin-left: 0; margin-right: 0; margin-top: 0; } + .columns.is-gapless > .column { margin: 0; padding: 0 !important; } + .columns.is-gapless:not(:last-child) { margin-bottom: 1.5rem; } + .columns.is-gapless:last-child { margin-bottom: 0; } + .columns.is-mobile { display: flex; } + .columns.is-multiline { flex-wrap: wrap; } + .columns.is-vcentered { align-items: center; } + @media screen and (min-width: 769px), print { .columns:not(.is-desktop) { display: flex; } } + @media screen and (min-width: 1024px) { .columns.is-desktop { display: flex; } } + .columns.is-variable { --columnGap: 0.75rem; margin-left: calc(-1 * var(--columnGap)); margin-right: calc(-1 * var(--columnGap)); } + .columns.is-variable > .column { padding-left: var(--columnGap); padding-right: var(--columnGap); } + .columns.is-variable.is-0 { --columnGap: 0rem; } + @media screen and (max-width: 768px) { .columns.is-variable.is-0-mobile { --columnGap: 0rem; } } + @media screen and (min-width: 769px), print { .columns.is-variable.is-0-tablet { --columnGap: 0rem; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-0-tablet-only { --columnGap: 0rem; } } + @media screen and (max-width: 1023px) { .columns.is-variable.is-0-touch { --columnGap: 0rem; } } + @media screen and (min-width: 1024px) { .columns.is-variable.is-0-desktop { --columnGap: 0rem; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-0-desktop-only { --columnGap: 0rem; } } + @media screen and (min-width: 1216px) { .columns.is-variable.is-0-widescreen { --columnGap: 0rem; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .columns.is-variable.is-0-widescreen-only { --columnGap: 0rem; } } + @media screen and (min-width: 1408px) { .columns.is-variable.is-0-fullhd { --columnGap: 0rem; } } + .columns.is-variable.is-1 { --columnGap: 0.25rem; } + @media screen and (max-width: 768px) { .columns.is-variable.is-1-mobile { --columnGap: 0.25rem; } } + @media screen and (min-width: 769px), print { .columns.is-variable.is-1-tablet { --columnGap: 0.25rem; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-1-tablet-only { --columnGap: 0.25rem; } } + @media screen and (max-width: 1023px) { .columns.is-variable.is-1-touch { --columnGap: 0.25rem; } } + @media screen and (min-width: 1024px) { .columns.is-variable.is-1-desktop { --columnGap: 0.25rem; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-1-desktop-only { --columnGap: 0.25rem; } } + @media screen and (min-width: 1216px) { .columns.is-variable.is-1-widescreen { --columnGap: 0.25rem; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .columns.is-variable.is-1-widescreen-only { --columnGap: 0.25rem; } } + @media screen and (min-width: 1408px) { .columns.is-variable.is-1-fullhd { --columnGap: 0.25rem; } } + .columns.is-variable.is-2 { --columnGap: 0.5rem; } + @media screen and (max-width: 768px) { .columns.is-variable.is-2-mobile { --columnGap: 0.5rem; } } + @media screen and (min-width: 769px), print { .columns.is-variable.is-2-tablet { --columnGap: 0.5rem; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-2-tablet-only { --columnGap: 0.5rem; } } + @media screen and (max-width: 1023px) { .columns.is-variable.is-2-touch { --columnGap: 0.5rem; } } + @media screen and (min-width: 1024px) { .columns.is-variable.is-2-desktop { --columnGap: 0.5rem; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-2-desktop-only { --columnGap: 0.5rem; } } + @media screen and (min-width: 1216px) { .columns.is-variable.is-2-widescreen { --columnGap: 0.5rem; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .columns.is-variable.is-2-widescreen-only { --columnGap: 0.5rem; } } + @media screen and (min-width: 1408px) { .columns.is-variable.is-2-fullhd { --columnGap: 0.5rem; } } + .columns.is-variable.is-3 { --columnGap: 0.75rem; } + @media screen and (max-width: 768px) { .columns.is-variable.is-3-mobile { --columnGap: 0.75rem; } } + @media screen and (min-width: 769px), print { .columns.is-variable.is-3-tablet { --columnGap: 0.75rem; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-3-tablet-only { --columnGap: 0.75rem; } } + @media screen and (max-width: 1023px) { .columns.is-variable.is-3-touch { --columnGap: 0.75rem; } } + @media screen and (min-width: 1024px) { .columns.is-variable.is-3-desktop { --columnGap: 0.75rem; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-3-desktop-only { --columnGap: 0.75rem; } } + @media screen and (min-width: 1216px) { .columns.is-variable.is-3-widescreen { --columnGap: 0.75rem; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .columns.is-variable.is-3-widescreen-only { --columnGap: 0.75rem; } } + @media screen and (min-width: 1408px) { .columns.is-variable.is-3-fullhd { --columnGap: 0.75rem; } } + .columns.is-variable.is-4 { --columnGap: 1rem; } + @media screen and (max-width: 768px) { .columns.is-variable.is-4-mobile { --columnGap: 1rem; } } + @media screen and (min-width: 769px), print { .columns.is-variable.is-4-tablet { --columnGap: 1rem; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-4-tablet-only { --columnGap: 1rem; } } + @media screen and (max-width: 1023px) { .columns.is-variable.is-4-touch { --columnGap: 1rem; } } + @media screen and (min-width: 1024px) { .columns.is-variable.is-4-desktop { --columnGap: 1rem; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-4-desktop-only { --columnGap: 1rem; } } + @media screen and (min-width: 1216px) { .columns.is-variable.is-4-widescreen { --columnGap: 1rem; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .columns.is-variable.is-4-widescreen-only { --columnGap: 1rem; } } + @media screen and (min-width: 1408px) { .columns.is-variable.is-4-fullhd { --columnGap: 1rem; } } + .columns.is-variable.is-5 { --columnGap: 1.25rem; } + @media screen and (max-width: 768px) { .columns.is-variable.is-5-mobile { --columnGap: 1.25rem; } } + @media screen and (min-width: 769px), print { .columns.is-variable.is-5-tablet { --columnGap: 1.25rem; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-5-tablet-only { --columnGap: 1.25rem; } } + @media screen and (max-width: 1023px) { .columns.is-variable.is-5-touch { --columnGap: 1.25rem; } } + @media screen and (min-width: 1024px) { .columns.is-variable.is-5-desktop { --columnGap: 1.25rem; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-5-desktop-only { --columnGap: 1.25rem; } } + @media screen and (min-width: 1216px) { .columns.is-variable.is-5-widescreen { --columnGap: 1.25rem; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .columns.is-variable.is-5-widescreen-only { --columnGap: 1.25rem; } } + @media screen and (min-width: 1408px) { .columns.is-variable.is-5-fullhd { --columnGap: 1.25rem; } } + .columns.is-variable.is-6 { --columnGap: 1.5rem; } + @media screen and (max-width: 768px) { .columns.is-variable.is-6-mobile { --columnGap: 1.5rem; } } + @media screen and (min-width: 769px), print { .columns.is-variable.is-6-tablet { --columnGap: 1.5rem; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-6-tablet-only { --columnGap: 1.5rem; } } + @media screen and (max-width: 1023px) { .columns.is-variable.is-6-touch { --columnGap: 1.5rem; } } + @media screen and (min-width: 1024px) { .columns.is-variable.is-6-desktop { --columnGap: 1.5rem; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-6-desktop-only { --columnGap: 1.5rem; } } + @media screen and (min-width: 1216px) { .columns.is-variable.is-6-widescreen { --columnGap: 1.5rem; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .columns.is-variable.is-6-widescreen-only { --columnGap: 1.5rem; } } + @media screen and (min-width: 1408px) { .columns.is-variable.is-6-fullhd { --columnGap: 1.5rem; } } + .columns.is-variable.is-7 { --columnGap: 1.75rem; } + @media screen and (max-width: 768px) { .columns.is-variable.is-7-mobile { --columnGap: 1.75rem; } } + @media screen and (min-width: 769px), print { .columns.is-variable.is-7-tablet { --columnGap: 1.75rem; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-7-tablet-only { --columnGap: 1.75rem; } } + @media screen and (max-width: 1023px) { .columns.is-variable.is-7-touch { --columnGap: 1.75rem; } } + @media screen and (min-width: 1024px) { .columns.is-variable.is-7-desktop { --columnGap: 1.75rem; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-7-desktop-only { --columnGap: 1.75rem; } } + @media screen and (min-width: 1216px) { .columns.is-variable.is-7-widescreen { --columnGap: 1.75rem; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .columns.is-variable.is-7-widescreen-only { --columnGap: 1.75rem; } } + @media screen and (min-width: 1408px) { .columns.is-variable.is-7-fullhd { --columnGap: 1.75rem; } } + .columns.is-variable.is-8 { --columnGap: 2rem; } + @media screen and (max-width: 768px) { .columns.is-variable.is-8-mobile { --columnGap: 2rem; } } + @media screen and (min-width: 769px), print { .columns.is-variable.is-8-tablet { --columnGap: 2rem; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .columns.is-variable.is-8-tablet-only { --columnGap: 2rem; } } + @media screen and (max-width: 1023px) { .columns.is-variable.is-8-touch { --columnGap: 2rem; } } + @media screen and (min-width: 1024px) { .columns.is-variable.is-8-desktop { --columnGap: 2rem; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .columns.is-variable.is-8-desktop-only { --columnGap: 2rem; } } + @media screen and (min-width: 1216px) { .columns.is-variable.is-8-widescreen { --columnGap: 2rem; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .columns.is-variable.is-8-widescreen-only { --columnGap: 2rem; } } + @media screen and (min-width: 1408px) { .columns.is-variable.is-8-fullhd { --columnGap: 2rem; } } + .tile { align-items: stretch; display: block; @@ -9502,29 +10893,37 @@ label.panel-block:hover { min-height: -moz-min-content; min-height: min-content; } + .tile.is-ancestor { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } + .tile.is-ancestor:last-child { margin-bottom: -0.75rem; } + .tile.is-ancestor:not(:last-child) { margin-bottom: 0.75rem; } + .tile.is-child { margin: 0 !important; } + .tile.is-parent { padding: 0.75rem; } + .tile.is-vertical { flex-direction: column; } + .tile.is-vertical > .tile.is-child:not(:last-child) { margin-bottom: 1.5rem !important; } + @media screen and (min-width: 769px), print { .tile:not(.is-child) { display: flex; @@ -9590,865 +10989,1133 @@ label.panel-block:hover { width: 100%; } } + /* Bulma Helpers */ .has-text-white { color: white !important; } + a.has-text-white:hover, a.has-text-white:focus { color: #e6e6e6 !important; } + .has-background-white { background-color: white !important; } + .has-text-black { color: #0a0a0a !important; } + a.has-text-black:hover, a.has-text-black:focus { color: black !important; } + .has-background-black { background-color: #0a0a0a !important; } + .has-text-light { color: whitesmoke !important; } + a.has-text-light:hover, a.has-text-light:focus { color: #dbdbdb !important; } + .has-background-light { background-color: whitesmoke !important; } + .has-text-dark { color: #363636 !important; } + a.has-text-dark:hover, a.has-text-dark:focus { color: #1c1c1c !important; } + .has-background-dark { background-color: #363636 !important; } + .has-text-primary { color: #00d1b2 !important; } + a.has-text-primary:hover, a.has-text-primary:focus { color: #009e86 !important; } + .has-background-primary { background-color: #00d1b2 !important; } + .has-text-primary-light { color: #ebfffc !important; } + a.has-text-primary-light:hover, a.has-text-primary-light:focus { color: #b8fff4 !important; } + .has-background-primary-light { background-color: #ebfffc !important; } + .has-text-primary-dark { color: #00947e !important; } + a.has-text-primary-dark:hover, a.has-text-primary-dark:focus { color: #00c7a9 !important; } + .has-background-primary-dark { background-color: #00947e !important; } + .has-text-link { color: #485fc7 !important; } + a.has-text-link:hover, a.has-text-link:focus { color: #3449a8 !important; } + .has-background-link { background-color: #485fc7 !important; } + .has-text-link-light { color: #eff1fa !important; } + a.has-text-link-light:hover, a.has-text-link-light:focus { color: #c8cfee !important; } + .has-background-link-light { background-color: #eff1fa !important; } + .has-text-link-dark { color: #3850b7 !important; } + a.has-text-link-dark:hover, a.has-text-link-dark:focus { color: #576dcb !important; } + .has-background-link-dark { background-color: #3850b7 !important; } + .has-text-info { color: #3e8ed0 !important; } + a.has-text-info:hover, a.has-text-info:focus { color: #2b74b1 !important; } + .has-background-info { background-color: #3e8ed0 !important; } + .has-text-info-light { color: #eff5fb !important; } + a.has-text-info-light:hover, a.has-text-info-light:focus { color: #c6ddf1 !important; } + .has-background-info-light { background-color: #eff5fb !important; } + .has-text-info-dark { color: #296fa8 !important; } + a.has-text-info-dark:hover, a.has-text-info-dark:focus { color: #368ace !important; } + .has-background-info-dark { background-color: #296fa8 !important; } + .has-text-success { color: #48c78e !important; } + a.has-text-success:hover, a.has-text-success:focus { color: #34a873 !important; } + .has-background-success { background-color: #48c78e !important; } + .has-text-success-light { color: #effaf5 !important; } + a.has-text-success-light:hover, a.has-text-success-light:focus { color: #c8eedd !important; } + .has-background-success-light { background-color: #effaf5 !important; } + .has-text-success-dark { color: #257953 !important; } + a.has-text-success-dark:hover, a.has-text-success-dark:focus { color: #31a06e !important; } + .has-background-success-dark { background-color: #257953 !important; } + .has-text-warning { color: #ffe08a !important; } + a.has-text-warning:hover, a.has-text-warning:focus { color: #ffd257 !important; } + .has-background-warning { background-color: #ffe08a !important; } + .has-text-warning-light { color: #fffaeb !important; } + a.has-text-warning-light:hover, a.has-text-warning-light:focus { color: #ffecb8 !important; } + .has-background-warning-light { background-color: #fffaeb !important; } + .has-text-warning-dark { color: #946c00 !important; } + a.has-text-warning-dark:hover, a.has-text-warning-dark:focus { color: #c79200 !important; } + .has-background-warning-dark { background-color: #946c00 !important; } + .has-text-danger { color: #f14668 !important; } + a.has-text-danger:hover, a.has-text-danger:focus { color: #ee1742 !important; } + .has-background-danger { background-color: #f14668 !important; } + .has-text-danger-light { color: #feecf0 !important; } + a.has-text-danger-light:hover, a.has-text-danger-light:focus { color: #fabdc9 !important; } + .has-background-danger-light { background-color: #feecf0 !important; } + .has-text-danger-dark { color: #cc0f35 !important; } + a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { color: #ee2049 !important; } + .has-background-danger-dark { background-color: #cc0f35 !important; } + .has-text-black-bis { color: #121212 !important; } + .has-background-black-bis { background-color: #121212 !important; } + .has-text-black-ter { color: #242424 !important; } + .has-background-black-ter { background-color: #242424 !important; } + .has-text-grey-darker { color: #363636 !important; } + .has-background-grey-darker { background-color: #363636 !important; } + .has-text-grey-dark { color: #4a4a4a !important; } + .has-background-grey-dark { background-color: #4a4a4a !important; } + .has-text-grey { color: #7a7a7a !important; } + .has-background-grey { background-color: #7a7a7a !important; } + .has-text-grey-light { color: #b5b5b5 !important; } + .has-background-grey-light { background-color: #b5b5b5 !important; } + .has-text-grey-lighter { color: #dbdbdb !important; } + .has-background-grey-lighter { background-color: #dbdbdb !important; } + .has-text-white-ter { color: whitesmoke !important; } + .has-background-white-ter { background-color: whitesmoke !important; } + .has-text-white-bis { color: #fafafa !important; } + .has-background-white-bis { background-color: #fafafa !important; } + .is-flex-direction-row { flex-direction: row !important; } + .is-flex-direction-row-reverse { flex-direction: row-reverse !important; } + .is-flex-direction-column { flex-direction: column !important; } + .is-flex-direction-column-reverse { flex-direction: column-reverse !important; } + .is-flex-wrap-nowrap { flex-wrap: nowrap !important; } + .is-flex-wrap-wrap { flex-wrap: wrap !important; } + .is-flex-wrap-wrap-reverse { flex-wrap: wrap-reverse !important; } + .is-justify-content-flex-start { justify-content: flex-start !important; } + .is-justify-content-flex-end { justify-content: flex-end !important; } + .is-justify-content-center { justify-content: center !important; } + .is-justify-content-space-between { justify-content: space-between !important; } + .is-justify-content-space-around { justify-content: space-around !important; } + .is-justify-content-space-evenly { justify-content: space-evenly !important; } + .is-justify-content-start { justify-content: start !important; } + .is-justify-content-end { justify-content: end !important; } + .is-justify-content-left { justify-content: left !important; } + .is-justify-content-right { justify-content: right !important; } + .is-align-content-flex-start { align-content: flex-start !important; } + .is-align-content-flex-end { align-content: flex-end !important; } + .is-align-content-center { align-content: center !important; } + .is-align-content-space-between { align-content: space-between !important; } + .is-align-content-space-around { align-content: space-around !important; } + .is-align-content-space-evenly { align-content: space-evenly !important; } + .is-align-content-stretch { align-content: stretch !important; } + .is-align-content-start { align-content: start !important; } + .is-align-content-end { align-content: end !important; } + .is-align-content-baseline { align-content: baseline !important; } + .is-align-items-stretch { align-items: stretch !important; } + .is-align-items-flex-start { align-items: flex-start !important; } + .is-align-items-flex-end { align-items: flex-end !important; } + .is-align-items-center { align-items: center !important; } + .is-align-items-baseline { align-items: baseline !important; } + .is-align-items-start { align-items: start !important; } + .is-align-items-end { align-items: end !important; } + .is-align-items-self-start { align-items: self-start !important; } + .is-align-items-self-end { align-items: self-end !important; } + .is-align-self-auto { align-self: auto !important; } + .is-align-self-flex-start { align-self: flex-start !important; } + .is-align-self-flex-end { align-self: flex-end !important; } + .is-align-self-center { align-self: center !important; } + .is-align-self-baseline { align-self: baseline !important; } + .is-align-self-stretch { align-self: stretch !important; } + .is-flex-grow-0 { flex-grow: 0 !important; } + .is-flex-grow-1 { flex-grow: 1 !important; } + .is-flex-grow-2 { flex-grow: 2 !important; } + .is-flex-grow-3 { flex-grow: 3 !important; } + .is-flex-grow-4 { flex-grow: 4 !important; } + .is-flex-grow-5 { flex-grow: 5 !important; } + .is-flex-shrink-0 { flex-shrink: 0 !important; } + .is-flex-shrink-1 { flex-shrink: 1 !important; } + .is-flex-shrink-2 { flex-shrink: 2 !important; } + .is-flex-shrink-3 { flex-shrink: 3 !important; } + .is-flex-shrink-4 { flex-shrink: 4 !important; } + .is-flex-shrink-5 { flex-shrink: 5 !important; } + .is-clearfix::after { clear: both; content: " "; display: table; } + .is-pulled-left { float: left !important; } + .is-pulled-right { float: right !important; } + .is-radiusless { border-radius: 0 !important; } + .is-shadowless { box-shadow: none !important; } + .is-clickable { cursor: pointer !important; pointer-events: all !important; } + .is-clipped { overflow: hidden !important; } + .is-relative { position: relative !important; } + .is-marginless { margin: 0 !important; } + .is-paddingless { padding: 0 !important; } + .m-0 { margin: 0 !important; } + .mt-0 { margin-top: 0 !important; } + .mr-0 { margin-right: 0 !important; } + .mb-0 { margin-bottom: 0 !important; } + .ml-0 { margin-left: 0 !important; } + .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } + .my-0 { margin-bottom: 0 !important; margin-top: 0 !important; } + .m-1 { margin: 0.25rem !important; } + .mt-1 { margin-top: 0.25rem !important; } + .mr-1 { margin-right: 0.25rem !important; } + .mb-1 { margin-bottom: 0.25rem !important; } + .ml-1 { margin-left: 0.25rem !important; } + .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } + .my-1 { margin-bottom: 0.25rem !important; margin-top: 0.25rem !important; } + .m-2 { margin: 0.5rem !important; } + .mt-2 { margin-top: 0.5rem !important; } + .mr-2 { margin-right: 0.5rem !important; } + .mb-2 { margin-bottom: 0.5rem !important; } + .ml-2 { margin-left: 0.5rem !important; } + .mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } + .my-2 { margin-bottom: 0.5rem !important; margin-top: 0.5rem !important; } + .m-3 { margin: 0.75rem !important; } + .mt-3 { margin-top: 0.75rem !important; } + .mr-3 { margin-right: 0.75rem !important; } + .mb-3 { margin-bottom: 0.75rem !important; } + .ml-3 { margin-left: 0.75rem !important; } + .mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; } + .my-3 { margin-bottom: 0.75rem !important; margin-top: 0.75rem !important; } + .m-4 { margin: 1rem !important; } + .mt-4 { margin-top: 1rem !important; } + .mr-4 { margin-right: 1rem !important; } + .mb-4 { margin-bottom: 1rem !important; } + .ml-4 { margin-left: 1rem !important; } + .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } + .my-4 { margin-bottom: 1rem !important; margin-top: 1rem !important; } + .m-5 { margin: 1.5rem !important; } + .mt-5 { margin-top: 1.5rem !important; } + .mr-5 { margin-right: 1.5rem !important; } + .mb-5 { margin-bottom: 1.5rem !important; } + .ml-5 { margin-left: 1.5rem !important; } + .mx-5 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } + .my-5 { margin-bottom: 1.5rem !important; margin-top: 1.5rem !important; } + .m-6 { margin: 3rem !important; } + .mt-6 { margin-top: 3rem !important; } + .mr-6 { margin-right: 3rem !important; } + .mb-6 { margin-bottom: 3rem !important; } + .ml-6 { margin-left: 3rem !important; } + .mx-6 { margin-left: 3rem !important; margin-right: 3rem !important; } + .my-6 { margin-bottom: 3rem !important; margin-top: 3rem !important; } + .m-auto { margin: auto !important; } + .mt-auto { margin-top: auto !important; } + .mr-auto { margin-right: auto !important; } + .mb-auto { margin-bottom: auto !important; } + .ml-auto { margin-left: auto !important; } + .mx-auto { margin-left: auto !important; margin-right: auto !important; } + .my-auto { margin-bottom: auto !important; margin-top: auto !important; } + .p-0 { padding: 0 !important; } + .pt-0 { padding-top: 0 !important; } + .pr-0 { padding-right: 0 !important; } + .pb-0 { padding-bottom: 0 !important; } + .pl-0 { padding-left: 0 !important; } + .px-0 { padding-left: 0 !important; padding-right: 0 !important; } + .py-0 { padding-bottom: 0 !important; padding-top: 0 !important; } + .p-1 { padding: 0.25rem !important; } + .pt-1 { padding-top: 0.25rem !important; } + .pr-1 { padding-right: 0.25rem !important; } + .pb-1 { padding-bottom: 0.25rem !important; } + .pl-1 { padding-left: 0.25rem !important; } + .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } + .py-1 { padding-bottom: 0.25rem !important; padding-top: 0.25rem !important; } + .p-2 { padding: 0.5rem !important; } + .pt-2 { padding-top: 0.5rem !important; } + .pr-2 { padding-right: 0.5rem !important; } + .pb-2 { padding-bottom: 0.5rem !important; } + .pl-2 { padding-left: 0.5rem !important; } + .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } + .py-2 { padding-bottom: 0.5rem !important; padding-top: 0.5rem !important; } + .p-3 { padding: 0.75rem !important; } + .pt-3 { padding-top: 0.75rem !important; } + .pr-3 { padding-right: 0.75rem !important; } + .pb-3 { padding-bottom: 0.75rem !important; } + .pl-3 { padding-left: 0.75rem !important; } + .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } + .py-3 { padding-bottom: 0.75rem !important; padding-top: 0.75rem !important; } + .p-4 { padding: 1rem !important; } + .pt-4 { padding-top: 1rem !important; } + .pr-4 { padding-right: 1rem !important; } + .pb-4 { padding-bottom: 1rem !important; } + .pl-4 { padding-left: 1rem !important; } + .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } + .py-4 { padding-bottom: 1rem !important; padding-top: 1rem !important; } + .p-5 { padding: 1.5rem !important; } + .pt-5 { padding-top: 1.5rem !important; } + .pr-5 { padding-right: 1.5rem !important; } + .pb-5 { padding-bottom: 1.5rem !important; } + .pl-5 { padding-left: 1.5rem !important; } + .px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } + .py-5 { padding-bottom: 1.5rem !important; padding-top: 1.5rem !important; } + .p-6 { padding: 3rem !important; } + .pt-6 { padding-top: 3rem !important; } + .pr-6 { padding-right: 3rem !important; } + .pb-6 { padding-bottom: 3rem !important; } + .pl-6 { padding-left: 3rem !important; } + .px-6 { padding-left: 3rem !important; padding-right: 3rem !important; } + .py-6 { padding-bottom: 3rem !important; padding-top: 3rem !important; } + .p-auto { padding: auto !important; } + .pt-auto { padding-top: auto !important; } + .pr-auto { padding-right: auto !important; } + .pb-auto { padding-bottom: auto !important; } + .pl-auto { padding-left: auto !important; } + .px-auto { padding-left: auto !important; padding-right: auto !important; } + .py-auto { padding-bottom: auto !important; padding-top: auto !important; } + .is-size-1 { font-size: 3rem !important; } + .is-size-2 { font-size: 2.5rem !important; } + .is-size-3 { font-size: 2rem !important; } + .is-size-4 { font-size: 1.5rem !important; } + .is-size-5 { font-size: 1.25rem !important; } + .is-size-6 { font-size: 1rem !important; } + .is-size-7 { font-size: 0.75rem !important; } + @media screen and (max-width: 768px) { .is-size-1-mobile { font-size: 3rem !important; @@ -10478,6 +12145,7 @@ a.has-text-danger-dark:focus { font-size: 0.75rem !important; } } + @media screen and (min-width: 769px), print { .is-size-1-tablet { font-size: 3rem !important; @@ -10507,6 +12175,7 @@ a.has-text-danger-dark:focus { font-size: 0.75rem !important; } } + @media screen and (max-width: 1023px) { .is-size-1-touch { font-size: 3rem !important; @@ -10536,6 +12205,7 @@ a.has-text-danger-dark:focus { font-size: 0.75rem !important; } } + @media screen and (min-width: 1024px) { .is-size-1-desktop { font-size: 3rem !important; @@ -10565,6 +12235,7 @@ a.has-text-danger-dark:focus { font-size: 0.75rem !important; } } + @media screen and (min-width: 1216px) { .is-size-1-widescreen { font-size: 3rem !important; @@ -10594,6 +12265,7 @@ a.has-text-danger-dark:focus { font-size: 0.75rem !important; } } + @media screen and (min-width: 1408px) { .is-size-1-fullhd { font-size: 3rem !important; @@ -10623,492 +12295,599 @@ a.has-text-danger-dark:focus { font-size: 0.75rem !important; } } + .has-text-centered { text-align: center !important; } + .has-text-justified { text-align: justify !important; } + .has-text-left { text-align: left !important; } + .has-text-right { text-align: right !important; } + @media screen and (max-width: 768px) { .has-text-centered-mobile { text-align: center !important; } } + @media screen and (min-width: 769px), print { .has-text-centered-tablet { text-align: center !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-centered-tablet-only { text-align: center !important; } } + @media screen and (max-width: 1023px) { .has-text-centered-touch { text-align: center !important; } } + @media screen and (min-width: 1024px) { .has-text-centered-desktop { text-align: center !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-centered-desktop-only { text-align: center !important; } } + @media screen and (min-width: 1216px) { .has-text-centered-widescreen { text-align: center !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .has-text-centered-widescreen-only { text-align: center !important; } } + @media screen and (min-width: 1408px) { .has-text-centered-fullhd { text-align: center !important; } } + @media screen and (max-width: 768px) { .has-text-justified-mobile { text-align: justify !important; } } + @media screen and (min-width: 769px), print { .has-text-justified-tablet { text-align: justify !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-justified-tablet-only { text-align: justify !important; } } + @media screen and (max-width: 1023px) { .has-text-justified-touch { text-align: justify !important; } } + @media screen and (min-width: 1024px) { .has-text-justified-desktop { text-align: justify !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-justified-desktop-only { text-align: justify !important; } } + @media screen and (min-width: 1216px) { .has-text-justified-widescreen { text-align: justify !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .has-text-justified-widescreen-only { text-align: justify !important; } } + @media screen and (min-width: 1408px) { .has-text-justified-fullhd { text-align: justify !important; } } + @media screen and (max-width: 768px) { .has-text-left-mobile { text-align: left !important; } } + @media screen and (min-width: 769px), print { .has-text-left-tablet { text-align: left !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-left-tablet-only { text-align: left !important; } } + @media screen and (max-width: 1023px) { .has-text-left-touch { text-align: left !important; } } + @media screen and (min-width: 1024px) { .has-text-left-desktop { text-align: left !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-left-desktop-only { text-align: left !important; } } + @media screen and (min-width: 1216px) { .has-text-left-widescreen { text-align: left !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .has-text-left-widescreen-only { text-align: left !important; } } + @media screen and (min-width: 1408px) { .has-text-left-fullhd { text-align: left !important; } } + @media screen and (max-width: 768px) { .has-text-right-mobile { text-align: right !important; } } + @media screen and (min-width: 769px), print { .has-text-right-tablet { text-align: right !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .has-text-right-tablet-only { text-align: right !important; } } + @media screen and (max-width: 1023px) { .has-text-right-touch { text-align: right !important; } } + @media screen and (min-width: 1024px) { .has-text-right-desktop { text-align: right !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .has-text-right-desktop-only { text-align: right !important; } } + @media screen and (min-width: 1216px) { .has-text-right-widescreen { text-align: right !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .has-text-right-widescreen-only { text-align: right !important; } } + @media screen and (min-width: 1408px) { .has-text-right-fullhd { text-align: right !important; } } + .is-capitalized { text-transform: capitalize !important; } + .is-lowercase { text-transform: lowercase !important; } + .is-uppercase { text-transform: uppercase !important; } + .is-italic { font-style: italic !important; } + .is-underlined { text-decoration: underline !important; } + .has-text-weight-light { font-weight: 300 !important; } + .has-text-weight-normal { font-weight: 400 !important; } + .has-text-weight-medium { font-weight: 500 !important; } + .has-text-weight-semibold { font-weight: 600 !important; } + .has-text-weight-bold { font-weight: 700 !important; } + .is-family-primary { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; } + .is-family-secondary { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; } + .is-family-sans-serif { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; } + .is-family-monospace { font-family: monospace !important; } + .is-family-code { font-family: monospace !important; } + .is-block { display: block !important; } + @media screen and (max-width: 768px) { .is-block-mobile { display: block !important; } } + @media screen and (min-width: 769px), print { .is-block-tablet { display: block !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .is-block-tablet-only { display: block !important; } } + @media screen and (max-width: 1023px) { .is-block-touch { display: block !important; } } + @media screen and (min-width: 1024px) { .is-block-desktop { display: block !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-block-desktop-only { display: block !important; } } + @media screen and (min-width: 1216px) { .is-block-widescreen { display: block !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .is-block-widescreen-only { display: block !important; } } + @media screen and (min-width: 1408px) { .is-block-fullhd { display: block !important; } } + .is-flex { display: flex !important; } + @media screen and (max-width: 768px) { .is-flex-mobile { display: flex !important; } } + @media screen and (min-width: 769px), print { .is-flex-tablet { display: flex !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .is-flex-tablet-only { display: flex !important; } } + @media screen and (max-width: 1023px) { .is-flex-touch { display: flex !important; } } + @media screen and (min-width: 1024px) { .is-flex-desktop { display: flex !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-flex-desktop-only { display: flex !important; } } + @media screen and (min-width: 1216px) { .is-flex-widescreen { display: flex !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .is-flex-widescreen-only { display: flex !important; } } + @media screen and (min-width: 1408px) { .is-flex-fullhd { display: flex !important; } } + .is-inline { display: inline !important; } + @media screen and (max-width: 768px) { .is-inline-mobile { display: inline !important; } } + @media screen and (min-width: 769px), print { .is-inline-tablet { display: inline !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .is-inline-tablet-only { display: inline !important; } } + @media screen and (max-width: 1023px) { .is-inline-touch { display: inline !important; } } + @media screen and (min-width: 1024px) { .is-inline-desktop { display: inline !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-inline-desktop-only { display: inline !important; } } + @media screen and (min-width: 1216px) { .is-inline-widescreen { display: inline !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .is-inline-widescreen-only { display: inline !important; } } + @media screen and (min-width: 1408px) { .is-inline-fullhd { display: inline !important; } } + .is-inline-block { display: inline-block !important; } + @media screen and (max-width: 768px) { .is-inline-block-mobile { display: inline-block !important; } } + @media screen and (min-width: 769px), print { .is-inline-block-tablet { display: inline-block !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .is-inline-block-tablet-only { display: inline-block !important; } } + @media screen and (max-width: 1023px) { .is-inline-block-touch { display: inline-block !important; } } + @media screen and (min-width: 1024px) { .is-inline-block-desktop { display: inline-block !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-inline-block-desktop-only { display: inline-block !important; } } + @media screen and (min-width: 1216px) { .is-inline-block-widescreen { display: inline-block !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .is-inline-block-widescreen-only { display: inline-block !important; } } + @media screen and (min-width: 1408px) { .is-inline-block-fullhd { display: inline-block !important; } } + .is-inline-flex { display: inline-flex !important; } + @media screen and (max-width: 768px) { .is-inline-flex-mobile { display: inline-flex !important; } } + @media screen and (min-width: 769px), print { .is-inline-flex-tablet { display: inline-flex !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .is-inline-flex-tablet-only { display: inline-flex !important; } } + @media screen and (max-width: 1023px) { .is-inline-flex-touch { display: inline-flex !important; } } + @media screen and (min-width: 1024px) { .is-inline-flex-desktop { display: inline-flex !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-inline-flex-desktop-only { display: inline-flex !important; } } + @media screen and (min-width: 1216px) { .is-inline-flex-widescreen { display: inline-flex !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .is-inline-flex-widescreen-only { display: inline-flex !important; } } + @media screen and (min-width: 1408px) { .is-inline-flex-fullhd { display: inline-flex !important; } } + .is-hidden { display: none !important; } + .is-sr-only { border: none !important; clip: rect(0, 0, 0, 0) !important; @@ -11119,99 +12898,119 @@ a.has-text-danger-dark:focus { white-space: nowrap !important; width: 0.01em !important; } + @media screen and (max-width: 768px) { .is-hidden-mobile { display: none !important; } } + @media screen and (min-width: 769px), print { .is-hidden-tablet { display: none !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .is-hidden-tablet-only { display: none !important; } } + @media screen and (max-width: 1023px) { .is-hidden-touch { display: none !important; } } + @media screen and (min-width: 1024px) { .is-hidden-desktop { display: none !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-hidden-desktop-only { display: none !important; } } + @media screen and (min-width: 1216px) { .is-hidden-widescreen { display: none !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .is-hidden-widescreen-only { display: none !important; } } + @media screen and (min-width: 1408px) { .is-hidden-fullhd { display: none !important; } } + .is-invisible { visibility: hidden !important; } + @media screen and (max-width: 768px) { .is-invisible-mobile { visibility: hidden !important; } } + @media screen and (min-width: 769px), print { .is-invisible-tablet { visibility: hidden !important; } } + @media screen and (min-width: 769px) and (max-width: 1023px) { .is-invisible-tablet-only { visibility: hidden !important; } } + @media screen and (max-width: 1023px) { .is-invisible-touch { visibility: hidden !important; } } + @media screen and (min-width: 1024px) { .is-invisible-desktop { visibility: hidden !important; } } + @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-invisible-desktop-only { visibility: hidden !important; } } + @media screen and (min-width: 1216px) { .is-invisible-widescreen { visibility: hidden !important; } } + @media screen and (min-width: 1216px) and (max-width: 1407px) { .is-invisible-widescreen-only { visibility: hidden !important; } } + @media screen and (min-width: 1408px) { .is-invisible-fullhd { visibility: hidden !important; } } + /* Bulma Layout */ .hero { align-items: stretch; @@ -11219,40 +13018,50 @@ a.has-text-danger-dark:focus { flex-direction: column; justify-content: space-between; } + .hero .navbar { background: none; } + .hero .tabs ul { border-bottom: none; } + .hero.is-white { background-color: white; color: #0a0a0a; } + .hero.is-white a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-white strong { color: inherit; } + .hero.is-white .title { color: #0a0a0a; } + .hero.is-white .subtitle { color: rgba(10, 10, 10, 0.9); } + .hero.is-white .subtitle a:not(.button), .hero.is-white .subtitle strong { color: #0a0a0a; } + @media screen and (max-width: 1023px) { .hero.is-white .navbar-menu { background-color: white; } } + .hero.is-white .navbar-item, .hero.is-white .navbar-link { color: rgba(10, 10, 10, 0.7); } + .hero.is-white a.navbar-item:hover, .hero.is-white a.navbar-item.is-active, .hero.is-white .navbar-link:hover, @@ -11260,25 +13069,31 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), background-color: #f2f2f2; color: #0a0a0a; } + .hero.is-white .tabs a { color: #0a0a0a; opacity: 0.9; } + .hero.is-white .tabs a:hover { opacity: 1; } + .hero.is-white .tabs li.is-active a { color: white !important; opacity: 1; } + .hero.is-white .tabs.is-boxed a, .hero.is-white .tabs.is-toggle a { color: #0a0a0a; } + .hero.is-white .tabs.is-boxed a:hover, .hero.is-white .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } + .hero.is-white .tabs.is-boxed li.is-active a, .hero.is-white .tabs.is-boxed li.is-active a:hover, .hero.is-white .tabs.is-toggle li.is-active a, @@ -11287,9 +13102,11 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), border-color: #0a0a0a; color: white; } + .hero.is-white.is-bold { background-image: linear-gradient(141deg, #e6e6e6 0%, white 71%, white 100%); } + @media screen and (max-width: 768px) { .hero.is-white.is-bold .navbar-menu { background-image: linear-gradient( @@ -11300,34 +13117,42 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), ); } } + .hero.is-black { background-color: #0a0a0a; color: white; } + .hero.is-black a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-black strong { color: inherit; } + .hero.is-black .title { color: white; } + .hero.is-black .subtitle { color: rgba(255, 255, 255, 0.9); } + .hero.is-black .subtitle a:not(.button), .hero.is-black .subtitle strong { color: white; } + @media screen and (max-width: 1023px) { .hero.is-black .navbar-menu { background-color: #0a0a0a; } } + .hero.is-black .navbar-item, .hero.is-black .navbar-link { color: rgba(255, 255, 255, 0.7); } + .hero.is-black a.navbar-item:hover, .hero.is-black a.navbar-item.is-active, .hero.is-black .navbar-link:hover, @@ -11335,25 +13160,31 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), background-color: black; color: white; } + .hero.is-black .tabs a { color: white; opacity: 0.9; } + .hero.is-black .tabs a:hover { opacity: 1; } + .hero.is-black .tabs li.is-active a { color: #0a0a0a !important; opacity: 1; } + .hero.is-black .tabs.is-boxed a, .hero.is-black .tabs.is-toggle a { color: white; } + .hero.is-black .tabs.is-boxed a:hover, .hero.is-black .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } + .hero.is-black .tabs.is-boxed li.is-active a, .hero.is-black .tabs.is-boxed li.is-active a:hover, .hero.is-black .tabs.is-toggle li.is-active a, @@ -11362,6 +13193,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), border-color: white; color: #0a0a0a; } + .hero.is-black.is-bold { background-image: linear-gradient( 141deg, @@ -11370,6 +13202,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), #181616 100% ); } + @media screen and (max-width: 768px) { .hero.is-black.is-bold .navbar-menu { background-image: linear-gradient( @@ -11380,34 +13213,42 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), ); } } + .hero.is-light { background-color: whitesmoke; color: rgba(0, 0, 0, 0.7); } + .hero.is-light a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-light strong { color: inherit; } + .hero.is-light .title { color: rgba(0, 0, 0, 0.7); } + .hero.is-light .subtitle { color: rgba(0, 0, 0, 0.9); } + .hero.is-light .subtitle a:not(.button), .hero.is-light .subtitle strong { color: rgba(0, 0, 0, 0.7); } + @media screen and (max-width: 1023px) { .hero.is-light .navbar-menu { background-color: whitesmoke; } } + .hero.is-light .navbar-item, .hero.is-light .navbar-link { color: rgba(0, 0, 0, 0.7); } + .hero.is-light a.navbar-item:hover, .hero.is-light a.navbar-item.is-active, .hero.is-light .navbar-link:hover, @@ -11415,25 +13256,31 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), background-color: #e8e8e8; color: rgba(0, 0, 0, 0.7); } + .hero.is-light .tabs a { color: rgba(0, 0, 0, 0.7); opacity: 0.9; } + .hero.is-light .tabs a:hover { opacity: 1; } + .hero.is-light .tabs li.is-active a { color: whitesmoke !important; opacity: 1; } + .hero.is-light .tabs.is-boxed a, .hero.is-light .tabs.is-toggle a { color: rgba(0, 0, 0, 0.7); } + .hero.is-light .tabs.is-boxed a:hover, .hero.is-light .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } + .hero.is-light .tabs.is-boxed li.is-active a, .hero.is-light .tabs.is-boxed li.is-active a:hover, .hero.is-light .tabs.is-toggle li.is-active a, @@ -11442,6 +13289,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), border-color: rgba(0, 0, 0, 0.7); color: whitesmoke; } + .hero.is-light.is-bold { background-image: linear-gradient( 141deg, @@ -11450,6 +13298,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), white 100% ); } + @media screen and (max-width: 768px) { .hero.is-light.is-bold .navbar-menu { background-image: linear-gradient( @@ -11460,34 +13309,42 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), ); } } + .hero.is-dark { background-color: #363636; color: #fff; } + .hero.is-dark a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-dark strong { color: inherit; } + .hero.is-dark .title { color: #fff; } + .hero.is-dark .subtitle { color: rgba(255, 255, 255, 0.9); } + .hero.is-dark .subtitle a:not(.button), .hero.is-dark .subtitle strong { color: #fff; } + @media screen and (max-width: 1023px) { .hero.is-dark .navbar-menu { background-color: #363636; } } + .hero.is-dark .navbar-item, .hero.is-dark .navbar-link { color: rgba(255, 255, 255, 0.7); } + .hero.is-dark a.navbar-item:hover, .hero.is-dark a.navbar-item.is-active, .hero.is-dark .navbar-link:hover, @@ -11495,25 +13352,31 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), background-color: #292929; color: #fff; } + .hero.is-dark .tabs a { color: #fff; opacity: 0.9; } + .hero.is-dark .tabs a:hover { opacity: 1; } + .hero.is-dark .tabs li.is-active a { color: #363636 !important; opacity: 1; } + .hero.is-dark .tabs.is-boxed a, .hero.is-dark .tabs.is-toggle a { color: #fff; } + .hero.is-dark .tabs.is-boxed a:hover, .hero.is-dark .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } + .hero.is-dark .tabs.is-boxed li.is-active a, .hero.is-dark .tabs.is-boxed li.is-active a:hover, .hero.is-dark .tabs.is-toggle li.is-active a, @@ -11522,6 +13385,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), border-color: #fff; color: #363636; } + .hero.is-dark.is-bold { background-image: linear-gradient( 141deg, @@ -11530,6 +13394,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), #46403f 100% ); } + @media screen and (max-width: 768px) { .hero.is-dark.is-bold .navbar-menu { background-image: linear-gradient( @@ -11540,34 +13405,42 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), ); } } + .hero.is-primary { background-color: #00d1b2; color: #fff; } + .hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-primary strong { color: inherit; } + .hero.is-primary .title { color: #fff; } + .hero.is-primary .subtitle { color: rgba(255, 255, 255, 0.9); } + .hero.is-primary .subtitle a:not(.button), .hero.is-primary .subtitle strong { color: #fff; } + @media screen and (max-width: 1023px) { .hero.is-primary .navbar-menu { background-color: #00d1b2; } } + .hero.is-primary .navbar-item, .hero.is-primary .navbar-link { color: rgba(255, 255, 255, 0.7); } + .hero.is-primary a.navbar-item:hover, .hero.is-primary a.navbar-item.is-active, .hero.is-primary .navbar-link:hover, @@ -11575,25 +13448,31 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), background-color: #00b89c; color: #fff; } + .hero.is-primary .tabs a { color: #fff; opacity: 0.9; } + .hero.is-primary .tabs a:hover { opacity: 1; } + .hero.is-primary .tabs li.is-active a { color: #00d1b2 !important; opacity: 1; } + .hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a { color: #fff; } + .hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } + .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, @@ -11602,6 +13481,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), border-color: #fff; color: #00d1b2; } + .hero.is-primary.is-bold { background-image: linear-gradient( 141deg, @@ -11610,6 +13490,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), #00e7eb 100% ); } + @media screen and (max-width: 768px) { .hero.is-primary.is-bold .navbar-menu { background-image: linear-gradient( @@ -11620,34 +13501,42 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), ); } } + .hero.is-link { background-color: #485fc7; color: #fff; } + .hero.is-link a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-link strong { color: inherit; } + .hero.is-link .title { color: #fff; } + .hero.is-link .subtitle { color: rgba(255, 255, 255, 0.9); } + .hero.is-link .subtitle a:not(.button), .hero.is-link .subtitle strong { color: #fff; } + @media screen and (max-width: 1023px) { .hero.is-link .navbar-menu { background-color: #485fc7; } } + .hero.is-link .navbar-item, .hero.is-link .navbar-link { color: rgba(255, 255, 255, 0.7); } + .hero.is-link a.navbar-item:hover, .hero.is-link a.navbar-item.is-active, .hero.is-link .navbar-link:hover, @@ -11655,25 +13544,31 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), background-color: #3a51bb; color: #fff; } + .hero.is-link .tabs a { color: #fff; opacity: 0.9; } + .hero.is-link .tabs a:hover { opacity: 1; } + .hero.is-link .tabs li.is-active a { color: #485fc7 !important; opacity: 1; } + .hero.is-link .tabs.is-boxed a, .hero.is-link .tabs.is-toggle a { color: #fff; } + .hero.is-link .tabs.is-boxed a:hover, .hero.is-link .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } + .hero.is-link .tabs.is-boxed li.is-active a, .hero.is-link .tabs.is-boxed li.is-active a:hover, .hero.is-link .tabs.is-toggle li.is-active a, @@ -11682,6 +13577,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), border-color: #fff; color: #485fc7; } + .hero.is-link.is-bold { background-image: linear-gradient( 141deg, @@ -11690,6 +13586,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), #5658d2 100% ); } + @media screen and (max-width: 768px) { .hero.is-link.is-bold .navbar-menu { background-image: linear-gradient( @@ -11700,34 +13597,42 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), ); } } + .hero.is-info { background-color: #3e8ed0; color: #fff; } + .hero.is-info a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-info strong { color: inherit; } + .hero.is-info .title { color: #fff; } + .hero.is-info .subtitle { color: rgba(255, 255, 255, 0.9); } + .hero.is-info .subtitle a:not(.button), .hero.is-info .subtitle strong { color: #fff; } + @media screen and (max-width: 1023px) { .hero.is-info .navbar-menu { background-color: #3e8ed0; } } + .hero.is-info .navbar-item, .hero.is-info .navbar-link { color: rgba(255, 255, 255, 0.7); } + .hero.is-info a.navbar-item:hover, .hero.is-info a.navbar-item.is-active, .hero.is-info .navbar-link:hover, @@ -11735,25 +13640,31 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), background-color: #3082c5; color: #fff; } + .hero.is-info .tabs a { color: #fff; opacity: 0.9; } + .hero.is-info .tabs a:hover { opacity: 1; } + .hero.is-info .tabs li.is-active a { color: #3e8ed0 !important; opacity: 1; } + .hero.is-info .tabs.is-boxed a, .hero.is-info .tabs.is-toggle a { color: #fff; } + .hero.is-info .tabs.is-boxed a:hover, .hero.is-info .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } + .hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, @@ -11762,6 +13673,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), border-color: #fff; color: #3e8ed0; } + .hero.is-info.is-bold { background-image: linear-gradient( 141deg, @@ -11770,6 +13682,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), #4d83db 100% ); } + @media screen and (max-width: 768px) { .hero.is-info.is-bold .navbar-menu { background-image: linear-gradient( @@ -11780,34 +13693,42 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), ); } } + .hero.is-success { background-color: #48c78e; color: #fff; } + .hero.is-success a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-success strong { color: inherit; } + .hero.is-success .title { color: #fff; } + .hero.is-success .subtitle { color: rgba(255, 255, 255, 0.9); } + .hero.is-success .subtitle a:not(.button), .hero.is-success .subtitle strong { color: #fff; } + @media screen and (max-width: 1023px) { .hero.is-success .navbar-menu { background-color: #48c78e; } } + .hero.is-success .navbar-item, .hero.is-success .navbar-link { color: rgba(255, 255, 255, 0.7); } + .hero.is-success a.navbar-item:hover, .hero.is-success a.navbar-item.is-active, .hero.is-success .navbar-link:hover, @@ -11815,25 +13736,31 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), background-color: #3abb81; color: #fff; } + .hero.is-success .tabs a { color: #fff; opacity: 0.9; } + .hero.is-success .tabs a:hover { opacity: 1; } + .hero.is-success .tabs li.is-active a { color: #48c78e !important; opacity: 1; } + .hero.is-success .tabs.is-boxed a, .hero.is-success .tabs.is-toggle a { color: #fff; } + .hero.is-success .tabs.is-boxed a:hover, .hero.is-success .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } + .hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, @@ -11842,6 +13769,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), border-color: #fff; color: #48c78e; } + .hero.is-success.is-bold { background-image: linear-gradient( 141deg, @@ -11850,6 +13778,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), #56d2af 100% ); } + @media screen and (max-width: 768px) { .hero.is-success.is-bold .navbar-menu { background-image: linear-gradient( @@ -11860,34 +13789,42 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), ); } } + .hero.is-warning { background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } + .hero.is-warning a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-warning strong { color: inherit; } + .hero.is-warning .title { color: rgba(0, 0, 0, 0.7); } + .hero.is-warning .subtitle { color: rgba(0, 0, 0, 0.9); } + .hero.is-warning .subtitle a:not(.button), .hero.is-warning .subtitle strong { color: rgba(0, 0, 0, 0.7); } + @media screen and (max-width: 1023px) { .hero.is-warning .navbar-menu { background-color: #ffe08a; } } + .hero.is-warning .navbar-item, .hero.is-warning .navbar-link { color: rgba(0, 0, 0, 0.7); } + .hero.is-warning a.navbar-item:hover, .hero.is-warning a.navbar-item.is-active, .hero.is-warning .navbar-link:hover, @@ -11895,25 +13832,31 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), background-color: #ffd970; color: rgba(0, 0, 0, 0.7); } + .hero.is-warning .tabs a { color: rgba(0, 0, 0, 0.7); opacity: 0.9; } + .hero.is-warning .tabs a:hover { opacity: 1; } + .hero.is-warning .tabs li.is-active a { color: #ffe08a !important; opacity: 1; } + .hero.is-warning .tabs.is-boxed a, .hero.is-warning .tabs.is-toggle a { color: rgba(0, 0, 0, 0.7); } + .hero.is-warning .tabs.is-boxed a:hover, .hero.is-warning .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } + .hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, @@ -11922,6 +13865,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), border-color: rgba(0, 0, 0, 0.7); color: #ffe08a; } + .hero.is-warning.is-bold { background-image: linear-gradient( 141deg, @@ -11930,6 +13874,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), #fff6a3 100% ); } + @media screen and (max-width: 768px) { .hero.is-warning.is-bold .navbar-menu { background-image: linear-gradient( @@ -11940,34 +13885,42 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), ); } } + .hero.is-danger { background-color: #f14668; color: #fff; } + .hero.is-danger a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-danger strong { color: inherit; } + .hero.is-danger .title { color: #fff; } + .hero.is-danger .subtitle { color: rgba(255, 255, 255, 0.9); } + .hero.is-danger .subtitle a:not(.button), .hero.is-danger .subtitle strong { color: #fff; } + @media screen and (max-width: 1023px) { .hero.is-danger .navbar-menu { background-color: #f14668; } } + .hero.is-danger .navbar-item, .hero.is-danger .navbar-link { color: rgba(255, 255, 255, 0.7); } + .hero.is-danger a.navbar-item:hover, .hero.is-danger a.navbar-item.is-active, .hero.is-danger .navbar-link:hover, @@ -11975,25 +13928,31 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), background-color: #ef2e55; color: #fff; } + .hero.is-danger .tabs a { color: #fff; opacity: 0.9; } + .hero.is-danger .tabs a:hover { opacity: 1; } + .hero.is-danger .tabs li.is-active a { color: #f14668 !important; opacity: 1; } + .hero.is-danger .tabs.is-boxed a, .hero.is-danger .tabs.is-toggle a { color: #fff; } + .hero.is-danger .tabs.is-boxed a:hover, .hero.is-danger .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } + .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, @@ -12002,6 +13961,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), border-color: #fff; color: #f14668; } + .hero.is-danger.is-bold { background-image: linear-gradient( 141deg, @@ -12010,6 +13970,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), #f7595f 100% ); } + @media screen and (max-width: 768px) { .hero.is-danger.is-bold .navbar-menu { background-image: linear-gradient( @@ -12020,40 +13981,49 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), ); } } + .hero.is-small .hero-body { padding: 1.5rem; } + @media screen and (min-width: 769px), print { .hero.is-medium .hero-body { padding: 9rem 4.5rem; } } + @media screen and (min-width: 769px), print { .hero.is-large .hero-body { padding: 18rem 6rem; } } + .hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body, .hero.is-fullheight-with-navbar .hero-body { align-items: center; display: flex; } + .hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container, .hero.is-fullheight-with-navbar .hero-body > .container { flex-grow: 1; flex-shrink: 1; } + .hero.is-halfheight { min-height: 50vh; } + .hero.is-fullheight { min-height: 100vh; } + .hero-video { overflow: hidden; } + .hero-video video { left: 50%; min-height: 100%; @@ -12062,17 +14032,21 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), top: 50%; transform: translate3d(-50%, -50%, 0); } + .hero-video.is-transparent { opacity: 0.3; } + @media screen and (max-width: 768px) { .hero-video { display: none; } } + .hero-buttons { margin-top: 1.5rem; } + @media screen and (max-width: 768px) { .hero-buttons .button { display: flex; @@ -12082,6 +14056,7 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), margin-bottom: 0.75rem; } } + @media screen and (min-width: 769px), print { .hero-buttons { display: flex; @@ -12092,28 +14067,34 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), margin-right: 1.5rem; } } + .hero-head, .hero-foot { flex-grow: 0; flex-shrink: 0; } + .hero-body { flex-grow: 1; flex-shrink: 0; padding: 3rem 1.5rem; } + @media screen and (min-width: 769px), print { .hero-body { padding: 3rem 3rem; } } + .section { padding: 3rem 1.5rem; } + .footer { background-color: #fafafa; padding: 3rem 1.5rem 6rem; } + /** custom */ @@ -12130,10 +14111,12 @@ main nav { top: 0; width: 100%; } + .burger-menu { float: left; width: 150px; } + .icon-burger { cursor: pointer; float: left; @@ -12141,11 +14124,13 @@ main nav { margin-top: 0.3rem; width: 40px; } + .icon-burger .line { border-top: 2px solid #fff; display: block; margin-bottom: 6px; } + .nav-main { color: #fffdfc; height: 54px; @@ -12153,11 +14138,13 @@ main nav { position: fixed; width: 100vw; position: fixed; - left:0; + left: 0; } + .fixed-nav { z-index: 30; } + #hand { background: url("/img/hand 1.png") center; background-size: cover; @@ -12168,19 +14155,23 @@ main nav { width: 100vw; z-index: 0; } + #main_title_container { backdrop-filter: blur(3px); position: absolute; top: 0; z-index: 2; } + #cover { background: url("/img/BG 1.png") center no-repeat; background-size: cover; } + #cover .title-container { text-align: center; } + #cover-handle { float: left; height: 25vh; @@ -12204,6 +14195,7 @@ main nav { text-align: center; z-index: 2; } + #cover .button { backdrop-filter: blur(3px); background: linear-gradient( @@ -12226,6 +14218,7 @@ main nav { top: 16vh; width: 150px; } + /** css JS and html made by B. Lemoine - cipherbliss.com @@ -12238,29 +14231,34 @@ main nav { position: relative; top: -95vh; } + #main_title { background: url("/img/sesame.png") no-repeat; background-size: contain; box-sizing: border-box; - font-weight:500; + font-weight: 500; min-height: 35vw; margin: 0 auto; position: relative; top: 4rem; width: 95vw; } + #main_title_container h2 { - margin-top: 5vh; + margin-top: 50vw; } + #welcome { background: #000; position: absolute; text-shadow: 0 0 1rem #333; } + #welcome img { position: absolute; } + #welcome h2 { color: #f9f3f1; font-size: 8em; @@ -12274,19 +14272,23 @@ main nav { z-index: 2; } + #welcome .color-emphasis { color: #1e33da; } + #welcome .phone-container { background: url("/img/section2_phone.png"); background-size: cover; } + /************ phones ************/ .phones-land { float: left; position: static; z-index: -1; } + #phone-watches-1 { height: 690px; left: -137px; @@ -12294,6 +14296,7 @@ main nav { top: 1531px; width: 345px; } + #phone-watches-2 { filter: blur(2px); height: 176px; @@ -12301,6 +14304,7 @@ main nav { top: 470px; width: 88px; } + #phone-watches-3 { filter: blur(4px); height: 342px; @@ -12308,6 +14312,7 @@ main nav { top: 475px; width: 171px; } + #phone-watches-4 { filter: blur(6px); height: 550px; @@ -12315,6 +14320,7 @@ main nav { top: 523px; width: 275px; } + #open { box-sizing: border-box; color: rgba(248, 243, 241, 0.1); @@ -12329,33 +14335,40 @@ main nav { text-align: center; top: 88vh; } + #open .text { color: #fff; margin-bottom: 400px; } + #open img { - height:20vh; + height: 20vh; max-width: 90vw; position: relative; - top:0; + top: 0; } -#unlock_white{ + +#unlock_white { opacity: 0; margin-top: -4em; } + #open-handle { float: left; height: 20vh; } + #content { height: 100vh; min-height: 200px; top: 50vh; position: relative; } + #content h2 { margin-top: 33vh; } + #content_all { color: #fffdfc; padding-top: 50vh; @@ -12363,6 +14376,7 @@ main nav { top: 0; width: 120%; } + #content_all_img { background: url("/img/bg_content.png"); background-size: cover; @@ -12372,6 +14386,7 @@ main nav { margin-top: -50vh; position: relative; } + #content_all .columns { font-size: 100px; margin: 0 auto; @@ -12379,6 +14394,7 @@ main nav { position: relative; top: -133vh; } + #content_all .text { font-size: 18px; font-weight: 400; @@ -12387,24 +14403,29 @@ main nav { padding-top: 1vh; text-align: left; } + #content_all h2 { font-size: 100px !important; letter-spacing: -0.04em; line-height: 90px; text-shadow: 0 0 1rem #333; } + #content_all .text, .text-title { text-shadow: 0 0 1rem #333; } + #content_all .columns > .column:nth-of-type(1) { font-size: 1em; letter-spacing: -0.04em; line-height: 90px; } + #content_all .color-emphasis { color: #1e33da; } + #content_first { backdrop-filter: blur(5px); color: #e77064; @@ -12428,6 +14449,7 @@ main nav { max-width: 100vw; width: 100%; } + #content_second { width: 50%; right: -20vw; @@ -12448,6 +14470,7 @@ main nav { max-width: 100vw; width: 100%; } + .flip-handle { background: transparent; height: 20vh; @@ -12455,35 +14478,42 @@ main nav { top: -20vh; width: 2vw; } + .flip-container { color: #fffdfc; padding-top: 15vh; transform-origin: right; } + .flip-container.flip-from-left { transform-origin: left; } + .flip-container + .flip-container { height: 90vh; margin-top: -15vh; min-height: 91vh; padding-top: 0; } + .flip-container .container-text { left: 30vw; position: relative; text-align: left; width: 50%; } + .flip-container.flip-from-left .container-text { left: 613px; width: 320px; } + .flip-container .color-emphasis { color: #1e33da; margin: 0 auto; max-width: 760px; } + .flip-container .text-title { font-size: 60px; font-weight: 600; @@ -12492,6 +14522,7 @@ main nav { margin-bottom: 20px; margin-top: 158px; } + .flip-container .text-description { font-size: 18px; font-weight: 400; @@ -12499,6 +14530,7 @@ main nav { margin-bottom: 20px; width: 380px; } + .flip-container .phone-container { background: rgba(225, 196, 183, 0.2); border-color: rgba(255, 255, 255, 0.4); @@ -12511,19 +14543,23 @@ main nav { top: -540px; width: 342px; } + .flip-container.flip-from-left .phone-container { left: 183px; top: -540px; } + .flip-container .phone-container img { height: auto; margin-top: 70px; width: 318px; } + .flip-container .call-to-action:hover { background: linear-gradient(45deg, #c93397, rebeccapurple); transition: all ease-in 0.25s; } + .flip-container .call-to-action { align-items: center; background: transparent; @@ -12548,19 +14584,23 @@ main nav { /*border-width: 5px;*/ /*border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/ } + #content-2 { margin-top: 50vh; } + #flipping_zone { margin-top: -100vh; position: relative; } + /******** phone base *********/ #popover { background: url("/img/bg_pink.png") no-repeat; background-position: center; background-size: cover; } + #popover .dark-emphasis { color: #3b3b49; font-family: "GT Walsheim Pro"; @@ -12571,11 +14611,13 @@ main nav { /* identical to box height, or 66px */ line-height: 110%; } + .text-grey { font-size: 18px; font-weight: 400; line-height: 26px; } + .slider-screen .text { left: 55vw; position: relative; @@ -12583,13 +14625,16 @@ main nav { top: -30%; width: 400px; } + .slider-screen .text-title { margin-bottom: 2rem; } + .phone-container { border-radius: 1rem; width: 411px; } + .phone-container .top { background: url("/img/phone_rectangle_top.jpg") no-repeat center; border-top-left-radius: 1rem; @@ -12597,6 +14642,7 @@ main nav { border-top-right-radius: 1rem; height: 60px; } + .phone-container .bottom { background: url("/img/phone_rectangle_bottom.jpg") no-repeat center; border-bottom-left-radius: 2rem; @@ -12605,12 +14651,14 @@ main nav { position: relative; top: 676.5px; } + .phone-container.transparent { background: rgba(248, 243, 241, 0.1); border-radius: 70px; height: 700px; width: 350px; } + .slider-screen .phone-container { background: url("/img/phone_cream.png") no-repeat; background-position: center; @@ -12621,12 +14669,14 @@ main nav { top: 20vh; width: 411px; } + .close-button { float: right; position: relative; right: 40px; top: 56px; } + .arrow-left, .arrow-right { backdrop-filter: blur(5px); @@ -12643,42 +14693,50 @@ main nav { padding: 1.5rem; transform: matrix(-1, 0, 0, 1, 0, 0); } + .arrow-right { float: right; position: relative; top: 50vh; transform: rotate(0deg); } + .arrow-left { float: left; left: 40px; position: relative; top: 50vh; } + .bullets { left: 0; position: relative; top: 30vh; } + .bullets img { cursor: pointer; } + #portfolio { background: url("/img/bg_grey.jpg") no-repeat; background-position: center; background-size: cover; color: white; } + #popover .color-emphasis, #portfolio .color-emphasis { color: #e77064; font-weight: 600; margin-bottom: 20px; } + #portfolio .phone-container { background: url("/img/phone_shoes.png"); height: 776px; } + #coming_soon { background: #2b74b1; z-index: 10; @@ -12688,174 +14746,7 @@ main nav { margin-top: 10vw; padding-top: 50vh; } -@media screen and (max-width: 1023px) { - #main_title_container h2 { - margin-top: 5vh; - } - #main_title { - top: 15rem; - height: 25vh; - } - - #cover .button { - top: 7vh; - } - - #content_all h2, - #welcome h2 { - font-size: 6em; - line-height: 1em; - text-align: left; - } - - - #content_all .columns { - top: -145vh; - width: 55vw; - } - .columns { - display: block !important; - } - .column { - width: 100% !important; - } - - #open { - top: 80vh; - } - /** - flipping part - */ - #flipping_zone { - margin-top: -100vh; - position: static; - } - .flip-container { - position: relative; - } - - .flip-container + .flip-container { - margin-top: 40vh; - } - .flip-container .container-text { - z-index: 1; - left: 33vw; - } - .flip-container .text-title { - margin-top: 0; - } - - .flip-container .phone-container { - left: 42vw; - top: 5vh; - } - .flip-container.flip-from-left .container-text { - left: 33vw; - top: 5vh; - } - .flip-container.flip-from-left .phone-container { - left: 25vw; - top: 10vh; - } - - #content-4 { - margin-top: 25vh; - } - #content-5 { - margin-top: 15vh; - } - - #popover { - margin-top: 100vh; - } - #popover .phone-container, #portfolio .phone-container { - width: 39vw; - } - /** - exemples sliders - */ - .slider-screen .text-title { - margin-top: 1em; - } - .slider-screen .text, - .slider-screen .phone-container { - position: relative; - width: 412px; - left: 25vw; - top: 5vh; - } - .bullets { - top: 28em; - } - .arrow-left, - .arrow-right { - top: 60vh; - } - .slider-screen { - min-height: 100vh; - } - #popover, #portfolio { - min-height: 200vh; - } - #popover .phone-container, #portfolio .phone-container{ - width: 50vw; - } - -} -@media screen and (max-width: 35em) { - #main_title { - margin-top: 5vh; - } - #main_title_container h2 { - margin-top: 15vh; - } - - #content_all h2, - #welcome h2 { - font-size: 4rem !important; - } - #content_all .text { - padding-right: 0; - } - .container-text-md { - width: auto; - } - #content_all .columns { - width: 100%; - margin: 1rem; - } - .flip-container .container-text { - width: 100%; - left: 5vw; - } - .flip-container .phone-container { - position: static; - margin: 4rem auto; - } - .flip-container.flip-from-left .container-text { - left: 5vw; - } - .flip-container .phone-container { - margin-top: 7rem; - } - .flip-container .text-description { - max-width: 90vw; - } - - #content-4 { - margin-top: 50vh; - } - #content-5 { - margin-top: 45vh; - } - - .slider-screen .text, - .slider-screen .phone-container { - left: 5vw; - max-width: 90vw; - } -} body { background: #fff; padding-bottom: 50vh; @@ -12864,12 +14755,14 @@ body { margin: 0; padding: 0; } + main section { font-family: "GT Walsheim Pro", Arial; height: 100vh; min-height: 100vh; width: 100vw; } + main section h2 { color: #fffdfc; font-size: 60px; @@ -12878,27 +14771,34 @@ main section h2 { letter-spacing: -0.04em; line-height: 110%; } + main img { max-width: 100vw; } + main .credits { margin-top: 10vh; padding-bottom: 10vh; } + #sprint_4 { background: #fff; } + .primary-color { - color: #1E33DA; + color: #1e33da; } + .secondary-color { - color: #E77064; + color: #e77064; } + .dark-color { color: #020225; } + #transactionnal_webdesign { - background: url("/img/header_webdesign.png"), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%); + background: url("/img/header_webdesign.png"), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 74.66%); background-size: cover; font-family: "GT Walsheim Pro"; color: #00001f; @@ -12906,9 +14806,11 @@ main .credits { position: static; min-height: 150vh; } + #transactionnal_webdesign .columns { max-width: 60vw; } + #transactionnal_webdesign .title { height: 109px; font-style: normal; @@ -12925,6 +14827,7 @@ main .credits { flex-grow: 0; padding-top: 10rem; } + #transactionnal_webdesign .description { color: rgba(231, 112, 100, 0.8); font-weight: 500; @@ -12934,36 +14837,43 @@ main .credits { margin-bottom: 140px; padding-top: 10rem; } + #transactionnal_webdesign .color-emphasis { color: #1e33da; } + #transactionnal_webdesign .sub-title { font-weight: 600; font-size: 7rem; line-height: 90px; letter-spacing: -0.04em; } + #transactionnal_webdesign .columns { text-align: left; margin: 0 auto; width: 80%; } + #transactionnal_webdesign .second { font-weight: 400; font-size: 1.5rem; line-height: 130%; } + #carry { position: static; background: white; padding-top: 20vh; min-height: 130rem; } + #carry .title { margin-bottom: 46px; font-size: 60px; line-height: 110%; } + #carry .description { margin-top: 270px; font-style: normal; @@ -12974,18 +14884,22 @@ main .credits { letter-spacing: -0.06em; color: rgba(30, 51, 218, 0.15); } + #carry .description2 { font-weight: 600; font-size: 60px; line-height: 110%; text-align: center; } + #carry .color-emphasis { color: #1e33da; } + #carry .bubbles { margin-top: -65vh; } + #carry .bubbles p { position: relative; padding: 7.6rem 4rem; @@ -12998,6 +14912,7 @@ main .credits { height: 30vh; mix-blend-mode: darken; } + #carry .bubbles p:nth-of-type(1) { background: url("/img/Ellipse 777.5.png") no-repeat; padding-left: 3.7rem; @@ -13006,6 +14921,7 @@ main .credits { left: 70%; top: -100rem; } + #carry .bubbles p:nth-of-type(2) { background: url("/img/Ellipse 777.4.png") no-repeat; width: 308px; @@ -13013,6 +14929,7 @@ main .credits { left: 60%; top: -100rem; } + #carry .bubbles p:nth-of-type(3) { background: url("/img/Ellipse 777.5.png") no-repeat; width: 315px; @@ -13023,6 +14940,7 @@ main .credits { padding: 8rem 4rem; top: -100rem; } + #carry .bubbles p:nth-of-type(4) { background: url("/img/Ellipse 777.5.png") no-repeat; @@ -13031,6 +14949,7 @@ main .credits { left: 10vw; top: -143rem; } + #carry .gradient-bg, #carry .gradient-bg-yellow { position: relative; @@ -13038,15 +14957,17 @@ main .credits { height: 58vh; left: 14vw; top: 10em; - background: radial-gradient(50% 50% at 50% 50%, #FFBA99 0%, rgba(236, 222, 168, 0.96) 4.17%, rgba(163, 173, 255, 0) 100%); + background: radial-gradient(50% 50% at 50% 50%, #ffba99 0%, rgba(236, 222, 168, 0.96) 4.17%, rgba(163, 173, 255, 0) 100%); opacity: 0.5; transform: rotate(197.68deg); } + #carry .gradient-bg { top: -30em; - background: radial-gradient(50% 50% at 50% 50%, #1E33DA 0%, rgba(30, 51, 218, 0.958333) 4.17%, rgba(30, 51, 218, 0) 100%); + background: radial-gradient(50% 50% at 50% 50%, #1e33da 0%, rgba(30, 51, 218, 0.958333) 4.17%, rgba(30, 51, 218, 0) 100%); transform: rotate(-17.32deg); } + #carry .computer-block { background: url("/img/Macbook_color 1.png") no-repeat center; position: relative; @@ -13056,20 +14977,22 @@ main .credits { top: -97em; } - #kyc { font-family: "GT Walsheim Pro"; background: white; padding-top: 25vh; min-height: 150vh; } + #kyc .text-content { max-width: 37rem; text-align: left; } + #kyc .left-column { padding-left: 5vw; } + #kyc .title { margin-top: 250px; font-style: normal; @@ -13079,6 +15002,7 @@ main .credits { /* or 90% */ letter-spacing: -0.04em; } + #kyc .description2 { font-weight: 500; font-size: 60px; @@ -13090,12 +15014,14 @@ main .credits { width: 100%; display: block; } + #kyc .description { font-weight: 500; font-size: 60px; line-height: 110%; letter-spacing: -0.04em; } + #kyc .button { font-weight: 400; font-size: 18px; @@ -13114,32 +15040,38 @@ main .credits { min-width: 15rem; float: left; color: #020225; - border-color: #E77064; + border-color: #e77064; } + #kyc .color-emphasis { - color: #1E33DA; + color: #1e33da; } + #kyc .fat-text { font-style: normal; font-weight: 600; font-size: 30px; line-height: 35px; text-transform: uppercase; - color: #FFFDFC; + color: #fffdfc; } + #kyc .bubbles { margin-top: -60vw; } + #kyc .bubbles .bubble { position: relative; text-align: left; float: left; } + #kyc .bubbles .bubble span { margin-left: 2rem; float: left; width: 20rem; } + #kyc .bubbles .bubble:nth-of-type(1) { width: 25rem; height: 23rem; @@ -13147,9 +15079,11 @@ main .credits { top: -34rem; background: url("/img/bubble_1.png") no-repeat; } + #kyc .bubbles .bubble:nth-of-type(1) span { padding: 6rem 2.5rem; } + #kyc .bubbles .bubble:nth-of-type(2) { background: url("/img/bubble_2.png") no-repeat; left: 34vw; @@ -13158,10 +15092,12 @@ main .credits { height: 35rem; background-size: contain; } + #kyc .bubbles .bubble:nth-of-type(2) span { margin-top: 13rem; margin-left: 5rem; } + #kyc .bubbles .bubble:nth-of-type(3) { background: url("/img/bubble_3.png") no-repeat; left: -27vw; @@ -13170,17 +15106,20 @@ main .credits { height: 35rem; background-size: contain; } + #kyc .bubbles .bubble:nth-of-type(3) span { margin-top: 10rem; margin-left: 5rem; width: 15rem; } + #kyc .small-bubble { background: url("/img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n008.png") no-repeat center; background-size: contain; position: relative; margin-top: 0; } + #kyc .small-bubble:nth-of-type(1) { filter: blur(6.5px); width: 137px; @@ -13188,6 +15127,7 @@ main .credits { left: 316px; top: 400px; } + #kyc .small-bubble:nth-of-type(2) { filter: blur(2px); width: 203px; @@ -13195,6 +15135,7 @@ main .credits { left: 1343px; top: 422px; } + #kyc .small-bubble:nth-of-type(3) { filter: blur(5px); width: 141px; @@ -13202,6 +15143,7 @@ main .credits { left: 865px; top: 918px; } + #kyc .small-bubble:nth-of-type(4) { filter: blur(1px); width: 77px; @@ -13209,30 +15151,37 @@ main .credits { left: 490px; top: 1129px; } + #kyc .small-bubble:nth-of-type(5) { width: 288px; height: 360px; left: 1124px; - top: 10vhpx; + top: 10vh; } + @media screen and (max-width: 1300px) { #kyc .small-bubble:nth-of-type(1) { margin-top: 14rem; } + #kyc .bubbles .bubble { position: static; } + #kyc .bubbles .bubble:nth-of-type(1) { margin-left: 12rem; } + #kyc .bubbles .bubble:nth-of-type(2) { margin-left: 5rem; } + #kyc .bubbles .bubble:nth-of-type(3) { margin-left: 34%; margin-top: 0; } } + #china { background-color: #141373; height: 100vh; @@ -13241,6 +15190,7 @@ main .credits { border-radius: 5rem; overflow: hidden; } + #china .line { background: url(/img/line.png) no-repeat; position: relative; @@ -13253,6 +15203,7 @@ main .credits { rotate: 5deg; background-size: contain; } + #china .title { padding-top: 10rem; margin-bottom: 2rem; @@ -13265,6 +15216,7 @@ main .credits { letter-spacing: -0.04em; color: white; } + #china .description { font-family: "GT Walsheim Pro"; font-style: normal; @@ -13275,6 +15227,7 @@ main .credits { text-transform: uppercase; margin-bottom: 3rem; } + #china .columns { position: absolute; margin-top: -10vh; @@ -13282,6 +15235,7 @@ main .credits { width: 100vw; z-index: 10; } + #china .block-item { color: white; font-family: "GT Walsheim Pro"; @@ -13292,74 +15246,59 @@ main .credits { text-align: left; background-size: contain; } + #china .block-items .block-item .bottom { margin-left: 2rem; } + #china .block-items .block-item:nth-of-type(1) { background: url("/img/block_pillar_1.png") no-repeat; background-size: contain; margin-top: 2rem; } + #china .block-items .block-item:nth-of-type(1) .bottom { margin-top: 21rem; } + #china .block-items .block-item:nth-of-type(2) { background: url("/img/block_pillar_2.png") no-repeat; background-size: contain; margin-top: 8rem; } + #china .block-items .block-item:nth-of-type(2) .bottom { margin-top: 22rem; } + #china .block-items .block-item:nth-of-type(3) { background: url("/img/block_pillar_3.png") no-repeat; background-size: contain; margin-top: 10rem; } + #china .block-items .block-item:nth-of-type(3) .bottom { margin-top: 25rem; } + #china .block-items .block-item:nth-of-type(4) { background: url("/img/block_pillar_4.png") no-repeat; background-size: contain; margin-top: 1rem; } + #china .block-items .block-item:nth-of-type(4) .bottom { margin-top: 24rem; } + #china .show-on-medium { display: block; } + #china .hide-on-medium { display: none; } -@media screen and (max-width: 1300px) { - #china .show-on-medium { - display: none; - } - #china .hide-on-medium { - display: block; - } - #china .line { - width: 62vw; - top: 10vh; - } - #china .block-item { - margin-bottom: 2rem; - text-align: center; - } - #china .top { - font-size: 4rem; - margin-bottom: 2rem; - } - #china .bottom { - font-size: 3rem; - } - #china .cols .columns { - text-align: center; - display: block; - } -} + #we_develop { height: 200vh; width: 100vw; @@ -13369,6 +15308,7 @@ main .credits { background-color: #fff; text-align: center; } + #we_develop .title { padding-top: 26rem; padding-bottom: 2rem; @@ -13382,6 +15322,7 @@ main .credits { max-width: 54rem; margin: 2rem auto; } + #we_develop .quick, #we_develop .long_term { font-family: "GT Walsheim"; font-style: normal; @@ -13389,11 +15330,13 @@ main .credits { font-size: 24px; line-height: 150%; } + #we_develop .quick { position: absolute; left: 104px; top: 70rem; } + #we_develop .long_term { font-family: "GT Walsheim"; font-weight: 700; @@ -13403,6 +15346,7 @@ main .credits { margin-right: 6rem; margin-top: -40rem; } + #we_develop .light-text { margin-top: -20rem; font-family: "GT Walsheim Pro"; @@ -13412,10 +15356,11 @@ main .credits { line-height: 100%; text-align: center; letter-spacing: -0.04em; - color: #B62F22; + color: #b62f22; opacity: 0.2; filter: blur(2px); } + #we_develop .phone-container-2 { margin: 0 auto; background: blue; @@ -13427,6 +15372,7 @@ main .credits { border-radius: 70px; z-index: 20; } + #we_develop .picture { margin-left: 5px; height: 820px; @@ -13435,6 +15381,7 @@ main .credits { background-size: contain; overflow: hidden; } + #we_develop .line { background: url("/img/line.png"); position: absolute; @@ -13446,16 +15393,19 @@ main .credits { float: left; background-size: contain; } + #we_develop .container-arrows { margin: 0 auto; width: 30rem; } + #we_develop .container-arrows img { margin-top: 1.25rem; margin-left: 0; } + #we_develop .circle { - border: solid 2px #E77064; + border: solid 2px #e77064; border-radius: 100%; height: 4rem; width: 4rem; @@ -13463,22 +15413,28 @@ main .credits { top: 67rem; background: white; } + #we_develop .circle.circle-right { right: 31vw; } + #we_develop .circle.circle-left { right: 66vw; } + #we_develop .arrow-right-2 { position: absolute; } + #we_develop .rotated { transform: rotate(180deg); } + #full_creative { background: white; min-height: 120vh; } + #full_creative .title { font-family: "GT Walsheim Pro"; font-weight: 600; @@ -13489,9 +15445,11 @@ main .credits { padding-top: 10rem; margin-bottom: 5rem; } + #full_creative .columns { text-align: left; } + #full_creative .sub-title { font-family: "GT Walsheim Pro"; font-style: normal; @@ -13502,9 +15460,11 @@ main .credits { color: #020225; margin-bottom: 1rem; } + #full_creative .sub-title + .sub-title { margin-top: 2rem; } + #full_creative p { font-weight: 400; font-size: 16px; @@ -13512,11 +15472,11 @@ main .credits { margin-bottom: 4rem; padding-right: 2rem; } + #full_creative img { max-width: 80vw; } - #our_team { background: white; padding-top: 5rem; @@ -13524,6 +15484,7 @@ main .credits { text-align: left; min-height: 150vh; } + #our_team .title { font-weight: 500; font-size: 270px; @@ -13532,6 +15493,7 @@ main .credits { text-align: left; margin-bottom: 6rem; } + #our_team .sub-title { font-weight: 500; font-size: 60px; @@ -13541,6 +15503,7 @@ main .credits { margin-top: 2rem; margin-bottom: 2rem; } + #our_team img { margin-bottom: 1rem; width: 100%; @@ -13548,16 +15511,17 @@ main .credits { padding-left: 0; margin-left: 0; } + #our_team .name { margin-top: 1rem; margin-bottom: 2rem; } + #our_team .sub-category { padding: 0 2em; background: white; } - #china_achievements { margin-top: 30rem; background: white; @@ -13565,38 +15529,45 @@ main .credits { padding: 20rem 172px 0; text-align: left; } + #china_achievements .title { font-weight: 500; font-size: 100px; line-height: 90px; - color: #1E33DA; + color: #1e33da; letter-spacing: -0.04em; width: 50vw; } + #china_achievements .description { font-weight: 400; font-size: 18px; line-height: 26px; color: #020225; } + #china_achievements .tiles-box { margin-top: 10rem; padding-bottom: 20rem; } + #china_achievements .tiles-box .column { margin-bottom: 5rem; } + #china_achievements .offset-left-columns { margin-left: -10rem; } + #baozun_group { margin-top: 150px; background: url("/img/baozun.jpg") no-repeat; background-size: cover; border-radius: 80px; } + #baozun_group .title { - color: #FFFDFC; + color: #fffdfc; font-style: normal; font-weight: 600; font-size: 100px; @@ -13606,7 +15577,6 @@ main .credits { padding-top: 464px; } - .counter-block .big-number { font-weight: 600; font-size: 140px; @@ -13629,350 +15599,97 @@ main .credits { border-radius: 80px; } - /** responsive land */ - - -@media screen and (max-width: 950px) { - - #baozun_group , #coming_soon, .credits{ - margin: 0 0; - position: relative; - top: 900vw; - } -} -@media screen and (max-width: 900px) { - - #unlock, - #unlock_white img{ - height: 10rem; - } - .button.is-responsive.is-small { - font-size: 0.5625rem; - } - - .button.is-responsive, - .button.is-responsive.is-normal { - font-size: 0.65625rem; - } - - .button.is-responsive.is-medium { - font-size: 0.75rem; - } - - .button.is-responsive.is-large { - font-size: 1rem; - } - - #content_all h2, #welcome h2{ - font-size: 4em; - } -} - - -@media all and (max-width: 1100px) { - #we_develop .ar { - margin-top: -3rem; - } - .section { - padding: 3rem 3rem; - } - - .section.is-medium { - padding: 9rem 4.5rem; - } - - .section.is-large { - padding: 18rem 6rem; - } - - section#carry { - padding-left: 10vw; - padding-right: 10vw; - min-height: 115rem; - margin-top: 15vh; - } - section#carry .title { - font-size: 4rem; - } - section#carry .description { - margin-top: 3vh; - font-size: 10rem; - } - section#carry .computer-block { - background-size: contain; - position: relative; - height: 100vh; - width: 100%; - margin-top: 50vh; - } - section#carry .gradient-bg { - margin-top: 0; - } - section#carry .gradient-bg-yellow { - margin-top: 0; - } - section#carry .bubbles { - position: static; - } - section#carry .bubbles p { - margin-top: 2rem; - left: 0; - } - section#carry .bubbles p :nth-of-type(1) { - left: 10%; - } - section#carry .bubbles p :nth-of-type(2) { - left: 70%; - } - section#carry .bubbles p :nth-of-type(3) { - left: 4vw; - margin-left: -60%; - } - section#carry .bubbles p :nth-of-type(4) { - left: -10%; - top: -100vh; - } - #popover , #portfolio{ - height: 120vw; - } - #popover .phone-container, #portfolio .phone-container { - width: 410px; - left: 15vw; - } - #kyc .bubbles{ - margin-top: -100vw; - } -} -@media screen and (max-width: 1200px) { - #baozun_group { - margin-top: 650vw; - } -} - -@media screen and (max-width: 1300px) { - #transactionnal_webdesign { - min-height: 100vh; - padding-top: 5vh; - } - #transactionnal_webdesign .title { - font-size: 4rem; - } - #transactionnal_webdesign .description { - font-size: 9rem; - } -} - - -@media all and (max-width: 1500px) { - #we_develop .circle.circle-right { - right: 10vw; - } - #we_develop .circle.circle-left { - right: 90vw; - } - #we_develop .quick { - left: 3rem; - top: 77rem; - } - #we_develop .long_term { - margin-right: 5rem; - } - #we_develop .data { - text-align: left; - padding-left: 6rem; - margin-top: 2rem; - } - #we_develop .ar { - text-align: right; - padding-right: 6rem; - margin-top: 3rem; - } - #full_creative { - padding-bottom: 20rem; - } - #full_creative .title { - padding: 2rem; - } - #full_creative .column { - padding: 2rem; - } - #full_creative .column p { - font-size: 1.5rem; - } - #full_creative .column, #full_creative .columns { - display: block; - } - #full_creative img { - margin-bottom: 15rem; - } - - #our_team { - margin-top: 70vw; - padding-bottom: 20rem; - } - #our_team img { - max-width: 100%; - margin: 0 auto; - } - #our_team .columns, #our_team .colmumn { - display: block; - position: static; - } - #our_team .name { - font-size: 1.5rem; - } - #our_team .sub-category { - margin-bottom: 10rem; - } - #china_achievements { - margin-top: 895vw; - } - #china_achievements p { - font-size: 2rem; - } - #china_achievements .column, #china_achievements .columns { - position: static; - display: block; - } - #china_achievements .offset-left-columns { - margin-left: 0; - } - #china_achievements .text-description { - font-size: 2rem; - } - #china_achievements .big-number { - font-size: 10rem; - text-align: center; - } - #china_achievements .picture { - margin-left: 0; - width: 100%; - } - #china_achievements .title { - width: 100%; - } - #baozun_group , #coming_soon, .credits{ - margin: 0 0; - position: relative; - top: 700vw; - } -} - -@media all and (max-width: 1600px) { - section#carry { - min-height: 120rem; - } - section#carry .description { - margin-top: 3vh; - font-size: 8rem; - } - section#carry .gradient-bg { - top: -40rem; - } - section#carry .gradient-bg-yellow { - top: 10rem; - } - section#carry .computer-block { - width: 100%; - height: 1080px; - left: 0; - top: -154vw; - background-size: contain; - margin: 0 auto; - } - section#carry .bubbles { - position: relative; - left: -5vw; - } - section#carry .bubbles p :nth-of-type(1) { - top: -75vh; - } - section#carry .bubbles p :nth-of-type(2) { - left: 70%; - } - section#carry .bubbles p :nth-of-type(3) { - left: 20%; - top: -200vw; - } - section#carry .bubbles p :nth-of-type(4) { - left: 10%; - top: -319vw; - } -} - @media screen and (max-width: 500px) { - .burger-menu span{ + .burger-menu span, + .circle-right, + .circle-left, + .arrow-left, .arrow-right { display: none; } - #content_first{ + + #transactionnal_webdesign .title, + #content_first, #for_all_your { font-size: 2rem; } - #for_all_your{ - font-size: 2rem; + + #welcome h2 { + font-size: 4rem; } - #content_all .columns{ + + #content_all .columns { max-width: 100vw; } + .flip-container + .flip-container { margin-top: 40vh !important; } - #transactionnal_webdesign .title { - font-size: 2rem; - } + #transactionnal_webdesign .description { font-size: 5rem !important; padding-top: 4rem; } + #transactionnal_webdesign .sub-title { font-weight: 600; font-size: 5rem; } + #transactionnal_webdesign { min-height: 160vh; } + section#carry .description { margin-top: 3vh; font-size: 5rem; } + section#carry .computer-block { margin-top: 32vh; } + #carry .bubbles p:nth-of-type(1) { left: -7%; top: -93rem; } + #carry .bubbles p:nth-of-type(2) { left: 36%; top: -112rem; } + #carry .bubbles p:nth-of-type(3) { left: -10vw; } - #kyc .description2{ + + #kyc .description2 { font-size: 3rem; padding: 0 1rem; } + #kyc .title { font-size: 5rem; line-height: 1em; } - #kyc .bubbles .bubble span - { + + #kyc .bubbles .bubble span { margin-left: 0; } + #kyc .bubbles .bubble:nth-of-type(2) { margin-left: -2rem; } + #kyc .bubbles { margin-top: -244vw; } - #china{ + + #china { height: 200vh; } @@ -13980,43 +15697,54 @@ responsive land font-size: 3rem; margin-bottom: 1rem; } + #we_develop .title { font-size: 3rem; } + #we_develop .circle.circle-left { left: 1vw; } + #we_develop .circle.circle-right { right: 1vw; } + #we_develop .long_term { margin-right: 5rem; margin-top: -37rem; } + #we_develop .quick { left: 4rem; top: 97rem; } + #full_creative .title { padding: 1rem; font-size: 5rem; } + #our_team { margin-top: 50rem; padding-bottom: 20rem; } - #our_team .title{ + + #our_team .title { font-size: 10rem; line-height: 7rem; } + #our_team .sub-category { margin-bottom: 10rem; padding-left: 0rem; } - #china_achievements{ + + #china_achievements { padding: 1rem; margin-top: 950vw; } + #china_achievements .big-number { font-size: 8rem; } @@ -14024,14 +15752,59 @@ responsive land #baozun_group { margin-top: 1126vw; } + #baozun_group .title { padding-top: 25vh; } - #baozun_group , #coming_soon, .credits{ + #baozun_group, #coming_soon, .credits { margin: 0 0; position: relative; top: 1200vw; } + #popover { + margin-top: 132vw; + } + + /** + flipping part + */ + #flipping_zone { + margin-top: -100vh; + position: static; + } + + .flip-container { + position: relative; + } + + .flip-container + .flip-container { + margin-top: 40vh; + } + + .flip-container .container-text { + z-index: 1; + left: 2rem; + } + + .flip-container .text-title { + margin-top: 0; + } + + .flip-container .phone-container { + left: 42vw; + top: 5vh; + } + + .flip-container.flip-from-left .container-text { + left: 0; + top: 5vh; + } + + .flip-container.flip-from-left .phone-container { + left: 0; + top: 10vh; + } + } diff --git a/js/animations_custom.js b/js/animations_custom.js index e9d62ab..f5806f6 100644 --- a/js/animations_custom.js +++ b/js/animations_custom.js @@ -10,20 +10,21 @@ let enable_animations = false enable_animations = true const rotateYCard = '200deg' -const offsetCard = '-=100' +const offsetCard = '10' function animateCard (id, side) { + console.log('animateCard', id, side, offsetCard) const fromObject = { rotateY: rotateYCard, - side: offsetCard + // side: offsetCard } let toObject = { rotateY: 0, duration: 0.2, ease: 'easeInOut', - side: 0, + // side: 1, scrollTrigger: { trigger: '#content-' + id + ' .flip-handle', start: 'top 80%', @@ -31,7 +32,8 @@ function animateCard (id, side) { markers: development_debug, } } - // toObject[side] = offsetCard; + fromObject[side] = 0; + toObject[side] = offsetCard; gsap.fromTo('#content-' + id, fromObject, toObject) @@ -79,32 +81,24 @@ if (enable_animations) { trigger: '#unlock_white', delay: 1, scrub:2, - start: '+=50% 80%' + start: '50% 80%' } }) - gsap.to('#main_title', { + gsap.fromTo('#main_title', + { + top: 400, + opacity: 1, + }, + { delay: 1, - // xPercent: ()=>nav.offsetHeight, scrollTrigger: { trigger: '#main_title', scrub: 1, markers: development_debug, }, - keyframes: [ - { - top: '-=50', - width: '100vw', - }, - { - top: '-=50', - width: "-=5vw", - }, - { - top: '-=100', - width: '-=40vw', - }] + top: 200, }) gsap.fromTo('#hand', @@ -179,20 +173,6 @@ if (enable_animations) { } }) - gsap.to('#phone-watches-4', - { - left: '50vw', - top: -10, - scale: 0.5, - duration: 3, - ease: 'sine', - scrollTrigger: { - trigger: '#welcome', - scrub: 2, - markers: development_debug, - } - }) - gsap.fromTo('#content_first', { scale: 0.5, @@ -234,7 +214,7 @@ if (enable_animations) { gsap.fromTo('#content_all_img', { scale: 1, - left: "-=100" + left: -100 }, { scale: 1.1, @@ -252,7 +232,7 @@ if (enable_animations) { { opacity: 0.5, scale: 1, - bottom: '-=100vh', + bottom: '-100vh', height: '10rem', }, {