/** * Power function */ /** * Modular typography scale function */ /** * Container */ /** * Standard button */ /** * Clearfix */ /** * Rem units: normal and small, defined on the tag. Switches to small on $size-switch. * Rem's are used in Pavilion for box model sizing, positioning and adjustments. */ /** * Em units: normal and small, defined on the tag. Switches to small on $size-switch. * Em's are used in Pavilion for typographic elements. */ /** * Breakpoints */ /* Minimum screenwidth for phone landscape. */ /* Minimum screenwidth for tablet portrait. */ /* Minimum screenwidth for tablet landscape. */ /* Minimum screenwidth for desktop. */ /* Margin added to each breakpoints minimum width. */ /* Minimum screenwidth at which the EM & REM sizes switch from small to normal. */ /** * Border width and radius for buttons and inputs. */ /* also used on horizontal rules */ /** * Colors and tints. */ /** * Heading sizes with modular scaling. * Increase or decrease the number behind the decimal point. * For scale ratios see: http://type-scale.com/ */ /* equals 1em. */ /** * Font-weights, you can set your own values to match your font specs. */ /** * Base and heading font-weights. */ /** * Base line-height. */ /** * Base and heading font stack. */ /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ /* Document ========================================================================== */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ 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. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ 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. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /** * HTML tag properties * REM size normal and small are set here for component sizing. */ html { font-size: 10px; /* Small rem-size */ } @media (min-width: 768px) { html { font-size: 15px; /* Regular font-size */ } } /** * Body properties * EM size is set here for typography elements. */ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; line-height: 1.45; color: #333333; font-size: 16px; /* Small font-size */ } @media (min-width: 768px) { body { font-size: 18px; /* Regular font-size */ } } /** * Border-box-sizing on all elements & pseudo elements */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /** * Container base styles. */ .container, .container-full-width, .container-pp, .container-pl, .container-tp, .container-tl { margin: 0 auto; padding-right: 1.5rem; padding-left: 1.5rem; } @media (min-width: 768px) { .container, .container-full-width, .container-pp, .container-pl, .container-tp, .container-tl { padding-right: 1rem; padding-left: 1rem; } } .container:before, .container-full-width:before, .container-pp:before, .container-pl:before, .container-tp:before, .container-tl:before { content: " "; display: table; } .container:after, .container-full-width:after, .container-pp:after, .container-pl:after, .container-tp:after, .container-tl:after { content: " "; display: table; clear: both; } /** * Media queries for containers, set container size per media query. */ @media (min-width: 540px) { .container, .container-tl, .container-tp, .container-pl { max-width: 520px; } } @media (min-width: 768px) { .container, .container-tl, .container-tp { max-width: 748px; } } @media (min-width: 991px) { .container, .container-tl { max-width: 971px; } } @media (min-width: 1200px) { .container { max-width: 1180px; } } /** * Rows & Columns */ .row { margin-right: -1.5rem; margin-left: -1.5rem; } @media (min-width: 768px) { .row { margin-right: -1rem; margin-left: -1rem; } } .row:before { content: " "; display: table; } .row:after { content: " "; display: table; clear: both; } .row .col-pp-10, .row .col-pp-20, .row .col-pp-25, .row .col-pp-30, .row .col-pp-33, .row .col-pp-40, .row .col-pp-50, .row .col-pp-60, .row .col-pp-70, .row .col-pp-66, .row .col-pp-75, .row .col-pp-80, .row .col-pp-90, .row .col-pp-100, .row .col-pl-10, .row .col-pl-20, .row .col-pl-25, .row .col-pl-30, .row .col-pl-33, .row .col-pl-40, .row .col-pl-50, .row .col-pl-60, .row .col-pl-66, .row .col-pl-70, .row .col-pl-75, .row .col-pl-80, .row .col-pl-90, .row .col-pl-100, .row .col-tp-10, .row .col-tp-20, .row .col-tp-25, .row .col-tp-30, .row .col-tp-33, .row .col-tp-40, .row .col-tp-50, .row .col-tp-60, .row .col-tp-66, .row .col-tp-70, .row .col-tp-75, .row .col-tp-80, .row .col-tp-90, .row .col-tp-100, .row .col-tl-10, .row .col-tl-20, .row .col-tl-25, .row .col-tl-30, .row .col-tl-33, .row .col-tl-40, .row .col-tl-50, .row .col-tl-60, .row .col-tl-66, .row .col-tl-70, .row .col-tl-75, .row .col-tl-80, .row .col-tl-90, .row .col-tl-100, .row .col-dt-10, .row .col-dt-20, .row .col-dt-25, .row .col-dt-30, .row .col-dt-33, .row .col-dt-40, .row .col-dt-50, .row .col-dt-60, .row .col-dt-66, .row .col-dt-70, .row .col-dt-75, .row .col-dt-80, .row .col-dt-90, .row .col-dt-100 { position: relative; width: 100%; float: left; padding-right: 1.5rem; padding-left: 1.5rem; } @media (min-width: 768px) { .row .col-pp-10, .row .col-pp-20, .row .col-pp-25, .row .col-pp-30, .row .col-pp-33, .row .col-pp-40, .row .col-pp-50, .row .col-pp-60, .row .col-pp-70, .row .col-pp-66, .row .col-pp-75, .row .col-pp-80, .row .col-pp-90, .row .col-pp-100, .row .col-pl-10, .row .col-pl-20, .row .col-pl-25, .row .col-pl-30, .row .col-pl-33, .row .col-pl-40, .row .col-pl-50, .row .col-pl-60, .row .col-pl-66, .row .col-pl-70, .row .col-pl-75, .row .col-pl-80, .row .col-pl-90, .row .col-pl-100, .row .col-tp-10, .row .col-tp-20, .row .col-tp-25, .row .col-tp-30, .row .col-tp-33, .row .col-tp-40, .row .col-tp-50, .row .col-tp-60, .row .col-tp-66, .row .col-tp-70, .row .col-tp-75, .row .col-tp-80, .row .col-tp-90, .row .col-tp-100, .row .col-tl-10, .row .col-tl-20, .row .col-tl-25, .row .col-tl-30, .row .col-tl-33, .row .col-tl-40, .row .col-tl-50, .row .col-tl-60, .row .col-tl-66, .row .col-tl-70, .row .col-tl-75, .row .col-tl-80, .row .col-tl-90, .row .col-tl-100, .row .col-dt-10, .row .col-dt-20, .row .col-dt-25, .row .col-dt-30, .row .col-dt-33, .row .col-dt-40, .row .col-dt-50, .row .col-dt-60, .row .col-dt-66, .row .col-dt-70, .row .col-dt-75, .row .col-dt-80, .row .col-dt-90, .row .col-dt-100 { padding-right: 1rem; padding-left: 1rem; } } .row .col-pp-10 { width: 10%; } .row .col-pp-20 { width: 20%; } .row .col-pp-25 { width: 25%; } .row .col-pp-30 { width: 30%; } .row .col-pp-33 { width: 33.3333%; } .row .col-pp-40 { width: 40%; } .row .col-pp-50 { width: 50%; } .row .col-pp-60 { width: 60%; } .row .col-pp-66 { width: 66.6666%; } .row .col-pp-70 { width: 70%; } .row .col-pp-75 { width: 75%; } .row .col-pp-80 { width: 80%; } .row .col-pp-90 { width: 90%; } .row .col-pp-100 { width: 100%; } @media (min-width: 540px) { .row .col-pl-10 { width: 10%; } .row .col-pl-20 { width: 20%; } .row .col-pl-25 { width: 25%; } .row .col-pl-30 { width: 30%; } .row .col-pl-33 { width: 33.3333%; } .row .col-pl-40 { width: 40%; } .row .col-pl-50 { width: 50%; } .row .col-pl-60 { width: 60%; } .row .col-pl-66 { width: 66.6666%; } .row .col-pl-70 { width: 70%; } .row .col-pl-75 { width: 75%; } .row .col-pl-80 { width: 80%; } .row .col-pl-90 { width: 90%; } .row .col-pl-100 { width: 100%; } } @media (min-width: 768px) { .row .col-tp-10 { width: 10%; } .row .col-tp-20 { width: 20%; } .row .col-tp-25 { width: 25%; } .row .col-tp-30 { width: 30%; } .row .col-tp-33 { width: 33.3333%; } .row .col-tp-40 { width: 40%; } .row .col-tp-50 { width: 50%; } .row .col-tp-60 { width: 60%; } .row .col-tp-66 { width: 66.6666%; } .row .col-tp-70 { width: 70%; } .row .col-tp-75 { width: 75%; } .row .col-tp-80 { width: 80%; } .row .col-tp-90 { width: 90%; } .row .col-tp-100 { width: 100%; } } @media (min-width: 991px) { .row .col-tl-10 { width: 10%; } .row .col-tl-20 { width: 20%; } .row .col-tl-25 { width: 25%; } .row .col-tl-30 { width: 30%; } .row .col-tl-33 { width: 33.3333%; } .row .col-tl-40 { width: 40%; } .row .col-tl-50 { width: 50%; } .row .col-tl-60 { width: 60%; } .row .col-tl-66 { width: 66.6666%; } .row .col-tl-70 { width: 70%; } .row .col-tl-75 { width: 75%; } .row .col-tl-80 { width: 80%; } .row .col-tl-90 { width: 90%; } .row .col-tl-100 { width: 100%; } } @media (min-width: 1200px) { .row .col-dt-10 { width: 10%; } .row .col-dt-20 { width: 20%; } .row .col-dt-25 { width: 25%; } .row .col-dt-30 { width: 30%; } .row .col-dt-33 { width: 33.3333%; } .row .col-dt-40 { width: 40%; } .row .col-dt-50 { width: 50%; } .row .col-dt-60 { width: 60%; } .row .col-dt-66 { width: 66.6666%; } .row .col-dt-70 { width: 70%; } .row .col-dt-75 { width: 75%; } .row .col-dt-80 { width: 80%; } .row .col-dt-90 { width: 90%; } .row .col-dt-100 { width: 100%; } } /** * Offsets for columns */ @media (max-width: 539px) { .offset-pp-10 { margin-left: 10%; } .offset-pp-20 { margin-left: 20%; } .offset-pp-25 { margin-left: 25%; } .offset-pp-30 { margin-left: 30%; } .offset-pp-33 { margin-left: 33.3333%; } .offset-pp-40 { margin-left: 40%; } .offset-pp-50 { margin-left: 50%; } .offset-pp-60 { margin-left: 60%; } .offset-pp-66 { margin-left: 66.6666%; } .offset-pp-70 { margin-left: 70%; } .offset-pp-75 { margin-left: 75%; } .offset-pp-80 { margin-left: 80%; } .offset-pp-90 { margin-left: 90%; } } @media (min-width: 540px) and (max-width: 767px) { .offset-pl-10 { margin-left: 10%; } .offset-pl-20 { margin-left: 20%; } .offset-pl-25 { margin-left: 25%; } .offset-pl-30 { margin-left: 30%; } .offset-pl-33 { margin-left: 33.3333%; } .offset-pl-40 { margin-left: 40%; } .offset-pl-50 { margin-left: 50%; } .offset-pl-60 { margin-left: 60%; } .offset-pl-66 { margin-left: 66.6666%; } .offset-pl-70 { margin-left: 70%; } .offset-pl-75 { margin-left: 75%; } .offset-pl-80 { margin-left: 80%; } .offset-pl-90 { margin-left: 80%; } } @media (min-width: 768px) and (max-width: 990px) { .offset-tp-10 { margin-left: 10%; } .offset-tp-20 { margin-left: 20%; } .offset-tp-25 { margin-left: 25%; } .offset-tp-30 { margin-left: 30%; } .offset-tp-33 { margin-left: 33.3333%; } .offset-tp-40 { margin-left: 40%; } .offset-tp-50 { margin-left: 50%; } .offset-tp-60 { margin-left: 60%; } .offset-tp-66 { margin-left: 66.6666%; } .offset-tp-70 { margin-left: 70%; } .offset-tp-75 { margin-left: 75%; } .offset-tp-80 { margin-left: 80%; } .offset-tp-90 { margin-left: 90%; } } @media (min-width: 991px) and (max-width: 1199px) { .offset-tl-10 { margin-left: 10%; } .offset-tl-20 { margin-left: 20%; } .offset-tl-25 { margin-left: 25%; } .offset-tl-30 { margin-left: 30%; } .offset-tl-33 { margin-left: 33.3333%; } .offset-tl-40 { margin-left: 40%; } .offset-tl-50 { margin-left: 50%; } .offset-tl-60 { margin-left: 60%; } .offset-tl-66 { margin-left: 66.6666%; } .offset-tl-70 { margin-left: 70%; } .offset-tl-75 { margin-left: 75%; } .offset-tl-80 { margin-left: 80%; } .offset-tl-90 { margin-left: 90%; } } @media (min-width: 1200px) { .offset-dt-10 { margin-left: 10%; } .offset-dt-20 { margin-left: 20%; } .offset-dt-25 { margin-left: 25%; } .offset-dt-30 { margin-left: 30%; } .offset-dt-33 { margin-left: 33.3333%; } .offset-dt-40 { margin-left: 40%; } .offset-dt-50 { margin-left: 50%; } .offset-dt-60 { margin-left: 60%; } .offset-dt-66 { margin-left: 66.6666%; } .offset-dt-70 { margin-left: 70%; } .offset-dt-75 { margin-left: 75%; } .offset-dt-80 { margin-left: 80%; } .offset-dt-90 { margin-left: 90%; } } /** * Push classes for columns */ @media (max-width: 539px) { .push-pp-10 { left: 10%; } .push-pp-20 { left: 20%; } .push-pp-25 { left: 25%; } .push-pp-30 { left: 30%; } .push-pp-33 { left: 33.3333%; } .push-pp-40 { left: 40%; } .push-pp-50 { left: 50%; } .push-pp-60 { left: 60%; } .push-pp-66 { left: 66.6666%; } .push-pp-70 { left: 70%; } .push-pp-75 { left: 75%; } .push-pp-80 { left: 80%; } .push-pp-90 { left: 90%; } } @media (min-width: 540px) and (max-width: 767px) { .push-pl-10 { left: 10%; } .push-pl-20 { left: 20%; } .push-pl-25 { left: 25%; } .push-pl-30 { left: 30%; } .push-pl-33 { left: 33.3333%; } .push-pl-40 { left: 40%; } .push-pl-50 { left: 50%; } .push-pl-60 { left: 60%; } .push-pl-66 { left: 66.6666%; } .push-pl-70 { left: 70%; } .push-pl-75 { left: 75%; } .push-pl-80 { left: 80%; } .push-pl-90 { left: 90%; } } @media (min-width: 768px) and (max-width: 990px) { .push-tp-10 { left: 10%; } .push-tp-20 { left: 20%; } .push-tp-25 { left: 25%; } .push-tp-30 { left: 30%; } .push-tp-33 { left: 33.3333%; } .push-tp-40 { left: 40%; } .push-tp-50 { left: 50%; } .push-tp-60 { left: 60%; } .push-tp-66 { left: 66.6666%; } .push-tp-70 { left: 70%; } .push-tp-75 { left: 75%; } .push-tp-80 { left: 80%; } .push-tp-90 { left: 90%; } } @media (min-width: 991px) and (max-width: 1199px) { .push-tl-10 { left: 10%; } .push-tl-20 { left: 20%; } .push-tl-25 { left: 25%; } .push-tl-30 { left: 30%; } .push-tl-33 { left: 33.3333%; } .push-tl-40 { left: 40%; } .push-tl-50 { left: 50%; } .push-tl-60 { left: 60%; } .push-tl-66 { left: 66.6666%; } .push-tl-70 { left: 70%; } .push-tl-75 { left: 75%; } .push-tl-80 { left: 80%; } .push-tl-90 { left: 90%; } } @media (min-width: 1200px) { .push-dt-10 { left: 10%; } .push-dt-20 { left: 20%; } .push-dt-25 { left: 25%; } .push-dt-30 { left: 30%; } .push-dt-33 { left: 33.3333%; } .push-dt-40 { left: 40%; } .push-dt-50 { left: 50%; } .push-dt-60 { left: 60%; } .push-dt-66 { left: 66.6666%; } .push-dt-70 { left: 70%; } .push-dt-75 { left: 75%; } .push-dt-80 { left: 80%; } .push-dt-90 { left: 90%; } } /** * Pull classes for columns */ @media (max-width: 539px) { .pull-pp-10 { right: 10%; } .pull-pp-20 { right: 20%; } .pull-pp-25 { right: 25%; } .pull-pp-30 { right: 30%; } .pull-pp-33 { right: 33.3333%; } .pull-pp-40 { right: 40%; } .pull-pp-50 { right: 50%; } .pull-pp-60 { right: 60%; } .pull-pp-66 { right: 66.6666%; } .pull-pp-70 { right: 70%; } .pull-pp-75 { right: 75%; } .pull-pp-80 { right: 80%; } .pull-pp-90 { right: 90%; } } @media (min-width: 540px) and (max-width: 767px) { .pull-pl-10 { right: 10%; } .pull-pl-20 { right: 20%; } .pull-pl-25 { right: 25%; } .pull-pl-30 { right: 30%; } .pull-pl-33 { right: 33.3333%; } .pull-pl-40 { right: 40%; } .pull-pl-50 { right: 50%; } .pull-pl-60 { right: 60%; } .pull-pl-66 { right: 66.6666%; } .pull-pl-70 { right: 70%; } .pull-pl-75 { right: 75%; } .pull-pl-80 { right: 80%; } .pull-pl-90 { right: 90%; } } @media (min-width: 768px) and (max-width: 990px) { .pull-tp-10 { right: 10%; } .pull-tp-20 { right: 20%; } .pull-tp-25 { right: 25%; } .pull-tp-30 { right: 30%; } .pull-tp-33 { right: 33.3333%; } .pull-tp-40 { right: 40%; } .pull-tp-50 { right: 50%; } .pull-tp-60 { right: 60%; } .pull-tp-66 { right: 66.6666%; } .pull-tp-70 { right: 70%; } .pull-tp-75 { right: 75%; } .pull-tp-80 { right: 80%; } .pull-tp-90 { right: 90%; } } @media (min-width: 991px) and (max-width: 1199px) { .pull-tl-10 { right: 10%; } .pull-tl-20 { right: 20%; } .pull-tl-25 { right: 25%; } .pull-tl-30 { right: 30%; } .pull-tl-33 { right: 33.3333%; } .pull-tl-40 { right: 40%; } .pull-tl-50 { right: 50%; } .pull-tl-60 { right: 60%; } .pull-tl-66 { right: 66.6666%; } .pull-tl-70 { right: 70%; } .pull-tl-75 { right: 75%; } .pull-tl-80 { right: 80%; } .pull-tl-90 { right: 90%; } } @media (min-width: 1200px) { .pull-dt-10 { right: 10%; } .pull-dt-20 { right: 20%; } .pull-dt-25 { right: 25%; } .pull-dt-30 { right: 30%; } .pull-dt-33 { right: 33.3333%; } .pull-dt-40 { right: 40%; } .pull-dt-50 { right: 50%; } .pull-dt-60 { right: 60%; } .pull-dt-66 { right: 66.6666%; } .pull-dt-70 { right: 70%; } .pull-dt-75 { right: 75%; } .pull-dt-80 { right: 80%; } .pull-dt-90 { right: 90%; } } /** * Pargraphs & links */ p { margin-top: 0; margin-bottom: 1em; font-size: 1em; } a { color: #0080ff; text-decoration: none; } a:visited { color: #0080ff; } a:focus, a:hover { color: #005ab3; text-decoration: underline; } /** * Headings & corresponding classes */ h1, h2, h3, h4, h5, h6 { margin: 1.6em 0 0.5em; font-weight: 400; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } h1, .h1 { font-size: 2.0736em; } h1:not(.h1), .h1:not(.h1) { margin-top: 0; } h2, .h2 { font-size: 1.728em; } h3, .h3 { font-size: 1.44em; } h4, .h4 { font-size: 1.2em; } h5, .h5 { font-size: 1em; } small, h6, .h6 { font-size: 0.83333em; } /** * Blockquotes with a footer */ blockquote { border-left: 2px solid #333333; margin: 0 0 1em 0; padding: 0 1em; } blockquote footer { margin-top: 0.5em; font-size: 0.83333em; color: #737373; } blockquote footer:before { content: '\2014 \00A0'; } /** * Formatting */ code, kbd, pre { font-family: "Lucida Console", Monaco, monospace; font-size: calc(1em * 0.82); border-radius: 4px; } code, kbd { padding: 0.2em 0.5em; display: inline; vertical-align: baseline; background: #D9D9D9; } kbd { background: #333333; color: white; } pre { padding: 0.7rem 1rem; display: block; background-color: #D9D9D9; line-height: 1.45; overflow: auto; white-space: pre; } pre code, pre kbd { font-size: inherit; background-color: transparent; } mark { background-color: #ffffa8; /* Give a slightly softer yellow */ border-radius: 4px; } /** * Responsive typography */ @media (max-width: 539px) { .h1-pp { font-size: 2.0736em; } .h2-pp { font-size: 1.728em; } .h3-pp { font-size: 1.44em; } .h4-pp { font-size: 1.2em; } .h5-pp { font-size: 1em; } .h6-pp { font-size: 0.83333em; } } @media (min-width: 540px) and (max-width: 767px) { .h1-pl { font-size: 2.0736em; } .h2-pl { font-size: 1.728em; } .h3-pl { font-size: 1.44em; } .h4-pl { font-size: 1.2em; } .h5-pl { font-size: 1em; } .h6-pl { font-size: 0.83333em; } } @media (min-width: 768px) and (max-width: 990px) { .h1-tp { font-size: 2.0736em; } .h2-tp { font-size: 1.728em; } .h3-tp { font-size: 1.44em; } .h4-tp { font-size: 1.2em; } .h5-tp { font-size: 1em; } .h6-tp { font-size: 0.83333em; } } @media (min-width: 991px) and (max-width: 1199px) { .h1-tl { font-size: 2.0736em; } .h2-tl { font-size: 1.728em; } .h3-tl { font-size: 1.44em; } .h4-tl { font-size: 1.2em; } .h5-tl { font-size: 1em; } .h6-tl { font-size: 0.83333em; } } @media (min-width: 1200px) { .h1-dt { font-size: 2.0736em; } .h2-dt { font-size: 1.728em; } .h3-dt { font-size: 1.44em; } .h4-dt { font-size: 1.2em; } .h5-dt { font-size: 1em; } .h6-dt { font-size: 0.83333em; } } /** * Three button styles: default, outlined and stripped. * All of the buttons include the standard button styles. See mixins. */ .button { display: inline-block; text-decoration: none !important; font-family: inherit; line-height: 1.45; margin-right: 1rem; margin-bottom: 1rem; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 4px; cursor: pointer; } .button:focus { outline: none; } .button:active { transform: scale(0.97); } .button.h1, .button.h2, .button.h3, .button.h4, .button.h5, .button.h6 { padding-left: 0.9em; padding-right: 0.9em; } .button.button-default { background-color: #0080ff; color: white; } .button.button-default:visited { background-color: #0080ff; color: white; } .button.button-default:hover, .button.button-default:focus { background-color: #0066cc; color: white; } .button.button-default:active { background-color: #0061c2; color: white; } .button.button-outlined { background-color: transparent; border-color: #0080ff; color: #0080ff; } .button.button-outlined:visited { color: #0080ff; } .button.button-outlined:hover, .button.button-outlined:focus { color: #0066cc; border-color: #0066cc; } .button.button-outlined:active { color: #0061c2; border-color: #0061c2; } .button.button-stripped { background-color: transparent; color: #0080ff; } .button.button-stripped:visited { color: #0080ff; } .button.button-stripped:hover, .button.button-stripped:focus { color: #0066cc; } .button.button-stripped:active { color: #0061c2; } .button.button-full-width { display: block; width: 100%; } /** * Unordered lists & Ordered lists * These are considered typographic elements. * Paddings and margins set in EMs because the font size should dictate distances here. */ ul, ol { margin: 0 0 1em 1em; padding: 0; /* Extra padding for nested lists */ } ul li, ol li { margin-bottom: 0.2em; } ul ul, ul ol, ol ul, ol ol { margin: 0.4em 0 0.4em 1em; } /** * Description lists */ dl { margin: 0 0 1em 0; padding: 0; } dl dt { margin-bottom: 0.2em; } dl dd { margin: 0 0 0.2em 1em; } dl dl { margin: 0.4em 0 0.4em 1em; } /** * Base tag */ form { margin-bottom: 1.5rem; } /** * Global label styles, * Checkbox, Radiobutton - block/inline - , file upload. * * * Checkbox & Radio's are wrapped in labels * * * -moz-url-prefixes added to prevent weird alignment of radio and checkboxes */ label { display: block; margin-bottom: 0.5rem; } /** * form elements for extra bottom margin to structure forms. */ .form-part { border: 0; padding: 0; margin: 0 0 1.5rem; } .checkbox, .radio { padding-left: 25px; /* fixed padding because radio's and checkboxes don't scale well */ margin-top: 0; margin-bottom: 1rem; position: relative; display: table; cursor: pointer; } .checkbox input, .radio input { position: absolute; width: auto; margin: 0; left: 0; cursor: pointer; } .checkbox input[type="checkbox"], .radio input[type="checkbox"] { top: calc(1em / 3); } @-moz-document url-prefix() { .checkbox input[type="checkbox"], .radio input[type="checkbox"] { top: calc(1em / 2.6); } } .checkbox input[type="radio"], .radio input[type="radio"] { top: calc(1em / 4); } @-moz-document url-prefix() { .checkbox input[type="radio"], .radio input[type="radio"] { top: calc(1em / 2.7); } } /* inline checkbox & radio */ .checkbox-inline, .radio-inline { display: inline-block; margin-right: 1.2rem; margin-bottom: 0; } /** * General input styling */ input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"], select, textarea { font-family: inherit; font-size: inherit; display: block; width: 100%; border: 1px solid #D9D9D9; border-radius: 4px; line-height: 1.45; padding: 0.5rem 0.8rem; appearance: none; background-color: white; } input[type="text"]::placeholder, input[type="search"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="tel"]::placeholder, input[type="url"]::placeholder, input[type="number"]::placeholder, input[type="date"]::placeholder, input[type="month"]::placeholder, input[type="time"]::placeholder, input[type="datetime-local"]::placeholder, select::placeholder, textarea::placeholder { color: #737373; opacity: 1; } input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, select:focus, textarea:focus { border-color: #0080ff; outline: none; } /** * Specific Password styling */ input[type="password"] { font-family: verdana; } input[type="password"]::placeholder { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } /** * Specific file input styling */ input[type="file"] { line-height: 1; font-size: 16px; /* enforce for consistent behavior */ border: 0; padding-left: 0; padding-right: 0; } /** * Specific textarea styling */ textarea { width: 100% !important; min-height: 10rem; } /** * Specific select styling * Browser do not style selects in the same way as regular single line inputs * so additional css is required. */ select { cursor: pointer; } select:not([multiple]) { background-image: url("data:image/png;base64,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"); background-size: 20px; background-repeat: no-repeat; background-position: right center; background-origin: content-box; height: 3.5rem; } @media (min-width: 768px) { select:not([multiple]) { height: 2.87rem; } } select::-ms-expand { display: none; } @-moz-document url-prefix() { select { padding: 0.6rem 0.8rem; } } /** * Progress, meter and range styling */ progress, meter, input[type="range"] { width: 100%; } /** * Horizontal rule */ hr { margin-top: 1.5rem; margin-bottom: 1.5rem; border: 0; border-top: 1px solid #D9D9D9; } /** * Disabled styles for forms */ .disabled, [disabled] { pointer-events: none; cursor: default; opacity: 0.5; } .disabled [disabled], [disabled] [disabled] { opacity: 1; } /** * Table styling * * * thead, tbody, tfoot */ table { max-width: 100%; width: 100%; background-color: transparent; border-collapse: collapse; margin-bottom: 1.5rem; } table thead tr th { text-align: left; padding: 0.6rem; vertical-align: top; font-weight: 700; border-bottom: 1px solid #D9D9D9; } table tbody tr td, table tbody tr th { text-align: left; padding: 0.6rem; vertical-align: top; border-bottom: 1px solid #D9D9D9; } table tbody tr td:not(td), table tbody tr th:not(td) { font-weight: 700; } table tfoot tr td { font-weight: 700; text-align: left; padding: 0.6rem; vertical-align: top; border-bottom: none; } /** * Clearfix */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /** * Floats */ .float-left { float: left; } .float-right { float: right; } /** * Center block */ .center-block { display: block; margin-left: auto; margin-right: auto; } /** * Text align */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /** * Showing and hiding / specific viewports */ .show { display: block !important; } .hide, .show-pp, .show-pl, .show-tp, .show-tl, .show-dt { display: none !important; } @media (max-width: 539px) { .show-pp { display: block !important; } .hide-pp { display: none !important; } .text-center-pp { text-align: center; } .text-left-pp { text-align: left; } .text-right-pp { text-align: right; } } @media (min-width: 540px) and (max-width: 767px) { .show-pl { display: block !important; } .hide-pl { display: none !important; } .text-center-pl { text-align: center; } .text-left-pl { text-align: left; } .text-right-pl { text-align: right; } } @media (min-width: 768px) and (max-width: 990px) { .show-tp { display: block !important; } .hide-tp { display: none !important; } .text-center-tp { text-align: center; } .text-left-tp { text-align: left; } .text-right-tp { text-align: right; } } @media (min-width: 991px) and (max-width: 1199px) { .show-tl { display: block !important; } .hide-tl { display: none !important; } .text-center-tl { text-align: center; } .text-left-tl { text-align: left; } .text-right-tl { text-align: right; } } @media (min-width: 1200px) { .show-dt { display: block !important; } .hide-dt { display: none !important; } .text-center-dt { text-align: center; } .text-left-dt { text-align: left; } .text-right-dt { text-align: right; } } .show-elements { outline: 1px solid rgba(0, 0, 0, 0.3); } .show-elements * { outline: 1px solid rgba(0, 0, 255, 0.4); } .show-size { outline: none !important; } .show-size:after { font-family: "Lucida Console", Monaco, monospace; font-size: 0.83333em; padding: 0.5rem; background-color: #D9D9D9; border-radius: 4px; display: block; position: absolute; bottom: 2rem; left: 2rem; outline: none !important; } @media (max-width: 539px) { .show-size:after { content: "Phone portrait size"; } } @media (min-width: 540px) and (max-width: 767px) { .show-size:after { content: "Phone landscape size"; } } @media (min-width: 768px) and (max-width: 990px) { .show-size:after { content: "Tablet portrait size"; } } @media (min-width: 991px) and (max-width: 1199px) { .show-size:after { content: "Tablet landscape size"; } } @media (min-width: 1200px) { .show-size:after { content: "Desktop size"; } } body { color: #000; } body h1, body h2, body h3, body h4, body h5, body h6 { color: #000; } body a { color: #000; } .header { padding-top: 6rem; text-align: center; } .header h1, .header h2, .header h3, .header .languages { margin: 0; text-transform: uppercase; } .header h1 a { color: #000; text-decoration: none; } .header h2 { font-size: 1.2em; margin-top: 1rem; } .header .languages { padding-top: 0.5rem; font-size: 0.9em; } .about { margin-top: 4rem; margin-bottom: 2rem; } .projects h3 { font-size: 1em; font-weight: bold; text-transform: uppercase; } .projects p { font-size: 0.8em; } .social { text-align: center; margin-top: 2rem; margin-bottom: 4rem; font-size: 2em; } .contact { text-align: center; padding-top: 2rem; padding-bottom: 2rem; } .contact a { margin: 0; display: inline-block; border: 1px solid #000; border-radius: 0; color: #000; } .contact a:hover { background-color: #000; color: #fff; } .footer { text-align: center; font-size: 0.8em; padding-bottom: 4rem; } .footer a { color: #000; } .list { list-style: none; margin: 0; } .list--inline { padding: 0; } .list--inline > li { display: inline-block; } .list--inline > li > a, .list--inline > li span { display: inline-block; }