/*! chota.css | MIT License | github.com/jenil/chota */ :root { --primary-color: #1a9f60; --lightGrey-color: #d2d6dd; --darkGrey-color: #84868b; --grid-maxWidth: 120rem; --grid-gutter: 2rem; --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } * { box-sizing: border-box; } html { font-size: 62.5%; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { letter-spacing: 0.01em; line-height: 1.6; font-size: 1.6rem; font-weight: 400; font-family: "Segoe UI", "Helvetica Neue", san-serif; /*fallback*/ font-family: var(--font-family); margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0.35em 0 0.7em 0; } h1 { font-size: 2em; } h2 { font-size: 1.75em; } h3 { font-size: 1.5em; } h4 { font-size: 1.25em; } h5 { font-size: 1em; } h6 { font-size: 0.85em; } a { color: var(--primary-color); text-decoration: none; } a:hover:not(.button) { opacity: 0.6; } p { margin-top: 0; } blockquote { background-color: #f3f3f3; padding: 1.5rem 2rem; border-left: 3px solid var(--lightGrey-color); } dl dt { font-weight: bold; } hr { border: none; background-color: var(--lightGrey-color); height: 1px; margin: 1rem 0; } table { width: 100%; border: none; border-collapse: collapse; border-spacing: 0; text-align: left; } td, th { vertical-align: middle; padding: 1.2rem 0.4rem; } thead { border-bottom: 2px solid var(--lightGrey-color); } tfoot { border-top: 2px solid var(--lightGrey-color); } code, kbd, pre, samp, tt { font-family: monaco, "Consolas", "Lucida Console", monospace; } code, kbd { padding: 0 0.4rem; font-size: 90%; white-space: pre-wrap; border-radius: 4px; color: #c62424; padding: 0.2em 0.4em; background-color: #f7f7f7; } pre { background-color: #f7f7f7; font-size: 1em; padding: 1rem; overflow-x: auto; } pre code { background: none; padding: 0; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } img { max-width: 100%; } fieldset { border: 1px solid var(--lightGrey-color); } iframe { border: 0; } .container { max-width: var(--grid-maxWidth); margin: 0 auto; width: 96%; padding: 0 calc(var(--grid-gutter) / 2); } .row { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: start; justify-content: flex-start; margin-left: calc(var(--grid-gutter) / -2); margin-right: calc(var(--grid-gutter) / -2); } .col { -ms-flex: 1; flex: 1; } .col, [class*=" col-"], [class^='col-'] { margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2); } .col-1 { -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); max-width: calc((100% / (12/1)) - var(--grid-gutter)); } .col-2 { -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); max-width: calc((100% / (12/2)) - var(--grid-gutter)); } .col-3 { -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); max-width: calc((100% / (12/3)) - var(--grid-gutter)); } .col-4 { -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); max-width: calc((100% / (12/4)) - var(--grid-gutter)); } .col-5 { -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); max-width: calc((100% / (12/5)) - var(--grid-gutter)); } .col-6 { -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); max-width: calc((100% / (12/6)) - var(--grid-gutter)); } .col-7 { -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); max-width: calc((100% / (12/7)) - var(--grid-gutter)); } .col-8 { -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); max-width: calc((100% / (12/8)) - var(--grid-gutter)); } .col-9 { -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); max-width: calc((100% / (12/9)) - var(--grid-gutter)); } .col-10 { -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); max-width: calc((100% / (12/10)) - var(--grid-gutter)); } .col-11 { -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); max-width: calc((100% / (12/11)) - var(--grid-gutter)); } .col-12 { -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); max-width: calc((100% / (12/12)) - var(--grid-gutter)); } @media screen and (max-width: 768px) { .container { width: 100%; } .col, [class*=" col-"], [class^='col-'] { -ms-flex: 0 1 100%; flex: 0 1 100%; max-width: 100%; } } fieldset { padding: 0.5rem 2rem; } legend { text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.1rem; } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]), select, textarea, textarea[type="text"] { font-family: inherit; padding: 0.7rem 1rem; border-radius: 4px; border: 1px solid var(--lightGrey-color); font-size: 1em; transition: all 0.2s ease; display: block; width: 100%; } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):hover, select:hover, textarea:hover, textarea[type="text"]:hover { border-color: #aaa; } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus, select:focus, textarea:focus, textarea[type="text"]:focus { outline: none; border-color: var(--primary-color); } select { -webkit-appearance: none; background: #fafafa no-repeat 100%; background-size: 1ex; background-origin: content-box; background-image: url("data:image/svg+xml;utf8,"); } [type="checkbox"], [type="radio"] { width: 1.6rem; height: 1.6rem; } /* BUTTONS */ .button, [type="button"], [type="reset"], [type="submit"], button { padding: 1rem 2.5rem; color: #333; background: #e6e6e6; border-radius: 4px; border: none; font-size: 1.5rem; line-height: 1; text-align: center; transition: opacity 0.2s ease; text-decoration: none; transform: scale(1); display: inline-block; } .button + .button { margin-left: 1rem; } .button:hover, [type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover, button:hover { opacity: 0.8; } .button:active, [type="button"]:active, [type="reset"]:active, [type="submit"]:active, button:active { transform: scale(0.98); } input[disabled], button[disabled], input[disabled]:hover, button[disabled]:hover { opacity: 0.4; cursor: not-allowed; } .button.primary, .button.secondary, [type="submit"] { color: #fff; background-color: #000; background: var(--primary-color); } .button.secondary { background: var(--darkGrey-color); } .button.outline { background-color: transparent; border: 1px solid var(--lightGrey-color); } .button.outline.primary { border-color: var(--primary-color); color: var(--primary-color); } .button.outline.secondary { border-color: var(--darkGrey-color); color: var(--darkGrey-color); } .button.clear { background-color: transparent; border-color: transparent; color: var(--primary-color); } .nav { display: -ms-flexbox; display: flex; min-height: 5rem; -ms-flex-align: stretch; align-items: stretch; } .nav img { max-height: 3rem; } .nav>.container { display: -ms-flexbox; display: flex; } .nav-center, .nav-left, .nav-right { display: -ms-flexbox; display: flex; -ms-flex: 1; flex: 1; } .nav-left { -ms-flex-pack: start; justify-content: flex-start; } .nav-right { -ms-flex-pack: end; justify-content: flex-end; } .nav-center { -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 480px) { .nav, .nav>.container { -ms-flex-direction: column; flex-direction: column; } .nav-center, .nav-left, .nav-right { -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; } } .nav a, .nav .brand { text-decoration: none; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 1rem 2rem; color: #555; } .nav .active:not(.button) { color: #000; /* fallback */ color: var(--primary-color); } .nav .brand { font-size: 1.75em; padding-top: 0; padding-bottom: 0; } .nav .brand img { padding-right: 1rem; } .nav .button { margin: auto 1rem; } .card { padding: 1rem 2rem; border-radius: 4px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); } .card p:last-child { margin: 0; } .card header > * { margin-top: 0; margin-bottom: 1rem; } .tabs { display: -ms-flexbox; display: flex; } .tabs a { text-decoration: none; } .tabs > a { padding: 1rem 2rem; -ms-flex: 0 1 auto; flex: 0 1 auto; color: #555; border-bottom: 2px solid var(--lightGrey-color); text-align: center; } .tabs > a.active, .tabs > a:hover { opacity: 1; border-bottom: 2px solid #555; } .tabs > a.active { border-color: var(--primary-color); } .tabs.is-full a { -ms-flex: 1; flex: 1; } .tag { display: inline-block; border: 1px solid var(--lightGrey-color); text-transform: uppercase; color: var(--darkGrey-color); padding: 0.5rem; line-height: 1; letter-spacing: 0.5px; } .tag.is-small { padding: 0.4rem; font-size: 0.75em; } .tag.is-large { padding: 0.7rem; font-size: 1.125em; } .tag+.tag { margin-left: 1rem; } .pull-right { float: right; } .pull-left { float: left; } .is-text-center { text-align: center; } .is-text-left { text-align: left; } .is-text-right { text-align: right; } .is-text-uppercase { text-transform: uppercase; } .is-text-lowercase { text-transform: lowercase; } .is-text-capitalize { text-transform: capitalize; } .is-full-screen { width: 100%; min-height: 100vh; } .is-full-width { width: 100%; } .is-vertical-align { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .is-horizontal-align { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; } .is-center { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } .is-right { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; } .is-left { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: start; justify-content: flex-start; } .is-fixed { position: fixed; width: 100%; } .is-paddingless { padding: 0 !important; } .is-marginless { margin: 0 !important; } .clearfix { content: ""; display: table; clear: both; } .is-hidden { display: none !important; } @media screen and (max-width: 480px) { .hide-phone { display: none; } } @media screen and (max-width: 768px) { .hide-tablet { display: none; } }